@simitgroup/simpleapp-generator 1.6.6-y-alpha → 1.6.7-a-alpha

package/templates/nuxt/simpleapp/generate/features/customField/components/CustomFieldMenuItemBadge.vue.eta

@@ -0,0 +1,25 @@
+<template>
+  <span
+    class="flex items-center gap-2 w-fit px-2 py-0.5 rounded-lg text-[0.65rem] font-semibold text-surface-700"
+    :class="{
+      'bg-slate-100': !isActive,
+      'bg-gradient-to-r from-[#00b2d8] to-[#5ecbc5] !text-white': isActive,
+    }"
+  >
+    <i
+      class="pi"
+      :class="{
+        'pi-minus-circle': !isActive,
+        'pi-check-circle': isActive,
+      }"
+    />
+    <span>{{ title }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  isActive: boolean;
+  title: string;
+}>();
+</script>

package/templates/nuxt/simpleapp/generate/features/customField/components/CustomFieldViewFormField.vue.eta

@@ -0,0 +1,96 @@
+<template>
+  <template v-if="validJsonSchema">
+    <template v-if="_.isArray(validJsonSchema)"> </template>
+    <template v-else>
+      <template v-if="validJsonSchema.type === 'object'">
+        <template v-if="validJsonSchema['x-foreignkey']">
+          <CustomFieldViewFormFieldInput
+            :jsonSchema="validJsonSchema"
+            :hierarchy="hierarchy"
+            :schemaSource="schemaSource"
+            v-model="data[schemaName]"
+          />
+        </template>
+        <template v-else>
+          <Fieldset class="col-span-2 rounded-xl">
+            <template #legend>
+              <span
+                :class="{
+                  'mx-2': legendTitle && legendTitle !== '',
+                }"
+              >
+                {{ legendTitle }}
+              </span>
+            </template>
+
+            <div
+              class="grid grid-cols-2 gap-4 p-2"
+              :class="{
+                'pt-4': legendTitle === undefined || legendTitle === '',
+              }"
+            >
+              <template
+                v-if="validJsonSchema.properties"
+                v-for="(subSchema, subSchemaName) in validJsonSchema.properties"
+                :key="subSchemaName"
+              >
+                <CustomFieldViewFormField
+                  :jsonSchema="subSchema"
+                  :data="data[schemaName]"
+                  :schemaSource="schemaSource"
+                  :schemaName="subSchemaName as string"
+                  :hierarchy="
+                    hierarchy === '' || hierarchy === undefined
+                      ? (subSchemaName as string)
+                      : `${hierarchy}.${subSchemaName}`
+                  "
+                />
+              </template>
+            </div>
+          </Fieldset>
+        </template>
+      </template>
+      <template v-else>
+        <CustomFieldViewFormFieldInput
+          :jsonSchema="validJsonSchema"
+          :hierarchy="hierarchy"
+          :schemaSource="schemaSource"
+          v-model="data[schemaName]"
+        />
+      </template>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import _ from "lodash";
+import { SimpleAppJSONSchema7Definition } from "~/types";
+import { SchemaSource } from "~/types/customField.type";
+import CustomFieldViewFormFieldInput from "./CustomFieldViewFormFieldInput.vue";
+
+const props = defineProps<{
+  jsonSchema?: SimpleAppJSONSchema7Definition | undefined;
+  data: any;
+  hierarchy: string;
+  schemaName: string;
+  schemaSource: SchemaSource;
+  isHideFieldsetLegend?: boolean;
+}>();
+
+const legendTitle = computed(() => {
+  if (props.isHideFieldsetLegend) return "";
+
+  return (
+    (props.jsonSchema &&
+      typeof props.jsonSchema !== "boolean" &&
+      props.jsonSchema?.title) ??
+    props.schemaName
+  );
+});
+const validJsonSchema = computed(() => {
+  if (props.jsonSchema !== undefined && typeof props.jsonSchema === "object") {
+    return props.jsonSchema;
+  }
+  return false;
+});
+</script>

