Add speedbumps for delete, set preferred email/phone in profile view

This commit is contained in:
Lance Edgar 2024-06-01 13:40:50 -05:00
parent b87b1a3801
commit d05458c7fb
2 changed files with 231 additions and 38 deletions

View file

@ -341,10 +341,9 @@
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<b-field grouped>
<b-field label="Type" expanded> <b-field label="Type">
<b-select v-model="editPhoneType" expanded> <b-select v-model="editPhoneType">
<option v-for="option in phoneTypeOptions" <option v-for="option in phoneTypeOptions"
:key="option.value" :key="option.value"
:value="option.value"> :value="option.value">
@ -353,11 +352,10 @@
</b-select> </b-select>
</b-field> </b-field>
<b-field label="Number" expanded> <b-field label="Number">
<b-input v-model.trim="editPhoneNumber" <b-input v-model.trim="editPhoneNumber"
ref="editPhoneInput"> ref="editPhoneInput"
</b-input> expanded />
</b-field>
</b-field> </b-field>
<b-field label="Preferred?"> <b-field label="Preferred?">
@ -439,6 +437,72 @@
</${b}-table> </${b}-table>
<${b}-modal has-modal-card
% if request.use_oruga:
v-model:active="deletePhoneShowDialog"
% else:
:active.sync="deletePhoneShowDialog"
% endif
>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Delete Phone</p>
</header>
<section class="modal-card-body">
<p class="block">Really delete this phone number?</p>
<p class="block has-text-weight-bold">{{ deletePhoneNumber }}</p>
</section>
<footer class="modal-card-foot">
<b-button type="is-danger"
@click="deletePhoneSave()"
:disabled="deletePhoneSaving"
icon-pack="fas"
icon-left="trash">
{{ deletePhoneSaving ? "Working, please wait..." : "Delete" }}
</b-button>
<b-button @click="deletePhoneShowDialog = false">
Cancel
</b-button>
</footer>
</div>
</${b}-modal>
<${b}-modal has-modal-card
% if request.use_oruga:
v-model:active="preferPhoneShowDialog"
% else:
:active.sync="preferPhoneShowDialog"
% endif
>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Set Preferred Phone</p>
</header>
<section class="modal-card-body">
<p class="block">Really make this the preferred phone number?</p>
<p class="block has-text-weight-bold">{{ preferPhoneNumber }}</p>
</section>
<footer class="modal-card-foot">
<b-button type="is-primary"
@click="preferPhoneSave()"
:disabled="preferPhoneSaving"
icon-pack="fas"
icon-left="save">
{{ preferPhoneSaving ? "Working, please wait..." : "Set Preferred" }}
</b-button>
<b-button @click="preferPhoneShowDialog = false">
Cancel
</b-button>
</footer>
</div>
</${b}-modal>
</div> </div>
</div> </div>
</div> </div>
@ -477,10 +541,9 @@
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<b-field grouped>
<b-field label="Type" expanded> <b-field label="Type">
<b-select v-model="editEmailType" expanded> <b-select v-model="editEmailType">
<option v-for="option in emailTypeOptions" <option v-for="option in emailTypeOptions"
:key="option.value" :key="option.value"
:value="option.value"> :value="option.value">
@ -489,12 +552,10 @@
</b-select> </b-select>
</b-field> </b-field>
<b-field label="Address" expanded> <b-field label="Address">
<b-input v-model.trim="editEmailAddress" <b-input v-model.trim="editEmailAddress"
ref="editEmailInput"> ref="editEmailInput"
</b-input> expanded />
</b-field>
</b-field> </b-field>
<b-field v-if="!editEmailUUID" <b-field v-if="!editEmailUUID"
@ -590,6 +651,72 @@
</${b}-table> </${b}-table>
<${b}-modal has-modal-card
% if request.use_oruga:
v-model:active="deleteEmailShowDialog"
% else:
:active.sync="deleteEmailShowDialog"
% endif
>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Delete Email</p>
</header>
<section class="modal-card-body">
<p class="block">Really delete this email address?</p>
<p class="block has-text-weight-bold">{{ deleteEmailAddress }}</p>
</section>
<footer class="modal-card-foot">
<b-button type="is-danger"
@click="deleteEmailSave()"
:disabled="deleteEmailSaving"
icon-pack="fas"
icon-left="trash">
{{ deleteEmailSaving ? "Working, please wait..." : "Delete" }}
</b-button>
<b-button @click="deleteEmailShowDialog = false">
Cancel
</b-button>
</footer>
</div>
</${b}-modal>
<${b}-modal has-modal-card
% if request.use_oruga:
v-model:active="preferEmailShowDialog"
% else:
:active.sync="preferEmailShowDialog"
% endif
>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Set Preferred Email</p>
</header>
<section class="modal-card-body">
<p class="block">Really make this the preferred email address?</p>
<p class="block has-text-weight-bold">{{ preferEmailAddress }}</p>
</section>
<footer class="modal-card-foot">
<b-button type="is-primary"
@click="preferEmailSave()"
:disabled="preferEmailSaving"
icon-pack="fas"
icon-left="save">
{{ preferEmailSaving ? "Working, please wait..." : "Set Preferred" }}
</b-button>
<b-button @click="preferEmailShowDialog = false">
Cancel
</b-button>
</footer>
</div>
</${b}-modal>
</div> </div>
</div> </div>
</div> </div>
@ -1657,6 +1784,16 @@
editPhonePreferred: false, editPhonePreferred: false,
editPhoneSaving: false, editPhoneSaving: false,
deletePhoneShowDialog: false,
deletePhoneUUID: null,
deletePhoneNumber: null,
deletePhoneSaving: false,
preferPhoneShowDialog: false,
preferPhoneUUID: null,
preferPhoneNumber: null,
preferPhoneSaving: false,
editEmailShowDialog: false, editEmailShowDialog: false,
editEmailUUID: null, editEmailUUID: null,
editEmailType: null, editEmailType: null,
@ -1664,6 +1801,17 @@
editEmailPreferred: null, editEmailPreferred: null,
editEmailInvalid: false, editEmailInvalid: false,
editEmailSaving: false, editEmailSaving: false,
deleteEmailShowDialog: false,
deleteEmailUUID: null,
deleteEmailAddress: null,
deleteEmailSaving: false,
preferEmailShowDialog: false,
preferEmailUUID: null,
preferEmailAddress: null,
preferEmailSaving: false,
% endif % endif
} }
@ -1843,26 +1991,47 @@
}, },
deletePhoneInit(phone) { deletePhoneInit(phone) {
this.deletePhoneUUID = phone.uuid
this.deletePhoneNumber = phone.number
this.deletePhoneShowDialog = true
},
deletePhoneSave() {
this.deletePhoneSaving = true
let url = '${url('people.profile_delete_phone', uuid=person.uuid)}' let url = '${url('people.profile_delete_phone', uuid=person.uuid)}'
let params = { let params = {
phone_uuid: phone.uuid, phone_uuid: this.deletePhoneUUID,
} }
this.simplePOST(url, params, response => { this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data) this.$emit('profile-changed', response.data)
this.refreshTab() this.refreshTab()
this.deletePhoneShowDialog = false
this.deletePhoneSaving = false
}, response => {
this.deletePhoneSaving = false
}) })
}, },
preferPhoneInit(phone) { preferPhoneInit(phone) {
this.preferPhoneUUID = phone.uuid
this.preferPhoneNumber = phone.number
this.preferPhoneShowDialog = true
},
preferPhoneSave() {
this.preferPhoneSaving = true
let url = '${url('people.profile_set_preferred_phone', uuid=person.uuid)}' let url = '${url('people.profile_set_preferred_phone', uuid=person.uuid)}'
let params = { let params = {
phone_uuid: phone.uuid, phone_uuid: this.preferPhoneUUID,
} }
this.simplePOST(url, params, response => { this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data) this.$emit('profile-changed', response.data)
this.refreshTab() this.refreshTab()
this.preferPhoneShowDialog = false
this.preferPhoneSaving = false
}, response => {
this.preferPhoneSaving = false
}) })
}, },
@ -1917,26 +2086,47 @@
}, },
deleteEmailInit(email) { deleteEmailInit(email) {
this.deleteEmailUUID = email.uuid
this.deleteEmailAddress = email.address
this.deleteEmailShowDialog = true
},
deleteEmailSave() {
this.deleteEmailSaving = true
let url = '${url('people.profile_delete_email', uuid=person.uuid)}' let url = '${url('people.profile_delete_email', uuid=person.uuid)}'
let params = { let params = {
email_uuid: email.uuid, email_uuid: this.deleteEmailUUID,
} }
this.simplePOST(url, params, response => { this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data) this.$emit('profile-changed', response.data)
this.refreshTab() this.refreshTab()
this.deleteEmailShowDialog = false
this.deleteEmailSaving = false
}, response => {
this.deleteEmailSaving = false
}) })
}, },
preferEmailInit(email) { preferEmailInit(email) {
this.preferEmailUUID = email.uuid
this.preferEmailAddress = email.address
this.preferEmailShowDialog = true
},
preferEmailSave() {
this.preferEmailSaving = true
let url = '${url('people.profile_set_preferred_email', uuid=person.uuid)}' let url = '${url('people.profile_set_preferred_email', uuid=person.uuid)}'
let params = { let params = {
email_uuid: email.uuid, email_uuid: this.preferEmailUUID,
} }
this.simplePOST(url, params, response => { this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data) this.$emit('profile-changed', response.data)
this.refreshTab() this.refreshTab()
this.preferEmailShowDialog = false
this.preferEmailSaving = false
}, response => {
this.preferEmailSaving = false
}) })
}, },

View file

@ -365,7 +365,10 @@
// TODO: this does not always work right? // TODO: this does not always work right?
this.$refs.input.$el.querySelector('textarea').focus() this.$refs.input.$el.querySelector('textarea').focus()
} else { } else {
this.$refs.input.$el.querySelector('input').focus() // TODO: pretty sure we can rely on the <o-input> focus()
// here, but not sure why we weren't already doing that?
//this.$refs.input.$el.querySelector('input').focus()
this.$refs.input.focus()
} }
}, },
}, },