Build arg setter for position (#4396)

* Build arg setter for position

* Build separated query factory + rename existing

* Sort record by position in front

* Add tests

* Set first for type board

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useSetRecordBoardRecordIds.ts

@@ -28,6 +28,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
 
           const columnRecordIds = records
             .filter((record) => record.stage === column?.value)
+            .sort(sortRecordsByPosition)
             .map((record) => record.id);
 
           if (!isDeeplyEqual(existingColumnRecordIds, columnRecordIds)) {
@@ -43,3 +44,21 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
     setRecordIds,
   };
 };
+
+const sortRecordsByPosition = (
+  record1: ObjectRecord,
+  record2: ObjectRecord,
+) => {
+  if (
+    typeof record1.position == 'number' &&
+    typeof record2.position == 'number'
+  ) {
+    return record1.position - record2.position;
+  } else if (record1.position === 'first' || record2.position === 'last') {
+    return -1;
+  } else if (record2.position === 'first' || record1.position === 'last') {
+    return 1;
+  } else {
+    return 0;
+  }
+};

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewButton.tsx

@@ -32,6 +32,7 @@ export const RecordBoardColumnNewButton = () => {
   const onNewClick = () => {
     createOneRecord({
       [selectFieldMetadataItem.name]: columnDefinition.value,
+      position: 'last',
     });
   };
 

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx

@@ -52,6 +52,7 @@ export const RecordBoardColumnNewOpportunityButton = () => {
     createOneRecord({
       name: company.name,
       companyId: company.id,
+      position: 'last',
       [selectFieldMetadataItem.name]: columnDefinition.value,
     });
   };