@antelopejs/dms-saas 0.3.1 → 0.3.3

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

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-
-interface AttachmentConstraints {
-  maxSize?: number;
-  allowedMimetypes?: string[];
-}
-interface UploadProps {
-  modelValue: string[];
-  multiple?: boolean;
-  constraints?: AttachmentConstraints;
-  disabled?: boolean;
-}
-interface SupportPresign {
-  resourceKey: string;
-  uploadUrl: string;
-  headers: Record<string, string>;
-}
-const props = defineProps<UploadProps>();
-const emit = defineEmits<{
-  "update:modelValue": [string[]];
-  busy: [boolean];
-}>();
-const { $authFetch } = useAuthFetch();
-const { uploadWithProgress } = useUploadWithProgress();
-const { t } = useI18n();
-const selected = ref<File | File[] | null>(null);
-const names = ref(new Map<string, string>());
-const isUploading = ref(false);
-const progress = ref(0);
-const currentName = ref("");
-const error = ref("");
-const accept = computed(() => props.constraints?.allowedMimetypes?.join(","));
-
-function validate(file: File): boolean {
-  const { maxSize, allowedMimetypes } = props.constraints ?? {};
-  if (maxSize !== undefined && file.size > maxSize) {
-    error.value = t("dms.form.file.rejected_size", {
-      name: file.name,
-      size: `${maxSize} B`,
-    });
-    return false;
-  }
-  if (
-    allowedMimetypes?.length &&
-    !allowedMimetypes.some((mime) =>
-      mime.endsWith("/*")
-        ? file.type.startsWith(mime.slice(0, -1))
-        : mime === file.type,
-    )
-  ) {
-    error.value = t("dms.form.file.rejected_type", { name: file.name });
-    return false;
-  }
-  return true;
-}
-
-async function upload(file: File): Promise<void> {
-  if (!validate(file)) return;
-  currentName.value = file.name;
-  progress.value = 0;
-  const presign = await $authFetch<SupportPresign>(
-    "/api/saas/support/uploads",
-    {
-      method: "POST",
-      body: { filename: file.name, size: file.size, mimetype: file.type },
-    },
-  );
-  await uploadWithProgress(presign, file, (value: number) => {
-    progress.value = value;
-  });
-  names.value.set(presign.resourceKey, file.name);
-  emit(
-    "update:modelValue",
-    props.multiple
-      ? [...props.modelValue, presign.resourceKey]
-      : [presign.resourceKey],
-  );
-}
-
-watch(selected, async (value) => {
-  if (!value || props.disabled || isUploading.value) return;
-  isUploading.value = true;
-  emit("busy", true);
-  error.value = "";
-  try {
-    const files = Array.isArray(value) ? value : [value];
-    for (const file of props.multiple ? files : files.slice(0, 1))
-      await upload(file);
-  } catch {
-    error.value = t("saas.support.error.upload");
-  } finally {
-    selected.value = null;
-    isUploading.value = false;
-    emit("busy", false);
-  }
-});
-
-function remove(key: string): void {
-  if (props.disabled || isUploading.value) return;
-  emit(
-    "update:modelValue",
-    props.modelValue.filter((value) => value !== key),
-  );
-  names.value.delete(key);
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <UFileUpload
-      v-model="selected"
-      :multiple="multiple"
-      :accept="accept"
-      :disabled="disabled || isUploading"
-    />
-    <div v-if="isUploading" role="status" class="bg-elevated rounded-md p-2">
-      <span class="text-sm">{{ currentName }}</span>
-      <UProgress :model-value="progress" />
-    </div>
-    <p v-if="error" role="alert" class="text-error text-sm">{{ error }}</p>
-    <div
-      v-for="key in modelValue"
-      :key="key"
-      class="bg-elevated flex items-center justify-between gap-2 rounded-md p-2"
-    >
-      <span class="min-w-0 truncate text-sm">
-        {{ names.get(key) ?? $t("saas.support.attachments") }}
-      </span>
-      <UButton
-        icon="i-lucide-x"
-        color="neutral"
-        variant="ghost"
-        :aria-label="$t('saas.support.remove_attachment')"
-        :disabled="disabled || isUploading"
-        @click="remove(key)"
-      />
-    </div>
-  </div>
-</template>

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>