cateditor contents page add lists

cateditor/src/components/MaterialList.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card flat color="grey lighten-4" >
+        <v-card-title>Styles</v-card-title>
+      </v-card>
+      <!-- <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="materials" group="materials">
+        <div v-for="item in materials" :key="item.id">
+          <v-hover
+            :key="item.id"
+            :materialid="item.id">
+            <v-list-tile
+              slot-scope="{ hover }"
+              :class="listItemClasses(item.id, hover)"
+              @click="selectMaterial(item.id)"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
+                <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
+              </v-list-tile-content>
+
+              <v-list-tile-action>
+                <span class="group">
+                  <v-btn icon @click="popInfo(item.id)">
+                    <v-icon small color="grey lighten-1">info</v-icon>
+                  </v-btn>
+                  <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>
+          </v-hover>
+        </div>
+      </draggable>
+    </v-card>
+
+    <!-- <v-flex xs5>
+         <RawDisplayer :value="materials" title="Data" />
+         </v-flex> -->
+
+  </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: {
+   * }, */
+  /* data: () => ({
+   * }), */
+  computed: {
+    materials: {
+      get () {
+        if (this.selectedFamilyID != null) {
+          let family = this.selectedFamily()
+          return this.findMaterials(family.materials)
+        } else if (this.selectedModelID != null) {
+          // TODO
+          return []
+        } else {
+          return []
+        }
+      },
+      /* set (value) {
+       *   // TODO complicated logic
+       * } */
+    },
+  },
+  methods: {
+    listItemClasses: function (id, hovering) {
+      /* if (id === this.selectedMaterial) {
+        return 'primary'
+      } else */
+      if (hovering) {
+        return 'grey lighten-4'
+      } else {
+        return ''
+      }
+    },
+    popInfo: function (id) {
+      this.selectMaterial(id)
+      //this.showSectionPopup = true
+    },
+    popDelete: function (id) {
+      this.selectMaterial(id)
+      //this.showDeleteSectionPopup = true
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>