[#3372] fixed Admin UI listing error on invalid record relation

ui/src/components/records/RecordFieldValue.svelte

@@ -11,7 +11,7 @@
     export let field;
     export let short = false;
 
-    $: rawValue = record[field.name];
+    $: rawValue = record?.[field.name];
 </script>
 
 {#if field.type === "json"}
@@ -83,7 +83,7 @@
     </div>
 {:else if field.type === "relation"}
     {@const relations = CommonHelper.toArray(rawValue)}
-    {@const expanded = CommonHelper.toArray(record.expand[field.name])}
+    {@const expanded = CommonHelper.toArray(record?.expand?.[field.name])}
     {@const relLimit = short ? 20 : 500}
     <div class="inline-flex">
         {#if expanded.length}

ui/src/components/records/fields/RelationField.svelte

@@ -18,6 +18,8 @@
     let list = [];
     let isLoading = false;
     let loadTimeoutId;
+    let invalidIds = [];
+    let originalValue = value;
 
     $: isMultiple = field.options?.maxSelect != 1;
 
@@ -35,6 +37,8 @@
         loadTimeoutId = setTimeout(load, 0);
     }
 
+    $: invalidIds = CommonHelper.toArray(originalValue).filter((id) => !list.find((item) => item.id == id));
+
     function needLoad() {
         if (isLoading) {
             return false;
@@ -131,6 +135,17 @@
     <label for={uniqueId}>
         <i class={CommonHelper.getFieldTypeIcon(field.type)} />
         <span class="txt">{field.name}</span>
+        {#if invalidIds.length}
+            <i
+                class="ri-error-warning-line link-hint m-l-auto flex-order-10"
+                use:tooltip={{
+                    position: "left",
+                    text:
+                        "The following relation ids were removed from the list because they are missing or invalid: " +
+                        invalidIds.join(", "),
+                }}
+            />
+        {/if}
     </label>
 
     <div class="list">