search_ui/components/entity/components/EntityToolsHeader.vue

<template>
  <section>
    <div class="" ref="selectedTabDetails">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 tools-header mt-4 mb-5 d-flex align-items-center">
            <div class="col-12 d-flex align-items-center">
              <div
                class="d-flex col-12 justify-content-between align-items-center"
              >
                <div class="d-flex">
                  <div
                    v-for="(items, i) in headerItems.texts"
                    class="tools-header-title"
                    v-tooltip="items.tooltip"
                    :key="i"
                  >
                    <span class="tools-header-label p-3"
                      >{{ items.label }}:</span
                    >
                    <span class="">{{ getDataValue(items.source_key) }}</span>
                  </div>
                </div>
                <div class="d-flex justify-content-end align-items-center">
                  <div
                    v-for="(items, i) in getHeaderTools()"
                    class="d-flex justify-content-end"
                    :key="i"
                  >
                    <div v-if="items.key == 'switch'">
                      <triple-switch
                        @change-mode="handlerSwitchClick($event)"
                        :texts1="items.texts1"
                        :texts2="items.texts2"
                        :value="items"
                        :listState="items.state"
                      ></triple-switch>
                    </div>
                    <button
                      class="btn"
                      v-if="items.key == 'icon'"
                      :title="items.title"
                      :type="items.type"
                      v-tooltip="items.tooltip"
                      @click="handlerIconClick(items)"
                    >
                      <svg :class="'icon icon-' + items.icon">
                        <use :xlink:href="'#icon-' + items.icon"></use>
                      </svg>
                    </button>
                    <svg
                      v-if="items.key == 'image'"
                      :class="'icon icon-' + items.icon"
                    >
                      <use :xlink:href="'#icon-' + items.icon"></use>
                    </svg>
                    <div v-if="items.key == 'multiselect'">
                      <multiselect
                        v-if="multiselectData?.length"
                        :searchable="items.propertis.searchable"
                        :close-on-select="items.propertis.close_on_select"
                        :show-labels="items.propertis.show_labels"
                        :label="items.label"
                        :track-by="items.track_by"
                        :placeholder="items.propertis.placeholder"
                        :options="multiselectData"
                        @select="handlerMultiselectClick"
                        v-model="items.v_model"
                        :hide-selected="items.propertis.hide_selected"
                        :max-height="items.propertis.max_height"
                        :width="items.propertis.width"
                        :openDirection="items.propertis.openDirection"
                        :v-tooltip="items.propertis.tooltip"
                        id="repositories-desktop"
                        :class="items.propertis.class"
                      ></multiselect>
                    </div>
                    <div
                      v-if="items.key == 'button'"
                      :title="items.title"
                      v-tooltip="items.tooltip"
                    >
                      <button class="btn" :title="items.title">
                        {{ items.title }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState, mapActions } from "pinia";
import toolsHeader from "@search/json/entity/toolsHeader.json";
import { useEntityStore } from "@search/stores/entityStore";

export default {
  props: {
    multiselectData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  beforeMount() {
    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {
    this.entity = this.selectedItemEntityGetter;
  },
  data() {
    return {
      headerItems: toolsHeader,
      entity: {},
    };
  },
  computed: {
    ...mapState(useEntityStore, ["selectedItemEntityGetter"]),
  },
  methods: {
    getHeaderTools() {
      if (!this.isDevelopMode) {
        let res = [];
        this.headerItems.tools.forEach((x) => {
          if (x.key != "switch") res.push(x);
        });
        return res;
      }

      return this.headerItems.tools;
    },
    getDataValue(key, type = "", maxWordLen = 30) {
      let res = "";
      if (!this.entity) return res;

      let _source = this.entity._source ?? this.entity;

      let keys = key.split("/");
      keys.forEach((k) => {
        let kv = k.split(".");
        let value = "";

        if (kv.length == 2) {
          if (_source[kv[0]][kv[1]]) value = _source[kv[0]][kv[1]];
        } else if (_source[k]) value = _source[k];

        if (value) {
          if (res != "") res += " / ";
          res += value;
          if (type == "date") res = this.dateTofarsi(res);
        }
      });

      return res.length ? res : "--";
    },
    handlerMultiselectClick(event) {
      this.$emit("handler-multiselect-click", event);
    },
    handlerIconClick(items) {
      this.$emit("handler-icon-click", items);
    },
    handlerSwitchClick(component) {
      this.$emit("handler-switch-click", component);
    },
  },
  components: {
    Multiselect: defineAsyncComponent(() => import("vue")),
  },
};
</script>

<style lang="scss" scoped>
.tools-header {
  display: flex;
  align-items: center;
  height: 4em;
  background-color: rgb(243, 244, 246);
  border-radius: 0.5em;
}
.tools-header-label {
  color: var(--primary-color);
}
.my-multiselect {
  width: 15em;
}
</style>