114 lines
2.9 KiB
Vue
114 lines
2.9 KiB
Vue
<template>
|
|
<create-edit
|
|
:title="$t('list.edit.header')"
|
|
primary-icon=""
|
|
:primary-label="$t('misc.save')"
|
|
@primary="save"
|
|
:tertiary="$t('misc.delete')"
|
|
@tertiary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
|
|
>
|
|
<div class="field">
|
|
<label class="label" for="title">{{ $t('list.title') }}</label>
|
|
<div class="control">
|
|
<input
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading || null"
|
|
@keyup.enter="save"
|
|
class="input"
|
|
id="title"
|
|
:placeholder="$t('list.edit.titlePlaceholder')"
|
|
type="text"
|
|
v-focus
|
|
v-model="list.title"/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="identifier"
|
|
v-tooltip="$t('list.edit.identifierTooltip')">
|
|
{{ $t('list.edit.identifier') }}
|
|
</label>
|
|
<div class="control">
|
|
<input
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading ? true : null"
|
|
@keyup.enter="save"
|
|
class="input"
|
|
id="identifier"
|
|
:placeholder="$t('list.edit.identifierPlaceholder')"
|
|
type="text"
|
|
v-focus
|
|
v-model="list.identifier"/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="listdescription">{{ $t('list.edit.description') }}</label>
|
|
<div class="control">
|
|
<editor
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading"
|
|
:previewIsDefault="false"
|
|
id="listdescription"
|
|
:placeholder="$t('list.edit.descriptionPlaceholder')"
|
|
v-model="list.description"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">{{ $t('list.edit.color') }}</label>
|
|
<div class="control">
|
|
<color-picker v-model="list.hexColor"/>
|
|
</div>
|
|
</div>
|
|
|
|
</create-edit>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import AsyncEditor from '@/components/input/AsyncEditor'
|
|
|
|
import ListModel from '@/models/list'
|
|
import ListService from '@/services/list'
|
|
import ColorPicker from '@/components/input/colorPicker.vue'
|
|
import {CURRENT_LIST} from '@/store/mutation-types'
|
|
import CreateEdit from '@/components/misc/create-edit.vue'
|
|
|
|
export default {
|
|
name: 'list-setting-edit',
|
|
data() {
|
|
return {
|
|
list: ListModel,
|
|
listService: new ListService(),
|
|
}
|
|
},
|
|
components: {
|
|
CreateEdit,
|
|
ColorPicker,
|
|
editor: AsyncEditor,
|
|
},
|
|
watch: {
|
|
'$route.params.listId': {
|
|
handler: 'loadList',
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
async loadList() {
|
|
const list = new ListModel({id: this.$route.params.listId})
|
|
|
|
const loadedList = await this.listService.get(list)
|
|
this.list = { ...loadedList }
|
|
},
|
|
|
|
async save() {
|
|
await this.$store.dispatch('lists/updateList', this.list)
|
|
await this.$store.dispatch(CURRENT_LIST, this.list)
|
|
this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
|
|
this.$message.success({message: this.$t('list.edit.success')})
|
|
this.$router.back()
|
|
},
|
|
},
|
|
}
|
|
</script>
|