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