Merge branch 'dillon/34.7-jenkins-vapor' into vapor/development

resources/assets/vue/components/general/elements/OpenLinkInNewTabComponent.vue

@@ -1,10 +1,13 @@
 <template>
     <span>
-        <a :class="customClass" @click.prevent="handleClick">
-            <slot></slot>
-        </a>
+      <a
+        :class="[customClass, { 'link-disabled': isDownloading }]"
+        @click.prevent="handleClick">
+        <slot></slot>
+        <span v-if="isDownloading" class="spinner"></span>
+      </a>
     </span>
-</template>
+  </template>
 
   <script>
   export default {
@@ -22,6 +25,11 @@
             default: ''
         }
     },
+    data() {
+        return {
+            isDownloading: false
+        };
+    },
     methods: {
         async download() {
             fetch(this.url, {
@@ -56,6 +64,7 @@
             });
         },
         handleClick(){
+            this.isDownloading = true;
             if(window.LARAVEL_VAPOR_ENABLED){
                 this.submit(this.url, 'get', this.section, false, false);
             }
@@ -68,7 +77,6 @@
             }
         },
         successHandler(response) {
-
             if(window.LARAVEL_VAPOR_ENABLED){
                 if (response.payload !== undefined && response.payload.src) {
                     window.open(response.payload.src, '_blank');
@@ -78,7 +86,46 @@
                     window.open(response.src, '_blank');
                 }
             }
+            this.isDownloading = false;
+        },
+        errorHandler(error) {
+            this.isDownloading = false;
         },
     },
   };
   </script>
+<style scoped>
+    /* .a-link {
+        display: inline-block;
+        transition: transform 0.3s ease-in-out;
+        position: relative;
+    } */
+
+    .spinner {
+        border: 2px solid rgba(0, 0, 0, 0.1);
+        border-left-color: #000;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        animation: spin 1s linear infinite;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    @keyframes spin {
+        0% {
+            transform: translate(-50%, -50%) rotate(0deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(360deg);
+        }
+    }
+
+    .link-disabled {
+        pointer-events: none;
+        opacity: 0.6;
+        border: none;
+    }
+</style>