@nuxt-customer-portal/service-requests 0.3.0 → 0.3.2

package/app/composables/useServiceRequestList.ts

@@ -0,0 +1,184 @@
+import type {
+  ServiceRequest,
+  ServiceRequestListResponse
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+import { usePaginatedResource } from '@nuxt-customer-portal/core/app/composables/usePaginatedResource'
+
+export const useServiceRequestList = (options: {
+  endpoint: string
+  filterKeys?: string[]
+  defaultFilters?: Record<string, string>
+  defaultSort: string
+  defaultSortDir?: 'asc' | 'desc'
+}) => {
+  const route = useRoute()
+  const router = useRouter()
+  const pageSize = 20
+  const defaultSortDir = options.defaultSortDir ?? 'asc'
+  const search = ref(String(route.query.search ?? ''))
+  const sortBy = ref(String(route.query.sortBy ?? options.defaultSort))
+  const sortDir = ref<'asc' | 'desc'>(
+    route.query.sortDir === 'asc' || route.query.sortDir === 'desc' ? route.query.sortDir : defaultSortDir
+  )
+  const currentPage = ref(Math.max(1, Number(route.query.page) || 1))
+  const filters = reactive<Record<string, string | undefined>>(
+    Object.fromEntries(
+      (options.filterKeys ?? []).map((key) => [
+        key,
+        route.query[key] ? String(route.query[key]) : options.defaultFilters?.[key]
+      ])
+    )
+  )
+  const categories = ref<string[]>([])
+  const resource = usePaginatedResource<ServiceRequest, Record<string, string | undefined>>({
+    pageSize,
+    getKey: (item) => (item as { id: string }).id,
+    fetchPage: async ({ filters: query, page, pageSize, signal }) => {
+      const result = await $fetch<ServiceRequestListResponse>(options.endpoint, {
+        query: { ...query, page, pageSize },
+        signal
+      })
+      if (!signal.aborted) {
+        categories.value = result.categories ?? []
+      }
+      return result
+    }
+  })
+  const query = () => ({
+    ...(search.value.trim() ? { search: search.value.trim() } : {}),
+    ...Object.fromEntries(Object.entries(filters).filter(([, value]) => value)),
+    ...(sortBy.value !== options.defaultSort ? { sortBy: sortBy.value } : {}),
+    ...(sortDir.value !== defaultSortDir ? { sortDir: sortDir.value } : {})
+  })
+  const routeQuery = () => ({
+    ...(search.value.trim() ? { search: search.value.trim() } : {}),
+    ...Object.fromEntries(
+      Object.entries(filters).filter(([key, value]) => value && value !== options.defaultFilters?.[key])
+    ),
+    ...(sortBy.value !== options.defaultSort ? { sortBy: sortBy.value } : {}),
+    ...(sortDir.value !== defaultSortDir ? { sortDir: sortDir.value } : {})
+  })
+  const syncRoute = (page = currentPage.value) =>
+    router.replace({ path: route.path, query: { ...routeQuery(), ...(page > 1 ? { page: String(page) } : {}) } })
+  const load = async (page = currentPage.value) => {
+    const result = await resource.loadPage(query(), { page, pageSize }).catch(() => undefined)
+    if (result) {
+      const lastPage = Math.max(1, result.pagination.pageCount)
+      if (page > lastPage) {
+        currentPage.value = lastPage
+        await syncRoute(lastPage)
+        return resource.loadPage(query(), { page: lastPage, pageSize }).catch(() => undefined)
+      }
+      currentPage.value = result.pagination.page
+    }
+    return result
+  }
+  const resetAndLoad = async () => {
+    currentPage.value = 1
+    await syncRoute(1)
+    await load(1)
+  }
+  const loadNext = async () => {
+    const result = await resource.loadNextPage(query())?.catch(() => undefined)
+    if (result) {
+      currentPage.value = result.pagination.page
+      await syncRoute(currentPage.value)
+    }
+  }
+  const loadPrevious = async () => {
+    const result = await resource.loadPreviousPage(query())?.catch(() => undefined)
+    if (result) {
+      currentPage.value = result.pagination.page
+      await syncRoute(currentPage.value)
+    }
+    return result
+  }
+  const goToPage = async (page: number) => {
+    currentPage.value = page
+    await syncRoute(page)
+    await load(page)
+  }
+  const setFilter = (key: string, value: string | undefined) => {
+    filters[key] = value
+  }
+  const toggleSortDir = () => {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  }
+  let searchTimer: ReturnType<typeof setTimeout> | undefined
+  let applyingRoute = false
+  watch(
+    search,
+    () => {
+      if (applyingRoute) {
+        return
+      }
+      clearTimeout(searchTimer)
+      searchTimer = setTimeout(() => {
+        void resetAndLoad()
+      }, 300)
+    },
+    { flush: 'sync' }
+  )
+  watch(
+    [sortBy, sortDir, ...Object.keys(filters).map((key) => () => filters[key])],
+    () => {
+      if (applyingRoute) {
+        return
+      }
+      clearTimeout(searchTimer)
+      void resetAndLoad()
+    },
+    { flush: 'sync' }
+  )
+  watch(
+    () => route.query,
+    async (routeQuery) => {
+      const nextSearch = String(routeQuery.search ?? '')
+      const nextSort = String(routeQuery.sortBy ?? options.defaultSort)
+      const nextDir =
+        routeQuery.sortDir === 'asc' || routeQuery.sortDir === 'desc' ? routeQuery.sortDir : defaultSortDir
+      const nextPage = Math.max(1, Number(routeQuery.page) || 1)
+      const nextFilters = Object.fromEntries(
+        (options.filterKeys ?? []).map((key) => [
+          key,
+          routeQuery[key] ? String(routeQuery[key]) : options.defaultFilters?.[key]
+        ])
+      )
+      if (
+        nextSearch === search.value.trim() &&
+        nextSort === sortBy.value &&
+        nextDir === sortDir.value &&
+        nextPage === currentPage.value &&
+        Object.keys(nextFilters).every((key) => nextFilters[key] === filters[key])
+      ) {
+        return
+      }
+      clearTimeout(searchTimer)
+      applyingRoute = true
+      search.value = nextSearch
+      sortBy.value = nextSort
+      sortDir.value = nextDir
+      currentPage.value = nextPage
+      Object.assign(filters, nextFilters)
+      applyingRoute = false
+      await load(nextPage)
+    }
+  )
+  onScopeDispose(() => clearTimeout(searchTimer))
+  return {
+    ...resource,
+    categories,
+    search,
+    filters,
+    sortBy,
+    sortDir,
+    currentPage,
+    load,
+    refresh: load,
+    loadNext,
+    loadPrevious,
+    goToPage,
+    setFilter,
+    toggleSortDir
+  }
+}

package/app/composables/useServiceRequestMenu.ts

@@ -16,14 +16,6 @@ export const useServiceRequestMenu = () => {
       }
     ]
 
