simple vue-based column editor

2018-08-04 11:48:35 +02:00
parent 755c65a42d
commit e5a6527d18
22 changed files with 422 additions and 177 deletions
@@ -9,6 +9,9 @@ require('./bootstrap')
 let url_slug = require('./url-slug')

 $(function () {
+  // Remove all noscript from forms etc
+  $('noscript').remove();
+
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  })
@@ -62,17 +65,11 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
  }
 })

-//
-// window.Vue = require('vue');
-//
-// /**
-//  * Next, we will create a fresh Vue application instance and attach it to
-//  * the page. Then, you may begin adding components to this application
-//  * or customize the JavaScript scaffolding to fit your unique needs.
-//  */
-//
-// Vue.component('example-component', require('./components/ExampleComponent.vue'));
-//
-// const app = new Vue({
-//     el: '#app'
-// });
+window.Vue = require('vue');
+
+Vue.component('column-editor', require('./components/ColumnEditor.vue'));
+Vue.component('v-icon', require('./components/Icon.vue'));
+
+const app = new Vue({
+    el: '#app'
+});
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <input type="hidden" :name="name" :value="JSON.stringify(columns)">
+    <table class="editor-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Title</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(col, i) in columns">
+          <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);
+  }
+
+  td .btn {
+    @include py(1);
+    @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() {
+      let nth = this.columns.length+1
+      this.columns.push({
+        name: `column-${nth}`,
+        type: 'string',
+        title: `Column ${nth}`,
+      })
+    }
+  }
+}
+</script>
@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card card-default">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>
@@ -0,0 +1,21 @@
+<template>
+  <i :title="tooltipText">
+    <span class="sr-only" v-html=srHtml></span>
+  </i>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    alt: String,
+    srOnly: Boolean
+  },
+  data: function() {
+    return {
+      tooltipText: this.srOnly ? null : this.alt.replace(/~/g, ''),
+      srHtml: this.alt.replace(/~/g, '&nbsp;')
+    };
+  }
+}
+</script>
@@ -0,0 +1 @@
+@import "../../sass/bootstrap-base";