@reqquest/ui 1.17.0 → 1.18.0

package/app/src/routes/requests/+page.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+  import { ColumnList, FieldDate, FieldMultiselect, FieldSelect, FieldTextInput, FilterUI, IntroPanel, Pagination, Panel, PanelFormDialog } from '@txstate-mws/carbon-svelte'
+  import View from 'carbon-icons-svelte/lib/View.svelte'
+  import DocExport from 'carbon-icons-svelte/lib/DocumentExport.svelte'
+  import { DateTime } from 'luxon'
+  import { htmlEncode, isBlank, isNotBlank, keyby, sortby, toQuery } from 'txstate-utils'
+  import { goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import { api, FieldNestedMultiselect, getProgramStatusFilterItems, getReviewerStatusFilterOptions, getReviewerStatusTags, ProgramStatusCell, twoLineDateHtml, REVIEWER_STATUS_CONFIG } from '$internal'
+  import { enumApplicationRescindedStatus } from '@reqquest/ui'
+  import { uiRegistry } from '$local'
+  import type { PageData } from './$types.js'
+  import { _defaultRequestListFilters } from './+page.js'
+
+  export let data: PageData
+
+  $: ({ appRequests, appRequestIndexes: indexes, allPeriods, openPeriods, access, filters, programs } = data)
+  const statusFilterItems = getReviewerStatusFilterOptions({ includeClosed: true })
+  $: requests = appRequests.map(r => ({ ...r, indexByCat: keyby(r.indexCategories, 'category') }))
+  $: indexColumns = sortby(indexes.filter(idx => idx.appRequestListPriority), 'appRequestListPriority').map(idx => ({
+    id: idx.category,
+    label: idx.categoryLabel,
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- r.indexByCat[idx.category] may be undefined if no values are present
+    render: (r: typeof requests[number]) => htmlEncode(r.indexByCat[idx.category]?.values.map(v => v.label).join(', '))
+  }))
+  $: filterIndexes = sortby(indexes.filter(idx => idx.listFiltersPriority && (idx.values.length || !idx.listable)), 'listFiltersPriority')
+
+  let unlistableIndexItems: Record<string, { value: string, label: string }[] | undefined> = {}
+  function searchIndexItems (category: string) {
+    return (e: Event) => {
+      (async () => {
+        const search = (e.target as HTMLInputElement).value
+        if (isBlank(search)) {
+          unlistableIndexItems[category] = undefined
+        } else {
+          unlistableIndexItems[category] = await api.searchIndexItems(category, search)
+        }
+        unlistableIndexItems = unlistableIndexItems // trigger reactivity
+      })().catch(console.error)
+    }
+  }
+
+  let createDialog = false
+  let lastInsertedId: string | undefined
+  async function openCreateDialog () {
+    createDialog = true
+  }
+
+  function closeCreateDialog () {
+    createDialog = false
+  }
+
+  async function onCreateSaved () {
+    closeCreateDialog()
+    await goto(resolve(`/requests/${lastInsertedId}/approve`))
+  }
+
+  async function validateAppRequest (data: { periodId: string, login: string }) {
+    const response = await api.createAppRequest(data.periodId, data.login, true)
+    return response.messages
+  }
+
+  async function submitAppRequest (data: { periodId: string, login: string }) {
+    const response = await api.createAppRequest(data.periodId, data.login)
+    if (response.success) lastInsertedId = response.id
+    return {
+      ...response,
+      data
+    }
+  }
+  let showDateFilters = isNotBlank(filters?.closedAfter) || isNotBlank(filters?.closedBefore) || isNotBlank(filters?.updatedAfter) || isNotBlank(filters?.updatedBefore) || isNotBlank(filters?.submittedAfter) || isNotBlank(filters?.submittedBefore)
+
+  async function downloadCSV (ids?: string[]) {
+    const ticket = await api.getDownloadTicket()
+    const query = toQuery({ f: ids?.length ? { ids } : (filters ?? _defaultRequestListFilters) } as unknown as Parameters<typeof toQuery>[0])
+    location.href = `${api.baseUrl}/csv/${ticket}/requests/requests${DateTime.now().toFormat('yyyyLLddHHmmss')}.csv?${query}`
+  }
+</script>
+<div class='intro-wide [ px-[20px] ]'>
+  <div class="requests-filters">
+  <FilterUI search>
+    <svelte:fragment slot="quickfilters">
+      <FieldMultiselect
+        path="status"
+        labelText="Application status"
+        label="Choose one or more"
+        hideLabel={false}
+        json
+        items={statusFilterItems}
+      />
+      <FieldNestedMultiselect
+        path="applicationStatuses"
+        labelText="Program status"
+        items={getProgramStatusFilterItems()}
+      />
+      <FieldMultiselect
+        path="programKeys"
+        labelText="Program"
+        label="Choose one or more"
+        hideLabel={false}
+        items={programs.map(p => ({ value: p.key, label: p.title }))}
+      />
+    </svelte:fragment>
+    <FieldMultiselect
+      path="periodIds"
+      label="Periods"
+      placeholder="Select Periods"
+      items={allPeriods.map(p => ({ value: p.id, label: p.name }))}
+      filterable
+    />
+    {#each filterIndexes as filterIdx (filterIdx.category)}
+      <FieldMultiselect path="indexes.{filterIdx.category}"
+        label={filterIdx.categoryLabel}
+        placeholder={filterIdx.categoryLabel}
+        items={filterIdx.listable ? filterIdx.values : unlistableIndexItems[filterIdx.category] ?? []}
+        filterable={!filterIdx.listable}
+        on:input={!filterIdx.listable ? searchIndexItems(filterIdx.category) : () => {}}
+      />
+    {/each}
+    <FieldDate
+      path="createdAfter"
+      labelText="Created After"
+      placeholder="Select a date"
+      beginningOfDay
+    />
+    <FieldDate
+      path="createdBefore"
+      labelText="Created Before"
+      placeholder="Select a date"
+      endOfDay
+    />
+    <Panel bind:expanded={showDateFilters} expandable title="Additional Date Filters">
+      <FieldDate
+        path="submittedAfter"
+        labelText="Submitted After"
+        placeholder="Select a date"
+        beginningOfDay
+      />
+      <FieldDate
+        path="submittedBefore"
+        labelText="Submitted Before"
+        placeholder="Select a date"
+        endOfDay
+      />
+      <FieldDate
+        path="closedAfter"
+        labelText="Closed After"
+        placeholder="Select a date"
+        beginningOfDay
+      />
+      <FieldDate
+        path="closedBefore"
+        labelText="Closed Before"
+        placeholder="Select a date"
+        endOfDay
+      />
+      <FieldDate
+        path="updatedAfter"
+        labelText="Updated After"
+        placeholder="Select a date"
+        beginningOfDay
+      />
+      <FieldDate
+        path="updatedBefore"
+        labelText="Updated Before"
+        placeholder="Select a date"
+        endOfDay
+      />
+    </Panel>
+  </FilterUI>
+  </div>
+  <IntroPanel title="All Applications" subtitle="This is where you can see all applications submitted to the business app. Browse them all or use the filters above to narrow down applications." />
+  <ColumnList
+    autoHideColumns
+    title={uiRegistry.getPlural('appRequest')}
+    columns={[
+      { id: 'id', label: 'Request #', fixed: '90px', minWidth: 90, tags: r => [{ label: r.id }] },
+      { id: 'login', label: uiRegistry.getWord('login'), minWidth: 100, tags: r => [{ label: r.applicant.login, type: 'green' }] },
+      { id: 'period', label: uiRegistry.getWord('period'), minWidth: 150, render: r => htmlEncode(r.period.name) },
+      { id: 'name', label: 'Name', render: r => r.applicant.fullname, grow: 2 },
+      { id: 'dateSubmitted', label: 'Submitted', minWidth: 120, render: r => twoLineDateHtml(r.createdAt) },
+      { id: 'program', label: 'Program', minWidth: 220, component: ProgramStatusCell },
+      { id: 'status', label: 'Application status', minWidth: 150, tags: r => getReviewerStatusTags(r.status, r.phase, r.closedAt) },
+      ...indexColumns,
+      { id: 'lastUpdated', label: 'Last Updated', minWidth: 120, render: r => twoLineDateHtml(r.updatedAt) }
+    ]}
+    selectedActions={rows => [
+      { label: 'Download selected', icon: DocExport, onClick: () => downloadCSV(rows.map(r => r.id)) }
+    ]}
+    listActions={[
+      ...(access.createAppRequestOther
+        ? [
+          { label: `Create ${uiRegistry.getWord('appRequest')}`, onClick: openCreateDialog }
+        ]
+        : []
+      ),
+      { label: 'Download', icon: DocExport, onClick: async () => { await downloadCSV() } }
+    ]}
+    actions={row => [
+      { icon: View, label: 'View', onClick: () => { goto(`/requests/${row.id}/approve`) } }
+    ]}
+    rows={requests}
+  >
+    <svelte:fragment let:row>
+      <div class="[ mb-2 ]"><strong>Programs</strong></div>
+      <ProgramStatusCell {row} rollup={false} />
+    </svelte:fragment>
+  </ColumnList>
+  <Pagination
+    totalItems={data.pageInfo.appRequests?.totalItems}
+    page={data.pageInfo.appRequests?.currentPage}
+    pageSize={25}
+    chooseSize
+  />
+</div>
+
+<PanelFormDialog open={createDialog} title={`Create ${uiRegistry.getWord('appRequest')}`} validate={validateAppRequest} submit={submitAppRequest} on:cancel={closeCreateDialog} on:saved={onCreateSaved}>
+  <FieldSelect
+    labelText={uiRegistry.getWord('period')}
+    path="periodId"
+    items={openPeriods.map(p => ({ value: p.id, label: p.name }))}
+    required
+    helperText={`Select the ${uiRegistry.getWord('period').toLowerCase()} in which you want to create an ${uiRegistry.getWord('appRequest').toLowerCase()}.`}
+  />
+  <FieldTextInput
+    path="login"
+    labelText={`Applicant ${uiRegistry.getWord('login')}`}
+    required
+    notNull
+    helperText={`Enter the ${uiRegistry.getWord('login').toLowerCase()} of the applicant for this request.`}
+  />
+</PanelFormDialog>
+
+<style>
+  .intro-wide :global(.intro-panel .content-start) {
+    max-width: none;
+  }
+  /* the quick-filter fields carry labels above them; bottom-align the row so the search box and
+     More filters button sit level with the fields rather than with the labels */
+  .requests-filters :global(.filter-ui-container) {
+    align-items: flex-end;
+  }
+  .app-requests-intro {
+    background-color: var(--cds-layer);
+  }
+</style>

package/app/src/routes/requests/+page.ts

@@ -0,0 +1,24 @@
+import { extractMergedFilters, extractPaginationParams } from '@txstate-mws/carbon-svelte'
+import { api, splitStatusFilter } from '$internal'
+import type { AppRequestFilter } from '@reqquest/ui'
+import type { PageLoad } from './$types'
+import { error } from '@sveltejs/kit'
+
+export const _defaultRequestListFilters = {}
+
+export const load: PageLoad = async ({ url, parent }) => {
+  const { access } = await parent()
+  // access is missing only when the layout failed; it renders layoutError in place of the page, so don't mask it
+  if (!access) return {} as never
+  if (!access.viewAppRequestList) throw error(403)
+  const { page, pagesize } = extractPaginationParams(url)
+  const { status, ...rest } = extractMergedFilters(url)
+  const filters: Omit<AppRequestFilter, 'indexes'> = { ...rest, ...splitStatusFilter(status) }
+  const [response, allPeriods, programs] = await Promise.all([
+    api.getAppRequests(filters, { page, perPage: pagesize }),
+    api.getPeriodList(),
+    api.getPrograms()
+  ])
+  const openPeriods = allPeriods.filter(p => p.actions.createAppRequest)
+  return { ...response, allPeriods, openPeriods, filters, programs }
+}

package/app/src/routes/requests/[id]/+layout.ts

@@ -0,0 +1,11 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import { uiRegistry } from '$local'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = async input => {
+  const appRequest = await api.getBasicRequestData(input.params.id)
+  input.depends('request:id')
+  if (!appRequest) throw error(404, `${uiRegistry.getWord('appRequest')} not found. It may have been deleted or you do not have permission to view it.`)
+  return { basicRequestData: appRequest, requestId: input.params.id }
+}

package/app/src/routes/requests/[id]/accept/+layout.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { ErrorPage, ProgressNav, type RootStepItem, type StepItem } from '@txstate-mws/carbon-svelte'
+  import { setContext } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { resolve } from '$app/paths'
+  import { page } from '$app/stores'
+  import type { LayoutData } from './$types'
+
+  export let data: LayoutData
+  $: ({ appRequestForExport, applicationsAccept } = data)
+
+  function getNavItems (..._: any[]) {
+    const navItems: RootStepItem[] = []
+    let nextHref: string | undefined
+    let prevHref: string | undefined
+    let foundCurrent = false
+    let lastprompt: string | undefined
+
+    for (const application of applicationsAccept) {
+      const substeps: StepItem[] = []
+      for (const requirement of application.requirements) {
+        for (const prompt of requirement.prompts) {
+          if (foundCurrent) {
+            nextHref = resolve(`/requests/${appRequestForExport.id}/accept/${prompt.id}`)
+            foundCurrent = false
+          }
+          if ($page.params.promptId === prompt.id) {
+            foundCurrent = true
+            if (lastprompt) prevHref = resolve(`/requests/${appRequestForExport.id}/accept/${lastprompt}`)
+          }
+          lastprompt = prompt.id
+          substeps.push({
+            id: `prompt${prompt.id}`,
+            label: prompt.navTitle,
+            href: resolve(`/requests/${appRequestForExport.id}/accept/${prompt.id}`),
+            type: $page.params.promptId === prompt.id
+              ? 'current'
+              : prompt.answered && !prompt.invalidated ? 'complete' : 'available'
+          })
+        }
+      }
+      if (substeps.length > 0) {
+        navItems.push({
+          id: `application${application.id}`,
+          label: application.navTitle,
+          href: substeps[0].href,
+          type: substeps.some(s => s.type === 'current')
+            ? 'current'
+            : substeps.every(s => s.type === 'complete')
+              ? 'complete'
+              : 'available',
+          substeps
+        })
+      }
+    }
+    lastprompt = undefined
+    navItems.push({
+      id: 'review',
+      label: 'Review submission',
+      href: resolve(`/requests/${appRequestForExport.id}/accept/review`),
+      type: $page.route.id === '/requests/[id]/accept/review' ? 'current' : 'available',
+      substeps: []
+    })
+    nextHref ??= resolve(`/requests/${appRequestForExport.id}/accept/review`)
+    return { navItems, nextHref, prevHref }
+  }
+  $: ({ navItems, nextHref, prevHref } = getNavItems(appRequestForExport, applicationsAccept, $page))
+  $: notInNavigation = !navItems.some(item => item.type === 'current' || item.substeps.some(s => s.type === 'current'))
+  const nextHrefStore = writable({ nextHref, prevHref })
+  $: nextHrefStore.set({ nextHref, prevHref })
+  setContext('nextHref', nextHrefStore)
+</script>
+
+<ProgressNav steps={navItems}>
+  {#if notInNavigation}
+    <ErrorPage error={{ status: 404, message: 'Not Found' }} />
+  {:else}
+    <slot />
+  {/if}
+</ProgressNav>

package/app/src/routes/requests/[id]/accept/+layout.ts

@@ -0,0 +1,12 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+  const { appRequest, ...applicationInfo } = await api.getAppRequestForExport(params.id)
+  depends('request:apply')
+  // separate depend key so the nav/answered state can be refreshed without re-running the prompt page load, which was remounting the current prompt and could flash a skeleton.
+  depends('request:apply:nav')
+  if (!appRequest.actions.viewAcceptUI) throw error(404, 'This application cannot be accepted at this time.')
+  return { ...applicationInfo, appRequestForExport: { ...appRequest, applications: undefined } }
+}

package/app/src/routes/requests/[id]/accept/+page.ts

@@ -0,0 +1,13 @@
+import { redirect } from '@sveltejs/kit'
+import { resolve } from '$app/paths'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, parent }) => {
+  const { applicationsAccept } = await parent()
+  for (const prompt of applicationsAccept.flatMap(a => a.requirements).flatMap(r => r.prompts)) {
+    if (!prompt.answered || prompt.invalidated) {
+      throw redirect(303, resolve(`/requests/${params.id}/accept/${prompt.id}`))
+    }
+  }
+  throw redirect(303, resolve(`/requests/${params.id}/accept/review`))
+}

