BC-9141 change order of room boards (#3940)

Highlights:

- added drag an drop to board items in room details page
- added moving boards by pressing arrow keys
- room details page changed layout to grid layout
- fixed bug, which caused a reload when hitting enter on the create room page
- removed feature flag for column board creation
- changed UX to use a button/the title to navigate, rather than the entire card
- reduced touch delay from 300 to 200 for most sortable occurences
- naming conventions corrected for room/board components
- utils for grid column detection added
- utils for default sortable-js options added
- color coding (surface + primary) optimized for contrast purposes

Author: luejoh

src/locales/de.ts

@@ -28,6 +28,7 @@ export default {
 	"common.actions.shareCopy": "Kopie teilen",
 	"common.actions.shareLink": "Link kopieren",
 	"common.actions.update": "Aktualisieren",
+	"common.actions.moved": "{elementName} wurde verschoben an Position {position}",
 	"common.ariaLabel.newTab": "öffnet in einem neuen Tab",
 	"common.ariaLabel.openImageInLightBox": "Bild in voller Größe anzeigen",
 	"common.ariaLabel.sameTab": "öffnet im selben Tab",
@@ -45,6 +46,7 @@ export default {
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Dokumente größer als {sizeInMb} können online nicht bearbeitet werden.",
 	"common.files": "Dateien",
+	"common.instructions.orderBy.arrowKeys": "Die Elemente dieser Liste können per Pfeiltaste verschoben werden.",
 	"common.labels.admin": "Admin(s)",
 	"common.labels.birthdate": "Geburtsdatum",
 	"common.labels.birthday": "Geburtsdatum",
@@ -456,6 +458,7 @@ export default {
 	"components.board.notifications.errors.notDeleted": "{type} konnte nicht gelöscht werden.",
 	"components.board.notifications.errors.notDuplicated": "{type} konnte nicht dupliziert werden.",
 	"components.board.notifications.errors.notLoaded": "{type} konnte nicht geladen werden.",
+	"components.board.notifications.errors.notMoved": "{type} konnte nicht verschoben werden.",
 	"components.board.notifications.errors.notUpdated": "Die Änderungen konnten nicht gespeichert werden.",
 	"components.board.notifications.info.cardDuplicated":
 		"Inhalte aus Etherpads und Whiteboards sowie geschützte Einstellungen externer Tools werden nicht übernommen.",
@@ -495,6 +498,7 @@ export default {
 		"Der Bereich wurde von einem anderen Benutzer für alle Benutzer als nicht bearbeitbar festgelegt.",
 	"components.board.preferredTools.notification.error.notLoaded": "Bevorzugte Tools konnten nicht geladen werden.",
 	"components.board.header.chip.editableForEveryone": "Für alle bearbeitbar",
+	"components.board": "Bereich",
 	"components.boardCard": "Karte",
 	"components.boardColumn": "Abschnitt",
 	"components.boardElement": "Element",
@@ -1489,7 +1493,6 @@ export default {
 	"pages.content.placeholder.noLessonTopic": "Lege ein Thema im Kurs an",
 	"pages.content.preview_img.alt": "Bildvorschau",
 	"pages.courseRoomDetails.fab.add.board": "Neuer Bereich",
-	"pages.courseRoomDetails.fab.add.columnBoard": "Neuer Bereich {'|'} mehrspaltig",
 	"pages.courseRoomDetails.fab.add.lesson": "Neues Thema",
 	"pages.courseRoomDetails.fab.add.task": "Neue Aufgabe",
 	"pages.courseRooms.groupName": "Kurse",
@@ -1532,6 +1535,7 @@ export default {
 	"pages.room.boardCard.label.columnBoard": "Bereich {'|'} mehrspaltig",
 	"pages.room.boardCard.label.courseBoard": "Kurs-Bereich",
 	"pages.room.boardCard.label.listBoard": "Bereich {'|'} einspaltig",
+	"pages.room.boardCard.label.openItem": "Öffnen",
 	"pages.room.boardCard.menu.ariaLabel": "Bereich-Menü",
 	"pages.room.cards.aria": "{itemType}, Link, zum Öffnen die Eingabetaste drücken",
 	"pages.room.cards.label.revert": "Zurück auf Entwurf",
@@ -1633,6 +1637,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Raum-Menü",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Raum bearbeiten",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Raum löschen",
+	"pages.roomDetails.fab.add.board": "Bereich erstellen",
 	"pages.roomDetails.board.defaultName": "Raum-Bereich",
 	"pages.roomDetails.emptyState": "Aktuell gibt es keine Lerninhalte in diesem Raum",
 	"pages.rooms.emptyState": "Aktuell gibt es keine Räume",

src/locales/en.ts

@@ -28,6 +28,7 @@ export default {
 	"common.actions.shareCopy": "Share copy",
 	"common.actions.shareLink": "Copy link",
 	"common.actions.update": "Update",
+	"common.actions.moved": "{elementName} was moved to position {position}",
 	"common.ariaLabel.newTab": "opens in a new tab",
 	"common.ariaLabel.openImageInLightBox": "Display image in full size",
 	"common.ariaLabel.sameTab": "opens in the same tab",
@@ -43,6 +44,7 @@ export default {
 	"common.file": "file",
 	"common.file.exceedsCollaboraEditableFileSize": "Documents larger than {sizeInMb} cannot be edited online.",
 	"common.files": "files",
+	"common.instructions.orderBy.arrowKeys": "The items in this list can be moved using the arrow keys.",
 	"common.labels.admin": "",
 	"common.labels.birthdate": "Date of birth",
 	"common.labels.birthday": "Date of Birth",
@@ -452,6 +454,7 @@ export default {
 	"components.board.notifications.errors.notDeleted": "{type} could not be deleted.",
 	"components.board.notifications.errors.notDuplicated": "{type} could not be duplicated.",
 	"components.board.notifications.errors.notLoaded": "{type} could not be loaded.",
+	"components.board.notifications.errors.notMoved": "{type} could not be moved.",
 	"components.board.notifications.errors.notUpdated": "Your changes could not be saved.",
 	"components.board.notifications.info.cardDuplicated":
 		"Content from Etherpads and whiteboards as well as protected settings from external tools will not be transferred.",
@@ -487,6 +490,7 @@ export default {
 		"The board was set as not editable for all users by another user.",
 	"components.board.preferredTools.notification.error.notLoaded": "Preferred tools could not be loaded.",
 	"components.board.header.chip.editableForEveryone": "Editable for everyone",
+	"components.board": "board",
 	"components.boardCard": "card",
 	"components.boardColumn": "column",
 	"components.boardElement": "element",
@@ -1467,7 +1471,6 @@ export default {
 	"pages.content.placeholder.noLessonTopic": "Create a topic in the course",
 	"pages.content.preview_img.alt": "Image preview",
 	"pages.courseRoomDetails.fab.add.board": "New board",
-	"pages.courseRoomDetails.fab.add.columnBoard": "New column board",
 	"pages.courseRoomDetails.fab.add.lesson": "New topic",
 	"pages.courseRoomDetails.fab.add.task": "New task",
 	"pages.courseRooms.groupName": "Courses",
@@ -1510,6 +1513,7 @@ export default {
 	"pages.room.boardCard.label.columnBoard": "Column Board",
 	"pages.room.boardCard.label.courseBoard": "Course Board",
 	"pages.room.boardCard.label.listBoard": "List Board",
+	"pages.room.boardCard.label.openItem": "Open",
 	"pages.room.boardCard.menu.ariaLabel": "Board menu",
 	"pages.room.cards.aria": "{itemType}, link, press enter to open",
 	"pages.room.cards.label.revert": "Revert to draft",
@@ -1612,6 +1616,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Room menu",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Edit room",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Delete room",
+	"pages.roomDetails.fab.add.board": "Add board",
 	"pages.roomDetails.board.defaultName": "Room Board",
 	"pages.roomDetails.emptyState": "Currently there is no learning content in this room",
 	"pages.rooms.emptyState": "Currently there are no rooms",

src/locales/es.ts

@@ -28,6 +28,7 @@ export default {
 	"common.actions.shareCopy": "Compartir copia",
 	"common.actions.shareLink": "Copiar enlace",
 	"common.actions.update": "Actualizar",
+	"common.actions.moved": "{elementName} se movió a la posición {position}",
 	"common.ariaLabel.newTab": "se abre en una nueva pestaña",
 	"common.ariaLabel.openImageInLightBox": "Mostrar imagen en tamaño completo",
 	"common.ariaLabel.sameTab": "se abre en la misma pestaña",
@@ -45,6 +46,7 @@ export default {
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Los documentos que superen los {sizeInMb} no se pueden editar en línea.",
 	"common.files": "Archivos",
+	"common.instructions.orderBy.arrowKeys": "Los elementos de esta lista se pueden mover con las teclas de flecha.",
 	"common.labels.admin": "Admin(s)",
 	"common.labels.birthdate": "Fecha de nacimiento",
 	"common.labels.birthday": "Fecha de nacimiento",
@@ -460,6 +462,7 @@ export default {
 	"components.board.notifications.errors.notDeleted": "{type} no se ha podido eliminar.",
 	"components.board.notifications.errors.notDuplicated": "{type} no se ha podido duplicar.",
 	"components.board.notifications.errors.notLoaded": "{type} no se ha podido cargar.",
+	"components.board.notifications.errors.notMoved": "{type} no se ha podido movido.",
 	"components.board.notifications.errors.notUpdated": "No se han podido guardar los cambios.",
 	"components.board.notifications.info.cardDuplicated":
 		"No se transferirán los contenidos de Etherpads y pizarras blancas, ni tampoco los ajustes protegidos de herramientas externas.",
@@ -495,6 +498,7 @@ export default {
 		"El tablero fue establecida como no editable para todos los usuarios por otro usuario.",
 	"components.board.preferredTools.notification.error.notLoaded": "No se pudieron cargar las herramientas preferidas.",
 	"components.board.header.chip.editableForEveryone": "Editable para todos",
+	"components.board": "tablero",
 	"components.boardCard": "tarjeta",
 	"components.boardColumn": "columna",
 	"components.boardElement": "elemento",
@@ -1500,7 +1504,6 @@ export default {
 	"pages.content.placeholder.noLessonTopic": "Crear un tema en el curso",
 	"pages.content.preview_img.alt": "Vista previa de la imagen",
 	"pages.courseRoomDetails.fab.add.board": "Nuevo tablero",
-	"pages.courseRoomDetails.fab.add.columnBoard": "Nuevo tablero de columna",
 	"pages.courseRoomDetails.fab.add.lesson": "Nuevo tema",
 	"pages.courseRoomDetails.fab.add.task": "Nuevo tarea",
 	"pages.courseRooms.groupName": "Cursos",
@@ -1543,6 +1546,7 @@ export default {
 	"pages.room.boardCard.label.columnBoard": "Tablero de columna",
 	"pages.room.boardCard.label.courseBoard": "Junta del curso",
 	"pages.room.boardCard.label.listBoard": "Tablero de listas",
+	"pages.room.boardCard.label.openItem": "Abrir",
 	"pages.room.boardCard.menu.ariaLabel": "Menú del tablero",
 	"pages.room.cards.aria": "{itemType}, enlace, presione Intro para abrir",
 	"pages.room.cards.label.revert": "Volver al borrador",
@@ -1646,6 +1650,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Menú de la sala",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Editar sala",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Borrar sala",
+	"pages.roomDetails.fab.add.board": "Añadir tablero",
 	"pages.roomDetails.board.defaultName": "Tablero de la sala",
 	"pages.roomDetails.emptyState": "Actualmente no hay contenidos de aprendizaje en esta sala",
 	"pages.rooms.emptyState": "Actualmente no hay salas",

src/locales/uk.ts

@@ -28,6 +28,7 @@ export default {
 	"common.actions.shareCopy": "Поділитися копією",
 	"common.actions.shareLink": "Копіювати посилання",
 	"common.actions.update": "Оновити",
+	"common.actions.moved": "{elementName} було переміщено на позицію {position}",
 	"common.ariaLabel.newTab": "відкривається в новій вкладці",
 	"common.ariaLabel.openImageInLightBox": "Показати зображення в повному розмірі",
 	"common.ariaLabel.sameTab": "відкривається в тій же вкладці",
@@ -44,6 +45,7 @@ export default {
 	"common.file": "Файл",
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Документи розміром більше {sizeInMb} не можуть бути оброблені онлайн.",
+	"common.instructions.orderBy.arrowKeys": "Елементи цього списку можна переміщати за допомогою клавіш зі стрілками.",
 	"common.files": "Файли",
 	"common.labels.admin": "адміністратор(и)",
 	"common.labels.birthdate": "Дата народження",
@@ -456,6 +458,7 @@ export default {
 	"components.board.notifications.errors.notDeleted": "{type}: Не вдалося видалити.",
 	"components.board.notifications.errors.notDuplicated": "{type} не вдалося дублікувати.",
 	"components.board.notifications.errors.notLoaded": "{type}: не вдалося завантажити.",
+	"components.board.notifications.errors.notMoved": "{type} не вдалося позицію.",
 	"components.board.notifications.errors.notUpdated": "Зберегти зміни не вдалося.",
 	"components.board.notifications.info.cardDuplicated":
 		"IВміст з Etherpads і Whiteboards, а також захищені налаштування зовнішніх інструментів не переносяться.",
@@ -490,6 +493,7 @@ export default {
 		"Дошку було встановлено як не редаговану для всіх користувачів іншим користувачем.",
 	"components.board.preferredTools.notification.error.notLoaded": "Не вдалося завантажити бажані інструменти.",
 	"components.board.header.chip.editableForEveryone": "Редагується для всіх",
+	"components.board": "Дошка",
 	"components.boardCard": "Картка",
 	"components.boardColumn": "Колонка",
 	"components.boardElement": "Eлемент",
@@ -1478,7 +1482,6 @@ export default {
 	"pages.courseRoomDetails.fab.add.lesson": "Створити тему",
 	"pages.courseRoomDetails.fab.add.task": "Створити завдання",
 	"pages.courseRoomDetails.fab.add.board": "Нова дошка",
-	"pages.courseRoomDetails.fab.add.columnBoard": "Нова дошка",
 	"pages.courseRooms.groupName": "Курси",
 	"pages.courseRooms.headerSection.archived": "Архів",
 	"pages.courseRooms.headerSection.menu.ariaLabel": "Меню курсу",
@@ -1519,6 +1522,7 @@ export default {
 	"pages.room.boardCard.label.columnBoard": "Колонна дошка",
 	"pages.room.boardCard.label.courseBoard": "Дошка оголошень",
 	"pages.room.boardCard.label.listBoard": "Список дошки оголошень",
+	"pages.room.boardCard.label.openItem": "Відкрити",
 	"pages.room.boardCard.menu.ariaLabel": "Меню форуму",
 	"pages.room.cards.aria": "{itemType}, посилання, натисніть Enter, щоб відкрити",
 	"pages.room.cards.label.revert": "Повернути до стану чернетки",
@@ -1621,6 +1625,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Меню кімнати",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Кімната редагування",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Видалити кімнату",
+	"pages.roomDetails.fab.add.board": "Додати дошку",
 	"pages.roomDetails.board.defaultName": "Космічна дошка",
 	"pages.roomDetails.emptyState": "Наразі в цьому просторі немає навчальних матеріалів",
 	"pages.rooms.emptyState": "Наразі немає вільних кімнат",

src/main.ts

@@ -72,6 +72,7 @@ mountBaseComponents(app);
 // app.config.productionTip = false;
 
 app.config.errorHandler = (err: unknown) => {
+	logger.error(err);
 	useAppStore().handleUnknownError(err);
 };
 

src/modules/data/room/RoomDetails.store.ts

@@ -58,10 +58,14 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		return boardId;
 	};
 
+	const moveBoard = async (roomId: string, boardId: string, toPosition: number) => {
+		await roomApi.roomControllerMoveBoard(roomId, { id: boardId, toPosition });
+	};
+
 	/**
 	 * @throws ApiResponseError | ApiValidationError
 	 */
-	const updateRoom = async (id: string, params: RoomUpdateParams): Promise<void> => {
+	const updateRoom = async (id: string, params: RoomUpdateParams) => {
 		isLoading.value = true;
 		try {
 			await roomApi.roomControllerUpdateRoom(id, params);
@@ -81,6 +85,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		fetchRoomAndBoards,
 		fetchRoom,
 		createBoard,
+		moveBoard,
 		isLoading,
 		resetState,
 		room,

src/modules/feature/board/board/Board.vue

@@ -342,9 +342,7 @@ const copyModule = injectStrict(COPY_MODULE_KEY);
 
 const isCopyModalOpen = computed(() => copyModule.getIsResultModalOpen);
 
-const isListBoard = computed(
-	() => useEnvConfig().value.FEATURE_BOARD_LAYOUT_ENABLED && board.value?.layout === BoardLayout.List
-);
+const isListBoard = computed(() => board.value?.layout === BoardLayout.List);
 
 provide(BOARD_IS_LIST_LAYOUT, isListBoard);
 

src/modules/feature/board/board/BoardColumn.vue

@@ -25,7 +25,7 @@
 					bubbleScroll: true,
 					direction: 'vertical',
 					delayOnTouchOnly: true,
-					delay: 300,
+					delay: 200,
 					touchStartThreshold: 3, // needed for sensitive touch devices
 					fallbackTolerance: 3, // specifies how far the mouse should move before it's considered a drag
 					disabled: !hasMovePermission,

src/modules/feature/board/board/BoardColumnGhost.vue

@@ -19,7 +19,7 @@
 				:options="{
 					group: 'cards',
 					direction: 'vertical',
-					delay: 300, // isDesktop ? 0 : 300
+					delay: 200,
 					delayOnTouchOnly: true,
 					ghostClass: isListBoard ? 'list-layout' : 'column-layout',
 					easing: 'cubic-bezier(1, 0, 0, 1)',

src/modules/feature/media-shelf/MediaBoard.vue

@@ -15,7 +15,7 @@
 				:options="{
 					direction: 'vertical',
 					group: 'lines',
-					delay: 300,
+					delay: 200,
 					delayOnTouchOnly: true,
 					disabled: isInEditMode,
 					ghostClass: 'sortable-drag-ghost',