🛠️: refactor FormRulesEdit to typeScript and import missing compo…

…nents

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

@@ -1,27 +1,37 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import RuleCollectionBuilder from "components/RuleCollectionBuilder";
-import RulesDisplay from "components/RulesDisplay/RulesDisplay";
+import { BButton, BModal } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
+import { type HDCADetailed } from "@/api";
 import { fetchCollectionDetails } from "@/api/datasetCollections";
 
+import RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
+import RulesDisplay from "@/components/RulesDisplay/RulesDisplay.vue";
+
 library.add(faEdit);
 
-const props = defineProps({
+interface Props {
     value: {
-        type: Object,
-    },
+        rules: any[];
+        mapping: any[];
+    };
     target: {
-        type: Object,
-        default: null,
-    },
-});
+        id: string;
+    };
+}
+
+const props = defineProps<Props>();
 
-const modal = ref(null);
-const elements = ref(null);
+const emit = defineEmits<{
+    // TODO: Define the correct type for the value
+    (e: "input", value: any): void;
+}>();
+
+const modal = ref<BModal>();
+const elements = ref<HDCADetailed>();
 
 const initialRules = {
     rules: [],
@@ -34,41 +44,46 @@ async function onEdit() {
     if (props.target) {
         try {
             const collectionDetails = await fetchCollectionDetails({ id: props.target.id });
+
             elements.value = collectionDetails;
-            modal.value.show();
+
+            modal.value?.show();
         } catch (e) {
             console.error(e);
             console.log("problem fetching collection");
         }
     } else {
-        modal.value.show();
+        modal.value?.show();
     }
 }
 
-const emit = defineEmits(["input"]);
+// TODO: Define the correct type for the rules
+function onSaveRules(rules: any) {
+    modal.value?.hide();
 
-function onSaveRules(rules) {
-    modal.value.hide();
     emit("input", rules);
 }
 
 function onCancel() {
-    modal.value.hide();
+    modal.value?.hide();
 }
 </script>
 
 <template>
     <div class="form-rules-edit">
         <RulesDisplay :input-rules="displayRules" />
-        <b-button title="Edit Rules" @click="onEdit">
-            <FontAwesomeIcon icon="fa-edit" />
+
+        <BButton title="Edit Rules" @click="onEdit">
+            <FontAwesomeIcon :icon="faEdit" />
+
             <span>Edit</span>
-        </b-button>
+        </BButton>
 
-        <b-modal ref="modal" modal-class="ui-form-rules-edit-modal" hide-footer>
+        <BModal 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>
             </template>
+
             <RuleCollectionBuilder
                 elements-type="collection_contents"
                 import-type="collections"
@@ -77,7 +92,7 @@ function onCancel() {
                 :save-rules-fn="onSaveRules"
                 :oncancel="onCancel"
                 :oncreate="() => {}" />
-        </b-modal>
+        </BModal>
     </div>
 </template>