package/app/src/routes/requests/[id]/accept/[promptId]/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ApplicantPromptPage } from '$internal'
+  import type { PageData } from './$types'
+
+  export let data: PageData
+</script>
+<ApplicantPromptPage {data} statusReasons={data.promptsById[data.prompt.id]?.statusReasons ?? []} />

package/app/src/routes/requests/[id]/accept/[promptId]/+page.ts

@@ -0,0 +1,10 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, depends, parent }) => {
+  const { appRequest, prompt } = await api.getApplicantPrompt(params.id, params.promptId)  
+  depends('request:apply')  
+  if (!prompt) throw error(404, 'Prompt not found')
+  return { prompt, dataVersion: appRequest.dataVersion }
+}

package/app/src/routes/requests/[id]/accept/review/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { toasts } from '@txstate-mws/svelte-components'
+  import { Button } from 'carbon-components-svelte'
+  import Touch_1 from 'carbon-icons-svelte/lib/Touch_1.svelte'
+  import { getContext } from 'svelte'
+  import type { Writable } from 'svelte/store'
+  import { afterNavigate, goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import type { ResolvedPathname } from '$app/types'
+  import { api, ApplicationDetailsView } from '$internal'
+  import { enumAppRequestStatus } from '@reqquest/ui'
+  import type { PageData } from './$types'
+  import { uiRegistry } from '$local'
+
+  /**
+   * This page will allow applicants to review all the information they've
+   * entered so far, and to navigate to any prompts that need correction, then
+   * allows them to submit the app request.
+   */
+  export let data: PageData
+  $: ({ appRequestForExport, applicationsAccept } = data)
+
+  const nextHref = getContext<Writable<{ nextHref?: ResolvedPathname, prevHref?: ResolvedPathname }>>('nextHref')
+  $: hasPreviousPrompt = !!$nextHref.prevHref
+
+  async function handleBack () {
+    if ($nextHref.prevHref) {
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto($nextHref.prevHref)
+    }
+  }
+
+  async function onSubmit () {
+    const resp = await api.appRequestPhaseChange(appRequestForExport.id, 'acceptOffer')
+    if (resp.success) await goto(resolve('/dashboards/applicant'))
+    else toasts.add({ type: 'error', title: 'Submission Failed', message: resp.messages.map(m => m.message).join('\n') || 'There was an error submitting your application. Please try again later.' })
+  }
+
+  afterNavigate(() => {
+    const h2 = document.querySelector('h2')
+    if (h2) {
+      h2.tabIndex = -1
+      h2.focus()
+    }
+  })
+</script>
+
+<ApplicationDetailsView
+  appRequest={appRequestForExport}
+  applications={applicationsAccept}
+  appData={appRequestForExport.data}
+  {uiRegistry}
+  title="Review Your Submission"
+  subtitle="Please review all information before submitting."
+  expandable={false}
+  showWarningsInline={true}
+  showAppRequestStatus={false}
+  statusDisplay="icons"
+>
+  <svelte:fragment slot="footer">
+    <footer class="[ mt-6 ] flow">
+      {#if uiRegistry.config.supportUrl}
+        <p class="text-center">If you think there was a mistake please review your answers or reach out through the support page.</p>
+      {/if}
+      <div class="footer-actions">
+        {#if hasPreviousPrompt}
+            <Button kind="ghost" on:click={handleBack}>Back</Button>
+        {/if}
+        {#if uiRegistry.config.supportUrl}
+            <Button kind="ghost" href={uiRegistry.config.supportUrl}>Support</Button>
+        {/if}
+        {#if appRequestForExport.status === enumAppRequestStatus.READY_TO_ACCEPT}
+          <Button icon={Touch_1} on:click={onSubmit}>Submit</Button>
+        {/if}
+      </div>
+    </footer>
+  </svelte:fragment>
+</ApplicationDetailsView>
+
+<style>
+  .footer-actions {
+    display: flex;
+    gap: 3rem;
+    justify-content: center;
+    margin-top: 2rem;
+  }
+</style>