@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/dashboard/AppSubAppsCatalog.vue

@@ -0,0 +1,89 @@
+<script setup>
+// Kartu Sub App di Dashboard. Dipasang renderer widget tiap app di
+// dalam kartu widget `subApps`-nya; data & aturan klik sepenuhnya di sini, jadi perubahan aturan
+// status app cukup di satu berkas, bukan di widget tiap app.
+//
+// Beda dari App Launcher: Dashboard menampilkan SEMUA app katalog, termasuk yang tak dilisensikan
+// (redup berlencana "Perlu Lisensi") — di sini katalog berfungsi sebagai etalase.
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useApps } from '@initsolusidigital/worksuite-core/composables/useApps.js'
+import { appUrl } from '@initsolusidigital/worksuite-core/utils/appUrl.js'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+import AppCarousel from '@initsolusidigital/worksuite-ui/AppCarousel.vue'
+
+const { t } = useI18n()
+const { apps, loading, fetchApps, appIcon, appColor, appName, appDesc, isCurrent, appAccess, appStatusLabel } = useApps()
+
+onMounted(() => fetchApps())
+
+// Alamat kartu diturunkan `appUrl()`, sama seperti App Launcher: `apps.url` selalu origin ber-port,
+// jadi memakainya apa adanya melempar pengguna keluar dari origin tunggal saat halaman disajikan
+// di belakang proxy. Yang menentukan boleh-tidaknya dibuka adalah `appAccess().openable`.
+const cardHref = (app) => (appAccess(app).openable ? appUrl(app.slug, app.url) : null) ?? '#'
+
+const STATUS_COLOR = { maintenance: 'amber', degraded: 'red' }
+
+// Satu lencana per kartu. "Segera" didahulukan dari "Perlu Lisensi": app yang belum ada tak bisa
+// dibuka walau dilisensikan. Lencana status tetap tampil bagi yang boleh membukanya (System Owner).
+function badgeOf(app) {
+  const a = appAccess(app)
+  if (a.badge === 'coming_soon') return { color: 'gray', label: t('dashboard.subApps.badgeSoon') }
+  if (!a.entitled) return { color: 'amber', label: t('dashboard.subApps.badgeLocked') }
+  if (a.badge) return { color: STATUS_COLOR[a.badge], label: appStatusLabel(app) }
+  if (isCurrent(app)) return { color: 'green', label: t('dashboard.subApps.badgeCurrent') }
+  return null
+}
+
+function onCardClick(event, app) {
+  if (!appAccess(app).openable) event.preventDefault()
+}
+</script>
+
+<template>
+  <!-- Katalog datang dari `GET /apps` dan `useApps` sengaja fail-soft (gagal muat = daftar kosong).
+       Tanpa dua keadaan ini, jeda maupun kegagalan sama-sama tampil sebagai kotak kosong tanpa satu
+       kata pun, sehingga pembaca menyimpulkan widgetnya rusak. -->
+  <p v-if="loading && !apps.length" class="text-sm text-gray-400 dark:text-gray-500 text-center py-4">{{ t('common.loading') }}</p>
+  <p v-else-if="!apps.length" class="text-sm text-gray-400 dark:text-gray-500 text-center py-4">{{ t('launcher.empty') }}</p>
+  <AppCarousel v-else>
+    <a
+      v-for="app in apps"
+      :key="app.id ?? app.slug"
+      :href="cardHref(app)"
+      target="_blank"
+      :aria-disabled="appAccess(app).openable ? undefined : 'true'"
+      :data-app="app.slug"
+      :data-app-status="appAccess(app).status"
+      :class="[
+        'shrink-0 bg-gray-50 dark:bg-gray-900/40 rounded-xl border border-gray-200 dark:border-gray-700 transition-shadow group w-24 p-3 flex flex-col items-center justify-center gap-2 text-center sm:w-64 sm:p-4 sm:flex-row sm:items-center sm:justify-start sm:gap-3 sm:text-left',
+        appAccess(app).openable ? 'hover:shadow-md' : 'cursor-not-allowed',
+      ]"
+      @click="onCardClick($event, app)"
+    >
+      <div
+        class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+        :class="[appColor(app), !appAccess(app).openable && 'opacity-50 grayscale']"
+      >
+        <component :is="appIcon(app)" class="w-5 h-5" />
+      </div>
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <p
+            class="text-sm font-medium truncate transition-colors"
+            :class="appAccess(app).openable
+              ? 'text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400'
+              : 'text-gray-400 dark:text-gray-500'"
+          >{{ appName(app) }}</p>
+          <span v-if="badgeOf(app)" data-app-badge class="hidden sm:inline-flex shrink-0">
+            <AppBadge :color="badgeOf(app).color">{{ badgeOf(app).label }}</AppBadge>
+          </span>
+        </div>
+        <p
+          class="hidden sm:block text-xs mt-0.5 line-clamp-2"
+          :class="appAccess(app).openable ? 'text-gray-500 dark:text-gray-400' : 'text-gray-400 dark:text-gray-500'"
+        >{{ appDesc(app) }}</p>
+      </div>
+    </a>
+  </AppCarousel>
+</template>