Merge pull request #47 from Freegle/feature/migrate-spin-button

SpinButton migration
Freegle · Dec 21, 2023 · 5064427 · 5064427
2 parents e01753c + 95b48ad
commit 5064427
Show file tree

Hide file tree

Showing 36 changed files with 404 additions and 390 deletions.
diff --git a/components/AddressModal.vue b/components/AddressModal.vue
@@ -28,7 +28,7 @@
           </b-col>
           <b-col cols="12" sm="4">
             <SpinButton
-              name="trash-alt"
+              icon-name="trash-alt"
               label="Delete"
               variant="secondary"
               @handle="deleteIt"
@@ -77,11 +77,10 @@
             </b-col>
             <b-col cols="12" sm="4">
               <SpinButton
-                name="save"
+                icon-name="save"
                 variant="primary"
                 size="lg"
                 label="Save"
-                spinclass="text-white"
                 @handle="saveInstructions"
               />
             </b-col>
@@ -124,7 +123,7 @@
                 v-if="selectedProperty"
                 label="Add"
                 variant="primary"
-                name="plus"
+                icon-name="plus"
                 @handle="add"
               />
             </b-col>
@@ -338,7 +337,7 @@ export default {
       this.showMap = false
       this.$emit('hidden')
     },
-    async add() {
+    async add(callback) {
       const id = await this.addressStore.add({
         pafid: this.selectedProperty,
         instructions: this.updatedInstructions,
@@ -347,10 +346,12 @@ export default {
       this.selectedAddress = id
 
       this.showAdd = false
+      callback()
     },
-    async deleteIt() {
+    async deleteIt(callback) {
       await this.addressStore.delete(this.selectedAddress)
       this.selectFirst()
+      callback()
     },
     postcodeCleared() {
       this.postcode = null
@@ -363,11 +364,12 @@ export default {
 
       this.selectedProperty = 0
     },
-    async saveInstructions() {
+    async saveInstructions(callback) {
       await this.addressStore.update({
         id: this.selectedAddress,
         instructions: this.updatedInstructions,
       })
+      callback()
     },
     addnew() {
       this.showAdd = true

diff --git a/components/AutoComplete.vue b/components/AutoComplete.vue
@@ -254,9 +254,6 @@ export default {
   },
 
   computed: {
-    faSearch() {
-      return faSearch
-    },
     wrapClass() {
       let border
 

diff --git a/components/ChatFooter.vue b/components/ChatFooter.vue
@@ -133,16 +133,17 @@
             </b-button>
           </div>
         </span>
-        <b-button variant="primary" class="float-end ml-2 mr-2" @click="send">
-          Send&nbsp;
-          <v-icon
-            v-if="sending"
-            icon="sync"
-            class="fa-spin"
-            title="Sending..."
-          />
-          <v-icon v-else icon="angle-double-right" title="Send" />
-        </b-button>
+        <SpinButton
+          size="md"
+          variant="primary"
+          class="float-end ml-2 mr-2"
+          button-title="Sending..."
+          label="Send"
+          icon-name="angle-double-right"
+          done-icon=""
+          iconlast
+          @handle="send"
+        />
         <b-button
           v-b-tooltip="'Upload a photo'"
           variant="secondary"
@@ -213,16 +214,15 @@
           <v-icon scale="2" icon="camera" class="fa-mob" />
           <div class="mobtext text--smallest">Photo</div>
         </div>
-        <b-button variant="primary" @click="send">
-          Send
-          <v-icon
-            v-if="sending"
-            icon="sync"
-            class="fa-spin"
-            title="Sending..."
-          />
-          <v-icon v-else icon="angle-double-right" title="Send" />
-        </b-button>
+        <SpinButton
+          variant="primary"
+          size="md"
+          label="Send"
+          icon-name="angle-double-right"
+          done-icon=""
+          iconlast
+          @handle="send"
+        />
       </div>
     </div>
     <PromiseModal
@@ -274,6 +274,7 @@ import { useMessageStore } from '../stores/message'
 import { fetchOurOffers } from '../composables/useThrottle'
 import { useAuthStore } from '../stores/auth'
 import { useAddressStore } from '../stores/address'
+import SpinButton from './SpinButton'
 import { untwem } from '~/composables/useTwem'
 
 // Don't use dynamic imports because it stops us being able to scroll to the bottom after render.
@@ -301,6 +302,7 @@ const MicroVolunteering = () => import('~/components/MicroVolunteering')
 
 export default {
   components: {
+    SpinButton,
     NudgeTooSoonWarningModal,
     NudgeWarningModal,
     UserRatings,
@@ -484,7 +486,7 @@ export default {
     showInfo() {
       this.showProfileModal = true
     },
-    async send() {
+    async send(callback) {
       if (!this.sending) {
         if (this.imageid) {
           this.sending = true
@@ -533,6 +535,7 @@ export default {
           this.startTypingTimer()
         }
       }
+      callback()
     },
     startTypingTimer() {
       // We want to let the server know regularly that we are still typing.  This will bump earlier recent chat

diff --git a/components/CommunityEventModal.vue b/components/CommunityEventModal.vue
@@ -368,9 +368,8 @@
             v-if="editing && enabled"
             variant="primary"
             :disabled="uploadingPhoto"
-            name="save"
+            icon-name="save"
             :label="event.id ? 'Save Changes' : 'Add Event'"
-            spinclass="textWhite"
             @handle="saveIt"
           />
         </template>
@@ -601,11 +600,12 @@ export default {
       await this.communityEventStore.delete(this.event.id)
       this.hide()
     },
-    async saveIt() {
+    async saveIt(callback) {
       const validate = await this.$refs.form.validate()
 
       if (!this.groupid) {
         this.showGroupError = true
+        callback()
         return
       } else {
         this.showGroupError = false
@@ -615,6 +615,7 @@ export default {
         for (const date of this.event.dates) {
           if (!date.start || !date.end || !date.starttime || !date.endtime) {
             this.showDateError = true
+            callback()
             return
           }
         }
@@ -625,6 +626,7 @@ export default {
       }
 
       if (!validate.valid) {
+        callback()
         return
       }
 
@@ -696,6 +698,7 @@ export default {
           this.added = true
         }
       }
+      callback()
     },
     async dontSave() {
       if (this.id) {

diff --git a/components/DraggableMap.vue b/components/DraggableMap.vue
@@ -4,18 +4,18 @@
       <b-col ref="mapcont" class="p-0">
         <client-only>
           <div class="d-flex justify-content-between">
-            <b-button
+            <SpinButton
               variant="secondary"
-              size="lg"
               class="mb-2 ml-0 ml-md-2"
-              title="Find my location"
-              @click="findLoc"
-            >
-              <v-icon v-if="locating" icon="sync" class="fa-spin" />
-              <v-icon v-else-if="locationFailed" icon="exclamation-triangle" />
-              <v-icon v-else icon="map-marker-alt" />
-              &nbsp;Find my location
-            </b-button>
+              button-title="Find my location"
+              done-icon=""
+              :icon-name="
+                locationFailed ? 'exclamation-triangle' : 'map-marker-alt'
+              "
+              label="Find my location"
+              size="lg"
+              @handle="findLoc"
+            />
           </div>
           <l-map
             ref="map"
@@ -37,11 +37,12 @@
 <script>
 import 'leaflet-control-geocoder/dist/Control.Geocoder.css'
 import { attribution, osmtile, loadLeaflet } from '../composables/useMap'
+import SpinButton from './SpinButton'
 import { MAX_MAP_ZOOM } from '~/constants'
 import { useRuntimeConfig } from '#app'
 
 export default {
-  components: {},
+  components: { SpinButton },
   props: {
     initialZoom: {
       type: Number,
@@ -106,31 +107,37 @@ export default {
     getCenter() {
       return this.center
     },
-    findLoc() {
+    findLoc(callback) {
       try {
         if (
           navigator &&
           navigator.geolocation &&
           navigator.geolocation.getCurrentPosition
         ) {
-          this.locating = true
-          navigator.geolocation.getCurrentPosition((position) => {
-            // Show close to where we think they are.
-            this.mapObject.flyTo(
-              [position.coords.latitude, position.coords.longitude],
-              16
-            )
-          })
+          navigator.geolocation.getCurrentPosition(
+            (position) => {
+              // Show close to where we think they are.
+              this.mapObject.flyTo(
+                [position.coords.latitude, position.coords.longitude],
+                16
+              )
+              callback()
+            },
+            () => {
+              this.locationFailed = true
+              callback()
+            }
+          )
         } else {
           console.log('Navigation not supported.  ')
           this.locationFailed = true
+          callback()
         }
       } catch (e) {
         console.error('Find location failed with', e)
         this.locationFailed = true
+        callback()
       }
-
-      this.locating = false
     },
     idle() {
       this.center = this.mapObject.getCenter()

diff --git a/components/GroupHeader.vue b/components/GroupHeader.vue
@@ -42,19 +42,19 @@
         <div class="button__items">
           <SpinButton
             v-if="!amAMember"
-            name="trash-alt"
+            icon-name="plus"
             variant="primary"
             class="mb-1 ms-1"
             label="Join this community"
-            @click="join"
+            @handle="join"
           />
           <SpinButton
             v-if="amAMember === 'Member'"
-            name="trash-alt"
+            icon-name="trash-alt"
             variant="white"
             class="mb-1 ms-1"
             label="Leave"
-            @click="leave"
+            @handle="leave"
           />
         </div>
       </div>
@@ -201,23 +201,17 @@ export default {
     },
   },
   methods: {
-    async leave() {
-      this.joiningOrLeaving = true
-
+    async leave(callback) {
       await this.authStore.leaveGroup(this.myid, this.group.id)
-
-      this.joiningOrLeaving = false
+      callback()
     },
-    async join() {
+    async join(callback) {
       if (!this.me) {
         // We need to force them to log in.
         this.$router.push('/explore/join/' + this.group.id)
       } else {
-        this.joiningOrLeaving = true
-
         await this.authStore.joinGroup(this.myid, this.group.id, true)
-
-        this.joiningOrLeaving = false
+        callback()
       }
     },
   },