add MaterialDeleteDialog

cateditor/src/components/CatalogContents.vue

@@ -112,10 +112,7 @@
 
                   <v-list-tile-action>
                     <span class="group">
-                      <v-btn icon @click="popInfo(item.id)">
-                        <v-icon small color="grey lighten-1">info</v-icon>
-                      </v-btn>
-                      <v-btn icon @click="popDelete(item.id)">
+                      <v-btn icon @click="popMaterialDelete(item.id)">
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
@@ -136,6 +133,7 @@
     <SectionDeleteDialog v-model="showSectionDeleteDialog"/>
     <ModelInfoDialog v-model="showModelInfoDialog"/>
     <ModelDeleteDialog v-model="showModelDeleteDialog"/>
+    <MaterialDeleteDialog v-model="showMaterialDeleteDialog"/>
 
   </v-container>
 </template>
@@ -153,6 +151,7 @@ import SectionInfoDialog from './SectionInfoDialog'
 import SectionDeleteDialog from './SectionDeleteDialog'
 import ModelInfoDialog from './ModelInfoDialog'
 import ModelDeleteDialog from './ModelDeleteDialog'
+import MaterialDeleteDialog from './MaterialDeleteDialog'
 
 export default {
   components: {
@@ -163,6 +162,7 @@ export default {
     SectionDeleteDialog,
     ModelInfoDialog,
     ModelDeleteDialog,
+    MaterialDeleteDialog,
     //RawDisplayer,
   },
 
@@ -173,6 +173,8 @@ export default {
     showSectionDeleteDialog: false,
     showModelInfoDialog: false,
     showModelDeleteDialog: false,
+    //showMaterialInfoDialog: false,
+    showMaterialDeleteDialog: false,
   }),
   computed: {
     ...mapState([
@@ -276,6 +278,11 @@ export default {
       this.showModelDeleteDialog = true
     },
 
+    popMaterialDelete(id) {
+      this.selectMaterial(id)
+      this.showMaterialDeleteDialog = true
+    },
+
     ...mapActions([
       'selectSection',
       'selectModel',

cateditor/src/components/MaterialDeleteDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="show" max-width="250">
+      <v-card>
+        <DialogHeading title="Remove Material">
+          <v-btn icon @click="show = false" class="ma-0 pa-0">
+            <v-icon color="white">clear</v-icon>
+          </v-btn>
+        </DialogHeading>
+
+        <v-card-text>
+          Really remove material from model?
+          <div class="subheading mt-2">
+            <span class="font-weight-medium">{{ id }}</span> {{ name }}
+          </div>
+          <div class="body">{{ color }}</div>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn flat @click="show = false">Cancel</v-btn>
+          <v-btn color="primary" flat @click="doDelete()">OK</v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+import DialogHeading from './DialogHeading'
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  components: {
+    DialogHeading,
+  },
+  data: () => ({
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    ...mapGetters([
+      'selectedSection',
+      'selectedModel',
+      'selectedMaterial',
+    ]),
+
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+
+    name: {
+      get() {
+        let mat = this.selectedMaterial
+        return mat ? mat.name : '(none)'
+      }
+    },
+
+    id: {
+      get() {
+        let mat = this.selectedMaterial
+        return mat ? mat.id : '(none)'
+      }
+    },
+
+    color: {
+      get() {
+        let mat = this.selectedMaterial
+        return mat ? mat.color : '(none)'
+      }
+    },
+
+  },
+  methods: {
+    ...mapActions([
+      'deleteModelMaterial',
+    ]),
+
+    doDelete() {
+      this.deleteModelMaterial({ section: this.selectedSection,
+                                 model: this.selectedModel,
+                                 material: this.selectedMaterial })
+      this.show = false
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

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

@@ -100,8 +100,8 @@ export const store = new Vuex.Store({
       return []
     },
 
-    selectedMaterial: (state, getters) => (id) => {
-      return getters.material(id)
+    selectedMaterial: (state, getters) => {
+      return getters.material(state.selectedMaterialID)
     },
 
     /// OLD STUFF
@@ -494,6 +494,16 @@ export const store = new Vuex.Store({
     //     let { data } = await Axios.post('http://yourwebsite.com/api/todo')
     //     context.commit('ADD_TODO',payload)
     //   },
+    deleteModelMaterial({ commit, getters }, { section, model, material }) {
+      let mats = model.ids.filter(id => id !== material.id)
+
+      commit('setModelMaterials', { model: model, materials: mats })
+
+      // repaginate section
+      let models = getters.sectionModels(section)
+      let pages = paginateModels(models)
+      commit('setSectionPages', { section: section, pages: pages })
+    },
 
     setCatalogProperty(context, data) {
       context.commit('setCatalogProperty', data)