@reqquest/ui 1.1.0 → 1.1.2

package/dist/components/FieldCardCheckbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CardSelectItem } from './FieldCardRadio.svelte'
+  import type { CardSelectItem } from '../components/FieldCardRadio.svelte'
   import { Card, CardGrid, FormInlineNotification } from '@txstate-mws/carbon-svelte'
   import { FORM_CONTEXT, FORM_INHERITED_PATH, Field, type FormStore } from '@txstate-mws/svelte-forms'
   import { Store } from '@txstate-mws/svelte-store'

package/dist/components/index.js

@@ -1,12 +1,3 @@
-export { default as ApplicantProgramList } from './ApplicantProgramList.svelte';
-export { default as ApplicantPromptPage } from './ApplicantPromptPage.svelte';
-export { default as ApplicationDetailsView } from './ApplicationDetailsView.svelte';
-export { default as AppRequestCard } from './AppRequestCard.svelte';
-export { default as ButtonLoadingIcon } from './ButtonLoadingIcon.svelte';
-export { default as IntroPanel } from './IntroPanel.svelte';
-export { default as PeriodPanel } from './PeriodPanel.svelte';
-export { default as QuestionnairePrompt } from './QuestionnairePrompt.svelte';
-export { default as RenderDisplayComponent } from './RenderDisplayComponent.svelte';
-export { default as FieldCardRadio } from './FieldCardRadio.svelte';
 export { default as FieldCardCheckbox } from './FieldCardCheckbox.svelte';
-export * from './types.js';
+export { default as FieldCardRadio } from './FieldCardRadio.svelte';
+export { default as QuestionnairePrompt } from '../../lib/components/QuestionnairePrompt.svelte';

package/dist/index.js

@@ -1,6 +1,4 @@
-export * from './registry.js';
-export * from './api.js';
 export * from './components/index.js';
+export * from './registry.js';
+export * from './types.js';
 export * from './typed-client/index.js';
-export * from './util.js';
-export * from './status-utils.js';

package/dist/typed-client/schema.graphql