-    if (isOrganizationAdmin.value) {
-      items.push({
-        label: t('features.serviceRequests.navigation.manageRequests'),
-        to: '/admin/requests',
-        icon: 'i-lucide-settings'
-      })
-    }
-
     return items
   })
 

package/app/pages/admin/requests/[id].vue

@@ -1,140 +1,11 @@
 <script setup lang="ts">
-import type {
-  AdminServiceRequestUpdateInput,
-  ServiceRequestWithRelations
-} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
-
 const route = useRoute()
-const { t } = useI18n()
-const requestId = route.params.id as string
-
-const { adminUpdateRequest } = useAdminServiceRequests()
-const toast = useToast()
-
-const request = ref<ServiceRequestWithRelations | null>(null)
-const loading = ref(true)
-const updating = ref(false)
-
-useSeoMeta({
-  title: () => request.value?.title || t('features.serviceRequests.navigation.manageRequests')
-})
-
-const adminUpdates = reactive<AdminServiceRequestUpdateInput>({
-  status: undefined,
-  priority: undefined,
-  assignedToId: '',
-  internalNotes: ''
-})
-
-const statusOptions = computed(() => [
-  { label: t('features.serviceRequests.status.open'), value: 'OPEN' },
-  { label: t('features.serviceRequests.status.in_progress'), value: 'IN_PROGRESS' },
-  { label: t('features.serviceRequests.status.resolved'), value: 'RESOLVED' },
-  { label: t('features.serviceRequests.status.closed'), value: 'CLOSED' }
-])
-
-const priorityOptions = computed(() => [
-  { label: t('features.serviceRequests.priority.low'), value: 'LOW' },
-  { label: t('features.serviceRequests.priority.medium'), value: 'MEDIUM' },
-  { label: t('features.serviceRequests.priority.high'), value: 'HIGH' },
-  { label: t('features.serviceRequests.priority.urgent'), value: 'URGENT' }
-])
-
-const userOptions = [
-  // This would be populated with users from the organization
-  { label: t('features.serviceRequests.placeholders.selectUser'), value: '' }
-]
-
-onMounted(async () => {
-  try {
-    request.value = await $fetch(`/api/service-requests/${requestId}`)
-    if (!request.value) {
-      return
-    }
-    adminUpdates.status = request.value.status
-    adminUpdates.priority = request.value.priority
-    adminUpdates.assignedToId = request.value.assignedToId || ''
-    adminUpdates.internalNotes = request.value.internalNotes || ''
-  } catch {
-    toast.add({
-      title: t('common.error'),
-      description: t('features.serviceRequests.messages.fetchError'),
-      color: 'error'
-    })
-  } finally {
-    loading.value = false
-  }
-})
-
-const handleUpdate = async () => {
-  updating.value = true
-  try {
-    request.value = await adminUpdateRequest(requestId, adminUpdates)
-    toast.add({
-      title: t('common.success'),
-      description: t('features.serviceRequests.messages.updateSuccess')
-    })
-  } catch {
-    toast.add({
-      title: t('common.error'),
-      description: t('features.serviceRequests.messages.updateError'),
-      color: 'error'
-    })
-  } finally {
-    updating.value = false
-  }
-}
-
-const handleQuickUpdate = () => {
-  handleUpdate()
-}
+await navigateTo(
+  { path: `/requests/${encodeURIComponent(String(route.params.id))}`, query: route.query },
+  { replace: true }
+)
 </script>
 
 <template>
