From b86e79ef3f71b83b9d4ef31bbbc874cafb0fa154 Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Fri, 9 Dec 2022 12:03:46 +0100
Subject: [PATCH 1/2] Add app-wide loading mask component

This adds an app-wide loading mask component, which covers the
application and shows a loading spinner.
---
 app-starter/WguAppTemplate.vue                |  6 ++++
 src/components/AppLoadingMask.vue             | 35 +++++++++++++++++++
 .../specs/components/AppLoadingMask.spec.js   | 10 ++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/components/AppLoadingMask.vue
 create mode 100644 test/unit/specs/components/AppLoadingMask.spec.js

diff --git a/app-starter/WguAppTemplate.vue b/app-starter/WguAppTemplate.vue
index c99ed18a..c5480231 100644
--- a/app-starter/WguAppTemplate.vue
+++ b/app-starter/WguAppTemplate.vue
@@ -58,6 +58,10 @@
 
     <slot name="wgu-after-footer" />
 
+    <!-- app wide loading mask,
+    use WguEventBus.$emit('app-loading-mask-toggle', newViz) to show/hide -->
+    <wgu-app-loading-mask />
+
     <slot name="wgu-app-end" />
 
   </v-app>
@@ -72,6 +76,7 @@
   import AppFooter from './components/AppFooter'
   import AppSidebar from './components/AppSidebar'
   import AppLogo from '../src/components/AppLogo'
+  import AppLoadingMask from '../src/components/AppLoadingMask'
   import BgLayerSwitcher from '../src/components/bglayerswitcher/BgLayerSwitcher.vue'
   import OverviewMap from '../src/components/overviewmap/OverviewMap.vue'
   import MeasureWin from '../src/components/measuretool/MeasureWin'
@@ -92,6 +97,7 @@
       'wgu-app-footer': AppFooter,
       'wgu-app-sidebar': AppSidebar,
       'wgu-app-logo': AppLogo,
+      'wgu-app-loading-mask': AppLoadingMask,
       'wgu-bglayerswitcher': BgLayerSwitcher,
       'wgu-overviewmap': OverviewMap,
       'wgu-measuretool-win': MeasureWin,
diff --git a/src/components/AppLoadingMask.vue b/src/components/AppLoadingMask.vue
new file mode 100644
index 00000000..2bbdf930
--- /dev/null
+++ b/src/components/AppLoadingMask.vue
@@ -0,0 +1,35 @@
+<template>
+
+  <v-overlay :value="show" :opacity="0.25">
+    <v-progress-circular
+      indeterminate
+      color="primary"
+    >
+    </v-progress-circular>
+  </v-overlay>
+
+</template>
+
+<script>
+import { WguEventBus } from '../WguEventBus';
+
+export default {
+  name: 'wgu-app-loading-mask',
+  components: {},
+  data () {
+    return {
+      show: false
+    }
+  },
+  created () {
+    WguEventBus.$on('app-loading-mask-toggle', (visible) => {
+      // toggle or force a visibility of the loading mask
+      if (typeof visible === 'boolean') {
+        this.show = visible;
+      } else {
+        this.show = !this.show;
+      }
+    });
+  }
+}
+</script>
diff --git a/test/unit/specs/components/AppLoadingMask.spec.js b/test/unit/specs/components/AppLoadingMask.spec.js
new file mode 100644
index 00000000..5b410bbb
--- /dev/null
+++ b/test/unit/specs/components/AppLoadingMask.spec.js
@@ -0,0 +1,10 @@
+import AppLoadingMask from '@/components/AppLoadingMask'
+
+describe('AppLoadingMask.vue', () => {
+  it('sets the correct default data', () => {
+    AppLoadingMask.$appConfig = {};
+    expect(typeof AppLoadingMask.data).to.equal('function');
+    const data = AppLoadingMask.data();
+    expect(data.show).to.equal(false);
+  });
+});

From 10d08755353f409f2af0bfe7a06c7a3bf9822384 Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Wed, 14 Dec 2022 10:35:05 +0100
Subject: [PATCH 2/2] Add more unit tests for AppLoadingMask

---
 .../specs/components/AppLoadingMask.spec.js   | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/test/unit/specs/components/AppLoadingMask.spec.js b/test/unit/specs/components/AppLoadingMask.spec.js
index 5b410bbb..0fe8cdea 100644
--- a/test/unit/specs/components/AppLoadingMask.spec.js
+++ b/test/unit/specs/components/AppLoadingMask.spec.js
@@ -1,4 +1,6 @@
-import AppLoadingMask from '@/components/AppLoadingMask'
+import AppLoadingMask from '@/components/AppLoadingMask';
+import { WguEventBus } from '@/WguEventBus';
+import { shallowMount } from '@vue/test-utils';
 
 describe('AppLoadingMask.vue', () => {
   it('sets the correct default data', () => {
@@ -7,4 +9,28 @@ describe('AppLoadingMask.vue', () => {
     const data = AppLoadingMask.data();
     expect(data.show).to.equal(false);
   });
+
+  describe('events', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      comp = shallowMount(AppLoadingMask, {});
+      vm = comp.vm;
+    });
+
+    it('event "app-loading-mask-toggle" forces correct visibility', done => {
+      // force showing by adding 'true' parameter
+      WguEventBus.$emit('app-loading-mask-toggle', true);
+      vm.$nextTick(() => {
+        expect(vm.show).to.equal(true);
+
+        // toggle visibility by skipping parameter
+        WguEventBus.$emit('app-loading-mask-toggle');
+        vm.$nextTick(() => {
+          expect(vm.show).to.equal(false);
+          done();
+        });
+      });
+    });
+  });
 });