Resolve "Add UI for viewing and managing Resources"

Closes #88 (closed)

src/components/parameter-schema/form-mode/ParameterGroupForm.vue

@@ -65,7 +65,6 @@ function parameterRequired(
 watch(
   formInput,
   (newVal) => {
-    //console.log("Group", props.parameterGroupName, newVal);
     emit("update:modelValue", newVal);
   },
   {
@@ -87,14 +86,12 @@ watch(
         :key="parameterName"
       >
         <div :hidden="!showHidden && parameter['hidden']">
+          <code class="bg-secondary-subtle p-2 rounded-top"
+            >--{{ parameter["name"] ?? parameterName }}</code
+          >
           <div class="input-group">
-            <span class="input-group-text" :id="parameterName + '-help'">
-              <font-awesome-icon
-                class="me-2"
-                :icon="parameter['fa_icon']"
-                v-if="parameter['fa_icon']"
-              />
-              <code>--{{ parameterName }}</code>
+            <span class="input-group-text" v-if="parameter['fa_icon']">
+              <font-awesome-icon :icon="parameter['fa_icon']" />
             </span>
             <parameter-number-input
               v-if="
@@ -146,9 +143,11 @@ watch(
               class="input-group-text cursor-pointer px-2"
               v-if="parameter['help_text']"
               data-bs-toggle="collapse"
-              :data-bs-target="'#helpCollapse' + parameterName"
+              :data-bs-target="
+                '#helpCollapse' + parameterName.replace(/\./g, '')
+              "
               aria-expanded="false"
-              :aria-controls="'helpCollapse' + parameterName"
+              :aria-controls="'helpCollapse' + parameterName.replace(/\./g, '')"
             >
               <font-awesome-icon
                 class="cursor-pointer"
@@ -161,7 +160,7 @@ watch(
           </label>
           <div
             class="collapse"
-            :id="'helpCollapse' + parameterName"
+            :id="'helpCollapse' + parameterName.replace(/\./g, '')"
             v-if="parameter['help_text']"
           >
             <div class="p-2 pb-0 mx-2 mb-2 mt-1 flex-shrink-1 border rounded">