Skip to content

Commit

Permalink
Adding set_active and inactive functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@maayarosama
maayarosama committed Jan 29, 2024
1 parent e219370 commit 30fe4a0
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 176 deletions.
4 changes: 2 additions & 2 deletions client/src/clients/api/users.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,15 @@ class UsersSetActiveApi extends ApiClientBase {
protected readonly path = '/set_active'

update(input: Api.Inputs.UsersActive) {
return this.unwrap(this.$http.put<Api.Inputs.UsersActive>(this.getUrl(), input))
return this.unwrap(this.$http.put<any>(this.getUrl(), input))
}
}

class UsersSetInActiveApi extends ApiClientBase {
protected readonly path = '/set_inactive'

update(input: Api.Inputs.UsersActive) {
return this.unwrap(this.$http.put<Api.Inputs.UsersActive>(this.getUrl(), input))
return this.unwrap(this.$http.put<any>(this.getUrl(), input))
}
}

Expand Down
231 changes: 57 additions & 174 deletions client/src/components/UpdateUser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,186 +3,72 @@
<v-form ref="form" @submit.prevent>
<v-row class="justify-center align-center">
<v-col cols="12">
<v-select
v-model="selectedUser"
:items="officeUsers"
label="User"
item-title="full_name"
item-value="id"
return-object
density="comfortable"
:rules="requiredRules"
></v-select>
<v-select
v-model="reporting_to"
:items="supervisors"
item-title="full_name"
item-value="id"
label="Team Lead"
return-object
density="comfortable"
></v-select>
<v-select v-model="selectedUser" :items="officeUsers" label="User" item-title="full_name" item-value="id"
return-object density="comfortable" :rules="requiredRules"></v-select>
<v-select v-model="reporting_to" :items="supervisors" item-title="full_name" item-value="id" label="Team Lead"
return-object density="comfortable"></v-select>
</v-col>
<v-col cols="6" v-if="selectedUser">
<v-text-field
v-model="selectedUser.first_name"
label="First Name"
density="comfortable"
:rules="nameRules"
></v-text-field>
<v-text-field
v-model="selectedUser.last_name"
label="Last Name"
density="comfortable"
:rules="nameRules"
></v-text-field>
<v-text-field
v-model="selectedUser.email"
label="Email"
type="email"
density="comfortable"
:rules="emailRules"
></v-text-field>
<v-text-field
v-model="selectedUser.mobile_number"
label="Mobile Number"
type="number"
density="comfortable"
:rules="mobileRules"
></v-text-field>
<v-text-field
v-model="selectedUser.job_title"
label="Role"
density="comfortable"
:rules="jobRules"
></v-text-field>

<v-text-field
v-model="selectedUser.address"
label="Address"
density="comfortable"
:rules="addressRules"
></v-text-field>
<v-text-field
v-model="selectedUser.social_insurance_number"
label="Social Insurance Number"
type="number"
density="comfortable"
:rules="socialInsuranceRules"
></v-text-field>
<v-text-field v-model="selectedUser.first_name" label="First Name" density="comfortable"
:rules="nameRules"></v-text-field>
<v-text-field v-model="selectedUser.last_name" label="Last Name" density="comfortable"
:rules="nameRules"></v-text-field>
<v-text-field v-model="selectedUser.email" label="Email" type="email" density="comfortable"
:rules="emailRules"></v-text-field>
<v-text-field v-model="selectedUser.mobile_number" label="Mobile Number" type="number" density="comfortable"
:rules="mobileRules"></v-text-field>
<v-text-field v-model="selectedUser.job_title" label="Role" density="comfortable"
:rules="jobRules"></v-text-field>

<v-text-field v-model="selectedUser.address" label="Address" density="comfortable"
:rules="addressRules"></v-text-field>
<v-text-field v-model="selectedUser.social_insurance_number" label="Social Insurance Number" type="number"
density="comfortable" :rules="socialInsuranceRules"></v-text-field>
</v-col>
<v-col cols="6" v-if="selectedUser">
<v-text-field
v-model="selectedUser.telegram_link"
label="Telegram"
density="comfortable"
:rules="telegramRules"
></v-text-field>
<v-text-field v-model="selectedUser.telegram_link" label="Telegram" density="comfortable"
:rules="telegramRules"></v-text-field>

<v-text-field
v-model="selectedUser.birthday"
label="Birthday"
density="comfortable"
:rules="requiredStringRules"
@click="toggleDatePicker('birthdayPicker')"
readonly
>
<v-text-field v-model="selectedUser.birthday" label="Birthday" density="comfortable"
:rules="requiredStringRules" @click="toggleDatePicker('birthdayPicker')" readonly>
<template v-slot:append-inner>
<v-icon>mdi-calendar</v-icon>
</template>
</v-text-field>
<v-date-picker
v-model="birthdayDate"
v-if="birthdayPicker"
density="comfortable"
:rules="requiredStringRules"
>
<v-date-picker v-model="birthdayDate" v-if="birthdayPicker" density="comfortable" :rules="requiredStringRules">
</v-date-picker>

