N21-1206 show classes and goups

src/locales/de.json

@@ -77,6 +77,7 @@
 	"common.labels.visibility": "Sichtbarkeit",
 	"common.labels.visible": "Sichtbar",
 	"common.labels.notVisible": "Nicht sichtbar",
+	"common.labels.externalsource": "Quelle",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "TT.MM.JJJJ",
 	"common.placeholder.email": "[email protected]",
@@ -283,6 +284,7 @@
 	"global.sidebar.addons": "Add-ons",
 	"global.sidebar.calendar": "Termine",
 	"global.sidebar.classes": "Klassen",
+	"global.sidebar.classes.new": "Klassen (neu)",
 	"global.sidebar.courses": "Kurse",
 	"global.sidebar.files-old": "Meine Dateien",
 	"global.sidebar.files": "Dateien",
@@ -729,6 +731,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Link kopieren",
 	"pages.administration.school.index.authSystems.edit": "{system} bearbeiten",
 	"pages.administration.school.index.authSystems.delete": "{system} löschen",
+	"pages.administration.classes.index.title":  "Klassen verwalten",
+	"pages.administration.classes.index.add":  "Klasse hinzufügen",
 	"pages.content._id.addToTopic": "Hinzufügen zu",
 	"pages.content._id.collection.selectElements": "Wählen Sie die Elemente, die Sie zum Thema hinzufügen möchten",
 	"pages.content._id.metadata.author": "Autor",

src/locales/en.json

@@ -27,7 +27,7 @@
 	"common.labels.createAt": "Created:",
 	"common.labels.birthdate": "Date of birth",
 	"common.labels.birthday": "Date of Birth",
-	"common.labels.classes": "classes",
+	"common.labels.classes": "Classes",
 	"common.labels.close": "Close",
 	"common.labels.collapse": "collapse",
 	"common.labels.collapsed": "collapsed",
@@ -77,6 +77,7 @@
 	"common.labels.visibility": "Visibility",
 	"common.labels.visible": "Visible",
 	"common.labels.notVisible": "Not visible",
+	"common.labels.externalsource": "Source",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "DD.MM.YYYY",
 	"common.placeholder.email": "[email protected]",
@@ -282,6 +283,7 @@
 	"global.sidebar.addons": "Add-ons",
 	"global.sidebar.calendar": "calendar",
 	"global.sidebar.classes": "Classes",
+	"global.sidebar.classes": "Classes (new)",
 	"global.sidebar.courses": "Courses",
 	"global.sidebar.files-old": "My Files",
 	"global.sidebar.files": "Files",
@@ -727,6 +729,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Copy Link",
 	"pages.administration.school.index.authSystems.edit": "Edit {system}",
 	"pages.administration.school.index.authSystems.delete": "Delete {system}",
+	"pages.administration.classes.index.title":  "Manage classes",
+	"pages.administration.classes.index.add":  "Add class",
 	"pages.content._id.addToTopic": "To be added to",
 	"pages.content._id.collection.selectElements": "Select the items you want to add to the topic",
 	"pages.content._id.metadata.author": "Author",

src/locales/es.json

@@ -77,6 +77,7 @@
 	"common.labels.visibility": "Visibilidad",
 	"common.labels.visible": "Visible",
 	"common.labels.notVisible": "No visible",
+	"common.labels.externalsource": "Fuente",
 	"common.placeholder.birthdate": "20.2.2002",
 	"common.placeholder.dateformat": "DD.MM.AAAA",
 	"common.placeholder.email": "[email protected]",
@@ -282,6 +283,7 @@
 	"global.sidebar.addons": "Complementos",
 	"global.sidebar.calendar": "Calendario",
 	"global.sidebar.classes": "Clases",
+	"global.sidebar.classes": "Clases (nuevas)",
 	"global.sidebar.courses": "Cursos",
 	"global.sidebar.files-old": "Mis archivos",
 	"global.sidebar.files": "Archivos",
