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

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

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="drop-shadow-[0_10px_8px_rgba(197,197,197,0.25)]"
+    :class="{
+      'size-20': size === 'xl',
+      'size-16': size === 'lg',
+      'size-14': !size || size === 'normal',
+      'size-8': size === 'xs',
+      'size-7': size === 'tiny',
+      'size-6': size === 'tiny-1',
+    }"
+  >
+    <PrimevueAvatar
+      :image
+      :label="image ? undefined : displayLabel"
+      class="squircle !size-full aspect-square"
+      :class="{
+        'text-xl': size === 'lg',
+        'text-lg': !size || size === 'normal',
+        'text-xs': size === 'xs',
+        'text-6xl': size === 'xl',
+        'text-tiny': size === 'tiny' || size === 'tiny-1',
+      }"
+      style="background-color: #dee9fc; color: #1a2551"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import _ from "lodash";
+import PrimevueAvatar from "primevue/avatar";
+
+const props = defineProps<{
+  image?: string;
+  label?: string;
+  size?: "lg" | "normal" | "xs" | "xl" | "tiny" | "tiny-1";
+}>();
+
+const displayLabel = computed(() => {
+  if (!props.label) return undefined;
+
+  return props.label
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+});
+</script>

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

@@ -30,9 +30,10 @@
             :title="miniApp.name"
           >
             <template #icon>
-              <img
-                :src="miniApp.logo"
-                class="size-6 rounded-md object-contain"
+              <MiniAppIcon
+                :image="miniApp.logo"
+                :label="miniApp.name"
+                size="tiny"
               />
             </template>
             <template #title>
@@ -77,7 +78,7 @@
         </div>
       </template>
 
-      <template v-if="$miniAppStore.isShowMiniAppMoreMenuButton">
+      <template v-if="$miniAppStore.showMiniAppMoreMenuButton">
         <MainmenuButton
           :id="'mainmenu-app-miniApps-page-more'"
           :to="getDocumentUrl('miniapp')"
@@ -96,6 +97,7 @@
 <script setup lang="ts">
 import IconPuzzle from "~/components/icon/IconPuzzle.vue";
 import MiniAppPageIcon from "./MiniAppPageIcon.vue";
+import MiniAppIcon from "./MiniAppIcon.vue";
 
 const { $miniAppStore } = useNuxtApp();
 const displayItemCount = 3;

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

@@ -23,12 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import { MiniappIntegrationPages } from "~/simpleapp/generate/openapi";
+import {
+  MiniAppDetail,
+  MiniappIntegrationCustomPagePages,
+} from "~/simpleapp/generate/openapi";
 
 const props = defineProps<{
-  pageInfo: MiniappIntegrationPages;
+  miniApp: MiniAppDetail;
+  pageInfo: MiniappIntegrationCustomPagePages;
   miniAppCode: string;
   miniAppInstallationId: string;
+  developerPortalAppId: string;
 }>();
 
 const _xOrg = getPathPara("xorg", "");
@@ -52,10 +57,11 @@ const { iframeRef, onIframeLoad } = useMiniAppBridge(
   props.miniAppInstallationId,
   props.pageInfo,
   props.miniAppCode,
+  props.developerPortalAppId,
 );
 
 const iframeSource = computed(() => {
-  return isDevMode()
+  return props.miniApp.env === "dev"
     ? props.pageInfo.sources.development
     : props.pageInfo.sources.production;
 });

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

@@ -1,17 +1,17 @@
 <template>
   <MiniAppRestrictedWarning
-    v-if="!permission.status"
-    :reason="permission.reason ?? ''"
+    v-if="!validation.valid"
+    :type="validation.type ?? ''"
     class="flex items-center justify-center mt-10"
   />
   <slot v-else />
 </template>
 
 <script setup lang="ts">
-import { MiniAppPermissionResult } from "../types/miniApp";
+import { MiniAppValidationResp } from "../types/miniApp";
 import MiniAppRestrictedWarning from "./MiniAppRestrictedWarning.vue";
 
 defineProps<{
-  permission: MiniAppPermissionResult;
+  validation: MiniAppValidationResp;
 }>();
 </script>

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

@@ -3,11 +3,11 @@
     <span
       class="px-3 py-1 text-sm font-semibold rounded bg-yellow-100 text-yellow-800"
     >
