thainv-dev: sửa lại cấu trúc folder

2024-06-13 17:24:46 +07:00
parent 8818c73cec
commit ecf4512cd3
22 changed files with 1056 additions and 55 deletions
@@ -1,6 +1,127 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "lodash";
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "Article",
+  LAYOUT: "TYPE:Card",
+};
+
+const layoutParse = computed(() => {
+  const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
+    const parseItem = _layout.split(":");
+    return {
+      [parseItem[0]]: parseItem[1],
+    };
+  });
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  return Object.assign({}, ...parseLayout, designObject);
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+async function dropData(data: any) {
+  if (data) {
+    const { dataResult, dataType } = data;
+    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+    emit("dropData", {
+      dataResult: result,
+      dataType,
+      dataQuery: getDataQuery,
+    });
+  }
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+</script>
+
 <template>
-    <div>
-        collection
+  <div>
+    <div
+      class="collection-container p-2 border-custom"
+      :class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
+      @click="selectComponent"
+      :style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
+    >
+      <DynamicComponent
+        class="h-full"
+        v-for="(component, index) in _dataResult"
+        :key="index"
+        :settings="{
+          template: SETTING_OPTIONS.TEMPLATE,
+          layout: SETTING_OPTIONS.LAYOUT,
+          label,
+          dataResult: !isEmpty(component) ? { ...component } : null,
+        }"
+        @drop-data="dropData"
+      />
    </div>
-</template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.collection-container {
+  display: grid;
+  gap: 10px;
+
+  &.border-custom {
+    border-color: #e5e5e5 !important;
+  }
+  &.borderLeft {
+    border-left: 1px solid;
+    padding-left: 10px;
+  }
+  &.borderRight {
+    border-right: 1px solid;
+    padding-right: 10px;
+  }
+  &.borderTop {
+    border-top: 1px solid;
+    padding-top: 10px;
+  }
+  &.borderBottom {
+    border-bottom: 1px solid;
+    padding-bottom: 10px;
+  }
+  &.vertical {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &.horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+  }
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+}
+</style>