package/templates/nuxt/simpleapp/generate/features/customField/components/CustomFieldViewFormFieldInput.vue.eta

@@ -0,0 +1,150 @@
+<template>
+  <template v-if="jsonSchema.type !== 'array'">
+    <div>
+      <label v-if="!isParentIsArray" class="text-gray-400 text-sm truncate">
+        {{ label }}
+      </label>
+      <div>
+        <PageDocListColumnItem
+          :col="columnName"
+          :data="{
+            [columnName]: model,
+          }"
+          :schemacols="schemaCols"
+          :uniqueKey="''"
+          :documentTitle="''"
+          :resourcename="''"
+        />
+      </div>
+    </div>
+  </template>
+  <template
+    v-else-if="
+      jsonSchema.type === 'array' &&
+      jsonSchema.items &&
+      _.isObject(jsonSchema.items) &&
+      !Array.isArray(jsonSchema.items)
+    "
+  >
+    <template v-if="jsonSchema.items.type === 'object'">
+      <div class="col-span-2">
+        <SimpleAppInputTable
+          :getField="() => {}"
+          class="col-span-4"
+          :setting="{
+            readonly: true,
+          }"
+          v-model="model"
+        >
+          <Column
+            v-if="
+              jsonSchema.items &&
+              typeof jsonSchema.items === 'object' &&
+              'properties' in jsonSchema.items
+            "
+            v-for="(subSchema, subSchemaName) in jsonSchema.items.properties"
+            :key="subSchemaName"
+            :field="subSchemaName.toString()"
+            #body="{ index }"
+            :header="camelCaseToWords(subSchemaName.toString())"
+          >
+            <CustomFieldViewFormFieldInput
+              v-if="typeof subSchema === 'object' && subSchema !== null"
+              :jsonSchema="subSchema"
+              :hierarchy="
+                hierarchy === '' || hierarchy === undefined
+                  ? (subSchemaName as string)
+                  : `${hierarchy}.*.${subSchemaName}`
+              "
+              :schemaSource="schemaSource"
+              v-model="model[index][subSchemaName]"
+            />
+          </Column>
+        </SimpleAppInputTable>
+      </div>
+    </template>
+    <template v-else-if="jsonSchema.items.type === 'string'">
+      <div>
+        <label v-if="!isParentIsArray" class="text-gray-400 text-sm truncate">
+          {{ label }}
+        </label>
+        <div>
+          <PageDocListColumnItem
+            :col="columnName"
+            :data="{
+              [columnName]: model,
+            }"
+            :schemacols="schemaCols"
+            :uniqueKey="''"
+            :documentTitle="''"
+            :resourcename="''"
+          />
+        </div>
+      </div>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import _ from "lodash";
+import PageDocListColumnItem from "~/components/page/PageDocListColumnItem.vue";
+import {
+  SchemaFields,
+  SimpleAppInputType,
+  SimpleAppJSONSchema7,
+} from "~/types";
+import { SchemaSource } from "~/types/customField.type";
+
+const props = defineProps<{
+  jsonSchema: SimpleAppJSONSchema7;
+  hierarchy: string;
+  schemaSource: SchemaSource;
+}>();
+
+const model = defineModel<any>();
+
+const columnName = computed(() => {
+  return props.hierarchy.split(".").pop() ?? "";
+});
+
+const schemaCols = computed(() => {
+  return {
+    [columnName.value]: props.jsonSchema,
+  } as SchemaFields;
+});
+
+const label = computed(() => {
+  return props.jsonSchema.title ?? props.hierarchy.split(".").pop();
+});
+
+const fieldPath = computed(() => {
+  const hierarchies = props.hierarchy.split(".");
+
+  const path = (getFieldPathPrefix() + hierarchies.join("/properties/"))
+    .replace("properties/*", "items")
+    .replace("*", "items");
+
+  // if (props.schemaSource === "miniAppSetting") {
+  //   return path.replace("/properties/setting", "");
+  // }
+
+  return path;
+});
+
+const inputType = computed(() => {
+  return getInputType(props.jsonSchema);
+});
+
+const isParentIsArray = computed(() => {
+  const hierarchies = props.hierarchy.split(".");
+  return hierarchies[hierarchies.length - 2] == "*";
+});
+
+function getFieldPathPrefix() {
+  if (props.schemaSource === "customField") {
+    return "#/properties/more/properties/";
+  }
+
+  return "#/properties/";
+}
+</script>

