add ModelInfoDialog

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>