@kennofizet/apphub-frontend 0.1.0

package/src/modules/app-store/components/AppHubAppStoreCard.vue

@@ -0,0 +1,88 @@
+<template>
+  <span class="apphub-store__icon">{{ app.icon }}</span>
+  <div class="apphub-store__meta">
+    <div class="apphub-store__title-row">
+      <strong>{{ app.name }}</strong>
+      <span
+        v-if="statusLabel"
+        class="apphub-store__badge"
+        :class="statusBadgeClass"
+      >
+        {{ statusLabel }}
+      </span>
+    </div>
+    <p v-if="app.version" class="apphub-store__version">
+      v{{ app.version }}
+      <span v-if="installedVersion" class="apphub-store__version-installed">
+        · {{ labels.app_store_installed_version }} v{{ installedVersion }}
+      </span>
+    </p>
+    <p>{{ app.description }}</p>
+  </div>
+  <button
+    v-if="!installed && canInstall"
+    type="button"
+    class="apphub-store__btn"
+    @click="emit('install', app)"
+  >
+    {{ labels.app_store_install }}
+  </button>
+  <span
+    v-else-if="!canInstall"
+    class="apphub-store__unavailable"
+    :title="labels.app_store_unavailable"
+  >
+    {{ labels.app_store_unavailable }}
+  </span>
+  <div v-else class="apphub-store__installed-row">
+    <span class="apphub-store__installed" :title="labels.app_store_installed">✓</span>
+    <button
+      v-if="updateAvailable"
+      type="button"
+      class="apphub-store__btn apphub-store__btn--primary"
+      @click="emit('update', app)"
+    >
+      {{ labels.app_store_update }}
+    </button>
+    <button
+      type="button"
+      class="apphub-store__btn apphub-store__btn--secondary"
+      @click="emit('uninstall', app)"
+    >
+      {{ labels.app_store_uninstall }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { isSemverGreaterThan } from '../../../utils/semver.js'
+
+const props = defineProps({
+  app: { type: Object, required: true },
+  labels: { type: Object, required: true },
+  installed: { type: Boolean, default: false },
+  installedVersion: { type: String, default: null },
+  canInstall: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['install', 'uninstall', 'update'])
+
+const updateAvailable = computed(() => {
+  if (!props.installed || !props.app?.version) return false
+  if (!props.installedVersion) return false
+  return isSemverGreaterThan(props.app.version, props.installedVersion)
+})
+
+const statusLabel = computed(() => {
+  if (props.app.status === 'draft') return props.labels.app_store_status_draft
+  if (props.app.status === 'disabled') return props.labels.app_store_status_offline
+  return ''
+})
+
+const statusBadgeClass = computed(() => {
+  if (props.app.status === 'draft') return 'apphub-store__badge--draft'
+  if (props.app.status === 'disabled') return 'apphub-store__badge--offline'
+  return ''
+})
+</script>

package/src/modules/app-store/components/AppHubAppStoreSettingsPanel.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="apphub-store-settings">
+    <section class="apphub-store-settings__section">
+      <h3 class="apphub-store-settings__heading">{{ labels.user_title }}</h3>
+      <dl class="apphub-store-settings__dl">
+        <div class="apphub-store-settings__row">
+          <dt>{{ labels.user_id }}</dt>
+          <dd>{{ userDisplay.id }}</dd>
+        </div>
+        <div class="apphub-store-settings__row">
+          <dt>{{ labels.user_name }}</dt>
+          <dd>{{ userDisplay.name }}</dd>
+        </div>
+        <div class="apphub-store-settings__row">
+          <dt>{{ labels.auth_status }}</dt>
+          <dd>
+            <span class="apphub-store-settings__badge" :class="authBadgeClass">{{ authBadgeLabel }}</span>
+          </dd>
+        </div>
+        <div v-if="zone.state.isManager" class="apphub-store-settings__row">
+          <dt>{{ labels.manager }}</dt>
+          <dd>{{ labels.manager_yes }}</dd>
+        </div>
+      </dl>
+    </section>
+
+    <section class="apphub-store-settings__section">
+      <h3 class="apphub-store-settings__heading">{{ labels.zone_title }}</h3>
+      <p class="apphub-store-settings__hint">{{ labels.zone_hint }}</p>
+
+      <p v-if="zone.state.loading" class="apphub-store-settings__msg">{{ labels.zone_loading }}</p>
+      <p v-else-if="zone.state.error === 'no_core_api'" class="apphub-store-settings__msg">
+        {{ labels.zone_no_core }}
+      </p>
+      <p v-else-if="zone.state.error" class="apphub-store-settings__msg">{{ labels.zone_error }}</p>
+      <p v-else-if="!zone.state.zones.length" class="apphub-store-settings__msg">{{ labels.zone_empty }}</p>
+
+      <template v-else>
+        <label v-if="zone.state.zones.length > 1" class="apphub-store-settings__check">
+          <input
+            type="checkbox"
+            :checked="zone.state.viewAllZones"
+            @change="onViewAllChange"
+          />
+          {{ labels.zone_all }}
+        </label>
+
+        <div
+          v-if="zone.state.zones.length > 1 && !zone.state.viewAllZones"
+          class="apphub-store-settings__field"
+        >
+          <label class="apphub-store-settings__label" for="apphub-store-zone-select">{{ labels.zone_select }}</label>
+          <select
+            id="apphub-store-zone-select"
+            class="apphub-store-settings__select"
+            :value="zone.state.selectedZoneId ?? ''"
+            @change="onZoneSelect"
+          >
+            <option v-for="z in zone.state.zones" :key="z.id" :value="z.id">
+              {{ z.name || labels.zone_name(z.id) }}
+            </option>
+          </select>
+        </div>
+
+        <div v-else-if="zone.state.zones.length === 1" class="apphub-store-settings__single">
+          <span class="apphub-store-settings__zone-chip">
+            {{ zone.state.zones[0].name || labels.zone_name(zone.state.zones[0].id) }}
+          </span>
+        </div>
+
+        <ul class="apphub-store-settings__zone-list">
+          <li
+            v-for="z in zone.state.zones"
+            :key="z.id"
+            class="apphub-store-settings__zone-item"
+            :class="{ 'apphub-store-settings__zone-item--active': isZoneActive(z.id) }"
+          >
+            <span class="apphub-store-settings__zone-id">#{{ z.id }}</span>
+            <span>{{ z.name || labels.zone_name(z.id) }}</span>
+          </li>
+        </ul>
+
+        <p v-if="zone.state.timezone" class="apphub-store-settings__meta">
+          {{ labels.timezone }}: {{ zone.state.timezone }}
+        </p>
+      </template>
+
+      <button type="button" class="apphub-store-settings__refresh" @click="onRefresh">
+        {{ labels.refresh }}
+      </button>
+    </section>
+
+    <AppHubDevReviewPanel
+      :root-app="rootApp"
+      :dev-apps="devApps"
+      @refreshed="onDevRefreshed"
+    />
+
+    <section v-if="devApps.length" class="apphub-store-settings__section">
+      <h3 class="apphub-store-settings__heading">{{ labels.dev_title }}</h3>
+      <p class="apphub-store-settings__hint">{{ labels.dev_hint }}</p>
+      <ul class="apphub-store-settings__dev-list">
+        <li v-for="app in devApps" :key="app.slug" class="apphub-store-settings__dev-item">
+          <span>{{ app.name }} ({{ app.status }})</span>
+          <button
+            v-if="app.status !== 'disabled'"
+            type="button"
+            class="apphub-store-settings__dev-btn"
+            @click="disableApp(app.slug)"
+          >
+            {{ labels.dev_disable }}
+          </button>
+          <button
+            v-else
+            type="button"
+            class="apphub-store-settings__dev-btn"
+            @click="setAppStatus(app.slug, 'active')"
+          >
+            {{ labels.dev_enable }}
+          </button>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref } from 'vue'
+import { getHostApiForApp } from '../../../composables/useAppHubHostApi.js'
+import { useAppHubZoneContext } from '../../../composables/useAppHubZoneContext.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import AppHubDevReviewPanel from './AppHubDevReviewPanel.vue'
+
+const props = defineProps({
+  rootApp: { type: Object, default: null },
+})
+
+const emit = defineEmits(['refreshed'])
+
+const devApps = ref([])
+const zone = useAppHubZoneContext()
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+
+const labels = computed(() => ({
+  user_title: t('app_store_settings_user_title', lang.value),
+  user_id: t('app_store_settings_user_id', lang.value),
+  user_name: t('app_store_settings_user_name', lang.value),
+  auth_status: t('app_store_settings_auth_status', lang.value),
+  auth_ok: t('app_store_settings_auth_ok', lang.value),
+  auth_missing: t('app_store_settings_auth_missing', lang.value),
+  auth_fail: t('app_store_settings_auth_fail', lang.value),
+  manager: t('app_store_settings_manager', lang.value),
+  manager_yes: t('app_store_settings_manager_yes', lang.value),
+  zone_title: t('app_store_settings_zone_title', lang.value),
+  zone_hint: t('app_store_settings_zone_hint', lang.value),
+  zone_loading: t('app_store_settings_zone_loading', lang.value),
+  zone_no_core: t('app_store_settings_zone_no_core', lang.value),
+  zone_error: t('app_store_settings_zone_error', lang.value),
+  zone_empty: t('app_store_settings_zone_empty', lang.value),
+  zone_select: t('app_store_settings_zone_select', lang.value),
+  zone_all: t('app_store_settings_zone_all', lang.value),
+  zone_name: (id) => t('app_store_settings_zone_name', lang.value, { id }),
+  timezone: t('app_store_settings_timezone', lang.value),
+  refresh: t('app_store_settings_refresh', lang.value),
+  dev_title: t('app_store_settings_dev_title', lang.value),
+  dev_hint: t('app_store_settings_dev_hint', lang.value),
+  dev_disable: t('app_store_settings_dev_disable', lang.value),
+  dev_enable: t('app_store_settings_dev_enable', lang.value),
+}))
+
+const userDisplay = computed(() => ({
+  id: zone.state.user?.id ?? '—',
+  name: zone.state.user?.name ?? '—',
+}))
+
+const authBadgeClass = computed(() => {
+  if (!moduleOptions?.hasToken) return 'apphub-store-settings__badge--warn'
+  if (zone.state.authOk) return 'apphub-store-settings__badge--ok'
+  return 'apphub-store-settings__badge--warn'
+})
+
+const authBadgeLabel = computed(() => {
+  if (!moduleOptions?.hasToken) return labels.value.auth_missing
+  if (zone.state.authOk) return labels.value.auth_ok
+  return labels.value.auth_fail
+})
+
+function isZoneActive(id) {
+  if (zone.state.viewAllZones) return true
+  return zone.state.selectedZoneId === id
+}
+
+function onZoneSelect(event) {
+  const id = Number(event.target.value)
+  if (Number.isFinite(id)) zone.selectZone(id)
+}
+
+function onViewAllChange(event) {
+  zone.setViewAllZones(event.target.checked)
+}
+
+async function loadDevApps() {
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.bootstrap || !api?.devApps) {
+    devApps.value = []
+    return
+  }
+  try {
+    const boot = await api.bootstrap()
+    const isDev = boot?.data?.data?.is_dev_user === true
+    if (!isDev) {
+      devApps.value = []
+      return
+    }
+    const res = await api.devApps()
+    devApps.value = res?.data?.data ?? []
+  } catch {
+    devApps.value = []
+  }
+}
+
+async function disableApp(slug) {
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.devDisableApp) return
+  try {
+    await api.devDisableApp(slug)
+    await loadDevApps()
+    emit('refreshed')
+  } catch {
+    /* ignore */
+  }
+}
+
+async function setAppStatus(slug, status) {
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.devSetAppStatus) return
+  try {
+    await api.devSetAppStatus(slug, status)
+    await loadDevApps()
+    emit('refreshed')
+  } catch {
+    /* ignore */
+  }
+}
+
+async function onDevRefreshed() {
+  await loadDevApps()
+  emit('refreshed')
+}
+
+async function onRefresh() {
+  await zone.refresh()
+  await loadDevApps()
+  emit('refreshed')
+}
+
+onMounted(() => {
+  if (!zone.state.zones.length && !zone.state.loading) {
+    onRefresh()
+  } else {
+    loadDevApps()
+  }
+})
+</script>