package/templates/nuxt/simpleapp/generate/features/customField/components/CustomFieldViewFormSection.vue.eta

@@ -0,0 +1,38 @@
+<template>
+  <section v-if="validProperties" class="space-y-4">
+    <template
+      v-for="(groupJsonSchema, groupName) in validProperties"
+      :key="groupName"
+    >
+      <CustomFieldViewFormField
+        v-if="isValidSchema(groupJsonSchema)"
+        :jsonSchema="groupJsonSchema"
+        :data="data"
+        :schemaName="groupName.toString()"
+        :hierarchy="groupName.toString()"
+        schemaSource="customField"
+      />
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { CustomFieldMoreSchema } from '~/simpleapp/generate/features/customField/types/common';
+import CustomFieldViewFormField from './CustomFieldViewFormField.vue';
+
+const props = defineProps<{
+  customFieldJsonSchema: CustomFieldMoreSchema;
+  data: any;
+}>();
+
+const validProperties = computed(() => {
+  if (
+    props.customFieldJsonSchema.properties !== undefined &&
+    typeof props.customFieldJsonSchema.properties === 'object'
+  ) {
+    return props.customFieldJsonSchema.properties;
+  }
+  return false;
+});
+</script>

package/templates/nuxt/simpleapp/generate/features/customField/composables/useCustomFieldDocList.ts.eta

@@ -0,0 +1,48 @@
+export const useCustomFieldDocList = () => {
+  function isCustomField(jsonSchema: any, col: string): boolean {
+    return (
+      col.startsWith("more.default.") &&
+      !!getCustomFieldSchemaItem(jsonSchema, col)
+    );
+  }
+
+  function getCustomFieldSchemaItem(jsonSchema: any, col: string): any {
+    const key = col.replace("more.default.", "");
+    return jsonSchema?.more?.properties?.default?.properties?.[key];
+  }
+
+  function getCustomFieldSchema(jsonSchema: any, col: string): any {
+    return jsonSchema?.more?.properties?.default?.properties ?? {};
+  }
+
+  function getCustomFieldSchemaKey(jsonSchema: any, col: string): any {
+    const key = col.replace("more.default.", "");
+    return key;
+  }
+
+  function getCustomFieldData(data: any): any {
+    return data?.more?.default;
+  }
+
+  function getCustomFieldTitle(jsonSchema: any, col: string): string {
+    return (
+      getCustomFieldSchemaItem(jsonSchema, col)?.title ??
+      col.split(".").pop() ??
+      col
+    );
+  }
+
+  function getCustomFieldField(jsonSchema: any, col: string): string {
+    const schema = getCustomFieldSchemaItem(jsonSchema, col);
+    return schema?.["x-foreignkey"] ? `${col}.label` : col;
+  }
+
+  return {
+    isCustomField,
+    getCustomFieldSchema,
+    getCustomFieldSchemaKey,
+    getCustomFieldData,
+    getCustomFieldTitle,
+    getCustomFieldField,
+  };
+};

package/templates/nuxt/simpleapp/generate/features/customField/enums/common.ts.eta

@@ -0,0 +1,4 @@
+export enum CustomFieldDataModeEnum {
+  DEFAULT = "DEFAULT",
+  EXISTING = "EXISTING",
+}

package/templates/nuxt/simpleapp/generate/features/customField/services/CustomFieldService.ts.eta

