@simitgroup/simpleapp-generator 2.0.3-h-alpha → 2.0.3-j-alpha

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

@@ -1,83 +1,108 @@
+import { type ControlElement, type GroupLayout, type UISchemaElement, type VerticalLayout } from "@jsonforms/core";
 import _ from "lodash";
+import { DynamicObject, SimpleAppJSONSchema7Definition } from "~/types";
+import { CustomFieldDataModeEnum } from "../enums/common";
 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)) {
-    }
+  prepareCustomFieldJsonSchema(collectionName: string): { jsonSchema: CustomFieldMoreSchema; uiSchema: VerticalLayout | undefined } {
+    const fromDB = this.findCustomFieldSchemaFromDB(collectionName);
+    const fromMiniApp = this.findCustomFieldSchemaFromMiniApp(collectionName);
 
-    const schema: CustomFieldMoreSchema = {
+    const jsonSchema: CustomFieldMoreSchema = {
       type: "object",
       properties: {
-        ...customFieldFromDB,
-        ...customFieldFromMiniApp,
+        ...fromDB.jsonSchema,
+        ...fromMiniApp.jsonSchema,
       },
     };
 
-    return schema;
+    const uiSchema = this.buildMoreUiSchema({ ...fromDB.uiSchema, ...fromMiniApp.uiSchema });
+
+    return { jsonSchema, uiSchema };
   }
 
   prepareSchemaPatches(collectionName: string) {
     return this.findSchemaPatchFromMiniApp(collectionName);
   }
 
-  private findCustomFieldSchemaFromDB(collectionName: string) {
+  private findCustomFieldSchemaFromDB(collectionName: string): { jsonSchema: CustomFieldMoreSchemaGroup; uiSchema: Record<string, VerticalLayout> } {
     const { $customFieldStore } = useNuxtApp();
     if (!$customFieldStore.data || _.isEmpty($customFieldStore.data)) {
-      return {};
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
     const customField = $customFieldStore.findByCollectionName(collectionName);
     if (!customField) {
-      return {};
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
-    if (
-      !customField?.form?.jsonSchema ||
-      _.isEmpty(customField?.form?.jsonSchema)
-    ) {
-      return {};
+    if (!customField?.form?.jsonSchema || _.isEmpty(customField?.form?.jsonSchema)) {
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
-    const schema: CustomFieldMoreSchemaGroup = {
-      default: {
-        title: "Custom Field",
-        ...customField.form.jsonSchema,
+    return {
+      jsonSchema: {
+        default: {
+          title: "Custom Field",
+          ...customField.form.jsonSchema,
+        },
       },
+      uiSchema: customField.form.uiSchema ? { default: customField.form.uiSchema as VerticalLayout } : {},
     };
-
-    return schema;
   }
 
-  private findCustomFieldSchemaFromMiniApp(collectionName: string) {
-    const schema: CustomFieldMoreSchemaGroup = {};
+  private findCustomFieldSchemaFromMiniApp(collectionName: string): { jsonSchema: CustomFieldMoreSchemaGroup; uiSchema: Record<string, VerticalLayout> } {
+    const jsonSchema: CustomFieldMoreSchemaGroup = {};
+    const uiSchema: Record<string, VerticalLayout> = {};
 
     const { $miniAppStore } = useNuxtApp();
 
     const miniAppForms = $miniAppStore.getForm(collectionName);
     if (!miniAppForms || miniAppForms.length <= 0) {
-      return schema;
+      return { jsonSchema, uiSchema };
     }
 
     for (let i = 0; i < miniAppForms.length; i++) {
-      const miniAppItem = miniAppForms[i];
-      const { miniAppCode, jsonSchema } = miniAppItem;
+      const miniAppItem = miniAppForms[i] as any;
+      const { miniAppCode, jsonSchema: itemJsonSchema, uiSchema: itemUiSchema } = miniAppItem;
+
+      jsonSchema[miniAppCode] = itemJsonSchema as SimpleAppJSONSchema7Definition;
+      if (itemUiSchema) uiSchema[miniAppCode] = itemUiSchema as VerticalLayout;
+    }
+
+    return { jsonSchema, uiSchema };
+  }
 
-      schema[miniAppCode] = jsonSchema as SimpleAppJSONSchema7Definition;
+  private buildMoreUiSchema(groupUiSchemas: Record<string, VerticalLayout>): VerticalLayout | undefined {
+    const elements: UISchemaElement[] = [];
+    for (const [groupKey, uischema] of Object.entries(groupUiSchemas)) {
+      if (!uischema?.elements?.length) continue;
+      const group: GroupLayout = {
+        type: "Group",
+        label: groupKey === "default" ? "Custom Field" : groupKey,
+        options: { cols: "grid-cols-1" },
+        elements: [this.prefixElement(uischema, groupKey)],
+      };
+      elements.push(group);
     }
+    return elements.length ? { type: "VerticalLayout", elements } : undefined;
+  }
 
-    return schema;
+  private prefixElement(elem: UISchemaElement, groupKey: string): UISchemaElement {
+    if (elem.type === "Control") {
+      const ctrl = elem as ControlElement;
+      return { ...ctrl, scope: ctrl.scope.replace("#/properties/", `#/properties/${groupKey}/properties/`) };
+    }
+    if ("elements" in elem && Array.isArray(elem.elements)) {
+      return { ...elem, elements: (elem as any).elements.map((e: UISchemaElement) => this.prefixElement(e, groupKey)) } as UISchemaElement;
+    }
+    return elem;
   }
 
   private findSchemaPatchFromMiniApp(collectionName: string) {
@@ -107,11 +132,7 @@ export class CustomFieldService {
     customSchema: CustomFieldMoreSchema | undefined,
     resourceData: T | undefined,
   ): T | undefined {
-    if (
-      !customSchema ||
-      !customSchema?.properties ||
-      _.isEmpty(customSchema.properties)
-    ) {
+    if (!customSchema || !customSchema?.properties || _.isEmpty(customSchema.properties)) {
       return resourceData;
     }
 
@@ -125,10 +146,7 @@ export class CustomFieldService {
           return this.prepareCustomFieldWithDefaultData<T>(customSchema);
         }
 
-        return this.prepareCustomFieldWithExistingData(
-          customSchema,
-          resourceData,
-        );
+        return this.prepareCustomFieldWithExistingData(customSchema, resourceData);
         break;
     }
   }
@@ -137,9 +155,7 @@ export class CustomFieldService {
     customSchema: CustomFieldMoreSchema,
   ) {
     const data: DynamicObject = {};
-    for (const [groupName, groupItem] of Object.entries(
-      customSchema.properties,
-    )) {
+    for (const [groupName, groupItem] of Object.entries(customSchema.properties)) {
       const defaultData = this.generateDefaultData(groupItem);
 
       data[groupName] = defaultData;
@@ -153,14 +169,9 @@ export class CustomFieldService {
     resourceData: T,
   ) {
     const data: DynamicObject = {};
-    for (const [groupName, groupItem] of Object.entries(
-      customSchema.properties,
-    )) {
+    for (const [groupName, groupItem] of Object.entries(customSchema.properties)) {
       const defaultData = this.generateDefaultData(groupItem);
-      const mergedData = this.mergeWithDefault(
-        defaultData,
-        resourceData?.[groupName],
-      );
+      const mergedData = this.mergeWithDefault(defaultData, resourceData?.[groupName]);
 
       data[groupName] = mergedData;
     }
@@ -193,11 +204,7 @@ export class CustomFieldService {
       const arr = [];
       const itemsCount = minItems > 0 ? 1 : 0;
       for (let i = 0; i < itemsCount; i++) {
-        arr.push(
-          this.generateDefaultData(
-            itemSchema as SimpleAppJSONSchema7Definition,
-          ),
-        );
+        arr.push(this.generateDefaultData(itemSchema as SimpleAppJSONSchema7Definition));
       }
       return arr;
     }
@@ -220,10 +227,7 @@ export class CustomFieldService {
     }
   }
 
-  private mergeWithDefault<T extends DynamicObject>(
-    defaultData: T,
-    collectionData: T | undefined,
-  ) {
+  private mergeWithDefault<T extends DynamicObject>(defaultData: T, collectionData: T | undefined) {
     if (Array.isArray(defaultData)) {
       if (Array.isArray(collectionData)) {
         if (_.isEmpty(collectionData)) {
@@ -242,16 +246,11 @@ export class CustomFieldService {
     } 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],
-        );
+        result[key] = this.mergeWithDefault(defaultData[key], collectionData?.[key]);
       }
       return result;
     } else {
-      return typeof collectionData !== "undefined"
-        ? collectionData
-        : defaultData;
+      return typeof collectionData !== "undefined" ? collectionData : defaultData;
     }
   }
 }

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppSettingPage.vue.eta

@@ -1,54 +1,48 @@
 <template>
   <LoadingLine :loading="isFetching" />
-  <SimpleAppJsonSchemaForm
+  <MiniAppSettingLayout
     v-if="!_.isEmpty(schema)"
-    :schema="schema"
-    :data="data"
-    #default="o"
+    :isFetching="isFetching"
+    :miniAppCode="_miniAppCode"
+    :miniAppTitle="miniAppTitle"
   >
-    <MiniAppSettingLayout
-      :isFetching="isFetching"
-      :miniAppCode="_miniAppCode"
-      :miniAppTitle="miniAppTitle"
-    >
-      <template #action>
-        <Button class="btn-primary" @click="o.validate(validateCallBack)">
-          {{ t("miniAppLang.saveSetting") }}
-        </Button>
-      </template>
+    <template #action>
+      <Button
+        class="btn-primary"
+        @click="onSave"
+      >
+        {{ t("miniAppLang.saveSetting") }}
+      </Button>
+    </template>
 
-      <template #default>
-        <div class="space-y-4" v-if="!_.isEmpty(schema)">
-          <p
-            v-if="miniApp?.integration?.customPage?.setting?.note"
-            class="text-sm text-gray-600 whitespace-pre-line"
-          >
-            {{
-              t("miniAppLang.miniAppSettingNote", {
-                miniAppNote: miniApp.integration.customPage.setting.note ?? "",
-              })
-            }}
-          </p>
-          <CustomFieldFormField
-            :jsonSchema="settingSchema"
-            :data="data"
-            :handleGetField="o.getField"
-            schemaName="setting"
-            hierarchy="setting"
-            schemaSource="miniAppSetting"
-            :isShowFieldset="false"
-            :isHideFieldsetLegend="true"
-          />
-        </div>
-      </template>
-    </MiniAppSettingLayout>
-  </SimpleAppJsonSchemaForm>
+    <template #default>
+      <div class="space-y-4">
+        <p
+          v-if="miniApp?.integration?.customPage?.setting?.note"
+          class="text-sm text-gray-600 whitespace-pre-line"
+        >
+          {{
+            t("miniAppLang.miniAppSettingNote", {
+              miniAppNote: miniApp.integration.customPage.setting.note ?? "",
+            })
+          }}
+        </p>
+        <SimpleAppJsonForms
+          ref="jsonForms"
+          v-model="data"
+          :schema="schema"
+          @change="onFormChange"
+        />
+      </div>
+    </template>
+  </MiniAppSettingLayout>
 </template>
 
 <script setup lang="ts" generic="T">
 import _ from "lodash";
+import type { ErrorObject } from "ajv";
+import type { SimpleAppJsonFormsRef } from "~/types/simpleApp.type";
 import MiniAppSettingLayout from "./MiniAppSettingLayout.vue";
-import CustomFieldFormField from "../../../customField/components/CustomFieldFormField.vue";
 
 const props = defineProps<{
   miniAppCode?: string;
@@ -56,16 +50,22 @@ const props = defineProps<{
 
 const _miniAppCode = props.miniAppCode ?? getPathPara("miniAppCode");
 
-const {
-  isFetching,
-  miniApp,
-  miniAppTitle,
-  schema,
-  settingSchema,
-  data,
-  loadMiniAppDetail,
-  validateCallBack,
-} = useMiniAppSetting(_miniAppCode);
+const { isFetching, miniApp, miniAppTitle, schema, data, loadMiniAppDetail, saveSetting } =
+  useMiniAppSetting(_miniAppCode);
+
+const jsonForms = ref<SimpleAppJsonFormsRef | null>(null);
+const formErrors = ref<ErrorObject[]>([]);
+
+const onFormChange = (_data: any, errors: ErrorObject[]) => {
+  formErrors.value = errors;
+};
+
+const onSave = async () => {
+  jsonForms.value?.changeValidationModeToShow();
+  if (!formErrors.value.length) {
+    await saveSetting();
+  }
+};
 
 onMounted(async () => {
   await loadMiniAppDetail();

package/templates/nuxt/lang/cn.ts._eta

@@ -1,15 +0,0 @@
-/**
- * This file was automatically generated by simpleapp generator during initialization. It is changable.
- * --remove-this-line-to-prevent-override--
- * last change 2024-02-22
- * author: Ks Tan
- */
-export default {
-    welcome:'欢迎',
-    welcomeSimpleApp: '你好,欢迎来到 SimpleApp',
-    changeHomePageMsg: '改了这面',
-    category: '类别',
-    /*manually fix from df.ts.eta*/
-}
-
-// or

package/templates/nuxt/lang/en.ts.eta

@@ -1,19 +0,0 @@
-
-export default {
-    //auto generate from lang/default.ts
-    <%let langkeys = Object.keys(it.lang) %>
-    <% for(let l=0; l< langkeys.length; l++){ %>
-    <% let key = langkeys[l] %>
-        "<%=key%>" : <% if (typeof it.lang[key] === 'object') { %><%~ JSON.stringify(it.lang[key], null, 2) %><% } else { %>"<%~ it.lang[key] %>"<% } %>,
-    <%}%>    
-
-
-    //auto generate from schema
-    <% for(let i=0; i< it.allfields.length; i++){ %>
-    <% let f = it.allfields[i] %>
-        <% if(!it.lang[f]){%>        
-            '<%= f %>' : '<%= camelCaseToWords(f) %>',
-        <%}%>
-    <%}%>    
-
-}

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

@@ -1,100 +0,0 @@
-<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']">
-          <CustomFieldFormFieldInput
-            :jsonSchema="validJsonSchema"
-            :hierarchy="hierarchy"
-            :schemaSource="schemaSource"
-            :handleGetField="handleGetField"
-            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"
-              >
-                <CustomFieldFormField
-                  :jsonSchema="subSchema"
-                  :data="data[schemaName]"
-                  :schemaSource="schemaSource"
-                  :schemaName="subSchemaName as string"
-                  :handleGetField="handleGetField"
-                  :hierarchy="
-                    hierarchy === '' || hierarchy === undefined
-                      ? (subSchemaName as string)
-                      : `${hierarchy}.${subSchemaName}`
-                  "
-                />
-              </template>
-            </div>
-          </Fieldset>
-        </template>
-      </template>
-      <template v-else>
-        <CustomFieldFormFieldInput
-          :jsonSchema="validJsonSchema"
-          :hierarchy="hierarchy"
-          :schemaSource="schemaSource"
-          :handleGetField="handleGetField"
-          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 CustomFieldFormFieldInput from "./CustomFieldFormFieldInput.vue";
-
-const props = defineProps<{
-  jsonSchema?: SimpleAppJSONSchema7Definition | undefined;
-  data: any;
-  hierarchy: string;
-  schemaName: string;
-  schemaSource: SchemaSource;
-  isHideFieldsetLegend?: boolean;
-  handleGetField: (path: string) => any;
-}>();
-
-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/CustomFieldFormFieldInput.vue.eta

@@ -1,125 +0,0 @@
-<template>
-  <template v-if="jsonSchema.type !== 'array'">
-    <SimpleAppInput
-      v-if="fieldPath"
-      :setting="handleGetField(fieldPath)"
-      :inputType="inputType"
-      :hidelabel="isParentIsArray"
-      v-model="model"
-    />
-  </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="handleGetField"
-          class="col-span-4"
-          :setting="handleGetField(fieldPath)"
-          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())"
-          >
-            <CustomFieldFormFieldInput
-              v-if="typeof subSchema === 'object' && subSchema !== null"
-              :jsonSchema="subSchema"
-              :hierarchy="
-                hierarchy === '' || hierarchy === undefined
-                  ? (subSchemaName as string)
-                  : `${hierarchy}.*.${subSchemaName}`
-              "
-              :schemaSource="schemaSource"
-              :handleGetField="handleGetField"
-              v-model="model[index][subSchemaName]"
-            />
-          </Column>
-
-          <Column #body="{ index }" header="Delete">
-            <ButtonDanger
-              class="btn-danger"
-              type="button"
-              @click="model.splice(index, 1)"
-            >
-              X
-            </ButtonDanger>
-          </Column>
-        </SimpleAppInputTable>
-      </div>
-    </template>
-    <template v-else-if="jsonSchema.items.type === 'string'">
-      <SimpleAppInput
-        v-if="fieldPath"
-        :setting="handleGetField(fieldPath)"
-        :inputType="
-          (jsonSchema?.inputType as SimpleAppInputType) ??
-          SimpleAppInputType.chip
-        "
-        :hidelabel="isParentIsArray"
-        v-model="model"
-      />
-    </template>
-  </template>
-</template>
-
-<script setup lang="ts">
-import _ from "lodash";
-import ButtonDanger from "~/components/button/ButtonDanger.vue";
-import { SimpleAppInputType, SimpleAppJSONSchema7 } from "~/types";
-import { SchemaSource } from "~/types/customField.type";
-
-const props = defineProps<{
-  jsonSchema: SimpleAppJSONSchema7;
-  hierarchy: string;
-  handleGetField: any;
-  schemaSource: SchemaSource;
-}>();
-
-const model = defineModel<any>();
-
-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/CustomFieldFormSection.vue.eta

@@ -1,40 +0,0 @@
-<template>
-  <section v-if="validProperties" class="space-y-4">
-    <template
-      v-for="(groupJsonSchema, groupName) in validProperties"
-      :key="groupName"
-    >
-      <CustomFieldFormField
-        v-if="isValidSchema(groupJsonSchema)"
-        :jsonSchema="groupJsonSchema"
-        :data="data"
-        :handleGetField="handleGetField"
-        :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 CustomFieldFormField from './CustomFieldFormField.vue';
-
-const props = defineProps<{
-  customFieldJsonSchema: CustomFieldMoreSchema;
-  data: any;
-  handleGetField: (path: string) => any;
-}>();
-
-const validProperties = computed(() => {
-  if (
-    props.customFieldJsonSchema.properties !== undefined &&
-    typeof props.customFieldJsonSchema.properties === 'object'
-  ) {
-    return props.customFieldJsonSchema.properties;
-  }
-  return false;
-});
-</script>