revive SectionDeleteDialog

cateditor/src/components/CatalogContents.vue

@@ -41,7 +41,7 @@
                       <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)">
+                      <v-btn icon @click.stop="popSectionDelete(item.id)">
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
@@ -132,6 +132,7 @@
     <AddProductDialog v-model="showAddProductDialog"/>
     <AddSectionDialog v-model="showAddSectionDialog"/>
     <SectionInfoDialog v-model="showSectionInfoDialog"/>
+    <SectionDeleteDialog v-model="showSectionDeleteDialog"/>
 
   </v-container>
 </template>
@@ -146,6 +147,7 @@ import DragListHeading from './DragListHeading'
 import AddProductDialog from './AddProductDialog'
 import AddSectionDialog from './AddSectionDialog'
 import SectionInfoDialog from './SectionInfoDialog'
+import SectionDeleteDialog from './SectionDeleteDialog'
 
 export default {
   components: {
@@ -153,6 +155,7 @@ export default {
     AddProductDialog,
     AddSectionDialog,
     SectionInfoDialog,
+    SectionDeleteDialog,
     //RawDisplayer,
   },
 
@@ -160,6 +163,7 @@ export default {
     showAddProductDialog: false,
     showAddSectionDialog: false,
     showSectionInfoDialog: false,
+    showSectionDeleteDialog: false,
   }),
   computed: {
     ...mapState([
@@ -249,6 +253,11 @@ export default {
       this.showSectionInfoDialog = true
     },
 
+    popSectionDelete(id) {
+      this.selectSection(id)
+      this.showSectionDeleteDialog = true
+    },
+
     ...mapActions([
       'selectSection',
       'reorderSection',

cateditor/src/components/SectionDeleteDialog.vue

@@ -2,17 +2,22 @@
   <v-layout row justify-center>
     <v-dialog v-model="show" max-width="250">
       <v-card>
-        <v-card-title>Delete Section</v-card-title>
+        <DialogHeading title="Delete Section">
+          <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 delete section:
-          <input v-model="name"/>
+          Really delete section?
+          <input class="subheading font-weight-medium mt-2" v-model="name"/>
         </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="show = false">OK</v-btn>
+          <v-btn color="primary" flat @click="doDelete()">OK</v-btn>
+          <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -20,8 +25,13 @@
 </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: () => ({
   }),
   props: {
@@ -33,21 +43,32 @@ export default {
   },
   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() {
+        let section = this.selectedSection()
         return section ? section.name : '(none)'
       }
     }
-  }
+  },
+  methods: {
+    doDelete() {
+      this.deleteSection(this.selectedSection())
+      this.show = false
+    },
+    ...mapGetters([
+      'selectedSection',
+    ]),
+    ...mapActions([
+      'deleteSection',
+    ]),
+  },
 }
 </script>
 

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

@@ -189,6 +189,12 @@ export const store = new Vuex.Store({
       state.catalog.sections.push(section)
     },
 
+    deleteSection(state, section) {
+      if (section) {
+        state.catalog.sections = state.catalog.sections.filter(s => s.id !== section.id)
+      }
+    },
+
     setSectionName(state, { section, name }) {
       section.name = name
     },
@@ -296,6 +302,10 @@ export const store = new Vuex.Store({
       commit('addSection', section)
     },
 
+    deleteSection({ commit, getters }, section) {
+      commit('deleteSection', section)
+    },
+
     setSectionName({ commit }, payload) {
       commit('setSectionName', payload)
     },