Работа над диалогом выбора даты

2022-10-31 20:38:35 +07:00
parent bcd0308641
commit 8982b3eaf0
10 changed files with 301 additions and 40 deletions
--- a/client/components/Search/SelectDateDialog/SelectDateDialog.vue
+++ b/client/components/Search/SelectDateDialog/SelectDateDialog.vue
@@ -0,0 +1,132 @@
+<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: 240px; padding: 0px 10px 10px 10px;">
+            <div class="row items-center">
+                <span class="q-mr-sm">От:</span>
+                <q-btn icon="la la-calendar" color="secondary" :label="labelFrom" dense no-caps style="width: 150px;">
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-date v-model="from" mask="YYYY-MM-DD">
+                            <div class="row items-center justify-end q-gutter-sm">
+                                <q-btn v-close-popup label="Отмена" color="primary" flat />
+                                <q-btn v-close-popup label="OK" color="primary" flat @click="save" />
+                            </div>
+                        </q-date>
+                    </q-popup-proxy>
+                </q-btn>
+                <q-icon name="la la-times-circle" class="q-ml-sm text-grey-6 clickable2" size="28px" @click="from = ''; save();" />
+            </div>
+
+            <div class="q-my-sm" />
+            <div class="row items-center">
+                <span class="q-mr-sm">До:</span>
+                <q-btn icon="la la-calendar" color="secondary" :label="labelTo" dense no-caps style="width: 150px;">
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-date v-model="to" mask="YYYY-MM-DD">
+                            <div class="row items-center justify-end q-gutter-sm">
+                                <q-btn v-close-popup label="Отмена" color="primary" flat />
+                                <q-btn v-close-popup label="OK" color="primary" flat @click="save" />
+                            </div>
+                        </q-date>
+                    </q-popup-proxy>
+                </q-btn>
+                <q-icon name="la la-times-circle" class="q-ml-sm text-grey-6 clickable2" size="28px" @click="to = ''; save();" />
+            </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';
+import * as utils from '../../../share/utils';
+
+const componentOptions = {
+    components: {
+        Dialog
+    },
+    watch: {
+        modelValue(newValue) {
+            this.dialogVisible = newValue;
+        },
+        dialogVisible(newValue) {
+            this.$emit('update:modelValue', newValue);
+        },
+        date() {
+            this.updateFromTo();
+        },
+    }
+};
+class SelectDateDialog {
+    _options = componentOptions;
+    _props = {
+        modelValue: Boolean,
+        date: String,
+    };
+
+    dialogVisible = false;
+
+    from = '';
+    to = '';
+
+    created() {
+    }
+
+    mounted() {
+        this.updateFromTo();
+    }
+
+    updateFromTo() {
+        this.from = this.splitDate.from;
+        this.to = this.splitDate.to;
+    }
+
+    get splitDate() {
+        const [from = '', to = ''] = (this.date || '').split(',');
+        return {from, to};
+    }
+
+    get labelFrom() {
+        return (this.splitDate.from ? utils.sqlDateFormat(this.splitDate.from) : 'Не указано');
+    }
+
+    get labelTo() {
+        return (this.splitDate.to ? utils.sqlDateFormat(this.splitDate.to) : 'Не указано');
+    }
+
+    save() {
+        let d = this.from;
+        if (this.to)
+            d += `,${this.to}`;
+        this.$emit('update:date', d);
+    }
+
+    okClick() {
+        this.dialogVisible = false;
+    }
+}
+
+export default vueComponent(SelectDateDialog);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.clickable2 {
+    cursor: pointer;
+}
+</style>