Merge pull request #1106 from geoadmin/fix-PB-1080-show-warnings-and-…

…errors-simultaneously PB-1080: show both warning and error feedback
geoadmin · Nov 21, 2024 · 519e8ca · 519e8ca
2 parents b49a21f + 971f431
commit 519e8ca
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 116 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -9,8 +9,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
-import ErrorWindow from '@/utils/components/ErrorWindow.vue'
-import WarningWindow from '@/utils/components/WarningWindow.vue'
+import FeedbackPopup from '@/utils/components/FeedbackPopup.vue'
 import debounce from '@/utils/debounce'
 
 const withOutline = ref(false)
@@ -21,17 +20,8 @@ const i18n = useI18n()
 const dispatcher = { dispatcher: 'App.vue' }
 
 let debouncedOnResize
-const error = computed(() => {
-    if (store.state.ui.errors.size > 0) {
-        return store.state.ui.errors.values().next().value
-    }
-    return null
-})
-const warning = computed(() => {
-    if (store.state.ui.warnings.size > 0) {
-        return store.state.ui.warnings.values().next().value
-    }
-    return null
+const showFeedbackPopup = computed(() => {
+    return store.state.ui.errors.size + store.state.ui.warnings.size > 0
 })
 
 onMounted(() => {
@@ -65,22 +55,7 @@ function refreshPageTitle() {
         @pointerdown="withOutline = false"
     >
         <router-view />
-        <ErrorWindow
-            v-if="error"
-            title="error"
-            @close="store.dispatch('removeError', { error, ...dispatcher })"
-        >
-            <div>
-                {{ i18n.t(error.msg, error.params) }}
-            </div>
-        </ErrorWindow>
-        <WarningWindow
-            v-if="warning"
-            title="warning"
-            @close="store.dispatch('removeWarning', { warning, ...dispatcher })"
-        >
-            <div>{{ i18n.t(warning.msg, warning.params) }}</div>
-        </WarningWindow>
+        <FeedbackPopup v-if="showFeedbackPopup"> </FeedbackPopup>
     </div>
 </template>
 

diff --git a/src/utils/components/ErrorWindow.vue b/src/utils/components/ErrorWindow.vue
@@ -24,6 +24,8 @@ const store = useStore()
 const showBody = ref(true)
 const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
 
+const errorCount = computed(() => store.state.ui.errors.size)
+
 const i18n = useI18n()
 
 const emit = defineEmits(['close'])
@@ -40,7 +42,9 @@ const emit = defineEmits(['close'])
             class="card-header d-flex align-items-center justify-content-sm-end"
             data-cy="window-header"
         >
-            <span v-if="title" class="me-auto text-truncate">{{ i18n.t(title) }}</span>
+            <span v-if="title" class="me-auto text-truncate"
+                >{{ i18n.t(title) }}<span v-if="errorCount > 1"> ({{ errorCount }})</span></span
+            >
             <span v-else class="me-auto" />
             <button
                 class="btn btn-light btn-sm btn-outline-danger me-2"
@@ -61,45 +65,3 @@ const emit = defineEmits(['close'])
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-@import '@/scss/variables.module';
-@import '@/scss/media-query.mixin';
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-.simple-window {
-    $top-margin: calc(2 * $header-height + 2rem);
-    z-index: calc($zindex-menu - 1);
-    position: fixed;
-    top: $top-margin;
-    right: 4rem;
-    width: max-content;
-    max-width: 400px;
-    max-height: calc(100vh - $top-margin);
-
-    @include respond-below(phone) {
-        $top-margin: $header-height;
-        top: $top-margin;
-        left: 50%;
-        right: unset;
-        transform: translate(-50%, 0%);
-        max-height: calc(100vh - $top-margin);
-        max-width: 100vw;
-
-        &.dev-disclaimer-present {
-            $top-margin: calc($header-height + $dev-disclaimer-height);
-        }
-    }
-    .card-body {
-        // Allow text selection
-        @extend .clear-no-ios-long-press;
-        overflow-y: auto;
-
-        &.hide {
-            visibility: hidden;
-            height: 0px;
-            padding: 0px;
-        }
-    }
-}
-</style>
diff --git a/src/utils/components/FeedbackPopup.vue b/src/utils/components/FeedbackPopup.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import ErrorWindow from '@/utils/components/ErrorWindow.vue'
+import WarningWindow from '@/utils/components/WarningWindow.vue'
+const store = useStore()
+const i18n = useI18n()
+const error = computed(() => {
+    if (store.state.ui.errors.size > 0) {
+        return store.state.ui.errors.values().next().value
+    }
+    return null
+})
+const warning = computed(() => {
+    if (store.state.ui.warnings.size > 0) {
+        return store.state.ui.warnings.values().next().value
+    }
+    return null
+})
+</script>
+
+<template>
+    <div class="feedback-window">
+        <ErrorWindow
+            v-if="error"
+            title="error"
+            @close="store.dispatch('removeError', { error, ...dispatcher })"
+        >
+            <div>
+                {{ i18n.t(error.msg, error.params) }}
+            </div>
+        </ErrorWindow>
+        <WarningWindow
+            v-if="warning"
+            title="warning"
+            @close="store.dispatch('removeWarning', { warning, ...dispatcher })"
+        >
+            <div>{{ i18n.t(warning.msg, warning.params) }}</div>
+        </WarningWindow>
+    </div>
+</template>
+<style lang="scss">
+@import '@/scss/variables.module';
+@import '@/scss/media-query.mixin';
+@import '@/scss/webmapviewer-bootstrap-theme';
+.feedback-window {
+    $top-margin: calc(2 * $header-height + 2rem);
+    z-index: calc($zindex-menu - 1);
+    top: $top-margin;
+    right: 4rem;
+    width: max-content;
+    max-width: 400px;
+    max-height: calc(100vh - $top-margin);
+    position: absolute;
+
+    display: flex;
+    flex-direction: column;
+    @include respond-below(phone) {
+        $top-margin: $header-height;
+        top: $top-margin;
+        left: 50%;
+        right: unset;
+        transform: translate(-50%, 0%);
+        max-height: calc(100vh - $top-margin);
+        max-width: 100vw;
+
+        &.dev-disclaimer-present {
+            $top-margin: calc($header-height + $dev-disclaimer-height);
+        }
+    }
+}
+</style>
diff --git a/src/utils/components/WarningWindow.vue b/src/utils/components/WarningWindow.vue
@@ -24,6 +24,8 @@ const store = useStore()
 const showBody = ref(true)
 const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
 
+const warningCount = computed(() => store.state.ui.warnings.size)
+
 const i18n = useI18n()
 
 const emit = defineEmits(['close'])
@@ -40,7 +42,10 @@ const emit = defineEmits(['close'])
             class="card-header d-flex align-items-center justify-content-sm-end"
             data-cy="window-header"
         >
-            <span v-if="title" class="me-auto text-truncate">{{ i18n.t(title) }}</span>
+            <span v-if="title" class="me-auto text-truncate"
+                >{{ i18n.t(title) }}<span v-if="warningCount > 1"> ({{ warningCount }})</span></span
+            >
+
             <span v-else class="me-auto" />
             <button class="btn btn-sm btn-light me-2" @click.stop="showBody = !showBody">
                 <FontAwesomeIcon :icon="`caret-${showBody ? 'down' : 'right'}`" />
@@ -58,46 +63,3 @@ const emit = defineEmits(['close'])
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-@import '@/scss/variables.module';
-@import '@/scss/media-query.mixin';
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-.simple-window {
-    $top-margin: calc(2 * $header-height + 2rem);
-    z-index: calc($zindex-menu - 1);
-    position: fixed;
-    top: $top-margin;
-    right: 4rem;
-    width: max-content;
-    max-width: 400px;
-    max-height: calc(100vh - $top-margin);
-
-    @include respond-below(phone) {
-        $top-margin: $header-height;
-
-        top: $top-margin;
-        left: 50%;
-        right: unset;
-        transform: translate(-50%, 0%);
-        max-height: calc(100vh - $top-margin);
-        max-width: 100vw;
-
-        &.dev-disclaimer-present {
-            $top-margin: calc($header-height + $dev-disclaimer-height);
-        }
-    }
-    .card-body {
-        // Allow text selection
-        @extend .clear-no-ios-long-press;
-        overflow-y: auto;
-
-        &.hide {
-            visibility: hidden;
-            height: 0px;
-            padding: 0px;
-        }
-    }
-}
-</style>