119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue'
|
|
import axios from 'axios'
|
|
import type { SettingField } from "@/Types/types"
|
|
|
|
const props = defineProps<{
|
|
fields: SettingField[],
|
|
description?: string | null
|
|
}>()
|
|
|
|
const values = reactive(
|
|
Object.fromEntries(props.fields.map(f => [f.key, f.value]))
|
|
)
|
|
const saving = ref(false)
|
|
const saved = ref(false)
|
|
const error = ref(false)
|
|
|
|
async function save() {
|
|
saving.value = true
|
|
error.value = false
|
|
try {
|
|
await axios.patch('/settings', { settings: values })
|
|
saved.value = true
|
|
setTimeout(() => saved.value = false, 3000)
|
|
} catch {
|
|
error.value = true
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-form @submit.prevent="save">
|
|
<small v-if="description" class="text-body-2 text-medium-emphasis mb-3 d-block">
|
|
{{ description }}
|
|
</small>
|
|
|
|
<template v-for="field in fields" :key="field.key">
|
|
|
|
<v-select
|
|
v-if="field.type === 'select'"
|
|
v-model="values[field.key]"
|
|
:label="field.label"
|
|
:items="field.options"
|
|
item-title="label"
|
|
item-value="value"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="mb-2"
|
|
/>
|
|
|
|
<v-text-field
|
|
v-else-if="field.type === 'text'"
|
|
v-model="values[field.key]"
|
|
:label="field.label"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
class="mb-2"
|
|
/>
|
|
|
|
<v-checkbox
|
|
v-else-if="field.type === 'checkbox'"
|
|
v-model="values[field.key]"
|
|
:label="field.label"
|
|
color="primary"
|
|
density="comfortable"
|
|
hide-details
|
|
class="mb-2"
|
|
/>
|
|
|
|
<v-select
|
|
v-else-if="field.type === 'multiselect'"
|
|
v-model="values[field.key]"
|
|
:label="field.label"
|
|
:items="field.options"
|
|
item-title="label"
|
|
item-value="value"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
chips
|
|
multiple
|
|
closable-chips
|
|
clearable
|
|
class="mb-2"
|
|
/>
|
|
|
|
</template>
|
|
|
|
<v-divider class="my-4" />
|
|
|
|
<div class="d-flex align-center gap-3">
|
|
<v-btn
|
|
type="submit"
|
|
color="primary"
|
|
variant="elevated"
|
|
:loading="saving"
|
|
min-width="140"
|
|
>
|
|
Save settings
|
|
</v-btn>
|
|
|
|
<v-fade-transition>
|
|
<div v-if="saved" class="d-flex align-center gap-1 text-success">
|
|
<v-icon size="18">mdi-check-circle</v-icon>
|
|
<span class="text-body-2">Saved</span>
|
|
</div>
|
|
</v-fade-transition>
|
|
|
|
<v-fade-transition>
|
|
<div v-if="error" class="d-flex align-center gap-1 text-error">
|
|
<v-icon size="18">mdi-alert-circle</v-icon>
|
|
<span class="text-body-2">Something went wrong</span>
|
|
</div>
|
|
</v-fade-transition>
|
|
</div>
|
|
</v-form>
|
|
</template>
|