-  <div class="container mx-auto py-8 max-w-4xl">
-    <div v-if="loading">
-      <USkeleton class="h-32 w-full mb-4" />
-      <USkeleton class="h-64 w-full" />
-    </div>
-
-    <div v-else-if="request" class="space-y-6">
-      <!-- Full request details with admin controls -->
-      <CustomerRequestDetail :request-id="request.id" />
-
-      <USeparator />
-
-      <!-- Admin Actions -->
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold">{{ t('features.serviceRequests.actions.adminActions') }}</h3>
-        </template>
-
-        <div class="space-y-4">
-          <UFormField :label="t('features.serviceRequests.fields.status')">
-            <USelect v-model="adminUpdates.status" :options="statusOptions" @change="handleQuickUpdate" />
-          </UFormField>
-
-          <UFormField :label="t('features.serviceRequests.fields.priority')">
-            <USelect v-model="adminUpdates.priority" :options="priorityOptions" @change="handleQuickUpdate" />
-          </UFormField>
-
-          <UFormField :label="t('features.serviceRequests.fields.assignedTo')">
-            <USelect v-model="adminUpdates.assignedToId" :options="userOptions" @change="handleQuickUpdate" />
-          </UFormField>
-
-          <UFormField :label="t('features.serviceRequests.fields.internalNotes')">
-            <UTextarea
-              v-model="adminUpdates.internalNotes"
-              :rows="4"
-              :placeholder="t('features.serviceRequests.placeholders.internalNotes')"
-            />
-          </UFormField>
-
-          <UButton :loading="updating" @click="handleUpdate">
-            {{ t('features.serviceRequests.actions.saveChanges') }}
-          </UButton>
-        </div>
-      </UCard>
-    </div>
-  </div>
+  <div />
 </template>

package/app/pages/admin/requests/index.vue

@@ -1,55 +1,8 @@
 <script setup lang="ts">