-      {{ t(`miniAppLang.${reason}`) }}
+      {{ t(`miniAppLang.permission.${type}`) }}
     </span>
 
     <ButtonPrimary
-      v-if="reason === 'packageTypeRestricted'"
+      v-if="type === 'miniAppFeature'"
       :label="t('miniAppLang.upgradePlan')"
       @click="handleUpgradePlan"
     />
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 defineProps<{
-  reason: string;
+  type: string;
 }>();
 
 function handleUpgradePlan() {

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

@@ -6,14 +6,14 @@
         {{ miniAppTitle }}
       </h1>
 
-      <div v-if="$miniAppStore.isHasMiniAppFeature">
-        <slot v-if="$miniAppStore.isCanUpdateSetting" name="action" />
+      <div v-if="$miniAppStore.validation('updateSetting').valid">
+        <slot name="action" />
       </div>
     </div>
 
     <MiniAppPermissionWrapper
       v-if="miniApp"
-      :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
+      :validation="$miniAppStore.validation('updateSetting')"
     >
       <slot />
     </MiniAppPermissionWrapper>

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

@@ -20,12 +20,12 @@
       <template #default>
         <div class="space-y-4" v-if="!_.isEmpty(schema)">
           <p
-            v-if="miniApp?.integration?.settings?.note"
+            v-if="miniApp?.integration?.customPage?.setting?.note"
             class="text-sm text-gray-600 whitespace-pre-line"
           >
             {{
               t("miniAppLang.miniAppSettingNote", {
-                miniAppNote: miniApp.integration.settings.note ?? "",
+                miniAppNote: miniApp.integration.customPage.setting.note ?? "",
               })
             }}
           </p>

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

@@ -3,7 +3,7 @@
 
   <MiniAppPermissionWrapper
     v-if="!$miniAppStore.isFetchingInstalledMiniApps"
-    :permission="permission"
+    :validation="$miniAppStore.validatePageAccess(miniAppCode, pageCode)"
   >
     <slot />
   </MiniAppPermissionWrapper>
@@ -12,38 +12,8 @@
 <script setup lang="ts">
 import MiniAppPermissionWrapper from "./MiniAppPermissionWrapper.vue";
 
-const props = defineProps<{
+defineProps<{
   miniAppCode: string;
   pageCode: string;
 }>();
-
-const { $miniAppStore } = useNuxtApp();
-
-const miniApp = computed(() => {
-  return $miniAppStore.installedMiniApps.find(
-    (item) => item.code === props.miniAppCode,
-  );
-});
-
-const permission = computed(() => {
-  const checkHasFeature = $miniAppStore.checkHasFeature();
-  if (!checkHasFeature.status) return checkHasFeature;
-
-  const checkIsInstalled = $miniAppStore.checkIsInstalled(props.miniAppCode);
-  if (!checkIsInstalled.status) return checkIsInstalled;
-
-  if (!miniApp.value) {
-    return {
-      status: false,
-      reason: "unknownMiniApp",
-    };
-  }
-
-  const checkHasRequiredPlan = $miniAppStore.checkHasRequiredPlan(
-    miniApp.value,
-  );
-  if (!checkHasRequiredPlan.status) return checkHasRequiredPlan;
-
-  return $miniAppStore.checkCanAccess(props.miniAppCode, props.pageCode);
-});
 </script>

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

@@ -16,7 +16,7 @@
     </div>
 
     <div class="p-4">
-      <img :src="item.logo" class="size-16 object-contain" />
+      <MiniAppIcon :image="item.logo" :label="item.name" size="lg" />
     </div>
 
     <div class="text-sm text-gray-600 text-center line-clamp-2">
@@ -27,18 +27,19 @@
 
 <script setup lang="ts">
 import { MiniappStatusEnum } from "~/enums/enums.generate";
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppIntegrationItemBadge from "./MiniAppIntegrationItemBadge.vue";
+import MiniAppIcon from "../MiniAppIcon.vue";
 
 defineProps<{
-  item: Miniapp;
+  item: MiniAppDetail;
 }>();
 
 const emits = defineEmits<{
-  (event: "miniAppClick", item: Miniapp): void;
+  (event: "miniAppClick", item: MiniAppDetail): void;
 }>();
 
-function handleMiniAppClick(item: Miniapp) {
+function handleMiniAppClick(item: MiniAppDetail) {
   if (item.status === MiniappStatusEnum.UPCOMING) return;
 
   if (item._id) {

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

@@ -5,11 +5,12 @@
     :class="{
       'bg-emerald-500': badgeType === 'available',
       'bg-yellow-400': badgeType === 'comingSoon',
+      'bg-slate-400': badgeType === 'dev',
     }"
   >
     {{ t(`miniAppLang.${badgeType}`) }}
   </span>
-  <span
+  <!-- <span
     v-else
     class="bg-slate-200/50 text-surface-500 text-[0.65rem] px-2 font-bold py-0.5 rounded-md uppercase"
   >
@@ -27,28 +28,33 @@
         })
       }}
     </template>
