@simitgroup/simpleapp-generator 1.6.7-g-alpha → 1.6.7-i-alpha

package/templates/nuxt/plugins/19.simpleapp-mini-app-store.ts.eta

@@ -8,15 +8,12 @@ import _, { min } from "lodash";
 import {
   Miniapp,
   MiniAppDetail,
-  MiniAppDetailActionAccess,
-  MiniappIntegrationPages,
+  MiniAppDetailPermission,
+  MiniappIntegrationCustomPagePages,
   MINIAPPMANAGERApi,
 } from "~/simpleapp/generate/openapi";
-import {
-  MiniAppFormWithMiniAppCode,
-  MiniAppFrameworkCompatibility,
-  MiniAppPermissionResult,
-} from "~/simpleapp/generate/features/miniApp/app/types/miniApp";
+import { MiniAppFormWithMiniAppCode } from "~/simpleapp/generate/features/miniApp/app/types/miniApp";
+import { MiniappEnvEnum } from "~/enums/enums.generate";
 
 export default defineNuxtPlugin(async () => {
   /**
@@ -24,38 +21,15 @@ export default defineNuxtPlugin(async () => {
    */
   const MINI_APP_PAGE_PATH_PREFIX = "miniapp";
 
-  /**
-   * To totally block mini app. if mini app's framework compability lower than this.
-   * To support backward compatibility, with deprecation notice,
-   * if mini app's framework compability higher than this, but lower than MIN_FRAMEWORK_COMPATIBLE_VERSION.
-   */
-  const MIN_FRAMEWORK_VERSION = "1.0";
-
-  /**
-   * The minimum version that is compatible with the current framework.
-   */
-  const MIN_FRAMEWORK_COMPATIBLE_VERSION = "1.0";
-
   const config = getAxiosConfig();
 
   const miniAppManager = new MINIAPPMANAGERApi(config);
 
   const MINI_APP_BUILT_IN_SETTING_NAME = "mini-app-setting";
 
-  const _ERROR = {
-    MISSING_REQUIRED_PLAN: "missingRequiredPlan",
-    INSUFFICIENT_ACCESS_PERMISSION: "insufficientAccessPermission",
-    INSUFFICIENT_INSTALL_PERMISSION: "insufficientInstallPermission",
-    INSUFFICIENT_UNINSTALL_PERMISSION: "insufficientUninstallPermission",
-    INSUFFICIENT_CHANGE_SETTING_PERMISSION:
-      "insufficientChangeSettingPermission",
-    NO_MINI_APP_FEATURE: "packageTypeRestricted",
-    NOT_YET_INSTALL: "notYetInstall",
-  };
-
   const useMiniAppStore = defineStore("mini-app", {
     state: () => ({
-      actionAccess: {} as MiniAppDetailActionAccess,
+      permissions: {} as MiniAppDetailPermission,
 
       /**
        * Store all installed miniApps
@@ -67,10 +41,15 @@ export default defineNuxtPlugin(async () => {
        */
       isFetchingInstalledMiniApps: true,
     }),
+
     getters: {
       getForm: (state) => (formCode: string) => {
+        if (!state.permissions.hasMiniAppFeature) {
+          return [];
+        }
+
         return state.installedMiniApps.flatMap((miniApp) => {
-          return miniApp.integration.forms
+          return (miniApp.integration?.customField?.fields ?? [])
             .filter((form) => form.code == formCode)
             .map((form) => {
               return {
@@ -81,64 +60,250 @@ export default defineNuxtPlugin(async () => {
         });
       },
 
-      isHaveMiniAppFeature: (state) => {
-        if (state.isFetchingInstalledMiniApps) {
-          // if still fetching, return true 1st, else will immediate show restricted warning
-          return true;
+      showMiniAppMoreMenuButton: (state) => {
+        if (!state.permissions.hasMiniAppFeature) {
+          return false;
         }
 
-        return state.actionAccess.isHaveMiniAppFeature ?? false;
-      },
-
-      isShowMiniAppMoreMenuButton: (state) => {
         const filtered = state.installedMiniApps.filter(
           (item) =>
-            item.integration?.pages?.length > 0 ||
-            (item.integration?.settings?.jsonSchema &&
-              Object.keys(item.integration.settings.jsonSchema).length > 0),
+            item.integration?.customPage?.pages &&
+            (item.integration?.customPage?.pages?.length > 0 ||
+              (item.integration?.customPage?.setting?.jsonSchema &&
+                Object.keys(item.integration.customPage.setting.jsonSchema)
+                  .length > 0)),
         );
 
         return _.isEmpty(filtered) ? false : true;
       },
 
-      isCanInstall: (state) => state.actionAccess.isAllowInstall,
-      isCanUninstall: (state) => state.actionAccess.isAllowUninstall,
-      isCanUpdateSetting: (state) => state.actionAccess.isAllowUpdateSetting,
-      isHasMiniAppFeature: (state) => state.actionAccess.isHaveMiniAppFeature,
+      // ================================= Permission =================================
+      canInstall: (state) => state.permissions.canInstall,
+      canUninstall: (state) => state.permissions.canUninstall,
+      canUpdateSetting: (state) => state.permissions.canUpdateSetting,
+      hasMiniAppFeature: (state) => state.permissions.hasMiniAppFeature,
     },
 
     actions: {
-      getMenuItems() {
-        return this.installedMiniApps.flatMap((miniApp) => {
-          const pages = miniApp.integration.pages.filter((page) => {
+      // ================================= Finder =================================
+      findMiniApp(miniApps: MiniAppDetail[], miniAppCode: string) {
+        return miniApps.find((item) => item.code === miniAppCode);
+      },
+
+      findPage(miniApp: MiniAppDetail, pageCode: string) {
+        if (pageCode === MINI_APP_BUILT_IN_SETTING_NAME) {
+          return this.getSettingPageMenu(miniApp);
+        }
+
+        return miniApp.integration?.customPage?.pages.find(
+          (item) => item.code === pageCode,
+        );
+      },
+
+      // ================================= Permission =================================
+      hasPermission(requiredPermissions: string[], env: MiniappEnvEnum) {
+        if (env === MiniappEnvEnum.DEV) {
+          return true;
+        }
+
+        if (_.isEmpty(requiredPermissions)) {
+          return true;
+        }
+
+        const userRoles = getUserProfile().roles ?? [];
+        return requiredPermissions.some((permission) =>
+          userRoles.includes(permission),
+        );
+      },
+
+      validatePageAccess(miniAppCode: string, pageCode: string) {
+        const miniApp = this.findMiniApp(this.installedMiniApps, miniAppCode);
+        if (!miniApp) {
+          return {
+            valid: false,
+            type: "unknownMiniApp",
+          };
+        }
+
+        const page = this.findPage(miniApp, pageCode);
+        if (!page) {
+          return {
+            valid: false,
+            type: "unknownPage",
+          };
+        }
+
+        if (!this.hasMiniAppFeature) {
+          return {
+            valid: false,
+            type: "miniAppFeature",
+          };
+        }
+
+        if (hasHighPrivilege()) {
+          return {
+            valid: true,
+            type: "highPrivilege",
+          };
+        }
+
+        if (!this.isInstalled(miniApp.code)) {
+          return {
+            valid: false,
+            type: "notInstalled",
+          };
+        }
+
+        if (!miniApp.hasRequiredPlan) {
+          return {
+            valid: false,
+            type: "requiredPlan",
+          };
+        }
+
+        if (
+          !this.hasPermission(
+            page.requiredPermissions ?? [],
+            miniApp.env as MiniappEnvEnum,
+          )
+        ) {
+          return {
+            valid: false,
+            type: "requiredPermission",
+          };
+        }
+
+        return {
+          valid: true,
+          type: "",
+        };
+      },
+
+      validation(type: string) {
+        switch (type) {
+          case "miniAppFeature":
+            return {
+              valid: this.hasMiniAppFeature,
+              type,
+            };
+
+          case "install":
+            return {
+              valid: this.canInstall,
+              type,
+            };
+
+          case "uninstall":
+            return {
+              valid: this.canUninstall,
+              type,
+            };
+
+          case "updateSetting":
+            return {
+              valid: this.canUpdateSetting,
+              type,
+            };
+        }
+
+        return {
+          valid: true,
+          type: "",
+        };
+      },
+
+      isInstalled(miniAppCode: string) {
+        const miniApp = this.installedMiniApps.find(
+          (item) => item.code === miniAppCode,
+        );
+
+        return miniApp?.miniAppInstallation?.isActive === true ? true : false;
+      },
+
+      canAccessPage(miniAppCode: string, pageCode: string): boolean {
+        const validation = this.validatePageAccess(miniAppCode, pageCode);
+
+        return validation.valid;
+      },
+
+      enabledMiniAppFeature(
+        miniApp: MiniAppDetail,
+        feature: keyof MiniAppDetail["integration"]["enabled"],
+      ) {
+        return miniApp.integration.enabled[feature];
+      },
+
+      // ================================= Menu =================================
+
+      hasSettingPage(miniApp: MiniAppDetail) {
+        const enabled = this.enabledMiniAppFeature(miniApp, "customPage");
+        if (!enabled) return false;
+
+        if (_.isEmpty(miniApp.integration?.customPage?.setting?.jsonSchema)) {
+          return false;
+        }
+
+        return true;
+      },
+
+      getSettingPageMenu(miniApp: MiniAppDetail) {
+        if (!this.canUpdateSetting) {
+          return null;
+        }
+
+        if (!this.enabledMiniAppFeature(miniApp, "customPage")) {
+          return null;
+        }
+
+        if (_.isEmpty(miniApp.integration?.customPage?.setting?.jsonSchema)) {
+          return null;
+        }
+
+        return {
+          code: MINI_APP_BUILT_IN_SETTING_NAME,
+          title: t("miniAppLang.setting"),
+          description: "",
+          sources: {
+            development: "",
+            production: "",
+          },
+          requiredPermissions: [],
+          iconType: "class",
+          icon: "pi pi-cog",
+        };
+      },
+
+      shouldShowPageOnMenu(page: MiniappIntegrationCustomPagePages) {
+        return page.isHideOnMenu === true ? false : true;
+      },
+
+      getPages(miniApp: MiniAppDetail, withSettingPage: boolean = true) {
+        if (!this.hasMiniAppFeature) {
+          return [];
+        }
+
+        const pages = (miniApp.integration?.customPage?.pages ?? []).filter(
+          (page) => {
             return (
-              this.isAllowAccessMiniAppPage(miniApp.code, page.code) &&
-              this.isRequiredToShowOnMenu(page)
+              this.canAccessPage(miniApp.code, page.code) &&
+              this.shouldShowPageOnMenu(page)
             );
-          });
+          },
+        );
 
-          if (this.isCanUpdateSetting) {
-            if (
-              miniApp.integration.settings?.jsonSchema &&
-              !_.isEmpty(miniApp.integration.settings.jsonSchema)
-            ) {
-              pages.push({
-                code: MINI_APP_BUILT_IN_SETTING_NAME,
-                title: t("miniAppLang.setting"),
-                description: "",
-                sourceType: "",
-                sources: {
-                  development: "",
-                  production: "",
-                },
-                requiredPermissions: [],
-                iconType: "class",
-                icon: "pi pi-cog",
-              });
-            }
+        if (withSettingPage) {
+          const settingPage = this.getSettingPageMenu(miniApp);
+          if (settingPage) {
+            pages.push(settingPage);
           }
+        }
+
+        return pages ?? [];
+      },
 
-          // Only return mini app if pages not empty
+      getMenuItems() {
+        return this.installedMiniApps.flatMap((miniApp) => {
+          const pages = this.getPages(miniApp);
           if (_.isEmpty(pages)) {
             return [];
           }
@@ -153,9 +318,7 @@ export default defineNuxtPlugin(async () => {
         });
       },
 
-      isRequiredToShowOnMenu(page: MiniappIntegrationPages) {
-        return page.isHideOnMenu !== true;
-      },
+      // ================================= Separator =================================
 
       // ============================ Load Function ============================
       async loadInstalledMiniApps() {
@@ -171,7 +334,7 @@ export default defineNuxtPlugin(async () => {
           });
 
         this.installedMiniApps = resp.installedMiniApps;
-        this.actionAccess = resp.actionAccess;
+        this.permissions = resp.permissions;
 
         this.isFetchingInstalledMiniApps = false;
       },
@@ -198,85 +361,6 @@ export default defineNuxtPlugin(async () => {
           });
       },
 
-      // ================================ Permission ===============================
-
-      hasRequiredPlan(miniApp: Miniapp) {
-        const currentPlan = getUserProfile().package ?? "";
-        const requiredPlans = miniApp.requiredPlans ?? [];
-        if (_.isEmpty(requiredPlans)) return true;
-
-        return requiredPlans.includes(currentPlan);
-      },
-
-      checkHasFeature() {
-        return this._check([
-          [() => this.isHasMiniAppFeature, _ERROR.NO_MINI_APP_FEATURE],
-        ]);
-      },
-
-      checkHasRequiredPlan(miniApp: Miniapp) {
-        return this._check([
-          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
-        ]);
-      },
-
-      checkIsInstalled(miniAppCode: string) {
-        return this._check([
-          [() => this.isMiniAppInstalled(miniAppCode), _ERROR.NOT_YET_INSTALL],
-        ]);
-      },
-
-      checkCanAccess(miniAppCode: string, pageCode: string) {
-        if (pageCode === MINI_APP_BUILT_IN_SETTING_NAME) {
-          return this._check([
-            [
-              () => this.isCanUpdateSetting,
-              _ERROR.INSUFFICIENT_ACCESS_PERMISSION,
-            ],
-          ]);
-        }
-
-        return this._check([
-          [
-            () => this.isAllowAccessMiniAppPage(miniAppCode, pageCode),
-            _ERROR.INSUFFICIENT_ACCESS_PERMISSION,
-          ],
-        ]);
-      },
-
-      checkCanInstall(miniApp: Miniapp) {
-        return this._check([
-          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
-          [() => this.isCanInstall, _ERROR.INSUFFICIENT_INSTALL_PERMISSION],
-        ]);
-      },
-
-      checkCanUninstall(miniApp: Miniapp) {
-        return this._check([
-          [() => this.isCanUninstall, _ERROR.INSUFFICIENT_UNINSTALL_PERMISSION],
-        ]);
-      },
-
-      checkCanUpdateSetting(miniApp: Miniapp) {
-        return this._check([
-          [() => this.hasRequiredPlan(miniApp), _ERROR.MISSING_REQUIRED_PLAN],
-          [
-            () => this.isCanUpdateSetting,
-            _ERROR.INSUFFICIENT_CHANGE_SETTING_PERMISSION,
-          ],
-        ]);
-      },
-
-      _check(checks: [() => boolean, string][]): MiniAppPermissionResult {
-        for (const [checkFn, reason] of checks) {
-          if (!checkFn()) {
-            return { status: false, reason };
-          }
-        }
-
-        return { status: true };
-      },
-
       // ============================ Path & Navigation ============================
 
       getMiniAppSettingPath(miniAppCode: string) {
@@ -324,53 +408,6 @@ export default defineNuxtPlugin(async () => {
         return miniApp ? true : false;
       },
 
-      isAllowAccessMiniAppPage(miniAppCode: string, pageCode: string) {
-        const miniApp = this.installedMiniApps.find(
-          (item) => item.code === miniAppCode,
-        );
-        if (!miniApp) {
-          return false;
-        }
-
-        const page = miniApp.integration.pages.find(
-          (item) => item.code === pageCode,
-        );
-        if (!page) {
-          return false;
-        }
-
-        if (checkHasHighPrivilege()) {
-          return true;
-        }
-
-        const userRoles = getUserProfile().roles;
-
-        if (page.requiredPermissions && !_.isEmpty(page.requiredPermissions)) {
-          return page.requiredPermissions.some((permission) =>
-            userRoles.includes(permission),
-          );
-        }
-        return true;
-      },
-
-      getPageInfo(miniApp: Miniapp, pageCode: string) {
-        return miniApp.integration.pages.find((item) => item.code === pageCode);
-      },
-
-      checkMiniAppFrameworkCompatibility: (
-        miniApp: Miniapp,
-      ): MiniAppFrameworkCompatibility => {
-        if (miniApp.frameworkCompatibility < MIN_FRAMEWORK_VERSION) {
-          return MiniAppFrameworkCompatibility.DEPRECATED;
-        }
-
-        if (miniApp.frameworkCompatibility < MIN_FRAMEWORK_COMPATIBLE_VERSION) {
-          return MiniAppFrameworkCompatibility.TO_BE_DEPRECATED;
-        }
-
-        return MiniAppFrameworkCompatibility.COMPATIBLE;
-      },
-
       // ============================ miniApp Action ============================
 
       async installMiniApp(miniAppCode: string) {

package/templates/nuxt/plugins/20.simpleapp-userstore.ts.eta

@@ -165,7 +165,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         }
         //().then((res:AxiosResponse)=>{ }
       },
-      checkHasHighPrivilege() {
+      hasHighPrivilege() {
         return HIGH_PRIVILEGE_ROLES.some((permission) =>
           this.roles.includes(permission),
         );

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

@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="miniApp.integration.enabled.customField"
+    class="flex flex-col gap-2"
+  >
+    <div
+      v-for="field in miniApp.integration.customField?.fields"
+      class="flex gap-2 bg-slate-100 rounded-xl px-4 py-3"
+    >
+      <div>
+        <div class="flex items-center gap-2 font-semibold text-surface-700">
+          <span
+            class="text-xs bg-primary-100 text-primary-500 px-4 py-1 rounded-md"
+            >{{ t(`${field.code}`) }}
+          </span>
+          <span>
+            {{ field.title }}
+          </span>
+        </div>
+
+        <div class="text-surface-400 text-sm mt-1">
+          {{ field.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+</script>

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

@@ -0,0 +1,68 @@
+<template>
+  <Tabs value="pages">
+    <TabList>
+      <Tab value="pages">
+        {{ t("pages") }}
+      </Tab>
+      <Tab value="scopes">
+        {{ t("scopes") }}
+      </Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="pages">
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="page in miniApp.integration.customPage?.pages"
+            class="flex flex-col gap-2 bg-slate-100 rounded-xl px-4 py-3"
+          >
+            <div class="flex items-center gap-2">
+              <MiniAppPageIcon
+                :iconType="page.iconType"
+                :icon="page.icon ?? ''"
+                class=""
+              />
+
+              <div class="font-semibold text-surface-700">
+                {{ page.title }}
+              </div>
+            </div>
+            <div class="flex flex-col pl-6">
+              <div class="text-surface-400 text-sm mt-1">
+                {{ page.description }}
+              </div>
+
+              <template v-if="!_.isEmpty(page.requiredPermissions)">
+                <Divider type="dashed" class="!my-3" />
+
+                <div class="flex items-center gap-2 flex-wrap">
+                  <span class="text-surface-700 text-sm">
+                    {{ t("miniAppLang.requiredPermissions") }}:
+                  </span>
+                  <div
+                    v-for="requiredPermission in page.requiredPermissions"
+                    class="bg-slate-300 px-2 py-0.5 rounded-md text-xs font-medium text-surface-600"
+                  >
+                    {{ requiredPermission }}
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+      <TabPanel value="scopes">
+        <MiniAppFeatureScope :miniApp="miniApp" />
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+</template>
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+import MiniAppPageIcon from "./MiniAppPageIcon.vue";
+import MiniAppFeatureScope from "./MiniAppFeatureScope.vue";
+import _ from "lodash";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="mb-8 text-surface-500">
+    {{ t("miniAppLang.scopeDescription") }}
+  </div>
+  <div class="space-y-3">
+    <div
+      v-for="(scopeList, resourceName) in scopes"
+      class="rounded-lg space-y-2"
+    >
+      <div class="font-semibold">
+        {{ t(resourceName.toLowerCase()) }}
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="scope in scopeList"
+          class="space-x-2 text-sm bg-slate-100 rounded px-2 py-1 text-surface-600 font-medium"
+        >
+          <span>{{ _.startCase(scope) }}</span>
+        </div>
+      </div>
+
+      <Divider type="dashed" class="!mt-6 !mb-4" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+import _ from "lodash";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+
+const scopes = computed(() => {
+  if (!props?.miniApp?.integration?.scopes) {
+    return {};
+  }
+
+  const grouped: Record<string, string[]> = {};
+
+  for (const item of props?.miniApp?.integration?.scopes) {
+    const [prefix, suffix] = item.split(".");
+    if (!grouped[prefix]) {
+      grouped[prefix] = [];
+    }
+    grouped[prefix].push(suffix);
+  }
+
+  return grouped;
+});
+</script>