Allow collections with the same name

components/InputSelect/CollectionSelection.tsx

@@ -10,11 +10,11 @@ type Props = {
   onChange: any;
   showDefaultValue?: boolean;
   defaultValue?:
-    | {
-        label: string;
-        value?: number;
-      }
-    | undefined;
+  | {
+    label: string;
+    value?: number;
+  }
+  | undefined;
   creatable?: boolean;
 };
 
@@ -44,12 +44,54 @@ export default function CollectionSelection({
 
   useEffect(() => {
     const formatedCollections = collections.map((e) => {
-      return { value: e.id, label: e.name, ownerId: e.ownerId };
+      return { value: e.id, label: e.name, ownerId: e.ownerId, count: e._count, parentId: e.parentId };
     });
 
     setOptions(formatedCollections);
   }, [collections]);
 
+  const getParentNames = (parentId: number): string[] => {
+    const parentNames = [];
+    const parent = collections.find((e) => e.id === parentId);
+
+    if (parent) {
+      parentNames.push(parent.name);
+      if (parent.parentId) {
+        parentNames.push(...getParentNames(parent.parentId));
+      }
+    }
+
+    // Have the top level parent at beginning
+    return parentNames.reverse();
+  }
+
+  const customOption = ({ data, innerProps }: any) => {
+    return (
+      <div
+        {...innerProps}
+        className='px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-primary/20 cursor-pointer'
+      >
+        <div className="flex w-full justify-between items-center">
+          <span>
+            {data.label}
+          </span>
+          <span>
+            {data.count?.links}
+          </span>
+        </div>
+        <div className="text-xs text-gray-600 dark:text-gray-300">
+          {getParentNames(data?.parentId).length > 0 ? (
+            <>
+              {getParentNames(data.parentId).join(' > ')} {'>'} {data.label}
+            </>
+          ) : (
+            data.label
+          )}
+        </div>
+      </div>
+    );
+  };
+
   if (creatable) {
     return (
       <CreatableSelect
@@ -60,7 +102,10 @@ export default function CollectionSelection({
         options={options}
         styles={styles}
         defaultValue={showDefaultValue ? defaultValue : null}
-        // menuPosition="fixed"
+        components={{
+          Option: customOption,
+        }}
+      // menuPosition="fixed"
       />
     );
   } else {
@@ -73,7 +118,7 @@ export default function CollectionSelection({
         options={options}
         styles={styles}
         defaultValue={showDefaultValue ? defaultValue : null}
-        // menuPosition="fixed"
+      // menuPosition="fixed"
       />
     );
   }