mgv-backoffice 1.19.0 → 1.20.0

package/src/composables/useNotifications.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useNotifications } from './useNotifications'
+
+describe('useNotifications', () => {
+  beforeEach(() => {
+    // Singleton state persists across tests — reset it each time.
+    const { clear, closePanel } = useNotifications()
+    clear()
+    closePanel()
+  })
+
+  it('counts only unread notifications', () => {
+    const { setNotifications, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b', read: true },
+      { id: 3, title: 'c' },
+    ])
+    expect(unreadCount.value).toBe(2)
+  })
+
+  it('markAllRead clears the unread count', () => {
+    const { setNotifications, markAllRead, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+    ])
+    expect(unreadCount.value).toBe(2)
+    markAllRead()
+    expect(unreadCount.value).toBe(0)
+  })
+
+  it('markRead marks a single notification read', () => {
+    const { setNotifications, markRead, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+    ])
+    markRead(1)
+    expect(unreadCount.value).toBe(1)
+  })
+
+  it('add prepends newest-first and remove deletes by id', () => {
+    const { add, remove, notifications } = useNotifications()
+    add({ id: 1, title: 'first' })
+    add({ id: 2, title: 'second' })
+    expect(notifications.value.map((n) => n.id)).toEqual([2, 1])
+    remove(1)
+    expect(notifications.value.map((n) => n.id)).toEqual([2])
+  })
+
+  it('toggles and sets the panel open state', () => {
+    const { open, openPanel, closePanel, togglePanel } = useNotifications()
+    expect(open.value).toBe(false)
+    openPanel()
+    expect(open.value).toBe(true)
+    togglePanel()
+    expect(open.value).toBe(false)
+    togglePanel()
+    expect(open.value).toBe(true)
+    closePanel()
+    expect(open.value).toBe(false)
+  })
+})

package/src/composables/useNotifications.ts

@@ -0,0 +1,81 @@
+import { ref, computed } from 'vue'
+import type { NotificationItem } from '../types/notification'
+
+/**
+ * Shared notification state for the sidebar bell + `BaseNotificationPanel`.
+ *
+ * Module-scoped singleton (mirrors useMobileSidebar / useToast) so the
+ * sidebar's unread badge, the bell's open/close toggle, and the panel all
+ * read and mutate the same source. The consuming app owns the data: call
+ * `setNotifications()` (or `add()`) to feed it in.
+ *
+ * There's only ever one notification surface per app, so a singleton is
+ * the right shape here.
+ */
+const notifications = ref<NotificationItem[]>([])
+const open = ref(false)
+
+const unreadCount = computed(
+  () => notifications.value.filter((n) => !n.read).length,
+)
+
+export function useNotifications() {
+  function openPanel() {
+    open.value = true
+  }
+  function closePanel() {
+    open.value = false
+  }
+  function togglePanel() {
+    open.value = !open.value
+  }
+
+  /** Replace the whole list (typical after a fetch). */
+  function setNotifications(items: NotificationItem[]) {
+    notifications.value = items
+  }
+
+  /** Prepend a single notification (newest first). */
+  function add(item: NotificationItem) {
+    notifications.value = [item, ...notifications.value]
+  }
+
+  /** Remove one by id. */
+  function remove(id: NotificationItem['id']) {
+    notifications.value = notifications.value.filter((n) => n.id !== id)
+  }
+
+  /** Mark a single notification read. */
+  function markRead(id: NotificationItem['id']) {
+    notifications.value = notifications.value.map((n) =>
+      n.id === id ? { ...n, read: true } : n,
+    )
+  }
+
+  /** Mark every notification read (clears the badge). */
+  function markAllRead() {
+    notifications.value = notifications.value.map((n) =>
+      n.read ? n : { ...n, read: true },
+    )
+  }
+
+  /** Remove every notification. */
+  function clear() {
+    notifications.value = []
+  }
+
+  return {
+    notifications,
+    unreadCount,
+    open,
+    openPanel,
+    closePanel,
+    togglePanel,
+    setNotifications,
+    add,
+    remove,
+    markRead,
+    markAllRead,
+    clear,
+  }
+}

package/src/composables/useSidebarCollapse.ts

