Skip to content

Commit 6aab40e

Browse files
NFriedohoeppner-dataportmuratmerdoglu-dp
authored
BC-10955 - Adjust link invitation (#3972)
* add radio buttons and adjust layout in InviteMembersDialog * layout adjustments --------- Co-authored-by: hoeppner-dataport <[email protected]> Co-authored-by: Murat Merdoglu <[email protected]>
1 parent 831c0db commit 6aab40e

File tree

10 files changed

+427
-168
lines changed

10 files changed

+427
-168
lines changed

‎src/composables/safeFocusTrap.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
import { Arrayable, MaybeComputedElementRef } from "@vueuse/core";
22
import { useFocusTrap, UseFocusTrapOptions } from "@vueuse/integrations/useFocusTrap";
3-
import { MaybeRefOrGetter, ModelRef, Ref, watch } from "vue";
3+
import { MaybeRefOrGetter, ModelRef, nextTick, Ref, watch } from "vue";
4+
import { useDisplay } from "vuetify";
45

56
// This composable makes sure the focus trap is properly deactivated when isActiveRef (e. g. the v-model of a dialog) boolean changes to false.
67
export function useSafeFocusTrap(
78
isActiveRef: ModelRef<boolean> | Ref<boolean>,
89
target: Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>,
910
options?: UseFocusTrapOptions
1011
) {
12+
const { mobile } = useDisplay();
1113
const { pause, unpause, activate, deactivate, hasFocus, isPaused } = useFocusTrap(target, {
12-
immediate: true,
1314
...options,
1415
});
1516

1617
watch(
17-
() => isActiveRef.value,
18-
(isActive: boolean) => {
19-
if (isActive === false) {
18+
isActiveRef,
19+
async (isActive: boolean) => {
20+
// On mobile, we do not want to activate the focus trap because focus-trap is not officially supporting mobile devices.
21+
// See: https://github.com/focus-trap/focus-trap?tab=readme-ov-file#browser-support
22+
// If this was active on mobile devices focus would be restored to the first focusable element on every interaction which would lead to a broken user experience.
23+
if (isActive && !mobile.value) {
24+
await nextTick();
25+
activate();
26+
} else {
27+
await nextTick();
2028
deactivate();
2129
}
22-
}
30+
},
31+
{ immediate: true }
2332
);
2433

2534
return {

‎src/composables/safeFocusTrap.unit.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { useSafeFocusTrap } from "./safeFocusTrap";
2+
import { flushPromises } from "@vue/test-utils";
3+
import { useFocusTrap } from "@vueuse/integrations/useFocusTrap.mjs";
4+
import { Mock } from "vitest";
5+
import { nextTick, Ref, ref } from "vue";
6+
import { useDisplay } from "vuetify";
7+
8+
vi.mock("@vueuse/integrations/useFocusTrap");
9+
vi.mock("vuetify");
10+
11+
describe("safeFocusTrap", () => {
12+
let pauseMock: Mock;
13+
let unpauseMock: Mock;
14+
let deactivateMock: Mock;
15+
let activateMock: Mock;
16+
let isMobile: Ref<boolean>;
17+
18+
beforeEach(() => {
19+
pauseMock = vi.fn();
20+
unpauseMock = vi.fn();
21+
deactivateMock = vi.fn();
22+
activateMock = vi.fn();
23+
isMobile = ref(false);
24+
25+
(useDisplay as Mock).mockReturnValue({ mobile: isMobile });
26+
27+
(useFocusTrap as Mock).mockReturnValue({
28+
pause: pauseMock,
29+
unpause: unpauseMock,
30+
deactivate: deactivateMock,
31+
activate: activateMock,
32+
});
33+
});
34+
35+
it("should immediately call 'activate' when isActiveRef is true", async () => {
36+
const isActiveRef = ref(true);
37+
isMobile.value = false;
38+
39+
useSafeFocusTrap(isActiveRef, "#some-element");
40+
await nextTick();
41+
42+
expect(activateMock).toHaveBeenCalled();
43+
});
44+
45+
it("should not call activate on mobile devices", async () => {
46+
const isActiveRef = ref(true);
47+
isMobile.value = true;
48+
49+
useSafeFocusTrap(isActiveRef, "#some-element");
50+
await nextTick();
51+
52+
expect(activateMock).not.toHaveBeenCalled();
53+
});
54+
55+
it("should immediately call 'deactivate' when isActiveRef is false", async () => {
56+
const isActiveRef = ref(false);
57+
useSafeFocusTrap(isActiveRef, "#some-element");
58+
await nextTick();
59+
60+
expect(deactivateMock).toHaveBeenCalled();
61+
});
62+
63+
it("should call activate when isActiveRef changes to true", async () => {
64+
const isActiveRef = ref(false);
65+
isMobile.value = false;
66+
67+
useSafeFocusTrap(isActiveRef, "#some-element");
68+
await nextTick();
69+
70+
isActiveRef.value = true;
71+
await flushPromises();
72+
73+
expect(activateMock).toHaveBeenCalled();
74+
});
75+
76+
it("should call deactivate when isActiveRef changes to false", async () => {
77+
const isActiveRef = ref(true);
78+
isMobile.value = false;
79+
80+
useSafeFocusTrap(isActiveRef, "#some-element");
81+
await nextTick();
82+
83+
isActiveRef.value = false;
84+
await flushPromises();
85+
86+
expect(deactivateMock).toHaveBeenCalled();
87+
});
88+
});

‎src/locales/de.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default {
4848
"common.files": "Dateien",
4949
"common.instructions.orderBy.arrowKeys": "Die Elemente dieser Liste können per Pfeiltaste verschoben werden.",
5050
"common.labels.admin": "Admin(s)",
51+
"common.labels.allSchools": "alle Schulen",
5152
"common.labels.birthdate": "Geburtsdatum",
5253
"common.labels.birthday": "Geburtsdatum",
5354
"common.labels.changed": "Geändert",
@@ -83,6 +84,7 @@ export default {
8384
"common.labels.migrated": "Zuletzt migriert am",
8485
"common.labels.name": "Name",
8586
"common.labels.notVisible": "Nicht sichtbar",
87+
"common.labels.only": "nur",
8688
"common.labels.outdated.tooltip": "Zeigt an, wann der Account als veraltet markiert wurde",
8789
"common.labels.outdated": "Veraltet seit",
8890
"common.labels.partial": "teilweise",
@@ -103,11 +105,13 @@ export default {
103105
"common.labels.status": "Status",
104106
"common.labels.student": "Schüler:in",
105107
"common.labels.student.neutral": "Lernend",
108+
"common.labels.students.neutral": "Lernende",
106109
"common.labels.students": "Schüler:innen",
107110
"common.labels.success": "erfolg",
108111
"common.labels.teacher.plural": "Lehrkräfte",
109112
"common.labels.teacher": "Lehrkraft",
110113
"common.labels.teacher.neutral": "Lernbegleitend",
114+
"common.labels.teacher.neutral.plural": "Lernbegleitungen",
111115
"common.labels.time": "Uhrzeit",
112116
"common.labels.title": "Titel",
113117
"common.labels.unknown": "Unbekannt",
@@ -1779,13 +1783,16 @@ export default {
17791783
"Im nächsten Schritt wird der bearbeitete Einladungslink angezeigt.",
17801784
"pages.rooms.members.inviteMember.step.share.title": "Einladungslink teilen",
17811785
"pages.rooms.members.inviteMember.step.edit.title": "Einladungslink bearbeiten",
1782-
"pages.rooms.members.inviteMember.infoAlert.text":
1786+
"pages.rooms.members.inviteMember.infoAlert.text.studentsFromOtherSchools":
17831787
"Lernende anderer Schulen müssen immer durch eine aufsichtsführende Lernbegleitung ihrer Schule zum Raum hinzugefügt werden.",
1788+
"pages.rooms.members.inviteMember.infoAlert.text.externalPersons":
1789+
"Externe Personen können nur eingeladen werden, wenn der Link für alle Schulen gültig ist.",
17841790
"pages.rooms.members.inviteMember.form.description.label": "Beschreibung",
17851791
"pages.rooms.members.inviteMember.form.description.hint": "Wird in der Link-Übersicht angezeigt",
1786-
"pages.rooms.members.inviteMember.form.onlySchoolMembers.label": "Link nur für Nutzende der folgenden Schule gültig:",
1787-
"pages.rooms.members.inviteMember.form.validForStudents.label": "Link auch für Lernende gültig",
1788-
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Link auch für Externe Personen gültig",
1792+
"pages.rooms.members.inviteMember.form.validForSchools.label": "Link gültig für die folgende(n) Schule(n):",
1793+
"pages.rooms.members.inviteMember.form.validForRoles.label": "Link gültig für die folgenden Schulrollen:",
1794+
"pages.rooms.members.inviteMember.form.validForExternalPersons.label":
1795+
"Externe Personen (ehemals: Externe/r Expert:in)",
17891796
"pages.rooms.members.inviteMember.form.linkExpires.label": "Link läuft ab am",
17901797
"pages.rooms.members.inviteMember.form.isConfirmationNeeded.label":
17911798
"Betreten des Raums nur nach Bestätigung möglich ({0})",

‎src/locales/en.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default {
4646
"common.files": "files",
4747
"common.instructions.orderBy.arrowKeys": "The items in this list can be moved using the arrow keys.",
4848
"common.labels.admin": "",
49+
"common.labels.allSchools": "all schools",
4950
"common.labels.birthdate": "Date of birth",
5051
"common.labels.birthday": "Date of Birth",
5152
"common.labels.changed": "Changed",
@@ -81,6 +82,7 @@ export default {
8182
"common.labels.migrated": "Last migrated on",
8283
"common.labels.name": "Name",
8384
"common.labels.notVisible": "Not visible",
85+
"common.labels.only": "only",
8486
"common.labels.outdated.tooltip": "Shows when the account was marked as obsolete",
8587
"common.labels.outdated": "Outdated since",
8688
"common.labels.partial": "partial",
@@ -101,11 +103,13 @@ export default {
101103
"common.labels.status": "Status",
102104
"common.labels.student": "Student",
103105
"common.labels.student.neutral": "Student",
106+
"common.labels.students.neutral": "Students",
104107
"common.labels.students": "Students",
105108
"common.labels.success": "success",
106109
"common.labels.teacher.plural": "Teachers",
107110
"common.labels.teacher": "Teacher",
108111
"common.labels.teacher.neutral": "Teacher",
112+
"common.labels.teacher.neutral.plural": "Teachers",
109113
"common.labels.time": "Time",
110114
"common.labels.title": "Title",
111115
"common.labels.unknown": "Unknown",
@@ -1751,13 +1755,15 @@ export default {
17511755
"pages.rooms.members.inviteMember.editStep.subTitle": "The edited invitation link is displayed in the next step.",
17521756
"pages.rooms.members.inviteMember.step.share.title": "Share invitation link",
17531757
"pages.rooms.members.inviteMember.step.edit.title": "Edit invitation link",
1754-
"pages.rooms.members.inviteMember.infoAlert.text":
1758+
"pages.rooms.members.inviteMember.infoAlert.text.studentsFromOtherSchools":
17551759
"Students from other schools must always be added to the room by a supervising teacher from their school.",
1760+
"pages.rooms.members.inviteMember.infoAlert.text.externalPersons":
1761+
"External persons can only be invited if the link is valid for all schools.",
17561762
"pages.rooms.members.inviteMember.form.description.label": "Description",
17571763
"pages.rooms.members.inviteMember.form.description.hint": "Is displayed in the link overview",
1758-
"pages.rooms.members.inviteMember.form.onlySchoolMembers.label": "Link only valid for users of the following school:",
1759-
"pages.rooms.members.inviteMember.form.validForStudents.label": "Link also valid for students",
1760-
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Link also valid for external persons",
1764+
"pages.rooms.members.inviteMember.form.validForSchools.label": "Link valid for the following school(s):",
1765+
"pages.rooms.members.inviteMember.form.validForRoles.label": "Link valid for the following school roles:",
1766+
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "External Persons (formerly: Expert)",
17611767
"pages.rooms.members.inviteMember.form.linkExpires.label": "Link expires on",
17621768
"pages.rooms.members.inviteMember.form.isConfirmationNeeded.label":
17631769
"Entry to the room only possible after confirmation ({0})",

‎src/locales/es.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default {
4848
"common.files": "Archivos",
4949
"common.instructions.orderBy.arrowKeys": "Los elementos de esta lista se pueden mover con las teclas de flecha.",
5050
"common.labels.admin": "Admin(s)",
51+
"common.labels.allSchools": "todas las escuelas",
5152
"common.labels.birthdate": "Fecha de nacimiento",
5253
"common.labels.birthday": "Fecha de nacimiento",
5354
"common.labels.changed": "Cambiado",
@@ -83,6 +84,7 @@ export default {
8384
"common.labels.migrated": "Última migración el",
8485
"common.labels.name": "Nombre",
8586
"common.labels.notVisible": "No visible",
87+
"common.labels.only": "solo",
8688
"common.labels.outdated.tooltip": "Muestra cuándo la cuenta se marcó como obsoleta",
8789
"common.labels.outdated": "Obsoleto desde",
8890
"common.labels.partial": "parcial",
@@ -103,11 +105,13 @@ export default {
103105
"common.labels.status": "Estado",
104106
"common.labels.student": "Estudiante",
105107
"common.labels.student.neutral": "Estudiante",
108+
"common.labels.students.neutral": "Estudiantes",
106109
"common.labels.students": "Estudiantes",
107110
"common.labels.success": "éxito",
108111
"common.labels.teacher.plural": "Profesora(e)s",
109112
"common.labels.teacher": "Profesor",
110113
"common.labels.teacher.neutral": "Profesor",
114+
"common.labels.teacher.neutral.plural": "Profesora(e)s",
111115
"common.labels.time": "Hora",
112116
"common.labels.title": "Título",
113117
"common.labels.unknown": "Desconocido",
@@ -1792,14 +1796,15 @@ export default {
17921796
"El enlace de invitación editado se muestra en el siguiente paso.",
17931797
"pages.rooms.members.inviteMember.step.share.title": "Compartir enlace de invitación",
17941798
"pages.rooms.members.inviteMember.step.edit.title": "Editar enlace de invitación",
1795-
"pages.rooms.members.inviteMember.infoAlert.text":
1799+
"pages.rooms.members.inviteMember.infoAlert.text.studentsFromOtherSchools":
17961800
"Los alumnos de otras escuelas siempre deben ser agregados a la sala por un profesor supervisor de su escuela.",
1801+
"pages.rooms.members.inviteMember.infoAlert.text.externalPersons":
1802+
"Las personas externas solo pueden ser invitadas si el enlace es válido para todas las escuelas.",
17971803
"pages.rooms.members.inviteMember.form.description.label": "Descripción",
17981804
"pages.rooms.members.inviteMember.form.description.hint": "Se muestra en el resumen del enlace",
1799-
"pages.rooms.members.inviteMember.form.onlySchoolMembers.label":
1800-
"Enlace sólo válido para usuarios de la siguiente escuela:",
1801-
"pages.rooms.members.inviteMember.form.validForStudents.label": "Enlace válido también para estudiantes",
1802-
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Enlace válido también para personas externas",
1805+
"pages.rooms.members.inviteMember.form.validForSchools.label": "Enlace válido para la(s) siguiente(s) escuela(s):",
1806+
"pages.rooms.members.inviteMember.form.validForRoles.label": "Enlace válido para los siguientes roles escolares:",
1807+
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Personas externas (anteriormente: experto)",
18031808
"pages.rooms.members.inviteMember.form.linkExpires.label": "El enlace caduca el",
18041809
"pages.rooms.members.inviteMember.form.isConfirmationNeeded.label":
18051810
"La entrada a la habitación sólo es posible previa confirmación ({0})",

‎src/locales/uk.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default {
4848
"common.instructions.orderBy.arrowKeys": "Елементи цього списку можна переміщати за допомогою клавіш зі стрілками.",
4949
"common.files": "Файли",
5050
"common.labels.admin": "адміністратор(и)",
51+
"common.labels.allSchools": "всі школи",
5152
"common.labels.birthdate": "Дата народження",
5253
"common.labels.birthday": "Дата народження",
5354
"common.labels.changed": "Змінений",
@@ -83,6 +84,7 @@ export default {
8384
"common.labels.migrated": "Востаннє перенесено",
8485
"common.labels.name": "Ім'я",
8586
"common.labels.notVisible": "Не видно",
87+
"common.labels.only": "лише",
8688
"common.labels.outdated.tooltip": "Показує, коли обліковий запис було позначено як застарілий",
8789
"common.labels.outdated": "Застаріло з",
8890
"common.labels.partial": "частковий",
@@ -103,11 +105,13 @@ export default {
103105
"common.labels.status": "Статус",
104106
"common.labels.student": "Учень",
105107
"common.labels.student.neutral": "Учень",
108+
"common.labels.students.neutral": "Учні",
106109
"common.labels.students": "Учні",
107110
"common.labels.success": "успіх",
108111
"common.labels.teacher.plural": "Викладачі",
109112
"common.labels.teacher": "Викладач",
110113
"common.labels.teacher.neutral": "Викладач",
114+
"common.labels.teacher.neutral.plural": "Викладачі",
111115
"common.labels.time": "Час",
112116
"common.labels.title": "Назва",
113117
"common.labels.unknown": "Невідомий",
@@ -1767,14 +1771,15 @@ export default {
17671771
"Відредаговане посилання запрошення буде відображено на наступному кроці.",
17681772
"pages.rooms.members.inviteMember.step.share.title": "Поділіться посиланням на запрошення",
17691773
"pages.rooms.members.inviteMember.step.edit.title": "Редагувати посилання на запрошення",
1770-
"pages.rooms.members.inviteMember.infoAlert.text":
1774+
"pages.rooms.members.inviteMember.infoAlert.text.studentsFromOtherSchools":
17711775
"Учні з інших шкіл завжди повинні бути присутніми в кімнаті під наглядом вчителя з їхньої школи.",
1776+
"pages.rooms.members.inviteMember.infoAlert.text.externalPersons":
1777+
"Зовнішні особи можуть бути запрошені лише за умови, що посилання дійсне для всіх шкіл.",
17721778
"pages.rooms.members.inviteMember.form.description.label": "Опис",
17731779
"pages.rooms.members.inviteMember.form.description.hint": "Відображається в огляді посилань",
1774-
"pages.rooms.members.inviteMember.form.onlySchoolMembers.label":
1775-
"Посилання дійсне лише для користувачів наступної школи:",
1776-
"pages.rooms.members.inviteMember.form.validForStudents.label": "Посилання також дійсне для студентів",
1777-
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Посилання також дійсне для зовнішніх осіб",
1780+
"pages.rooms.members.inviteMember.form.validForSchools.label": "Посилання дійсне для наступної(их) школи(ь):",
1781+
"pages.rooms.members.inviteMember.form.validForRoles.label": "Посилання дійсне для наступних ролей у школі:",
1782+
"pages.rooms.members.inviteMember.form.validForExternalPersons.label": "Зовнішні особи (раніше: Експерт)",
17781783
"pages.rooms.members.inviteMember.form.linkExpires.label": "Термін дії посилання закінчується",
17791784
"pages.rooms.members.inviteMember.form.isConfirmationNeeded.label":
17801785
"Вхід до кімнати можливий тільки після підтвердження ({0})",

‎src/modules/feature/room/RoomsWelcomeInfo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<InfoAlert class="mt-4 mb-6">
33
{{ t("pages.rooms.infoAlert.welcome") }}
44

5-
<ul class="mt-1 pl-4">
5+
<ul class="mt-1 pl-5">
66
<li>{{ t("pages.rooms.infoAlert.welcome.collaboration") }}</li>
77
<li>{{ t("pages.rooms.infoAlert.welcome.teamsAndCourses") }}</li>
88
<li>

0 commit comments

Comments
 (0)