@antelopejs/dms-saas 0.3.1 → 0.3.2

package/frontend-vue/app/components/SupportThreadHistory.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-interface Props {
-  messages: SupportPageView<SupportMessageView>;
-  events: SupportPageView<SupportTicketEventView>;
-  assigneeLabels?: Record<string, string>;
-}
-
-interface HistoryEmits {
-  attachment: [resourceKey: string];
-  messagesPage: [page: number];
-  eventsPage: [page: number];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  assigneeLabels: () => ({}),
-});
-const emit = defineEmits<HistoryEmits>();
-const { t } = useI18n();
-
-const chronologicalMessages = computed(() =>
-  [...props.messages.results].reverse(),
-);
-const messagesPage = computed(
-  () => Math.floor(props.messages.offset / props.messages.limit) + 1,
-);
-const eventsPage = computed(
-  () => Math.floor(props.events.offset / props.events.limit) + 1,
-);
-
-function formatDate(value: string): string {
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(new Date(value));
-}
-
-function eventValue(
-  event: SupportTicketEventView,
-  value: string | null,
-): string {
-  if (!value) return t("saas.support.platform.unassigned");
-  if (event.type === "status_changed")
-    return t(`saas.support.status.${value}`);
-  return props.assigneeLabels[value] ?? value;
-}
-</script>
-
-<template>
-  <section class="flex flex-col gap-4">
-    <div class="flex items-center justify-between gap-3">
-      <h3 class="font-medium">{{ $t("saas.support.conversation") }}</h3>
-      <span v-if="messagesPage === 1" class="text-muted text-xs">
-        {{ $t("saas.support.pagination.latest_page") }}
-      </span>
-    </div>
-    <article
-      v-for="message in chronologicalMessages"
-      :key="message._id"
-      class="rounded-lg p-4"
-      :class="
-        message.authorType === 'platform' ? 'bg-primary/10' : 'bg-elevated'
-      "
-    >
-      <div class="text-muted mb-2 flex justify-between text-xs">
-        <span>{{ $t(`saas.support.author.${message.authorType}`) }}</span>
-        <time>{{ formatDate(message.createdAt) }}</time>
-      </div>
-      <p class="whitespace-pre-wrap text-sm">{{ message.body }}</p>
-      <div
-        v-if="message.attachments.length"
-        class="mt-3 flex flex-wrap gap-2"
-      >
-        <UButton
-          v-for="(attachment, index) in message.attachments"
-          :key="attachment"
-          size="xs"
-          color="neutral"
-          variant="outline"
-          icon="i-ph-paperclip"
-          @click="emit('attachment', attachment)"
-        >
-          {{ $t("saas.support.attachment", { number: index + 1 }) }}
-        </UButton>
-      </div>
-    </article>
-    <div
-      v-if="messages.total > messages.limit"
-      class="flex flex-col items-center gap-1"
-    >
-      <span class="text-muted text-xs">
-        {{ $t("saas.support.pagination.older_messages") }}
-      </span>
-      <UPagination
-        :page="messagesPage"
-        :total="messages.total"
-        :items-per-page="messages.limit"
-        size="sm"
-        @update:page="emit('messagesPage', $event)"
-      />
-    </div>
-  </section>
-
-  <USeparator />
-  <section class="flex flex-col gap-3">
-    <h3 class="font-medium">{{ $t("saas.support.history.title") }}</h3>
-    <p v-if="!events.results.length" class="text-muted text-sm">
-      {{ $t("saas.support.history.empty") }}
-    </p>
-    <div
-      v-for="event in events.results"
-      :key="event._id"
-      class="bg-elevated rounded-lg p-3 text-sm"
-    >
-      <p>
-        {{
-          $t(`saas.support.history.${event.type}`, {
-            actor: event.actorName,
-            previous: eventValue(event, event.previousValue),
-            next: eventValue(event, event.newValue),
-          })
-        }}
-      </p>
-      <time class="text-muted text-xs">
-        {{ formatDate(event.createdAt) }}
-      </time>
-    </div>
-    <UPagination
-      v-if="events.total > events.limit"
-      :page="eventsPage"
-      :total="events.total"
-      :items-per-page="events.limit"
-      size="sm"
-      class="self-center"
-      @update:page="emit('eventsPage', $event)"
-    />
-  </section>
-</template>