package/src/modules/app-store/components/AppHubAppVersionHistory.vue

@@ -0,0 +1,77 @@
+<template>
+  <div v-if="open" class="apphub-version-history">
+    <p class="apphub-version-history__head">{{ labels.title }}</p>
+    <p v-if="loading" class="apphub-version-history__msg">{{ labels.loading }}</p>
+    <p v-else-if="error" class="apphub-version-history__msg apphub-version-history__msg--error">{{ error }}</p>
+    <p v-else-if="!rows.length" class="apphub-version-history__msg">{{ labels.empty }}</p>
+    <ul v-else class="apphub-version-history__list">
+      <li
+        v-for="row in rows"
+        :key="row.version"
+        class="apphub-version-history__item"
+        :class="{ 'apphub-version-history__item--current': row.is_current }"
+      >
+        <div class="apphub-version-history__row">
+          <strong>v{{ row.version }}</strong>
+          <span v-if="row.is_current" class="apphub-version-history__badge">{{ labels.current }}</span>
+        </div>
+        <p v-if="row.uploaded_at" class="apphub-version-history__meta">{{ formatDate(row.uploaded_at) }}</p>
+        <p v-if="row.bundle_hash" class="apphub-version-history__hash">{{ shortHash(row.bundle_hash) }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getHostApiForApp } from '../../../composables/useAppHubHostApi.js'
+import { parseApiError } from '../../notifications/utils/parseApiError.js'
+
+const props = defineProps({
+  slug: { type: String, required: true },
+  rootApp: { type: Object, default: null },
+  open: { type: Boolean, default: false },
+  labels: { type: Object, required: true },
+})
+
+const loading = ref(false)
+const error = ref('')
+const rows = ref([])
+
+function shortHash(hash) {
+  if (!hash || typeof hash !== 'string') return ''
+  return hash.length > 16 ? `${hash.slice(0, 12)}…` : hash
+}
+
+function formatDate(value) {
+  try {
+    return new Date(value).toLocaleString()
+  } catch {
+    return value
+  }
+}
+
+async function load() {
+  if (!props.open || !props.slug) return
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.appVersions) {
+    error.value = props.labels.no_api
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+  rows.value = []
+
+  try {
+    const res = await api.appVersions(props.slug)
+    rows.value = res?.data?.data?.versions ?? []
+  } catch (err) {
+    error.value = parseApiError(err, props.labels.load_error)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => [props.open, props.slug], () => load(), { immediate: true })
+</script>

package/src/modules/app-store/components/AppHubDevReviewPanel.vue

@@ -0,0 +1,206 @@
+<template>
+  <section v-if="visible" class="apphub-dev-review">
+    <h3 class="apphub-dev-review__title">{{ labels.title }}</h3>
+    <p class="apphub-dev-review__hint">{{ labels.hint }}</p>
+
+    <p v-if="loading" class="apphub-dev-review__msg">{{ labels.loading }}</p>
+    <p v-else-if="!draftApps.length" class="apphub-dev-review__msg">{{ labels.empty }}</p>
+
+    <ul v-else class="apphub-dev-review__list">
+      <li v-for="app in draftApps" :key="app.slug" class="apphub-dev-review__item">
+        <div class="apphub-dev-review__item-head">
+          <span class="apphub-dev-review__icon" aria-hidden="true">{{ app.icon || '📦' }}</span>
+          <div class="apphub-dev-review__meta">
+            <strong>{{ app.name }}</strong>
+            <span class="apphub-dev-review__slug">{{ app.slug }}</span>
+            <span v-if="app.version" class="apphub-dev-review__version">v{{ app.version }}</span>
+            <span class="apphub-dev-review__badge">{{ runtimeLabel(app) }}</span>
+          </div>
+          <div class="apphub-dev-review__actions">
+            <button
+              type="button"
+              class="apphub-dev-review__btn"
+              :disabled="historySlug === app.slug"
+              @click="toggleHistory(app.slug)"
+            >
+              {{ historySlug === app.slug ? labels.history_loading : labels.history_btn }}
+            </button>
+            <button
+              v-if="app.runtime_type === 'hosted'"
+              type="button"
+              class="apphub-dev-review__btn"
+              :disabled="inspectingSlug === app.slug"
+              @click="toggleInspect(app.slug)"
+            >
+              {{ inspectingSlug === app.slug ? labels.files_loading : labels.files_btn }}
+            </button>
+            <button
+              type="button"
+              class="apphub-dev-review__btn apphub-dev-review__btn--primary"
+              :disabled="actingSlug === app.slug"
+              @click="approve(app.slug)"
+            >
+              {{ actingSlug === app.slug ? labels.approving : labels.approve }}
+            </button>
+          </div>
+        </div>
+
+        <dl v-if="app.bundle_hash" class="apphub-dev-review__dl">
+          <div class="apphub-dev-review__row">
+            <dt>{{ labels.hash }}</dt>
+            <dd class="apphub-dev-review__mono">{{ shortHash(app.bundle_hash) }}</dd>
+          </div>
+          <div v-if="app.bundle_file_count != null" class="apphub-dev-review__row">
+            <dt>{{ labels.file_count }}</dt>
+            <dd>{{ app.bundle_file_count }}</dd>
+          </div>
+        </dl>
+
+        <AppHubAppVersionHistory
+          :slug="app.slug"
+          :root-app="rootApp"
+          :open="historySlug === app.slug"
+          :labels="historyLabels"
+        />
+
+        <div v-if="inspect[app.slug]" class="apphub-dev-review__files">
+          <p class="apphub-dev-review__files-head">
+            {{ labels.files_title }}
+            <span v-if="inspect[app.slug].files_truncated"> ({{ labels.files_truncated }})</span>
+          </p>
+          <ul class="apphub-dev-review__file-list">
+            <li v-for="file in inspect[app.slug].files" :key="file" class="apphub-dev-review__file">
+              {{ file }}
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, reactive, ref } from 'vue'
+import { getHostApiForApp } from '../../../composables/useAppHubHostApi.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import AppHubAppVersionHistory from './AppHubAppVersionHistory.vue'
+
+const props = defineProps({
+  rootApp: { type: Object, default: null },
+  devApps: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['refreshed'])
+
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+const visible = ref(false)
+const loading = ref(false)
+const actingSlug = ref('')
+const inspectingSlug = ref('')
+const historySlug = ref('')
+const inspect = reactive({})
+
+const labels = computed(() => ({
+  title: t('dev_review_title', lang.value),
+  hint: t('dev_review_hint', lang.value),
+  loading: t('dev_review_loading', lang.value),
+  empty: t('dev_review_empty', lang.value),
+  hash: t('dev_review_hash', lang.value),
+  file_count: t('dev_review_file_count', lang.value),
+  files_btn: t('dev_review_files_btn', lang.value),
+  files_loading: t('dev_review_files_loading', lang.value),
+  files_title: t('dev_review_files_title', lang.value),
+  files_truncated: t('dev_review_files_truncated', lang.value),
+  approve: t('dev_review_approve', lang.value),
+  approving: t('dev_review_approving', lang.value),
+  hosted: t('runner_hosted_badge', lang.value),
+  iframe: t('dev_review_iframe', lang.value),
+  history_btn: t('dev_review_history_btn', lang.value),
+  history_loading: t('dev_review_history_loading', lang.value),
+}))
+
+const historyLabels = computed(() => ({
+  title: t('dev_review_history_title', lang.value),
+  loading: t('dev_review_history_loading', lang.value),
+  empty: t('dev_review_history_empty', lang.value),
+  current: t('dev_review_history_current', lang.value),
+  no_api: t('app_store_no_api', lang.value),
+  load_error: t('dev_review_history_error', lang.value),
+}))
+
+const draftApps = computed(() =>
+  (props.devApps ?? []).filter((app) => app?.status === 'draft'),
+)
+
+function runtimeLabel(app) {
+  return app?.runtime_type === 'hosted' ? labels.value.hosted : labels.value.iframe
+}
+
+function shortHash(hash) {
+  if (!hash || typeof hash !== 'string') return '—'
+  return hash.length > 16 ? `${hash.slice(0, 12)}…` : hash
+}
+
+async function checkDevAccess() {
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.bootstrap) {
+    visible.value = false
+    return
+  }
+
+  loading.value = true
+  try {
+    const boot = await api.bootstrap()
+    visible.value = boot?.data?.data?.is_dev_user === true
+  } catch {
+    visible.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+function toggleHistory(slug) {
+  historySlug.value = historySlug.value === slug ? '' : slug
+}
+
+async function toggleInspect(slug) {
+  if (inspect[slug]) {
+    delete inspect[slug]
+    inspectingSlug.value = ''
+    return
+  }
+
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.devInspectBundle) return
+
+  inspectingSlug.value = slug
+  try {
+    const res = await api.devInspectBundle(slug)
+    inspect[slug] = res?.data?.data ?? null
+  } catch {
+    inspect[slug] = { files: [], file_count: 0 }
+  } finally {
+    inspectingSlug.value = ''
+  }
+}
+
+async function approve(slug) {
+  const api = getHostApiForApp(props.rootApp)
+  if (!api?.devSetAppStatus) return
+
+  actingSlug.value = slug
+  try {
+    await api.devSetAppStatus(slug, 'active')
+    delete inspect[slug]
+    emit('refreshed')
+  } catch {
+    /* ignore */
+  } finally {
+    actingSlug.value = ''
+  }
+}
+
+onMounted(checkDevAccess)
+</script>