add ModelInfoDialog

cateditor/src/components/CatalogContents.vue

@@ -77,7 +77,7 @@
 
                   <v-list-tile-action>
                     <span class="group">
-                      <v-btn icon @click.stop="popInfo(item.id)">
+                      <v-btn icon @click.stop="popModelInfo(item.model)">
                         <v-icon small color="grey lighten-1">info</v-icon>
                       </v-btn>
                       <v-btn icon @click.stop="popDelete(item.id)">
@@ -133,6 +133,7 @@
     <AddSectionDialog v-model="showAddSectionDialog"/>
     <SectionInfoDialog v-model="showSectionInfoDialog"/>
     <SectionDeleteDialog v-model="showSectionDeleteDialog"/>
+    <ModelInfoDialog v-model="showModelInfoDialog"/>
 
   </v-container>
 </template>
@@ -148,6 +149,7 @@ import AddProductDialog from './AddProductDialog'
 import AddSectionDialog from './AddSectionDialog'
 import SectionInfoDialog from './SectionInfoDialog'
 import SectionDeleteDialog from './SectionDeleteDialog'
+import ModelInfoDialog from './ModelInfoDialog'
 
 export default {
   components: {
@@ -156,6 +158,7 @@ export default {
     AddSectionDialog,
     SectionInfoDialog,
     SectionDeleteDialog,
+    ModelInfoDialog,
     //RawDisplayer,
   },
 
@@ -164,6 +167,7 @@ export default {
     showAddSectionDialog: false,
     showSectionInfoDialog: false,
     showSectionDeleteDialog: false,
+    showModelInfoDialog: false,
   }),
   computed: {
     ...mapState([
@@ -192,11 +196,6 @@ export default {
   },
 
   methods: {
-    selectModel(id) {
-      console.log('select model', id)
-      this.$store.dispatch('selectModel', id)
-    },
-
     sectionModelCount(sectionID) {
       let section = this.section(sectionID)
       if (section) {
@@ -258,8 +257,14 @@ export default {
       this.showSectionDeleteDialog = true
     },
 
+    popModelInfo(id) {
+      this.selectModel(id)
+      this.showModelInfoDialog = true
+    },
+
     ...mapActions([
       'selectSection',
+      'selectModel',
       'reorderSection',
       'setSectionPages',
       'setModelMaterials',

cateditor/src/components/ModelInfoDialog.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="text-xs-center">
+    <v-dialog v-model="show" width="250">
+      <v-card>
+        <DialogHeading title="Model 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>
+          {{modelMaterialCount}} {{modelMaterialCount | pluralize('material') }}
+        </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>
+import DialogHeading from './DialogHeading'
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  components: {
+    DialogHeading,
+  },
+  data: () => ({
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+
+    name: {
+      get() {
+        var model = this.selectedModel()
+        return model ? model.name : '(none)'
+      },
+      set(value) {
+        var model = this.selectedModel()
+        this.setModelName({ model: model, name: value })
+      }
+    },
+
+    modelMaterialCount() {
+      let model = this.selectedModel()
+      if (model) {
+        return model.ids.length
+      }
+      return 0
+    },
+  },
+
+  methods: {
+    ...mapGetters([
+      'selectedModel',
+    ]),
+    ...mapActions([
+      'setModelName',
+    ]),
+  },
+}
+</script>
+
+<style>
+
+</style>

cateditor/src/components/SectionInfoDialog.vue

@@ -86,9 +86,7 @@ export default {
       }
       return count
     },
-
+  },
-      }
-    },
 
   methods: {
     ...mapGetters([

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

@@ -210,6 +210,10 @@ export const store = new Vuex.Store({
       }
     },
 
+    setModelName(state, { model, name }) {
+      model.name = name
+    },
+
     setModelMaterials(state, { model, materials }) {
       if (model) {
         model.ids = materials.map(m => (typeof m === 'object') ? m.id : m)
@@ -318,6 +322,10 @@ export const store = new Vuex.Store({
       commit('setSectionPages', payload)
     },
 
+    setModelName({ commit }, payload) {
+      commit('setModelName', payload)
+    },
+
     setModelMaterials({ commit }, payload) {
       commit('setModelMaterials', payload)
     },