176 lines
4.5 KiB
Vue
176 lines
4.5 KiB
Vue
<template>
|
|
<Dialog ref="dialog" v-model="dialogVisible">
|
|
<template #header>
|
|
<div class="row items-center">
|
|
<div style="font-size: 130%">
|
|
Выбрать жанры
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div ref="box" class="column q-mt-xs overflow-auto no-wrap" style="width: 370px; padding: 0px 10px 10px 10px;">
|
|
<div class="row items-center top-panel bg-grey-3">
|
|
<q-input ref="search" v-model="search" class="col" outlined dense bg-color="white" placeholder="Найти" clearable />
|
|
</div>
|
|
<div v-show="nodes.length" class="checkbox-tick-all">
|
|
<q-checkbox v-model="tickAll" size="36px" label="Выбрать/снять все" toggle-order="ft" @update:model-value="makeTickAll" />
|
|
</div>
|
|
<q-tree
|
|
v-model:ticked="ticked"
|
|
v-model:expanded="expanded"
|
|
class="q-my-xs"
|
|
:nodes="nodes"
|
|
node-key="key"
|
|
tick-strategy="leaf"
|
|
selected-color="black"
|
|
:filter="search"
|
|
no-nodes-label="Жанров нет"
|
|
no-results-label="Ничего не найдено"
|
|
>
|
|
</q-tree>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
|
|
OK
|
|
</q-btn>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
//-----------------------------------------------------------------------------
|
|
import vueComponent from '../../vueComponent.js';
|
|
|
|
import Dialog from '../../share/Dialog.vue';
|
|
|
|
const componentOptions = {
|
|
components: {
|
|
Dialog
|
|
},
|
|
watch: {
|
|
modelValue(newValue) {
|
|
this.dialogVisible = newValue;
|
|
if (newValue)
|
|
this.init();//no await
|
|
},
|
|
dialogVisible(newValue) {
|
|
this.$emit('update:modelValue', newValue);
|
|
},
|
|
genre() {
|
|
this.updateTicked();
|
|
},
|
|
ticked() {
|
|
this.checkAllTicked();
|
|
this.updateGenre();
|
|
},
|
|
}
|
|
};
|
|
class GenreSelectDialog {
|
|
_options = componentOptions;
|
|
_props = {
|
|
modelValue: Boolean,
|
|
genre: {type: String, value: ''},
|
|
genreTree: Array,
|
|
};
|
|
|
|
dialogVisible = false;
|
|
|
|
search = '';
|
|
ticked = [];
|
|
expanded = [];
|
|
tickAll = false;
|
|
allKeys = [];
|
|
|
|
created() {
|
|
}
|
|
|
|
mounted() {
|
|
this.updateTicked();
|
|
}
|
|
|
|
async init() {
|
|
await this.$refs.dialog.waitShown();
|
|
//чтобы не скакало при поиске
|
|
this.$refs.box.style.height = `${document.body.clientHeight - 160}px`;
|
|
}
|
|
|
|
get nodes() {
|
|
const result = [];
|
|
|
|
this.allKeys = [];
|
|
for (const section of this.genreTree) {
|
|
const rkey = `r-${section.name}`;
|
|
const sec = {label: section.name, key: rkey, children: []};
|
|
|
|
for (const g of section.value) {
|
|
sec.children.push({label: g.name, key: g.value});
|
|
this.allKeys.push(g.value);
|
|
}
|
|
|
|
result.push(sec);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
makeTickAll() {
|
|
if (this.tickAll) {
|
|
const newTicked = [];
|
|
for (const key of this.allKeys) {
|
|
newTicked.push(key);
|
|
}
|
|
this.ticked = newTicked;
|
|
} else {
|
|
this.ticked = [];
|
|
this.tickAll = false;
|
|
}
|
|
}
|
|
|
|
checkAllTicked() {
|
|
const ticked = new Set(this.ticked);
|
|
|
|
let newTickAll = !!(this.nodes.length);
|
|
for (const key of this.allKeys) {
|
|
if (!ticked.has(key)) {
|
|
newTickAll = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.ticked.length && !newTickAll) {
|
|
this.tickAll = undefined;
|
|
} else {
|
|
this.tickAll = newTickAll;
|
|
}
|
|
}
|
|
|
|
updateTicked() {
|
|
this.ticked = this.genre.split(',').filter(s => s);
|
|
}
|
|
|
|
updateGenre() {
|
|
this.$emit('update:genre', this.ticked.join(','));
|
|
}
|
|
|
|
okClick() {
|
|
this.dialogVisible = false;
|
|
}
|
|
}
|
|
|
|
export default vueComponent(GenreSelectDialog);
|
|
//-----------------------------------------------------------------------------
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-panel {
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.checkbox-tick-all {
|
|
border-bottom: 1px solid #bbbbbb;
|
|
margin-bottom: 7px;
|
|
padding: 5px 5px 2px 16px;
|
|
}
|
|
</style> |