Add ConfirmModal back

Freegle · Dec 18, 2023 · 4a50b6d · 4a50b6d
1 parent 9b4f1ff
commit 4a50b6d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 29 deletions.
diff --git a/components/IsoChrone.vue b/components/IsoChrone.vue
@@ -53,15 +53,15 @@
             >
               Add location
             </b-button>
-            <b-button
+            <SpinButton
               v-else-if="isochrone.nickname"
               variant="link"
-              class="ml-2 p-0 mb-1"
+              button-class="ml-2 p-0 mb-1"
+              confirm
               size="sm"
-              @click="confirmRemoveLocation = true"
-            >
-              Remove
-            </b-button>
+              label="Remove"
+              @handle="deleteLocation"
+            />
           </div>
         </label>
         <div class="slider">
@@ -145,29 +145,20 @@
       </div>
       <hr v-if="!last" class="text-muted mb-1 mt-1" />
     </template>
-    <client-only>
-      <Teleport to="body">
-        <ConfirmModal
-          v-if="confirmRemoveLocation"
-          @confirm="deleteLocation"
-          @hidden="confirmRemoveLocation = false"
-        />
-      </Teleport>
-    </client-only>
   </div>
 </template>
 <script>
 import { mapState } from 'pinia'
 import { useLocationStore } from '../stores/location'
-import { ref, defineAsyncComponent } from '#imports'
+import { ref } from '#imports'
 import PostCode from '~/components/PostCode'
+import SpinButton from '~/components/SpinButton'
 import { useIsochroneStore } from '~/stores/isochrone'
 
-const ConfirmModal = defineAsyncComponent(() => import('./ConfirmModal'))
 export default {
   components: {
     PostCode,
-    ConfirmModal,
+    SpinButton,
   },
   props: {
     id: {
@@ -192,7 +183,6 @@ export default {
 
     const minutes = ref(20)
     const transport = ref('Drive')
-    const confirmRemoveLocation = ref(false)
     if (props.id) {
       minutes.value = isochroneStore.get(props.id).minutes
       transport.value = isochroneStore.get(props.id).transport
@@ -219,8 +209,9 @@ export default {
       await locationStore.fetchv2(isochrone.value.locationid)
     }
 
-    const deleteLocation = async () => {
+    const deleteLocation = async (callback) => {
       await isochroneStore.delete({ id: props.id })
+      callback()
     }
 
     return {
@@ -230,7 +221,6 @@ export default {
       transport,
       isochrone,
       location,
-      confirmRemoveLocation,
       deleteLocation,
     }
   },

diff --git a/components/PostCode.vue b/components/PostCode.vue
@@ -48,10 +48,11 @@
           :show="true"
           :skidding="-50"
         />
-        <div v-if="find && !wip" style="max-height: 52px">
+        <div v-if="find && !wip">
           <SpinButton
+            style="line-height: 1.7em"
             variant="secondary"
-            class="h-100"
+            :flex="false"
             button-title="Find my device's location instead of typing a postcode"
             done-icon=""
             :icon-name="

diff --git a/components/SpinButton.vue b/components/SpinButton.vue
@@ -1,12 +1,13 @@
 <template>
   <b-button
+    v-bind="$attrs"
     :variant="variant"
     :disabled="disabled"
     :size="size"
     :tabindex="tabindex"
     :title="buttonTitle"
     :class="[
-      'd-flex gap-1 align-items-center',
+      flex && 'd-flex gap-1 align-items-center',
       noBorder && 'no-border',
       iconlast && 'flex-row-reverse',
     ]"
@@ -23,10 +24,22 @@
       <slot>{{ label }}</slot>
     </span>
   </b-button>
+  <client-only>
+    <teleport to="body">
+      <ConfirmModal
+        v-if="confirm && showConfirm"
+        @confirm="confirmed"
+        @hidden="onConfirmClosed"
+      />
+    </teleport>
+  </client-only>
 </template>
 <script setup>
 import { ref } from '#imports'
 const { $sentryCaptureException } = useNuxtApp()
+
+const ConfirmModal = defineAsyncComponent(() => import('./ConfirmModal'))
+
 const props = defineProps({
   variant: {
     type: String,
@@ -76,6 +89,11 @@ const props = defineProps({
     default: '',
   },
   noBorder: Boolean,
+  confirm: Boolean,
+  flex: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['handle'])
@@ -90,6 +108,8 @@ const SPINNER_COLOR = {
 
 const doing = ref(false)
 const done = ref(false)
+const showConfirm = ref(false)
+const actionConfirmed = ref(false)
 let timer = null
 
 const spinColorClass =
@@ -113,14 +133,29 @@ const forgottenCallback = () => {
 
 const onClick = () => {
   if (!doing.value) {
-    done.value = false
-    doing.value = true
-
-    emit('handle', finishSpinner)
-    timer = setTimeout(forgottenCallback, 20 * 1000)
+    if (props.confirm) {
+      showConfirm.value = true
+    } else {
+      done.value = false
+      doing.value = true
+      emit('handle', finishSpinner)
+      timer = setTimeout(forgottenCallback, 20 * 1000)
+    }
   }
 }
 
+const confirmed = () => {
+  actionConfirmed.value = true
+  done.value = false
+  doing.value = true
+  emit('handle', finishSpinner)
+  timer = setTimeout(forgottenCallback, 20 * 1000)
+}
+
+const onConfirmClosed = () => {
+  showConfirm.value = false
+}
+
 defineExpose({ handle: onClick })
 </script>