2021-01-30 16:17:04 +00:00
|
|
|
<template>
|
|
|
|
<create-edit
|
2021-06-23 23:24:57 +00:00
|
|
|
:title="$t('list.edit.header')"
|
2021-01-30 16:17:04 +00:00
|
|
|
primary-icon=""
|
2021-06-23 23:24:57 +00:00
|
|
|
:primary-label="$t('misc.save')"
|
2021-01-30 16:17:04 +00:00
|
|
|
@primary="save"
|
2022-01-04 18:58:06 +00:00
|
|
|
:tertiary="$t('misc.delete')"
|
2022-09-02 15:13:32 +00:00
|
|
|
@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId } })"
|
2021-01-30 16:17:04 +00:00
|
|
|
>
|
|
|
|
<div class="field">
|
2021-08-23 17:42:42 +00:00
|
|
|
<label class="label" for="title">{{ $t('list.title') }}</label>
|
2021-01-30 16:17:04 +00:00
|
|
|
<div class="control">
|
|
|
|
<input
|
2022-09-02 15:13:32 +00:00
|
|
|
:class="{ 'disabled': isLoading}"
|
|
|
|
:disabled="isLoading || undefined"
|
2021-01-30 16:17:04 +00:00
|
|
|
@keyup.enter="save"
|
|
|
|
class="input"
|
2021-08-23 17:42:42 +00:00
|
|
|
id="title"
|
2021-06-23 23:24:57 +00:00
|
|
|
:placeholder="$t('list.edit.titlePlaceholder')"
|
2021-01-30 16:17:04 +00:00
|
|
|
type="text"
|
|
|
|
v-focus
|
|
|
|
v-model="list.title"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
|
|
|
<label
|
|
|
|
class="label"
|
2021-08-23 17:42:42 +00:00
|
|
|
for="identifier"
|
2021-06-23 23:24:57 +00:00
|
|
|
v-tooltip="$t('list.edit.identifierTooltip')">
|
|
|
|
{{ $t('list.edit.identifier') }}
|
2021-01-30 16:17:04 +00:00
|
|
|
</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
2022-09-02 15:13:32 +00:00
|
|
|
:class="{ 'disabled': isLoading}"
|
|
|
|
:disabled="isLoading || undefined"
|
2021-01-30 16:17:04 +00:00
|
|
|
@keyup.enter="save"
|
|
|
|
class="input"
|
2021-08-23 17:42:42 +00:00
|
|
|
id="identifier"
|
2021-06-23 23:24:57 +00:00
|
|
|
:placeholder="$t('list.edit.identifierPlaceholder')"
|
2021-01-30 16:17:04 +00:00
|
|
|
type="text"
|
|
|
|
v-focus
|
|
|
|
v-model="list.identifier"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2021-06-23 23:24:57 +00:00
|
|
|
<label class="label" for="listdescription">{{ $t('list.edit.description') }}</label>
|
2021-01-30 16:17:04 +00:00
|
|
|
<div class="control">
|
|
|
|
<editor
|
2022-09-02 15:13:32 +00:00
|
|
|
:class="{ 'disabled': isLoading}"
|
|
|
|
:disabled="isLoading"
|
2021-10-17 16:52:05 +00:00
|
|
|
:previewIsDefault="false"
|
2021-01-30 16:17:04 +00:00
|
|
|
id="listdescription"
|
2021-06-23 23:24:57 +00:00
|
|
|
:placeholder="$t('list.edit.descriptionPlaceholder')"
|
2021-01-30 16:17:04 +00:00
|
|
|
v-model="list.description"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2021-06-23 23:24:57 +00:00
|
|
|
<label class="label">{{ $t('list.edit.color') }}</label>
|
2021-01-30 16:17:04 +00:00
|
|
|
<div class="control">
|
|
|
|
<color-picker v-model="list.hexColor"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</create-edit>
|
|
|
|
</template>
|
|
|
|
|
2022-02-15 12:07:34 +00:00
|
|
|
<script lang="ts">
|
2022-09-02 15:13:32 +00:00
|
|
|
export default { name: 'list-setting-edit' }
|
|
|
|
</script>
|
2022-02-15 12:07:59 +00:00
|
|
|
|
2022-09-02 15:13:32 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import type {PropType} from 'vue'
|
|
|
|
import {useRouter} from 'vue-router'
|
2022-09-05 16:56:37 +00:00
|
|
|
import {useStore} from '@/store'
|
2022-09-02 15:13:32 +00:00
|
|
|
import {useI18n} from 'vue-i18n'
|
2021-08-23 19:18:29 +00:00
|
|
|
|
2022-09-02 15:13:32 +00:00
|
|
|
import Editor from '@/components/input/AsyncEditor'
|
2021-07-25 13:27:15 +00:00
|
|
|
import ColorPicker from '@/components/input/colorPicker.vue'
|
|
|
|
import CreateEdit from '@/components/misc/create-edit.vue'
|
2021-01-30 16:17:04 +00:00
|
|
|
|
2022-09-02 15:13:32 +00:00
|
|
|
import {CURRENT_LIST} from '@/store/mutation-types'
|
2022-09-05 16:56:37 +00:00
|
|
|
import type {IList} from '@/modelTypes/IList'
|
2021-01-30 16:17:04 +00:00
|
|
|
|
2022-09-02 15:13:32 +00:00
|
|
|
import { useList } from '@/composables/useList'
|
|
|
|
import { useTitle } from '@/composables/useTitle'
|
2021-10-11 17:37:20 +00:00
|
|
|
|
2022-09-02 15:13:32 +00:00
|
|
|
const props = defineProps({
|
|
|
|
listId: {
|
2022-07-20 22:42:36 +00:00
|
|
|
type: Number as PropType<IList['id']>,
|
2022-09-02 15:13:32 +00:00
|
|
|
required: true,
|
2021-01-30 16:17:04 +00:00
|
|
|
},
|
2022-02-15 12:07:59 +00:00
|
|
|
})
|
2022-09-02 15:13:32 +00:00
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
const store = useStore()
|
|
|
|
|
2022-09-15 09:54:01 +00:00
|
|
|
const {t} = useI18n({useScope: 'global'})
|
2022-09-02 15:13:32 +00:00
|
|
|
|
|
|
|
const {list, save: saveList, isLoading} = useList(props.listId)
|
|
|
|
|
|
|
|
useTitle(() => list?.title ? t('list.edit.title', {list: list.title}) : '')
|
|
|
|
|
|
|
|
async function save() {
|
|
|
|
await saveList()
|
|
|
|
await store.dispatch(CURRENT_LIST, {list})
|
|
|
|
router.back()
|
|
|
|
}
|
2021-01-30 16:17:04 +00:00
|
|
|
</script>
|