fixes typescript errors #209

archesproject · Feb 19, 2025 · 7fa5d39 · 7fa5d39
1 parent 167bd34
commit 7fa5d39
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 49 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -16,8 +16,9 @@ import { upsertLingoTile } from "@/arches_lingo/api.ts";
 
 import { EDIT } from "@/arches_lingo/constants.ts";
 
-import { deepEqual } from "@/arches_lingo/utils.ts";
+import { checkDeepEquality } from "@/arches_lingo/utils.ts";
 
+import type { FormSubmitEvent } from "@primevue/forms";
 import type { AppellativeStatus } from "@/arches_lingo/types.ts";
 
 const props = withDefaults(
@@ -32,36 +33,51 @@ const props = withDefaults(
 const route = useRoute();
 const { $gettext } = useGettext();
 
-const formRef = useTemplateRef("formRef");
+// this is to compensate for the of a Form type in the primevue/forms module
+interface FormInstance {
+    fields: Record<
+        string,
+        {
+            options: { name: string };
+            states: { value: unknown };
+        }
+    >;
+}
+
+const formRef = useTemplateRef<FormInstance>("formRef");
 const formKey = ref(0);
 
 const isFormDirty = computed(() => {
     if (!formRef.value) return false;
 
     return Object.values(formRef.value.fields).some((fieldData) => {
-        return !deepEqual(
-            props.value[fieldData.options.name],
+        return !checkDeepEquality(
+            props.value[fieldData.options.name as keyof AppellativeStatus],
             fieldData.states.value,
         );
     });
 });
 
-async function save(e) {
+async function save(e: FormSubmitEvent) {
     upsertLingoTile(
         "scheme",
         "appellative_status",
         {
             resourceinstance: route.params.id as string,
-            ...Object.entries(e.states).reduce((acc, [key, state]) => {
-                acc[key] = state.value;
-                return acc;
-            }, {}),
+            ...Object.entries(e.states).reduce(
+                (acc, [key, state]) => {
+                    acc[key] = state.value;
+                    return acc;
+                },
+                {} as Record<string, unknown>,
+            ),
+            tileid: props.value.tileid,
         },
         props.value.tileid,
     );
 }
 
-function resetForm() {
+function reset() {
     formKey.value += 1;
 }
 </script>
@@ -72,7 +88,7 @@ function resetForm() {
         ref="formRef"
         :key="formKey"
         @submit="save"
-        @reset="resetForm"
+        @reset="reset"
     >
         <NonLocalizedStringWidget
             graph-slug="scheme"
@@ -149,15 +165,17 @@ function resetForm() {
             :mode="EDIT"
         />
 
-        <template v-if="isFormDirty">
+        <div style="display: flex">
             <Button
                 :label="$gettext('Update')"
                 type="submit"
+                :disabled="!isFormDirty"
             />
             <Button
                 :label="$gettext('Reset')"
                 type="reset"
+                :disabled="!isFormDirty"
             />
-        </template>
+        </div>
     </Form>
 </template>
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
@@ -1,13 +1,15 @@
-import type { Ref } from "vue";
-import type { TreeNode } from "primevue/treenode";
-import type { Label } from "@/arches_vue_utils/types.ts";
-import type { EDIT, VIEW } from "./constants";
 import SchemeNamespace from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue";
 import SchemeLabel from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue";
 import SchemeLicense from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLicense.vue";
 import SchemeStandard from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue";
 import SchemeNote from "@/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue";
 
+import type { Ref } from "vue";
+import type { TreeNode } from "primevue/treenode";
+import type { Label } from "@/arches_vue_utils/types.ts";
+import type { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+import type { ControlledListItem } from "@/arches_controlled_lists/types.ts";
+
 export interface User {
     first_name: string;
     last_name: string;
@@ -50,15 +52,6 @@ export interface ControlledListItemLabelValue {
     list_item_id: string;
 }
 
-export interface ControlledListItem {
-    item_id?: string;
-    list_id: string;
-    uri: string;
-    sortorder?: number;
-    guide?: boolean;
-    labels: ControlledListItemLabelValue[];
-}
-
 export interface ControlledListItemResult {
     id?: string;
     list_id: string;

diff --git a/arches_lingo/src/arches_lingo/utils.ts b/arches_lingo/src/arches_lingo/utils.ts
@@ -101,35 +101,36 @@ export function treeFromSchemes(
     return reshapedSchemes;
 }
 
-export function deepEqual(firstItem, secondItem) {
-    if (firstItem === secondItem) return true;
-
-    if (
-        typeof firstItem !== "object" ||
-        firstItem === null ||
-        typeof secondItem !== "object" ||
-        secondItem === null
-    ) {
-        return false;
+export function checkDeepEquality(
+    firstValue: unknown,
+    secondValue: unknown,
+): boolean {
+    if (firstValue === secondValue) {
+        return true;
     }
 
-    const aIsArray = Array.isArray(firstItem);
-    const bIsArray = Array.isArray(secondItem);
-    if (aIsArray !== bIsArray) return false;
+    const firstValueIsArray = Array.isArray(firstValue);
+    const secondValueIsArray = Array.isArray(secondValue);
 
-    const keysA = Object.keys(firstItem);
-    const keysB = Object.keys(secondItem);
-
-    if (keysA.length !== keysB.length) return false;
+    if (firstValueIsArray !== secondValueIsArray) {
+        return false;
+    }
 
-    for (const key of keysA) {
-        if (
-            !keysB.includes(key) ||
-            !deepEqual(firstItem[key], secondItem[key])
-        ) {
+    if (firstValueIsArray && secondValueIsArray) {
+        if (firstValue.length !== secondValue.length) {
             return false;
         }
+        return firstValue.every((element, index) =>
+            checkDeepEquality(element, secondValue[index]),
+        );
     }
 
-    return true;
+    const firstObject = firstValue as Record<string, unknown>;
+    const secondObject = secondValue as Record<string, unknown>;
+
+    return Object.keys(firstObject).every(
+        (objectKey) =>
+            objectKey in secondObject &&
+            checkDeepEquality(firstObject[objectKey], secondObject[objectKey]),
+    );
 }