@jumentix/cli-init 0.0.0

package/templates/frontend/src/stores/profile.ts

@@ -0,0 +1,260 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+import { appOperations } from '@/contracts/appOperations';
+import { isNotFoundError } from '@/contracts/errors';
+import { entityTable } from '@/data/canaSchema';
+import { getCanaClient, isCanaOpen } from '@/data/db';
+import { getLocal } from '@/data/localRepository';
+import { drainOutbox, enqueueMutation } from '@/data/outbox';
+import { usersCrudConfig } from '@/features/users/usersCrudConfig';
+import { useAuthStore } from '@/stores/auth';
+import { t } from '@/i18n';
+
+export interface UserEmail {
+  id: string;
+  type: string;
+  email: string;
+  isPrimary?: boolean;
+}
+
+export interface UserDocument {
+  id: string;
+  type: string;
+  countryIssue: string;
+  data: string;
+}
+
+export interface UserPhone {
+  id: string;
+  countryCode: string;
+  localCode: string;
+  number: string;
+  isPrimary?: boolean;
+}
+
+export interface UserRecord {
+  id: string;
+  firstName: string;
+  lastName?: string;
+  avatar?: string;
+  username: string;
+  organization?: string;
+  roles?: string[];
+  emails: UserEmail[];
+  documents: UserDocument[];
+  phones: UserPhone[];
+}
+
+export interface ScalarProfileInput {
+  firstName?: string;
+  lastName?: string;
+  avatar?: string;
+  username?: string;
+  organization?: string;
+}
+
+/**
+ * Profile store — every action maps 1:1 to an operationId declared in the
+ * bundled OAS (requirement 136). All of them carry the bearer token and take
+ * the user id from the auth session (decoded from the login JWT).
+ */
+export const useProfileStore = defineStore('profile', () => {
+  const record = ref<UserRecord | null>(null);
+  const loading = ref(false);
+  let inflight: Promise<void> | null = null;
+
+  const session = () => {
+    const auth = useAuthStore();
+    if (!auth.userId) {
+      throw new Error('No authenticated session.');
+    }
+    return { userId: auth.userId, headers: { Authorization: auth.token } };
+  };
+
+  const asUserRecord = (row: Record<string, unknown>): UserRecord => {
+    const next = { ...row };
+    delete next._sync;
+    return next as unknown as UserRecord;
+  };
+
+  const persistLocal = async (user: UserRecord): Promise<void> => {
+    if (!isCanaOpen()) return;
+    await getCanaClient().table(entityTable('User').storeName).put({
+      ...JSON.parse(JSON.stringify(user)),
+      _sync: 'synced'
+    });
+  };
+
+  /** GET /users/{id} (operationId getOneById). Concurrent callers share one flight. */
+  const load = async (): Promise<void> => {
+    if (inflight) return inflight;
+    const { userId, headers } = session();
+    loading.value = true;
+    inflight = (async () => {
+      try {
+        if (isCanaOpen()) {
+          const local = await getLocal<Record<string, unknown>>('User', userId);
+          if (Array.isArray(local?.emails) && local.emails.length > 0) {
+            record.value = asUserRecord(local);
+            return;
+          }
+        }
+        const remote = await getSharedApiClient().request<UserRecord>({
+          operationId: appOperations().profile.get,
+          pathParams: { id: userId },
+          headers
+        });
+        record.value = remote;
+        await persistLocal(remote);
+      } finally {
+        loading.value = false;
+        inflight = null;
+      }
+    })();
+    return inflight;
+  };
+
+  /**
+   * PUT /users/{id} (operationId update). The backend validates the full User
+   * on update (username non-empty, emails minItems 1, …), so this sends the
+   * current record merged with the edited scalars — never a partial body.
+   */
+  const saveScalars = async (input: ScalarProfileInput): Promise<void> => {
+    if (!record.value) {
+      throw new Error('Profile not loaded.');
+    }
+    const { userId, headers } = session();
+    const body = { ...record.value, ...input, id: userId };
+    if (isCanaOpen()) {
+      await enqueueMutation({
+        entity: 'User',
+        kind: 'update',
+        key: userId,
+        payload: body,
+        operations: usersCrudConfig.operations
+      });
+      drainOutbox().catch(() => undefined);
+      const local = await getLocal<Record<string, unknown>>('User', userId);
+      if (local) record.value = asUserRecord(local);
+      return;
+    }
+    await getSharedApiClient().request<UserRecord>({
+      operationId: appOperations().profile.update,
+      pathParams: { id: userId },
+      body,
+      headers
+    });
+    await load();
+  };
+
+  /** PUT /users/{id}/updatePassword — OAS RequestUpdatePassword: min 8. */
+  const changePassword = async (password: string): Promise<void> => {
+    if (password.length < 8) {
+      throw new Error(t('validation.minLength', { field: 'password', min: 8 }));
+    }
+    const { userId, headers } = session();
+    await getSharedApiClient().request<UserRecord>({
+      operationId: appOperations().profile.updatePassword,
+      pathParams: { id: userId },
+      body: { password },
+      headers
+    });
+  };
+
+  /**
+   * Runs a sub-resource mutation and reloads. A 404 from a delete means the
+   * record is already gone (double click or stale list) — that is not an
+   * error for the user: the list reloads and the caller gets 'already-removed'.
+   */
+  const reloadAfter = async (
+    operationId: string,
+    extraPathParams: Record<string, string>,
+    body?: unknown
+  ): Promise<'updated' | 'already-removed'> => {
+    const { userId, headers } = session();
+    try {
+      await getSharedApiClient().request({
+        operationId,
+        pathParams: { id: userId, ...extraPathParams },
+        body,
+        headers
+      });
+      const remote = await getSharedApiClient().request<UserRecord>({
+        operationId: appOperations().profile.get,
+        pathParams: { id: userId },
+        headers
+      });
+      record.value = remote;
+      await persistLocal(remote);
+      return 'updated';
+    } catch (error) {
+      if (isNotFoundError(error)) {
+        await load();
+        return 'already-removed';
+      }
+      throw error;
+    }
+  };
+
+  const addEmail = (input: { email: string; type: string; isPrimary?: boolean }) => {
+    return reloadAfter('createEmail', {}, input);
+  };
+  const updateEmail = (
+    emailId: string,
+    input: { email?: string; type?: string; isPrimary?: boolean }
+  ) => reloadAfter('updateEmail', { emailId }, { id: emailId, ...input });
+  const removeEmail = (emailId: string) => reloadAfter('deleteEmail', { emailId });
+
+  const addDocument = (input: { type: string; countryIssue: string; data: string }) => {
+    return reloadAfter('createDocument', {}, input);
+  };
+  const updateDocument = (
+    documentId: string,
+    input: { type?: string; countryIssue?: string; data?: string }
+  ) => reloadAfter('updateDocument', { documentId }, { id: documentId, ...input });
+  const removeDocument = (documentId: string) => reloadAfter('deleteDocument', { documentId });
+
+  const addPhone = (input: {
+    countryCode: string;
+    localCode: string;
+    number: string;
+    isPrimary?: boolean;
+  }) => reloadAfter('createPhone', {}, input);
+  const updatePhone = (
+    phoneId: string,
+    input: { countryCode?: string; localCode?: string; number?: string; isPrimary?: boolean }
+  ) => reloadAfter('updatePhone', { phoneId }, { id: phoneId, ...input });
+  const removePhone = (phoneId: string) => reloadAfter('deletePhone', { phoneId });
+
+  /**
+   * Forgets the loaded record (JUM-781): a login as another account inside the
+   * same SPA session must not keep the previous user's roles in memory, or the
+   * sidebar filters by the wrong scopes until a full reload.
+   */
+  const reset = (): void => {
+    record.value = null;
+    loading.value = false;
+    inflight = null;
+  };
+
+  // roles of the signed-in user: `record.value?.roles` after `load()` (JUM-772).
+  return {
+    record,
+    loading,
+    reset,
+    load,
+    saveScalars,
+    changePassword,
+    addEmail,
+    updateEmail,
+    removeEmail,
+    addDocument,
+    updateDocument,
+    removeDocument,
+    addPhone,
+    updatePhone,
+    removePhone
+  };
+});

