progress on fancy list and info popup

cateditor/src/components/CatalogContents.vue

@@ -1,42 +1,18 @@
 <template>
   <v-container fluid grid-list-lg>
-    <v-layout column>
+    <v-layout row>
-
+      <FancyList/>
-      <v-layout row>
-        <v-flex d-flex shrink>
-          <v-select :items="seasons" v-model="season" label="Season"></v-select>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-select :items="regions" v-model="region" label="Region"></v-select>
-        </v-flex>
-        <v-flex d-flex grow>
-          <v-text-field v-model="name" label="Catalog name" required></v-text-field>
-        </v-flex>
-      </v-layout>
-
-      <v-layout row>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="ispublic" label="Public"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="ispublic" label="Show prices"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="ispublic" label="Region master"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="ispublic" label="I forget"></v-checkbox>
-        </v-flex>
-      </v-layout>
-
-      <!-- TODO: email selects -->
-
     </v-layout>
   </v-container>
 </template>
 
 <script>
+import FancyList from './FancyList'
+
 export default {
+  components: {
+    FancyList
+  },
   data: () => ({
     seasons: [ 'SS19', 'FW19', 'SS20' ],
     regions: [ 'US', 'Canada', 'Mexico' ],

cateditor/src/components/CatalogEditor.vue

@@ -10,7 +10,8 @@
 
     <v-stepper-items>
       <v-stepper-content step="1">
-        <CatalogInfo/>
+        <!-- <CatalogInfo/> -->
+        <CatalogContents/>
         <v-btn flat>Cancel</v-btn>
         <v-btn @click="step = 1" disabled>Back</v-btn>
         <v-btn @click="step = 2" color="primary">Next</v-btn>

cateditor/src/components/CategoryPopup.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="text-xs-center">
+    <v-dialog v-model="show" width="200">
+      <v-card>
+        <v-toolbar dark dense>
+          <v-toolbar-title>Category Info</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click="show = false"><v-icon>close</v-icon></v-btn>
+        </v-toolbar>
+
+        <v-card-text>
+          <v-text-field v-model="name" label="Name" required></v-text-field>
+          <input v-model="families"></input>
+          <input v-model="models"></input>
+          <input v-model="materials"></input>
+        </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>
+// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+export default {
+  data: () => ({
+    //dialog: false
+    name: 'Trailhead (Men)',
+    families: '3 product families',
+    models: '5 models',
+    materials: '12 materials'
+  }),
+  props: {
+    value: Boolean
+  },
+  computed: {
+    show: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

cateditor/src/components/FancyList.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-container fluid grid-list-lg>
+    <v-layout row>
+      <v-flex xs4>
+        <v-card>
+          <v-toolbar color="cyan" dense dark>
+            <v-toolbar-side-icon></v-toolbar-side-icon>
+            <v-toolbar-title>Items</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn icon><v-icon>search</v-icon></v-btn>
+          </v-toolbar>
+
+          <draggable v-model="items" group="people" @start="drag=true" @end="drag=false">
+            <div v-for="item in items" :key="item.id">
+              <v-hover>
+                <v-list-tile :key="item.id" avatar @click=""
+                             slot-scope="{ hover }" :class="`elevation-${hover ? 2 : 0}`">
+
+                  <v-list-tile-action>
+                    <v-icon color="black">drag_handle</v-icon>
+                  </v-list-tile-action>
+
+                  <v-list-tile-content>
+                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                    <v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
+                  </v-list-tile-content>
+
+                  <v-list-tile-action>
+                    <v-btn icon>
+                      <v-icon color="blue" small>info</v-icon>
+                    </v-btn>
+                    <v-btn icon ripple>
+                      <v-icon color="red" small>delete</v-icon>
+                    </v-btn>
+                  </v-list-tile-action>
+
+                </v-list-tile>
+              </v-hover>
+            </div>
+          </draggable>
+        </v-card>
+      </v-flex>
+
+      <v-flex xs3>
+        <v-btn color="red lighten-2" dark @click="showCatPopup = true" >
+          Click Me
+        </v-btn>
+
+        <CategoryPopup v-model="showCatPopup"/>
+      </v-flex>
+
+      <v-flex xs3>
+        <RawDisplayer :value="items" title="List" />
+      </v-flex>
+
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import RawDisplayer from './RawDisplayer'
+import CategoryPopup from './CategoryPopup'
+
+export default {
+  components: {
+    draggable,
+    CategoryPopup,
+    RawDisplayer
+  },
+  data: () => ({
+    items: [{ id: 12, name: 'twelve' },
+            { id: 42, name: 'forty two' },
+            { id: 19, name: 'nineteen' }
+    ],
+    showCatPopup: true,
+    dragging: false
+  }),
+  computed: {
+    draggingInfo() {
+      return this.dragging ? "under drag" : "";
+    }
+  },
+  methods: {
+    removeAt(idx) {
+      this.list.splice(idx, 1);
+    },
+    add: function() {
+      id++;
+      this.list.push({ name: "Juan " + id, id, text: "" });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button {
+  margin-top: 35px;
+}
+.handle {
+  float: left;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.close {
+  float: right;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+input {
+  display: inline-block;
+  width: 50%;
+}
+.text {
+  margin: 20px;
+}
+</style>

cateditor/src/components/RawDisplayer.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card>
+    <v-toolbar color="purple" dark>
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+    </v-toolbar>
+    <pre>{{ valueString }}</pre>
+  </v-card>
+</template>
+
+<script>
+const props = {
+  name: 'RawDisplayer',
+  title: {
+    required: true,
+    type: String
+  },
+  value: {
+    required: true
+  }
+};
+
+export default {
+  props,
+  computed: {
+    valueString() {
+      return JSON.stringify(this.value, null, 2);
+    }
+  }
+};
+</script>
+
+<style scoped>
+pre {
+  text-align: start;
+}
+</style>