alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

progress on fancy list and info popup

Browse Source
This commit is contained in:
Seth Ladygo
2019-04-03 12:27:46 -07:00
parent 72ffbfe7a6
commit 7ebaaad89d
5 changed files with 218 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
cateditor/src/components/CatalogContents.vue
View File

@ -1,42 +1,18 @@
<template>
<v-container fluid grid-list-lg>
<v-layout column>
<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 -->
<FancyList/>
</v-layout>
</v-container>
</template>
<script>
import FancyList from './FancyList'
export default {
components: {
FancyList
},
data: () => ({
seasons: [ 'SS19', 'FW19', 'SS20' ],
regions: [ 'US', 'Canada', 'Mexico' ],

3
cateditor/src/components/CatalogEditor.vue
View File

@ -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>

56
cateditor/src/components/CategoryPopup.vue Normal file
View File

@ -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>

117
cateditor/src/components/FancyList.vue Normal file
View File

@ -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>

36
cateditor/src/components/RawDisplayer.vue Normal file
View File

@ -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>