@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationsList.vue

@@ -1,226 +0,0 @@
-<script setup lang="ts">
-import { formatRelativeTime } from "#dms-core/app/utils/formatter";
-import NotificationCard from "../../../notification/NotificationCard.vue";
-
-const { t, locale } = useI18n();
-const { processI18n } = useTranslation();
-const toast = useToast();
-const {
-  notifications,
-  hasMore,
-  fetchNotifications,
-  markAsRead,
-  deleteNotification,
-  markAllAsRead,
-  deleteAll,
-} = useNotifications();
-const sentinel = ref<HTMLElement | null>(null);
-
-const isMarkingAllRead = ref(false);
-const isDeletingAll = ref(false);
-
-const hasNotifications = computed(() => notifications.value.length > 0);
-
-const { isLoadingMore, setupObserver } = useInfiniteScroll(
-  sentinel,
-  () => fetchNotifications(),
-  hasMore,
-);
-
-onMounted(async () => {
-  await fetchNotifications(true);
-  setupObserver();
-});
-
-const handleNotificationClick = async (notification: UserNotification) => {
-  if (!notification.isRead) {
-    await markAsRead(notification._id);
-  }
-
-  if (notification.linkTo) {
-    await navigateDms(notification.linkTo);
-  }
-};
-
-const handleDelete = async (notificationId: string, event: Event) => {
-  event.stopPropagation();
-  await deleteNotification(notificationId);
-};
-
-const handleMarkAsReadSingle = async (notificationId: string, event: Event) => {
-  event.stopPropagation();
-  await markAsRead(notificationId);
-};
-
-const handleMarkAllAsRead = async () => {
-  isMarkingAllRead.value = true;
-
-  try {
-    await markAllAsRead();
-    toast.add({
-      title: t("page.settings.notifications.mark_all_read_success"),
-      color: "success",
-    });
-  } catch {
-    toast.add({
-      title: t("dms.form.error_title"),
-      color: "error",
-    });
-  } finally {
-    isMarkingAllRead.value = false;
-  }
-};
-
-const handleDeleteAll = async () => {
-  isDeletingAll.value = true;
-
-  try {
-    await deleteAll();
-    toast.add({
-      title: t("page.settings.notifications.delete_all_success"),
-      color: "success",
-    });
-  } catch {
-    toast.add({
-      title: t("dms.form.error_title"),
-      color: "error",
-    });
-  } finally {
-    isDeletingAll.value = false;
-  }
-};
-</script>
-
-<template>
-  <div>
-    <section class="mb-6 space-y-6">
-      <div class="flex items-start justify-between gap-4">
-        <div class="space-y-1">
-          <h2 class="text-highlighted text-2xl font-semibold sm:text-xl">
-            {{ $t("page.settings.notifications.list_title") }}
-          </h2>
-          <p class="text-dimmed text-base sm:text-sm">
-            {{ $t("page.settings.notifications.list_description") }}
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <UButton
-            variant="ghost"
-            color="neutral"
-            icon="i-ph-checks"
-            :disabled="!hasNotifications"
-            :loading="isMarkingAllRead"
-            @click="handleMarkAllAsRead"
-          >
-            {{ $t("page.settings.notifications.mark_all_read") }}
-          </UButton>
-          <UButton
-            variant="ghost"
-            color="neutral"
-            icon="i-ph-broom"
-            :disabled="!hasNotifications"
-            :loading="isDeletingAll"
-            @click="handleDeleteAll"
-          >
-            {{ $t("page.settings.notifications.delete_all") }}
-          </UButton>
-        </div>
-      </div>
-    </section>
-
-    <div>
-      <UEmpty
-        v-if="notifications.length === 0"
-        icon="i-ph-bell-slash"
-        :title="$t('page.settings.notifications.no_notifications')"
-      />
-
-      <NotificationCard
-        v-for="notification in notifications"
-        :key="notification._id"
-        :clickable="true"
-        :dimmed="notification.isRead"
-        mode="list"
-        actions-on-hover
-        @click="handleNotificationClick(notification)"
-      >
-        <template #icon>
-          <div class="relative">
-            <div
-              v-if="!notification.isRead"
-              class="bg-primary absolute top-4 -left-4 size-2 rounded-full"
-            />
-            <div
-              :class="[
-                'flex size-10 items-center justify-center rounded-lg',
-                notification.isRead ? 'bg-accented' : 'bg-primary/10',
-              ]"
-            >
-              <UIcon
-                :name="notification.icon"
-                :class="[
-                  'size-5',
-                  notification.isRead ? 'text-muted' : 'text-primary',
-                ]"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #title>
-          <div class="text-highlighted mb-1 text-sm font-medium">
-            {{ processI18n(notification.title, notification.params) }}
-          </div>
-        </template>
-
-        <template #description>
-          <div class="text-dimmed text-xs">
-            {{ processI18n(notification.description, notification.params) }}
-          </div>
-        </template>
-
-        <template #meta>
-          <span class="text-muted text-xs whitespace-nowrap">
-            {{ formatRelativeTime(notification.createdAt, t, locale) }}
-          </span>
-        </template>
-
-        <template #actions>
-          <div class="flex min-w-14 items-center justify-end gap-1">
-            <UButton
-              v-if="!notification.isRead"
-              icon="i-ph-check"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              @click="
-                (event: Event) =>
-                  handleMarkAsReadSingle(notification._id, event)
-              "
-            />
-            <UButton
-              icon="i-ph-broom"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              @click="(event: Event) => handleDelete(notification._id, event)"
-            />
-          </div>
-        </template>
-      </NotificationCard>
-
-      <div
-        v-if="hasMore"
-        ref="sentinel"
-        class="flex h-4 items-center justify-center"
-      >
-        <UIcon
-          v-if="isLoadingMore"
-          name="i-ph-spinner"
-          class="size-4 animate-spin"
-        />
-      </div>
-    </div>
-  </div>
-</template>

