synced with master

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,7 @@
     let list = [];
     let isLoading = false;
     let loadTimeoutId;
+    let invalidIds = [];
 
     $: isMultiple = field.options?.maxSelect != 1;
 
@@ -50,7 +51,9 @@
     async function load() {
         const ids = CommonHelper.toArray(value);
 
-        list = []; // reset
+        // reset
+        list = [];
+        invalidIds = [];
 
         if (!field?.options?.collectionId || !ids.length) {
             isLoading = false;
@@ -87,6 +90,8 @@
                 const rel = CommonHelper.findByKey(loadedItems, "id", id);
                 if (rel) {
                     list.push(rel);
+                } else {
+                    invalidIds.push(id);
                 }
             }
 
@@ -131,6 +136,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">

ui/src/scss/_base.scss

@@ -399,7 +399,7 @@ a,
     min-width: 0;
     gap: 10px;
 }
-@for $i from 0 through 6 {
+@for $i from 0 through 10 {
     .flex-order-#{$i} {
         order: $i;
     }