@@ -278,17 +278,6 @@ Represents a group of applications all being applied for at the same time. As pa
 type AppRequest {
   """Actions the user can take on this app request."""
   actions: AppRequestActions!
-
-  """
-  The activity log for this app request. This is a list of actions taken on the app request, such as submission, updating prompts, make an offer, add a note, etc. It will be sorted by the date of the activity in descending order.
-  """
-  activity(
-    """
-    Filters to apply to the activity log. This can be used to filter by action type, date range, etc.
-    """
-    filters: AppRequestActivityFilters
-    paged: Pagination
-  ): [AppRequestActivity!]!
   applicant: AccessUser!
   applications: [Application!]!
 
@@ -403,6 +392,16 @@ type AppRequestActions {
 
   """User may submit this app request either as or on behalf of the owner."""
   submit: Boolean!
+
+  """
+  User is able to see the acceptance UI. i.e. they are the applicant and the request is in the appropriate phase.
+  """
+  viewAcceptUI: Boolean!
+
+  """
+  User is able to see the applicant UI. i.e. they are the applicant and the request is in the appropriate phase.
+  """
+  viewApplyUI: Boolean!
 }
 
 type AppRequestActivity {
@@ -538,13 +537,23 @@ type AppRequestIndexCategory {
   If this is > 0, the index values should be shown on the applicant dashboard, sorted by this priority in descending order.
   """
   applicantDashboardPriority: Float
+
+  """
+  The internal category name for this index. Use this with any GraphQL filters.
+  """
   category: String!
+
+  """A human-friendly label for this category that can be shown in the UI."""
   categoryLabel: String!
 
   """
   If this is > 0, the index values should be shown on the list filters, sorted by this priority in descending order.
   """
   listFiltersPriority: Float
+
+  """
+  If true, this category has few enough values that it is reasonable to list them all in a dropdown or similar UI control. If false, the list of values is likely to get very long and it would be better to use an autofill combobox or something.
+  """
   listable: Boolean!
 
   """
@@ -960,13 +969,23 @@ type IndexCategory {
   If this is > 0, the index values should be shown on the applicant dashboard, sorted by this priority in descending order.
   """
   applicantDashboardPriority: Float
+
+  """
+  The internal category name for this index. Use this with any GraphQL filters.
+  """
   category: String!
+
+  """A human-friendly label for this category that can be shown in the UI."""
   categoryLabel: String!
 
   """
   If this is > 0, the index values should be shown on the list filters, sorted by this priority in descending order.
   """
   listFiltersPriority: Float
+
+  """
+  If true, this category has few enough values that it is reasonable to list them all in a dropdown or similar UI control. If false, the list of values is likely to get very long and it would be better to use an autofill combobox or something.
+  """
   listable: Boolean!
 
   """
@@ -1057,6 +1076,9 @@ type Mutation {
   """Create a new app request."""
   createAppRequest(login: String!, periodId: ID!, validateOnly: Boolean): ValidatedAppRequestResponse!
   createPeriod(copyPeriodId: String, period: PeriodUpdate!, validateOnly: Boolean): ValidatedPeriodResponse!
+
+  """Delete an existing note."""
+  deleteNote(noteId: String!): Boolean!
   deletePeriod(periodId: ID!): ValidatedResponse!
   markPeriodReviewed(periodId: ID!, validateOnly: Boolean): ValidatedPeriodResponse!
 
@@ -1097,6 +1119,9 @@ type Mutation {
   """Submit the app request."""
   submitAppRequest(appRequestId: ID!): ValidatedAppRequestResponse!
   updateConfiguration(data: JsonData!, key: String!, periodId: ID!, validateOnly: Boolean): ValidatedConfigurationResponse!
+
+  """Update the content of an existing note."""
+  updateNote(content: String!, noteId: String!): Note!
   updatePeriod(periodId: ID!, update: PeriodUpdate!, validateOnly: Boolean): ValidatedPeriodResponse!
   updatePeriodRequirement(disabled: Boolean!, periodId: String!, requirementKey: String!): ValidatedResponse!
 
@@ -1159,10 +1184,12 @@ type Note {
   content: String!
   createdAt: DateTime!
   id: ID!
+  updatedAt: DateTime!
 }
 
 """Actions that can be performed on a note."""
 type NoteActions {
+  delete: Boolean!
   update: Boolean!
 }
 
@@ -1426,6 +1453,18 @@ type Query {
   "\n    This is the global access object. Each field represents a global permission\n    like the ability to view the role management interface.\n  "
   access: Access!
   accessUsers(filter: AccessUserFilter, paged: Pagination): [AccessUser!]!
+
+  """
+  The activity log for this app request. This is a list of actions taken on the app request, such as submission, updating prompts, make an offer, add a note, etc. It will be sorted by the date of the activity in descending order.
+  """
+  appRequestActivity(
+    """
+    Filters to apply to the activity log. This can be used to filter by action type, date range, etc.
+    """
+    filters: AppRequestActivityFilters
+    id: String!
+    paged: Pagination
+  ): [AppRequestActivity!]!
   appRequestIndexes(
     categories: [String!]
 
@@ -1449,6 +1488,12 @@ type Query {
   A list of all possible scopes. Scopes are used to limit users when they are accessing the system through an alternate UI or login method. For instance, if you generate an authentication token to give to a third party, it may have a scope identifying that third party and limiting their access even though they are acting as you. Roles must match the token scope in order to apply permissions.
   """
   scopes: [String!]!
+  userIndexes(
+    """
+    Returns indexes that are flagged to appear in this destination. Also sorts for this destination.
+    """
+    for: AppRequestIndexDestination
+  ): [IndexCategory!]!
 }
 
 """

package/dist/typed-client/types.js

@@ -405,17 +405,6 @@ export default {
             "actions": [
                 23
             ],
-            "activity": [
-                24,
-                {
-                    "filters": [
-                        25
-                    ],
-                    "paged": [
-                        56
-                    ]
-                }
-            ],
             "applicant": [
                 17
             ],
@@ -531,6 +520,12 @@ export default {
             "submit": [
                 37
             ],
+            "viewAcceptUI": [
+                37
+            ],
+            "viewApplyUI": [
+                37
+            ],
             "__typename": [
                 77
             ]
@@ -1038,6 +1033,15 @@ export default {
                     ]
                 }
             ],
+            "deleteNote": [
+                37,
+                {
+                    "noteId": [
+                        77,
+                        "String!"
+                    ]
+                }
+            ],
             "deletePeriod": [
                 81,
                 {
@@ -1223,6 +1227,19 @@ export default {
                     ]
                 }
             ],
+            "updateNote": [
+                54,
+                {
+                    "content": [
+                        77,
+                        "String!"
+                    ],
+                    "noteId": [
+                        77,
+                        "String!"
+                    ]
+                }
+            ],
             "updatePeriod": [
                 80,
                 {
@@ -1313,11 +1330,17 @@ export default {
             "id": [
                 45
             ],
+            "updatedAt": [
+                43
+            ],
             "__typename": [
                 77
             ]
         },
         "NoteActions": {
+            "delete": [
+                37
+            ],
             "update": [
                 37
             ],
@@ -1623,6 +1646,21 @@ export default {
                     ]
                 }
             ],
+            "appRequestActivity": [
+                24,
+                {
+                    "filters": [
+                        25
+                    ],
+                    "id": [
+                        77,
+                        "String!"
+                    ],
+                    "paged": [
+                        56
+                    ]
+                }
+            ],
             "appRequestIndexes": [
                 46,
                 {
@@ -1679,6 +1717,14 @@ export default {
             "scopes": [
                 77
             ],
+            "userIndexes": [
+                46,
+                {
+                    "for": [
+                        28
+                    ]
+                }
+            ],
             "__typename": [
                 77
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqquest/ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,14 +23,14 @@
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
-    "svelte": "^4.2.15 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
     "@txstate-mws/carbon-svelte": "^1.5.5",
     "@txstate-mws/fastify-shared": "^1.1.0",
     "@txstate-mws/svelte-components": "^1.6.11",
     "@txstate-mws/sveltekit-utils": "^1.0.2",
-    "carbon-components-svelte": ">=0.85.1 <1",
+    "carbon-components-svelte": ">=0.85.1 <0.96.0",
     "carbon-icons-svelte": "^13.0.0",
     "luxon": "^3.5.0",
     "txstate-utils": "^1.8.15"

package/dist/components/AppRequestCard.svelte

@@ -1,172 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation'
-  import { resolve } from '$app/paths'
-  import { getApplicationStatusInfo, getAppRequestStatusInfo, getNavigationButton } from '../status-utils.js'
-  import { longNumericTime } from '../util.js'
-  import type { ActionItem } from '@txstate-mws/carbon-svelte'
-  import { Card, TagSet } from '@txstate-mws/carbon-svelte'
-  import Button from "carbon-components-svelte/src/Button/Button.svelte";
-  import type { PageData } from '../../routes/dashboards/applicant/$types'
-  import StatusMessageList from './StatusMessageList.svelte'
-  import WarningIconYellow from './WarningIconYellow.svelte'
-  import { enumPromptVisibility } from '../typed-client'
-
-  // Type for the partial AppRequest data passed from dashboard
-  type DashboardAppRequest = PageData['appRequests'][number]
-
-  export let request: DashboardAppRequest
-  export let actions: ActionItem[] = []
-  export let showAcceptanceButtons = true
-  export let onAcceptanceNavigate: ((requestId: string) => void) | undefined = undefined
-
-  $: statusInfo = getAppRequestStatusInfo(request.status)
-  $: firstInvalidatedPrompt = request.applications
-    .flatMap(app => app.requirements)
-    .flatMap(req => req.prompts)
-    .find(p => p.visibility === enumPromptVisibility.AVAILABLE && p.invalidated && p.invalidatedReason)
-  $: navButton = firstInvalidatedPrompt
-    ? { label: 'Make corrections', href: `/requests/${request.id}/apply/${firstInvalidatedPrompt.id}` }
-    : getNavigationButton(request.status, request.id)
-
-  async function handleAcceptanceClick () {
-    if (onAcceptanceNavigate) {
-      onAcceptanceNavigate(request.id)
-    } else {
-      await goto(resolve(`/requests/${request.id}/apply`))
-    }
-  }
-</script>
-
-<Card
-  title={request.period.name}
-  subhead={`Started: ${longNumericTime(request.createdAt)}`}
-  tags={[{ label: statusInfo.label, type: statusInfo.color }]}
-  tagsInBody
-  {actions}
-  forceOverflow={true}
-  navigations={navButton ? [navButton] : []}>
-
-  <!-- Status description -->
-  {#if statusInfo.description}
-    <p class="pl-1.5 mb-4 text-sm">{statusInfo.description}</p>
-  {/if}
-
-  <!-- Benefits section -->
-  <div class="rounded">
-    <h4 class="m-0 mb-2 text-lg benefits-title">Potential benefits</h4>
-    <p class="m-0 mb-3 benefits-subtitle text-sm">Benefit results will be finalized once the application submission and review is completed.</p>
-
-    {#if request.applications.length > 0}
-      {#each request.applications as application (application.id)}
-        {@const invalidatedPrompts = application.requirements
-          .flatMap(req => req.prompts)
-          .filter(p => p.visibility === enumPromptVisibility.AVAILABLE && p.invalidated && p.invalidatedReason)
-        }
-        {@const warningReqs = application.requirements.filter(r => r.status === 'WARNING' && r.statusReason)}
-        {@const appStatusTag = invalidatedPrompts.length > 0
-          ? { label: 'Needs corrections', color: 'magenta' as const }
-          : getApplicationStatusInfo(application.status)}
-        <div class="program-status py-2 px-4 mb-4">
-          <div class="flex items-center">
-            <span class="font-medium">{application.title}</span>
-            <div class="tagwrap">
-              <TagSet tags={[{ label: appStatusTag.label, type: appStatusTag.color }]} />
-            </div>
-            {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
-              <WarningIconYellow size={20} />
-            {/if}
-
-            <!-- Acceptance buttons -->
-            {#if showAcceptanceButtons && (request.status === 'ACCEPTANCE' || request.status === 'READY_TO_ACCEPT') && application.status === 'ELIGIBLE'}
-              <Button kind="primary" size="small" class="ml-auto"
-                on:click={handleAcceptanceClick}>
-                {request.status === 'READY_TO_ACCEPT' ? 'Accept Offer' : 'Review Offer'}
-              </Button>
-            {/if}
-          </div>
-
-          <!-- Status reason -->
-          {#if application.statusReason && application.status !== 'INELIGIBLE' && invalidatedPrompts.length === 0}
-            <p class="status-reason mt-2 mb-0 text-sm">{application.statusReason}</p>
-          {/if}
-
-          <!-- Warnings for PENDING/ELIGIBLE applications -->
-          {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
-            <StatusMessageList
-              items={warningReqs.map(r => ({ id: r.id, message: r.statusReason! }))}
-              variant="warning"
-              accordionTitle="Multiple warnings" />
-          {/if}
-
-          <!-- Failed requirements for INELIGIBLE applications -->
-          {#if application.status === 'INELIGIBLE' && application.requirements}
-            {@const failedRequirements = application.requirements.filter(req => req.status === 'DISQUALIFYING' && req.statusReason)}
-            <StatusMessageList
-              items={failedRequirements.map(r => ({ id: r.id, message: r.statusReason! }))}
-              accordionTitle="Multiple eligibility issues" />
-          {/if}
-
-          <!-- Corrections needed for non-INELIGIBLE applications -->
-          {#if invalidatedPrompts.length > 0}
-            <StatusMessageList
-              items={invalidatedPrompts.map(p => ({ id: p.id, message: p.invalidatedReason! }))}
-              accordionTitle="Multiple corrections needed" />
-          {/if}
-        </div>
-      {/each}
-    {:else}
-      <p>No benefits associated with this application.</p>
-    {/if}
-  </div>
-
-  <!-- Footer info grid -->
-  <div class="mt-4 grid grid-cols-3 footer-grid">
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Request number:</span>
-      <span class="block text-sm footer-value">{request.id.slice(0, 6).toUpperCase()}</span>
-    </div>
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Last updated:</span>
-      <span class="block text-sm footer-value">{longNumericTime(request.updatedAt)}</span>
-    </div>
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Waiting on:</span>
-      <span class="block text-sm footer-value">{statusInfo.waitingOn}</span>
-    </div>
-  </div>
-</Card>
-
-<style>
-  /* Global styles for external component overrides */
-  :global(.tagwrap .tag-set > *) {
-    max-width: 100% !important;
-  }
-
-  .benefits-subtitle {
-    color: var(--cds-text-02);
-  }
-
-  .program-status {
-    background-color: var(--cds-ui-01);
-  }
-
-  .footer-grid {
-    background-color: var(--cds-ui-01);
-  }
-
-  .footer-section {
-    border-right: 1px solid var(--cds-ui-05);
-
-  }
-  .footer-section:last-child {
-    border-right: none;
-  }
-
-  .footer-label {
-    color: var(--cds-text-01);
-  }
-
-  .footer-value {
-    color: var(--cds-text-01);
-  }
-</style>

package/dist/components/ApplicantProgramList.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-  import { TagSet } from '@txstate-mws/carbon-svelte'
-  import Button from "carbon-components-svelte/src/Button/Button.svelte";
-  import Close from "carbon-icons-svelte/lib/Close.svelte";
-import InProgress from "carbon-icons-svelte/lib/InProgress.svelte";
-import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
-import Information from "carbon-icons-svelte/lib/Information.svelte";
-  import { ucfirst } from 'txstate-utils'
-  import type { ApplicationForDetails } from './types'
-  import { enumApplicationStatus, enumIneligiblePhases, enumRequirementType, getApplicationStatusInfo } from '..'
-  import ApplicantProgramListTooltip from './ApplicantProgramListTooltip.svelte'
-  import WarningIconYellow from './WarningIconYellow.svelte'
-
-  export let applications: ApplicationForDetails[]
-  export let viewMode = false
-  export let showTooltipsAsText = false
-
-  $: promptsByApplicationId = applications.reduce<Record<string, typeof applications[0]['requirements'][0]['prompts'] | undefined>>((acc, curr) => ({
-    ...acc,
-    [curr.id]: curr.requirements
-      .filter(r => r.type === enumRequirementType.QUALIFICATION)
-      .flatMap(r => r.prompts)
-  }), {})
-
-  $: programButtonStatus = applications.reduce((acc, curr) => ({
-    ...acc,
-    [curr.id]: curr.completionStatus === enumApplicationStatus.PENDING
-      ? curr.requirements.some(r => r.prompts.some(p => p.answered && !p.invalidated))
-        ? curr.requirements.filter(r => r.type === enumRequirementType.QUALIFICATION).every(r => r.prompts.every(p => p.answered && !p.invalidated))
-          ? 'complete'
-          : 'continue'
-        : 'start'
-      : curr.completionStatus === enumApplicationStatus.INELIGIBLE
-        ? curr.ineligiblePhase === enumIneligiblePhases.PREQUAL
-          ? 'ineligible'
-          : 'revisit'
-        : 'complete'
-  }), {})
-  $: programFirstPromptId = applications.reduce((acc, curr) => ({
-    ...acc,
-    [curr.id]: (promptsByApplicationId[curr.id]?.find(p => !p.answered || p.invalidated) ?? promptsByApplicationId[curr.id]?.[0])?.id
-  }), {})
-</script>
-
-<section class="programs-container">
-  <header>
-    <div class="program column">Program</div>
-    <div class="status column">Eligibility</div>
-  </header>
-  {#each applications as application (application.id)}
-    {@const programStatus = programButtonStatus[application.id]}
-    {@const programFirstPrompt = programFirstPromptId[application.id]}
-    <div class="program column">{application.title}</div>
-    <div class="status column" class:no-tooltip={!application.statusReason?.length}>
-      {#if !viewMode}
-        <div class="icon-and-tooltip" class:wide-icon={application.completionStatus === enumApplicationStatus.INELIGIBLE}>
-          {#if application.completionStatus === enumApplicationStatus.INELIGIBLE}
-            <Close size={32} class="status-icon-ineligible" />
-          {:else if ['start', 'continue'].includes(programStatus)}
-            <InProgress size={24} class="status-icon-pending" />
-          {:else if application.hasWarning}
-            <WarningIconYellow size={24} class="status-icon-warning" />
-          {:else}
-            <CheckmarkFilled size={24} class="status-icon-complete" />
-          {/if}
-          <ApplicantProgramListTooltip {application} />
-        </div>
-        {#if programFirstPrompt && programStatus !== 'ineligible'}
-          <Button size="small" kind={programStatus === 'complete' ? 'ghost' : programStatus === 'revisit' ? 'secondary' : 'primary'} href={programFirstPrompt}>{ucfirst(programStatus)}</Button>
-        {/if}
-      {:else}
-        {@const statusInfo = getApplicationStatusInfo(application.status)}
-        <TagSet tags={[{ type: statusInfo.color, label: statusInfo.label }]} />
-        <ApplicantProgramListTooltip {application} />
-      {/if}
-    </div>
-    {#if application.warningReasons.length || application.ineligibleReasons.length}
-      <div class="tooltip-text-row" class:visible={showTooltipsAsText}>
-        {#each application.ineligibleReasons as reason (reason)}
-          <div class="tooltip-text-item">
-            <Information size={16} /> {reason}
-          </div>
-        {/each}
-        {#each application.warningReasons as reason (reason)}
-          <div class="tooltip-text-item">
-            <Information size={16} /> {reason}
-          </div>
-        {/each}
-      </div>
-    {/if}
-  {/each}
-</section>
-
-<style>
-  .programs-container {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    margin-bottom: 1.5rem;
-  }
-
-  .programs-container header {
-    display: contents;
-    font-weight: bold;
-  }
-
-  .programs-container header .column {
-    padding: 0.5rem 8px;
-  }
-
-  .programs-container .column {
-    border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
-    padding: 1rem 8px;
-  }
-
-  .programs-container :global(.status-column) {
-    flex-grow: 0;
-  }
-
-  :not(.header) .program.column {
-    display: flex;
-    align-items: center;
-  }
-
-  :not(.header) .status.column {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 12px;
-  }
-
-  .status.column :global(.reason-tooltip) {
-    height: 16px;
-  }
-  :not(.header) .status.column.no-tooltip {
-    flex-wrap: nowrap
-  }
-
-  .programs-container :global(.status-icon-pending) {
-    fill: var(--cds-support-04);
-  }
-
-  .programs-container :global(.status-icon-complete) {
-    fill: var(--cds-support-04);
-  }
-
-  .programs-container :global(.status-icon-ineligible) {
-    margin-left: -4px;
-  }
-
-  .icon-and-tooltip {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .icon-and-tooltip.wide-icon {
-    gap: 4px;
-  }
-
-  .tooltip-text-row {
-    grid-column: span 2;
-    background-color: #FBF1DA;
-    padding: 0.5rem 1rem;
-    display: none;
-  }
-
-  .tooltip-text-row.visible {
-    display: block;
-  }
-
-  .tooltip-text-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.125rem 16px;
-    color: var(--cds-text-01);
-  }
-
-  @media print {
-    .tooltip-text-row {
-      display: block !important;
-    }
-  }
-</style>