web/app/components/datatable/MenuSave.vue

<template>
  <!-- v-if="currentsetting ? currentsetting.user === login.id : false" -->
  <div
    class="mb-4"
    v-if="currentsetting"
  >
    <p>
      Đang mở: <b>{{ $stripHtml(currentsetting.name, 40) }}</b>
    </p>
  </div>
  <div class="field">
    <label class="label">Chọn chế độ lưu</label>
    <div class="control is-expanded fs-14">
      <button
        class="button is-white has-text-inherit"
        v-if="isOverwrite()"
        @click="changeType('overwrite')"
      >
        <span class="icon">
          <Icon
            :name="
              radioSave === 'overwrite'
                ? 'material-symbols:radio-button-checked-outline'
                : 'material-symbols:radio-button-unchecked'
            "
            :size="22"
          />
        </span>
        <span>Ghi đè</span>
      </button>
      <button
        class="button is-white"
        @click="changeType('new')"
      >
        <span class="icon">
          <Icon
            :name="
              radioSave === 'new'
                ? 'material-symbols:radio-button-checked-outline'
                : 'material-symbols:radio-button-unchecked'
            "
            :size="22"
          />
        </span>
        <span>Tạo mới</span>
      </button>
    </div>
  </div>
  <template v-if="radioSave === 'new'">
    <div class="field">
      <label class="label">Tên thiết lập <span class="has-text-danger"> * </span></label>
      <div class="control">
        <!-- ref="name" -->
        <input
          class="input"
          type="text"
          placeholder="products, variants-table, etc."
          v-model="name"
          v-on:keyup.enter="saveSetting"
        />
      </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">
      <label class="label">Mô tả</label>
      <p class="control is-expanded">
        <textarea
          class="textarea"
          rows="1"
          placeholder="Note"
          v-model="note"
        ></textarea>
      </p>
    </div>
  </template>
  <div class="field mt-5 px-0 mx-0">
    <label
      class="label fs-14"
      v-if="status !== undefined"
      :class="status ? 'has-text-primary' : 'has-text-danger'"
    >
      {{ status ? "Lưu thiết lập thành công." : "Lỗi. Lưu thiết lập thất bại." }}
    </label>
    <p class="control is-expanded">
      <button
        ref="saveBtn"
        :class="['button is-primary', isLoading && 'is-loading']"
        @click="saveSetting()"
      >
        Lưu lại
      </button>
    </p>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useStore } from "@/stores/index";
const emit = defineEmits([]);
const store = useStore();
const props = defineProps({
  pagename: String,
  classify: String,
  option: String,
  data: Object,
  focus: Boolean,
});
const { $empty, $copy, $stripHtml, $updateapi, $insertapi, $findIndex, $snackbar } = useNuxtApp();
const radioOption = ref();
var login = { id: 1 };
const errors = ref([]);
const radioType = ref();
const radioDefault = 0;
const radioSave = ref("overwrite");
const name = ref();
const note = ref();
const status = undefined;
var currentsetting = undefined;
var pagename = props.pagename;
var pagedata = store[props.pagename];
const isLoading = ref(false);
const saveBtnRef = useTemplateRef("saveBtn");
onMounted(() => {
  saveBtnRef.value.focus();
});

async function saveSetting() {
  errors.value = [];
  let detail = pagename ? { fields: pagedata.fields } : {};
  if (pagename) {
    let element = pagedata.tablesetting || {};
    if (element !== store.originsetting) detail.tablesetting = element;
    if (pagedata.filters ? pagedata.filters.length > 0 : false) {
      detail.filters = pagedata.filters;
    }
  }
  if (props.option) detail.option = props.option;
  if (props.data) detail.data = props.data;
  let data = {
    // user: login.id,
    user: undefined,
    name: name.value,
    detail,
    note,
    type: radioType.value.id,
    classify: props.classify ? props.classify : store.settingclass.find((v) => v.code === "data-field").id,
    default: radioDefault,
    update_time: new Date(),
  };
  let result;
  isLoading.value = true;
  if (radioSave.value === "new") {
    if ($empty(name.value)) {
      return errors.value.push({
        name: "name",
        msg: "Tên thiết lập không được bỏ trống",
      });
    }
    result = await $insertapi("usersetting", data);
  } else {
    let copy = $copy(currentsetting);
    copy.detail = detail;
    copy.update_time = new Date();
    result = await $updateapi("usersetting", copy);
  }
  isLoading.value = false;
  if (radioSave.value === "new") {
    emit("modalevent", { name: "opensetting", data: result });
  } else {
    let idx = $findIndex(store.settings, { id: result.id });
    if (idx >= 0) {
      let copy = $copy(store.settings);
      copy[idx] = result;
      store.commit("settings", copy);
    }
    $snackbar("Lưu thiết lập thành công", undefined, "Success");
    emit("modalevent", { name: "updatesetting", data: result });
    emit("close");
  }
}
function isOverwrite() {
  return true;
}
function changeType(value) {
  radioSave.value = value;
}
function changeOption(v) {
  radioOption.value = v.code;
}
function initData() {
  radioType.value = store.settingtype.find((v) => v.code === "private");
  if (props.pagename) currentsetting = $copy(pagedata.setting ? pagedata.setting : undefined);
  // disable temp: for now, radioSave is always 'overwrite'
  /*   if (!currentsetting) radioSave.value = "new";
  else if (currentsetting.user !== login.id) radioSave.value = "new";
  else radioSave.value = "overwrite"; */
}
initData();
</script>