search_ui/components/search/forms/SearchPropertyForm.vue

<template>
  <div class="">
    <div v-if="properties.length">
      <form class="form" @submit.prevent="onSubmit()">
        <div
          v-for="property in properties"
          :key="property.title"
          class="form-row form-group"
        >
          <label class="col-1" for="title">{{ property.property }} </label>

          <div class="col">
            <textarea
              v-if="property.property_id"
              class="form-control"
              id="title"
              name="title"
              v-model="property.value"
              rows="1"
            ></textarea>
            <label v-else class="col">{{ property.value }} </label>
          </div>
        </div>

        <div class="form-row form-group mt-4">
          <div class="col d-flex">
            <button-component
              v-can="'list_info_edit'"
              classes="btn-outline-primary"
              type="submit"
              :buttonText="buttonText"
              :buttonLoading="buttonLoading"
            ></button-component>

            <!--            <button-component-->
            <!--              classes="btn-default"-->
            <!--              @click="closeForm"-->
            <!--              buttonText="انصراف"-->
            <!--              :buttonLoading="buttonLoading"-->
            <!--            ></button-component>-->
          </div>
          <!--          <button-component-->
          <!--            v-if="selectedItemClone.id"-->
          <!--            classes="delete-btn btn-outline-danger"-->
          <!--            @click="onDelete"-->
          <!--            buttonText="حذف"-->
          <!--            :buttonLoading="buttonLoading"-->
          <!--          >-->
          <!--            <i class="tavasi tavasi-bin"></i>-->
          <!--          </button-component>-->
        </div>
      </form>
    </div>
    <no-data v-else />
  </div>
</template>

<script>
import apis from "~/apis/listApi";
import { mapState, mapActions } from "pinia";
import { createObjectByNewProperties } from "";
export default {
  emits: ["close-form", "update-list"],
  data() {
    return {
      fetchingData: false,
      buttonLoading: false,

      showPanel: false,
      showBackButton: false,
      selectedItemClone: {
        title: null,
        comment: null,
        type: 1,

        color: 1,
        guid: undefined,
      },
      prevSelectedItemIndex: undefined,

      properties: [],

      prevActivePaperIndex: 0,
      editMode: false,
      tableColumns: {
        title: "عنوان",
        comment: "نظر",
      },

      breadcrumb: [],
      users: [],
      paperPropertyes: {},
      showReplaceInput: false,
    };
  },

  computed: {
    ...mapState(["getRefreshForm"]),
    ...mapState("list", ["selectedProjectGetter", "listIdGetter"]),
    buttonText() {
      return this.selectedItemClone.id || this.selectedItemClone.guid
        ? "ذخیره"
        : "ثبت";
    },
  },

  methods: {
    ...mapActions(["TOGGLE_PANEL"]),
    getProperties() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      const payload = {
        projectid: this.selectedProjectGetter?.id,
        listid: this.listIdGetter,
        bysubject: 1,
      };

      ApiService.formData(apis.property.list, payload)
        .then((res) => {
          this.properties = res.data.data;
        })
        
        .finally(() => {
          this.fetchingData = false;
        });
    },
    onSubmit() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const allowedProperties = ["property_id", "id", "value"];
      // this.properties = createObjectByNewProperties(this.properties, allowedProperties);

      const formData = {
        items: createObjectByNewProperties(this.properties, allowedProperties),
        listid: this.listIdGetter,
        projectid: this.selectedProjectGetter?.id,
      };

      ApiService.postRequest(apis.property.editbulk, formData)
        .then((res) => {
          this.mySwalToast({
            title: "تبریک",
            html: res.data.message,
            icon: "success",
          });
        })
        
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    closeForm() {
      this.resetForm();
      this.TOGGLE_PANEL(false);
      this.$emit("close-form");
    },
    resetForm() {
      this.selectedItemClone = {
        title: null,
        comment: null,
        type: 1,

        color: 1,
        guid: undefined,
      };
    },
    onDelete(projectId) {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const data = {
        id: projectId,
        guid: projectId,
      };

      this.mySwalConfirm({
        title: "هشدار",
        html: "از حذف این پروژه مطمئن هستید؟",
        icon: "warning",
      }).then((result) => {
        if (result.isConfirmed) {
          ApiService.formData(apis.projects.delete, data)
            .then((res) => {
              this.updateList();
              this.$emit("toggle-panel", false);

              this.mySwalToast({
                title: "تبریک",
                html: "بخش با موفقیت حذف گردید.",
                icon: "success",
              });
            })
            
            .finally(() => {
              this.buttonLoading = false;
            });
        } else this.buttonLoading = false;
      });
    },
  },
  mounted() {
    if (this.listIdGetter) this.getProperties();
  },
  watch: {
    listIdGetter: {
      handler(newVal) {
        if (newVal) this.getProperties();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
label {
  color: #92a2b2;
}
</style>