add ModelDeleteDialog

cateditor/src/components/ModelDeleteDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="show" max-width="250">
+      <v-card>
+        <DialogHeading title="Remove Model">
+          <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 model from 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="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: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+    name: {
+      get() {
+        let model = this.selectedModel()
+        return model ? model.name : '(none)'
+      }
+    }
+  },
+  methods: {
+    doDelete() {
+      this.deleteSectionModel({ section: this.selectedSection(),
+                                model: this.selectedModel() })
+      this.show = false
+    },
+    ...mapGetters([
+      'selectedSection',
+      'selectedModel',
+    ]),
+    ...mapActions([
+      'deleteSectionModel',
+    ]),
+  },
+}
+</script>
+
+<style>
+
+</style>