Add spinner to CInputCofirm and apply necessary changes to all webapps

cortezaproject · Oct 5, 2023 · e68ebeb · e68ebeb
1 parent 38580e5
commit e68ebeb
Show file tree

Hide file tree

Showing 61 changed files with 408 additions and 365 deletions.
diff --git a/client/web/admin/src/components/Apigw/CFiltersTable.vue b/client/web/admin/src/components/Apigw/CFiltersTable.vue
@@ -49,6 +49,7 @@
               />
             </b-button>
             <c-input-confirm
+              is-icon-visible
               class="ml-1"
               @confirmed="onRemoveFilter(filter)"
               @click.stop

diff --git a/client/web/admin/src/components/Apigw/CRouteList.vue b/client/web/admin/src/components/Apigw/CRouteList.vue
@@ -117,26 +117,16 @@
 
           <c-input-confirm
             v-if="r.canDeleteApigwRoute"
+            :text="inputConfirmText(r.deletedAt)"
+            is-icon-visible
             borderless
             variant="link"
             size="md"
+            icon-class="text-danger"
             button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
             class="w-100"
             @confirmed="handleDelete(r)"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-              class="text-danger"
-            />
-            <span
-              v-if="!r.deletedAt"
-              class="p-1"
-            >{{ $t('delete') }}</span>
-            <span
-              v-else
-              class="p-1"
-            >{{ $t('undelete') }}</span>
-          </c-input-confirm>
+          />
         </b-dropdown>
       </template>
     </c-resource-list>
@@ -240,6 +230,10 @@ export default {
         locale: 'gateway',
       })
     },
+
+    inputConfirmText (deletedAt) {
+      return deletedAt ? this.$t('undelete') : this.$t('delete')
+    },
   },
 }
 </script>
diff --git a/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue b/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue
@@ -34,12 +34,11 @@
 
         <c-input-confirm
           :disabled="!items.length"
-          :borderless="false"
+          :processing="processingConfirm"
+          :text="$t('purge.this')"
           variant="danger"
           @confirmed="purgeRequests"
-        >
-          {{ $t('purge.this') }}
-        </c-input-confirm>
+        />
       </div>
     </template>
 
@@ -127,6 +126,8 @@ export default {
 
   data () {
     return {
+      processingConfirm: false,
+
       filter: {
         routeID: '',
         next: '',
@@ -254,13 +255,18 @@ export default {
     },
 
     purgeRequests () {
+      this.processingConfirm = false
+
       const { routeID } = this.filter
       this.$SystemAPI.apigwProfilerPurge({ routeID })
         .then(() => {
           this.loadItems()
           this.toastSuccess(this.$t('notification:gateway.profiler.purge.success'))
         })
         .catch(this.toastErrorHandler(this.$t('notification:gateway.profiler.purge.error')))
+        .finally(() => {
+          this.processingConfirm = true
+        })
     },
 
     resetItems (sorting = this.sorting) {

diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
@@ -35,6 +35,7 @@
           <c-input-confirm
             data-test-id="button-remove-role"
             no-prompt
+            is-icon-visible
             @confirmed="removeRole(role)"
           />
         </b-col>

diff --git a/client/web/admin/src/components/Connection/CExternalConnectionList.vue b/client/web/admin/src/components/Connection/CExternalConnectionList.vue
@@ -74,29 +74,16 @@
           </template>
 
           <c-input-confirm
+            :text="inputConfirmText(c.deletedAt)"
+            is-icon-visible
             borderless
             variant="link"
             size="md"
+            icon-class="text-danger"
             button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
             class="w-100"
             @confirmed="handleDelete(c)"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-              class="text-danger"
-            />
-            <span
-              v-if="!c.deletedAt"
-              class="p-1"
-            >{{ $t('delete') }}
-            </span>
-
-            <span
-              v-else
-              class="p-1"
-            >{{ $t('undelete') }}
-            </span>
-          </c-input-confirm>
+          />
         </b-dropdown>
       </template>
     </c-resource-list>
@@ -187,6 +174,10 @@ export default {
         locale: 'connection',
       })
     },
+
+    inputConfirmText (deletedAt) {
+      return deletedAt ? this.$t('undelete') : this.$t('delete')
+    },
   },
 }
 </script>
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -38,6 +38,7 @@
               <td class="text-right">
                 <c-input-confirm
                   data-test-id="button-remove-member"
+                  is-icon-visible
                   no-prompt
                   @confirmed="removeMember(user.userID)"
                 />

diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -33,14 +33,14 @@
 
         <c-input-confirm
           v-if="uploadedAvatar('avatar') && isKindAvatar"
+          :processing="processingConfirm"
+          :text="$t('general:label.delete')"
           size="lg"
           size-confirm="lg"
           variant="danger"
           class="ml-2 h-100"
           @confirmed="$emit('resetAttachment', 'avatar')"
-        >
-          {{ $t('general:label.delete') }}
-        </c-input-confirm>
+        />
       </div>
 
       <div class="form-row mt-3">
@@ -113,12 +113,14 @@ export default {
 
     processing: {
       type: Boolean,
-      value: false,
+    },
+
+    processingConfirm: {
+      type: Boolean,
     },
 
     success: {
       type: Boolean,
-      value: false,
     },
   },
 

diff --git a/client/web/admin/src/mixins/listHelpers.js b/client/web/admin/src/mixins/listHelpers.js
@@ -205,6 +205,7 @@ export default {
 
     handleItemDelete ({ resource, resourceName, locale, api = 'system' }) {
       this.incLoader()
+
       const { deletedAt = '' } = resource
       const method = deletedAt ? `${resourceName}Undelete` : `${resourceName}Delete`
       const event = deletedAt ? 'undelete' : 'delete'

diff --git a/client/web/admin/src/views/Automation/Workflow/List.vue b/client/web/admin/src/views/Automation/Workflow/List.vue
@@ -111,44 +111,18 @@
           </b-dropdown-item>
 
           <c-input-confirm
-            v-if="w.canDeleteWorkflow && !w.deletedAt"
+            v-if="(w.canDeleteWorkflow && !w.deletedAt) || (w.canUndeleteWorkflow && w.deletedAt)"
+            :text="inputConfirmText(w.deletedAt)"
+            is-icon-visible
             borderless
             variant="link"
             size="md"
+            text-class="p-1"
+            icon-class="text-danger"
             button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
             class="w-100"
             @confirmed="handleDelete(w)"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-              class="text-danger"
-            />
-            <span
-              class="p-1"
-            >
-              {{ $t('delete') }}
-            </span>
-          </c-input-confirm>
-
-          <c-input-confirm
-            v-if="w.canUndeleteWorkflow && w.deletedAt"
-            borderless
-            variant="link"
-            size="md"
-            button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            class="w-100"
-            @confirmed="handleDelete(w)"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-              class="text-danger"
-            />
-            <span
-              class="p-1"
-            >
-              {{ $t('undelete') }}
-            </span>
-          </c-input-confirm>
+          />
         </b-dropdown>
       </template>
     </c-resource-list>
@@ -251,6 +225,10 @@ export default {
         api: 'automation',
       })
     },
+
+    inputConfirmText (deletedAt) {
+      return deletedAt ? this.$t('undelete') : this.$t('delete')
+    },
   },
 }
 </script>
