118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<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>
|