View & Edit submission data

app/src/controllers/chefs.ts

@@ -57,6 +57,28 @@ 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);
+    }
+  },
+
+  updateSubmission: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await chefsService.updateSubmission(
+        req.query.formId as string,
+        req.params.formSubmissionId,
+        req.body
+      );
+      res.status(200).send(response);
+    } catch (e: unknown) {
+      next(e);
+    }
   }
 };
 

app/src/routes/v1/chefs.ts

@@ -22,4 +22,22 @@ router.get(
   }
 );
 
+// Submission endpoint
+router.put(
+  '/submission/:formSubmissionId',
+  requireChefsFormConfigData,
+  (req: Request, res: Response, next: NextFunction): void => {
+    chefsController.updateSubmission(req, res, next);
+  }
+);
+
+// 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,24 @@
     } 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;
+    }
+  },
+
+  updateSubmission: async (formId: string, formSubmissionId: string, data: any) => {
+    try {
+      console.log('updateSubmission');
+      console.log(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/Calendar.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { Calendar } from '@/lib/primevue';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  disabled: false
+});
+
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field col">
+    <label :for="name">{{ label }}</label>
+    <Calendar
+      v-model.trim="value"
+      :aria-describedby="`${name}-help`"
+      :name="name"
+      :class="'w-full ' + { 'p-invalid': errorMessage }"
+      :disabled="disabled"
+      show-time
+      hour-format="24"
+      show-icon
+      icon-display="input"
+      date-format="yy/mm/dd"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <ErrorMessage :name="name" />
+  </div>
+</template>

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">
+    <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/Password.vue

@@ -23,7 +23,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
 </script>
 
 <template>
-  <div class="field">
+  <div class="field col">
     <label :for="props.name">{{ props.label }}</label>
     <Password
       v-model.trim="value"
@@ -39,9 +39,3 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
     <ErrorMessage :name="props.name" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.field * {
-  display: block;
-}
-</style>

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">
+    <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">
     <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,7 @@
+export { default as Calendar } from './Calendar.vue';
 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';