Display initial form fields with validation

app/src/controllers/chefs.ts

@@ -57,6 +57,15 @@ const controller = {
     } catch (e: unknown) {
       next(e);
     }
+  },
+
+  getSubmissionStatus: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await chefsService.getSubmissionStatus(req.query.formId as string, req.params.formSubmissionId);
+      res.status(200).send(response);
+    } catch (e: unknown) {
+      next(e);
+    }
   }
 };
 

app/src/routes/v1/chefs.ts

@@ -22,4 +22,13 @@ router.get(
   }
 );
 
+// Submission status endpoint
+router.get(
+  '/submission/:formSubmissionId/status',
+  requireChefsFormConfigData,
+  (req: Request, res: Response, next: NextFunction): void => {
+    chefsController.getSubmissionStatus(req, res, next);
+  }
+);
+
 export default router;

app/src/services/chefs.ts

@@ -40,6 +40,15 @@ const service = {
     } catch (e: unknown) {
       throw e;
     }
+  },
+
+  getSubmissionStatus: async (formId: string, formSubmissionId: string) => {
+    try {
+      const response = await chefsAxios(formId).get(`submissions/${formSubmissionId}/status`);
+      return response.data;
+    } catch (e: unknown) {
+      throw e;
+    }
   }
 };
 

frontend/src/assets/main.scss

