NSG_PORTAL_V2/components/dynamic-page/page-component/templates/sections/articles/Default.vue

<script setup lang="ts">
import { isEmpty } from "lodash";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const router = useRouter();
const route = useRoute();

const emit = defineEmits(["dropData", "selectComponent"]);

const store = reactive({
  component: usePageComponentStore(),
});

const _props = defineProps<{
  dataResult?: any[];
  dataQuery?: string;
  component?: any;
  label?: string;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 5,
  TEMPLATE: "Article",
  LAYOUT: "TYPE:Card",
};

const page = ref(1);
const limit = ref(5);
const totals = ref(2);
const type = "Article";
const listArticlePaging = ref([]);

const listArticleByCategory = computed(() => {
  const data = getInputValue(_props.dataResult, "OBJECT");
  if (data && Object.keys(data)?.length > 0) {
    totals.value = data.Total;
    return data?.Data;
  }
  return [];
});

const designObject = computed(() => {
  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
});

const dropData = (event: any) => {
  const queryBy = {
    Category: "Categories",
  };
  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
  // const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
  const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id });
  emit("dropData", {
    dataResult: [],
    dataType,
    dataQuery: getDataQuery,
  });
};

//?cpn_1=page:2&cpn_2=page:1
// Get[Article] Top[5] With[Categories:1]
const select = async (pageActive: number) => {
  const componentId = _props.component?.id;
  if (componentId) {
    router.push({
      query: {
        ...route.query,
        [`cpn_${componentId}`]: `page:${pageActive}`,
      },
    });
  }
  page.value = Number(pageActive);
  await loadPage(Number(pageActive));
};
const handleRouteChange = async (query: any) => {
  const param = query[`cpn_${_props.component?.id}`];
  if (param) {
    const [_, value] = param.split(":") || [];
    page.value = value;
    await loadPage(value);
  }
};

onBeforeMount(() => {
  if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
});

const loadPage = async (page: number) => {
  let newDataQuery = "";
  const regex = /Page\[(.*?)\]/;
  const match = _props.component?.settings?.dataQuery?.match(regex);
  if (match) {
    const [pageData] = match;
    newDataQuery = _props.component?.settings?.dataQuery.replace(pageData, `Page[${page}]`);
  } else {
    newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
  }
  const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
  const data = getInputValue(res?.settings?.dataResult, "OBJECT");
  if (Object.keys(data).length > 0) {
    totals.value = data.Total;
    listArticlePaging.value = data?.Data || [];
  }
};

const handleNextPrev = (type: "+" | "-") => {
  if (listArticleByCategory.value?.length > 0) {
    if (type === "+") {
      page.value += 1;
    } else if (type === "-") {
      page.value -= 1;
    }
    select(page.value);
  }
};

const selectComponent = () => {
  emit("selectComponent");
};
const mapActivesToItems = (index: number) => {
  if (designObject.value && designObject.value.listCss) {
    return designObject.value.listCss[index] || {};
  }
  return {};
};
</script>

<template>
  <section>
    <div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
      <div class="section-layout" :style="designObject['div.section']">
        <template v-if="listArticleByCategory?.length > 0">
          <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
            <DynamicComponent
              :key="index"
              v-if="!isEmpty(component)"
              :settings="{
                template: SETTING_OPTIONS.TEMPLATE,
                layout: SETTING_OPTIONS.LAYOUT,
                dataResult: { ...component },
                label: mapActivesToItems(Number(index)),
              }"
            />
          </template>
        </template>
        <template v-else>
          <div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
        </template>
        <div class="button-page flex">
          <a class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
            <i class="el-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
                ></path>
              </svg>
            </i>
          </a>
          <a v-if="listArticleByCategory?.length > 0" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</a>
          <a class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
            <i class="el-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
                ></path>
              </svg>
            </i>
          </a>
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.section-container {
  .section-layout {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    overflow-x: scroll;
    &.border-custom {
      border-color: #e5e5e5 !important;
    }
    &.borderLeft {
      border-left: 1px solid;
    }
    &.borderRight {
      border-right: 1px solid;
    }
    &.borderTop {
      border-top: 1px solid;
    }
    &.borderBottom {
      border-bottom: 1px solid;
    }
  }
  .empty {
    width: 100%;
    height: 100%;
    min-height: 50px;
    background-color: #409eff;
    display: flex;
    white-space: normal;
    justify-content: center;
    align-items: center;
    h6 {
      color: #fff;
    }
  }
  .basic-article {
    &.article {
      margin-bottom: 10px;
      display: flex;
      pointer-events: none;
    }
  }
  &.noData {
    border-radius: 6px;
  }

  .flex {
    display: flex;
    margin-top: 10px;
    justify-content: center;
    overflow-x: auto;
  }

  .button-page {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .btn-page {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    border: 1px solid #409eff;
    border-radius: 3px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.active {
      background: #409eff;
      color: white;
    }
  }
}
.el-empty {
  padding: 12px 0;
}
</style>