103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<script setup>
|
|
import { getLayerNames } from '@/components/viewer/utils/aps-viewer';
|
|
|
|
const store = useStore();
|
|
const { layersetting } = store;
|
|
const emit = defineEmits('close');
|
|
const { $insertapi, $patchapi, $snackbar } = useNuxtApp();
|
|
const radioSave = ref(layersetting ? "overwrite" : "new");
|
|
const name = ref(radioSave === 'new' ? '' : layersetting ? layersetting.name : '');
|
|
const errors = ref([]);
|
|
|
|
watch(radioSave, (val) => {
|
|
name.value = val === 'new' ? '' : layersetting.name;
|
|
errors.value = [];
|
|
});
|
|
|
|
function switchRadioSave(newVal) {
|
|
if (newVal === 'overwrite' && !layersetting)
|
|
return;
|
|
|
|
radioSave.value = newVal;
|
|
}
|
|
|
|
async function saveLayerSetting() {
|
|
const layerNames = getLayerNames();
|
|
const user = store.login.id;
|
|
if (!name.value) {
|
|
errors.value.push({ name: "name", msg: "Tên thiết lập không được bỏ trống" })
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
user,
|
|
name: name.value,
|
|
detail: layerNames
|
|
}
|
|
|
|
if (radioSave.value === 'overwrite') {
|
|
payload.id = layersetting.id;
|
|
}
|
|
|
|
const res = radioSave.value === 'new' ? await $insertapi('layersetting', payload) : await $patchapi('layersetting', payload);
|
|
if (res === 'error') {
|
|
$snackbar(isVietnamese.value ? `Có lỗi xảy ra khi ${radioSave.value === 'new' ? 'tạo' : 'cập nhật' } thiết lập` : `Error ${radioSave.value === 'new' ? 'creating' : 'updating' } layer setting`,
|
|
"Lỗi",
|
|
"Error"
|
|
);
|
|
} else {
|
|
store.commit('layersetting', res);
|
|
emit('close');
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="field">
|
|
<label class="label fs-14">Chọn chế độ lưu</label>
|
|
<div class="control">
|
|
<button class="button is-white fs-14 px-2 py-1" @click="switchRadioSave('overwrite')" :disabled="layersetting === undefined">
|
|
<span class="icon-text">
|
|
<SvgIcon v-bind="{
|
|
name: `radio-${radioSave === 'new' ? 'unchecked' : 'checked'}.svg`,
|
|
type: 'gray',
|
|
size: 22,
|
|
}" />
|
|
Ghi đè
|
|
</span>
|
|
</button>
|
|
<button class="button is-white fs-14 px-2 py-1" @click="switchRadioSave('new')">
|
|
<span class="icon-text">
|
|
<SvgIcon v-bind="{
|
|
name: `radio-${radioSave === 'new' ? 'checked' : 'unchecked'}.svg`,
|
|
type: 'gray',
|
|
size: 22
|
|
}" />
|
|
Tạo mới
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label fs-14">Tên thiết lập</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
style="box-sizing: border-box;"
|
|
type="text"
|
|
placeholder="e.g. Đường, Mặt hồ"
|
|
v-model="name"
|
|
@keydown.enter="saveLayerSetting"
|
|
/>
|
|
</div>
|
|
<div class="help has-text-danger" v-if="errors.find((v) => v.name === 'name')">
|
|
{{ errors.find((v) => v.name === "name").msg }}
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<button class="button is-primary" @click="saveLayerSetting()">Lưu lại</button>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
</style> |