128 lines
3.2 KiB
Vue
128 lines
3.2 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>
|