cateditor contents page add lists

cateditor/src/components/SectionInfoDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="text-xs-center">
+    <v-dialog v-model="show" width="250">
+      <v-card>
+        <v-toolbar dark dense>
+          <v-toolbar-title>Section Info</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click="show = false"><v-icon>close</v-icon></v-btn>
+        </v-toolbar>
+
+        <v-card-text>
+          <v-text-field v-model="name" label="Name" required></v-text-field>
+          <input v-model="families"/>
+          <input v-model="models"/>
+          <input v-model="materials"/>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" flat @click="show = false">OK</v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+export default {
+  data: () => ({
+    models: '5 models',
+    materials: '12 materials'
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    show: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    },
+    name: {
+      get () {
+        var sectionID = this.$store.getters.SELECTED_SECTION_ID
+        var section = this.$store.getters.CAT_SECTION(sectionID)
+        return section ? section.name : '(none)'
+      },
+      set (value) {
+        var sectionID = this.$store.getters.SELECTED_SECTION_ID
+        this.$store.dispatch('SET_CAT_SECTION_NAME',
+                             { id: sectionID, name: value })
+      }
+    },
+    families () {
+      // TODO
+      return this.$store.getters.CAT_FAMILIES
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>