package/frontend-vue/app/components/TenantSupport.vue

@@ -1,415 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
-import { sendSupportRequest } from "../composables/useSupportRequest";
-import SupportAttachmentUpload from "./SupportAttachmentUpload.vue";
-import SupportThreadHistory from "./SupportThreadHistory.vue";
-
-const { $authFetch } = useAuthFetch();
-const { t } = useI18n();
-const toast = useToast();
-const { resolveApiError } = useApiErrorMessage();
-
-const tickets = ref<SupportTicketView[]>([]);
-const selected = ref<SupportThreadView | null>(null);
-const config = ref<SupportConfigView | null>(null);
-const isLoading = ref(true);
-const isSubmitting = ref(false);
-const isReplyUploading = ref(false);
-const isDraftUploading = ref(false);
-const isCreateOpen = ref(false);
-const replyBody = ref("");
-const replyAttachments = ref<string[]>([]);
-const PAGE_SIZE = 20;
-const listPage = ref(1);
-const messagesPage = ref(1);
-const eventsPage = ref(1);
-const ticketTotal = ref(0);
-let selectionRequest = 0;
-let messagesRequest = 0;
-let eventsRequest = 0;
-let listRequest = 0;
-
-const draft = reactive<SupportTicketDraft>({
-  subject: "",
-  category: "question",
-  priority: "normal",
-  body: "",
-  attachments: [],
-});
-
-const categoryItems = [
-  "question",
-  "incident",
-  "billing",
-  "feature_request",
-].map((value) => ({ value, label: t(`saas.support.category.${value}`) }));
-const priorityItems = computed(() =>
-  (config.value?.policy.priorities ?? []).map((value) => ({
-    value,
-    label: t(`saas.support.priority.${value}`),
-  })),
-);
-const attachmentConstraints = computed(() => ({
-  maxSize: config.value?.maxAttachmentSize,
-  allowedMimetypes: config.value?.allowedMimetypes,
-}));
-
-function formatDate(value: string): string {
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(new Date(value));
-}
-
-function resetDraft(): void {
-  draft.subject = "";
-  draft.category = "question";
-  draft.priority = config.value?.policy.priorities[0] ?? "normal";
-  draft.body = "";
-  draft.attachments = [];
-}
-
-function pageQuery(page: number, sortKey: string): string {
-  return new URLSearchParams({
-    offset: String((page - 1) * PAGE_SIZE),
-    limit: String(PAGE_SIZE),
-    sortKey,
-    sortDirection: "desc",
-  }).toString();
-}
-
-async function load(): Promise<void> {
-  const request = ++listRequest;
-  isLoading.value = true;
-  try {
-    const [loadedConfig, loadedTickets] = await Promise.all([
-      $authFetch<SupportConfigView>("/api/saas/support/config"),
-      $authFetch<SupportPageView<SupportTicketView>>(
-        `/api/saas/tenant/tables/support-tickets/list?${pageQuery(listPage.value, "lastMessageAt")}`,
-      ),
-    ]);
-    if (request !== listRequest) return;
-    config.value = loadedConfig;
-    tickets.value = loadedTickets.results;
-    ticketTotal.value = loadedTickets.total;
-    if (!loadedConfig.policy.priorities.includes(draft.priority)) resetDraft();
-  } catch (error) {
-    showError(error, "saas.support.error.load");
-  } finally {
-    if (request === listRequest) isLoading.value = false;
-  }
-}
-
-async function selectTicket(ticketId: string): Promise<void> {
-  messagesPage.value = 1;
-  eventsPage.value = 1;
-  const request = ++selectionRequest;
-  const messageRequest = ++messagesRequest;
-  const eventRequest = ++eventsRequest;
-  const baseUrl = `/api/saas/support/${ticketId}`;
-  try {
-    const [detail, messages, events] = await Promise.all([
-      $authFetch<SupportTicketDetailView>(baseUrl),
-      $authFetch<SupportPageView<SupportMessageView>>(
-        `${baseUrl}/messages/list?${pageQuery(messagesPage.value, "createdAt")}`,
-      ),
-      $authFetch<SupportPageView<SupportTicketEventView>>(
-        `${baseUrl}/events/list?${pageQuery(eventsPage.value, "createdAt")}`,
-      ),
-    ]);
-    if (
-      request === selectionRequest &&
-      messageRequest === messagesRequest &&
-      eventRequest === eventsRequest
-    ) {
-      selected.value = { ticket: detail.ticket, messages, events };
-    }
-  } catch (error) {
-    showError(error, "saas.support.error.load");
-  }
-}
-
-async function createTicket(): Promise<void> {
-  if (!draft.subject.trim() || !draft.body.trim()) return;
-  isSubmitting.value = true;
-  try {
-    const ticket = await sendSupportRequest(
-      `${config.value?.uploadPath}:create`,
-      draft,
-      (body) =>
-        $authFetch<SupportTicketView>("/api/saas/support", {
-          method: "POST",
-          body,
-        }),
-    );
-    isCreateOpen.value = false;
-    resetDraft();
-    listPage.value = 1;
-    await load();
-    await selectTicket(ticket._id);
-    toast.add({
-      title: t("saas.support.tenant.created"),
-      color: "success",
-    });
-  } catch (error) {
-    showError(error, "saas.support.error.create");
-  } finally {
-    isSubmitting.value = false;
-  }
-}
-
-async function sendReply(): Promise<void> {
-  if (!selected.value || !replyBody.value.trim()) return;
-  const ticketId = selected.value.ticket._id;
-  isSubmitting.value = true;
-  try {
-    await sendSupportRequest(
-      `${config.value?.uploadPath}:${ticketId}:reply`,
-      { body: replyBody.value, attachments: replyAttachments.value },
-      (body) =>
-        $authFetch(`/api/saas/support/${ticketId}/messages`, {
-          method: "POST",
-          body,
-        }),
-    );
-    replyBody.value = "";
-    replyAttachments.value = [];
-    if (selected.value?.ticket._id === ticketId) await selectTicket(ticketId);
-    await load();
-  } catch (error) {
-    showError(error, "saas.support.error.reply");
-  } finally {
-    isSubmitting.value = false;
-  }
-}
-
-async function openAttachment(
-  ticketId: string,
-  resourceKey: string,
-): Promise<void> {
-  try {
-    const query = new URLSearchParams({ resourceKey });
-    const file = await $authFetch<SupportAttachmentView>(
-      `/api/saas/support/${ticketId}/attachment?${query}`,
-    );
-    window.open(file.url, "_blank", "noopener,noreferrer");
-  } catch (error) {
-    showError(error, "saas.support.error.attachment");
-  }
-}
-
-function showError(error: unknown, fallback: string): void {
-  toast.add({
-    title: resolveApiError(error, fallback),
-    color: "error",
-    icon: "i-ph-warning-circle",
-  });
-}
-
-onMounted(load);
-
-function changeListPage(page: number): void {
-  listPage.value = page;
-  void load();
-}
-
-function changeThreadPage(kind: "messages" | "events", page: number): void {
-  if (!selected.value) return;
-  const pages = { messages: messagesPage, events: eventsPage };
-  pages[kind].value = page;
-  void loadThreadPage(kind, selected.value.ticket._id);
-}
-
-async function loadThreadPage(
-  kind: "messages" | "events",
-  ticketId: string,
-): Promise<void> {
-  const requests = { messages: messagesRequest, events: eventsRequest };
-  const request = ++requests[kind];
-  if (kind === "messages") messagesRequest = request;
-  else eventsRequest = request;
-  try {
-    const page = await $authFetch<
-      SupportPageView<SupportMessageView | SupportTicketEventView>
-    >(
-      `/api/saas/support/${ticketId}/${kind}/list?${pageQuery(kind === "messages" ? messagesPage.value : eventsPage.value, "createdAt")}`,
-    );
-    const currentRequest =
-      kind === "messages" ? messagesRequest : eventsRequest;
-    if (request !== currentRequest || selected.value?.ticket._id !== ticketId)
-      return;
-    if (kind === "messages") {
-      selected.value.messages = page as SupportPageView<SupportMessageView>;
-    } else {
-      selected.value.events = page as SupportPageView<SupportTicketEventView>;
-    }
-  } catch (error) {
-    showError(error, "saas.support.error.load");
-  }
-}
-</script>
-
-<template>
-  <div class="grid gap-6 xl:grid-cols-[22rem_1fr]">
-    <div class="flex flex-col gap-4">
-      <UAlert
-        v-if="config"
-        color="primary"
-        variant="subtle"
-        icon="i-ph-clock-countdown"
-        :title="$t(`saas.support.sla.${config.policy.level}.title`)"
-        :description="$t(`saas.support.sla.${config.policy.level}.description`)"
-      />
-      <UButton icon="i-ph-plus" block @click="isCreateOpen = true">
-        {{ $t("saas.support.tenant.new") }}
-      </UButton>
-      <USkeleton v-if="isLoading" class="h-32" />
-      <UCard v-else-if="!tickets.length">
-        <p class="text-muted text-center text-sm">
-          {{ $t("saas.support.tenant.empty") }}
-        </p>
-      </UCard>
-      <template v-else>
-        <button
-          v-for="ticket in tickets"
-          :key="ticket._id"
-          class="border-default hover:bg-elevated rounded-lg border p-4 text-left"
-          :class="{
-            'ring-primary ring-2': selected?.ticket._id === ticket._id,
-          }"
-          @click="selectTicket(ticket._id)"
-        >
-          <div class="flex items-start justify-between gap-2">
-            <p class="font-medium">{{ ticket.subject }}</p>
-            <UBadge size="sm" variant="subtle">
-              {{ $t(`saas.support.status.${ticket.status}`) }}
-            </UBadge>
-          </div>
-          <p class="text-muted mt-2 text-xs">
-            {{ formatDate(ticket.lastMessageAt) }}
-          </p>
-        </button>
-        <UPagination
-          v-if="ticketTotal > PAGE_SIZE"
-          :page="listPage"
-          :total="ticketTotal"
-          :items-per-page="PAGE_SIZE"
-          size="sm"
-          class="self-center"
-          @update:page="changeListPage"
-        />
-      </template>
-    </div>
-
-    <UCard v-if="selected">
-      <template #header>
-        <div class="flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <h2 class="text-lg font-semibold">
-              {{ selected.ticket.subject }}
-            </h2>
-            <p class="text-muted text-sm">
-              {{ $t(`saas.support.category.${selected.ticket.category}`) }}
-              ·
-              {{ $t(`saas.support.priority.${selected.ticket.priority}`) }}
-            </p>
-          </div>
-          <UBadge>
-            {{ $t(`saas.support.status.${selected.ticket.status}`) }}
-          </UBadge>
-        </div>
-      </template>
-      <div class="flex flex-col gap-4">
-        <SupportThreadHistory
-          :messages="selected.messages"
-          :events="selected.events"
-          @attachment="openAttachment(selected.ticket._id, $event)"
-          @messages-page="changeThreadPage('messages', $event)"
-          @events-page="changeThreadPage('events', $event)"
-        />
-        <USeparator />
-        <UTextarea
-          v-model="replyBody"
-          :placeholder="$t('saas.support.reply_placeholder')"
-          :rows="4"
-          class="w-full"
-        />
-        <SupportAttachmentUpload
-          v-if="config"
-          v-model="replyAttachments"
-          multiple
-          :constraints="attachmentConstraints"
-          :disabled="isSubmitting"
-          @busy="isReplyUploading = $event"
-        />
-        <div class="flex justify-end">
-          <UButton
-            :loading="isSubmitting"
-            :disabled="isReplyUploading"
-            @click="sendReply"
-          >
-            {{ $t("saas.support.send") }}
-          </UButton>
-        </div>
-      </div>
-    </UCard>
-    <UCard v-else class="min-h-64">
-      <div class="text-muted flex h-full items-center justify-center text-sm">
-        {{ $t("saas.support.tenant.select") }}
-      </div>
-    </UCard>
-  </div>
-
-  <UModal v-model:open="isCreateOpen" :title="$t('saas.support.tenant.new')">
-    <template #body>
-      <div class="flex flex-col gap-4">
-        <UFormField :label="$t('saas.support.subject')" required>
-          <UInput v-model="draft.subject" class="w-full" />
-        </UFormField>
-        <div class="grid gap-4 sm:grid-cols-2">
-          <UFormField :label="$t('saas.support.category.label')" required>
-            <USelect
-              v-model="draft.category"
-              :items="categoryItems"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField :label="$t('saas.support.priority.label')" required>
-            <USelect
-              v-model="draft.priority"
-              :items="priorityItems"
-              class="w-full"
-            />
-          </UFormField>
-        </div>
-        <UFormField :label="$t('saas.support.message')" required>
-          <UTextarea v-model="draft.body" :rows="5" class="w-full" />
-        </UFormField>
-        <UFormField :label="$t('saas.support.attachments')">
-          <SupportAttachmentUpload
-            v-if="config"
-            v-model="draft.attachments"
-            multiple
-            :constraints="attachmentConstraints"
-            :disabled="isSubmitting"
-            @busy="isDraftUploading = $event"
-          />
-        </UFormField>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex w-full justify-end gap-2">
-        <UButton color="neutral" variant="ghost" @click="isCreateOpen = false">
-          {{ $t("common.cancel") }}
-        </UButton>
-        <UButton
-          :loading="isSubmitting"
-          :disabled="isDraftUploading"
-          @click="createTicket"
-        >
-          {{ $t("saas.support.tenant.create") }}
-        </UButton>
-      </div>
-    </template>
-  </UModal>
-</template>

