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

Fix basic problems with people profile view, per butterball

Browse source 
plenty more tweaks needed yet i'm sure, but page looks reasonable now
at least
This commit is contained in:
Lance Edgar 2024-05-29 20:47:10 -05:00
parent b98d651144
commit 54b75dbe1a
2 changed files with 288 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -115,8 +115,13 @@
Edit Name Edit Name
</b-button> </b-button>
</div> </div>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editNameShowDialog"> % if request.use_oruga:
v-model:active="editNameShowDialog"
% else:
:active.sync="editNameShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -125,49 +130,52 @@
<section class="modal-card-body"> <section class="modal-card-body">
<b-field grouped>
<b-field label="First Name" expanded>
<b-input v-model.trim="editNameFirst"
:maxlength="maxLengths.person_first_name || null">
</b-input>
</b-field>
% if use_preferred_first_name: % if use_preferred_first_name:
<b-field grouped>
<b-field label="First Name">
<b-input v-model.trim="editNameFirst"
:maxlength="maxLengths.person_first_name || null" />
</b-field>
<b-field label="Preferred First Name" expanded> <b-field label="Preferred First Name" expanded>
<b-input v-model.trim="editNameFirstPreferred" <b-input v-model.trim="editNameFirstPreferred"
:maxlength="maxLengths.person_preferred_first_name || null"> :maxlength="maxLengths.person_preferred_first_name || null">
</b-input> </b-input>
</b-field> </b-field>
% endif
</b-field> </b-field>
% else:
<b-field label="First Name">
<b-input v-model.trim="editNameFirst"
:maxlength="maxLengths.person_first_name || null"
expanded />
</b-field>
% endif
<b-field label="Middle Name"> <b-field label="Middle Name">
<b-input v-model.trim="editNameMiddle" <b-input v-model.trim="editNameMiddle"
:maxlength="maxLengths.person_middle_name || null"> :maxlength="maxLengths.person_middle_name || null"
</b-input> expanded />
</b-field> </b-field>
<b-field label="Last Name"> <b-field label="Last Name">
<b-input v-model.trim="editNameLast" <b-input v-model.trim="editNameLast"
:maxlength="maxLengths.person_last_name || null"> :maxlength="maxLengths.person_last_name || null"
</b-input> expanded />
</b-field> </b-field>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<once-button type="is-primary" <b-button type="is-primary"
@click="editNameSave()" @click="editNameSave()"
:disabled="editNameSaveDisabled" :disabled="editNameSaveDisabled"
icon-left="save" icon-pack="fas"
text="Save"> icon-left="save">
</once-button> {{ editNameSaving ? "Working, please wait..." : "Save" }}
</b-button>
<b-button @click="editNameShowDialog = false"> <b-button @click="editNameShowDialog = false">
Cancel Cancel
</b-button> </b-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
</div> </div>
</div> </div>
@ -219,8 +227,13 @@
icon-left="edit"> icon-left="edit">
Edit Address Edit Address
</b-button> </b-button>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editAddressShowDialog"> % if request.use_oruga:
v-model:active="editAddressShowDialog"
% else:
:active.sync="editAddressShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -231,20 +244,20 @@
<b-field label="Street 1" expanded> <b-field label="Street 1" expanded>
<b-input v-model.trim="editAddressStreet1" <b-input v-model.trim="editAddressStreet1"
:maxlength="maxLengths.address_street || null"> :maxlength="maxLengths.address_street || null"
</b-input> expanded />
</b-field> </b-field>
<b-field label="Street 2" expanded> <b-field label="Street 2" expanded>
<b-input v-model.trim="editAddressStreet2" <b-input v-model.trim="editAddressStreet2"
:maxlength="maxLengths.address_street2 || null"> :maxlength="maxLengths.address_street2 || null"
</b-input> expanded />
</b-field> </b-field>
<b-field label="Zipcode"> <b-field label="Zipcode">
<b-input v-model.trim="editAddressZipcode" <b-input v-model.trim="editAddressZipcode"
:maxlength="maxLengths.address_zipcode || null"> :maxlength="maxLengths.address_zipcode || null"
</b-input> expanded />
</b-field> </b-field>
<b-field grouped> <b-field grouped>
@ -280,7 +293,7 @@
</b-button> </b-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
</div> </div>
</div> </div>
@ -312,8 +325,13 @@
Add Phone Add Phone
</b-button> </b-button>
</div> </div>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editPhoneShowDialog"> % if request.use_oruga:
v-model:active="editPhoneShowDialog"
% else:
:active.sync="editPhoneShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -362,50 +380,64 @@
</b-button> </b-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
<b-table :data="person.phones"> <${b}-table :data="person.phones">
<b-table-column field="preference" <${b}-table-column field="preference"
label="Preferred" label="Preferred"
v-slot="props"> v-slot="props">
{{ props.row.preferred ? "Yes" : "" }} {{ props.row.preferred ? "Yes" : "" }}
</b-table-column> </${b}-table-column>
<b-table-column field="type" <${b}-table-column field="type"
label="Type" label="Type"
v-slot="props"> v-slot="props">
{{ props.row.type }} {{ props.row.type }}
</b-table-column> </${b}-table-column>
<b-table-column field="number" <${b}-table-column field="number"
label="Number" label="Number"
v-slot="props"> v-slot="props">
{{ props.row.number }} {{ props.row.number }}
</b-table-column> </${b}-table-column>
% if request.has_perm('people_profile.edit_person'): % if request.has_perm('people_profile.edit_person'):
<b-table-column label="Actions" <${b}-table-column label="Actions"
v-slot="props"> v-slot="props">
<a href="#" @click.prevent="editPhoneInit(props.row)"> <a class="grid-action"
href="#" @click.prevent="editPhoneInit(props.row)">
% if request.use_oruga:
<o-icon icon="edit" />
% else:
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
% endif
Edit Edit
</a> </a>
<a href="#" @click.prevent="deletePhoneInit(props.row)" <a class="grid-action has-text-danger"
class="has-text-danger"> href="#" @click.prevent="deletePhoneInit(props.row)">
% if request.use_oruga:
<o-icon icon="trash" />
% else:
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
% endif
Delete Delete
</a> </a>
<a href="#" @click.prevent="preferPhoneInit(props.row)" <a class="grid-action"
href="#" @click.prevent="preferPhoneInit(props.row)"
v-if="!props.row.preferred"> v-if="!props.row.preferred">
% if request.use_oruga:
<o-icon icon="star" />
% else:
<i class="fas fa-star"></i> <i class="fas fa-star"></i>
% endif
Set Preferred Set Preferred
</a> </a>
</b-table-column> </${b}-table-column>
% endif % endif
</b-table> </${b}-table>
</div> </div>
</div> </div>
@ -429,8 +461,13 @@
Add Email Add Email
</b-button> </b-button>
</div> </div>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editEmailShowDialog"> % if request.use_oruga:
v-model:active="editEmailShowDialog"
% else:
:active.sync="editEmailShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -488,56 +525,70 @@
</b-button> </b-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
<b-table :data="person.emails"> <${b}-table :data="person.emails">
<b-table-column field="preference" <${b}-table-column field="preference"
label="Preferred" label="Preferred"
v-slot="props"> v-slot="props">
{{ props.row.preferred ? "Yes" : "" }} {{ props.row.preferred ? "Yes" : "" }}
</b-table-column> </${b}-table-column>
<b-table-column field="type" <${b}-table-column field="type"
label="Type" label="Type"
v-slot="props"> v-slot="props">
{{ props.row.type }} {{ props.row.type }}
</b-table-column> </${b}-table-column>
<b-table-column field="address" <${b}-table-column field="address"
label="Address" label="Address"
v-slot="props"> v-slot="props">
{{ props.row.address }} {{ props.row.address }}
</b-table-column> </${b}-table-column>
<b-table-column field="invalid" <${b}-table-column field="invalid"
label="Invalid?" label="Invalid?"
v-slot="props"> v-slot="props">
<span v-if="props.row.invalid" class="has-text-danger has-text-weight-bold">Invalid</span> <span v-if="props.row.invalid" class="has-text-danger has-text-weight-bold">Invalid</span>
</b-table-column> </${b}-table-column>
% if request.has_perm('people_profile.edit_person'): % if request.has_perm('people_profile.edit_person'):
<b-table-column label="Actions" <${b}-table-column label="Actions"
v-slot="props"> v-slot="props">
<a href="#" @click.prevent="editEmailInit(props.row)"> <a class="grid-action"
href="#" @click.prevent="editEmailInit(props.row)">
% if request.use_oruga:
<o-icon icon="edit" />
% else:
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
% endif
Edit Edit
</a> </a>
<a href="#" @click.prevent="deleteEmailInit(props.row)" <a class="grid-action has-text-danger"
class="has-text-danger"> href="#" @click.prevent="deleteEmailInit(props.row)">
% if request.use_oruga:
<o-icon icon="trash" />
% else:
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
% endif
Delete Delete
</a> </a>
<a href="#" @click.prevent="preferEmailInit(props.row)" <a class="grid-action"
href="#" @click.prevent="preferEmailInit(props.row)"
v-if="!props.row.preferred"> v-if="!props.row.preferred">
% if request.use_oruga:
<o-icon icon="star" />
% else:
<i class="fas fa-star"></i> <i class="fas fa-star"></i>
% endif
Set Preferred Set Preferred
</a> </a>
</b-table-column> </${b}-table-column>
% endif % endif
</b-table> </${b}-table>
</div> </div>
</div> </div>
@ -566,15 +617,21 @@
</b-button> </b-button>
% endif % endif
</div> </div>
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_personal_tab()"> <%def name="render_personal_tab()">
<b-tab-item label="Personal" <${b}-tab-item label="Personal"
value="personal" value="personal"
% if not request.use_oruga:
icon-pack="fas" icon-pack="fas"
% endif
:icon="tabchecks.personal ? 'check' : null"> :icon="tabchecks.personal ? 'check' : null">
<personal-tab ref="tab_personal" <personal-tab ref="tab_personal"
:person="person" :person="person"
@ -583,7 +640,7 @@
:email-type-options="emailTypeOptions" :email-type-options="emailTypeOptions"
:max-lengths="maxLengths"> :max-lengths="maxLengths">
</personal-tab> </personal-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_member_tab_template()"> <%def name="render_member_tab_template()">
@ -692,13 +749,17 @@
</div> </div>
% endif % endif
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_member_tab()"> <%def name="render_member_tab()">
<b-tab-item label="Member" <${b}-tab-item label="Member"
value="member" value="member"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.member ? 'check' : null"> :icon="tabchecks.member ? 'check' : null">
@ -707,7 +768,7 @@
@profile-changed="profileChanged" @profile-changed="profileChanged"
:phone-type-options="phoneTypeOptions"> :phone-type-options="phoneTypeOptions">
</member-tab> </member-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_customer_tab_template()"> <%def name="render_customer_tab_template()">
@ -814,13 +875,17 @@
<div v-if="!customers.length"> <div v-if="!customers.length">
<p>{{ person.display_name }} does not have a customer account.</p> <p>{{ person.display_name }} does not have a customer account.</p>
</div> </div>
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_customer_tab()"> <%def name="render_customer_tab()">
<b-tab-item label="Customer" <${b}-tab-item label="Customer"
value="customer" value="customer"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.customer ? 'check' : null"> :icon="tabchecks.customer ? 'check' : null">
@ -828,7 +893,7 @@
:person="person" :person="person"
@profile-changed="profileChanged"> @profile-changed="profileChanged">
</customer-tab> </customer-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_shopper_tab_template()"> <%def name="render_shopper_tab_template()">
@ -890,13 +955,17 @@
<div v-if="!shoppers.length"> <div v-if="!shoppers.length">
<p>{{ person.display_name }} is not a shopper.</p> <p>{{ person.display_name }} is not a shopper.</p>
</div> </div>
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_shopper_tab()"> <%def name="render_shopper_tab()">
<b-tab-item label="Shopper" <${b}-tab-item label="Shopper"
value="shopper" value="shopper"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.shopper ? 'check' : null"> :icon="tabchecks.shopper ? 'check' : null">
@ -904,7 +973,7 @@
:person="person" :person="person"
@profile-changed="profileChanged"> @profile-changed="profileChanged">
</shopper-tab> </shopper-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_employee_tab_template()"> <%def name="render_employee_tab_template()">
@ -930,8 +999,13 @@
@click="editEmployeeIdInit()"> @click="editEmployeeIdInit()">
Edit ID Edit ID
</b-button> </b-button>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editEmployeeIdShowDialog"> % if request.use_oruga:
v-model:active="editEmployeeIdShowDialog"
% else:
:active.sync="editEmployeeIdShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -957,7 +1031,7 @@
</b-button> </b-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
</div> </div>
% endif % endif
</div> </div>
@ -980,32 +1054,32 @@
<p><strong>Employee History</strong></p> <p><strong>Employee History</strong></p>
<br /> <br />
<b-table :data="employeeHistory"> <${b}-table :data="employeeHistory">
<b-table-column field="start_date" <${b}-table-column field="start_date"
label="Start Date" label="Start Date"
v-slot="props"> v-slot="props">
{{ props.row.start_date }} {{ props.row.start_date }}
</b-table-column> </${b}-table-column>
<b-table-column field="end_date" <${b}-table-column field="end_date"
label="End Date" label="End Date"
v-slot="props"> v-slot="props">
{{ props.row.end_date }} {{ props.row.end_date }}
</b-table-column> </${b}-table-column>
% if request.has_perm('people_profile.edit_employee_history'): % if request.has_perm('people_profile.edit_employee_history'):
<b-table-column field="actions" <${b}-table-column field="actions"
label="Actions" label="Actions"
v-slot="props"> v-slot="props">
<a href="#" @click.prevent="editEmployeeHistoryInit(props.row)"> <a href="#" @click.prevent="editEmployeeHistoryInit(props.row)">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
Edit Edit
</a> </a>
</b-table-column> </${b}-table-column>
% endif % endif
</b-table> </${b}-table>
</div> </div>
@ -1032,8 +1106,13 @@
${person} is no longer an Employee ${person} is no longer an Employee
</b-button> </b-button>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="startEmployeeShowDialog"> % if request.use_oruga:
v-model:active="startEmployeeShowDialog"
% else:
:active.sync="startEmployeeShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -1060,10 +1139,15 @@
</once-button> </once-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="stopEmployeeShowDialog"> % if request.use_oruga:
v-model:active="stopEmployeeShowDialog"
% else:
:active.sync="stopEmployeeShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -1092,12 +1176,17 @@
</once-button> </once-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
% if request.has_perm('people_profile.edit_employee_history'): % if request.has_perm('people_profile.edit_employee_history'):
<b-modal has-modal-card <${b}-modal has-modal-card
:active.sync="editEmployeeHistoryShowDialog"> % if request.use_oruga:
v-model:active="editEmployeeHistoryShowDialog"
% else:
:active.sync="editEmployeeHistoryShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
@ -1126,7 +1215,7 @@
</once-button> </once-button>
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
% if request.has_perm('employees.view'): % if request.has_perm('employees.view'):
@ -1140,13 +1229,17 @@
</div> </div>
</div> </div>
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_employee_tab()"> <%def name="render_employee_tab()">
<b-tab-item label="Employee" <${b}-tab-item label="Employee"
value="employee" value="employee"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.employee ? 'check' : null"> :icon="tabchecks.employee ? 'check' : null">
@ -1154,7 +1247,7 @@
:person="person" :person="person"
@profile-changed="profileChanged"> @profile-changed="profileChanged">
</employee-tab> </employee-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_notes_tab_template()"> <%def name="render_notes_tab_template()">
@ -1171,40 +1264,40 @@
</b-button> </b-button>
% endif % endif
<b-table :data="notes"> <${b}-table :data="notes">
<b-table-column field="note_type" <${b}-table-column field="note_type"
label="Type" label="Type"
v-slot="props"> v-slot="props">
{{ props.row.note_type_display }} {{ props.row.note_type_display }}
</b-table-column> </${b}-table-column>
<b-table-column field="subject" <${b}-table-column field="subject"
label="Subject" label="Subject"
v-slot="props"> v-slot="props">
{{ props.row.subject }} {{ props.row.subject }}
</b-table-column> </${b}-table-column>
<b-table-column field="text" <${b}-table-column field="text"
label="Text" label="Text"
v-slot="props"> v-slot="props">
{{ props.row.text }} {{ props.row.text }}
</b-table-column> </${b}-table-column>
<b-table-column field="created" <${b}-table-column field="created"
label="Created" label="Created"
v-slot="props"> v-slot="props">
<span v-html="props.row.created_display"></span> <span v-html="props.row.created_display"></span>
</b-table-column> </${b}-table-column>
<b-table-column field="created_by" <${b}-table-column field="created_by"
label="Created By" label="Created By"
v-slot="props"> v-slot="props">
{{ props.row.created_by_display }} {{ props.row.created_by_display }}
</b-table-column> </${b}-table-column>
% if request.has_any_perm('people_profile.edit_note', 'people_profile.delete_note'): % if request.has_any_perm('people_profile.edit_note', 'people_profile.delete_note'):
<b-table-column label="Actions" <${b}-table-column label="Actions"
v-slot="props"> v-slot="props">
% if request.has_perm('people_profile.edit_note'): % if request.has_perm('people_profile.edit_note'):
<a href="#" @click.prevent="editNoteInit(props.row)"> <a href="#" @click.prevent="editNoteInit(props.row)">
@ -1219,14 +1312,19 @@
Delete Delete
</a> </a>
% endif % endif
</b-table-column> </${b}-table-column>
% endif % endif
</b-table> </${b}-table>
% if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'): % if request.has_any_perm('people_profile.add_note', 'people_profile.edit_note', 'people_profile.delete_note'):
<b-modal :active.sync="editNoteShowDialog" <${b}-modal has-modal-card
has-modal-card> % if request.use_oruga:
v-model:active="editNoteShowDialog"
% else:
:active.sync="editNoteShowDialog"
% endif
>
<div class="modal-card"> <div class="modal-card">
@ -1285,16 +1383,20 @@
</footer> </footer>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_notes_tab()"> <%def name="render_notes_tab()">
<b-tab-item label="Notes" <${b}-tab-item label="Notes"
value="notes" value="notes"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.notes ? 'check' : null"> :icon="tabchecks.notes ? 'check' : null">
@ -1302,7 +1404,7 @@
:person="person" :person="person"
@profile-changed="profileChanged"> @profile-changed="profileChanged">
</notes-tab> </notes-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_user_tab_template()"> <%def name="render_user_tab_template()">
@ -1355,13 +1457,17 @@
<div v-if="!users.length"> <div v-if="!users.length">
<p>{{ person.display_name }} does not have a user account.</p> <p>{{ person.display_name }} does not have a user account.</p>
</div> </div>
% if request.use_oruga:
<o-loading v-model:active="refreshingTab" :full-page="false"></o-loading>
% else:
<b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading> <b-loading :active.sync="refreshingTab" :is-full-page="false"></b-loading>
% endif
</div> </div>
</script> </script>
</%def> </%def>
<%def name="render_user_tab()"> <%def name="render_user_tab()">
<b-tab-item label="User" <${b}-tab-item label="User"
value="user" value="user"
icon-pack="fas" icon-pack="fas"
:icon="tabchecks.user ? 'check' : null"> :icon="tabchecks.user ? 'check' : null">
@ -1369,7 +1475,7 @@
:person="person" :person="person"
@profile-changed="profileChanged"> @profile-changed="profileChanged">
</user-tab> </user-tab>
</b-tab-item> </${b}-tab-item>
</%def> </%def>
<%def name="render_profile_tabs()"> <%def name="render_profile_tabs()">
@ -1392,14 +1498,20 @@
${self.render_profile_info_extra_buttons()} ${self.render_profile_info_extra_buttons()}
<b-tabs v-model="activeTab" <${b}-tabs v-model="activeTab"
% if request.has_perm('people_profile.view_versions'): % if request.has_perm('people_profile.view_versions'):
v-show="!viewingHistory" v-show="!viewingHistory"
% endif % endif
% if request.use_oruga:
type="boxed"
@change="activeTabChanged"
% else:
type="is-boxed" type="is-boxed"
@input="activeTabChanged"> @input="activeTabChanged"
% endif
>
${self.render_profile_tabs()} ${self.render_profile_tabs()}
</b-tabs> </${b}-tabs>
% if request.has_perm('people_profile.view_versions'): % if request.has_perm('people_profile.view_versions'):
@ -1408,7 +1520,13 @@
vshow='viewingHistory', vshow='viewingHistory',
loading='gettingRevisions')|n} loading='gettingRevisions')|n}
<b-modal :active.sync="showingRevisionDialog"> <${b}-modal
% if request.use_oruga:
v-model:active="showingRevisionDialog"
% else:
:active.sync="showingRevisionDialog"
% endif
>
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
@ -1487,7 +1605,7 @@
</div> </div>
</div> </div>
</b-modal> </${b}-modal>
% endif % endif
</div> </div>
@ -1522,6 +1640,7 @@
% endif % endif
editNameMiddle: null, editNameMiddle: null,
editNameLast: null, editNameLast: null,
editNameSaving: false,
editAddressShowDialog: false, editAddressShowDialog: false,
editAddressStreet1: null, editAddressStreet1: null,
@ -1562,6 +1681,9 @@
% if request.has_perm('people_profile.edit_person'): % if request.has_perm('people_profile.edit_person'):
editNameSaveDisabled: function() { editNameSaveDisabled: function() {
if (this.editNameSaving) {
return true
}
if (!this.editNameFirst || !this.editNameLast) { if (!this.editNameFirst || !this.editNameLast) {
return true return true
} }
@ -1622,6 +1744,7 @@
}, },
editNameSave() { editNameSave() {
this.editNameSaving = true
let url = '${url('people.profile_edit_name', uuid=person.uuid)}' let url = '${url('people.profile_edit_name', uuid=person.uuid)}'
let params = { let params = {
first_name: this.editNameFirst, first_name: this.editNameFirst,
@ -1636,6 +1759,9 @@
this.$emit('profile-changed', response.data) this.$emit('profile-changed', response.data)
this.editNameShowDialog = false this.editNameShowDialog = false
this.refreshTab() this.refreshTab()
this.editNameSaving = false
}, response => {
this.editNameSaving = false
}) })
}, },
@ -1827,6 +1953,7 @@
PersonalTab.data = function() { return PersonalTabData } PersonalTab.data = function() { return PersonalTabData }
Vue.component('personal-tab', PersonalTab) Vue.component('personal-tab', PersonalTab)
<% request.register_component('personal-tab', 'PersonalTab') %>
</script> </script>
</%def> </%def>
@ -1872,6 +1999,7 @@
MemberTab.data = function() { return MemberTabData } MemberTab.data = function() { return MemberTabData }
Vue.component('member-tab', MemberTab) Vue.component('member-tab', MemberTab)
<% request.register_component('member-tab', 'MemberTab') %>
</script> </script>
</%def> </%def>
@ -1908,6 +2036,7 @@
CustomerTab.data = function() { return CustomerTabData } CustomerTab.data = function() { return CustomerTabData }
Vue.component('customer-tab', CustomerTab) Vue.component('customer-tab', CustomerTab)
<% request.register_component('customer-tab', 'CustomerTab') %>
</script> </script>
</%def> </%def>
@ -1944,6 +2073,7 @@
ShopperTab.data = function() { return ShopperTabData } ShopperTab.data = function() { return ShopperTabData }
Vue.component('shopper-tab', ShopperTab) Vue.component('shopper-tab', ShopperTab)
<% request.register_component('shopper-tab', 'ShopperTab') %>
</script> </script>
</%def> </%def>
@ -2100,6 +2230,7 @@
EmployeeTab.data = function() { return EmployeeTabData } EmployeeTab.data = function() { return EmployeeTabData }
Vue.component('employee-tab', EmployeeTab) Vue.component('employee-tab', EmployeeTab)
<% request.register_component('employee-tab', 'EmployeeTab') %>
</script> </script>
</%def> </%def>
@ -2220,6 +2351,7 @@
NotesTab.data = function() { return NotesTabData } NotesTab.data = function() { return NotesTabData }
Vue.component('notes-tab', NotesTab) Vue.component('notes-tab', NotesTab)
<% request.register_component('notes-tab', 'NotesTab') %>
</script> </script>
</%def> </%def>
@ -2256,6 +2388,7 @@
UserTab.data = function() { return UserTabData } UserTab.data = function() { return UserTabData }
Vue.component('user-tab', UserTab) Vue.component('user-tab', UserTab)
<% request.register_component('user-tab', 'UserTab') %>
</script> </script>
</%def> </%def>
@ -2264,7 +2397,7 @@
<script type="text/javascript"> <script type="text/javascript">
let ProfileInfoData = { let ProfileInfoData = {
activeTab: location.hash ? location.hash.substring(1) : undefined, activeTab: location.hash ? location.hash.substring(1) : 'personal',
tabchecks: ${json.dumps(tabchecks)|n}, tabchecks: ${json.dumps(tabchecks)|n},
today: '${rattail_app.today()}', today: '${rattail_app.today()}',
profileLastChanged: Date.now(), profileLastChanged: Date.now(),
@ -2360,6 +2493,7 @@
ProfileInfo.data = function() { return ProfileInfoData } ProfileInfo.data = function() { return ProfileInfoData }
Vue.component('profile-info', ProfileInfo) Vue.component('profile-info', ProfileInfo)
<% request.register_component('profile-info', 'ProfileInfo') %>
</script> </script>
</%def> </%def>

9
tailbone/templates/themes/butterball/buefy-components.mako
View file

@ -332,7 +332,8 @@
v-model="orugaValue" v-model="orugaValue"
@update:modelValue="val => $emit('update:modelValue', val)" @update:modelValue="val => $emit('update:modelValue', val)"
:autocomplete="autocomplete" :autocomplete="autocomplete"
ref="input"> ref="input"
:expanded="expanded">
<slot /> <slot />
</o-input> </o-input>
</script> </script>
@ -344,6 +345,7 @@
type: String, type: String,
autocomplete: String, autocomplete: String,
disabled: Boolean, disabled: Boolean,
expanded: Boolean,
}, },
data() { data() {
return { return {
@ -374,13 +376,16 @@
<%def name="make_b_loading_component()"> <%def name="make_b_loading_component()">
<script type="text/x-template" id="b-loading-template"> <script type="text/x-template" id="b-loading-template">
<o-loading> <o-loading :full-page="isFullPage">
<slot /> <slot />
</o-loading> </o-loading>
</script> </script>
<script> <script>
const BLoading = { const BLoading = {
template: '#b-loading-template', template: '#b-loading-template',
props: {
isFullPage: Boolean,
},
} }
</script> </script>
<% request.register_component('b-loading', 'BLoading') %> <% request.register_component('b-loading', 'BLoading') %>