diff --git a/client/web/admin/src/views/System/Apigw/Profiler/Index.vue b/client/web/admin/src/views/System/Apigw/Profiler/Index.vue
@@ -43,12 +43,11 @@
 
           <c-input-confirm
             :disabled="!items.length"
-            :borderless="false"
+            :processing="processingConfirm"
+            :text="$t('purge.all')"
             variant="danger"
             @confirmed="purgeRequests"
-          >
-            {{ $t('purge.all') }}
-          </c-input-confirm>
+          />
         </div>
       </template>
 
@@ -116,6 +115,8 @@ export default {
     return {
       id: 'routes',
 
+      processingConfirm: false,
+
       filter: {
         next: '',
         before: '',
@@ -255,12 +256,16 @@ export default {
     },
 
     purgeRequests () {
+      this.processingConfirm = true
       this.$SystemAPI.apigwProfilerPurgeAll()
         .then(() => {
           this.loadItems()
           this.toastSuccess(this.$t('notification:gateway.profiler.purge.success'))
         })
         .catch(this.toastErrorHandler(this.$t('notification:gateway.profiler.purge.error')))
+        .finally(() => {
+          this.processingConfirm = false
+        })
     },
 
     resetItems (sorting = this.sorting) {

diff --git a/client/web/admin/src/views/System/Application/List.vue b/client/web/admin/src/views/System/Application/List.vue
@@ -113,26 +113,16 @@
 
           <c-input-confirm
             v-if="a.canDeleteApplication"
+            :text="inputConfirmText(a.deletedAt)"
+            is-icon-visible
             borderless
             variant="link"
             size="md"
+            icon-class="text-danger"
             button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
             class="w-100"
             @confirmed="handleDelete(a)"
-          >
-            <font-awesome-icon
-              :icon="['far', 'trash-alt']"
-              class="text-danger"
-            />
-            <span
-              v-if="!a.deletedAt"
-              class="p-1"
-            >{{ $t('delete') }}</span>
-            <span
-              v-else
-              class="p-1"
-            >{{ $t('undelete') }}</span>
-          </c-input-confirm>
+          />
         </b-dropdown>
       </template>
     </c-resource-list>
@@ -237,6 +227,10 @@ export default {
         resourceName: 'application',
       })
     },
+
+    inputConfirmText (deletedAt) {
+      return deletedAt ? this.$t('undelete') : this.$t('delete')
+    },
   },
 }
 </script>
diff --git a/client/web/admin/src/views/System/AuthClient/List.vue b/client/web/admin/src/views/System/AuthClient/List.vue
@@ -105,31 +105,16 @@
             link-class="p-0"
           >
             <c-input-confirm
+              :text="inputConfirmText(a.deletedAt)"
+              is-icon-visible
               borderless
               variant="link"
               size="md"
+              icon-class="text-danger"
               button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
               class="w-100"
               @confirmed="handleDelete(a)"
-            >
-              <font-awesome-icon
-                :icon="['far', 'trash-alt']"
-                class="text-danger"
-              />
-              <span
-                v-if="!a.deletedAt"
-                class="p-1"
-              >
-                {{ $t('delete') }}
-              </span>
-
-              <span
-                v-else
-                class="p-1"
-              >
-                {{ $t('undelete') }}
-              </span>
-            </c-input-confirm>
+            />
           </b-dropdown-item>
         </b-dropdown>
       </template>
@@ -232,6 +217,9 @@ export default {
       })
     },
 
+    inputConfirmText (deletedAt) {
+      return deletedAt ? this.$t('undelete') : this.$t('delete')
+    },
   },
 }
 </script>