package/frontend-vue/app/composables/useSupportRequest.ts

@@ -1,74 +0,0 @@
-interface PendingSupportRequest {
-  requestId: string;
-  fingerprint: string;
-}
-
-interface SupportRequestIdentity {
-  requestId: string;
-}
-
-interface SupportTransportError {
-  statusCode?: number;
-  status?: number;
-  data?: unknown;
-}
-
-type SupportRequestBody<T> = T & SupportRequestIdentity;
-type SupportSender<T, R> = (body: SupportRequestBody<T>) => Promise<R>;
-const TERMINAL_STATUSES = new Set([400, 409, 422]);
-const STORAGE_PREFIX = "saas:support-request:";
-
-async function fingerprint(payload: string): Promise<string> {
-  const bytes = await crypto.subtle.digest(
-    "SHA-256",
-    new TextEncoder().encode(payload),
-  );
-  return Array.from(new Uint8Array(bytes), (byte) =>
-    byte.toString(16).padStart(2, "0"),
-  ).join("");
-}
-
-function isTerminal(error: unknown): boolean {
-  const result = error as SupportTransportError | null;
-  return (
-    TERMINAL_STATUSES.has(result?.statusCode ?? result?.status ?? 0) &&
-    typeof result?.data === "string" &&
-    result.data.startsWith("saas.errors.support.")
-  );
-}
-
-function clearPending(key: string, value: string): void {
-  if (sessionStorage.getItem(key) === value) sessionStorage.removeItem(key);
-}
-
-/** Retains request identity across ambiguous transport and page reloads, without storing message content. */
-export async function sendSupportRequest<T extends object, R>(
-  scope: string,
-  body: T,
-  send: SupportSender<T, R>,
-): Promise<R> {
-  const payload = JSON.stringify(body);
-  const digest = await fingerprint(payload);
-  const key = `${STORAGE_PREFIX}${scope}`;
-  const saved = sessionStorage.getItem(key);
-  const pending: PendingSupportRequest = saved
-    ? JSON.parse(saved)
-    : { requestId: crypto.randomUUID(), fingerprint: digest };
-  if (pending.fingerprint !== digest)
-    throw new Error(
-      "Retry the pending support request unchanged before submitting different content.",
-    );
-  const value = JSON.stringify(pending);
-  sessionStorage.setItem(key, value);
-  try {
-    const result = await send({
-      ...JSON.parse(payload),
-      requestId: pending.requestId,
-    } as SupportRequestBody<T>);
-    clearPending(key, value);
-    return result;
-  } catch (error) {
-    if (isTerminal(error)) clearPending(key, value);
-    throw error;
-  }
-}