From bc072aafa156b303b0ea2681cc23f449bc1734b3 Mon Sep 17 00:00:00 2001
From: lucashemi <lucasxberger@gmail.com>
Date: Mon, 27 Feb 2023 22:31:42 -0300
Subject: alpha version

---
 .../voll/src/components/AppointmentModal.vue       | 123 +++++++
 .../voll/src/components/AppointmentsList.vue       | 109 ++++++
 web-client/voll/src/components/List.vue            |  70 ++--
 web-client/voll/src/components/Modal.vue           |  61 ++--
 web-client/voll/src/components/Search.vue          |  23 +-
 web-client/voll/src/interfaces/IAppointment.ts     |  11 +
 web-client/voll/src/views/AppointmentsView.vue     |  28 +-
 web-client/voll/src/views/FormView.vue             | 381 ++++++++++++++-------
 web-client/voll/tsconfig.json                      |   2 +-
 9 files changed, 608 insertions(+), 200 deletions(-)
 create mode 100644 web-client/voll/src/components/AppointmentModal.vue
 create mode 100644 web-client/voll/src/components/AppointmentsList.vue
 create mode 100644 web-client/voll/src/interfaces/IAppointment.ts

(limited to 'web-client')

diff --git a/web-client/voll/src/components/AppointmentModal.vue b/web-client/voll/src/components/AppointmentModal.vue
new file mode 100644
index 0000000..451c039
--- /dev/null
+++ b/web-client/voll/src/components/AppointmentModal.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="none modal" id="modal" ref="modal">
+        <div class="modal-content">
+            <i class="fa-regular fa-user modal-icon"></i>
+            <Title text="Do you want to cancel this appointment?" Class="title large" />
+            <div class="modal-dados" v-if="appointment">
+                <Title id="modal-name" :text="appointment.date + ' at ' + appointment.time" Class="title large" />
+                <div class="margin-top">
+                    <p class="title">{{ appointment.doctorName }}</p>
+                    <p class="gray">{{ appointment.specialty }}</p>
+                    <p class="title">{{ appointment.patientName }}</p>
+                    <p class="gray">Patient</p>
+                </div>
+                <Fieldset>
+                <p>Select the reason for cancellation:</p>
+                <label class="field-label" for="reason">Reason</label>
+                <select id="reason" name="reason" v-model="appointment.reasonForCancellation" class="field-input">
+                    <option disabled value="">Select the reason</option>
+                    <option value="PATIENT_GAVE_UP">Patient gave up</option>
+                    <option value="LONG_WAITING_TIME">Long waiting time</option>
+                    <option value="DOCTOR_CANCELED">Doctor canceled</option>
+                    <option value="OTHER_REASON">Other reason</option>
+                </select>
+                <span class="error-message"></span>
+            </Fieldset>
+            </div>
+            <Button @click="closeModal($event)" @keyup.enter="closeModal($event)" id="modal-deactivate"
+                Class="btn form-btn" Value="Cancel appointment" />
+            <ButtonReverse @click="closeModal($event)" @keyup.enter="closeModal($event)"
+                Class="btn-reverse form-btn" Value="Don't cancel" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import IAppointment from '@/interfaces/IAppointment';
+import axios from 'axios';
+import { defineComponent } from 'vue';
+import Button from './Button.vue';
+import ButtonReverse from './ButtonReverse.vue';
+import Fieldset from './Fieldset.vue';
+import Title from './Title.vue';
+
+
+export default defineComponent({
+    name: "Modal",
+    components: {
+    Title,
+    Button,
+    ButtonReverse,
+    Fieldset
+},
+    data() {
+        return {
+            token: sessionStorage.getItem('token'),
+            appointment: null as IAppointment
+        }
+    },
+    emits: ['list', 'treatForbidden'],
+    props: {
+        page: {
+            type: String
+        }
+    },
+    methods: {
+        closeModal(e) {
+            if (this.appointment.reasonForCancellation) {
+                const url = `http://localhost:8081/${this.page}`
+                axios.delete(url, {
+                    headers: {
+                        Authorization: `Bearer ${this.token}`
+                    },
+                    data: {
+                        idAppointment: this.appointment.id,
+                        reasonForCancellation: this.appointment.reasonForCancellation
+                    }
+                }).then(response => {
+                    console.log(response)
+                }).catch(error => {
+                    console.log(error)
+                })
+            }
+            e.target.parentNode.parentNode.classList.add('none')
+            this.$emit('list')
+        },
+        showModal(appointment) {
+            (this.$refs.modal as HTMLDivElement).classList.remove('none');
+            this.appointment = appointment;
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+.modal-content {
+    background-color: #fefefe;
+    border: 1px solid #888;
+    border-radius: 1rem;
+    margin: 4% auto;
+    padding: 20px;
+    width: 80%;
+}
+
+.title {
+    font-size: 1.1rem;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+
+.gray {
+    font-size: 1.05rem;
+    margin-top: 5px;
+}
+
+.large {
+    font-size: 1.5rem;
+}
+
+.margin-top {
+    margin-top: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/web-client/voll/src/components/AppointmentsList.vue b/web-client/voll/src/components/AppointmentsList.vue
new file mode 100644
index 0000000..3a6623b
--- /dev/null
+++ b/web-client/voll/src/components/AppointmentsList.vue
@@ -0,0 +1,109 @@
+<template>
+    <SmallLogo />
+    <Search :page="page" :entities="appointments" @filter="update" @list="list" />
+    <ul class="list" id="list" v-if="appointments && appointments.length">
+        <li class="list-item" v-for="appointment, index in appointments" :key="index">
+            <h3 class="title">{{ appointment.date }}
+                <i @click="detail($event)" @keyup.enter="detail($event)"
+                    class="fa-solid fa-caret-down fa-caret-up" tabindex="0"></i>
+            </h3>
+            <p class="gray">{{ appointment.time }}</p>
+            <p class="title">{{ appointment.doctorName }}</p>
+            <p class="gray">{{ appointment.specialty }}</p>
+            <p class="title">{{ appointment.patientName }}</p>
+            <p class="gray">Patient</p>
+            <div class="none">
+                <router-link :to="`form/${page}/${appointment.id}`">
+                    <ButtonReverse Class="list-btn btn-reverse" Value="Edit"></ButtonReverse>
+                </router-link>
+                <ButtonReverse @click="showModal(appointment)"
+                    @keyup.enter="showModal(appointment)"
+                    Class="list-btn btn-reverse" Value="Cancel appointment">
+                </ButtonReverse>
+            </div>
+        </li>
+    </ul>
+    <AppointmentModal ref="modal" :page="page" />
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent } from 'vue';
+import SmallLogo from './SmallLogo.vue';
+import ButtonReverse from './ButtonReverse.vue';
+import AppointmentModal from './AppointmentModal.vue';
+import Search from './Search.vue';
+import IAppointment from '@/interfaces/IAppointment';
+
+
+export default defineComponent({
+    name: "List",
+    components: {
+        ButtonReverse,
+        AppointmentModal,
+        SmallLogo,
+        Search
+    },
+    data() {
+        return {
+            page: this.$route.name as string,
+            token: sessionStorage.getItem('token'),
+            appointments: [] as IAppointment[]
+        }
+    },
+    methods: {
+        update(filteredAppointments) {
+            this.appointments = filteredAppointments
+        },
+        detail(event) {
+            event.target.classList.toggle('rotate')
+            const li = event.target.parentNode.parentNode
+            const divDetails = li.children[6]
+            divDetails.classList.toggle('none')
+        },
+        list() {
+            const url = `http://localhost:8081/${this.page}`
+            axios.get(url, {
+                headers: {
+                    Authorization: `Bearer ${this.token}`
+                }
+            }).then(response => {
+                this.appointments = response.data.content
+                this.appointments.forEach(appointment => {
+                    appointment.date = (appointment.date.substring(5) + '/' + appointment.date.substring(0,4)).replaceAll('-','/')
+                    appointment.time = appointment.time.substring(0,5)
+                    appointment.specialty = appointment.specialty.charAt(0) + appointment.specialty.substring(1).toLowerCase()
+                })
+            }).catch(error => {
+                console.log(error)
+            })
+        },
+        handleForbidden(code) {
+            if (code === 403) {
+                sessionStorage.clear()
+                this.$router.push('/login')
+            }
+        },
+        showModal(appointment) {
+            (this.$refs.modal as typeof AppointmentModal).showModal(appointment)
+        }
+    },
+    created() {
+        this.list()
+    }
+})
+</script>
+
+<style scoped>
+
+.title {
+    font-size: 1.1rem;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+
+.gray {
+    font-size: 1.05rem;
+    margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/web-client/voll/src/components/List.vue b/web-client/voll/src/components/List.vue
index ef6e25d..0ca646a 100644
--- a/web-client/voll/src/components/List.vue
+++ b/web-client/voll/src/components/List.vue
@@ -1,40 +1,40 @@
 <template>
     <SmallLogo />
     <Search :page="page" :entities="entities" @filter="update" @list="list" />
-    <ul class="list" id="list" v-if="entities && entities.length">
-        <li class="list-item" v-for="entity,index in entities" :key="index">
-            <h3 class="title">{{ entity.name }}
-                <i @click="detail($event, entity.id, index)" @keyup.enter="detail($event, entity.id, index)"
-                    class="fa-solid fa-caret-down fa-caret-up" tabindex="0"></i>
-            </h3>
-            <p v-if="page === 'doctors'">{{
-                entity.specialty.charAt(0).toUpperCase() +
-                    entity.specialty.toLowerCase().slice(1)
-            }}</p>
-            <p v-else-if="page === 'patients'">{{ entity.phone }}</p>
-            <div class="none">
-                <p class="gray">{{ entity.email }}</p>
-                <p v-if="page === 'doctors'" class="gray">{{ entity.phone }}</p>
-                <p v-else-if="page === 'patients'" class="gray">{{ entity.ssn }}</p>
-                <p class="gray">{{ entity.address && entity.address.addressLine1 }}</p>
-                <p class="gray">{{ entity.address && entity.address.addressLine2 }}</p>
-                <p class="gray">{{ entity.address && entity.address.city }} {{ entity.address && entity.address.state }}
-                    {{ entity.address && entity.address.postalCode }}</p>
-                <router-link :to="`form/${page}/${entity.id}`">
-                    <ButtonReverse Class="list-btn btn-reverse" Value="Edit"></ButtonReverse>
-                </router-link>
-                <ButtonReverse v-if="page === 'doctors'" @click="showModal(entity.id, entity.name, entity.specialty)"
-                    @keyup.enter="showModal(entity.id, entity.name, entity.specialty)" Class="list-btn btn-reverse"
-                    Value="Deactivate profile">
-                </ButtonReverse>
-                <ButtonReverse v-else-if="page === 'patients'" @click="showModal(entity.id, entity.name, entity.phone)"
-                    @keyup.enter="showModal(entity.id, entity.name, entity.phone)" Class="list-btn btn-reverse"
-                    Value="Deactivate profile">
-                </ButtonReverse>
-            </div>
-        </li>
-    </ul>
-    <Modal ref="modal" />
+        <ul class="list" id="list" v-if="entities && entities.length">
+            <li class="list-item" v-for="entity,index in entities" :key="index">
+                <h3 class="title">{{ entity.name }}
+                    <i @click="detail($event, entity.id, index)" @keyup.enter="detail($event, entity.id, index)"
+                        class="fa-solid fa-caret-down fa-caret-up" tabindex="0"></i>
+                </h3>
+                <p v-if="page === 'doctors'">{{
+                    entity.specialty.charAt(0).toUpperCase() +
+                        entity.specialty.toLowerCase().slice(1)
+                }}</p>
+                <p v-else-if="page === 'patients'">{{ entity.phone }}</p>
+                <div class="none">
+                    <p class="gray">{{ entity.email }}</p>
+                    <p v-if="page === 'doctors'" class="gray">{{ entity.phone }}</p>
+                    <p v-else-if="page === 'patients'" class="gray">{{ entity.ssn }}</p>
+                    <p class="gray">{{ entity.address && entity.address.addressLine1 }}</p>
+                    <p class="gray">{{ entity.address && entity.address.addressLine2 }}</p>
+                    <p class="gray">{{ entity.address && entity.address.city }} {{ entity.address && entity.address.state }}
+                        {{ entity.address && entity.address.postalCode }}</p>
+                    <router-link :to="`form/${page}/${entity.id}`">
+                        <ButtonReverse Class="list-btn btn-reverse" Value="Edit"></ButtonReverse>
+                    </router-link>
+                    <ButtonReverse v-if="page === 'doctors'" @click="showModal(entity.id, entity.name, entity.specialty)"
+                        @keyup.enter="showModal(entity.id, entity.name, entity.specialty)" Class="list-btn btn-reverse"
+                        Value="Deactivate profile">
+                    </ButtonReverse>
+                    <ButtonReverse v-else-if="page === 'patients'" @click="showModal(entity.id, entity.name, entity.phone)"
+                        @keyup.enter="showModal(entity.id, entity.name, entity.phone)" Class="list-btn btn-reverse"
+                        Value="Deactivate profile">
+                    </ButtonReverse>
+                </div>
+            </li>
+        </ul>
+    <Modal @list="list" ref="modal" :page="page"/>
 </template>
 
 <script lang="ts">
@@ -110,8 +110,6 @@ export default defineComponent({
                 }
             }).catch(error => {
                 console.log(error)
-                const code = error.response.status
-                this.handleForbidden(code)
             })
         },
         handleForbidden(code) {
diff --git a/web-client/voll/src/components/Modal.vue b/web-client/voll/src/components/Modal.vue
index 917a09f..acd5c83 100644
--- a/web-client/voll/src/components/Modal.vue
+++ b/web-client/voll/src/components/Modal.vue
@@ -4,17 +4,26 @@
             <i class="fa-regular fa-user modal-icon"></i>
             <Title text="Do you want to deactivate this profile?" Class="title large" />
             <div class="modal-dados">
-                <Title id="modal-name" ref="modalName" text="Name" Class="title" />
+                <Title id="modal-name" ref="modalName" :text="name" Class="title" />
                 <div>
                     <p id="modal-info" ref="modalInfo" class="gray"></p>
                 </div>
             </div>
             <p>By deactivating this profile, your information will be disabled for searches and future appointments.</p>
             <p>Make sure there are no appointments scheduled, if so, the deactivation cannot be completed.</p>
-            <Button @click="closeModal($event)" @keyup.enter="closeModal($event)" id="modal-deactivate"
+            <Button @click="closeModal($event, true)" @keyup.enter="closeModal($event, true)" id="modal-deactivate"
                 Class="btn form-btn" Value="Deactivate this profile" />
-            <ButtonReverse @click="closeModal($event)" @keyup.enter="closeModal($event)" Class="btn-reverse form-btn"
-                Value="Cancel" />
+            <ButtonReverse @click="closeModal($event, false)" @keyup.enter="closeModal($event, false)"
+                Class="btn-reverse form-btn" Value="Cancel" />
+        </div>
+    </div>
+    <div class="none modal" id="modal2" ref="modal2">
+        <div class="modal-content">
+            <i class="fa-regular fa-user modal-icon"></i>
+            <Title text="It wasn't possible to deactivate the profile" Class="title large" />
+            <p>Make sure there are no appointments scheduled, if so, the deactivation cannot be completed.</p>
+            <ButtonReverse @click="closeModal2($event)" @keyup.enter="closeModal2($event)" Class="btn-reverse form-btn"
+                Value="Got it!" />
         </div>
     </div>
 </template>
@@ -34,9 +43,11 @@ export default defineComponent({
         Button,
         ButtonReverse
     },
-    data () {
+    data() {
         return {
-            token: sessionStorage.getItem('token')
+            token: sessionStorage.getItem('token'),
+            id: null,
+            name: null
         }
     },
     emits: ['list', 'treatForbidden'],
@@ -46,33 +57,35 @@ export default defineComponent({
         }
     },
     methods: {
-        closeModal(e) {
-            e.target.parentNode.parentNode.classList.add('none')
-        },
-        showModal(id, name, info) {
-            (this.$refs.modal as HTMLDivElement).classList.remove('none');
-            (this.$refs.modalName as HTMLHeadingElement).innerHTML = name;
-
-            if (this.page === 'doctors') {
-                (this.$refs.modalInfo as HTMLParagraphElement).innerHTML = info.charAt(0).toUpperCase() + info.toLowerCase().slice(1);
-            } else if (this.page === 'patients') {
-                (this.$refs.modalInfo as HTMLParagraphElement).innerHTML = info
-            }
-
-            const deactivateElement = document.getElementById('modal-deactivate')
-            const url = `http://localhost:8081/${this.page}/${id}`
-            deactivateElement.onclick = () => {
+        closeModal(e, deleting) {
+            if (deleting) {
+                const url = `http://localhost:8081/${this.page}/${this.id}`
                 axios.delete(url, {
                     headers: {
                         Authorization: `Bearer ${this.token}`
                     }
                 }).then(response => {
                     console.log(response)
-                    this.$emit('list')
                 }).catch(error => {
-                    this.$emit('treatForbidden', error.response.status)
+                    console.log(error)
+                    e.target.parentNode.parentNode.nextSibling.classList.remove('none')
                 })
             }
+            e.target.parentNode.parentNode.classList.add('none')
+            this.$emit('list')
+        },
+        closeModal2(e) {
+            e.target.parentNode.parentNode.classList.add('none')
+        },
+        showModal(id, name, info) {
+            (this.$refs.modal as HTMLDivElement).classList.remove('none');
+            this.name = name;
+            this.id = id
+            if (this.page === 'doctors') {
+                (this.$refs.modalInfo as HTMLParagraphElement).innerHTML = info.charAt(0).toUpperCase() + info.toLowerCase().slice(1);
+            } else if (this.page === 'patients') {
+                (this.$refs.modalInfo as HTMLParagraphElement).innerHTML = info
+            }
         }
     }
 })
diff --git a/web-client/voll/src/components/Search.vue b/web-client/voll/src/components/Search.vue
index a96ffc9..6512a25 100644
--- a/web-client/voll/src/components/Search.vue
+++ b/web-client/voll/src/components/Search.vue
@@ -32,15 +32,20 @@ export default defineComponent({
                 return
             }
 
-            const info = this.page === 'doctors' ? 'specialty' : 'phone'
-
-            this.filteredEntities = this.entities.filter(entity => {
-                return entity.name.toLowerCase().indexOf(e.target.value.toLowerCase()) != -1 ||
-                    entity[info].toLowerCase().indexOf(e.target.value.toLowerCase()) != -1;
-            })
-            this.filteredEntities.forEach(en => {
-                en.i = this.filteredEntities.indexOf(en)
-            })
+            const info = this.page === 'doctors' ? 'specialty' : this.page === 'patients' ? 'phone' : null
+
+            if (info) {
+                this.filteredEntities = this.entities.filter(entity => {
+                    return entity.name.toLowerCase().indexOf(e.target.value.toLowerCase()) != -1 ||
+                        entity[info].toLowerCase().indexOf(e.target.value.toLowerCase()) != -1;
+                })
+            } else {
+                this.filteredEntities = this.entities.filter(appointment => {
+                    return appointment.doctorName.toLowerCase().indexOf(e.target.value.toLowerCase()) != -1 ||
+                        appointment.patientName.toLowerCase().indexOf(e.target.value.toLowerCase()) != -1
+                })
+            }
+
 
             this.$emit('filter', this.filteredEntities)
         }
diff --git a/web-client/voll/src/interfaces/IAppointment.ts b/web-client/voll/src/interfaces/IAppointment.ts
new file mode 100644
index 0000000..e0bb503
--- /dev/null
+++ b/web-client/voll/src/interfaces/IAppointment.ts
@@ -0,0 +1,11 @@
+export default interface IAppointment {
+    patient: string,
+    patientName: string,
+    doctor: string,
+    doctorName: string,
+    specialty: string,
+    date: string,
+    time: string,
+    reasonForCancellation: string,
+    id: number
+}
\ No newline at end of file
diff --git a/web-client/voll/src/views/AppointmentsView.vue b/web-client/voll/src/views/AppointmentsView.vue
index 21a164a..9615a70 100644
--- a/web-client/voll/src/views/AppointmentsView.vue
+++ b/web-client/voll/src/views/AppointmentsView.vue
@@ -1,3 +1,27 @@
 <template>
-    <h1>Appointments</h1>
-</template>
\ No newline at end of file
+    <Header/>
+    <main class="container">
+        <Title text="Appointments" Class="title large"/>
+        <router-link to="/form/appointments/new" class="btn btn-register">Schedule new appointment</router-link>
+        <div>
+            <AppointmentsList />
+        </div>
+    </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Header from '@/components/Header.vue';
+import Title from '../components/Title.vue';
+import AppointmentsList from '@/components/AppointmentsList.vue';
+
+
+export default defineComponent({
+    name: 'AppointmentsView',
+    components: {
+    Header,
+    Title,
+    AppointmentsList
+}
+})
+</script>
\ No newline at end of file
diff --git a/web-client/voll/src/views/FormView.vue b/web-client/voll/src/views/FormView.vue
index 5900274..f2eef9b 100644
--- a/web-client/voll/src/views/FormView.vue
+++ b/web-client/voll/src/views/FormView.vue
@@ -24,20 +24,188 @@
                     </Fieldset>
                 </div>
 
-                <div class="form-div occupational">
-                    <h3 v-if="typeIs === 'doctors'" class="title">Occupational</h3>
-                    <h3 v-if="typeIs === 'patients'" class="title">Patient</h3>
+                <div class="entity"
+                    v-if="typeIs === 'doctors' && entity.address || typeIs === 'patients' && entity.address">
+                    <div class="form-div occupational">
+                        <h3 v-if="typeIs === 'doctors'" class="title">Occupational</h3>
+                        <h3 v-if="typeIs === 'patients'" class="title">Patient</h3>
+                        <div class="form-pair">
+                            <Fieldset>
+                                <label class="field-label" for="name">Name</label>
+                                <input type="text" class="field-input" id="name" v-model="entity.name" required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                            <Fieldset v-if="typeIs === 'doctors'">
+                                <label class="field-label" for="specialty" required>Specialty</label>
+                                <select id="specialty" name="specialty" class="field-input" v-model="entity.specialty"
+                                    required>
+                                    <option disabled value="">Select a specialty</option>
+                                    <option value="ANESTHESIOLOGY">ANESTHESIOLOGY</option>
+                                    <option value="CARDIOLOGY">CARDIOLOGY</option>
+                                    <option value="DERMATOLOGY">DERMATOLOGY</option>
+                                    <option value="GYNECOLOGY">GYNECOLOGY</option>
+                                    <option value="IMMUNOLOGY">IMMUNOLOGY</option>
+                                    <option value="NEUROLOGY">NEUROLOGY</option>
+                                    <option value="OPHTHALMOLOGY">OPHTHALMOLOGY</option>
+                                    <option value="ORTHOPEDICS">ORTHOPEDICS</option>
+                                    <option value="PATHOLOGY">PATHOLOGY</option>
+                                    <option value="PEDIATRICS">PEDIATRICS</option>
+                                    <option value="PSYCHIATRY">PSYCHIATRY</option>
+                                    <option value="RADIOLOGY">RADIOLOGY</option>
+                                    <option value="SURGERY">SURGERY</option>
+                                    <option value="UROLOGY">UROLOGY</option>
+                                </select>
+                                <span class="error-message"></span>
+                            </Fieldset>
+                            <Fieldset v-if="typeIs === 'patients'">
+                                <label class="field-label" for="ssn">SSN</label>
+                                <input type="text" name="SSN" class="field-input" id="ssn" v-model="entity.ssn" v-maska
+                                    data-maska="###-##-####" minlength="11" maxlength="11" :disabled="editing" required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                        </div>
+                    </div>
+
+                    <div class="form-div contact">
+                        <h3 class="title">Contact</h3>
+                        <div class="form-pair">
+                            <Fieldset>
+                                <label class="field-label" for="email">Email</label>
+                                <input type="email" class="field-input" id="email" v-model="entity.email"
+                                    :disabled="editing" required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                            <Fieldset>
+                                <label class="field-label" for="tel">Phone number</label>
+                                <input type="tel" class="field-input" id="tel" v-maska data-maska="(###) ###-####"
+                                    placeholder="(206) 555-1212" v-model="entity.phone" minlength="14" maxlength="14"
+                                    required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                        </div>
+                    </div>
+
+                    <div class="form-div address">
+                        <h3 class="title">Professional address</h3>
+                        <Fieldset id="zip-field">
+                            <label class="field-label" for="zip">Zip code</label>
+                            <input type="text" class="field-input" id="zip" v-model="entity.address.postalCode"
+                                maxlength="5" required />
+                            <span class="error-message"></span>
+                        </Fieldset>
+                        <div class="form-pair">
+                            <Fieldset>
+                                <label class="field-label" for="address1">Address line 1</label>
+                                <input type="text" class="field-input" id="address1" v-model="entity.address.addressLine1"
+                                    required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                            <Fieldset>
+                                <label class="field-label" for="address2">Address line 2</label>
+                                <input type="text" class="field-input" id="address2"
+                                    v-model="entity.address.addressLine2" />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                        </div>
+                        <div class="form-pair">
+                            <Fieldset>
+                                <label class="field-label" for="city">City</label>
+                                <input type="text" class="field-input" id="city" v-model="entity.address.city" required />
+                                <span class="error-message"></span>
+                            </Fieldset>
+                            <Fieldset>
+                                <label class="field-label" for="state">State</label>
+                                <select id="state" name="state" v-model="entity.address.state" class="field-input" required>
+                                    <option disabled value="">Select a state</option>
+                                    <option value="AL">Alabama</option>
+                                    <option value="AK">Alaska</option>
+                                    <option value="AZ">Arizona</option>
+                                    <option value="AR">Arkansas</option>
+                                    <option value="CA">California</option>
+                                    <option value="CO">Colorado</option>
+                                    <option value="CT">Connecticut</option>
+                                    <option value="DE">Delaware</option>
+                                    <option value="DC">District Of Columbia</option>
+                                    <option value="FL">Florida</option>
+                                    <option value="GA">Georgia</option>
+                                    <option value="HI">Hawaii</option>
+                                    <option value="ID">Idaho</option>
+                                    <option value="IL">Illinois</option>
+                                    <option value="IN">Indiana</option>
+                                    <option value="IA">Iowa</option>
+                                    <option value="KS">Kansas</option>
+                                    <option value="KY">Kentucky</option>
+                                    <option value="LA">Louisiana</option>
+                                    <option value="ME">Maine</option>
+                                    <option value="MD">Maryland</option>
+                                    <option value="MA">Massachusetts</option>
+                                    <option value="MI">Michigan</option>
+                                    <option value="MN">Minnesota</option>
+                                    <option value="MS">Mississippi</option>
+                                    <option value="MO">Missouri</option>
+                                    <option value="MT">Montana</option>
+                                    <option value="NE">Nebraska</option>
+                                    <option value="NV">Nevada</option>
+                                    <option value="NH">New Hampshire</option>
+                                    <option value="NJ">New Jersey</option>
+                                    <option value="NM">New Mexico</option>
+                                    <option value="NY">New York</option>
+                                    <option value="NC">North Carolina</option>
+                                    <option value="ND">North Dakota</option>
+                                    <option value="OH">Ohio</option>
+                                    <option value="OK">Oklahoma</option>
+                                    <option value="OR">Oregon</option>
+                                    <option value="PA">Pennsylvania</option>
+                                    <option value="RI">Rhode Island</option>
+                                    <option value="SC">South Carolina</option>
+                                    <option value="SD">South Dakota</option>
+                                    <option value="TN">Tennessee</option>
+                                    <option value="TX">Texas</option>
+                                    <option value="UT">Utah</option>
+                                    <option value="VT">Vermont</option>
+                                    <option value="VA">Virginia</option>
+                                    <option value="WA">Washington</option>
+                                    <option value="WV">West Virginia</option>
+                                    <option value="WI">Wisconsin</option>
+                                    <option value="WY">Wyoming</option>
+                                </select>
+                                <span class="error-message"></span>
+                            </Fieldset>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="typeIs === 'appointments'" class="entity">
+                    <h3 class="title">People involved</h3>
                     <div class="form-pair">
                         <Fieldset>
-                            <label class="field-label" for="name">Name</label>
-                            <input type="text" class="field-input" id="name" v-model="entity.name" required />
+                            <label class="field-label" for="patient">Patient</label>
+                            <select id="patient" name="patient" v-model="appointment.patientName" class="field-input"
+                                required>
+                                <option disabled value="">Select a patient</option>
+                                <option v-for="patient, index in patients" :key="index" :value="patient.id">{{ patient.name
+                                }}</option>
+                            </select>
                             <span class="error-message"></span>
                         </Fieldset>
-                        <Fieldset v-if="typeIs === 'doctors'">
-                            <label class="field-label" for="specialty" required>Specialty</label>
-                            <select id="specialty" name="specialty" class="field-input" v-model="entity.specialty"
-                                required>
+                        <Fieldset v-if="!appointment.specialty">
+                            <label class="field-label" for="doctor">Doctor</label>
+                            <select id="doctor" name="doctor" v-model="appointment.doctorName" class="field-input">
+                                <option disabled value="">Select a doctor</option>
+                                <option value=""></option>
+                                <option v-for="doctor, index in doctors" :key="index" :value="doctor.id">{{ doctor.name +
+                                    ' (' + doctor.specialty + ')' }}</option>
+                            </select>
+                            <span class="error-message"></span>
+                        </Fieldset>
+
+                    </div>
+                    <div v-if="!appointment.doctorName">
+                        <h3 class="title">Random doctor</h3>
+                        <Fieldset>
+                            <label class="field-label" for="specialty">Specialty</label>
+                            <select id="specialty" name="specialty" v-model="appointment.specialty" class="field-input">
                                 <option disabled value="">Select a specialty</option>
+                                <option value=""></option>
                                 <option value="ANESTHESIOLOGY">ANESTHESIOLOGY</option>
                                 <option value="CARDIOLOGY">CARDIOLOGY</option>
                                 <option value="DERMATOLOGY">DERMATOLOGY</option>
@@ -55,117 +223,19 @@
                             </select>
                             <span class="error-message"></span>
                         </Fieldset>
-                        <Fieldset v-if="typeIs === 'patients'">
-                            <label class="field-label" for="ssn">SSN</label>
-                            <input type="text" name="SSN" class="field-input" id="ssn" v-model="entity.ssn" v-maska
-                                data-maska="###-##-####" minlength="11" maxlength="11" :disabled="editing" required />
-                            <span class="error-message"></span>
-                        </Fieldset>
-                    </div>
-                </div>
-
-                <div class="form-div contact">
-                    <h3 class="title">Contact</h3>
-                    <div class="form-pair">
-                        <Fieldset>
-                            <label class="field-label" for="email">Email</label>
-                            <input type="email" class="field-input" id="email" v-model="entity.email"
-                                :disabled="editing" required />
-                            <span class="error-message"></span>
-                        </Fieldset>
-                        <Fieldset>
-                            <label class="field-label" for="tel">Phone number</label>
-                            <input type="tel" class="field-input" id="tel" v-maska data-maska="(###) ###-####"
-                                placeholder="(206) 555-1212" v-model="entity.phone" minlength="14" maxlength="14"
-                                required />
-                            <span class="error-message"></span>
-                        </Fieldset>
-                    </div>
-                </div>
-
-                <div class="form-div address">
-                    <h3 class="title">Professional address</h3>
-                    <Fieldset id="zip-field">
-                        <label class="field-label" for="zip">Zip code</label>
-                        <input type="text" class="field-input" id="zip" v-model="entity.address.postalCode"
-                            maxlength="5" required />
-                        <span class="error-message"></span>
-                    </Fieldset>
-                    <div class="form-pair">
-                        <Fieldset>
-                            <label class="field-label" for="address1">Address line 1</label>
-                            <input type="text" class="field-input" id="address1" v-model="entity.address.addressLine1"
-                                required />
-                            <span class="error-message"></span>
-                        </Fieldset>
-                        <Fieldset>
-                            <label class="field-label" for="address2">Address line 2</label>
-                            <input type="text" class="field-input" id="address2"
-                                v-model="entity.address.addressLine2" />
-                            <span class="error-message"></span>
-                        </Fieldset>
                     </div>
+                    <h3 class="title">Date and time</h3>
                     <div class="form-pair">
                         <Fieldset>
-                            <label class="field-label" for="city">City</label>
-                            <input type="text" class="field-input" id="city" v-model="entity.address.city" required />
+                            <label class="field-label" for="date">Date</label>
+                            <input type="date" class="field-input" id="date" v-model="appointment.date" required />
                             <span class="error-message"></span>
                         </Fieldset>
                         <Fieldset>
-                            <label class="field-label" for="state">State</label>
-                            <select id="state" name="state" v-model="entity.address.state" class="field-input" required>
-                                <option disabled value="">Select a state</option>
-                                <option value="AL">Alabama</option>
-                                <option value="AK">Alaska</option>
-                                <option value="AZ">Arizona</option>
-                                <option value="AR">Arkansas</option>
-                                <option value="CA">California</option>
-                                <option value="CO">Colorado</option>
-                                <option value="CT">Connecticut</option>
-                                <option value="DE">Delaware</option>
-                                <option value="DC">District Of Columbia</option>
-                                <option value="FL">Florida</option>
-                                <option value="GA">Georgia</option>
-                                <option value="HI">Hawaii</option>
-                                <option value="ID">Idaho</option>
-                                <option value="IL">Illinois</option>
-                                <option value="IN">Indiana</option>
-                                <option value="IA">Iowa</option>
-                                <option value="KS">Kansas</option>
-                                <option value="KY">Kentucky</option>
-                                <option value="LA">Louisiana</option>
-                                <option value="ME">Maine</option>
-                                <option value="MD">Maryland</option>
-                                <option value="MA">Massachusetts</option>
-                                <option value="MI">Michigan</option>
-                                <option value="MN">Minnesota</option>
-                                <option value="MS">Mississippi</option>
-                                <option value="MO">Missouri</option>
-                                <option value="MT">Montana</option>
-                                <option value="NE">Nebraska</option>
-                                <option value="NV">Nevada</option>
-                                <option value="NH">New Hampshire</option>
-                                <option value="NJ">New Jersey</option>
-                                <option value="NM">New Mexico</option>
-                                <option value="NY">New York</option>
-                                <option value="NC">North Carolina</option>
-                                <option value="ND">North Dakota</option>
-                                <option value="OH">Ohio</option>
-                                <option value="OK">Oklahoma</option>
-                                <option value="OR">Oregon</option>
-                                <option value="PA">Pennsylvania</option>
-                                <option value="RI">Rhode Island</option>
-                                <option value="SC">South Carolina</option>
-                                <option value="SD">South Dakota</option>
-                                <option value="TN">Tennessee</option>
-                                <option value="TX">Texas</option>
-                                <option value="UT">Utah</option>
-                                <option value="VT">Vermont</option>
-                                <option value="VA">Virginia</option>
-                                <option value="WA">Washington</option>
-                                <option value="WV">West Virginia</option>
-                                <option value="WI">Wisconsin</option>
-                                <option value="WY">Wyoming</option>
+                            <label class="field-label" for="time">Time</label>
+                            <select id="time" name="time" class="field-input" v-model="appointment.time" required>
+                                <option disabled value="">Select the time</option>
+                                <option v-for="time, index in timeAvailable" :key="index" :value="time">{{ time }}</option>
                             </select>
                             <span class="error-message"></span>
                         </Fieldset>
@@ -173,8 +243,14 @@
                 </div>
 
                 <div v-if="!editing">
-                    <input @click.prevent="submit($event)" @keyup.enter.prevent="submit($event)"
-                        value="Register profile" class="btn form-btn" id="send" type="submit">
+                    <div v-if="typeIs === 'appointments'">
+                        <input @click.prevent="submit($event)" @keyup.enter.prevent="submit($event)"
+                            value="Schedule appointment" class="btn form-btn margin-top" id="send" type="submit">
+                    </div>
+                    <div v-else>
+                        <input @click.prevent="submit($event)" @keyup.enter.prevent="submit($event)"
+                            value="Register profile" class="btn form-btn" id="send" type="submit">
+                    </div>
                 </div>
                 <div v-else>
                     <div v-if="typeIs === 'doctors'">
@@ -186,19 +262,17 @@
                     </div>
                     <div v-if="typeIs === 'patients'">
                         <p @click="showModal(entity.id, entity.name, entity.ssn)"
-                            @keyup.enter="showModal(entity.id, entity.name, entity.ssn)" tabindex="0"
-                            class="deactivate">
+                            @keyup.enter="showModal(entity.id, entity.name, entity.ssn)" tabindex="0" class="deactivate">
                             Deactivate profile</p>
                     </div>
-                    <Modal ref="modal" />
+                    <Modal ref="modal" :page="typeIs"/>
                     <div>
-                        <input @click.prevent="submit($event)" @keyup.enter.prevent="submit($event)"
-                            value="Edit profile" class="btn form-btn" id="send" type="submit">
+                        <input @click.prevent="submit($event)" @keyup.enter.prevent="submit($event)" value="Edit profile"
+                            class="btn form-btn" id="send" type="submit">
                     </div>
                 </div>
                 <div>
-                    <router-link to="/"><input class="btn-reverse form-btn" value="Cancel"
-                            type="button" /></router-link>
+                    <router-link to="/"><input class="btn-reverse form-btn" value="Cancel" type="button" /></router-link>
                 </div>
             </form>
         </main>
@@ -217,6 +291,7 @@ import Header from '@/components/Header.vue';
 import IDoctor from '@/interfaces/IDoctor';
 import IPatient from '@/interfaces/IPatient';
 import IAddress from '@/interfaces/IAddress';
+import IAppointment from '@/interfaces/IAppointment';
 import handleBadRequest from '@/utilities/handleBadRequest';
 
 export default defineComponent({
@@ -240,12 +315,16 @@ export default defineComponent({
             idIs: this.$route.params.id as string,
             token: sessionStorage.getItem('token'),
             phoneMask: new Mask({ mask: "(###) ###-####" }),
-            ssnMask: new Mask({ mask: "###-##-####" })
+            ssnMask: new Mask({ mask: "###-##-####" }),
+            appointment: {} as IAppointment,
+            timeAvailable: [] as string[],
+            doctors: [] as IDoctor[],
+            patients: [] as IPatient[]
         }
     },
     methods: {
-        showModal(id, name, specialty) {
-            (this.$refs.modal as typeof Modal).showModal(id, name, specialty)
+        showModal(id, name, specialtyOrSSN) {
+            (this.$refs.modal as typeof Modal).showModal(id, name, specialtyOrSSN)
         },
         submit(e) {
             e.target.blur()
@@ -258,6 +337,15 @@ export default defineComponent({
                 addressData: this.entity.address
             }
 
+            const date = this.appointment.date + 'T' + this.appointment.time + ':00'
+
+            const dataAppointment = {
+                idPatient: this.appointment.patientName,
+                ...(this.appointment.doctorName) && { idDoctor: this.appointment.doctorName },
+                ...(!this.appointment.doctorName) && { specialty: this.appointment.specialty },
+                date: date,
+            }
+
             let method = 'post'
             if (this.editing) {
                 method = 'put'
@@ -266,7 +354,8 @@ export default defineComponent({
             const url = `http://localhost:8081/${this.typeIs}`
             axios[method](url, {
                 ...(this.editing) && { id: this.idIs },
-                ...data
+                ...(this.typeIs === 'patients' || this.typeIs === 'doctors') && { ...data },
+                ...(this.typeIs === 'appointments') && { ...dataAppointment }
             }, {
                 headers: {
                     Authorization: `Bearer ${this.token}`
@@ -279,12 +368,36 @@ export default defineComponent({
                 .catch(error => {
                     const code = error.response.status
                     const errors = error.response.data
+                    console.log(error.response)
                     this.handleBadRequest(code, errors)
                 })
         },
-        handleBadRequest
+        handleBadRequest,
+        getEntities() {
+            ['doctors', 'patients'].forEach(element => {
+                const url = `http://localhost:8081/${element}`
+                axios.get(url, {
+                    headers: {
+                        Authorization: `Bearer ${this.token}`
+                    }
+                }).then(response => {
+                    this[element] = response.data.content
+                    if (element === 'patients') {
+                        this[element].forEach(entity => {
+                            entity.phone = this.phoneMask.masked(entity.phone)
+                        })
+                    }
+                }).catch(error => {
+                    console.log(error)
+                })
+            })
+        }
     },
     created() {
+        for (let hours = 7; hours < 19; hours++) {
+            this.timeAvailable.push(hours + ':00')
+        }
+        this.getEntities()
         this.entity.address = {} as IAddress
         this.entity.ssn = ''
         this.entity.phone = ''
@@ -300,6 +413,14 @@ export default defineComponent({
             }
         })
             .then(response => {
+                if (this.typeIs === 'appointments') {
+                    this.appointment = response.data
+                    this.appointment.time = response.data.date.substring(11, 16)
+                    this.appointment.date = this.appointment.date.substring(0, 10)
+                    this.appointment.doctorName = response.data.idDoctor
+                    this.appointment.patientName = response.data.idPatient
+                    return
+                }
                 this.entity = response.data
 
                 if (this.typeIs === 'patients') {
@@ -334,6 +455,10 @@ export default defineComponent({
     font-weight: 500;
 }
 
+.margin-top {
+    margin-top: 2rem;
+}
+
 @media screen and (max-width: 900px) {
     .block {
         display: inline;
diff --git a/web-client/voll/tsconfig.json b/web-client/voll/tsconfig.json
index 1048ed4..d8529f7 100644
--- a/web-client/voll/tsconfig.json
+++ b/web-client/voll/tsconfig.json
@@ -39,4 +39,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3-18-g5258