@dev.smartpricing/message-composer-layer 4.3.1 → 4.3.2-chat.0

package/app/api/dynamicValues.ts

@@ -1,8 +1,11 @@
-import type { DynamicValuesResponse } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  DynamicValuesResponse,
+  MessageGroupProduct,
+} from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
 export const dynamicValuesApi = {
-  get: (product: string, language: string) => {
+  get: (product: MessageGroupProduct, language: string) => {
     const params = new URLSearchParams()
     params.set('product', product)
     params.set('language', language)

package/app/api/messageGroups.ts

@@ -1,27 +1,38 @@
 import type {
   MessageGroupFromDb,
+  PaginatedResponse,
   MessageGroupWithMessages,
   MessageGroupWithMessageSummary,
   MessageGroupValidationResponse,
   PostEntity,
   MessageGroup,
-  RenderType,
   DuplicateMessageGroupBody,
+  ListMessageGroupsQuery,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
+/**
+ * Query params of `GET /message-groups`, straight from the shared schema
+ * (ADR 0007): snake_case, as on the wire. `visibility` other than `public`
+ * is admin-only (403 otherwise); every field is optional here, the server
+ * applies the defaults.
+ */
+export type ListMessageGroupsOptions = Partial<ListMessageGroupsQuery>
+
+function listQueryString(options: ListMessageGroupsOptions = {}): string {
+  const params = new URLSearchParams()
+  for (const [name, value] of Object.entries(options)) {
+    if (value !== undefined && value !== '') params.set(name, String(value))
+  }
+  return params.size ? `?${params.toString()}` : ''
+}
+
 export const messageGroupsApi = {
-  getAll: (options?: { renderType?: RenderType; tags?: string[]; tagsMode?: 'and' | 'or' }) => {
-    const params = new URLSearchParams()
-    if (options?.renderType) params.set('render_type', options.renderType)
-    if (options?.tags && options.tags.length > 0) {
-      options.tags.forEach((tag) => params.append('tags', tag))
-    }
-    if (options?.tagsMode) params.set('tags_mode', options.tagsMode)
-
-    const query = params.size ? `?${params.toString()}` : ''
-    return apiClient<MessageGroupWithMessageSummary[]>(`/message-groups${query}`)
-  },
+  /** One page of the server-side filtered list, in the Laravel envelope (ADR 0012). */
+  list: (options?: ListMessageGroupsOptions) =>
+    apiClient<PaginatedResponse<MessageGroupWithMessageSummary>>(
+      `/message-groups${listQueryString(options)}`,
+    ),
 
   getById: (id: string) => apiClient<MessageGroupWithMessages>(`/message-groups/${id}`),
 

package/app/components/Common/AppContextErrors.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useAppContextStore } from '~/stores/appContext'
+
+/**
+ * Host-integration problems reported by the app-context store (missing
+ * Product, missing Meta config, ...). Shown persistently: the host has to fix
+ * its context, the user cannot.
+ */
+const { validationErrors } = storeToRefs(useAppContextStore())
+const messages = computed(() => Object.values(validationErrors.value))
+</script>
+
+<template>
+  <UAlert
+    v-if="messages.length"
+    color="error"
+    variant="subtle"
+    icon="i-lucide-alert-triangle"
+    :title="$t('common.context_error_title')"
+    class="rounded-none"
+  >
+    <template #description>
+      <ul class="list-disc pl-4 space-y-1">
+        <li v-for="message in messages" :key="message">
+          {{ message }}
+        </li>
+      </ul>
+    </template>
+  </UAlert>
+</template>

package/app/components/Common/MessageGroupSelect.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
-import { useMessageGroupsQuery } from '~/queries/messageGroups'
+import type { MessageStatus, RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import { usePagedMessageGroups } from '~/composables/usePagedMessageGroups'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+import { useAppContextStore } from '~/stores/appContext'
 
 defineOptions({ name: 'MessageGroupSelect' })
 
+/**
+ * In-composer Message Group picker (ADR 0012). Always lists the context
+ * Product's groups only: search is server-side, debounced and bound to the
+ * menu's search input; pages of 100 load on demand through "Load more".
+ * The selected group stays in the menu even when the loaded pages no longer
+ * contain it (search cleared, paging reset, or preselected beyond page one).
+ */
 const props = withDefaults(
   defineProps<{
     renderType?: RenderType
@@ -34,11 +43,88 @@ const emit = defineEmits<{
   select: [item: { id: string; name: string }]
 }>()
 
+/** What the picker needs from a group, whichever endpoint it came from. */
+interface PickerGroup {
+  id: string
+  name: string
+  messages: Array<{ status: MessageStatus }>
+}
+
+const PER_PAGE = 100
+
 const { t } = useI18n()
+const appContext = useAppContextStore()
 
-const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
-  renderType: props.renderType,
-}))
+// Server-side search: the menu's own client filter is off (`ignore-filter`),
+// the typed term reaches the list request once it settles. A new search,
+// render type or context Product starts over from page one.
+const searchTerm = ref('')
+const page = ref(1)
+
+// Without a context Product the server would answer with every Product's
+// groups (ADR 0011): never ask. The host's missing Product is already reported
+// by the app-context validation.
+const {
+  query: { data: envelope, isPlaceholderData },
+  loading,
+} = usePagedMessageGroups({
+  search: searchTerm,
+  page,
+  perPage: PER_PAGE,
+  renderType: () => props.renderType,
+  filters: () => ({
+    product: appContext.product,
+    visibility: appContext.isAdmin ? 'all' : 'public',
+  }),
+  resetOn: [() => appContext.product],
+  enabled: () => appContext.product != null,
+})
+
+// Pages loaded so far, indexed by page number: page one replaces everything,
+// later pages slot in at their index (a refetch replaces, never duplicates).
+const pages = shallowRef<PickerGroup[][]>([])
+watch(
+  envelope,
+  (value) => {
+    if (!value) return
+    const index = value.meta.current_page - 1
+    pages.value = index === 0 ? [value.data] : [...pages.value.slice(0, index), value.data]
+  },
+  { immediate: true },
+)
+const loadedGroups = computed(() => pages.value.flat())
+
+// The selected group is pinned on top of the loaded pages when they do not
+// contain it: remembered from the last pick, or fetched by id when preselected.
+const lastPicked = shallowRef<PickerGroup>()
+const missingSelectedId = computed(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return undefined
+  return lastPicked.value?.id === id ? undefined : id
+})
+const { data: fetchedSelected } = useMessageGroupQuery(() => missingSelectedId.value ?? '', {
+  enabled: () => missingSelectedId.value != null,
+})
+const messageGroups = computed<PickerGroup[]>(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return loadedGroups.value
+  const pinned =
+    lastPicked.value?.id === id
+      ? lastPicked.value
+      : fetchedSelected.value?.id === id
+        ? fetchedSelected.value
+        : undefined
+  return pinned ? [pinned, ...loadedGroups.value] : loadedGroups.value
+})
+
+const hasMore = computed(
+  () =>
+    !isPlaceholderData.value &&
+    envelope.value != null &&
+    envelope.value.meta.current_page < envelope.value.meta.last_page,
+)
+const isLoadingFirstPage = computed(() => page.value === 1 && loading.value)
+const isLoadingMore = computed(() => page.value > 1 && loading.value)
 
 const hideInactive = ref(false)
 
@@ -47,7 +133,6 @@ function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
 }
 
 const items = computed(() => {
-  if (!messageGroups.value) return []
   return messageGroups.value.reduce<
     Array<{
       label: string
@@ -80,18 +165,21 @@ const items = computed(() => {
 
 function handleUpdate(value: string) {
   modelValue.value = value
-  const group = messageGroups.value?.find((g) => g.id === value)
+  const group = messageGroups.value.find((g) => g.id === value)
+  lastPicked.value = group
   emit('select', { id: value, name: group?.name ?? '' })
 }
 </script>
 
 <template>
   <USelectMenu
+    v-model:search-term="searchTerm"
     :model-value="modelValue"
     :items="items"
     value-key="value"
-    :loading="isLoading"
+    :loading="isLoadingFirstPage"
     searchable
+    ignore-filter
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
     :data-testid="messageGroupSelectTestIds.root"
@@ -112,5 +200,18 @@ function handleUpdate(value: string) {
         </span>
       </div>
     </template>
+
+    <template v-if="hasMore || isLoadingMore" #content-bottom>
+      <div class="flex justify-center px-2 py-1.5 border-t border-default">
+        <UButton
+          variant="link"
+          size="xs"
+          :loading="isLoadingMore"
+          :label="t('common.messageGroupSelect.load_more')"
+          :data-testid="messageGroupSelectTestIds.loadMore"
+          @click="page++"
+        />
+      </div>
+    </template>
   </USelectMenu>
 </template>

package/app/components/Composer/MessageLibrary.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  useMessageGroupsQuery,
   useDeleteMessageGroupMutation,
   usePublishMessageGroupMutation,
   useUnpublishMessageGroupMutation,
@@ -10,7 +9,6 @@ import type {
   RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
-import { computed } from 'vue'
 import BaseTable from '@/components/TemplateList/BaseTable.vue'
 
 const renderType = defineModel<RenderType>('renderType', { required: true })
@@ -26,12 +24,17 @@ const emit = defineEmits<{
 const { trackEvent } = useTracking()
 const { t } = useI18n()
 
-// Query
+// List state + server-side paginated query (ADR 0012)
 const {
-  data: messageGroups,
-  isPending: isFetching,
+  state: listState,
+  setFilters,
+  setSorting,
+  setPage,
+  rows: messageGroups,
+  meta,
+  loading: isFetching,
   refetch: execute,
-} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
+} = useMessageGroupList(renderType)
 
 // Polling
 const interval = setInterval(() => execute(), 15000)
@@ -144,8 +147,15 @@ defineExpose({ execute })
 <template>
   <BaseTable
     :loading="isFetching"
-    :message-groups="messageGroups || []"
+    :message-groups="messageGroups"
+    :meta="meta"
     :render-type="renderType"
+    :filters="listState"
+    :sorting="listState"
+    :page="listState.page"
+    @update:filters="setFilters"
+    @update:sorting="setSorting"
+    @update:page="setPage"
     @edit="navigate"
     @delete="askDeleteGroup"
     @duplicate="handleDuplicate"