feat: fetch and assign property list with pagination support

src/components/dialog/DialogProperties.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { moveItemUp, moveItemDown, dialog, deleteItem } from 'stores/utils';
+import {
+  moveItemUp,
+  moveItemDown,
+  dialog,
+  deleteItem,
+  toCamelCase,
+} from 'stores/utils';
 import { useI18n } from 'vue-i18n';
 
 import useOptionStore from 'src/stores/options';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { useProperty } from 'src/stores/property';
 import { Option } from 'stores/options/types';
 import {
   WorkFlowPayloadStep,
@@ -17,6 +24,8 @@ import DialogForm from '../DialogForm.vue';
 
 const { t } = useI18n();
 const { getWorkflowTemplate } = useWorkflowTemplate();
+const { getPropertyList } = useProperty();
+const { locale } = useI18n();
 const optionStore = useOptionStore();
 
 const props = defineProps<{
@@ -261,8 +270,34 @@ function confirmDelete(items: unknown[], index: number) {
   });
 }
 
-function assignTemp() {
-  propertiesOption.value = optionStore.globalOption?.propertiesField;
+async function assignTemp() {
+  const res = await getPropertyList({ pageSize: 999 });
+  const targetOptions = optionStore.globalOption?.propertiesField ?? [];
+
+  if (!res) return;
+
+  const propList = res.result.map((v) => {
+    return {
+      label: locale.value === 'eng' ? v.nameEN : v.name,
+      value: toCamelCase(v.nameEN),
+      type: v.type.type,
+    };
+  });
+
+  propertiesOption.value = [...targetOptions];
+
+  const existingValues = new Set(
+    propertiesOption.value.map((item: { value: string }) => item.value),
+  );
+  const newProps = propList.filter((prop) => !existingValues.has(prop.value));
+
+  if (newProps) {
+    propertiesOption.value.splice(
+      propertiesOption.value.length - 4,
+      0,
+      ...newProps,
+    );
+  }
 
   tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
   tempWorkflowId.value = workflowId.value;