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

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

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <template v-if="$miniAppStore.isFetchingInstalledMiniApps">
+      <i class="pi pi-spinner animate-spin mx-3.5 mt-2 text-gray-300" />
+    </template>
+    <template v-else>
+      <template
+        v-for="miniApp in top3MenuItems"
+        :key="'app-miniApps-page-' + miniApp._id"
+      >
+        <div class="relative group">
+          <div
+            v-if="miniApp.pages.length > 1"
+            class="absolute -top-1 right-0.5 pointer-events-none"
+          >
+            <i class="pi pi-chevron-down text-[0.5rem] text-gray-500" />
+          </div>
+
+          <MainmenuButton
+            :id="'mainmenu-app-miniApps-item-' + miniApp._id"
+            icon=""
+            :to="
+              miniApp.pages[0]?.code === 'mini-app-setting'
+                ? $miniAppStore.getMiniAppSettingPageUrl(miniApp.code)
+                : $miniAppStore.getMiniAppPageUrl(
+                    miniApp.code,
+                    miniApp.pages[0]?.code ?? '',
+                  )
+            "
+            :title="miniApp.name"
+          >
+            <template #icon>
+              <img
+                :src="miniApp.logo"
+                class="size-6 rounded-md object-contain"
+              />
+            </template>
+            <template #title>
+              <p class="line-clamp-1">
+                {{ miniApp.name }}
+              </p>
+            </template>
+          </MainmenuButton>
+
+          <div
+            v-if="miniApp.pages.length > 1"
+            class="absolute z-50 top-0 left-14 w-0 group-hover:w-[18.1rem] text-sm transition-all duration-100 ease-out overflow-hidden"
+          >
+            <div class="flex flex-wrap gap-2 w-[18.1rem]">
+              <div
+                class="flex flex-wrap gap-x-1 gap-y-3 bg-gray-50 border-2 border-gray-100 px-3 py-5 rounded-lg shadow-lg"
+              >
+                <template v-for="page in miniApp.pages" :key="page._id">
+                  <div
+                    class="shrink-0 flex flex-col items-center gap-2 w-[3.8rem] cursor-pointer text-gray-500 hover:text-cyan-500"
+                    @click="
+                      $miniAppStore.navigateToMiniAppPage(
+                        miniApp.code,
+                        page.code,
+                      )
+                    "
+                  >
+                    <MiniAppPageIcon
+                      :iconType="page.iconType"
+                      :icon="page.icon ?? ''"
+                    />
+                    <p
+                      class="text-[0.5rem] line-clamp-2 leading-none text-center"
+                    >
+                      {{ page.title }}
+                    </p>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="$miniAppStore.isShowMiniAppMoreMenuButton">
+        <MainmenuButton
+          :id="'mainmenu-app-miniApps-page-more'"
+          :to="getDocumentUrl('miniapp')"
+          :title="t('miniAppLang.myMiniApp')"
+          v-tooltip.right="t('miniAppLang.myMiniApp')"
+        >
+          <template #icon>
+            <IconPuzzle class="size-7" />
+          </template>
+        </MainmenuButton>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconPuzzle from "~/components/icon/IconPuzzle.vue";
+import MiniAppPageIcon from "./MiniAppPageIcon.vue";
+
+const { $miniAppStore } = useNuxtApp();
+const displayItemCount = 3;
+const items = computed(() => $miniAppStore.getMenuItems());
+const top3MenuItems = computed(() => items.value.slice(0, displayItemCount));
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <template v-if="icon === '' || !['class', 'imageSource'].includes(iconType)">
+    <i :class="'pi pi-file'" />
+  </template>
+  <template v-else>
+    <template v-if="iconType === 'class'">
+      <i :class="icon || 'pi pi-file'" />
+    </template>
+    <template v-else-if="iconType === 'imageSource'">
+      <img :src="icon" class="size-3.5 pointer-events-none object-contain" />
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  iconType: "class" | "imageSource" | string;
+  icon: string;
+}>();
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="app-mini-app-iframe-container">
+    <iframe
+      v-if="iframeSource !== ''"
+      :ref="(el) => (iframeRef = el as HTMLIFrameElement)"
+      :src="
+        generateIframeSource(iframeSource, {
+          miniAppInstallationId: miniAppInstallationId,
+        })
+      "
+      :title="pageInfo.title || t('miniAppLang.content')"
+      sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-modals"
+      referrerpolicy="origin"
+      loading="lazy"
+      @error="handleError"
+      class="w-full h-full pb-7"
+      @load="onIframeLoad"
+    />
+    <div v-if="hasError" class="error-message">
+      {{ t("miniAppLang.ERR_FAILED_LOAD_CONTENT") }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MiniappIntegrationPages } from "~/simpleapp/generate/openapi";
+
+const props = defineProps<{
+  pageInfo: MiniappIntegrationPages;
+  miniAppCode: string;
+  miniAppInstallationId: string;
+}>();
+
+const _xOrg = getPathPara("xorg", "");
+const hasError = ref(false);
+
+const handleError = () => {
+  hasError.value = true;
+};
+
+type Option = {
+  [key: string]: any;
+};
+
+function generateIframeSource(template: string, options: Option = {}) {
+  return template.replace(/{(\w+)}/g, (_, key) => {
+    return options[key] ?? `{${key}}`;
+  });
+}
+
+const { iframeRef, onIframeLoad } = useMiniAppBridge(
+  props.miniAppInstallationId,
+  props.pageInfo,
+  props.miniAppCode,
+);
+
+const iframeSource = computed(() => {
+  return isDevMode()
+    ? props.pageInfo.sources.development
+    : props.pageInfo.sources.production;
+});
+</script>
+
+<style scoped>
+.app-mini-app-iframe-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.app-mini-app-iframe-container .error-message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #666;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+  <MiniAppRestrictedWarning
+    v-if="!actionAccess.isAllow"
+    :reason="actionAccess.reason"
+    class="flex items-center justify-center mt-10"
+  />
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  actionAccess: {
+    isAllow: boolean;
+    reason: string;
+  };
+}>();
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex items-center gap-4">
+    <span
+      class="px-3 py-1 text-sm font-semibold rounded bg-yellow-100 text-yellow-800"
+    >
+      {{ t(`miniAppLang.${reason}`) }}
+    </span>
+
+    <ButtonPrimary
+      v-if="reason === 'packageTypeRestricted'"
+      :label="t('miniAppLang.upgradePlan')"
+      @click="handleUpgradePlan"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  reason: string;
+}>();
+
+function handleUpgradePlan() {
+  window.open("https://simitgroup.com/simtraineco/#simtrain-price", "_blank");
+}
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-4 h-screen p-6">
+    <title>{{ miniAppTitle }}</title>
+    <div class="flex justify-between items-center">
+      <h1 class="text-xl font-semibold text-gray-800">
+        {{ miniAppTitle }}
+      </h1>
+
+      <div v-if="$miniAppStore.isHasMiniAppFeature">
+        <slot v-if="$miniAppStore.isCanUpdateSetting" name="action" />
+      </div>
+    </div>
+
+    <MiniAppPermissionWrapper
+      :actionAccess="$miniAppStore.getActionAccess('updateSetting')"
+    >
+      <slot />
+    </MiniAppPermissionWrapper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MiniAppPermissionWrapper from './MiniAppPermissionWrapper.vue';
+
+defineProps<{
+  isFetching: boolean;
+  miniAppTitle: string;
+}>();
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <LoadingLine :loading="isFetching" />
+  <SimpleAppJsonSchemaForm
+    v-if="!_.isEmpty(schema)"
+    :schema="schema"
+    :data="data"
+    #default="o"
+  >
+    <MiniAppSettingLayout :isFetching="isFetching" :miniAppTitle="miniAppTitle">
+      <template #action>
+        <Button class="btn-primary" @click="o.validate(validateCallBack)">
+          {{ t('miniAppLang.saveSetting') }}
+        </Button>
+      </template>
+
+      <template #default>
+        <div class="space-y-4" v-if="!_.isEmpty(schema)">
+          <p
+            v-if="miniApp?.integration?.settings?.note"
+            class="text-sm text-gray-600 whitespace-pre-line"
+          >
+            {{
+              t('miniAppLang.miniAppSettingNote', {
+                miniAppNote: miniApp.integration.settings.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>
+
+<script setup lang="ts" generic="T">
+import _ from 'lodash';
+import MiniAppSettingLayout from './MiniAppSettingLayout.vue';
+import CustomFieldFormField from '../../../customField/components/CustomFieldFormField.vue';
+
+const props = defineProps<{
+  miniAppCode?: string;
+}>();
+
+const _miniAppCode = props.miniAppCode ?? getPathPara('miniAppCode');
+
+const {
+  isFetching,
+  miniApp,
+  miniAppTitle,
+  schema,
+  settingSchema,
+  data,
+  loadMiniAppDetail,
+  validateCallBack
+} = useMiniAppSetting(_miniAppCode);
+
+onMounted(async () => {
+  await loadMiniAppDetail();
+});
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <LoadingLine :loading="$miniAppStore.isFetchingInstalledMiniApps" />
+
+  <MiniAppPermissionWrapper
+    v-if="!$miniAppStore.isFetchingInstalledMiniApps"
+    :actionAccess="$miniAppStore.getActionAccess('plan')"
+  >
+    <MiniAppPermissionWrapper
+      :actionAccess="{
+        isAllow: $miniAppStore.checkIsMiniAppInstalled(miniAppCode),
+        reason: 'notYetInstall'
+      }"
+    >
+      <MiniAppPermissionWrapper
+        v-if="pageCode !== ''"
+        :actionAccess="{
+          isAllow: $miniAppStore.checkIsAllowAccessMiniAppPage(
+            miniAppCode,
+            pageCode
+          ),
+          reason: 'insufficientAccessPermission'
+        }"
+      >
+        <slot />
+      </MiniAppPermissionWrapper>
+
+      <slot v-else />
+    </MiniAppPermissionWrapper>
+  </MiniAppPermissionWrapper>
+</template>
+
+<script setup lang="ts">
+import MiniAppPermissionWrapper from './MiniAppPermissionWrapper.vue';
+
+defineProps<{
+  miniAppCode: string;
+  pageCode: string;
+}>();
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="relative rounded-lg h-50 p-4 border-2 flex flex-col items-center transition-all hover:border-primary-500"
+    :class="{
+      'opacity-40 cursor-not-allowed ': item.status === 'upcoming',
+      'cursor-pointer': item.status !== 'upcoming',
+    }"
+    @click="handleMiniAppClick(item)"
+  >
+    <div class="absolute top-2 right-2 flex space-x-1">
+      <MiniAppIntegrationItemBadge :item="item" />
+    </div>
+
+    <div class="text-lg font-semibold text-center">
+      {{ item.name }}
+    </div>
+
+    <div class="p-4">
+      <img :src="item.logo" class="size-16 object-contain" />
+    </div>
+
+    <div class="text-sm text-gray-600 text-center line-clamp-2">
+      {{ item.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MiniappStatusEnum } from "~/enums/enums.generate";
+import { Miniapp } from "~/simpleapp/generate/openapi";
+import MiniAppIntegrationItemBadge from "./MiniAppIntegrationItemBadge.vue";
+
+defineProps<{
+  item: Miniapp;
+}>();
+
+const emits = defineEmits<{
+  (event: "miniAppClick", item: Miniapp): void;
+}>();
+
+function handleMiniAppClick(item: Miniapp) {
+  if (item.status === MiniappStatusEnum.UPCOMING) return;
+
+  if (item._id) {
+    emits("miniAppClick", item);
+  }
+}
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <span
+    class="text-white text-xs px-2 font-bold py-0.5 rounded-md shadow uppercase"
+    :class="{
+      'bg-emerald-500': badgeType === 'free',
+      'bg-yellow-400': badgeType === 'comingSoon',
+    }"
+  >
+    {{ t(badgeType) }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { Miniapp } from "~/simpleapp/generate/openapi";
+
+const props = defineProps<{
+  item: Miniapp;
+}>();
+
+const badgeType = computed(() => {
+  if (props.item.status === "published" && props.item.pricing === 0) {
+    return "free";
+  }
+
+  if (props.item.status === "upcoming") {
+    return "comingSoon";
+  }
+
+  return "";
+});
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6"
+  >
+    <MiniAppIntegrationItem
+      v-if="items && items.length > 0"
+      v-for="item in items"
+      :key="item._id"
+      :item="item"
+      @miniAppClick="handleMiniAppClick"
+    />
+    <div
+      v-else
+      class="flex justify-center items-center bg-gray-50 rounded-lg p-4 h-48 col-span-full"
+    >
+      <NodataLarge :label="t('noDataFound')" :icon="UndrawNodata" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import UndrawNodata from '~/components/icon/UndrawNodata.vue';
+import { Miniapp } from '~/simpleapp/generate/openapi';
+import MiniAppIntegrationItem from './MiniAppIntegrationItem.vue';
+
+defineProps<{ items: Miniapp[] | undefined }>();
+
+const emits = defineEmits<{
+  (event: 'miniAppClick', item: Miniapp): void;
+}>();
+
+function handleMiniAppClick(item: Miniapp) {
+  emits('miniAppClick', item);
+}
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <title>{{ miniApp?.name }} - {{ t('miniAppLang.miniApp') }}</title>
+  <LoadingLine :loading="isFetching" />
+
+  <div
+    v-if="miniApp && !_.isEmpty(miniApp)"
+    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" />
+
+      <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>
+          </div>
+          <span>|</span>
+          <div>v {{ miniApp.version }}</div>
+        </div>
+        <p class="text-gray-600">{{ miniApp.intro.description }}</p>
+      </div>
+    </div>
+
+    <div class="space-y-6">
+      <template v-if="$miniAppStore.isFetchingInstalledMiniApps">
+        <div class="flex items-center h-10">
+          <i class="pi pi-spinner animate-spin" />
+        </div>
+      </template>
+      <MiniAppPermissionWrapper
+        v-else
+        :actionAccess="$miniAppStore.getActionAccess('plan')"
+      >
+        <div class="flex space-x-2">
+          <template v-if="$miniAppStore.checkIsMiniAppInstalled(miniApp.code)">
+            <!-- Installed -->
+            <MiniAppPermissionWrapper
+              :actionAccess="$miniAppStore.getActionAccess('uninstall')"
+            >
+              <ButtonDefault
+                :label="t('miniAppLang.uninstallApp')"
+                :loading="isAppInstallationInProgress"
+                :disabled="isAppInstallationInProgress"
+                @click="handleUninstallApp"
+              />
+            </MiniAppPermissionWrapper>
+
+            <MiniAppPermissionWrapper
+              v-if="
+                miniApp.integration.settings &&
+                !_.isEmpty(miniApp.integration.settings)
+              "
+              :actionAccess="$miniAppStore.getActionAccess('updateSetting')"
+            >
+              <ButtonSecondary
+                :label="t('miniAppLang.openSetting')"
+                :disabled="isAppInstallationInProgress"
+                icon="pi pi-cog"
+                @click="handleOpenSetting"
+              />
+            </MiniAppPermissionWrapper>
+          </template>
+          <template v-else>
+            <!-- Not yet install -->
+            <MiniAppPermissionWrapper
+              :actionAccess="$miniAppStore.getActionAccess('install')"
+            >
+              <ButtonPrimary
+                :label="t('miniAppLang.installApp')"
+                :loading="isAppInstallationInProgress"
+                :disabled="isAppInstallationInProgress"
+                @click="handleInstallApp"
+              />
+            </MiniAppPermissionWrapper>
+          </template>
+        </div>
+      </MiniAppPermissionWrapper>
+
+      <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">
+          <Galleria
+            :value="miniApp.intro.previewImages"
+            :numVisible="5"
+            containerStyle="max-width: 640px"
+            :showThumbnails="false"
+            :showIndicators="true"
+          >
+            <template #item="slotProps">
+              <img
+                :src="slotProps.item"
+                :alt="miniApp.name"
+                style="width: 100%; display: block"
+              />
+            </template>
+          </Galleria>
+        </div>
+      </div>
+
+      <div>
+        <h2 class="text-xl font-semibold mb-2">Key Features:</h2>
+        <div class="mt-6 space-y-2 text-gray-700">
+          <div
+            v-for="feature in miniApp.intro.features"
+            :key="feature.title"
+            class="flex space-x-2"
+          >
+            <div>✅</div>
+            <div>
+              <div>
+                <span class="font-semibold">{{ feature.title }}</span> -
+                {{ feature.description }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <template v-if="!isFetching"> Not found... </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { MiniAppDetail } from '~/simpleapp/generate/openapi';
+import MiniAppPermissionWrapper from '../MiniAppPermissionWrapper.vue';
+
+defineProps<{
+  miniApp?: MiniAppDetail;
+  isFetching: boolean;
+  isAppInstallationInProgress: boolean;
+}>();
+
+const emits = defineEmits<{
+  (e: 'installApp'): void;
+  (e: 'uninstallApp'): void;
+  (e: 'openSetting'): void;
+  (e: 'upgradePlan'): void;
+}>();
+
+function handleInstallApp() {
+  emits('installApp');
+}
+
+function handleUninstallApp() {
+  emits('uninstallApp');
+}
+
+function handleOpenSetting() {
+  emits('openSetting');
+}
+</script>

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

@@ -0,0 +1,25 @@
+import type {
+  MiniAppDetail,
+  MiniappIntegrationForms,
+  MiniappIntegrationPages,
+} from "~/simpleapp/generate/openapi";
+
+export enum MiniAppFrameworkCompatibility {
+  "COMPATIBLE" = "COMPATIBLE",
+  "TO_BE_DEPRECATED" = "TO_BE_DEPRECATED", // Still compatible, but will be deprecated in the future.
+  "DEPRECATED" = "DEPRECATED",
+}
+
+export type MiniAppPageWithMiniAppCode = MiniappIntegrationPages & {
+  miniAppCode: string;
+};
+
+export type MiniAppFormWithMiniAppCode = MiniappIntegrationForms & {
+  miniAppCode: string;
+};
+
+export type CategorizedMiniApp = {
+  installedMiniApps: MiniAppDetail[];
+  upcomingMiniApps: MiniAppDetail[];
+  availableMiniApps: MiniAppDetail[];
+};