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

tailbone/templates/people/view_profile.mako

@@ -341,23 +341,21 @@
                 </header>
 
                 <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">
-                          {{ option.label }}
+                        {{ option.label }}
-                        </option>
+                      </option>
-                      </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 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-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">
-                          {{ option.label }}
+                        {{ option.label }}
-                        </option>
+                      </option>
-                      </b-select>
+                    </b-select>
-                    </b-field>
+                  </b-field>
-
-                    <b-field label="Address" expanded>
-                      <b-input v-model.trim="editEmailAddress"
-                               ref="editEmailInput">
-                      </b-input>
-                    </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
                     })
                 },
 

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

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