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

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

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