Fix vue3 refresh for employee tab of profile view
and misc. related cleanup
This commit is contained in:
Lance Edgar
parent
9243edf7af
commit
0303014acb
|
|
@ -1155,70 +1155,72 @@
|
|||
|
||||
<div v-if="employee.uuid">
|
||||
|
||||
<b-field horizontal label="Employee ID">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<span>{{ employee.id }}</span>
|
||||
<div :key="refreshEmployeeCard">
|
||||
<b-field horizontal label="Employee ID">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<span>{{ employee.id }}</span>
|
||||
</div>
|
||||
% if request.has_perm('employees.edit'):
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="edit"
|
||||
@click="editEmployeeIdInit()">
|
||||
Edit ID
|
||||
</b-button>
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active="editEmployeeIdShowDialog"
|
||||
% else:
|
||||
:active.sync="editEmployeeIdShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Employee ID</p>
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<b-field label="Employee ID">
|
||||
<b-input v-model="editEmployeeIdValue"></b-input>
|
||||
</b-field>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="editEmployeeIdShowDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="save"
|
||||
:disabled="editEmployeeIdSaving"
|
||||
@click="editEmployeeIdSave()">
|
||||
{{ editEmployeeIdSaving ? "Working, please wait..." : "Save" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</${b}-modal>
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
% if request.has_perm('employees.edit'):
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="edit"
|
||||
@click="editEmployeeIdInit()">
|
||||
Edit ID
|
||||
</b-button>
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active="editEmployeeIdShowDialog"
|
||||
% else:
|
||||
:active.sync="editEmployeeIdShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Employee ID</p>
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<b-field label="Employee ID">
|
||||
<b-input v-model="editEmployeeIdValue"></b-input>
|
||||
</b-field>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="editEmployeeIdShowDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="save"
|
||||
:disabled="editEmployeeIdSaving"
|
||||
@click="editEmployeeIdSave()">
|
||||
{{ editEmployeeIdSaving ? "Working, please wait..." : "Save" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</${b}-modal>
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
</b-field>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Employee Status">
|
||||
<span>{{ employee.status_display }}</span>
|
||||
</b-field>
|
||||
<b-field horizontal label="Employee Status">
|
||||
<span>{{ employee.status_display }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Start Date">
|
||||
<span>{{ employee.start_date }}</span>
|
||||
</b-field>
|
||||
<b-field horizontal label="Start Date">
|
||||
<span>{{ employee.start_date }}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="End Date">
|
||||
<span>{{ employee.end_date }}</span>
|
||||
</b-field>
|
||||
<b-field horizontal label="End Date">
|
||||
<span>{{ employee.end_date }}</span>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<p><strong>Employee History</strong></p>
|
||||
|
|
@ -1301,7 +1303,8 @@
|
|||
<b-input v-model="startEmployeeID"></b-input>
|
||||
</b-field>
|
||||
<b-field label="Start Date">
|
||||
<tailbone-datepicker v-model="startEmployeeStartDate"></tailbone-datepicker>
|
||||
<tailbone-datepicker v-model="startEmployeeStartDate"
|
||||
ref="startEmployeeStartDate" />
|
||||
</b-field>
|
||||
</section>
|
||||
|
||||
|
|
@ -1309,11 +1312,13 @@
|
|||
<b-button @click="startEmployeeShowDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="startEmployeeSave()"
|
||||
:disabled="!startEmployeeStartDate"
|
||||
text="Save">
|
||||
</once-button>
|
||||
<b-button type="is-primary"
|
||||
@click="startEmployeeSave()"
|
||||
:disabled="startEmployeeSaveDisabled"
|
||||
icon-pack="fas"
|
||||
icon-left="save">
|
||||
{{ startEmployeeSaving ? "Working, please wait..." : "Save" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</${b}-modal>
|
||||
|
|
@ -1346,11 +1351,13 @@
|
|||
<b-button @click="stopEmployeeShowDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="stopEmployeeSave()"
|
||||
:disabled="!stopEmployeeEndDate"
|
||||
text="Save">
|
||||
</once-button>
|
||||
<b-button type="is-primary"
|
||||
@click="stopEmployeeSave()"
|
||||
:disabled="stopEmployeeSaveDisabled"
|
||||
icon-pack="fas"
|
||||
icon-left="save">
|
||||
{{ stopEmployeeSaving ? "Working, please wait..." : "Save" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</${b}-modal>
|
||||
|
|
@ -1385,11 +1392,13 @@
|
|||
<b-button @click="editEmployeeHistoryShowDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="editEmployeeHistorySave()"
|
||||
:disabled="!editEmployeeHistoryStartDate || (editEmployeeHistoryEndDateRequired && !editEmployeeHistoryEndDate)"
|
||||
text="Save">
|
||||
</once-button>
|
||||
<b-button type="is-primary"
|
||||
@click="editEmployeeHistorySave()"
|
||||
:disabled="editEmployeeHistorySaveDisabled"
|
||||
icon-pack="fas"
|
||||
icon-left="save">
|
||||
{{ editEmployeeHistorySaving ? "Working, please wait..." : "Save" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</${b}-modal>
|
||||
|
|
@ -2351,6 +2360,9 @@
|
|||
employee: {},
|
||||
employeeHistory: [],
|
||||
|
||||
// nb. hack to force refresh for vue3
|
||||
refreshEmployeeCard: 1,
|
||||
|
||||
% if request.has_perm('employees.edit'):
|
||||
editEmployeeIdShowDialog: false,
|
||||
editEmployeeIdValue: null,
|
||||
|
|
@ -2361,10 +2373,12 @@
|
|||
startEmployeeShowDialog: false,
|
||||
startEmployeeID: null,
|
||||
startEmployeeStartDate: null,
|
||||
startEmployeeSaving: false,
|
||||
|
||||
stopEmployeeShowDialog: false,
|
||||
stopEmployeeEndDate: null,
|
||||
stopEmployeeRevokeAccess: false,
|
||||
stopEmployeeSaving: false,
|
||||
% endif
|
||||
|
||||
% if request.has_perm('people_profile.edit_employee_history'):
|
||||
|
|
@ -2373,6 +2387,7 @@
|
|||
editEmployeeHistoryStartDate: null,
|
||||
editEmployeeHistoryEndDate: null,
|
||||
editEmployeeHistoryEndDateRequired: false,
|
||||
editEmployeeHistorySaving: false,
|
||||
% endif
|
||||
}
|
||||
|
||||
|
|
@ -2382,11 +2397,56 @@
|
|||
props: {
|
||||
person: Object,
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
|
||||
% if request.has_perm('people_profile.toggle_employee'):
|
||||
|
||||
startEmployeeSaveDisabled() {
|
||||
if (this.startEmployeeSaving) {
|
||||
return true
|
||||
}
|
||||
if (!this.startEmployeeStartDate) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
stopEmployeeSaveDisabled() {
|
||||
if (this.stopEmployeeSaving) {
|
||||
return true
|
||||
}
|
||||
if (!this.stopEmployeeEndDate) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
% endif
|
||||
|
||||
% if request.has_perm('people_profile.edit_employee_history'):
|
||||
|
||||
editEmployeeHistorySaveDisabled() {
|
||||
if (this.editEmployeeHistorySaving) {
|
||||
return true
|
||||
}
|
||||
if (!this.editEmployeeHistoryStartDate) {
|
||||
return true
|
||||
}
|
||||
if (this.editEmployeeHistoryEndDateRequired && !this.editEmployeeHistoryEndDate) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
% endif
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
refreshTabSuccess(response) {
|
||||
this.employee = response.data.employee
|
||||
// nb. hack to force refresh for vue3
|
||||
this.refreshEmployeeCard += 1
|
||||
this.employeeHistory = response.data.employee_history
|
||||
},
|
||||
|
||||
|
|
@ -2401,7 +2461,7 @@
|
|||
this.editEmployeeIdSaving = true
|
||||
let url = '${url('people.profile_update_employee_id', uuid=instance.uuid)}'
|
||||
let params = {
|
||||
'employee_id': this.editEmployeeIdValue,
|
||||
'employee_id': this.editEmployeeIdValue || null,
|
||||
}
|
||||
this.simplePOST(url, params, response => {
|
||||
this.$emit('profile-changed', response.data)
|
||||
|
|
@ -2424,34 +2484,52 @@
|
|||
},
|
||||
|
||||
startEmployeeSave() {
|
||||
let url = '${url('people.profile_start_employee', uuid=person.uuid)}'
|
||||
let params = {
|
||||
this.startEmployeeSaving = true
|
||||
const url = '${url('people.profile_start_employee', uuid=person.uuid)}'
|
||||
const params = {
|
||||
id: this.startEmployeeID,
|
||||
start_date: this.startEmployeeStartDate,
|
||||
% if request.use_oruga:
|
||||
start_date: this.$refs.startEmployeeStartDate.formatDate(this.startEmployeeStartDate),
|
||||
% else:
|
||||
start_date: this.startEmployeeStartDate,
|
||||
% endif
|
||||
}
|
||||
|
||||
this.simplePOST(url, params, response => {
|
||||
this.$emit('profile-changed', response.data)
|
||||
this.startEmployeeShowDialog = false
|
||||
this.refreshTab()
|
||||
this.startEmployeeSaving = false
|
||||
}, response => {
|
||||
this.startEmployeeSaving = false
|
||||
})
|
||||
},
|
||||
|
||||
stopEmployeeInit() {
|
||||
this.stopEmployeeEndDate = null
|
||||
this.stopEmployeeRevokeAccess = false
|
||||
this.stopEmployeeShowDialog = true
|
||||
},
|
||||
|
||||
stopEmployeeSave() {
|
||||
let url = '${url('people.profile_end_employee', uuid=person.uuid)}'
|
||||
let params = {
|
||||
end_date: this.stopEmployeeEndDate,
|
||||
this.stopEmployeeSaving = true
|
||||
const url = '${url('people.profile_end_employee', uuid=person.uuid)}'
|
||||
const params = {
|
||||
% if request.use_oruga:
|
||||
end_date: this.$refs.startEmployeeStartDate.formatDate(this.stopEmployeeEndDate),
|
||||
% else:
|
||||
end_date: this.stopEmployeeEndDate,
|
||||
% endif
|
||||
revoke_access: this.stopEmployeeRevokeAccess,
|
||||
}
|
||||
|
||||
this.simplePOST(url, params, response => {
|
||||
this.$emit('profile-changed', response.data)
|
||||
this.stopEmployeeShowDialog = false
|
||||
this.stopEmployeeSaving = false
|
||||
this.refreshTab()
|
||||
}, response => {
|
||||
this.stopEmployeeSaving = false
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -2468,17 +2546,26 @@
|
|||
},
|
||||
|
||||
editEmployeeHistorySave() {
|
||||
this.editEmployeeHistorySaving = true
|
||||
let url = '${url('people.profile_edit_employee_history', uuid=person.uuid)}'
|
||||
let params = {
|
||||
uuid: this.editEmployeeHistoryUUID,
|
||||
start_date: this.editEmployeeHistoryStartDate,
|
||||
end_date: this.editEmployeeHistoryEndDate,
|
||||
% if request.use_oruga:
|
||||
start_date: this.$refs.startEmployeeStartDate.formatDate(this.editEmployeeHistoryStartDate),
|
||||
end_date: this.$refs.startEmployeeStartDate.formatDate(this.editEmployeeHistoryEndDate),
|
||||
% else:
|
||||
start_date: this.editEmployeeHistoryStartDate,
|
||||
end_date: this.editEmployeeHistoryEndDate,
|
||||
% endif
|
||||
}
|
||||
|
||||
this.simplePOST(url, params, response => {
|
||||
this.$emit('profile-changed', response.data)
|
||||
this.editEmployeeHistoryShowDialog = false
|
||||
this.refreshTab()
|
||||
this.editEmployeeHistorySaving = false
|
||||
}, response => {
|
||||
this.editEmployeeHistorySaving = false
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -434,6 +434,9 @@
|
|||
if (date === null) {
|
||||
return null
|
||||
}
|
||||
if (typeof(date) == 'string') {
|
||||
return date
|
||||
}
|
||||
// just need to convert to simple ISO date format here, seems
|
||||
// like there should be a more obvious way to do that?
|
||||
var year = date.getFullYear()
|
||||
|
|
|
|||
Loading…
Reference in a new issue