Development admin accessibility

client/src/clients/api/vacations.ts

@@ -12,6 +12,7 @@ export class VacationsApi extends ApiClientBase {
   readonly edit: VacationsEditApi
   readonly get_admin_balance: VacationsGetAdminBalanceApi
   readonly post_admin_balance: VacationsPostAdminBalanceApi
+  readonly admin: VacationsAdmin
   readonly user: VacationsUserApi
 
   constructor(options: Api.ClientOptions) {
@@ -25,6 +26,7 @@ export class VacationsApi extends ApiClientBase {
     this.edit = new VacationsEditApi(options, this.path)
     this.get_admin_balance = new VacationsGetAdminBalanceApi(options, this.path)
     this.post_admin_balance = new VacationsPostAdminBalanceApi(options, this.path)
+    this.admin= new VacationsAdmin(options, this.path)
     this.user = new VacationsUserApi(options, this.path)
   }
 
@@ -168,6 +170,21 @@ class VacationsGetAdminBalanceApi extends ApiClientBase {
     })
   }
 }
+class VacationsAdmin extends ApiClientBase {
+  protected readonly path = '/admin'
+
+
+  async create(id: number, input: Api.Inputs.Leave) {
+    ApiClientBase.assertUser()
+    const vacation = await this.unwrap(
+      () => this.$http.post<Api.Returns.LeaveRequest>(this.getUrl(`/${id}`), input),
+      { transform: (d) => d.results }
+    )
+
+    return vacation
+  }
+}
+
 
 class VacationsPostAdminBalanceApi extends ApiClientBase {
   protected readonly path = '/post-admin-balance'

client/src/components/SetUserVacations.vue

@@ -80,17 +80,8 @@
 
             <template #append-item v-if="reloadMore">
               <VContainer>
-                <VBtn
-                  @click="
-                    () => {
-                      return page++, count--, listUsers()
-                    }
-                  "
-                  block
-                  color="secondary"
-                  variant="tonal"
-                  prepend-icon="mdi-reload"
-                >
+                <VBtn @click="() => { return page++, count--, concatUsers() }" block color="secondary" variant="tonal"
+                  prepend-icon="mdi-reload">
                   Load More Users
                 </VBtn>
               </VContainer>
@@ -136,7 +127,7 @@
 
 <script lang="ts">
 import { $api } from '@/clients'
-import { requiredRules, requiredStringRules, vacationRules } from '@/utils'
+import { listUsers, requiredRules, requiredStringRules, vacationRules } from '@/utils'
 import { onMounted, ref, watchEffect, computed } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { ApiClientBase } from '@/clients/api/base'
@@ -276,21 +267,18 @@ export default {
       }
     })
 
