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,23 +341,21 @@
</header>
<section class="modal-card-body">
<b-field grouped>
<b-field label="Type" expanded>
<b-select v-model="editPhoneType" expanded>
<option v-for="option in phoneTypeOptions"
:key="option.value"
:value="option.value">
{{ option.label }}
</option>
</b-select>
</b-field>
<b-field label="Type">
<b-select v-model="editPhoneType">
<option v-for="option in phoneTypeOptions"
:key="option.value"
:value="option.value">
{{ option.label }}
</option>
</b-select>
</b-field>
<b-field label="Number" expanded>
<b-input v-model.trim="editPhoneNumber"
ref="editPhoneInput">
</b-input>
</b-field>
<b-field label="Number">
<b-input v-model.trim="editPhoneNumber"
ref="editPhoneInput"
expanded />
</b-field>
<b-field label="Preferred?">
@ -439,6 +437,72 @@
</${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>
@ -477,24 +541,21 @@
</header>
<section class="modal-card-body">
<b-field grouped>
<b-field label="Type" expanded>
<b-select v-model="editEmailType" expanded>
<option v-for="option in emailTypeOptions"
:key="option.value"
:value="option.value">
{{ option.label }}
</option>
</b-select>
</b-field>
<b-field label="Address" expanded>
<b-input v-model.trim="editEmailAddress"
ref="editEmailInput">
</b-input>
</b-field>
<b-field label="Type">
<b-select v-model="editEmailType">
<option v-for="option in emailTypeOptions"
:key="option.value"
:value="option.value">
{{ option.label }}
</option>
</b-select>
</b-field>
<b-field label="Address">
<b-input v-model.trim="editEmailAddress"
ref="editEmailInput"
expanded />
</b-field>
<b-field v-if="!editEmailUUID"
@ -590,6 +651,72 @@
</${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>
@ -1657,6 +1784,16 @@
editPhonePreferred: false,
editPhoneSaving: false,
deletePhoneShowDialog: false,
deletePhoneUUID: null,
deletePhoneNumber: null,
deletePhoneSaving: false,
preferPhoneShowDialog: false,
preferPhoneUUID: null,
preferPhoneNumber: null,
preferPhoneSaving: false,
editEmailShowDialog: false,
editEmailUUID: null,
editEmailType: null,
@ -1664,6 +1801,17 @@
editEmailPreferred: null,
editEmailInvalid: false,
editEmailSaving: false,
deleteEmailShowDialog: false,
deleteEmailUUID: null,
deleteEmailAddress: null,
deleteEmailSaving: false,
preferEmailShowDialog: false,
preferEmailUUID: null,
preferEmailAddress: null,
preferEmailSaving: false,
% endif
}
@ -1843,26 +1991,47 @@
},
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 params = {
phone_uuid: phone.uuid,
phone_uuid: this.deletePhoneUUID,
}
this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data)
this.refreshTab()
this.deletePhoneShowDialog = false
this.deletePhoneSaving = false
}, response => {
this.deletePhoneSaving = false
})
},
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 params = {
phone_uuid: phone.uuid,
phone_uuid: this.preferPhoneUUID,
}
this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data)
this.refreshTab()
this.preferPhoneShowDialog = false
this.preferPhoneSaving = false
}, response => {
this.preferPhoneSaving = false
})
},
@ -1917,26 +2086,47 @@
},
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 params = {
email_uuid: email.uuid,
email_uuid: this.deleteEmailUUID,
}
this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data)
this.refreshTab()
this.deleteEmailShowDialog = false
this.deleteEmailSaving = false
}, response => {
this.deleteEmailSaving = false
})
},
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 params = {
email_uuid: email.uuid,
email_uuid: this.preferEmailUUID,
}
this.simplePOST(url, params, response => {
this.$emit('profile-changed', response.data)
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?
this.$refs.input.$el.querySelector('textarea').focus()
} 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()
}
},
},