@@ -127,6 +127,7 @@ a:visited {
 }
 
 .p-button {
+  border-width: 2px;
   &:not(.p-button-secondary, .p-button-success, .p-button-info, .p-button-warning, .p-button-help, .p-button-danger) {
     color: $app-primary;
     &:not(.p-button-outlined, .p-button-text) {

frontend/src/components/form/Dropdown.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { Dropdown } from '@/lib/primevue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+  options: Array<string>;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field col-12">
+    <label :for="name">{{ label }}</label>
+    <Dropdown
+      v-model.trim="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :placeholder="placeholder"
+      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      :disabled="disabled"
+      :options="props.options"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <ErrorMessage :name="name" />
+  </div>
+</template>

frontend/src/components/form/TextArea.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { Textarea } from '@/lib/primevue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field col-12">
+    <label :for="name">{{ label }}</label>
+    <Textarea
+      v-model.trim="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :placeholder="placeholder"
+      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      :disabled="disabled"
+      :rows="5"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <ErrorMessage :name="name" />
+  </div>
+</template>

frontend/src/components/form/TextInput.vue

@@ -25,23 +25,17 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 </script>
 
 <template>
-  <div class="field">
+  <div class="field col-12">
     <label :for="name">{{ label }}</label>
     <InputText
       v-model.trim="value"
       :aria-describedby="`${name}-help`"
       :name="name"
       :placeholder="placeholder"
-      :class="{ 'p-invalid': errorMessage }"
+      :class="'w-full ' + { 'p-invalid': errorMessage }"
       :disabled="disabled"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
     <ErrorMessage :name="name" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.field * {
-  display: block;
-}
-</style>

frontend/src/components/form/index.ts

@@ -1,4 +1,6 @@
 export { default as CopyToClipboard } from './CopyToClipboard.vue';
+export { default as Dropdown } from './Dropdown.vue';
 export { default as GridRow } from './GridRow.vue';
 export { default as Password } from './Password.vue';
+export { default as TextArea } from './TextArea.vue';
 export { default as TextInput } from './TextInput.vue';

frontend/src/components/submission/SubmissionForm.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import { number, object, string } from 'yup';
+
+import { Dropdown, TextArea, TextInput } from '@/components/form';
+import { Button } from '@/lib/primevue';
+
+// Props
+type Props = {
+  editable: boolean;
+  submission: any;
+  submissionStatus: any;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// Emites
+const emit = defineEmits(['submit', 'cancel']);
+
+// Default form values
+const initialFormValues: any = {
+  assignee: props.submissionStatus.user?.username,
+  confirmationId: props.submission.confirmationId,
+  intakeStatus: props.submissionStatus.code,
+  queuePriority: props.submission.submission.data.queuePriority
+};
+
+// Form validation schema
+const formSchema = object({
+  addedToATS: string().oneOf(['Y', 'N']).required().label('Added to ATS'),
+  applicationStatus: string()
+    .matches(/^[a-zA-Z]+$/, { excludeEmptyString: true, message: 'Application Status may only contain letters' })
+    .label('Application Status'),
+  assignee: string()
+    .when('intakeStatus', {
+      is: (val: string) => val !== 'SUBMITTED',
+      then: (schema) => schema.required(),
+      otherwise: (schema) => schema.notRequired()
+    })
+    .label('Assignee'),
+  atsClientNumber: string()
+    .when('addedToATS', {
+      is: 'Y',
+      then: (schema) => schema.required(),
+      otherwise: (schema) => schema.notRequired()
+    })
+    .label('ATS Client Number'),
+  confirmationId: string().required().label('Confirmation ID'),
+  financiallySupported: string().oneOf(['Y', 'N']).required().label('Financially Supported'),
+  intakeStatus: string().required().label('Intake Status'),
+  queuePriority: number()
+    .required()
+    .min(0)
+    .integer()
+    .typeError('Queue Priority must be a number')
+    .label('Queue Priority')
+});
+
+const intakeStatusList = ['SUBMITTED', 'ASSIGNED', 'COMPLETED'];
+
+// Actions
+const onCancel = () => {
+  emit('cancel');
+};
+
+const onSubmit = (values: any) => {
+  console.log(values); // eslint-disable-line no-console
+  emit('submit');
+};
+</script>
+
+<template>
+  <div class="formgrid grid">
+    <Form
+      v-slot="{ handleReset }"
+      :initial-values="initialFormValues"
+      :validation-schema="formSchema"
+      @submit="onSubmit"
+    >
+      <TextInput
+        name="confirmationId"
+        label="Confirmation ID *"
+        :disabled="!props.editable"
+        autofocus
+      />
+      <TextInput
+        name="atsClientNumber"
+        label="ATS Client Number"
+        :disabled="!props.editable"
+      />
+      <TextInput
+        name="addedToATS"
+        label="Added to ATS *"
+        :disabled="!props.editable"
+      />
+      <TextInput
+        name="financiallySupported"
+        label="Financially Supported *"
+        :disabled="!props.editable"
+      />
+      <TextInput
+        name="applicationStatus"
+        label="Application Status"
+        :disabled="!props.editable"
+      />
+      <TextInput
+        name="queuePriority"
+        label="Queue Priority"
+        :disabled="!props.editable"
+      />
+      <TextArea
+        name="notes"
+        label="Notes"
+        :disabled="!props.editable"
+      />
+      <TextInput
+        name="assignee"
+        label="Assignee"
+        :disabled="!props.editable"
+      />
+      <Dropdown
+        name="intakeStatus"
+        label="Intake Status *"
+        :disabled="!props.editable"
+        :options="intakeStatusList"
+      />
+
+      <div class="field col-12">
+        <Button
+          label="Save"
+          type="submit"
+          icon="pi pi-check"
+          :disabled="!props.editable"
+        />
+
+        <Button
+          label="Cancel"
+          outlined
+          class="ml-2"
+          icon="pi pi-times"
+          :disabled="!props.editable"
+          @click="
+            () => {
+              handleReset();
+              onCancel();
+            }
+          "
+        />
+      </div>
+    </Form>
+  </div>
+</template>

frontend/src/lib/primevue/index.ts

@@ -7,12 +7,14 @@ export { default as ConfirmDialog } from 'primevue/confirmdialog';
 export { default as DataTable } from 'primevue/datatable';
 export { default as Dialog } from 'primevue/dialog';
 export { default as Divider } from 'primevue/divider';
+export { default as Dropdown } from 'primevue/dropdown';
 export { default as InputSwitch } from 'primevue/inputswitch';
 export { default as InputText } from 'primevue/inputtext';
 export { default as Message } from 'primevue/message';
 export { default as Password } from 'primevue/password';
 export { default as ProgressBar } from 'primevue/progressbar';
 export { default as ProgressSpinner } from 'primevue/progressspinner';
+export { default as Textarea } from 'primevue/textarea';
 export { default as Toast } from 'primevue/toast';
 export { default as Toolbar } from 'primevue/toolbar';
 

frontend/src/services/chefsService.ts

@@ -15,5 +15,13 @@ export default {
    */
   getSubmission(formId: string, formSubmissionId: string) {
     return appAxios().get(`chefs/submission/${formSubmissionId}`, { params: { formId } });
+  },
+
+  /**
+   * @function getSubmissionStatus
+   * @returns {Promise} An axios response
+   */
+  getSubmissionStatus(formId: string, formSubmissionId: string) {
+    return appAxios().get(`chefs/submission/${formSubmissionId}/status`, { params: { formId } });
   }
 };