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

2022-09-12 17:59:29 +07:00
parent 00150966e2
commit a46276cf1a
6 changed files with 250 additions and 15 deletions
--- a/client/components/Search/SelectLangDialog/SelectLangDialog.vue
+++ b/client/components/Search/SelectLangDialog/SelectLangDialog.vue
@@ -0,0 +1,190 @@
+<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 v-show="langList.length" class="checkbox-tick-all">
+                <div class="row items-center">
+                    <q-option-group
+                        v-model="ticked"
+                        :options="optionsPre"
+                        type="checkbox"
+                        inline
+                    />
+
+                    <div class="col" />
+                    <div v-show="lang != langDefault" class="clickable" @click="setAsDefaults">
+                        Установить по умолчанию
+                    </div>
+                </div>
+
+                <q-checkbox v-model="tickAll" label="Выбрать/снять все" toggle-order="ft" @update:model-value="makeTickAll" />
+            </div>
+
+            <q-option-group
+                v-model="ticked"
+                :options="options"
+                type="checkbox"
+                inline
+            >
+                <template #label="opt">
+                    <div class="row items-center" style="width: 35px">
+                        <span>{{ opt.label }}</span>
+                    </div>
+                </template>
+            </q-option-group>
+        </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);
+        },
+        lang() {
+            this.updateTicked();
+        },
+        ticked() {
+            this.checkAllTicked();
+            this.updateLang();
+        },
+    }
+};
+class SelectLangDialog {
+    _options = componentOptions;
+    _props = {
+        modelValue: Boolean,
+        lang: {type: String, value: ''},
+        langDefault: {type: String, value: ''},
+        langList: Array,
+    };
+
+    dialogVisible = false;
+
+    ticked = [];
+    tickAll = false;
+
+    created() {
+        this.commit = this.$store.commit;
+    }
+
+    mounted() {
+    }
+
+    async init() {
+        //await this.$refs.dialog.waitShown();
+    }
+
+    get options() {
+        const result = [];
+
+        for (const lang of this.langList) {
+            result.push({label: lang, value: lang});
+        }
+
+        return result;
+    }
+
+    get optionsPre() {
+        const result = [];
+
+        for (const lang of this.langList) {
+            if (['ru', 'en'].includes(lang)) {
+                result.push({label: lang, value: lang});
+            }
+        }
+
+        return result.reverse();
+    }
+
+    makeTickAll() {
+        if (this.tickAll) {
+            const newTicked = [];
+            for (const lang of this.langList) {
+                newTicked.push(lang);
+            }
+            this.ticked = newTicked;
+        } else {
+            this.ticked = [];
+            this.tickAll = false;
+        }
+    }
+
+    checkAllTicked() {
+        const ticked = new Set(this.ticked);
+
+        let newTickAll = !!(this.langList.length);
+        for (const lang of this.langList) {
+            if (!ticked.has(lang)) {
+                newTickAll = false;
+                break;
+            }
+        }
+
+        if (this.ticked.length && !newTickAll) {
+            this.tickAll = undefined;
+        } else {
+            this.tickAll = newTickAll;
+        }
+    }
+
+    updateTicked() {
+        this.ticked = this.lang.split(',').filter(s => s);
+    }
+
+    updateLang() {
+        this.$emit('update:lang', this.ticked.join(','));
+    }
+
+    setAsDefaults() {
+        this.commit('setSettings', {langDefault: this.lang});
+    }
+
+    okClick() {
+        this.dialogVisible = false;
+    }
+}
+
+export default vueComponent(SelectLangDialog);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.checkbox-tick-all {
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 7px;
+    padding: 5px 5px 2px 0px;
+}
+
+.clickable {
+    color: blue;
+    cursor: pointer;
+}
+</style>