cateditor: remove unused classes
This commit is contained in:
Seth Ladygo
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-card>
|
|
||||||
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
|
|
||||||
Styles
|
|
||||||
</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> -->
|
|
||||||
|
|
||||||
<v-card flat class="scroll-area">
|
|
||||||
<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-card>
|
|
||||||
</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>
|
|
||||||
.scroll-area {
|
|
||||||
height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-card>
|
|
||||||
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
|
|
||||||
Product Families
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-card flat class="scroll-area">
|
|
||||||
<draggable v-model="families" group="categories">
|
|
||||||
<div v-for="item in families" :key="item.id">
|
|
||||||
<v-hover :key="item.id">
|
|
||||||
<v-list-tile
|
|
||||||
slot-scope="{ hover }"
|
|
||||||
:class="listItemClasses(item.id, hover)"
|
|
||||||
@click="selectFamily(item.id)"
|
|
||||||
>
|
|
||||||
<v-list-tile-content>
|
|
||||||
<v-list-tile-title v-html="item.name"></v-list-tile-title>
|
|
||||||
<v-list-tile-sub-title
|
|
||||||
class="caption font-weight-light"
|
|
||||||
color="grey lighten-2">
|
|
||||||
{{item.models.length}} {{item.models.length | pluralize('model') }}
|
|
||||||
</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="families" title="Data" />
|
|
||||||
</v-flex> -->
|
|
||||||
|
|
||||||
<!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/>
|
|
||||||
<SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> -->
|
|
||||||
</v-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import draggable from 'vuedraggable'
|
|
||||||
import Vue2Filters from 'vue2-filters'
|
|
||||||
import SelectionMixin from './SelectionMixin'
|
|
||||||
/* import RawDisplayer from './RawDisplayer' */
|
|
||||||
/* import SectionInfoDialog from './SectionInfoDialog'
|
|
||||||
* import SectionDeleteDialog from './SectionDeleteDialog' */
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mixins: [Vue2Filters.mixin,
|
|
||||||
SelectionMixin],
|
|
||||||
components: {
|
|
||||||
draggable,
|
|
||||||
/* SectionInfoDialog,
|
|
||||||
* SectionDeleteDialog, */
|
|
||||||
/* RawDisplayer, */
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
selected: Number,
|
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
showInfoPopup: false,
|
|
||||||
showDeletePopup: false,
|
|
||||||
}),
|
|
||||||
computed: {
|
|
||||||
families: {
|
|
||||||
get () {
|
|
||||||
return this.selectedFamilies()
|
|
||||||
},
|
|
||||||
set (value) {
|
|
||||||
// TODO complicated logic
|
|
||||||
//this.$store.dispatch('SET_CAT_SECTIONS', value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/*currentSectionData: {
|
|
||||||
get () {
|
|
||||||
return this.$store.getters.SELECTED_SECTION
|
|
||||||
},
|
|
||||||
},*/
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
listChoose: function (evt) {
|
|
||||||
var id = Number(evt.item.firstChild.getAttribute('familyid'))
|
|
||||||
this.selectFamily(id)
|
|
||||||
},
|
|
||||||
listItemClasses: function (id, hovering) {
|
|
||||||
if (id === this.selectedFamilyID) {
|
|
||||||
return 'primary'
|
|
||||||
} else if (hovering) {
|
|
||||||
return 'grey lighten-4'
|
|
||||||
} else {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
popInfo: function (id) {
|
|
||||||
this.selectFamily(id)
|
|
||||||
this.showInfoPopup = true
|
|
||||||
},
|
|
||||||
popDelete: function (id) {
|
|
||||||
this.selectFamily(id)
|
|
||||||
this.showDeletePopup = true
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.scroll-area {
|
|
||||||
height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-card>
|
|
||||||
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
|
|
||||||
Sections
|
|
||||||
</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> -->
|
|
||||||
|
|
||||||
<v-card flat class="scroll-area">
|
|
||||||
<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
|
|
||||||
class="caption font-weight-light"
|
|
||||||
color="grey lighten-2">
|
|
||||||
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>
|
|
||||||
|
|
||||||
<SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
|
|
||||||
<SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
|
|
||||||
|
|
||||||
<!--<v-flex xs5>
|
|
||||||
<RawDisplayer :value="sections" title="Data" />
|
|
||||||
</v-flex>-->
|
|
||||||
|
|
||||||
</v-card>
|
|
||||||
</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>
|
|
||||||
.scroll-area {
|
|
||||||
height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
const SelectionMixin = { // eslint-disable-line no-unused-vars
|
|
||||||
computed: {
|
|
||||||
selectedSectionID: {
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.SELECTED_SECTION_ID
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('SET_SELECTED_SECTION_ID', value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedFamilyID: {
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.SELECTED_FAMILY_ID
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('SET_SELECTED_FAMILY_ID', value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedModelID: {
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.SELECTED_MODEL_ID
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('SET_SELECTED_MODEL_ID', value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedMaterial: {
|
|
||||||
get() {
|
|
||||||
return this.$store.getters.SELECTED_MATERIAL_ID
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$store.dispatch('SET_SELECTED_MATERIAL_ID', value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
selectSection: function(id) {
|
|
||||||
this.selectedSectionID = id
|
|
||||||
// this.selectedFamilyID = null
|
|
||||||
// this.selectedModelID = null
|
|
||||||
// this.selectedMaterial = null
|
|
||||||
},
|
|
||||||
selectFamily: function(id) {
|
|
||||||
this.selectedFamilyID = id
|
|
||||||
// this.selectedModelID = null
|
|
||||||
// this.selectedMaterial = null
|
|
||||||
},
|
|
||||||
selectModel: function(id) {
|
|
||||||
this.selectedModelID = id
|
|
||||||
// this.selectedFamilyID = null
|
|
||||||
// this.selectedMaterial = null
|
|
||||||
},
|
|
||||||
selectMaterial: function(id) {
|
|
||||||
this.selectedMaterial = id
|
|
||||||
},
|
|
||||||
selectedFamilies: function() {
|
|
||||||
let section = this.$store.getters.CAT_SECTION(this.selectedSectionID)
|
|
||||||
let ids = this.sectionIDs(section)
|
|
||||||
let materials = this.findMaterials(ids)
|
|
||||||
return this.makeFamilies(materials)
|
|
||||||
},
|
|
||||||
selectedFamily: function() {
|
|
||||||
let families = this.selectedFamilies()
|
|
||||||
return families.find(s => s.id === this.selectedFamilyID)
|
|
||||||
},
|
|
||||||
sectionIDs: function(section) {
|
|
||||||
let ids = []
|
|
||||||
|
|
||||||
if (section) {
|
|
||||||
for (let page of section.pages) {
|
|
||||||
for (let block of page) {
|
|
||||||
ids.push(...block.ids)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return ids
|
|
||||||
},
|
|
||||||
findMaterials: function(ids) {
|
|
||||||
return ids.map(id => this.$store.getters.MATERIAL(id))
|
|
||||||
},
|
|
||||||
makeFamilies: function(materials) {
|
|
||||||
let families = []
|
|
||||||
|
|
||||||
for (let mat of materials) {
|
|
||||||
let family = families.length > 0 ? families[families.length - 1] : null
|
|
||||||
|
|
||||||
if (family === null || family.id !== mat.family) {
|
|
||||||
// new family
|
|
||||||
family = { id: mat.family,
|
|
||||||
name: mat.name, // TODO where does this come from?
|
|
||||||
models: [mat.model],
|
|
||||||
materials: [mat.id] }
|
|
||||||
families.push(family)
|
|
||||||
} else {
|
|
||||||
// add to existing
|
|
||||||
family.materials.push(mat.id)
|
|
||||||
family.models.push(mat.model)
|
|
||||||
family.models = this.uniquify(family.models)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return families
|
|
||||||
},
|
|
||||||
uniquify: function(arr) {
|
|
||||||
return [...new Set(arr)]
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SelectionMixin
|
|
||||||
Reference in New Issue
Block a user