search_ui/components/search/forms/SearchItemForm.vue

<template>
  <div>
    <div class="d-flex align-items-center">
      <div v-for="(metaItem, index) in metaItems">
        <span :key="'meta' + metaItem.id" class="title text__12">
          {{ metaItem.title }}
        </span>
        <span
          style="color:blue"
          v-if="index < metaItems.length - 1"
          class="tavasi tavasi-Component-22--1"
        ></span>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    metaItems: {
      default() {
        return [];
      },
    },
   
   
   
    formData: {
      type: Object,
      default: undefined,
    },
  },
  emits: ["update-list", "close-modal", "delete-item"],

  data() {
    return {
      buttonLoading: false,

      showPanel: false,
      showBackButton: false,
      selectedItemClone: {
        id: undefined,
        title: "",
        number: "",
        resource: "",
        date_text: "",
        text: "",
        projectid: this.selectedProjectGetter?.id,
        item_type: "text",
      },
      prevSelectedItemIndex: undefined,

      projects: [],
      list: [],

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

      breadcrumb: [],
      users: [],
      paperPropertyes: {},
      showReplaceInput: false,
    };
  },
  computed: {
    ...mapState("list", ["selectedProjectGetter","listIdGetter","selectedItemGetter"]),

    buttonText() {
      return this.selectedItemClone.id || this.selectedItemClone.guid
        ? "ذخیره"
        : "ثبت";
    },
  },

  methods: {
    getProjects() {
      const payload = {
        isown: 3,
        sortby: "created",
        offset: 0,
        limit: 100,
      };

      ApiService.formData(apis.projects.list, payload).then((res) => {
        this.projects = res.data.data;
      });
    },
    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const url = this.selectedItemClone.id
        ? apis.item.edit
        : apis.item.addbylist;

      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: "",
        number: "",
        resource: "",
        date_text: "",
        text: "",
        projectid: this.selectedProjectGetter.id,
        item_type: "text",
      };
    },
  },
  mounted() {
    this.getProjects();

    if (this.selectedItemGetter?.id)
      this.selectedItemClone = structuredClone(this.selectedItemGetter);
    else this.resetForm();
  },
};
</script>

<style lang="scss">
.form-control {
  border-radius: 0 20px 20px 0;
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  color: #707b87;
  height: 100%;
  border-color: transparent;
  padding-right: 0;
  padding-left: 0;
}

.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: pink;
}
.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: pink;
}
.form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: pink;
}
.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: pink;
}
</style>