update SectionInfoDialog to work again

cateditor/src/components/SectionInfoDialog.vue

@@ -2,17 +2,16 @@
   <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>
+        <DialogHeading title="Section Info">
+          <v-btn icon @click="show = false" class="ma-0 pa-0">
+            <v-icon color="white">clear</v-icon>
+          </v-btn>
+        </DialogHeading>
 
         <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"/>
+          {{sectionModelCount}} {{sectionModelCount | pluralize('model') }}<br/>
+          {{sectionMaterialCount}} {{sectionMaterialCount | pluralize('material') }}
         </v-card-text>
 
         <v-card-actions>
@@ -26,41 +25,80 @@
 </template>
 
 <script>
-// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+import DialogHeading from './DialogHeading'
+import { mapGetters, mapActions } from 'vuex'
+
 export default {
+  components: {
+    DialogHeading,
+  },
   data: () => ({
-    models: '5 models',
-    materials: '12 materials'
   }),
   props: {
     value: Boolean,
   },
   computed: {
     show: {
-      get () {
+      get() {
         return this.value
       },
-      set (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)
+      get() {
+        var section = this.selectedSection()
         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 })
+      set(value) {
+        var section = this.selectedSection()
+        this.setSectionName({ section: section, name: value })
       }
     },
-    families () {
-      // TODO
-      return this.$store.getters.CAT_FAMILIES
-    }
-  }
+
+    sectionModelCount() {
+      let section = this.selectedSection()
+      if (section) {
+        let modelFunc = this.sectionModels()
+        let models = modelFunc(section)
+        if (models) {
+          return models.length
+        }
+      }
+      return 0
+    },
+
+    sectionMaterialCount() {
+      let count = 0
+      let section = this.selectedSection()
+      if (section) {
+        let modelFunc = this.sectionModels()
+        let models = modelFunc(section)
+        if (models) {
+          for (let model of models) {
+            if (model.ids) {
+              count += model.ids.length
+            }
+          }
+        }
+      }
+      return count
+    },
+
+      }
+    },
+
+  methods: {
+    ...mapGetters([
+      'selectedSection',
+      'sectionModels',
+    ]),
+    ...mapActions([
+      'setSectionName',
+    ]),
+  },
 }
 </script>