add list item selection and action popups

cateditor/src/components/CategoryDeleteDialog.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="show" max-width="250">
+      <v-card>
+        <v-card-title>Delete Category</v-card-title>
+
+        <v-card-text>
+          Really delete category:
+          <input 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-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+export default {
+  data: () => ({
+  }),
+  props: {
+    value: Boolean,
+    category: {
+      type: Number,
+      required: false
+    }
+  },
+  computed: {
+    show: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    },
+    name: {
+      get () {
+        var section = this.$store.getters.CAT_SECTION(this.category)
+        return section ? section.name : '(none)'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

cateditor/src/components/FancyList.vue

@@ -3,23 +3,25 @@
     <v-layout row>
       <v-flex xs5>
         <v-card>
-          <v-toolbar color="cyan" dense dark>
+          <v-toolbar dense>
             <v-toolbar-title>Categories</v-toolbar-title>
             <v-spacer></v-spacer>
             <v-btn icon><v-icon>add</v-icon></v-btn>
           </v-toolbar>
 
-          <draggable v-model="sections" @start="drag=true" @end="drag=false">
+          <draggable v-model="sections" group="categories" @choose="listChoose">
             <div v-for="item in sections" :key="item.id">
-              <v-hover>
-                <v-list-tile
+              <v-hover
                 :key="item.id"
+                :categoryid="item.id">
+                <v-list-tile
                   slot-scope="{ hover }"
-                  :class="`${hover ? 'grey lighten-4' : ''}`">
-
-                  <v-list-tile-action>
+                  :class="listItemClasses(item.id, hover)"
+                  @click="selectCategory(item.id)"
+                >
+                  <!-- <v-list-tile-action>
                        <v-icon color="black">drag_handle</v-icon>
-                  </v-list-tile-action>
+                       </v-list-tile-action> -->
 
                   <v-list-tile-content>
                     <v-list-tile-title v-html="item.name"></v-list-tile-title>
@@ -27,14 +29,14 @@
                   </v-list-tile-content>
 
                   <v-list-tile-action>
+                    <span class="group">
                       <v-btn icon @click="popInfo(item.id)">
-                      <v-icon small>info</v-icon>
+                        <v-icon small color="grey lighten-1">info</v-icon>
                       </v-btn>
-                  </v-list-tile-action>
-                  <v-list-tile-action>
-                    <v-btn icon>
-                      <v-icon color="red" small>delete</v-icon>
+                      <v-btn icon @click="popDelete(item.id)">
+                        <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
+                    </span>
                   </v-list-tile-action>
 
                 </v-list-tile>
@@ -48,7 +50,8 @@
         <RawDisplayer :value="sections" title="Data" />
       </v-flex>
 
-      <CategoryPopup v-model="showCatPopup" v-bind:category="selectedCategory"/>
+      <CategoryInfoDialog v-model="showCatPopup" v-bind:category="selectedCategory"/>
+      <CategoryDeleteDialog v-model="showDeleteCatPopup" v-bind:category="selectedCategory"/>
 
     </v-layout>
   </v-container>
@@ -57,12 +60,14 @@
 <script>
 import draggable from 'vuedraggable'
 import RawDisplayer from './RawDisplayer'
-import CategoryPopup from './CategoryPopup'
+import CategoryInfoDialog from './CategoryInfoDialog'
+import CategoryDeleteDialog from './CategoryDeleteDialog'
 
 export default {
   components: {
     draggable,
-    CategoryPopup,
+    CategoryInfoDialog,
+    CategoryDeleteDialog,
     RawDisplayer
   },
   props: {
@@ -70,6 +75,7 @@ export default {
   },
   data: () => ({
     showCatPopup: false,
+    showDeleteCatPopup: false,
     selectedCategory: null
   }),
   computed: {
@@ -83,9 +89,29 @@ export default {
     }
   },
   methods: {
-    popInfo: function (id) {
+    listChoose: function (evt) {
+      var id = Number(evt.item.firstChild.getAttribute('categoryid'))
+      this.selectCategory(id)
+    },
+    listItemClasses: function (id, hovering) {
+      if (id === this.selectedCategory) {
+        return 'primary'
+      } else if (hovering) {
+        return 'grey lighten-4'
+      } else {
+        return ''
+      }
+    },
+    selectCategory: function (id) {
       this.selectedCategory = id
+    },
+    popInfo: function (id) {
+      this.selectCategory(id)
       this.showCatPopup = true
+    },
+    popDelete: function (id) {
+      this.selectCategory(id)
+      this.showDeleteCatPopup = true
     }
   }
 }