search_ui/components/search/SearchItemDetails.vue

<template>
  <div class="side-panel me-4" v-if="sidePanel">
    <div
      class="side-panel-header d-flex justify-content-between align-items-center"
    >
      <h6 class="text-center">مشخصات کامل مورد جاری</h6>
      <a
        @click="closeDetailPanel()"
        class="close-sidebar-panel"
        role="button"
        title="Toggle sidebar"
        type="button"
      >
        <span class="tavasi tavasi-Component-294--1"></span>
      </a>
    </div>

    <div class="position-relative redios-castom py-3">
      <!-- <button
        v-can="'item-info_edit'"
        @click="editItem()"
        title="ویرایش"
        class="btn float-edit-btn"
        data-bs-toggle="modal"
        data-bs-target="#edit-paper"
      >
        <i class="tavasi tavasi-Component-242--1"></i>
      </button> -->
      <div class="side-panel-content firefox-scrollbar">
        <form-builder
          :previewMode="true"
          :formElements="clonedFormElements"
          :formData="selectedItemGetter"
          :displayMode="'default'"
        ></form-builder>

        <!-- <div class="form-row form-group">
          <label class="col-2 " for="title" style="margin:;">عنوان:</label>
          <div class="col-1"></div>
          <p class="col-9 " id="title" v-html="selectedItem.title"></p>
        </div>
        <div class="form-row form-group">
          <label class="col-2" for="title">شماره:</label>
          <div class="col-1"></div>
          <p class="col-9" id="number" v-html="selectedItem.number"></p>
        </div>
        <div class="form-row form-group">
          <label class="col-2" for="resources">منبع:</label>
          <div class="col-1"></div>
          <p class="col-9" id="resources" v-html="selectedItem.resources"></p>
        </div>
        <div class="form-row form-group">
          <label class="col-2" for="date_text">تاریخ:</label>
          <div class="col-1"></div>
          <p class="col-9" id="date_text" v-html="selectedItem.date_text"></p>
        </div>
        <div class="form-row form-group">
          <label class="col-2" for="text">متن:</label>
          <div class="col-1"></div>
          <p class="col-9" id="text" v-html="selectedItem.text"></p>
        </div> -->

        <!-- <div class="d-flex justify-content-start">
          <button-component
            classes="btn-default"
            :buttonText="'نمایش متن'"
            @click="showFullDetails"
          ></button-component>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
export default {
  emits: ["open-form"],
  mounted() {
    this.changeTypeToLabel(this.searchListActiveSchemaGetter.items);
  },
  watch: {
    searchListActiveSchemaGetter(newValue) {
      this.changeTypeToLabel(newValue.items);
    },
  },

  data() {
    return {
      sidePanel: true,
      clonedFormElements: undefined,
    };
  },
  computed: {
    ...mapState("list", ["selectedProjectGetter", "selectedItemGetter"]),
    ...mapState(useSearchStore, [
      "searchListSchemaGetter",
      "searchListActiveSchemaGetter",
      "searchListActiveTabGetter",
    ]),
  },
  methods: {
    closeDetailPanel() {
      this.sidePanel = !this.sidePanel;
      this.$emit("close-detail-panel", this.sidePanel);
    },

    // closeSidePaneldetail(){
    //   this.sidePanel = !this.sidePanel ;
    // },
    ...mapActions("list", ["SET_LIST_COMPONENT_NAME"]),
    showFullDetails() {
      this.SET_LIST_COMPONENT_NAME({
        listComponentName: "ItemList",
        selectedItem: this.selectedItemGetter,
      });

      let pageTitle = this.selectedItemGetter.title;
      pageTitle = pageTitle.replaceAll(" ", "-");
      this.$router.push({
        name: "itemShow",
        params: { pageTitle, id: this.selectedItemGetter.id },
      });
    },
    editItem() {
      this.$emit("open-form", this.selectedItemGetter);
    },
    changeTypeToLabel(data) {
      data.forEach((element, index) => {
        if (
          element.key == "begin_date" ||
          element.key == "end_date" ||
          element.key == "date"
        )
          data[index].type = "date";
        else data[index].type = "label";
      });

      this.clonedFormElements = data;
    },
  },
};
</script>
<style scoped>
.side-panel-content {
  height: calc(100dvh - 17em);
  overflow-y: auto;
}
.float-edit-btn {
  position: absolute;
  left: 1em;
  top: 1em;
}
</style>