update SectionInfoDialog to work again

cateditor/src/components/CatalogContents.vue

@@ -38,7 +38,7 @@
 
                   <v-list-tile-action>
                     <span class="group">
-                      <v-btn icon @click.stop="popInfo(item.id)">
+                      <v-btn icon @click.stop="popSectionInfo(item.id)">
                         <v-icon small color="grey lighten-1">info</v-icon>
                       </v-btn>
                       <v-btn icon @click.stop="popDelete(item.id)">
@@ -131,6 +131,7 @@
 
     <AddProductDialog v-model="showAddProductDialog"/>
     <AddSectionDialog v-model="showAddSectionDialog"/>
+    <SectionInfoDialog v-model="showSectionInfoDialog"/>
 
   </v-container>
 </template>
@@ -144,18 +145,21 @@ import { paginateModels } from '@/pagination'
 import DragListHeading from './DragListHeading'
 import AddProductDialog from './AddProductDialog'
 import AddSectionDialog from './AddSectionDialog'
+import SectionInfoDialog from './SectionInfoDialog'
 
 export default {
   components: {
     DragListHeading,
     AddProductDialog,
     AddSectionDialog,
+    SectionInfoDialog,
     //RawDisplayer,
   },
 
   data: () => ({
     showAddProductDialog: false,
-    showAddSectionDialog: true,
+    showAddSectionDialog: false,
+    showSectionInfoDialog: false,
   }),
   computed: {
     ...mapState([
@@ -184,11 +188,6 @@ export default {
   },
 
   methods: {
-    selectSection(id) {
-      console.log('select section', id)
-      this.$store.dispatch('selectSection', id)
-    },
-
     selectModel(id) {
       console.log('select model', id)
       this.$store.dispatch('selectModel', id)
@@ -245,7 +244,13 @@ export default {
       this.setModelMaterials({ model: this.selectedModel, materials: mats })
     },
 
+    popSectionInfo(id) {
+      this.selectSection(id)
+      this.showSectionInfoDialog = true
+    },
+
     ...mapActions([
+      'selectSection',
       'reorderSection',
       'setSectionPages',
       'setModelMaterials',

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>
 

cateditor/src/pages/editor/store/index.js

@@ -11,7 +11,6 @@ export const store = new Vuex.Store({
     catalog: null,
     materials: {},
     selectedSectionID: null,
-    //selectedFamilyID: null,
     selectedModelID: null,
     selectedMaterial: null,
     loadingCatalog: false,
@@ -190,6 +189,10 @@ export const store = new Vuex.Store({
       state.catalog.sections.push(section)
     },
 
+    setSectionName(state, { section, name }) {
+      section.name = name
+    },
+
     reorderSection(state, { from, to }) {
       if (from === to) return
       state.catalog.sections = arrayMove(state.catalog.sections, from, to)
@@ -293,6 +296,10 @@ export const store = new Vuex.Store({
       commit('addSection', section)
     },
 
+    setSectionName({ commit }, payload) {
+      commit('setSectionName', payload)
+    },
+
     reorderSection({ commit }, payload) {
       commit('reorderSection', payload)
     },