Initial commit

app/components/viewer/LayerSettingSave.vue

@@ -0,0 +1,103 @@
+<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>