package/templates/frontend/src/stores/sidebar.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const visible = ref<boolean | undefined>(undefined);
+  const unfoldable = ref(false);
+
+  const toggleVisible = (value?: boolean) => {
+    visible.value = value !== undefined ? value : !visible.value;
+  };
+
+  const toggleUnfoldable = () => {
+    unfoldable.value = !unfoldable.value;
+  };
+
+  return {
+    visible, unfoldable, toggleVisible, toggleUnfoldable
+  };
+});

package/templates/frontend/src/stores/tasks.ts

@@ -0,0 +1,114 @@
+import { computed, ref } from 'vue';
+import { defineStore } from 'pinia';
+
+const STORAGE_KEY = 'jumentix-frontend-tasks';
+
+export interface TaskSnapshot {
+  open: string[];
+  active: string | null;
+}
+
+const readSnapshot = (): TaskSnapshot => {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return { open: [], active: null };
+    const parsed = JSON.parse(raw) as TaskSnapshot;
+    if (!Array.isArray(parsed.open)) return { open: [], active: null };
+    return {
+      open: parsed.open.filter((id) => typeof id === 'string'),
+      active: typeof parsed.active === 'string' ? parsed.active : null
+    };
+  } catch {
+    return { open: [], active: null };
+  }
+};
+
+const writeSnapshot = (snapshot: TaskSnapshot): void => {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+  } catch {
+    // private mode — in-memory list still works for the session
+  }
+};
+
+export const useTaskStore = defineStore('tasks', () => {
+  const initial = readSnapshot();
+  const open = ref<string[]>([...initial.open]);
+  const active = ref<string | null>(
+    initial.active && initial.open.includes(initial.active)
+      ? initial.active
+      : (initial.open[0] ?? null)
+  );
+
+  const persist = (): void => {
+    writeSnapshot({ open: open.value, active: active.value });
+  };
+
+  const openModule = (moduleId: string): void => {
+    if (!open.value.includes(moduleId)) {
+      open.value = [...open.value, moduleId];
+    }
+    active.value = moduleId;
+    persist();
+  };
+
+  const activate = (moduleId: string): void => {
+    if (!open.value.includes(moduleId)) return;
+    active.value = moduleId;
+    persist();
+  };
+
+  const close = (moduleId: string): void => {
+    const index = open.value.indexOf(moduleId);
+    if (index < 0) return;
+    const next = open.value.filter((id) => id !== moduleId);
+    open.value = next;
+    if (active.value === moduleId) {
+      active.value = next[index - 1] ?? next[0] ?? null;
+    }
+    persist();
+  };
+
+  const hydrate = (): void => {
+    const snapshot = readSnapshot();
+    open.value = snapshot.open;
+    active.value = snapshot.active && snapshot.open.includes(snapshot.active)
+      ? snapshot.active
+      : (snapshot.open[0] ?? null);
+  };
+
+  const reset = (): void => {
+    open.value = [];
+    active.value = null;
+    try {
+      sessionStorage.removeItem(STORAGE_KEY);
+    } catch {
+      // ignore
+    }
+  };
+
+  return {
+    open,
+    active,
+    isOpen: computed(() => open.value.length > 0),
+    openModule,
+    activate,
+    close,
+    hydrate,
+    reset
+  };
+});
+
+/** How many task buttons stay visible before the overflow menu. */
+export const visibleTaskSlice = (
+  ids: string[],
+  maxVisible: number
+): { shown: string[]; overflow: string[] } => {
+  if (maxVisible < 1 || ids.length <= maxVisible) {
+    return { shown: ids, overflow: [] };
+  }
+  return {
+    shown: ids.slice(0, maxVisible),
+    overflow: ids.slice(maxVisible)
+  };
+};

