search_ui/components/entity/forms/EntityListForm.vue

<template>
  <form  @submit.prevent="save()">
    <div class="form-group form-row">
      <label class="col-2" for="title">عنوان: </label>
      <input
        class="form-control col"
        placeholder="عنوان را وارد کنید"
        type="text"
        id="title"
        name="title"
        v-model.trim="selectedItemClone.title"
      />
    </div>

    <div class="form-group form-row">
      <div class="col-12 d-flex justify-content-between">
        <div class="d-flex">
          <button-component
            type="submit"
            classes="btn-outline-primary"
            :buttonText="buttonText"
            :buttonLoading="buttonLoading"
          ></button-component>
          <button-component
            classes="btn-default"
            @click="closeModal()"
            buttonText="انصراف"
            :buttonLoading="buttonLoading"
          ></button-component>
        </div>
        <button-component
          v-if="selectedItem.id"
          classes="delete-btn btn-outline-danger"
          @click="deleteItem()"
          buttonText="حذف"
          :buttonLoading="buttonLoading"
        >
          <i class="tavasi tavasi-bin"></i>
        </button-component>
      </div>
    </div>
  </form>
</template>

<script>
import apis from "~/apis/listApi";
import { mapState } from "pinia";

export default {
  props: {
    selectedItem: {
      default() {
        return {};
      },
    },
    parentId: {
      default: 0,
    },

    apiName: {
      type: String,
      default: '',
    },
  },

  emits: ["update-list", "close-modal", "delete-item"],

  data() {
    return {
      buttonLoading: false,
      selectedItemClone: {
        id: undefined,
        title: "",
        listtype: 0,
        projectid: this.selectedProjectGetter?.id,
        parent: this.parentId,
      },
    };
  },
  computed: {
    ...mapState("list", [
      "selectedProjectGetter",
      "listIdGetter",
      "selectedItemGetter",
    ]),
    buttonText() {
      return this.selectedItemClone.id || this.selectedItemClone.guid
        ? "ذخیره"
        : "ثبت";
    },
  },

  methods: {
    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      // apiName = subject | list
      const url = this.selectedItemClone.id
        ? apis[this.apiName].edit
        : apis[this.apiName].add;

      this.selectedItemClone.listid = this.listIdGetter;

      ApiService.formData(url, this.selectedItemClone)
        .then((res) => {
          this.mySwalToast({
            title: "تبریک",
            html: res.data.message,
            icon: "success",
          });

          this.$emit("update-list");
        })
        
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    deleteItem() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const data = { id: this.listIdGetter, projectid: this.selectedProjectGetter?.id };

      this.mySwalConfirm({
        title: "هشدار!!!",
        html: "از حذف این مورد مطمئن هستید؟",
      }).then((result) => {
        if (result.isConfirmed) {
          ApiService.formData(apis.item.delete, data)
            .then((response) => {
              this.mySwalToast({
                title: "تبریک",
                html: response.data.message,
                icon: "success",
              });

              this.$emit("delete-item");
            })
            
            .finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },

    closeModal() {
      this.resetForm();
      this.$emit("close-modal");
    },
    resetForm() {
      this.selectedItemClone = {
        id: undefined,
        title: "",
        listtype: 0,
        projectid: this.selectedProjectGetter?.id,
        parent: this.parentId,
      };
    },
  },
  mounted() {
    if (this.selectedItem?.id)
      this.selectedItemClone = structuredClone(this.selectedItem);
    else this.resetForm();
  },
};
</script>