@@ -0,0 +1,231 @@
+import _ from 'lodash';
+import {
+  CustomFieldDataMode,
+  CustomFieldMoreSchema,
+  CustomFieldMoreSchemaGroup
+} from '../types/common';
+import { CustomFieldDataModeEnum } from '../enums/common';
+import { DynamicObject, SimpleAppJSONSchema7Definition } from '~/types';
+
+export class CustomFieldService {
+  // =============================== Prepare Schema Function ===============================
+  prepareCustomFieldJsonSchema(collectionName: string) {
+    const customFieldFromDB = this.findCustomFieldSchemaFromDB(collectionName);
+    const customFieldFromMiniApp =
+      this.findCustomFieldSchemaFromMiniApp(collectionName);
+
+    if (customFieldFromDB && !_.isEmpty(customFieldFromDB)) {
+    }
+
+    const schema: CustomFieldMoreSchema = {
+      type: 'object',
+      properties: {
+        ...customFieldFromDB,
+        ...customFieldFromMiniApp
+      }
+    };
+
+    return schema;
+  }
+
+  private findCustomFieldSchemaFromDB(collectionName: string) {
+    const { $customFieldStore } = useNuxtApp();
+    if (!$customFieldStore.data || _.isEmpty($customFieldStore.data)) {
+      return {};
+    }
+
+    const customField = $customFieldStore.findByCollectionName(collectionName);
+    if (!customField) {
+      return {};
+    }
+
+    if (
+      !customField?.form?.jsonSchema ||
+      _.isEmpty(customField?.form?.jsonSchema)
+    ) {
+      return {};
+    }
+
+    const schema: CustomFieldMoreSchemaGroup = {
+      default: {
+        title: 'Custom Field',
+        ...customField.form.jsonSchema
+      }
+    };
+
+    return schema;
+  }
+
+  private findCustomFieldSchemaFromMiniApp(collectionName: string) {
+    const schema: CustomFieldMoreSchemaGroup = {};
+
+    const { $miniAppStore } = useNuxtApp();
+
+    const miniAppForms = $miniAppStore.getForm(collectionName);
+    if (!miniAppForms || miniAppForms.length <= 0) {
+      return schema;
+    }
+
+    for (let i = 0; i < miniAppForms.length; i++) {
+      const miniAppItem = miniAppForms[i];
+      const { miniAppCode, jsonSchema } = miniAppItem;
+
+      schema[miniAppCode] = jsonSchema as SimpleAppJSONSchema7Definition;
+    }
+
+    return schema;
+  }
+
+  // ================================ Prepare Data Function ================================
+  prepareCustomFieldData<T extends DynamicObject>(
+    collectionName: string,
+    mode: CustomFieldDataMode,
+    customSchema: CustomFieldMoreSchema | undefined,
+    resourceData: T | undefined
+  ): T | undefined {
+    if (
+      !customSchema ||
+      !customSchema?.properties ||
+      _.isEmpty(customSchema.properties)
+    ) {
+      return resourceData;
+    }
+
+    switch (mode) {
+      case CustomFieldDataModeEnum.DEFAULT:
+        return this.prepareCustomFieldWithDefaultData<T>(customSchema);
+        break;
+
+      case CustomFieldDataModeEnum.EXISTING:
+        if (!resourceData) {
+          return this.prepareCustomFieldWithDefaultData<T>(customSchema);
+        }
+
+        return this.prepareCustomFieldWithExistingData(
+          customSchema,
+          resourceData
+        );
+        break;
+    }
+  }
+
+  private prepareCustomFieldWithDefaultData<T extends DynamicObject>(
+    customSchema: CustomFieldMoreSchema
+  ) {
+    const data: DynamicObject = {};
+    for (const [groupName, groupItem] of Object.entries(
+      customSchema.properties
+    )) {
+      const defaultData = this.generateDefaultData(groupItem);
+
+      data[groupName] = defaultData;
+    }
+
+    return data as T;
+  }
+
+  private prepareCustomFieldWithExistingData<T extends DynamicObject>(
+    customSchema: CustomFieldMoreSchema,
+    resourceData: T
+  ) {
+    const data: DynamicObject = {};
+    for (const [groupName, groupItem] of Object.entries(
+      customSchema.properties
+    )) {
+      const defaultData = this.generateDefaultData(groupItem);
+      const mergedData = this.mergeWithDefault(
+        defaultData,
+        resourceData?.[groupName]
+      );
+
+      data[groupName] = mergedData;
+    }
+
+    return data as T;
+  }
+
+  private generateDefaultData(schema: SimpleAppJSONSchema7Definition): any {
+    if (!_.isObject(schema)) {
+      return '';
+    }
+
+    if (schema.type === 'object') {
+      const result: any = {};
+
+      if (schema?.['x-foreignkey']) {
+        return undefined;
+      }
+
+      const properties = schema.properties || {};
+      for (const key of Object.keys(properties)) {
+        result[key] = this.generateDefaultData(properties[key]);
+      }
+      return result;
+    }
+
+    if (schema.type === 'array') {
+      const itemSchema = schema.items;
+      const minItems = schema.minItems || 0;
+      const arr = [];
+      const itemsCount = minItems > 0 ? 1 : 0;
+      for (let i = 0; i < itemsCount; i++) {
+        arr.push(
+          this.generateDefaultData(itemSchema as SimpleAppJSONSchema7Definition)
+        );
+      }
+      return arr;
+    }
+
+    if (typeof schema.default !== 'undefined') {
+      return schema.default;
+    }
+
+    // handle primitive types fallback
+    switch (schema.type) {
+      case 'string':
+        return '';
+      case 'number':
+      case 'integer':
+        return 0;
+      case 'boolean':
+        return false;
+      default:
+        return null;
+    }
+  }
+
+  private mergeWithDefault<T extends DynamicObject>(
+    defaultData: T,
+    collectionData: T | undefined
+  ) {
+    if (Array.isArray(defaultData)) {
+      if (Array.isArray(collectionData)) {
+        if (_.isEmpty(collectionData)) {
+          return [];
+        }
+        // Merge each item
+        const mergedArray = collectionData.map((collectionItem, index) => {
+          const defaultItem = defaultData[index] ?? defaultData[0]; // use first default if index out of bound
+          return this.mergeWithDefault<T>(defaultItem, collectionItem);
+        }) as any;
+        return mergedArray;
+      } else {
+        // return defaultData;
+        return [];
+      }
+    } else if (typeof defaultData === 'object' && defaultData !== null) {
+      const result: any = {};
+      for (const key of Object.keys(defaultData)) {
+        result[key] = this.mergeWithDefault(
+          defaultData[key],
+          collectionData?.[key]
+        );
+      }
+      return result;
+    } else {
+      return typeof collectionData !== 'undefined'
+        ? collectionData
+        : defaultData;
+    }
+  }
+}

package/templates/nuxt/simpleapp/generate/features/customField/types/common.ts.eta

@@ -0,0 +1,16 @@
+import { SimpleAppJSONSchema7, SimpleAppJSONSchema7Definition } from '~/types';
+import { CustomFieldDataModeEnum } from '../enums/common';
+
+export type CustomFieldDataMode = CustomFieldDataModeEnum;
+
+export type CustomFieldMore = {
+  more?: CustomFieldMoreSchema;
+};
+
+export type CustomFieldMoreSchema = SimpleAppJSONSchema7 & {
+  properties: CustomFieldMoreSchemaGroup;
+};
+
+export type CustomFieldMoreSchemaGroup = {
+  [key: string]: SimpleAppJSONSchema7Definition;
+};

package/templates/nuxt/simpleapp/generate/features/customField/types/page.ts.eta

@@ -0,0 +1,5 @@
+export type CustomFieldPageMenuResourceItem = {
+  name: string;
+  hasCustomFieldFormSetting: boolean;
+  hasCustomFieldListSetting: boolean;
+};