package/frontend-vue/layers/dms-layout/app/components/profile/ProfileLanguage.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-const { locale } = useI18n();
-const { uniqueLocales } = useUniqueLocales();
-const { changeLanguage } = useUserLanguage();
-
-const languageOptions = computed(() =>
-  uniqueLocales.value.map((lang) => ({
-    label: lang.name,
-    value: lang.code,
-  })),
-);
-</script>
-
-<template>
-  <DmsCard class="my-5">
-    <section class="space-y-1">
-      <h2 class="text-highlighted text-2xl font-semibold sm:text-xl">
-        {{ $t("page.settings.profile.language_title") }}
-      </h2>
-      <p class="text-dimmed text-base sm:text-sm">
-        {{ $t("page.settings.profile.language_description") }}
-      </p>
-    </section>
-
-    <USeparator class="my-6" />
-
-    <div>
-      <section
-        class="grid grid-cols-1 gap-2 sm:grid-cols-[min(50%,--spacing(80))_auto]"
-      >
-        <div>
-          <label
-            for="name"
-            class="text-default block text-base font-semibold sm:text-sm"
-          >
-            {{ $t("page.settings.profile.language_title") }}
-          </label>
-        </div>
-
-        <div>
-          <USelect
-            class="w-full"
-            :items="languageOptions"
-            :model-value="locale"
-            @update:model-value="changeLanguage"
-          />
-        </div>
-      </section>
-    </div>
-  </DmsCard>
-</template>

package/frontend-vue/layers/dms-layout/app/components/profile/ProfileSessions.vue

