- Fix so that the Obsidian Data View Filter shows a value selector correctly.

Author: nairdo

Rock.JavaScript.Obsidian/Framework/FieldTypes/dataViewsField.partial.ts

@@ -37,7 +37,7 @@ import { defineAsyncComponent } from "@Obsidian/Utility/component";
 import { FieldTypeBase } from "./fieldType";
 
 export const enum ConfigurationValueKey {
-    EntityTypeName = "entityTypeName"
+    EntityType = "entityType"
 }
 
 // The edit component can be quite large, so load it only as needed.
@@ -69,4 +69,4 @@ export class DataViewsFieldType extends FieldTypeBase {
     public override isFilterable(): boolean {
         return false;
     }
-}
+}

Rock.JavaScript.Obsidian/Framework/FieldTypes/dataViewsFieldComponents.ts

@@ -17,13 +17,14 @@ export const EditComponent = defineComponent({
     setup(props, { emit }) {
         const internalValue = ref({} as ListItemBag);
 
+        // The selected Entity Type.
         const entityTypeGuid = computed((): string | null | undefined => {
-            const entityType = JSON.parse(props.configurationValues[ConfigurationValueKey.EntityTypeName] ?? "{}") as ListItemBag;
+            const entityType = JSON.parse(props.configurationValues[ConfigurationValueKey.EntityType] ?? "{}") as ListItemBag;
             return entityType?.value;
         });
 
         watch(() => props.modelValue, () => {
-            internalValue.value = JSON.parse(props.modelValue || "{}");
+            internalValue.value = JSON.parse(props.modelValue || "null");
         }, { immediate: true });
 
         watch(() => internalValue.value, () => {
@@ -56,7 +57,31 @@ export const ConfigurationComponent = defineComponent({
     ],
 
     setup(props, { emit }) {
-        const entityType = ref({} as ListItemBag);
+        const entityType = ref<ListItemBag>();
+
+        // Compute a consistent entity type string value to compare against.
+        const entityTypeStringFromProps = computed((): string => {
+            const propsString = props.modelValue[ConfigurationValueKey.EntityType];
+            if (!propsString) {
+                return "{}";
+            }
+
+            try {
+                // It's possible for propsString to be "null", in which case we
+                // want to default to an empty object for consistent comparison.
+                return JSON.stringify(
+                    JSON.parse(propsString) ?? {}
+                );
+            }
+            catch {
+                return "{}";
+            }
+        });
+
+        // Compute a consistent entity type object value to compare against.
+        const entityTypeFromProps = computed((): ListItemBag => {
+            return JSON.parse(entityTypeStringFromProps.value);
+        });
 
         /**
          * Update the modelValue property if any value of the dictionary has
@@ -71,10 +96,10 @@ export const ConfigurationComponent = defineComponent({
 
             // Construct the new value that will be emitted if it is different
             // than the current value.
-            newValue[ConfigurationValueKey.EntityTypeName] = JSON.stringify(entityType.value ?? "");
+            newValue[ConfigurationValueKey.EntityType] = JSON.stringify(entityType.value ?? {});
 
             // Compare the new value and the old value.
-            const anyValueChanged = newValue[ConfigurationValueKey.EntityTypeName] !== (props.modelValue[ConfigurationValueKey.EntityTypeName] ?? "");
+            const anyValueChanged = newValue[ConfigurationValueKey.EntityType] !== entityTypeStringFromProps.value;
 
             // If any value changed then emit the new model value.
             if (anyValueChanged) {
@@ -102,12 +127,12 @@ export const ConfigurationComponent = defineComponent({
         // Watch for changes coming in from the parent component and update our
         // data to match the new information.
         watch(() => [props.modelValue, props.configurationProperties], () => {
-            entityType.value = JSON.parse(props.modelValue[ConfigurationValueKey.EntityTypeName] || "{}");
+            entityType.value = entityTypeFromProps.value;
         }, {
             immediate: true
         });
 
-        watch(entityType, val => maybeUpdateConfiguration(ConfigurationValueKey.EntityTypeName, JSON.stringify(val ?? "")));
+        watch(entityType, () => maybeUpdateConfiguration(ConfigurationValueKey.EntityType, JSON.stringify(entityType.value ?? {})));
 
         return {
             entityType
@@ -119,4 +144,4 @@ export const ConfigurationComponent = defineComponent({
     <EntityTypePicker label="Entity Type" v-model="entityType" help="The type of entity to display data views for." />
 </div>
     `
-});
+});