package/templates/frontend/src/stores/theme.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export type ColorMode = 'light' | 'dark' | 'auto'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref<ColorMode>('light');
+
+  const toggleTheme = (mode: ColorMode) => {
+    theme.value = mode;
+  };
+
+  return { theme, toggleTheme };
+});

package/templates/frontend/src/styles/breakpoints.scss

@@ -0,0 +1,6 @@
+$shell-bp-sm: 576px;
+$shell-bp-md: 768px;
+$shell-bp-lg: 992px;
+$shell-bp-xl: 1200px;
+$shell-bp-xxl: 1400px;
+$shell-touch: 44px;

package/templates/frontend/src/styles/style.scss

@@ -0,0 +1,85 @@
+@use "@coreui/coreui/scss/coreui" as * with (
+  $enable-deprecation-messages: false
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "./breakpoints" as shell;
+
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px);
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.app-taskbar {
+  min-height: shell.$shell-touch;
+  border-top: 1px solid var(--cui-border-color);
+  padding: 0.25rem 0.75rem;
+  background: var(--cui-body-bg);
+}
+
+.app-taskbar__row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25rem;
+  overflow-x: auto;
+}
+
+.app-taskbar__touch,
+.app-taskbar__btn {
+  min-height: shell.$shell-touch;
+  min-width: shell.$shell-touch;
+}
+
+.app-taskbar__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.app-taskbar__item[data-active='true'] .app-taskbar__btn {
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 var(--cui-primary);
+}
+
+.app-taskbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.app-taskbar__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.module-tabs {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+@media (max-width: 767.98px) {
+  .app-taskbar__label {
+    display: none;
+  }
+}

package/templates/frontend/src/views/BootErrorView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { CAlert, CContainer } from '@coreui/vue';
+
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+    <CContainer style="max-width: 32rem">
+      <CAlert color="danger" role="alert">
+        <h1 class="h4">{{ t('boot.unavailableTitle') }}</h1>
+        <p class="mb-0">{{ t('boot.unavailableBody') }}</p>
+      </CAlert>
+    </CContainer>
+  </div>
+</template>

package/templates/frontend/src/views/SyncProgressView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { CAlert, CContainer, CSpinner } from '@coreui/vue';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { formatApiError } from '@/contracts/errors';
+import { runSessionSync, syncProgress } from '@/data/sync';
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+const router = useRouter();
+const errorMessage = ref('');
+
+const percent = computed(() => {
+  if (syncProgress.expected <= 0) return 0;
+  return Math.min(100, Math.round((syncProgress.done / syncProgress.expected) * 100));
+});
+
+onMounted(async () => {
+  errorMessage.value = '';
+  try {
+    await runSessionSync();
+    await router.replace('/dashboard');
+  } catch (error) {
+    errorMessage.value = formatApiError(error);
+  }
+});
+</script>
+
+<template>
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+    <CContainer class="text-center" style="max-width: 32rem">
+      <CSpinner class="mb-3" />
+      <h1 class="h4">{{ t('sync.title') }}</h1>
+      <p class="text-body-secondary">{{ t('sync.subtitle') }}</p>
+      <div
+        role="progressbar"
+        :aria-valuemin="0"
+        :aria-valuemax="100"
+        :aria-valuenow="percent"
+        :aria-label="t('sync.progressLabel')"
+        class="progress mb-2"
+      >
+        <div class="progress-bar" :style="{ width: `${percent}%` }" />
+      </div>
+      <p>
+        {{ t('sync.entity', { entity: syncProgress.entity || '—' }) }}
+        · {{ syncProgress.done }} / {{ syncProgress.expected }}
+      </p>
+      <CAlert v-if="errorMessage" color="danger" role="alert">
+        {{ errorMessage }}
+      </CAlert>
+    </CContainer>
+  </div>
+</template>

package/templates/frontend/tsconfig.json

@@ -0,0 +1,59 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@": [
+        "src"
+      ],
+      "@jumentix/sdk-rest-client": [
+        "../../packages/sdk-rest-client/src/index.ts"
+      ],
+      "@jumentix/cana": [
+        "../../packages/cana/src/index.ts"
+      ],
+      "@jumentix/cana-vue": [
+        "../../packages/cana-vue/src/index.ts"
+      ],
+      "@jumentix/persistence-contracts": [
+        "../../packages/persistence-contracts/src/index.ts"
+      ],
+      "@jumentix/shared-contracts": [
+        "src/contracts/sharedContractsBrowserShim.ts"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "vite.config.mjs"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "template"
+  ]
+}