fixing create event submit button

codescalers · Mar 26, 2024 · 308fa0a · 308fa0a
1 parent 3a8f2cc
commit 308fa0a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 11 deletions.
diff --git a/client/src/components/cards/vacationCard.vue b/client/src/components/cards/vacationCard.vue
@@ -138,6 +138,7 @@ export default {
     const couldUpdate = computed(() => {
       if (user.value) {
         if (props.vacation.status == 'pending') {
+          // could update if user signed in is the same user applied for vacation
           if (props.vacation.isUpdated && user.value.fullUser.id == props.vacation.applying_user) {
             return true
           }
@@ -156,13 +157,17 @@ export default {
     const couldApprove = computed(() => {
       
       if (user.value) {
+        // only admins or supervisors could approve vacation
         if (
           user.value.fullUser.user_type === 'Admin' ||
           user.value.fullUser.user_type === 'Supervisor'
           ) {
+          // Could approve if user signed in is the same user applied for vacation
           if (props.vacation.applying_user.id == user.value.fullUser.id) {
             return true
           }
+          // Could approve if applying user reports to the supervisor or admin logged in 
+          // and works from the same office
           if (
             props.vacation.applying_user.reporting_to &&
             props.vacation.applying_user.reporting_to[0]?.id === props.vacation.applying_user?.id &&

diff --git a/client/src/components/requests/eventRequest.vue b/client/src/components/requests/eventRequest.vue
@@ -1,13 +1,33 @@
 <template>
   <v-form ref="form" @submit.prevent="createEvent()">
     <div class="mt-3">
-      <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="From" v-model="startDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="startDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="From"
+        v-model="startDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
 
     <div class="mt-3">
-      <v-text-field ref="endDateField" color="info" item-color="info" base-color="info" variant="outlined"
-        hide-details="auto" label="To" v-model="endDate" type="date" :rules="[validateDates]"></v-text-field>
+      <v-text-field
+        ref="endDateField"
+        color="info"
+        item-color="info"
+        base-color="info"
+        variant="outlined"
+        hide-details="auto"
+        label="To"
+        v-model="endDate"
+        type="date"
+        :rules="[validateDates]"
+      ></v-text-field>
     </div>
 
     <div class="mt-3">
@@ -34,12 +54,19 @@
     </div>
 
     <v-row class="mt-3 pa-4 d-flex justify-end">
-      <v-btn color="primary" type="submit" :disabled="!form?.isValid || requesting" :loading="requesting"> Submit </v-btn>
+      <v-btn
+        color="primary"
+        type="submit"
+        :disabled="!form?.isValid || requesting"
+        :loading="requesting"
+      >
+        Submit
+      </v-btn>
     </v-row>
   </v-form>
 </template>
 <script lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { fieldRequired } from '@/utils'
 import { useApi } from '@/hooks'
 import { useAsyncState } from '@vueuse/core'
@@ -77,11 +104,12 @@ export default {
 
 
     const validateDates = (value: string | null): string | boolean => {
-      if (!startDate.value) return 'Please select start date.';
-      if (!endDate.value) return 'Please select end date.';
-      if (endDate.value <= startDate.value) return 'End date must be after start date.';
-      return true;
-    };
+      if (!startDate.value) return 'Please select start date.'
+      if (!endDate.value) return 'Please select end date.'
+      if (endDate.value < startDate.value) return 'End date must be after start date.'
+      return true
+    }
+
     const from_date = computed(() => {
       let val = new Date(startDate.value)
       if (eventStart.value) {
@@ -101,6 +129,11 @@ export default {
       return val.toISOString()
     })
 
+    onMounted(async () => {
+      startDateField.value.validate()
+      endDateField.value.validate()
+     
+    })
     async function createEvent() {
       requesting.value = true;
       await useAsyncState(