@@ -1,321 +0,0 @@
-<script setup lang="ts">
-interface SessionInfo {
-  _id: string;
-  browser: string;
-  os: string;
-  ip: string;
-  deviceType: string;
-  location: string;
-  createdAt: string;
-  lastActiveAt: string;
-  isCurrent: boolean;
-}
-
-interface DeviceGroupConfig {
-  key: string;
-  icon: string;
-  label: string;
-}
-
-const MS_PER_MINUTE = 60_000;
-const MS_PER_HOUR = 3_600_000;
-const MS_PER_DAY = 86_400_000;
-const MIN_MINUTE_THRESHOLD = 1;
-const MINUTES_PER_HOUR = 60;
-const HOURS_PER_DAY = 24;
-const SKELETON_COUNT = 3;
-
-const SESSION_DETAIL_GRID_CLASS = "grid grid-cols-[160px_1fr] gap-1 text-sm";
-
-const DEVICE_GROUPS: DeviceGroupConfig[] = [
-  {
-    key: "mobile",
-    icon: "i-ph-device-mobile",
-    label: "page.settings.sessions.device_mobile",
-  },
-  {
-    key: "tablet",
-    icon: "i-ph-device-tablet",
-    label: "page.settings.sessions.device_tablet",
-  },
-  {
-    key: "desktop",
-    icon: "i-ph-desktop",
-    label: "page.settings.sessions.device_desktop",
-  },
-];
-
-const { $authFetch } = useAuthFetch();
-const { clear } = useUserSession();
-const toast = useToast();
-const { t } = useI18n();
-
-const isLoading = ref(true);
-const sessions = ref<SessionInfo[]>([]);
-const isDisconnectingAll = ref(false);
-const revokingSessionId = ref<string | null>(null);
-const expandedGroups = ref<Record<string, boolean>>({});
-
-const groupedSessions = computed(() => {
-  const groups: Record<string, SessionInfo[]> = {};
-  for (const session of sessions.value) {
-    const type = session.deviceType || "desktop";
-    if (!groups[type]) groups[type] = [];
-    groups[type].push(session);
-  }
-  return groups;
-});
-
-const activeGroups = computed(() =>
-  DEVICE_GROUPS.filter((group) => groupedSessions.value[group.key]?.length),
-);
-
-const getGroupSubtitle = (groupKey: string): string => {
-  const groupSessions = groupedSessions.value[groupKey] || [];
-  const uniqueOs = [...new Set(groupSessions.map((s) => s.os).filter(Boolean))];
-  return uniqueOs.join(", ");
-};
-
-const toggleGroup = (groupKey: string) => {
-  expandedGroups.value[groupKey] = !expandedGroups.value[groupKey];
-};
-
-const formatDateTime = (dateStr: string): string => {
-  const date = new Date(dateStr);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${pad(date.getDate())}-${pad(date.getMonth() + 1)}-${date.getFullYear()} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
-};
-
-const formatRelativeTime = (dateStr: string): string => {
-  const diffMs = Date.now() - new Date(dateStr).getTime();
-  const diffMinutes = Math.floor(diffMs / MS_PER_MINUTE);
-  const diffHours = Math.floor(diffMs / MS_PER_HOUR);
-  const diffDays = Math.floor(diffMs / MS_PER_DAY);
-
-  if (diffMinutes < MIN_MINUTE_THRESHOLD)
-    return t("page.settings.sessions.just_now");
-  if (diffMinutes < MINUTES_PER_HOUR)
-    return t("page.settings.sessions.minutes_ago", { count: diffMinutes });
-  if (diffHours < HOURS_PER_DAY)
-    return t("page.settings.sessions.hours_ago", { count: diffHours });
-  return t("page.settings.sessions.days_ago", { count: diffDays });
-};
-
-const fetchSessions = async () => {
-  sessions.value = await $authFetch<SessionInfo[]>(
-    "/settings/user/profile/sessions",
-  );
-};
-
-const revokeSession = async (session: SessionInfo) => {
-  revokingSessionId.value = session._id;
-  try {
-    await $authFetch(`/settings/user/profile/sessions/${session._id}`, {
-      method: "DELETE",
-    });
-
-    if (session.isCurrent) {
-      await clear();
-      await navigateDms("/auth");
-      return;
-    }
-
-    sessions.value = sessions.value.filter((s) => s._id !== session._id);
-    toast.add({
-      title: t("page.settings.sessions.revoked"),
-      color: "success",
-    });
-  } catch {
-    toast.add({
-      title: t("page.settings.sessions.revoke_error"),
-      color: "error",
-    });
-  } finally {
-    revokingSessionId.value = null;
-  }
-};
-
-const revokeAllSessions = async () => {
-  isDisconnectingAll.value = true;
-  try {
-    await $authFetch("/settings/user/profile/sessions", {
-      method: "DELETE",
-    });
-    await clear();
-    await navigateDms("/auth");
-  } catch {
-    toast.add({
-      title: t("page.settings.sessions.revoke_all_error"),
-      color: "error",
-    });
-    isDisconnectingAll.value = false;
-  }
-};
-
-onMounted(async () => {
-  try {
-    await fetchSessions();
-  } finally {
-    isLoading.value = false;
-  }
-});
-</script>
-
-<template>
-  <DmsCard class="my-5">
-    <section class="space-y-1">
-      <div class="flex items-center justify-between">
-        <div>
-          <h2 class="text-highlighted text-2xl font-semibold sm:text-xl">
-            {{ $t("page.settings.sessions.title") }}
-          </h2>
-          <p class="text-dimmed text-base sm:text-sm">
-            {{ $t("page.settings.sessions.description") }}
-          </p>
-        </div>
-        <UButton
-          v-if="!isLoading && sessions.length > 0"
-          color="neutral"
-          variant="outline"
-          icon="i-ph-sign-out"
-          :loading="isDisconnectingAll"
-          @click="revokeAllSessions"
-        >
-          {{ $t("page.settings.sessions.disconnect_all") }}
-        </UButton>
-      </div>
-    </section>
-
-    <USeparator class="my-6" />
-
-    <div v-if="isLoading" class="space-y-4">
-      <USkeleton
-        v-for="i in SKELETON_COUNT"
-        :key="i"
-        class="h-16 w-full rounded-lg"
-      />
-    </div>
-
-    <UEmpty
-      v-else-if="sessions.length === 0"
-      icon="i-ph-devices"
-      :title="$t('page.settings.sessions.empty')"
-    />
-
-    <div v-else class="space-y-3">
-      <div
-        v-for="group in activeGroups"
-        :key="group.key"
-        class="border-default overflow-hidden rounded-lg border"
-      >
-        <button
-          class="flex w-full items-center gap-3 px-4 py-3 text-left"
-          @click="toggleGroup(group.key)"
-        >
-          <UIcon :name="group.icon" class="text-dimmed size-6" />
-          <div class="flex-1">
-            <div class="text-highlighted text-sm font-medium">
-              {{
-                $t("page.settings.sessions.sessions_on_device", {
-                  count: groupedSessions[group.key]!.length,
-                  device: $t(group.label).toLowerCase(),
-                })
-              }}
-            </div>
-            <div class="text-muted text-xs">
-              {{ getGroupSubtitle(group.key) }}
-            </div>
-          </div>
-          <UIcon
-            name="i-ph-caret-down"
-            class="text-muted size-4 transition-transform"
-            :class="{ 'rotate-180': expandedGroups[group.key] }"
-          />
-        </button>
-
-        <div v-if="expandedGroups[group.key]" class="px-4 pb-4">
-          <div
-            v-for="(session, index) in groupedSessions[group.key]"
-            :key="session._id"
-          >
-            <USeparator v-if="index > 0" class="my-4" />
-
-            <div class="flex items-center justify-between py-2">
-              <div class="flex items-center gap-2">
-                <span class="text-highlighted text-sm font-semibold">
-                  {{
-                    $t("page.settings.sessions.session_number", {
-                      number: index + 1,
-                    })
-                  }}
-                </span>
-                <UBadge
-                  v-if="session.isCurrent"
-                  color="success"
-                  variant="subtle"
-                  size="sm"
-                >
-                  {{ $t("page.settings.sessions.current") }}
-                </UBadge>
-              </div>
-              <UButton
-                color="neutral"
-                variant="outline"
-                icon="i-ph-sign-out"
-                size="sm"
-                :loading="revokingSessionId === session._id"
-                @click="revokeSession(session)"
-              >
-                {{ $t("page.settings.sessions.disconnect") }}
-              </UButton>
-            </div>
-
-            <div class="mt-2 space-y-2">
-              <div :class="SESSION_DETAIL_GRID_CLASS">
-                <span class="text-muted">
-                  {{ $t("page.settings.sessions.date_time") }}
-                </span>
-                <div>
-                  <UTooltip :text="formatRelativeTime(session.createdAt)">
-                    <span class="text-highlighted">
-                      {{ formatDateTime(session.createdAt) }}
-                    </span>
-                  </UTooltip>
-                </div>
-              </div>
-              <div :class="SESSION_DETAIL_GRID_CLASS">
-                <span class="text-muted">
-                  {{ $t("page.settings.sessions.location") }}
-                </span>
-                <span class="text-highlighted">
-                  {{
-                    session.location ||
-                    $t("page.settings.sessions.unknown_location")
-                  }}
-                </span>
-              </div>
-              <div :class="SESSION_DETAIL_GRID_CLASS">
-                <span class="text-muted">
-                  {{ $t("page.settings.sessions.operating_system") }}
-                </span>
-                <span class="text-highlighted">{{ session.os }}</span>
-              </div>
-              <div :class="SESSION_DETAIL_GRID_CLASS">
-                <span class="text-muted">
-                  {{ $t("page.settings.sessions.browser_label") }}
-                </span>
-                <span class="text-highlighted">{{ session.browser }}</span>
-              </div>
-              <div :class="SESSION_DETAIL_GRID_CLASS">
-                <span class="text-muted">
-                  {{ $t("page.settings.sessions.ip_address") }}
-                </span>
-                <span class="text-highlighted">{{ session.ip }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DmsCard>
-</template>