Fix vue3 refresh for employee tab of profile view

and misc. related cleanup

tailbone/templates/people/view_profile.mako

@@ -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"
+                                :disabled="startEmployeeSaveDisabled"
-                                   text="Save">
+                                icon-pack="fas"
-                      </once-button>
+                                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"
+                                :disabled="stopEmployeeSaveDisabled"
-                                   text="Save">
+                                icon-pack="fas"
-                      </once-button>
+                                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)"
+                                :disabled="editEmployeeHistorySaveDisabled"
-                                   text="Save">
+                                icon-pack="fas"
-                      </once-button>
+                                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)}'
+                    this.startEmployeeSaving = true
-                    let params = {
+                    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)}'
+                    this.stopEmployeeSaving = true
-                    let params = {
+                    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
                     })
                 },
 

tailbone/templates/themes/butterball/field-components.mako

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