| 1 | <template> |
| 2 | <n-spin class="settings" :show="loading"> |
| 3 | <n-card> |
| 4 | <n-form ref="formRef" :label-width="80" :model="formValue" :rules="formRules"> |
| 5 | <div class="title">General</div> |
| 6 | <div class="flex flex-col md:flex-row md:gap-6"> |
| 7 | <n-form-item label="Date Format" path="dateFormat" class="basis-1/3"> |
| 8 | <n-select v-model:value="formValue.dateFormat" :options="dateFormatsAvailable" /> |
| 9 | </n-form-item> |
| 10 | <n-form-item label="Time Format" path="hours24" class="basis-1/3"> |
| 11 | <n-radio-group v-model:value="formValue.hours24" name="radiogroup"> |
| 12 | <div class="flex flex-wrap gap-3"> |
| 13 | <n-radio value :label="`24 Hours [ ${h24} ]`" /> |
| 14 | <n-radio :value="false" :label="`12 Hours [ ${h12} ]`" /> |
| 15 | </div> |
| 16 | </n-radio-group> |
| 17 | </n-form-item> |
| 18 | </div> |
| 19 | |
| 20 | <n-form-item> |
| 21 | <n-button type="primary" @click="save()">Save</n-button> |
| 22 | </n-form-item> |
| 23 | </n-form> |
| 24 | </n-card> |
| 25 | </n-spin> |
| 26 | </template> |
| 27 | |
| 28 | <script setup lang="ts"> |
| 29 | import type { FormInst, FormValidationError } from "naive-ui" |
| 30 | import { NButton, NCard, NForm, NFormItem, NRadio, NRadioGroup, NSelect, NSpin, useMessage } from "naive-ui" |
| 31 | import { ref } from "vue" |
| 32 | import { useSettingsStore } from "@/stores/settings" |
| 33 | import dayjs from "@/utils/dayjs" |
| 34 | |
| 35 | const settingsStore = useSettingsStore() |
| 36 | |
| 37 | const h24 = dayjs().format("HH:mm") |
| 38 | const h12 = dayjs().format("h:mm a") |
| 39 | const dateFormatsAvailable = settingsStore.dateFormatsAvailable.map(i => ({ label: i, value: i })) |
| 40 | const currentSateFormat = settingsStore.rawDateFormat |
| 41 | const hours24 = settingsStore.hours24 |
| 42 | |
| 43 | const formValue = ref({ |
| 44 | dateFormat: currentSateFormat, |
| 45 | hours24 |
| 46 | }) |
| 47 | |
| 48 | const loading = ref(false) |
| 49 | const formRef = ref<FormInst | null>(null) |
| 50 | const message = useMessage() |
| 51 | |
| 52 | const formRules = { |
| 53 | username: { |
| 54 | required: true, |
| 55 | message: "Please input username", |
| 56 | trigger: "blur" |
| 57 | }, |
| 58 | email: { |
| 59 | required: true, |
| 60 | message: "Please input email", |
| 61 | trigger: "blur" |
| 62 | } |
| 63 | } |
| 64 | |
| 65 | function save() { |
| 66 | loading.value = true |
| 67 | |
| 68 | formRef.value?.validate((errors: Array<FormValidationError> | undefined) => { |
| 69 | if (!errors) { |
| 70 | settingsStore.setDateFormat(formValue.value.dateFormat) |
| 71 | settingsStore.setHours24(formValue.value.hours24) |
| 72 | |
| 73 | message.success("Settings saved") |
| 74 | } else { |
| 75 | message.error("Something was wrong") |
| 76 | } |
| 77 | loading.value = false |
| 78 | }) |
| 79 | } |
| 80 | </script> |
| 81 | |
| 82 | <style lang="scss" scoped> |
| 83 | .settings { |
| 84 | .title { |
| 85 | font-size: 20px; |
| 86 | margin-bottom: 20px; |
| 87 | |
| 88 | &:not(:first-child) { |
| 89 | margin-top: 20px; |
| 90 | } |
| 91 | } |
| 92 | } |
| 93 | </style> |