-  </span>
+  </span> -->
 </template>
 
 <script setup lang="ts">
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniappEnvEnum } from "~/enums/enums.generate";
+import { Miniapp, MiniAppDetail } from "~/simpleapp/generate/openapi";
 
 const props = defineProps<{
-  item: Miniapp;
+  item: MiniAppDetail;
 }>();
 
 const { $miniAppStore } = useNuxtApp();
 
 const badgeType = computed(() => {
+  if (props.item.env === MiniappEnvEnum.DEV) {
+    return "dev";
+  }
+
+  if (!$miniAppStore.hasMiniAppFeature) {
+    return "noFeature";
+  }
+
   if (props.item.status === "upcoming") {
     return "comingSoon";
   }
 
-  if ($miniAppStore.hasRequiredPlan(props.item)) {
-    if (!$miniAppStore.isHasMiniAppFeature) {
-      return "noFeature";
-    }
-
+  if (props.item.hasRequiredPlan) {
     return "available";
   }
 

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

@@ -19,16 +19,16 @@
 </template>
 <script setup lang="ts">
 import UndrawNodata from "~/components/icon/UndrawNodata.vue";
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppIntegrationItem from "./MiniAppIntegrationItem.vue";
 
-defineProps<{ items: Miniapp[] | undefined }>();
+defineProps<{ items: MiniAppDetail[] | undefined }>();
 
 const emits = defineEmits<{
-  (event: "miniAppClick", item: Miniapp): void;
+  (event: "miniAppClick", item: MiniAppDetail): void;
 }>();
 
-function handleMiniAppClick(item: Miniapp) {
+function handleMiniAppClick(item: MiniAppDetail) {
   emits("miniAppClick", item);
 }
 </script>

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

@@ -7,25 +7,32 @@
     class="p-8 max-w-4xl mx-auto mb-10 space-y-4"
   >
     <div class="flex items-start">
-      <img :src="miniApp.logo" class="size-16 mr-8 object-contain" />
+      <!-- <img :src="miniApp.logo" class="size-16 mr-8 object-contain" /> -->
+
+      <MiniAppIcon
+        :image="miniApp.logo"
+        :label="miniApp.name"
+        size="lg"
+        class="mr-8"
+      />
 
       <div class="space-y-1">
         <h1 class="text-3xl font-bold mb-1">{{ miniApp.name }}</h1>
         <div class="text-gray-400 text-sm flex items-center gap-2">
           <div class="flex items-center gap-2">
             <i class="pi pi-user" />
-            <span>{{ miniApp.author }}</span>
+            <span>{{ miniApp.author.team ?? miniApp.author.name }}</span>
           </div>
           <span>|</span>
           <div>v {{ miniApp.version }}</div>
 
           <div
-            v-if="!_.isEmpty(miniApp.requiredPlans)"
+            v-if="!_.isEmpty(miniApp.access.requiredPlans)"
             class="flex items-center gap-2"
           >
             <span>|</span>
             <span
-              v-for="permission in miniApp.requiredPlans ?? []"
+              v-for="permission in miniApp.access.requiredPlans ?? []"
               class="px-3 py-0.5 bg-slate-100 text-surface-500 font-semibold text-xs rounded uppercase"
             >
               {{ permission }}
@@ -42,6 +49,22 @@
           </div>
         </div>
         <p class="text-gray-600">{{ miniApp.intro.description }}</p>
+
+        <div class="flex items-center gap-1">
+          <template
+            v-for="[feature, enabled] in Object.entries(
+              miniApp.integration.enabled,
+            )"
+          >
+            <span
+              v-if="enabled"
+              class="px-3 py-0.5 bg-primary-50 text-primary-500 font-semibold text-xs rounded uppercase cursor-pointer"
+              @click="() => handleOpenFeatureDialog(feature, enabled)"
+            >
+              {{ t(`miniAppLang.integrationFeature.${feature}`) }}
+            </span>
+          </template>
+        </div>
       </div>
     </div>
 
@@ -53,13 +76,13 @@
       </template>
       <MiniAppPermissionWrapper
         v-else
-        :permission="$miniAppStore.checkHasFeature()"
+        :validation="$miniAppStore.validation('miniAppFeature')"
       >
         <div class="flex items-center space-x-2">
           <template v-if="$miniAppStore.isMiniAppInstalled(miniApp.code)">
             <!-- Installed -->
             <MiniAppPermissionWrapper
-              :permission="$miniAppStore.checkCanUninstall(miniApp)"
+              :validation="$miniAppStore.validation('uninstall')"
               class="!mt-0"
             >
               <ButtonDefault
@@ -71,11 +94,8 @@
             </MiniAppPermissionWrapper>
 
             <MiniAppPermissionWrapper
-              v-if="
-                miniApp.integration.settings &&
-                !_.isEmpty(miniApp.integration.settings)
-              "
-              :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
+              v-if="$miniAppStore.hasSettingPage(miniApp)"
+              :validation="$miniAppStore.validation('updateSetting')"
               class="!mt-0"
             >
               <ButtonSecondary
@@ -89,7 +109,7 @@
           <template v-else>
             <!-- Not yet install -->
             <MiniAppPermissionWrapper
-              :permission="$miniAppStore.checkCanInstall(miniApp)"
+              :validation="$miniAppStore.validation('install')"
               class="!mt-0"
             >
               <ButtonPrimary
@@ -105,19 +125,49 @@
 
       <div v-if="miniApp.intro.previewImages.length > 0">
         <h2 class="text-xl font-semibold mb-2">Overview:</h2>
-        <div class="card flex justify-center py-4">
+        <div class="card flex justify-center py-4 h-96 bg-slate-100 rounded-xl">
           <Galleria
             :value="miniApp.intro.previewImages"
             :numVisible="5"
-            containerStyle="max-width: 640px"
             :showThumbnails="false"
             :showIndicators="true"
+            :showItemNavigators="true"
+            :pt="{
+              root: {
+                class: '!grow !h-full',
+              },
+              content: {
+                class: '!h-full',
+              },
+              itemsContainer: {
+                class: '!h-full',
+              },
+              items: {
+                class: '!grow',
+              },
+              item: {
+                class: '!grow',
+              },
+              prevButton: {
+                class: '!bg-slate-200 cursor-pointer',
+              },
+              prevIcon: {
+                class: 'text-black',
+              },
+              nextButton: {
+                class: '!bg-slate-200 cursor-pointer',
+              },
+              nextIcon: {
+                class: 'text-black',
+              },
+            }"
           >
             <template #item="slotProps">
               <img
                 :src="slotProps.item"
                 :alt="miniApp.name"
-                style="width: 100%; display: block"
+                style="display: block"
+                class="h-80 rounded-xl shadow-md"
               />
             </template>
           </Galleria>
@@ -132,10 +182,12 @@
             :key="feature.title"
             class="flex space-x-2"
           >
-            <div>✅</div>
-            <div>
-              <div>
-                <span class="font-semibold">{{ feature.title }}</span> -
+            <div class="flex flex-col">
+              <div class="flex items-center gap-2">
+                <i class="pi pi-check-circle text-primary" />
+                <span class="font-semibold">{{ feature.title }}</span>
+              </div>
+              <div class="pl-6 text-slate-400 text-sm">
                 {{ feature.description }}
               </div>
             </div>
@@ -143,18 +195,59 @@
         </div>
       </div>
     </div>
+
+    <Dialog
+      v-model:visible="isShowApiAccessFeature"
+      :modal="true"
+      maximizable
+      :header="t('scopes')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureScope :miniApp="miniApp" />
+    </Dialog>
+
+    <Dialog
+      v-model:visible="isShowCustomPageFeature"
+      :modal="true"
+      maximizable
+      :header="t('customPage')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureCustomPage :miniApp="miniApp" />
+    </Dialog>
+
+    <Dialog
+      v-model:visible="isShowCustomFieldFeature"
+      :modal="true"
+      maximizable
+      :header="t('customField')"
+      class="!w-1/2 !h-2/3"
+    >
+      <MiniAppFeatureCustomField :miniApp="miniApp" />
+    </Dialog>
   </div>
   <div v-else>
-    <template v-if="!isFetching"> Not found... </template>
+    <template v-if="!isFetching">
+      <NodataLarge
+        :label="t('noDataFound')"
+        :icon="UndrawNodata"
+        class="my-24"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import _ from "lodash";
+import _, { min } from "lodash";
 import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppPermissionWrapper from "../MiniAppPermissionWrapper.vue";
+import UndrawNodata from "~/components/icon/UndrawNodata.vue";
+import MiniAppIcon from "../MiniAppIcon.vue";
+import MiniAppFeatureCustomPage from "../MiniAppFeatureCustomPage.vue";
+import MiniAppFeatureCustomField from "../MiniAppFeatureCustomField.vue";
+import MiniAppFeatureScope from "../MiniAppFeatureScope.vue";
 
-defineProps<{
+const props = defineProps<{
   miniApp?: MiniAppDetail;
   isFetching: boolean;
   isAppInstallationInProgress: boolean;
@@ -167,6 +260,10 @@ const emits = defineEmits<{
   (e: "upgradePlan"): void;
 }>();
 
+const isShowApiAccessFeature = ref(false);
+const isShowCustomPageFeature = ref(false);
+const isShowCustomFieldFeature = ref(false);
+
 function handleInstallApp() {
   emits("installApp");
 }
@@ -178,4 +275,20 @@ function handleUninstallApp() {
 function handleOpenSetting() {
   emits("openSetting");
 }
+
+function handleOpenFeatureDialog(feature: string, enabled: boolean) {
+  if (enabled) {
+    switch (feature) {
+      case "miniApi":
+        isShowApiAccessFeature.value = true;
+        break;
+      case "customField":
+        isShowCustomFieldFeature.value = true;
+        break;
+      case "customPage":
+        isShowCustomPageFeature.value = true;
+        break;
+    }
+  }
+}
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/types/miniApp.ts.eta

@@ -1,7 +1,6 @@
 import type {
   MiniAppDetail,
-  MiniappIntegrationForms,
-  MiniappIntegrationPages,
+  MiniappIntegrationCustomFieldFields,
 } from "~/simpleapp/generate/openapi";
 
 export enum MiniAppFrameworkCompatibility {
@@ -10,11 +9,7 @@ export enum MiniAppFrameworkCompatibility {
   "DEPRECATED" = "DEPRECATED",
 }
 
-export type MiniAppPageWithMiniAppCode = MiniappIntegrationPages & {
-  miniAppCode: string;
-};
-
-export type MiniAppFormWithMiniAppCode = MiniappIntegrationForms & {
+export type MiniAppFormWithMiniAppCode = MiniappIntegrationCustomFieldFields & {
   miniAppCode: string;
 };
 
@@ -28,3 +23,8 @@ export type MiniAppPermissionResult = {
   status: boolean;
   reason?: string;
 };
+
+export type MiniAppValidationResp = {
+  valid: boolean;
+  type: string;
+};

package/templates/nuxt/simpleapp/generate/features/miniApp/bridge/services/bridge-resource-accessor.service.ts.eta

@@ -41,6 +41,8 @@ export class MiniAppBridgeResourceAccessor {
 
   protected miniAppCode: string = "";
 
+  protected developerPortalAppId: string = "";
+
   <% for (let i = 0; i < it.modules.length; i++) { %>
     <%
       const { resourceName, pascalName, kebabName, hasMiniAppWhitelistedApi } = getMiniAppInfo(it.modules[i]);
@@ -48,7 +50,7 @@ export class MiniAppBridgeResourceAccessor {
     <% if(hasMiniAppWhitelistedApi) { %>
       get <%= resourceName %>() {
         if (!this.instances.<%= resourceName %>) {
-          this.instances.<%= resourceName %> = new MiniApp<%= pascalName %>BridgeEditableService(this.miniAppCode);
+          this.instances.<%= resourceName %> = new MiniApp<%= pascalName %>BridgeEditableService(this.miniAppCode, this.developerPortalAppId);
         }
         return this.instances.<%= resourceName %>;
       }