added fa config files, stub of Column editor

resources/assets/fa-config/fontcustom.yml

@@ -0,0 +1,18 @@
+font_name: fa-dtbl-1
+css_selector: '.fa-{{glyph}}'
+preprocessor_path: ''
+autowidth: true
+no_hash: true
+force: false
+debug: false
+quiet: false
+copyright: >-
+  The Fork Awesome font is licensed under the SIL OFL 1.1
+  (http://scripts.sil.org/OFL). Fork Awesome is a fork based of off Font Awesome
+  4.7.0 by Dave Gandy. More info on licenses at https://forkawesome.github.io
+font_em: 1792
+font_ascent: 1536
+font_descent: 256
+input:
+  vectors: svg
+fonts_path_relative_to_css: ./

resources/assets/fa-config/wanted.ini

@@ -0,0 +1,86 @@
+# used
+home            # My profile link
+sign-out        # logout menu button
+sign-in         # login form
+user-plus       # register icon
+user-circle-o   # profile header, menu
+vcard-o         # handle icon
+users           # public page users list
+user            # single user
+key-modern      # account setup link
+
+github          # social login
+facebook-square # social login
+google          # social login
+
+inbox           # button for the list of proposals
+
+th-list         # nbr of table rows
+comment         # comments button
+code-fork       # fork, or number of forks
+pencil          # edit / propose change button
+
+save            # form save btn
+link            # user homepage link icon
+globe           # form-group for URLs
+
+question-circle # form help bubble
+calendar        # user join date
+
+table           # icon in table list
+star-o          # table fab btn
+star            # table fav btn, active
+history         # nbr of revisions icon
+
+eye             # visit count
+
+download        # export buttons
+wrench          # Table options
+
+trash-o
+plus
+warning
+undo
+
+close
+hourglass
+
+sun-o
+moon-o
+
+chevron-up
+chevron-down
+
+
+# Unused
+; sliders
+;
+;
+; check
+; trash-o
+; trash
+; close
+;
+; eye
+; eye-slash
+; filter
+; flag
+; search
+;
+; legal
+; rss
+; reply
+;
+; bell
+; bell-o
+;
+; download
+; cloud-upload
+; share-alt
+;
+; sort
+; sort-asc
+; sort-desc
+; quote-left
+;
+; clock-o

resources/assets/js/components/ColumnEditorAdvanced.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <input type="hidden" :name="name" :value="JSON.stringify(columns)">
+    <table class="editor-table">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Title</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(col, i) in columns">
+          <td>
+            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="move(i, -1)">
+              <v-icon class="fa-chevron-up" alt="Move Up" />
+            </a><!--
+            --><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" @click.prevent="move(i, 1)">
+              <v-icon class="fa-chevron-down" alt="Move Down" />
+            </a>
+          </td>
+
+          <td>
+            <input v-model="col.name" class="form-control" type="text" style="width: 140px">
+          </td>
+
+          <td>
+            <select v-model="col.type" class="form-control custom-select" style="width: 110px">
+              <option v-for="t in colTypes" :value="t">{{t}}</option>
+            </select>
+          </td>
+
+          <td>
+            <input v-model="col.title" class="form-control" type="text" style="width: 170px">
+          </td>
+
+          <td class="text-nowrap">
+            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="delCol(i)">
+              <v-icon class="fa-trash-o" alt="Delete column" />
+            </a><!--
+            --><a href="" class="btn btn-outline-secondary" v-if="i === columns.length - 1"
+                  @click.prevent="addCol()">
+              <v-icon class="fa-plus" alt="Add Column" />
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "base";
+
+  table {
+    border-collapse: collapse;
+  }
+
+  td, th {
+    @include pr(1);
+    @include py(1);
+  }
+
+  td .btn {
+    @include mr(1);
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    name: String,
+    initialColumns: Array,
+  },
+  data: function() {
+    return {
+      columns: this.initialColumns,
+      colTypes: ['string', 'int', 'float', 'bool'],
+    }
+  },
+  methods: {
+    delCol(n) {
+      if (n == 0) return
+
+      this.columns.splice(n, 1)
+    },
+    addCol() {
+      this.columns.push({
+        name: '',
+        type: 'string',
+        title: '',
+      })
+    },
+    move(i, dir) {
+      let cur = this.columns[i];
+      let next = this.columns[i+dir];
+      this.$set(this.columns, i, next);
+      this.$set(this.columns, i+dir, cur);
+    }
+  }
+}
+</script>

resources/assets/js/vue-init.js

@@ -1,8 +1,9 @@
 window.Vue = require('vue')
 
-const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
-const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
-const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
+const ColumnEditor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
+const ColumnEditorAdvanced = Vue.component('column-editor', require('./components/ColumnEditorAdvanced.vue'))
+const RowsEditor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
+const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
 
 // const app = new Vue({
 //   el: '#app'
@@ -10,18 +11,15 @@ const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'))
 
 window.app = {
   ColumnEditor: function (selector, data) {
-    new ColumnEditorCtor({
-      propsData: data
-    }).$mount(selector)
+    new ColumnEditor({ propsData: data }).$mount(selector)
+  },
+  ColumnEditorAdvanced: function (selector, data) {
+    new ColumnEditorAdvanced({ propsData: data }).$mount(selector)
   },
   RowsEditor: function (selector, data) {
-    new RowsEditorCtor({
-      propsData: data
-    }).$mount(selector)
+    new RowsEditor({ propsData: data }).$mount(selector)
   },
   Icon: function (selector, data) {
-    new IconCtor({
-      propsData: data
-    }).$mount(selector)
+    new Icon({ propsData: data }).$mount(selector)
   }
 }

resources/views/table/propose/manage-columns.blade.php

@@ -1,6 +1,25 @@
-@php($tab='manage-columns')
+@php
+  $tab = 'manage-columns';
+  /** @var \App\Tables\Column[] $columns */
+  /** @var \App\Tables\Changeset $changeset */
+  /** @var \App\Models\Table $table */
+@endphp
+
 @extends('table.propose.layout')
 
 @section('tab-content')
-  ...
+  <div id="column-editor"></div>
 @stop
+
+@push('scripts')
+  <script>
+    ready(function() {
+      // TODO we need a better editor with ajax for adding, also with ordering
+      app.ColumnEditorAdvanced('#column-editor', {
+        name: 'columns',
+        route: {!! toJSON($table->draftUpdateRoute) !!},
+        initialColumns: {!! toJSON($columns) !!},
+      })
+    });
+  </script>
+@endpush