Работа над проектом

2022-08-31 18:51:31 +07:00
parent 9aae057f32
commit 77938aac04
9 changed files with 328 additions and 8 deletions
--- a/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue
+++ b/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue
@@ -0,0 +1,172 @@
+<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>