Skip to content

Commit

Permalink
Merge pull request #354 from bcgov/feature/moreReservationFlow
Browse files Browse the repository at this point in the history 
More reservation flow
  • Loading branch information
@loneil
loneil authored Dec 12, 2022
2 parents 25dea38 + 863aa0e commit b0b839a
Show file tree
Hide file tree
Showing 7 changed files with 301 additions and 115 deletions.
16 changes: 16 additions & 0 deletions services/tenant-ui/frontend/src/assets/tenantuiComponents.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,22 @@
}
}

// The blue card for informative prompts
.info-card {
border: 1px solid #b5bbc4;
border-radius: 5px;
background-color: $tenant-ui-card-info-color;
box-shadow: none;
.p-card-title {
text-align: center;
color: $tenant-ui-card-info-text-color;
padding-top: 1em;
.info-card-icon {
font-size: 2.5em;
}
}
}

// Logout button in the menu
.logout-menu-item .p-menuitem-link {
&,
Expand Down
2 changes: 2 additions & 0 deletions services/tenant-ui/frontend/src/assets/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ $tenant-ui-button-link-color: #385A8A;
// Backgrounds/ borders
$tenant-ui-panel-back-color: #F8F9FA;
$tenant-ui-panel-border-color: #DEE2E6;
$tenant-ui-card-info-color: #D7DEE8;
$tenant-ui-card-info-text-color: #003366;

// Status Colors
$tenant-ui-status-default-background: #c8c8c8; // status chip backgrounds
Expand Down
25 changes: 22 additions & 3 deletions services/tenant-ui/frontend/src/components/Login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
>Create Request!</a
>
</p>

<p>
Already Submitted Request?
<a
href="#"
class="p-button-link login-mode"
@click.prevent="loginMode = LOGIN_MODE.STATUS"
>Check Status!</a
>
</p>
</div>
</div>

Expand All @@ -37,6 +47,17 @@
/>
<Reserve />
</div>

<!-- Checking Status -->
<div v-else-if="loginMode === LOGIN_MODE.STATUS" class="py-6">
<Button
label="Go Back to Sign-in"
icon="pi pi-arrow-left"
class="p-button-text"
@click="loginMode = LOGIN_MODE.SIGNIN"
/>
<Status />
</div>
</div>
</div>

Expand All @@ -56,6 +77,7 @@ import Button from 'primevue/button';
// Components
import LoginForm from '@/components/LoginForm.vue';
import Reserve from './reservation/Reserve.vue';
import Status from './reservation/Status.vue';
// State
import { storeToRefs } from 'pinia';
import { useConfigStore } from '@/store';
Expand All @@ -68,9 +90,6 @@ enum LOGIN_MODE {
STATUS,
}
const loginMode = ref(LOGIN_MODE.SIGNIN);
const toggleLogin = () => {
alert('hi');
};
</script>

<style scoped lang="scss">
Expand Down
38 changes: 38 additions & 0 deletions services/tenant-ui/frontend/src/components/reservation/ReservationConfirmation.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<Card class="info-card mt-4 mb-6">
<template #title>
<i class="pi pi-check-circle info-card-icon"></i> <br />
Thank You!
</template>
<template #content>
<p class="text-center">
Your request has been submitted successfully. <br />
An email has also been sent to {{ email }} with the reservation number
below.
</p>
</template>
</Card>

<div class="field w-full">
<label for="">Email Address</label>
<InputText :value="email" type="text" readonly class="w-full" />
</div>

<div class="field w-full">
<label for="">Reservation ID</label>
<InputText :value="id" type="text" readonly class="w-full" />
</div>
</template>

<script setup lang="ts">
// Vue
import { ref, reactive } from 'vue';
// PrimeVue/Validation/etc
import Card from 'primevue/card';
import InputText from 'primevue/inputtext';
defineProps<{
email: string;
id: string;
}>();
</script>
238 changes: 127 additions & 111 deletions services/tenant-ui/frontend/src/components/reservation/Reserve.vue
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,130 @@
<template>
<form @submit.prevent="handleSubmit(!v$.$invalid)">
<!-- Email -->
<div class="field mt-5 w-full">
<label
for="email"
:class="{ 'p-error': v$.contact_email.$invalid && submitted }"
>Email Address
</label>
<InputText
id="email"
v-model="v$.contact_email.$model"
type="text"
option-label="label"
autocomplete="email"
name="email"
autofocus
class="w-full"
/>
<span v-if="v$.contact_email.$error && submitted">
<span v-for="(error, index) of v$.contact_email.$errors" :key="index">
<small class="p-error block">{{ error.$message }}</small>
<!-- Request successful -->
<div v-if="reservationIdResult">
<ReservationConfirmation
:id="reservationIdResult"
:email="formFields.contact_email"
/>
</div>

<!-- Submit Request -->
<div v-else>
<form @submit.prevent="handleSubmit(!v$.$invalid)">
<!-- Email -->
<div class="field mt-5 w-full">
<label
for="email"
:class="{ 'p-error': v$.contact_email.$invalid && submitted }"
>Email Address
</label>
<InputText
id="email"
v-model="v$.contact_email.$model"
type="text"
option-label="label"
autocomplete="email"
name="email"
autofocus
class="w-full"
/>
<span v-if="v$.contact_email.$error && submitted">
<span v-for="(error, index) of v$.contact_email.$errors" :key="index">
<small class="p-error block">{{ error.$message }}</small>
</span>
</span>
</span>
<small
v-else-if="v$.contact_email.$invalid && submitted"
class="p-error"
>{{ v$.contact_email.required.$message }}</small
>
</div>
<small
v-else-if="v$.contact_email.$invalid && submitted"
class="p-error"
>
{{ v$.contact_email.required.$message }}
</small>
</div>

<!-- FullName -->
<div class="field mt-5 w-full">
<label
for="full-name"
:class="{ 'p-error': v$.contact_name.$invalid && submitted }"
>Full Name
</label>
<InputText
id="full-name"
v-model="v$.contact_name.$model"
autocomplete="name"
name="fullName"
class="w-full"
/>
<small v-if="v$.contact_name.$invalid && submitted" class="p-error">{{
v$.contact_name.required.$message
}}</small>
</div>
<!-- FullName -->
<div class="field mt-5 w-full">
<label
for="full-name"
:class="{ 'p-error': v$.contact_name.$invalid && submitted }"
>Full Name
</label>
<InputText
id="full-name"
v-model="v$.contact_name.$model"
autocomplete="name"
name="fullName"
class="w-full"
/>
<small v-if="v$.contact_name.$invalid && submitted" class="p-error">{{
v$.contact_name.required.$message
}}</small>
</div>

<!-- Phone -->
<div class="field mt-5 w-full">
<label
for="phone"
:class="{ 'p-error': v$.contact_phone.$invalid && submitted }"
>Phone / Mobile
</label>
<InputText
id="phone"
v-model="v$.contact_phone.$model"
autocomplete="phone"
name="phone"
class="w-full"
/>
<small v-if="v$.contact_phone.$invalid && submitted" class="p-error">{{
v$.contact_phone.required.$message
}}</small>
</div>
<!-- Phone -->
<div class="field mt-5 w-full">
<label
for="phone"
:class="{ 'p-error': v$.contact_phone.$invalid && submitted }"
>Phone / Mobile
</label>
<InputText
id="phone"
v-model="v$.contact_phone.$model"
autocomplete="phone"
name="phone"
class="w-full"
/>
<small v-if="v$.contact_phone.$invalid && submitted" class="p-error">{{
v$.contact_phone.required.$message
}}</small>
</div>

<!-- Tenant Name -->
<div class="field mt-5 w-full">
<label
for="tenant-name"
:class="{ 'p-error': v$.tenant_name.$invalid && submitted }"
>Tenant Name
</label>
<InputText
id="tenant-name"
v-model="v$.tenant_name.$model"
name="tenant-name"
class="w-full"
/>
<small v-if="v$.tenant_name.$invalid && submitted" class="p-error">{{
v$.tenant_name.required.$message
}}</small>
</div>
<!-- Tenant Name -->
<div class="field mt-5 w-full">
<label
for="tenant-name"
:class="{ 'p-error': v$.tenant_name.$invalid && submitted }"
>Tenant Name
</label>
<InputText
id="tenant-name"
v-model="v$.tenant_name.$model"
name="tenant-name"
class="w-full"
/>
<small v-if="v$.tenant_name.$invalid && submitted" class="p-error">{{
v$.tenant_name.required.$message
}}</small>
</div>

<!-- Tenant Reason -->
<div class="field mt-5 w-full">
<label
for="tenant-reason"
:class="{ 'p-error': v$.tenant_reason.$invalid && submitted }"
>Tenant Reason
</label>
<Textarea
id="tenant-reason"
v-model="v$.tenant_reason.$model"
name="tenant-reason"
class="w-full"
:auto-resize="true"
rows="2"
/>
<small v-if="v$.tenant_reason.$invalid && submitted" class="p-error">{{
v$.tenant_reason.required.$message
}}</small>
</div>
<!-- Tenant Reason -->
<div class="field mt-5 w-full">
<label
for="tenant-reason"
:class="{ 'p-error': v$.tenant_reason.$invalid && submitted }"
>Tenant Reason
</label>
<Textarea
id="tenant-reason"
v-model="v$.tenant_reason.$model"
name="tenant-reason"
class="w-full"
:auto-resize="true"
rows="2"
/>
<small v-if="v$.tenant_reason.$invalid && submitted" class="p-error">{{
v$.tenant_reason.required.$message
}}</small>
</div>

<Button
type="submit"
class="w-full mt-5"
label="Request"
:disabled="!!loading"
:loading="!!loading"
/>
</form>
<Button
type="submit"
class="w-full mt-5"
label="Request"
:disabled="!!loading"
:loading="!!loading"
/>
</form>
</div>
</template>

<script setup lang="ts">
Expand All @@ -128,6 +140,7 @@ import { useVuelidate } from '@vuelidate/core';
// State
import { useReservationStore } from '@/store';
import { storeToRefs } from 'pinia';
import ReservationConfirmation from './ReservationConfirmation.vue';
const toast = useToast();
Expand All @@ -150,7 +163,10 @@ const v$ = useVuelidate(rules, formFields);
// State setup
const reservationStore = useReservationStore();
const { loading, reservation } = storeToRefs(useReservationStore());
const { loading } = storeToRefs(useReservationStore());
// The reservation return object
const reservationIdResult: any = ref('');
// Form submission
const submitted = ref(false);
Expand All @@ -161,8 +177,8 @@ const handleSubmit = async (isFormValid: boolean) => {
return;
}
try {
await reservationStore.makeReservation(formFields);
toast.success(`Your request was received.`);
const res = await reservationStore.makeReservation(formFields);
reservationIdResult.value = res.reservation_id;
} catch (err) {
console.error(err);
toast.error(`Failure making request: ${err}`);
Expand Down
Loading

0 comments on commit b0b839a

Please sign in to comment.