@simitgroup/simpleapp-generator 2.0.3-i-alpha → 2.0.3-k-alpha

package/ReleaseNote.md

@@ -1,3 +1,10 @@
+[2.0.3k-alpha]
+1. Update sharelibs imports to @simtrain/shared package
+
+[2.0.3j-alpha]
+1. Replace CustomFieldFormField with SimpleAppJsonForms in MiniAppSettingPage 
+2. Remove redundant custom field form templates
+
 [2.0.3i-alpha]
 1. Add uiSchema for custom field
 2. Remove unused lang template files (cn.ts._eta, en.ts.eta)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "2.0.3i-alpha",
+  "version": "2.0.3k-alpha",
   "description": "frontend nuxtjs and backend nests code generator using jsonschema.",
   "main": "dist/index.js",
   "scripts": {

package/templates/basic/nest/service.ts.eta

@@ -8,7 +8,7 @@
  
 
 import { UserContext } from 'src/simple-app/_core/features/user-context/user.context'
-import * as sharelibs from 'src/simple-app/_core/share-libs'
+import * as sharelibs from '@simtrain/shared'
 import { Injectable,Inject,forwardRef } from '@nestjs/common';
 import { InjectModel } from '@nestjs/mongoose';
 import jsonpath from 'jsonpath'

package/templates/basic/nuxt/simpleapp.generate.client.ts.eta

@@ -7,7 +7,7 @@
  */
 import _ from 'lodash'
 import {SchemaType,NotificationStatus} from '~/types'
-import * as sharelibs from '../sharelibs'
+import * as sharelibs from '@simtrain/shared'
 import jsonpath from 'jsonpath'
 import { SimpleAppClient } from "./SimpleAppClient";
 import {

package/templates/nuxt/composables/date.generate.ts.eta

@@ -9,7 +9,7 @@ import { DateTime } from "luxon";
 import {
   dayjsDateFormatToPrimeVue,
   getDefaultDateFormatForCountryCode,
-} from "~/simpleapp/generate/share-libs";
+} from "@simtrain/shared";
 import { DurationType } from "~/types";
 
 const convertToDate = (date: Date | string) => {

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/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>

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

@@ -1,96 +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']">
-          <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

@@ -1,150 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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>