129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<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>
|