Development 1.1 calender

client/.env

@@ -1,5 +1,5 @@
 # Client Related
-VITE_TITLE="CSHR"
+VITE_TITLE="Codescalers HR management system"
 VITE_FAVICON="https://placehold.co/32/steelblue/white?text=CS"
 VITE_LOGO="https://placehold.co/128/steelblue/white?text=CS"
 

client/package.json

@@ -14,10 +14,17 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.9",
+    "@fullcalendar/daygrid": "^6.1.9",
+    "@fullcalendar/interaction": "^6.1.9",
+    "@fullcalendar/list": "^6.1.9",
+    "@fullcalendar/timegrid": "^6.1.9",
+    "@fullcalendar/vue3": "^6.1.9",
     "@mdi/font": "^7.4.47",
     "@vueuse/core": "^10.7.1",
     "@vueuse/router": "^10.7.1",
     "axios": "^1.6.3",
+    "calendar_options": "link:@fullcalendar/core/calendar_options",
     "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "vue": "^3.3.11",

client/src/clients/api/base.ts

@@ -72,7 +72,7 @@
     const errorMessage = responseData?.message ?? err.message;
 
     const errorDetails = Object.entries(responseData?.error || {})
       .map(([_, value]) => `${value}`)
       .join('. ');
 
     return `${errorMessage}${errorDetails ? `. ${capitalize(errorDetails)}` : ''}`;
@@ -90,11 +90,25 @@
     if (access_token && refresh_token && !isValidToken(access_token) && isValidToken(refresh_token)) {
       await ApiClientBase.$api.auth.refresh({ refresh: refresh_token })
     }
