Merge pull request #19827 from jmchilton/user_feedback_apply_rules

More user feedback in FormRulesEdit (for Apply Rules tool)

Author: mvdbeek

client/src/components/Form/Elements/FormRulesEdit.vue

@@ -2,11 +2,14 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert } from "bootstrap-vue";
+import LoadingSpan from "components/LoadingSpan";
 import RuleCollectionBuilder from "components/RuleCollectionBuilder";
 import RulesDisplay from "components/RulesDisplay/RulesDisplay";
 import { computed, ref } from "vue";
 
 import { fetchCollectionDetails } from "@/api/datasetCollections";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 library.add(faEdit);
 
@@ -22,6 +25,8 @@ const props = defineProps({
 
 const modal = ref(null);
 const elements = ref(null);
+const loading = ref(false);
+const loadError = ref();
 
 const initialRules = {
     rules: [],
@@ -33,12 +38,17 @@ const displayRules = computed(() => props.value ?? initialRules);
 async function onEdit() {
     if (props.target) {
         try {
+            loading.value = true;
+            loadError.value = undefined;
             const collectionDetails = await fetchCollectionDetails({ id: props.target.id });
             elements.value = collectionDetails;
             modal.value.show();
         } catch (e) {
+            loadError.value = errorMessageAsString(e);
             console.error(e);
             console.log("problem fetching collection");
+        } finally {
+            loading.value = false;
         }
     } else {
         modal.value.show();
@@ -64,7 +74,10 @@ function onCancel() {
             <FontAwesomeIcon icon="fa-edit" />
             <span>Edit</span>
         </b-button>
-
+        <LoadingSpan v-if="loading" message="Loading collection details"> </LoadingSpan>
+        <BAlert v-if="loadError" show variant="danger" dismissible @dismissed="loadError = undefined">
+            {{ loadError }}
+        </BAlert>
         <b-modal ref="modal" modal-class="ui-form-rules-edit-modal" hide-footer>
             <template v-slot:modal-title>
                 <h2 class="mb-0">Build Rules for Applying to Existing Collection</h2>