rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix vue3 refresh for employee tab of profile view

Browse source 
and misc. related cleanup
This commit is contained in:
Lance Edgar 2024-06-03 17:37:11 -05:00
parent 9243edf7af
commit 0303014acb
2 changed files with 175 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
tailbone/templates/people/view_profile.mako
View file

@ -1155,6 +1155,7 @@
<div v-if="employee.uuid">
<div :key="refreshEmployeeCard">
<b-field horizontal label="Employee ID">
<div class="level">
<div class="level-left">
@ -1219,6 +1220,7 @@
<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"
<b-button type="is-primary"
@click="startEmployeeSave()"
:disabled="!startEmployeeStartDate"
text="Save">
</once-button>
: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"
<b-button type="is-primary"
@click="stopEmployeeSave()"
:disabled="!stopEmployeeEndDate"
text="Save">
</once-button>
: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"
<b-button type="is-primary"
@click="editEmployeeHistorySave()"
:disabled="!editEmployeeHistoryStartDate || (editEmployeeHistoryEndDateRequired && !editEmployeeHistoryEndDate)"
text="Save">
</once-button>
: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,
% 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 = {
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,
% 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
})
},

3
tailbone/templates/themes/butterball/field-components.mako
View file

@ -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()