+    if (err && !ApiClientBase.USER && access_token !== null && refresh_token !== null) {
+      const user = await ApiClientBase.$api.myprofile.getUser();
+      ApiClientBase.USER = {...user, access_token, refresh_token}
+    }
+
+    if (err) {
+
+      options.disableNotify !== true && ApiClientBase.$notifier?.notify({
+        type: 'error',
+        description: options.normalizeError?.(err, res) ?? ApiClientBase.normalizeError(err) ?? err
+      })
+
+      panic(err)
+    }
 
     if (
       (res.config.method === 'post' || res.config.method === 'put') &&
       typeof res.data === 'object' &&
-      'message' in (res.data || {})
+      'message' in (res.data || {}) && options.disableNotify !== true 
     ) {
       ApiClientBase.$notifier?.notify({
         type: 'success',

client/src/clients/api/event.ts

@@ -12,9 +12,22 @@ export class EventApi extends ApiClientBase {
     this.exact = new EventExactApi(options, this.path)
   }
 
-  async list() {}
+ async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Inputs.Event>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
+  async create(input: Api.Inputs.Event) {
+    ApiClientBase.assertUser()
+    const event = await this.unwrap(
+      this.$http.post<Api.Returns.Event>(this.getUrl(''), input),
+      { transform: (d) => d.results }
+    )
+
+    return event
+  }
 
-  async create() {}
 
   async read(id: number) {}
 

client/src/clients/api/home.ts

@@ -1,7 +1,14 @@
+import type { Api } from '@/types'
 import { ApiClientBase } from './base'
 
 export class HomeApi extends ApiClientBase {
   protected readonly path = '/home'
 
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Home>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
+
 }

client/src/clients/api/meeting.ts

@@ -12,9 +12,20 @@ export class MeetingApi extends ApiClientBase {
     this.exact = new MeetingExactApi(options)
   }
 
-  async list() {}
-
-  async create() {}
+  list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Meetings>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+  async create(input: Api.Inputs.Meeting) {
+    ApiClientBase.assertUser()
+    const event = await this.unwrap(
+      this.$http.post<Api.Returns.Meeting>(this.getUrl(''),input),
+      { transform: (d) => d.results }
+    )
+
+    return event
+  }
 
   async read(id: number) {}
 

client/src/clients/api/users.ts

@@ -33,7 +33,6 @@ export class UsersApi extends ApiClientBase {
       ...options
     })
   }
-
   read(id: number) {
     return this.unwrap(this.$http.get<Api.Returns.MsgRes<Api.User>>(this.getUrl(`/${id}`)), {
       transform: (d) => d.results

client/src/clients/api/vacations.ts

@@ -36,27 +36,52 @@ export class VacationsApi extends ApiClientBase {
     )
     return userBalance
   }
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Vacation>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+  // async list() {}
 
-  async create() {}
+  async create(input: Api.Inputs.Leave) {
+    ApiClientBase.assertUser()
+    const vacation = await this.unwrap(
+      this.$http.post<Api.Returns.LeaveRequest>(this.getUrl(''), input),
+      { transform: (d) => d.results }
+    )
 
+    return vacation
+  }
   async read(id: number) {}
 
-  async delete(id: number) {}
+
+  async delete(id: number) {
+    return this.unwrap(this.$http.delete<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }
 }
 
 class VacationsApproveApi extends ApiClientBase {
   protected readonly path = '/approve'
 
-  async update(id: number) {}
-}
+  async update(id: any) {
+    return this.unwrap(this.$http.put<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }}
 
 class VacationsRejectApi extends ApiClientBase {
   protected readonly path = '/reject'
 
   async read(id: number) {}
+
 
-  async update(id: number) {}
+  async update(id: number) {
+    return this.unwrap(this.$http.put<any>(this.getUrl(`/${id}`)), {
+      transform: (d) => d.results
+    })
+  }
 }
 
 class VacationsBalanceApi extends ApiClientBase {
@@ -95,7 +120,16 @@ class VacationsBalanceAdjustmentApi extends ApiClientBase {
 class VacationsCalculateApi extends ApiClientBase {
   protected readonly path = '/calculate'
 
-  async list() {}
+
+
+  async list(query: Api.Inputs.ActualDays) {
+    ApiClientBase.assertUser()
+    const calculation = await this.unwrap(
+      this.$http.get<any>(this.getUrl('', query)),
+      { transform: (d) => d.results }
+    )
+    return calculation
+  }
 }
 
 class VacationsCommentApi extends ApiClientBase {
@@ -109,7 +143,16 @@ class VacationsEditApi extends ApiClientBase {
 
   async read(id: number) {}
 
-  async update(id: number) {}
+  async update(id: number, input: Api.Inputs.Leave) {
+    ApiClientBase.assertUser()
+    const vacation = await this.unwrap(
+      this.$http.put<Api.Returns.LeaveRequest>(this.getUrl(`/${id}`), input),
+      { transform: (d) => d.results }
+    )
+
+    return vacation
+  }
+  // async update(id: number) {}
 }
 
 class VacationsGetAdminBalanceApi extends ApiClientBase {
@@ -140,5 +183,10 @@ class VacationsPostAdminBalanceApi extends ApiClientBase {
 class VacationsUserApi extends ApiClientBase {
   protected readonly path = '/user'
 
-  async list() {}
+  async list(query?: any) {
+    return this.unwrap(this.$http.get<Api.Returns.List<Api.Vacation>>(this.getUrl('', query)), {
+      transform: (d) => d.results
+    })
+  }
+
 }

client/src/components/CshrToolbar.vue

@@ -45,16 +45,7 @@
       <template #activator="{ props }">
         <div class="d-flex justify-center align-center mx-2">
           <VProgressCircular indeterminate v-if="user.isLoading.value" />
-          <VAvatar
-            v-else-if="user.state.value"
-            v-ripple
-            v-bind="props"
-            color="primary"
-            class="border"
-            :style="{ cursor: 'pointer' }"
-          >
-            <span class="text-h5 text-uppercase" v-text="user.state.value?.full_name[0] ?? '?'" />
-          </VAvatar>
+          <profileImage v-else-if="user.state.value" :with-link="true" :user="user.state.value" v-bind="props" />
         </div>
       </template>
 
@@ -79,10 +70,11 @@ import { useApi } from '@/hooks'
 import { getStatusColor } from '@/utils'
 import type { Api } from '@/types'
 import NotificationDetailsDialog from './NotificationDetailsDialog.vue'
+import profileImage from './profileImage.vue'
 
 export default {
   name: 'CshrToolbar',
-  components: { NotificationDetailsDialog },
+  components: { NotificationDetailsDialog, profileImage },
   setup() {
     const $api = useApi()
     const user = useAsyncState(() => $api.myprofile.getUser(), null)