conflict-nuxt-4/app/components/lazy-load/data-entry/MainList.vue

<template>
  <div>
    <HeaderTools
      :header-tools="headerTools"
      @header-tools-action="headerToolsAction"
    ></HeaderTools>
    <div class="p-4 pt-0 w-full lg:flex-1">
      <MyContent
        :mainSchema="myContentSchema"
        :pagination="pagination"
        @my-content-action="myContentAction"
      />
    </div>
  </div>
</template>

<script setup>
import myContentJson from "@/json/data-entry/myContentJson.json";
import refineCodes from "@/json/refineCodes.json";
import MyContent from "@/components/lazy-load/global/MyContent.vue";
const { $http: httpService } = useNuxtApp();
const props = defineProps({
  listConflicts: {
    type: Array,
    default: () => [],
  },
  pagination: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["conflict-details"]);

const myContentSchema = computed(() => {
  const baseSchema = JSON.parse(JSON.stringify(myContentJson));

  return {
    ...baseSchema,
    items: props.listConflicts?.hits ?? [],
    pagination: props.pagination,
  };
});
// const headerTools = computed(() => [
//   {
//     items: [
//       // {
//       //   key: "label",
//       //   label: "کد :",
//       //   tooltip: "عنوان صفحه",
//       // },
//       {
//         type: "dropdown",
//         key: "dropdown",
//         name: "refine_codes",
//         dropdownSchema: {
//           width: "18em",
//           modelValue: null, // ✅ اینو بذار
//           optionAttribute: "title",
//           valueAttribute: "value",
//           searchable: false,
//           placeholder: "انتخاب کنید",
//           items: refineCodes,
//         },
//       },
//       // {
//       //   key: "label",
//       //   label: "نوع رابطه :",
//       //   tooltip: "عنوان صفحه",
//       // },
//       {
//         type: "dropdown",
//         key: "dropdown",
//         name: "refine_codes",
//         dropdownSchema: {
//           width: "18em",
//           modelValue: null, // ✅ اینو بذار
//           optionAttribute: "title",
//           valueAttribute: "value",
//           searchable: false,
//           placeholder: "انتخاب کنید",
//           items: [
//             { label: " تعارض مستقر", value: "stable" },
//             { label: "تعارض مشروط", value: "conditional" },
//             { label: "تکرار حکم", value: "duplicate" },
//           ],
//         },
//       },
//       // {
//       //   key: "label",
//       //   label: " وضعیت اعتبار:",
//       //   tooltip: "عنوان صفحه",
//       // },
//       {
//         type: "dropdown",
//         key: "dropdown",
//         name: "refine_codes",
//         dropdownSchema: {
//           width: "18em",
//           modelValue: null, // ✅ اینو بذار
//           optionAttribute: "title",
//           valueAttribute: "value",
//           searchable: false,
//           placeholder: "انتخاب کنید",
//           items: [
//             { label: "نامعتبر", value: "invalid" },
//             { label: "معتبر", value: "valid" },
//           ],
//         },
//       },
//       {
//         key: "autoComplation",
//         placeholder: "جستجوی ...",
//         debounceTime: 500,
//         // autocompleteUrl: "/repo/monir/complation/sanad",
//         minCharsForAutocomplete: 3,
//         maxHistoryItems: 20,
//         showSearchButton: false,
//         filters: [
//           {
//             label: "همه اجزاء",
//             value: "all",
//           },
//           {
//             label: "عنوان جلسه",
//             value: "title",
//           },
//           {
//             label: "عنوان دوره",
//             value: "branch",
//           },
//           {
//             label: " فقط فهرست",
//             value: "mindex",
//           },
//           {
//             label: " فقط کدها",
//             value: "codes",
//           },
//           {
//             label: " دوره",
//             value: "advance",
//           },
//         ],
//       },
//       // {
//       //   key: "prevNext",
//       //   name: "entityNavigator",
//       //   prevDisabled: false,
//       //   nextDisabled: true,
//       // },
//     ],
//   },
// ]);
const headerTools = computed(() => [
  [
    {
      items: [
        {
          key: "label",
          label: "کد: ",
        },
        {
          type: "dropdown",
          key: "dropdown",
          name: "refine_codes",
          dropdownSchema: {
            width: "18em",
            modelValue: null, // ✅ اینو بذار
            optionAttribute: "title",
            valueAttribute: "value",
            searchable: false,
            placeholder: "انتخاب کنید",
            items: refineCodes,
          },
        },
        {
          key: "label",
          label: "نوع رابطه :",
        },
        {
          type: "dropdown",
          key: "dropdown",
          name: "refine_codes",
          dropdownSchema: {
            width: "10em",
            modelValue: null, // ✅ اینو بذار
            optionAttribute: "title",
            valueAttribute: "value",
            searchable: false,
            placeholder: "انتخاب کنید",
            items: [
              { label: " تعارض مستقر", value: "stable" },
              { label: "تعارض مشروط", value: "conditional" },
              { label: "تکرار حکم", value: "duplicate" },
            ],
          },
        },
        {
          key: "label",
          label: " وضعیت اعتبار:",
        },
        {
          type: "dropdown",
          key: "dropdown",
          name: "refine_codes",
          dropdownSchema: {
            width: "8em",
            modelValue: null, // ✅ اینو بذار
            optionAttribute: "title",
            valueAttribute: "value",
            searchable: false,
            placeholder: "انتخاب کنید",
            items: [
              { label: "نامعتبر", value: "invalid" },
              { label: "معتبر", value: "valid" },
            ],
          },
        },
      ],
    },
    {
      items: [
        {
          key: "autoComplation",
          placeholder: "جستجوی ...",
          debounceTime: 500,
          // autocompleteUrl: "/repo/monir/complation/sanad",
          minCharsForAutocomplete: 3,
          maxHistoryItems: 20,
          showSearchButton: false,
          filters: [
            {
              label: "همه اجزاء",
              value: "all",
            },
          ],
        },
        // {
        //   key: "prevNext",
        //   name: "entityNavigator",
        //   prevDisabled: false,
        //   nextDisabled: true,
        // },
      ],
    },
  ],
]);

function headerToolsAction({ action, data }) {
  if (action == "auto-complation") {
    if (data.action == "complete-search") {
      console.log("data ==> ", data);

      emit("my-header-tools-search", data.item);
    }
  }
  if (action === "prev-click") {
  }

  if (action === "next-click") {
  }
}
function myContentAction({ action, payload }) {
  if (action === "conflict_Details") {
    emit("conflict-details", payload);
  } else {
    emit("my-content-action", { action, payload });
  }
}
</script>

<style lang="scss"></style>