From 5e4510cfd733626b3ac8139400eecde2d621285d Mon Sep 17 00:00:00 2001 From: Kyle Morel Date: Wed, 1 May 2024 12:34:38 -0700 Subject: [PATCH] Add fourth step - Permits --- frontend/src/App.vue | 4 + frontend/src/components/form/Calendar.vue | 5 +- frontend/src/components/form/RadioList.vue | 11 +- .../src/components/intake/ShasIntakeForm.vue | 496 ++++++++++++++++-- frontend/src/components/layout/Navbar.vue | 3 - frontend/src/components/permit/PermitCard.vue | 4 +- .../src/components/permit/PermitModal.vue | 5 +- frontend/src/components/roadmap/Roadmap.vue | 6 +- frontend/src/lib/primevue/index.ts | 1 + frontend/src/router/index.ts | 12 +- frontend/src/store/index.ts | 1 + frontend/src/store/submissionStore.ts | 10 +- frontend/src/store/typeStore.ts | 39 ++ frontend/src/views/StartView.vue | 99 ++-- frontend/src/views/SubmissionView.vue | 8 +- 15 files changed, 597 insertions(+), 107 deletions(-) create mode 100644 frontend/src/store/typeStore.ts diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 22d47186..4d521950 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -2,6 +2,7 @@ import { storeToRefs } from 'pinia'; import { onBeforeMount, onErrorCaptured, ref } from 'vue'; import { RouterView } from 'vue-router'; + import { AppLayout, Navbar, ProgressLoader } from '@/components/layout'; import { ConfirmDialog, Message, Toast, useToast } from '@/lib/primevue'; import { useAppStore, useAuthStore, useConfigStore } from '@/store'; @@ -9,12 +10,15 @@ import { ToastTimeout } from '@/utils/constants'; import type { Ref } from 'vue'; +// Store const appStore = useAppStore(); const { getIsLoading } = storeToRefs(appStore); const { getConfig } = storeToRefs(useConfigStore()); +// State const ready: Ref = ref(false); +// Actions onBeforeMount(async () => { appStore.beginDeterminateLoading(); await useConfigStore().init(); diff --git a/frontend/src/components/form/Calendar.vue b/frontend/src/components/form/Calendar.vue index f8996123..b81642b0 100644 --- a/frontend/src/components/form/Calendar.vue +++ b/frontend/src/components/form/Calendar.vue @@ -12,6 +12,7 @@ type Props = { disabled?: boolean; showTime?: boolean; bold?: boolean; + placeholder?: string; }; const props = withDefaults(defineProps(), { @@ -20,7 +21,8 @@ const props = withDefaults(defineProps(), { label: '', disabled: false, showTime: false, - bold: true + bold: true, + placeholder: '' }); const { errorMessage, value } = useField(toRef(props, 'name')); @@ -46,6 +48,7 @@ const { errorMessage, value } = useField(toRef(props, 'name')); show-icon icon-display="input" date-format="yy/mm/dd" + :placeholder="props.placeholder" /> {{ helpText }}
diff --git a/frontend/src/components/form/RadioList.vue b/frontend/src/components/form/RadioList.vue index bc3befd5..325be60b 100644 --- a/frontend/src/components/form/RadioList.vue +++ b/frontend/src/components/form/RadioList.vue @@ -1,6 +1,6 @@ @@ -754,7 +1188,7 @@ onBeforeMount(async () => { label="Submit" type="submit" icon="pi pi-upload" - :disabled="!editable" + :disabled="!editable || activeStep !== 3" />
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue index 444cb27c..9934bb9e 100644 --- a/frontend/src/components/layout/Navbar.vue +++ b/frontend/src/components/layout/Navbar.vue @@ -19,9 +19,6 @@ const { getIsAuthenticated } = storeToRefs(useAuthStore());
  • Submissions
    • -
  • - Intake -
    • diff --git a/frontend/src/components/permit/PermitCard.vue b/frontend/src/components/permit/PermitCard.vue index 2c0b362e..f5f3554e 100644 --- a/frontend/src/components/permit/PermitCard.vue +++ b/frontend/src/components/permit/PermitCard.vue @@ -5,7 +5,7 @@ import { computed, ref, watchEffect } from 'vue'; import PermitModal from '@/components/permit/PermitModal.vue'; import { Button, Card, Divider } from '@/lib/primevue'; import { userService } from '@/services'; -import { useSubmissionStore } from '@/store'; +import { useTypeStore } from '@/store'; import { formatDate } from '@/utils/formatters'; import type { Ref } from 'vue'; @@ -19,7 +19,7 @@ type Props = { const props = withDefaults(defineProps(), {}); // Store -const { getPermitTypes } = storeToRefs(useSubmissionStore()); +const { getPermitTypes } = storeToRefs(useTypeStore()); // State const cardData = computed(() => props.permit); diff --git a/frontend/src/components/permit/PermitModal.vue b/frontend/src/components/permit/PermitModal.vue index 06c8a730..b4a9bc64 100644 --- a/frontend/src/components/permit/PermitModal.vue +++ b/frontend/src/components/permit/PermitModal.vue @@ -7,7 +7,7 @@ import { object, string } from 'yup'; import { Calendar, Dropdown, InputText } from '@/components/form'; import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue'; import { permitService } from '@/services'; -import { useSubmissionStore } from '@/store'; +import { useSubmissionStore, useTypeStore } from '@/store'; import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/constants'; import { PERMIT_STATUS } from '@/utils/enums'; @@ -27,7 +27,8 @@ const props = withDefaults(defineProps(), { // Store const submissionStore = useSubmissionStore(); -const { getPermitTypes } = storeToRefs(submissionStore); +const typeStore = useTypeStore(); +const { getPermitTypes } = storeToRefs(typeStore); // State const permitType: Ref = ref( diff --git a/frontend/src/components/roadmap/Roadmap.vue b/frontend/src/components/roadmap/Roadmap.vue index 4483ce6e..e90c10c3 100644 --- a/frontend/src/components/roadmap/Roadmap.vue +++ b/frontend/src/components/roadmap/Roadmap.vue @@ -8,7 +8,7 @@ import FileSelectModal from '@/components/file/FileSelectModal.vue'; import { InputText, TextArea } from '@/components/form'; import { Button, useConfirm, useToast } from '@/lib/primevue'; import { roadmapService, userService } from '@/services'; -import { useConfigStore, useSubmissionStore } from '@/store'; +import { useConfigStore, useSubmissionStore, useTypeStore } from '@/store'; import { PERMIT_NEEDED, PERMIT_STATUS } from '@/utils/enums'; import { roadmapTemplate } from '@/utils/templates'; import { delimitEmails } from '@/utils/utils'; @@ -25,7 +25,9 @@ const props = withDefaults(defineProps(), {}); // Store const { getConfig } = storeToRefs(useConfigStore()); -const { getDocuments, getPermits, getPermitTypes, getSubmission } = storeToRefs(useSubmissionStore()); +const typeStore = useTypeStore(); +const { getDocuments, getPermits, getSubmission } = storeToRefs(useSubmissionStore()); +const { getPermitTypes } = storeToRefs(typeStore); // State const fileSelectModalVisible: Ref = ref(false); diff --git a/frontend/src/lib/primevue/index.ts b/frontend/src/lib/primevue/index.ts index 2e4f2423..11e93560 100644 --- a/frontend/src/lib/primevue/index.ts +++ b/frontend/src/lib/primevue/index.ts @@ -32,6 +32,7 @@ export { default as TabPanel } from 'primevue/tabpanel'; export { default as Textarea } from 'primevue/textarea'; export { default as Toast } from 'primevue/toast'; export { default as Toolbar } from 'primevue/toolbar'; +export { default as Sidebar } from 'primevue/sidebar'; export { default as Stepper } from 'primevue/stepper'; export { default as StepperPanel } from 'primevue/stepperpanel'; diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index d2bf8e5f..8d780396 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -29,12 +29,6 @@ const routes: Array = [ component: () => import('../views/InitiativesView.vue'), meta: { requiresAuth: true, title: 'Initiatives' } }, - { - path: '/start', - name: RouteNames.START, - component: () => import('../views/StartView.vue'), - meta: { title: 'Start' } - }, { path: '/enquiry', name: RouteNames.ENQUIRY, @@ -47,6 +41,12 @@ const routes: Array = [ component: () => import('../views/ShasIntakeView.vue'), meta: { requiresAuth: true, title: 'Intake' } }, + { + path: '/start', + name: RouteNames.START, + component: () => import('../views/StartView.vue'), + meta: { title: 'Start' } + }, { path: '/submission', name: RouteNames.SUBMISSION, diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts index 0a483a2f..af3e4cb7 100644 --- a/frontend/src/store/index.ts +++ b/frontend/src/store/index.ts @@ -2,3 +2,4 @@ export { default as useAppStore } from './appStore'; export { default as useAuthStore } from './authStore'; export { default as useConfigStore } from './configStore'; export { default as useSubmissionStore } from './submissionStore'; +export { default as useTypeStore } from './typeStore'; diff --git a/frontend/src/store/submissionStore.ts b/frontend/src/store/submissionStore.ts index e6cc33dd..7f74314b 100644 --- a/frontend/src/store/submissionStore.ts +++ b/frontend/src/store/submissionStore.ts @@ -2,13 +2,12 @@ import { defineStore } from 'pinia'; import { computed, ref } from 'vue'; import type { Ref } from 'vue'; -import type { Document, Note, Permit, PermitType, Submission } from '@/types'; +import type { Document, Note, Permit, Submission } from '@/types'; export type SubmissionStoreState = { documents: Ref>; notes: Ref>; permits: Ref>; - permitTypes: Ref>; submission: Ref; }; @@ -18,7 +17,6 @@ export const useSubmissionStore = defineStore('submission', () => { documents: ref([]), notes: ref([]), permits: ref([]), - permitTypes: ref([]), submission: ref(undefined) }; @@ -27,7 +25,6 @@ export const useSubmissionStore = defineStore('submission', () => { getDocuments: computed(() => state.documents.value), getNotes: computed(() => state.notes.value), getPermits: computed(() => state.permits.value), - getPermitTypes: computed(() => state.permitTypes.value), getSubmission: computed(() => state.submission.value) }; @@ -79,10 +76,6 @@ export const useSubmissionStore = defineStore('submission', () => { if (idx >= 0) state.permits.value[idx] = data; } - function setPermitTypes(data: Array) { - state.permitTypes.value = data; - } - function setSubmission(data: Submission | undefined) { state.submission.value = data; } @@ -106,7 +99,6 @@ export const useSubmissionStore = defineStore('submission', () => { removePermit, setPermits, updatePermit, - setPermitTypes, setSubmission }; }); diff --git a/frontend/src/store/typeStore.ts b/frontend/src/store/typeStore.ts new file mode 100644 index 00000000..652d730b --- /dev/null +++ b/frontend/src/store/typeStore.ts @@ -0,0 +1,39 @@ +import { defineStore } from 'pinia'; +import { computed, ref } from 'vue'; + +import type { Ref } from 'vue'; +import type { PermitType } from '@/types'; + +export type TypeStoreState = { + permitTypes: Ref>; +}; + +export const useTypeStore = defineStore('type', () => { + // State + const state: TypeStoreState = { + permitTypes: ref([]) + }; + + // Getters + const getters = { + getPermitTypes: computed(() => state.permitTypes.value) + }; + + // Actions + function setPermitTypes(data: Array) { + state.permitTypes.value = data; + } + + return { + // State + ...state, + + // Getters + ...getters, + + // Actions + setPermitTypes + }; +}); + +export default useTypeStore; diff --git a/frontend/src/views/StartView.vue b/frontend/src/views/StartView.vue index abd74787..d7505b6c 100644 --- a/frontend/src/views/StartView.vue +++ b/frontend/src/views/StartView.vue @@ -1,5 +1,5 @@ -
    -
    +
    +
    -
    diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue index be0391af..923c8b55 100644 --- a/frontend/src/views/SubmissionView.vue +++ b/frontend/src/views/SubmissionView.vue @@ -12,7 +12,7 @@ import Roadmap from '@/components/roadmap/Roadmap.vue'; import SubmissionForm from '@/components/submission/SubmissionForm.vue'; import { Button, TabPanel, TabView } from '@/lib/primevue'; import { submissionService, documentService, noteService, permitService } from '@/services'; -import { useSubmissionStore } from '@/store'; +import { useSubmissionStore, useTypeStore } from '@/store'; import { RouteNames } from '@/utils/constants'; import type { Ref } from 'vue'; @@ -29,7 +29,9 @@ const props = withDefaults(defineProps(), { // Store const submissionStore = useSubmissionStore(); -const { getDocuments, getNotes, getPermits, getPermitTypes, getSubmission } = storeToRefs(submissionStore); +const typeStore = useTypeStore(); +const { getDocuments, getNotes, getPermits, getSubmission } = storeToRefs(submissionStore); +const { getPermitTypes } = storeToRefs(typeStore); // State const activeTab: Ref = ref(Number(props.initialTab)); @@ -53,7 +55,7 @@ onMounted(async () => { submissionStore.setDocuments(documents); submissionStore.setNotes(notes); submissionStore.setPermits(permits); - submissionStore.setPermitTypes(permitTypes); + typeStore.setPermitTypes(permitTypes); loading.value = false; });