added fa config files, stub of Column editor

2018-08-07 22:34:07 +02:00
parent 7121cfaabd
commit 1e0581d9ab
12 changed files with 431 additions and 158 deletions
@@ -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>