@@ -716,6 +718,8 @@
 	"pages.administration.school.index.authSystems.copyLink": "Copiar enlace",
 	"pages.administration.school.index.authSystems.edit": "Editar {system}",
 	"pages.administration.school.index.authSystems.delete": "Eliminar {system}",
+	"pages.administration.classes.index.title":  "Administrar clases",
+	"pages.administration.classes.index.add":  "Agregar clase",
 	"pages.content._id.addToTopic": "Para ser añadido a",
 	"pages.content._id.collection.selectElements": "Selecciona los elementos que deses añadir al tema",
 	"pages.content._id.metadata.author": "Autor",

src/locales/uk.json

@@ -77,6 +77,7 @@
 	"common.labels.visibility": "Видимість",
 	"common.labels.visible": "Видимий",
 	"common.labels.notVisible": "Не видно",
+	"common.labels.externalsource": "Джерело",
 	"common.placeholder.birthdate": "20.02.2002",
 	"common.placeholder.dateformat": "ДД.ММ.РРРР",
 	"common.placeholder.email": "[email protected]",
@@ -451,6 +452,7 @@
 	"global.sidebar.addons": "Додаткові компоненти",
 	"global.sidebar.calendar": "календар",
 	"global.sidebar.classes": "Класи",
+	"global.sidebar.classes": "Класи (новий)",
 	"global.sidebar.courses": "Курси",
 	"global.sidebar.files-old": "Мої файли",
 	"global.sidebar.files": "файли",
@@ -797,6 +799,8 @@
 	"pages.administration.teachers.new.success": "Викладача успішно створено!",
 	"pages.administration.teachers.new.title": "Додати викладача",
 	"pages.administration.teachers.table.edit.ariaLabel": "Редагування вчителя",
+	"pages.administration.classes.index.title":  "Керувати заняттями",
+	"pages.administration.classes.index.add":  "Додати клас",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements": "Виберіть елементи, які треба додати до теми",
 	"pages.content._id.metadata.author": "Автор",

src/main.ts

