cateditor contents page add lists

cateditor/src/components/SectionList.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card flat color="grey lighten-4" >
+        <v-card-title>Sections</v-card-title>
+      </v-card>
+
+      <!-- <v-toolbar dense>
+        <v-toolbar-title>Sections</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <v-icon v-on="on">add</v-icon>
+            </template>
+            <span>Add new section</span>
+          </v-tooltip>
+        </v-btn>
+      </v-toolbar> -->
+
+      <draggable v-model="sections" group="categories">
+        <div v-for="item in sections" :key="item.id">
+          <v-hover :key="item.id">
+            <v-list-tile
+              slot-scope="{ hover }"
+              :class="listItemClasses(item.id, hover)"
+              @click="selectSection(item.id)"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                <v-list-tile-sub-title color="text--grey lighten-1">12 models</v-list-tile-sub-title>
+              </v-list-tile-content>
+
+              <v-list-tile-action>
+                <span class="group">
+                  <v-btn icon @click.stop="popInfo(item.id)">
+                    <v-icon small color="grey lighten-1">info</v-icon>
+                  </v-btn>
+                  <v-btn icon @click.stop="popDelete(item.id)">
+                    <v-icon small color="grey lighten-1">delete</v-icon>
+                  </v-btn>
+                </span>
+              </v-list-tile-action>
+
+            </v-list-tile>
+          </v-hover>
+        </div>
+      </draggable>
+    </v-card>
+
+    <!--<v-flex xs5>
+         <RawDisplayer :value="sections" title="Data" />
+         </v-flex>-->
+
+    <SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
+    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
+  </v-container>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import SelectionMixin from './SelectionMixin'
+/* import RawDisplayer from './RawDisplayer' */
+import SectionInfoDialog from './SectionInfoDialog'
+import SectionDeleteDialog from './SectionDeleteDialog'
+
+export default {
+  mixins: [SelectionMixin],
+  components: {
+    draggable,
+    SectionInfoDialog,
+    SectionDeleteDialog,
+    // RawDisplayer,
+  },
+  props: {
+    selected: Number
+  },
+  data: () => ({
+    showSectionPopup: false,
+    showDeleteSectionPopup: false,
+  }),
+  computed: {
+    sections: {
+      get () {
+        return this.$store.getters.CAT_SECTIONS
+      },
+      set (value) {
+        this.$store.dispatch('SET_CAT_SECTIONS', value)
+      }
+    },
+  },
+  methods: {
+    listChoose: function (evt) {
+      var id = Number(evt.item.firstChild.getAttribute('sectionid'))
+      this.selectSection(id)
+    },
+    listItemClasses: function (id, hovering) {
+      if (id === this.selectedSectionID) {
+        return 'primary'
+      } else if (hovering) {
+        return 'grey lighten-4'
+      } else {
+        return ''
+      }
+    },
+    popInfo: function (id) {
+      this.selectSection(id)
+      this.showSectionPopup = true
+    },
+    popDelete: function (id) {
+      this.selectSection(id)
+      this.showDeleteSectionPopup = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>