@@ -0,0 +1,64 @@
+import { ref, watch, effectScope } from 'vue'
+
+/**
+ * Shared collapsed/expanded state for the desktop sidebar.
+ *
+ * Module-scoped singleton (mirrors useMobileSidebar) so `BaseSidebar` and
+ * the page layout (`BaseAppLayout`, which offsets `<main>` by the sidebar
+ * width) stay in sync. When collapsed, the sidebar shrinks to an icon-only
+ * rail on desktop.
+ *
+ * The preference is persisted to localStorage. The first consumer can pass
+ * an options object to override the key; subsequent callers reuse the same
+ * singleton and the option is only consulted on the first call.
+ */
+export interface UseSidebarCollapseOptions {
+  /** localStorage key used to persist the preference. */
+  storageKey?: string
+}
+
+const collapsed = ref(false)
+
+let initialized = false
+let configuredStorageKey = 'mgv-sidebar-collapsed'
+
+function initialize(storageKey: string) {
+  if (initialized) {
+    return
+  }
+  initialized = true
+  configuredStorageKey = storageKey
+
+  if (typeof window !== 'undefined') {
+    const saved = window.localStorage?.getItem(configuredStorageKey)
+    if (saved) {
+      collapsed.value = saved === 'true'
+    }
+
+    // Detached scope so the persistence watcher lives for the app's
+    // lifetime and is NOT torn down when the first consuming component
+    // unmounts.
+    const scope = effectScope(true)
+    scope.run(() => {
+      watch(collapsed, (value) => {
+        window.localStorage?.setItem(configuredStorageKey, String(value))
+      })
+    })
+  }
+}
+
+export function useSidebarCollapse(options?: UseSidebarCollapseOptions) {
+  initialize(options?.storageKey ?? configuredStorageKey)
+
+  function collapse() {
+    collapsed.value = true
+  }
+  function expand() {
+    collapsed.value = false
+  }
+  function toggle() {
+    collapsed.value = !collapsed.value
+  }
+
+  return { collapsed, collapse, expand, toggle }
+}

package/src/index.ts

@@ -30,6 +30,9 @@ export { default as BasePageHeader } from './components/BasePageHeader.vue'
 export { default as BaseToolbarButton } from './components/BaseToolbarButton.vue'
 export { default as BaseActionButton } from './components/BaseActionButton.vue'
 export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
+export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignInButton.vue'
+export { default as BaseLoginForm } from './components/BaseLoginForm.vue'
+export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
@@ -40,6 +43,9 @@ export { useEscapeKey } from './composables/useEscapeKey'
 export { useDebouncedRef } from './composables/useDebounce'
 export { useToast } from './composables/useToast'
 export { useMobileSidebar } from './composables/useMobileSidebar'
+export { useSidebarCollapse } from './composables/useSidebarCollapse'
+export type { UseSidebarCollapseOptions } from './composables/useSidebarCollapse'
+export { useNotifications } from './composables/useNotifications'
 
 // Enums
 export { AlertEnum } from './enums/AlertEnum'
@@ -57,6 +63,8 @@ export { PositioningEnum } from './enums/PositioningEnum'
 export type { BreadCrumb } from './components/BaseBreadcrumb.vue'
 export type { NavItem, NavSection } from './types/sidebar'
 export type { EntityPickerItem } from './types/entityPicker'
+export type { LoginCredentials } from './types/auth'
+export type { NotificationItem } from './types/notification'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/types/auth.ts

@@ -0,0 +1,11 @@
+/**
+ * Credentials emitted by `BaseLoginForm` on submit.
+ *
+ * `remember` is only present when the form is rendered with the
+ * "remember me" checkbox enabled.
+ */
+export interface LoginCredentials {
+  email: string
+  password: string
+  remember?: boolean
+}

package/src/types/notification.ts

@@ -0,0 +1,20 @@
+/**
+ * A single entry rendered in `BaseNotificationPanel` and counted by the
+ * sidebar's unread badge.
+ *
+ *   • `id`      — stable key, used for list rendering and mark/remove ops.
+ *   • `title`   — bold headline line.
+ *   • `message` — optional secondary line.
+ *   • `time`    — optional pre-formatted timestamp (e.g. "2h ago"). The
+ *                 library does not format dates for you.
+ *   • `read`    — unread entries are highlighted and count toward the badge.
+ *   • `type`    — drives the small status dot colour.
+ */
+export interface NotificationItem {
+  id: string | number
+  title: string
+  message?: string
+  time?: string
+  read?: boolean
+  type?: 'info' | 'success' | 'warning' | 'error'
+}