-import type {
-  AdminServiceRequestUpdateInput,
-  ServiceRequestFilters
-} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
-
-const { requests, loading, pagination, stats, fetchAllRequests, adminUpdateRequest } = useAdminServiceRequests()
-
-const toast = useToast()
-const { t } = useI18n()
-
-useSeoMeta({
-  title: () => t('features.serviceRequests.navigation.manageRequests')
-})
-
-onMounted(() => {
-  fetchAllRequests()
-})
-
-const handleFilter = (filters: ServiceRequestFilters) => {
-  fetchAllRequests(filters)
-}
-
-const handleUpdate = async ({ id, updates }: { id: string; updates: AdminServiceRequestUpdateInput }) => {
-  try {
-    await adminUpdateRequest(id, updates)
-    toast.add({
-      title: t('common.success'),
-      description: t('features.serviceRequests.messages.updateSuccess')
-    })
-  } catch {
-    toast.add({
-      title: t('common.error'),
-      description: t('features.serviceRequests.messages.updateError'),
-      color: 'error'
-    })
-  }
-}
+const route = useRoute()
+await navigateTo({ path: '/requests', query: route.query }, { replace: true })
 </script>
 
 <template>
-  <div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-6">{{ t('features.serviceRequests.navigation.manageRequests') }}</h1>
-
-    <AdminRequestDashboard
-      :requests="requests"
-      :loading="loading"
-      :pagination="pagination"
-      :stats="stats"
-      @select="navigateTo(`/admin/requests/${$event}`)"
-      @filter="handleFilter"
-      @update="handleUpdate"
-    />
-  </div>
+  <div />
 </template>

package/app/pages/requests/[id].vue

@@ -16,17 +16,19 @@ const request = ref<ServiceRequestWithRelations | null>(null)
 const loading = ref(true)
 const updating = ref(false)
 const showEditModal = ref(false)
+const showDeleteConfirm = ref(false)
+const { can } = useServiceRequestAccess()
 
 useSeoMeta({
   title: () => request.value?.title || t('features.serviceRequests.title')
 })
 
 const canEdit = computed(() => {
-  return request.value?.createdById === currentUser.value?.id
+  return request.value?.createdById === currentUser.value?.id || can('update')
 })
 
 const canDelete = computed(() => {
-  return request.value?.createdById === currentUser.value?.id
+  return request.value?.createdById === currentUser.value?.id || can('delete')
 })
 
 const backRoute = computed(() => {
@@ -93,10 +95,6 @@ const handleUpdate = async (data: ServiceRequestUpdateInput) => {
 }
 
 const handleDelete = async () => {
-  if (!confirm('Are you sure you want to delete this request?')) {
-    return
-  }
-
   try {
     await deleteRequest(requestId)
     toast.add({
@@ -115,7 +113,7 @@ const handleDelete = async () => {
 </script>
 
 <template>
-  <div class="container mx-auto py-8 max-w-4xl">
+  <div class="mx-auto h-full min-h-0 w-full max-w-5xl overflow-y-auto px-4 py-5 sm:px-6">
     <div class="mb-4">
       <UButton icon="i-lucide-arrow-left" variant="ghost" size="sm" :to="backRoute">
         {{ t('features.serviceRequests.actions.back') }}
@@ -132,30 +130,34 @@ const handleDelete = async () => {
       <UButton :to="backRoute">{{ t('features.serviceRequests.actions.back') }}</UButton>
     </div>
 
-    <div v-else>
+    <div v-else class="space-y-5">
       <CustomerRequestDetail
-        :request-id="request.id"
+        :request="request"
         :can-edit="canEdit"
         :can-delete="canDelete"
         @edit="showEditModal = true"
-        @delete="handleDelete"
+        @delete="showDeleteConfirm = true"
       />
 
-      <!-- Edit Modal -->
-      <UModal v-model="showEditModal">
-        <UCard>
-          <template #header>
-            <h2 class="text-xl font-bold">{{ t('features.serviceRequests.edit') }}</h2>
-          </template>
-
+      <ServiceRequestManagement v-if="can('manage')" :request="request" @updated="request = $event" />
+      <UModal v-model:open="showEditModal" :title="t('features.serviceRequests.edit')">
+        <template #body>
           <CustomerRequestForm
             :initial-data="request"
             :loading="updating"
             @submit="handleUpdate"
             @cancel="showEditModal = false"
           />
-        </UCard>
+        </template>
       </UModal>
+      <ConfirmationModal
+        v-model:open="showDeleteConfirm"
+        title="features.serviceRequests.delete"
+        message="features.serviceRequests.confirmDelete"
+        confirm-color="error"
+        confirm-text="common.delete"
+        @confirm="handleDelete"
+      />
     </div>
   </div>
 </template>