@@ -11,6 +11,7 @@ import {
 	externalToolsModule,
 	filePathsModule,
 	finishedTasksModule,
+	groupModule,
 	importUsersModule,
 	loadingStateModule,
 	newsModule,
@@ -60,6 +61,7 @@ import {
 	CONTEXT_EXTERNAL_TOOLS_MODULE_KEY,
 	ENV_CONFIG_MODULE_KEY,
 	EXTERNAL_TOOLS_MODULE_KEY,
+	GROUP_MODULE_KEY,
 	I18N_KEY,
 	NOTIFIER_MODULE_KEY,
 	ROOM_MODULE_KEY,
@@ -153,6 +155,7 @@ Vue.use(VueDOMPurifyHTML, {
 			[EXTERNAL_TOOLS_MODULE_KEY.valueOf()]: externalToolsModule,
 			filePathsModule,
 			finishedTasksModule,
+			[GROUP_MODULE_KEY.valueOf()]: groupModule,
 			importUsersModule,
 			loadingStateModule,
 			newsModule,

src/pages/administration/ClassOverview.page.unit.ts

@@ -0,0 +1,205 @@
+import GroupModule from "@/store/group";
+import { createModuleMocks } from "@/utils/mock-store-module";
+import { classInfoResponseFactory, i18nMock } from "@@/tests/test-utils";
+import { MountOptions, Wrapper, mount } from "@vue/test-utils";
+import ClassOverview from "./ClassOverview.page.vue";
+import { GROUP_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import Vue from "vue";
+import { SortOrder } from "@/store/types/sort-order.enum";
+import { Pagination } from "@/store/types/commons";
+
+describe("ClassOverview", () => {
+	const getWrapper = (getters: Partial<GroupModule> = {}) => {
+		document.body.setAttribute("data-app", "true");
+
+		const groupModule = createModuleMocks(GroupModule, {
+			getClasses: [classInfoResponseFactory.build()],
+			getPagination: {
+				limit: 10,
+				skip: 0,
+				total: 30,
+			},
+			...getters,
+		});
+
+		const wrapper: Wrapper<Vue> = mount(ClassOverview as MountOptions<Vue>, {
+			...createComponentMocks({
+				i18n: true,
+			}),
+			provide: {
+				[I18N_KEY.valueOf()]: i18nMock,
+				[GROUP_MODULE_KEY.valueOf()]: groupModule,
+			},
+		});
+
+		return {
+			wrapper,
+			groupModule,
+		};
+	};
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("breadcrumbs", () => {
+		it("should render static breadcrumbs", () => {
+			const { wrapper } = getWrapper({});
+
+			const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
+
+			expect(breadcrumbs.at(0).text()).toEqual(
+				"pages.administration.index.title"
+			);
+			expect(breadcrumbs.at(1).text()).toEqual(
+				"pages.administration.classes.index.title"
+			);
+		});
+	});
+
+	describe("onMounted", () => {
+		describe("when loading the page", () => {
+			it("should load the classes", async () => {
+				const { groupModule } = getWrapper();
+
+				await Vue.nextTick();
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe("onUpdateSortBy", () => {
+		describe("when changing the sortBy", () => {
+			const setup = () => {
+				const sortBy = "externalSourceName";
+
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					sortBy,
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to change sort by", async () => {
+				const { sortBy, wrapper, groupModule } = setup();
+
+				await wrapper
+					.find('[data-testid="admin-class-table"]')
+					.vm.$emit("update:sort-by", sortBy);
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+				expect(groupModule.setSortBy).toHaveBeenCalledWith(sortBy);
+			});
+		});
+	});
+
+	describe("updateSortOrder", () => {
+		describe("when changing the sort order", () => {
+			const setup = () => {
+				const sortOrder = true;
+
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					sortOrder,
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to change sort order", async () => {
+				const { sortOrder, wrapper, groupModule } = setup();
+
+				await wrapper
+					.find('[data-testid="admin-class-table"]')
+					.vm.$emit("update:sort-desc", sortOrder);
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+				expect(groupModule.setSortOrder).toHaveBeenCalledWith(SortOrder.DESC);
+			});
+		});
+	});
+
+	describe("onUpdateItemsPerPage", () => {
+		describe("when changing the number of items per page", () => {
+			const setup = () => {
+				const itemsPerPage = 20;
+
+				const pagination: Pagination = {
+					limit: 10,
+					skip: 0,
+					total: 30,
+				};
+
+				const { wrapper, groupModule } = getWrapper({
+					getPagination: {
+						limit: 10,
+						skip: 0,
+						total: 30,
+					},
+				});
+
+				return {
+					itemsPerPage,
+					pagination,
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to change the limit in pagination", async () => {
+				const { itemsPerPage, wrapper, groupModule, pagination } = setup();
+
+				await wrapper
+					.find('[data-testid="admin-class-table"]')
+					.vm.$emit("update:items-per-page", itemsPerPage);
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+				expect(groupModule.setPagination).toHaveBeenCalledWith({
+					...pagination,
+					limit: itemsPerPage,
+				});
+			});
+		});
+	});
+
+	describe("onUpdateCurrentPage", () => {
+		describe("when changing the table page", () => {
+			const setup = () => {
+				const page = 2;
+				const pagination: Pagination = {
+					limit: 10,
+					skip: 0,
+					total: 30,
+				};
+
+				pagination.skip = (page - 1) * pagination.limit;
+
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					page,
+					pagination,
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to update current page", async () => {
+				const { page, wrapper, groupModule, pagination } = setup();
+
+				await wrapper
+					.find('[data-testid="admin-class-table"]')
+					.vm.$emit("update:page", page);
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+				expect(groupModule.setPage).toHaveBeenCalledWith(page);
+				expect(groupModule.setPagination).toHaveBeenCalledWith(pagination);
+			});
+		});
+	});
+});