From 54b75dbe1a7b9bfaf02f6e2d082e738289c2363f Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Wed, 29 May 2024 20:47:10 -0500 Subject: [PATCH] Fix basic problems with people profile view, per butterball plenty more tweaks needed yet i'm sure, but page looks reasonable now at least --- tailbone/templates/people/view_profile.mako | 428 ++++++++++++------ .../themes/butterball/buefy-components.mako | 9 +- 2 files changed, 288 insertions(+), 149 deletions(-) diff --git a/tailbone/templates/people/view_profile.mako b/tailbone/templates/people/view_profile.mako index 65c96fd6..0ca42cef 100644 --- a/tailbone/templates/people/view_profile.mako +++ b/tailbone/templates/people/view_profile.mako @@ -115,8 +115,13 @@ Edit Name - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editNameShowDialog" + % else: + :active.sync="editNameShowDialog" + % endif + >
@@ -125,49 +130,52 @@
- - - - - - - - % if use_preferred_first_name: + % if use_preferred_first_name: + + + + - % endif - - + + % else: + + + + % endif - + :maxlength="maxLengths.person_middle_name || null" + expanded /> - + :maxlength="maxLengths.person_last_name || null" + expanded />
- - + + {{ editNameSaving ? "Working, please wait..." : "Save" }} + Cancel
- + % endif @@ -219,8 +227,13 @@ icon-left="edit"> Edit Address - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editAddressShowDialog" + % else: + :active.sync="editAddressShowDialog" + % endif + >
@@ -231,20 +244,20 @@ - + :maxlength="maxLengths.address_street || null" + expanded /> - + :maxlength="maxLengths.address_street2 || null" + expanded /> - + :maxlength="maxLengths.address_zipcode || null" + expanded /> @@ -280,7 +293,7 @@
- + % endif @@ -312,8 +325,13 @@ Add Phone - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editPhoneShowDialog" + % else: + :active.sync="editPhoneShowDialog" + % endif + >
@@ -362,50 +380,64 @@
- + % endif - + <${b}-table :data="person.phones"> - {{ props.row.preferred ? "Yes" : "" }} - + - {{ props.row.type }} - + - {{ props.row.number }} - + % if request.has_perm('people_profile.edit_person'): - - - + + % if request.use_oruga: + + % else: + + % endif Edit - - + + % if request.use_oruga: + + % else: + + % endif Delete - - + % if request.use_oruga: + + % else: + + % endif Set Preferred - + % endif - + @@ -429,8 +461,13 @@ Add Email - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editEmailShowDialog" + % else: + :active.sync="editEmailShowDialog" + % endif + >
@@ -488,56 +525,70 @@
- + % endif - + <${b}-table :data="person.emails"> - {{ props.row.preferred ? "Yes" : "" }} - + - {{ props.row.type }} - + - {{ props.row.address }} - + - Invalid - + % if request.has_perm('people_profile.edit_person'): - - - + + % if request.use_oruga: + + % else: + + % endif Edit - - + + % if request.use_oruga: + + % else: + + % endif Delete - - + % if request.use_oruga: + + % else: + + % endif Set Preferred - + % endif - + @@ -566,16 +617,22 @@ % endif - + % if request.use_oruga: + + % else: + + % endif <%def name="render_personal_tab()"> - + <${b}-tab-item label="Personal" + value="personal" + % if not request.use_oruga: + icon-pack="fas" + % endif + :icon="tabchecks.personal ? 'check' : null"> - + <%def name="render_member_tab_template()"> @@ -692,13 +749,17 @@ % endif - + % if request.use_oruga: + + % else: + + % endif <%def name="render_member_tab()"> - @@ -707,7 +768,7 @@ @profile-changed="profileChanged" :phone-type-options="phoneTypeOptions"> - + <%def name="render_customer_tab_template()"> @@ -814,13 +875,17 @@

{{ person.display_name }} does not have a customer account.

- + % if request.use_oruga: + + % else: + + % endif <%def name="render_customer_tab()"> - @@ -828,7 +893,7 @@ :person="person" @profile-changed="profileChanged"> - + <%def name="render_shopper_tab_template()"> @@ -890,13 +955,17 @@

{{ person.display_name }} is not a shopper.

- + % if request.use_oruga: + + % else: + + % endif <%def name="render_shopper_tab()"> - @@ -904,7 +973,7 @@ :person="person" @profile-changed="profileChanged"> - + <%def name="render_employee_tab_template()"> @@ -930,8 +999,13 @@ @click="editEmployeeIdInit()"> Edit ID - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editEmployeeIdShowDialog" + % else: + :active.sync="editEmployeeIdShowDialog" + % endif + >
@@ -957,7 +1031,7 @@
- + % endif @@ -980,32 +1054,32 @@

Employee History


