inpx-web/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue

<template>
    <Dialog v-model="dialogVisible">
        <template #header>
            <div class="row items-center">
                <div style="font-size: 130%">
                    Выбрать жанры
                </div>
            </div>
        </template>

        <div class="col column" style="height: 500px; min-width: 400px">
            <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 class="col fit tree">
                <div v-show="nodes.length" class="checkbox-tick-all">
                    <q-checkbox v-model="tickAll" size="36px" label="Выбрать все" @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>
        </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() {
    }

    async init() {
    }

    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 = [];
        }
    }

    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;
            }
        }
        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 {
    height: 50px;
    border-bottom: 1px solid gray;
    padding: 0 10px 0 12px;
}

.tree {
    padding: 0px 10px 10px 10px;
    overflow: auto;
}

.checkbox-tick-all {
    border-bottom: 1px solid #bbbbbb;
    margin-bottom: 7px;
    padding: 5px 5px 2px 16px;
}
</style>