From 13ce366d9c29e709a07f90b23eabfff1d745634f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:14:21 +0200
Subject: [PATCH] refactor: rework ModalOverlay to new requests

---
 app/src/components/modals/ModalOverlay.vue | 119 +++++++++------------
 1 file changed, 49 insertions(+), 70 deletions(-)

diff --git a/app/src/components/modals/ModalOverlay.vue b/app/src/components/modals/ModalOverlay.vue
index 8c3fbb4f..6beeed49 100644
--- a/app/src/components/modals/ModalOverlay.vue
+++ b/app/src/components/modals/ModalOverlay.vue
@@ -1,87 +1,66 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { APIRequest } from '@/composables/useRequests'
 
-import QueryHeader from '@/components/QueryHeader.vue'
-import { useStoreGetters } from '@/store/utils'
-import { useSettings } from '@/composables/useSettings'
-import {
-  ErrorDisplay,
-  ReconnectingDisplay,
-  WaitingDisplay,
-  WarningDisplay,
-} from '@/views/_partials'
+withDefaults(
+  defineProps<{
+    request: APIRequest
+    hideFooter?: boolean
+  }>(),
+  {
+    hideFooter: true,
+  },
+)
 
-const { dark } = useSettings()
-const { waiting, reconnecting, error, currentRequest } = useStoreGetters()
-const component = computed(() => {
-  const request = currentRequest.value
-  // FIXME should we pass refs or unwrap refs as props?
-  if (error.value) {
-    return { is: ErrorDisplay, request: error.value }
-  } else if (request.showWarningMessage) {
-    return { is: WarningDisplay, request: currentRequest.value }
-  } else if (reconnecting.value) {
-    return { is: ReconnectingDisplay }
-  } else {
-    return { is: WaitingDisplay, request: currentRequest.value }
-  }
-})
+const emit = defineEmits<{
+  dismiss: [value: boolean]
+}>()
+
+defineSlots<{
+  default(props: Record<string, any>): any
+  footer(props: Record<string, any>): any
+}>()
 </script>
 
 <template>
-  <BOverlay
-    :variant="dark ? 'dark' : 'light'"
-    opacity="0.75"
-    no-center
-    :show="waiting || reconnecting || error !== null"
+  <BModal
+    :model-value="true"
+    class="modal-overlay"
+    centered
+    hide-backdrop
+    no-close-on-backdrop
+    no-close-on-esc
+    :hide-footer="hideFooter"
   >
+    <template #header>
+      <QueryHeader type="overlay" :request="request" tabindex="0" />
+    </template>
+
     <slot name="default" />
 
-    <template #overlay>
-      <BCard no-body class="card-overlay">
-        <BCardHeader header-bg-variant="white">
-          <QueryHeader :request="error || currentRequest" status-size="lg" />
-        </BCardHeader>
-
-        <Component :is="component.is" :request="component.request" />
-      </BCard>
+    <template #footer>
+      <slot name="footer">
+        <BButton
+          v-t="'ok'"
+          variant="light"
+          size="sm"
+          @click="emit('dismiss', true)"
+        />
+      </slot>
     </template>
-  </BOverlay>
+  </BModal>
 </template>
 
-<style lang="scss" scoped>
-// Style for `*Display`'s cards
-.card-overlay {
-  position: sticky;
-  top: 10vh;
-  margin: 0 5%;
-
-  @include media-breakpoint-up(md) {
-    margin: 0 10%;
-  }
-  @include media-breakpoint-up(lg) {
-    margin: 0 15%;
-  }
-
-  :deep(.card-body) {
-    padding: 1.5rem;
-    padding-bottom: 0;
-    max-height: 60vh;
-    overflow-y: auto;
-
-    & > :last-child {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  :deep(.card-footer) {
+<style lang="scss">
+.modal-overlay {
+  .modal-header {
     padding: 0.5rem 0.75rem;
-    display: flex;
-    justify-content: flex-end;
   }
-
-  .card-header {
-    padding: 0.5rem 0.75rem;
+  &-status {
+    display: inline-block;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
   }
 }
 </style>