<v-text-field
v-model="selectedUser.joining_at"
label="Joining Date"
density="comfortable"
:rules="requiredStringRules"
@click="toggleDatePicker('joiningDatePicker')"
readonly
>
<v-text-field v-model="selectedUser.joining_at" label="Joining Date" density="comfortable"
:rules="requiredStringRules" @click="toggleDatePicker('joiningDatePicker')" readonly>
<template v-slot:append-inner>
<v-icon>mdi-calendar</v-icon>
</template>
</v-text-field>
<v-date-picker v-model="joiningDate" v-if="joiningDatePicker"> </v-date-picker>

<v-select
v-model="selectedUser.team"
:items="teams"
label="Team"
density="comfortable"
:rules="requiredStringRules"
></v-select>
<v-select
v-model="selectedUser.gender"
:items="genders"
label="Gender"
density="comfortable"
:rules="requiredStringRules"
></v-select>
<v-select
v-model="selectedUser.user_type"
:items="types"
label="User Type"
density="comfortable"
:rules="requiredStringRules"
></v-select>
<v-select
v-model="selectedUser.location"
:items="offices"
label="Office"
item-title="name"
item-value="id"
return-object
density="comfortable"
:rules="requiredRules"
></v-select>
<v-select v-model="selectedUser.team" :items="teams" label="Team" density="comfortable"
:rules="requiredStringRules"></v-select>
<v-select v-model="selectedUser.gender" :items="genders" label="Gender" density="comfortable"
:rules="requiredStringRules"></v-select>
<v-select v-model="selectedUser.user_type" :items="types" label="User Type" density="comfortable"
:rules="requiredStringRules"></v-select>
<v-select v-model="selectedUser.location" :items="offices" label="Office" item-title="name" item-value="id"
return-object density="comfortable" :rules="requiredRules"></v-select>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
label="Image"
variant="filled"
accept="image/*"
:show-size="1024"
prepend-icon="mdi-camera"
@input="chooseImage"
density="comfortable"
></v-file-input>
<v-img
v-if="image && image.length > 0 && imageUrl"
:src="imageUrl"
width="200"
height="200"
class="justify-center mb-5"
></v-img>
<v-file-input v-model="image" label="Image" variant="filled" accept="image/*" :show-size="1024"
prepend-icon="mdi-camera" @input="chooseImage" density="comfortable"></v-file-input>
<v-img v-if="image && image.length > 0 && imageUrl" :src="imageUrl" width="200" height="200"
class="justify-center mb-5"></v-img>
<v-row>
<v-col cols="3">
<v-btn
color="primary"
type="submit"
:disabled="!form?.isValid"
:loading="isLoading"
@click="execute"
>Update User</v-btn
>
<v-btn color="primary" type="submit" :disabled="!form?.isValid" :loading="isLoading" @click="execute">Update
User</v-btn>
</v-col>

<v-col cols="9" class="d-flex justify-end">
<v-btn
:disabled="!form?.isValid"
@click="activateUser"
:loading="isLoading"
v-if="selectedUser"
:color="`${selectedUser.is_active ? 'error' : 'success'}`"
>
<v-btn :disabled="!form?.isValid" @click="activateUser.execute()" :loading="isLoading" v-if="selectedUser"
:color="`${selectedUser.is_active ? 'error' : 'success'}`">
userIsActive = {{ userIsActive }}
{{ selectedUser.is_active ? 'Set as inactive user' : 'Set as active user' }}
</v-btn>
Expand Down Expand Up @@ -276,25 +162,22 @@ export default {
reader.readAsDataURL(input.files[0])
}
}
const activateUser = useAsyncState(
async () => {
isLoading.value = true
if (selectedUser.value.is_active) {
selectedUser.value.is_active = userIsActive.value = false
await $api.users.set_inactive.update({ user_id: selectedUser.value.id })
} else {
selectedUser.value.is_active = userIsActive.value = true
await $api.users.set_active.update({ user_id: selectedUser.value.id })
}
isLoading.value = false
const activateUser = async () => {
isLoading.value = true
if (selectedUser.value.is_active) {
selectedUser.value.is_active = userIsActive.value = false
} else {
selectedUser.value.is_active = userIsActive.value = true
}
await $api.myprofile.update(selectedUser.value.id, {
...selectedUser.value,
image: imageUrl.value || null,
location: selectedUser.value.location.id,
filename: image.value[0].name,
reporting_to: reporting_to.value ? [reporting_to.value.id] : [],
is_active: userIsActive.value
})
isLoading.value = false
}
},
null,
{ immediate: false }
)
const { execute, isLoading } = useAsyncState(
async () => {
Expand Down

0 comments on commit 30fe4a0

Please sign in to comment.