-    async function listUsers() {
-      const res = await $api.users.admin.office_users.list({ page: page.value })
-      if (res.count) {
-        count.value = Math.ceil(res.count / 10)
-      } else {
-        count.value = 0
-      }
-      res.results.forEach((user: any) => {
-        officeUsers.value.push(user)
-      })
-      return officeUsers.value
+    async function concatUsers() {
+      const { page: currentPage, count: currentCount, users: newUsers } = await listUsers($api, page.value, count.value);
+
+      page.value = currentPage;
+      count.value = currentCount;
+      officeUsers.value = officeUsers.value.concat(newUsers);
     }
+
+
     onMounted(async () => {
       try {
-        await listUsers()
+        await concatUsers()
         selectedUsers.value.push(officeUsers.value[0])
         await getUserBalance()
       } catch (error) {
@@ -322,7 +310,7 @@ export default {
       vacationRules,
       isLoading,
       reloadMore,
-      listUsers,
+      concatUsers,
       execute,
       setUserBalanceValues,
       userBalance,

client/src/components/UpdateUser.vue

@@ -9,7 +9,7 @@
 
             <template #append-item v-if="reloadMore">
               <VContainer>
-                <VBtn @click="() => { return page++, count--, listUsers() }" block color="secondary" variant="tonal"
+                <VBtn @click="() => { return page++, count--,  concatUsers()}" block color="secondary" variant="tonal"
                   prepend-icon="mdi-reload">
                   Load More Users
                 </VBtn>
@@ -114,7 +114,8 @@ import {
   telegramRules,
   requiredStringRules,
   requiredRules,
-  formatDate
+  formatDate,
+  listUsers
 } from '@/utils'
 import { useAsyncState } from '@vueuse/core'
 import { ApiClientBase } from '@/clients/api/base'
@@ -166,18 +167,6 @@ export default {
       }
       return false;
     });
-    async function listUsers() {
-      const res = await $api.users.admin.office_users.list({ page: page.value })
-      if (res.count) {
-        count.value = Math.ceil(res.count / 10)
-      } else {
-        count.value = 0
-      }
-      res.results.forEach((user: any) => {
-        officeUsers.value.push(user)
-      })
-      return officeUsers.value
-    }
 
     async function listSupervisors() {
       const res = await $api.users.supervisors.list({ page: supervisorPage.value })
@@ -193,13 +182,21 @@ export default {
       return supervisors.value
     }
 
+    async function concatUsers() {
+      const { page: currentPage, count: currentCount, users: newUsers } = await listUsers($api, page.value, count.value);
+
+      page.value = currentPage;
+      count.value = currentCount;
+      officeUsers.value = officeUsers.value.concat(newUsers);
+    }
+
     onMounted(async () => {
       try {
         offices.value = (await $api.office.list()).map((office: any) => ({
           id: office.id,
           name: office.name
-        }))
-        await listUsers()
+        }));
+        await concatUsers()
         selectedUser.value = officeUsers.value[0]
         await listSupervisors()
         reporting_to.value = selectedUser.value?.reporting_to[0]
@@ -299,7 +296,7 @@ export default {
       page,
       reloadMore,
       reloadMoreSupervisor,
-      listUsers,
+      concatUsers,
       chooseImage
     }
   }

client/src/components/cards/vacationCard.vue

@@ -13,6 +13,7 @@
         <b color="primary">{{ vacation.end_date }} </b> vacation
 
       </p>
+
       <v-form ref="form" @submit.prevent="updateVacation()">
 
         <v-row class="d-flex justify-center my-2" v-if="couldUpdate">
@@ -157,7 +158,7 @@ export default {
             return true
           }
           if (
-            props.vacation.user.reporting_to[0].id === props.vacation.user?.id &&
+            props.vacation.user.reporting_to[0]?.id === props.vacation.user?.id &&
             props.vacation.user.location.name === user.value.fullUser.location.name
           ) {
             return true

client/src/components/requests/leaveRequest.vue

@@ -3,6 +3,25 @@
     <v-alert v-if="form?.isValid && isValid" density="compact" class="pa-5 my-5" type="warning">
       {{ actualDays.state.value === 0 ? "Actual vacation days requested is zero, Selected days might include weekends or public holidays" : "Actual vacation days requested are " + actualDays.state.value +" days" }}
     </v-alert>
+    <div class="mt-3" v-if="user?.fullUser.user_type === 'Admin'"> <v-radio-group inline v-model="selectedOption">
+        <v-radio label="For yourself" value="me"></v-radio>
+        <v-radio label="For Another User" value="anotheruser"></v-radio>
+      </v-radio-group> </div>
+    <div class="mt-3" v-if="selectedOption === 'anotheruser'">
+      <v-autocomplete color="info" item-color="info" base-color="info" variant="outlined" v-model="selectedUser"
+        :items="officeUsers" item-title="full_name" item-value="id" label="User" return-object :rules="requiredRules">
+
+        <template #append-item v-if="reloadMore">
+          <VContainer>
+            <VBtn @click="() => { return page++, count--, concatUsers() }" block color="secondary" variant="tonal"
+              prepend-icon="mdi-reload">
+              Load More Users
+            </VBtn>
+          </VContainer>
+        </template>
+      </v-autocomplete>
+
+    </div>
 
     <div class="mt-3">
       <v-text-field ref="startDateField" color="info" item-color="info" base-color="info" variant="outlined"
@@ -26,7 +45,8 @@
 </template>
 <script lang="ts">
 import { useApi } from '@/hooks'
-import type { Api } from '@/types';
+import { Selection, type Api } from '@/types';
+import { requiredRules, listUsers } from '@/utils'
 import { useAsyncState } from '@vueuse/core';
 import { computed, onMounted, ref, watch } from 'vue';
 import { ApiClientBase } from '@/clients/api/base';
@@ -40,15 +60,21 @@ export default {
   setup(props, ctx) {
     const $api = useApi()
     const form = ref()
+    const officeUsers = ref<any[]>([]);
+    const selectedUser = ref()
+    const selectedOption = ref<Selection>(Selection.ME)
+    const page = ref(1)
+    const count = ref(0)
     const startDateField = ref()
     const endDateField = ref()
     const startDate = ref<Date>(props.dates.startStr)
     const endDate = ref<any>(new Date(props.dates.endStr))
     endDate.value.setDate(endDate.value.getDate() - 1);
     endDate.value = endDate.value.toISOString().split('T')[0];
     const user = ApiClientBase.user
+    const userId = ref<number | undefined>()
     const leaveReason = ref<Api.LeaveReason>()
-
+    const leaveReasons = ref<Api.LeaveReason[]>([])
     const actualDays = useAsyncState(
       async () => {
         return $api.vacations.calculate.list({
@@ -64,9 +90,9 @@ export default {
       let val = leaveReason.value ? true : false;
       return val;
     });
-    const leaveReasons = ref<Api.LeaveReason[]>([])
 
-    const balance = useAsyncState($api.vacations.getVacationBalance({ "user_ids": user.value?.fullUser.id }), null, {
+    const balance = useAsyncState(() => $api.vacations.getVacationBalance({ "user_ids": userId.value }), null, {
+      immediate: false,
       onSuccess(data: any) {
         leaveReasons.value = [{
           name: `Emergency Leaves  ${data[0].emergency_leaves.reserved} / ${data[0].emergency_leaves.all}`,
@@ -91,6 +117,33 @@ export default {
       }
     })
 
+    watch(
+      () => [selectedOption.value],
+      () => {
+        if (selectedOption.value === Selection.ANOTHERUSER) {
+          selectedUser.value = officeUsers.value[0]
+        } else {
+          selectedUser.value = undefined
+          userId.value = user.value?.fullUser.id
+          balance.execute()
+
+        }
+
+      },
+    );
+
+    watch(
+      () => [selectedUser.value],
+      async () => {
+        if (selectedUser.value) {
+          userId.value = selectedUser.value.id
+          balance.execute()
+        }
+      },
+    );
+
+
+
 
     watch(
       () => [startDate.value, endDate.value],
@@ -110,27 +163,64 @@ export default {
       return true;
     };
 
-    onMounted(() => {
+    async function concatUsers() {
+      const { page: currentPage, count: currentCount, users: newUsers } = await listUsers($api, page.value, count.value);
+
+      page.value = currentPage;
+      count.value = currentCount;
+      officeUsers.value = officeUsers.value.concat(newUsers);
+    }
+    onMounted(async () => {
+
       startDateField.value.validate();
       endDateField.value.validate();
-
+      userId.value = user.value?.fullUser.id
+      balance.execute()
+      concatUsers()
     })
+    const reloadMore = computed(() => {
+      if (page.value === count.value) {
+        return false
+      }
+      if (count.value > 1) {
+        return true
+      }
+      return false;
+    });
 
     async function createLeave() {
       if (leaveReason.value) {
-        useAsyncState($api.vacations.create(
-          {
-            reason: leaveReason.value.reason,
-            from_date: startDate.value,
-            end_date: endDate.value
-          }),
-          undefined,
-          {
-            onSuccess(data) {
-              ctx.emit('create-event', data)
+        if (selectedOption.value === Selection.ANOTHERUSER) {
+          useAsyncState(
+            $api.vacations.admin.create(selectedUser.value.id, {
+              reason: leaveReason.value.reason,
+              from_date: startDate.value,
+              end_date: endDate.value,
+            }),
+            null,
+            {
+              onSuccess(data) {
+                ctx.emit('create-event', data)
+              }
+            }
+          )
+
+        }
+        else {
+          useAsyncState($api.vacations.create(
+            {
+              reason: leaveReason.value.reason,
+              from_date: startDate.value,
+              end_date: endDate.value
+            }),
+            undefined,
+            {
+              onSuccess(data) {
+                ctx.emit('create-event', data)
+              }
             }
-          }
-        )
+          )
+        }
       }
     }
 
@@ -145,6 +235,14 @@ export default {
       user,
       startDateField,
       endDateField,
+      requiredRules,
+      reloadMore,
+      selectedUser,
+      officeUsers,
+      page,
+      count,
+      selectedOption,
+      concatUsers,
       createLeave,
       validateDates,
     };