- + <${b}-table :data="employeeHistory"> - {{ props.row.start_date }} - + - {{ props.row.end_date }} - + % if request.has_perm('people_profile.edit_employee_history'): - Edit - + % endif - + @@ -1032,8 +1106,13 @@ ${person} is no longer an Employee - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="startEmployeeShowDialog" + % else: + :active.sync="startEmployeeShowDialog" + % endif + >
@@ -1060,10 +1139,15 @@
- + - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="stopEmployeeShowDialog" + % else: + :active.sync="stopEmployeeShowDialog" + % endif + >
@@ -1092,12 +1176,17 @@
- + % endif % if request.has_perm('people_profile.edit_employee_history'): - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editEmployeeHistoryShowDialog" + % else: + :active.sync="editEmployeeHistoryShowDialog" + % endif + >
@@ -1126,7 +1215,7 @@
- + % endif % if request.has_perm('employees.view'): @@ -1140,13 +1229,17 @@ - + % if request.use_oruga: + + % else: + + % endif <%def name="render_employee_tab()"> - @@ -1154,7 +1247,7 @@ :person="person" @profile-changed="profileChanged"> - + <%def name="render_notes_tab_template()"> @@ -1171,40 +1264,40 @@ % endif - + <${b}-table :data="notes"> - {{ props.row.note_type_display }} - + - {{ props.row.subject }} - + - {{ props.row.text }} - + - - + - {{ props.row.created_by_display }} - + % if request.has_any_perm('people_profile.edit_note', 'people_profile.delete_note'): - % if request.has_perm('people_profile.edit_note'): @@ -1219,14 +1312,19 @@ Delete % endif - + % endif - + % if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'): - + <${b}-modal has-modal-card + % if request.use_oruga: + v-model:active="editNoteShowDialog" + % else: + :active.sync="editNoteShowDialog" + % endif + >
@@ -1285,16 +1383,20 @@
- + % endif - + % if request.use_oruga: + + % else: + + % endif <%def name="render_notes_tab()"> - @@ -1302,7 +1404,7 @@ :person="person" @profile-changed="profileChanged"> - + <%def name="render_user_tab_template()"> @@ -1355,13 +1457,17 @@

{{ person.display_name }} does not have a user account.

- + % if request.use_oruga: + + % else: + + % endif <%def name="render_user_tab()"> - @@ -1369,7 +1475,7 @@ :person="person" @profile-changed="profileChanged"> - + <%def name="render_profile_tabs()"> @@ -1392,14 +1498,20 @@ ${self.render_profile_info_extra_buttons()} - + <${b}-tabs v-model="activeTab" + % if request.has_perm('people_profile.view_versions'): + v-show="!viewingHistory" + % endif + % if request.use_oruga: + type="boxed" + @change="activeTabChanged" + % else: + type="is-boxed" + @input="activeTabChanged" + % endif + > ${self.render_profile_tabs()} - + % if request.has_perm('people_profile.view_versions'): @@ -1408,7 +1520,13 @@ vshow='viewingHistory', loading='gettingRevisions')|n} - + <${b}-modal + % if request.use_oruga: + v-model:active="showingRevisionDialog" + % else: + :active.sync="showingRevisionDialog" + % endif + >
@@ -1487,7 +1605,7 @@
- + % endif @@ -1522,6 +1640,7 @@ % endif editNameMiddle: null, editNameLast: null, + editNameSaving: false, editAddressShowDialog: false, editAddressStreet1: null, @@ -1562,6 +1681,9 @@ % if request.has_perm('people_profile.edit_person'): editNameSaveDisabled: function() { + if (this.editNameSaving) { + return true + } if (!this.editNameFirst || !this.editNameLast) { return true } @@ -1622,6 +1744,7 @@ }, editNameSave() { + this.editNameSaving = true let url = '${url('people.profile_edit_name', uuid=person.uuid)}' let params = { first_name: this.editNameFirst, @@ -1636,6 +1759,9 @@ this.$emit('profile-changed', response.data) this.editNameShowDialog = false this.refreshTab() + this.editNameSaving = false + }, response => { + this.editNameSaving = false }) }, @@ -1827,6 +1953,7 @@ PersonalTab.data = function() { return PersonalTabData } Vue.component('personal-tab', PersonalTab) + <% request.register_component('personal-tab', 'PersonalTab') %> @@ -1872,6 +1999,7 @@ MemberTab.data = function() { return MemberTabData } Vue.component('member-tab', MemberTab) + <% request.register_component('member-tab', 'MemberTab') %> @@ -1908,6 +2036,7 @@ CustomerTab.data = function() { return CustomerTabData } Vue.component('customer-tab', CustomerTab) + <% request.register_component('customer-tab', 'CustomerTab') %> @@ -1944,6 +2073,7 @@ ShopperTab.data = function() { return ShopperTabData } Vue.component('shopper-tab', ShopperTab) + <% request.register_component('shopper-tab', 'ShopperTab') %> @@ -2100,6 +2230,7 @@ EmployeeTab.data = function() { return EmployeeTabData } Vue.component('employee-tab', EmployeeTab) + <% request.register_component('employee-tab', 'EmployeeTab') %> @@ -2220,6 +2351,7 @@ NotesTab.data = function() { return NotesTabData } Vue.component('notes-tab', NotesTab) + <% request.register_component('notes-tab', 'NotesTab') %> @@ -2256,6 +2388,7 @@ UserTab.data = function() { return UserTabData } Vue.component('user-tab', UserTab) + <% request.register_component('user-tab', 'UserTab') %> @@ -2264,7 +2397,7 @@ diff --git a/tailbone/templates/themes/butterball/buefy-components.mako b/tailbone/templates/themes/butterball/buefy-components.mako index a7b42267..b11e34ea 100644 --- a/tailbone/templates/themes/butterball/buefy-components.mako +++ b/tailbone/templates/themes/butterball/buefy-components.mako @@ -332,7 +332,8 @@ v-model="orugaValue" @update:modelValue="val => $emit('update:modelValue', val)" :autocomplete="autocomplete" - ref="input"> + ref="input" + :expanded="expanded"> @@ -344,6 +345,7 @@ type: String, autocomplete: String, disabled: Boolean, + expanded: Boolean, }, data() { return { @@ -374,13 +376,16 @@ <%def name="make_b_loading_component()"> <% request.register_component('b-loading', 'BLoading') %>