N21 1264 new class page extension

src/locales/de.json

@@ -737,6 +737,8 @@
 	"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.administration.classes.deleteDialog.title": "Klasse löschen?",
+	"pages.administration.classes.deleteDialog.content": "\"Möchten Sie wirklich die Klasse '<i>{itemName}</i>' löschen?\"",
 	"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

@@ -735,6 +735,8 @@
 	"pages.administration.school.index.authSystems.delete": "Delete {system}",
 	"pages.administration.classes.index.title": "Manage classes",
 	"pages.administration.classes.index.add": "Add class",
+	"pages.administration.classes.deleteDialog.title": "Delete class?",
+	"pages.administration.classes.deleteDialog.content": "\"Are you sure you want to delete class '<i>{itemName}<i>'?\"",
 	"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

@@ -724,6 +724,8 @@
 	"pages.administration.school.index.authSystems.delete": "Eliminar {system}",
 	"pages.administration.classes.index.title": "Administrar clases",
 	"pages.administration.classes.index.add": "Agregar clase",
+	"pages.administration.classes.deleteDialog.title": "¿Eliminar clase?",
+	"pages.administration.classes.deleteDialog.content": "\"¿Está seguro de que desea eliminar la clase '<i>{itemName}<i>'?\"",
 	"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

@@ -813,6 +813,8 @@
 	"pages.administration.teachers.table.edit.ariaLabel": "Редагування вчителя",
 	"pages.administration.classes.index.title": "Керувати заняттями",
 	"pages.administration.classes.index.add": "Додати клас",
+	"pages.administration.classes.deleteDialog.title": "Видалити клас?",
+	"pages.administration.classes.deleteDialog.content": "\"Ви впевнені, що хочете видалити клас \"<i>{itemName}<i>\"?\"",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements": "Виберіть елементи, які треба додати до теми",
 	"pages.content._id.metadata.author": "Автор",

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

@@ -8,13 +8,26 @@ 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";
+import setupStores from "../../../tests/test-utils/setupStores";
+import AuthModule from "../../store/auth";
+import { authModule } from "../../store";
+
+const $router = {
+	push: jest.fn(),
+};
 
 describe("ClassOverview", () => {
 	const getWrapper = (getters: Partial<GroupModule> = {}) => {
 		document.body.setAttribute("data-app", "true");
 
 		const groupModule = createModuleMocks(GroupModule, {
-			getClasses: [classInfoFactory.build()],
+			getClasses: [
+				classInfoFactory.build(),
+				classInfoFactory.build({
+					externalSourceName: "",
+					isUpgradable: true,
+				}),
+			],
 			getPagination: {
 				limit: 10,
 				skip: 0,
@@ -31,6 +44,7 @@ describe("ClassOverview", () => {
 				[I18N_KEY.valueOf()]: i18nMock,
 				[GROUP_MODULE_KEY.valueOf()]: groupModule,
 			},
+			mocks: { $router },
 		});
 
 		return {
@@ -39,6 +53,13 @@ describe("ClassOverview", () => {
 		};
 	};
 
+	beforeEach(() => {
+		$router.push.mockReset();
+		setupStores({
+			authModule: AuthModule,
+		});
+	});
+
 	afterEach(() => {
 		jest.clearAllMocks();
 	});
@@ -202,4 +223,257 @@ describe("ClassOverview", () => {
 			});
 		});
 	});
+
+	describe("action icons", () => {
+		describe("when classes are available", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should render 4 icons", () => {
+				const { wrapper } = setup();
+
+				const manageIcon = wrapper.find(
+					'[data-testid="class-table-manage-icon"]'
+				);
+
+				const editIcon = wrapper.find('[data-testid="class-table-edit-icon"]');
+
+				const deleteIcon = wrapper.find(
+					'[data-testid="class-table-delete-icon"]'
+				);
+
+				const successorIcon = wrapper.find(
+					'[data-testid="class-table-successor-icon"]'
+				);
+
+				expect(manageIcon.exists()).toBeTruthy();
+				expect(editIcon.exists()).toBeTruthy();
+				expect(deleteIcon.exists()).toBeTruthy();
+				expect(successorIcon.exists()).toBeTruthy();
+			});
+		});
+
+		describe("when no classes are available", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper } = getWrapper({
+					getClasses: [classInfoFactory.build()],
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should not render any icons", () => {
+				const { wrapper } = setup();
+
+				const manageIcon = wrapper.find(
+					'[data-testid="class-table-manage-icon"]'
+				);
+
+				const editIcon = wrapper.find('[data-testid="class-table-edit-icon"]');
+
+				const deleteIcon = wrapper.find(
+					'[data-testid="class-table-delete-icon"]'
+				);
+
+				const successorIcon = wrapper.find(
+					'[data-testid="class-table-successor-icon"]'
+				);
+
+				expect(manageIcon.exists()).toBeFalsy();
+				expect(editIcon.exists()).toBeFalsy();
+				expect(deleteIcon.exists()).toBeFalsy();
+				expect(successorIcon.exists()).toBeFalsy();
+			});
+		});
+
+		describe("when clicking on the manage class icon", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper, groupModule } = getWrapper();
+
+				const classId: string = groupModule.getClasses[1].id;
+
+				return {
+					wrapper,
+					classId,
+				};
+			};
+
+			it("should redirect to legacy class manage page", async () => {
+				const { wrapper, classId } = setup();
+
+				await wrapper
+					.find('[data-testid="class-table-manage-icon"]')
+					.trigger("click");
+
+				expect($router.push).toHaveBeenCalledWith({
+					path: `/administration/classes/${classId}/manage`,
+				});
+			});
+		});
+
+		describe("when clicking on the edit class icon", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper, groupModule } = getWrapper();
+
+				const classId: string = groupModule.getClasses[1].id;
+
+				return {
+					wrapper,
+					classId,
+				};
+			};
+
+			it("should redirect to legacy class edit page", async () => {
+				const { wrapper, classId } = setup();
+
+				await wrapper
+					.find('[data-testid="class-table-edit-icon"]')
+					.trigger("click");
+
+				expect($router.push).toHaveBeenCalledWith({
+					path: `/administration/classes/${classId}/edit`,
+				});
+			});
+		});
+
+		describe("when class is upgradable", () => {
+			describe("when clicking on the upgrade class icon", () => {
+				const setup = () => {
+					authModule.addUserPermmission("CLASS_EDIT");
+
+					const { wrapper, groupModule } = getWrapper();
+
+					const classId: string = groupModule.getClasses[1].id;
+
+					return {
+						wrapper,
+						classId,
+					};
+				};
+
+				it("should redirect to legacy class upgrade page", async () => {
+					const { wrapper, classId } = setup();
+
+					await wrapper
+						.find('[data-testid="class-table-successor-icon"]')
+						.trigger("click");
+
+					expect($router.push).toHaveBeenCalledWith({
+						path: `/administration/classes/${classId}/createSuccessor`,
+					});
+				});
+			});
+		});
+
+		describe("when class is not upgradable", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper } = getWrapper({
+					getClasses: [
+						classInfoFactory.build({
+							externalSourceName: undefined,
+							isUpgradable: false,
+						}),
+					],
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should display the upgrade icon as disabled", () => {
+				const { wrapper } = setup();
+
+				const icon = wrapper.find('[data-testid="class-table-successor-icon"]');
+
+				expect(icon.attributes().disabled).toBe("disabled");
+			});
+		});
+
+		describe("when clicking on the delete class icon", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should open the delete dialog", async () => {
+				const { wrapper } = setup();
+
+				await wrapper
+					.find('[data-testid="class-table-delete-icon"]')
+					.trigger("click");
+
+				const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+				expect(dialog.exists()).toBeTruthy();
+			});
+		});
+
+		describe("when delete dialog is open", () => {
+			const setup = () => {
+				authModule.addUserPermmission("CLASS_EDIT");
+
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			describe("when clicking on cancel button", () => {
+				it("should not delete class", async () => {
+					const { wrapper, groupModule } = setup();
+
+					await wrapper
+						.find('[data-testid="class-table-delete-icon"]')
+						.trigger("click");
+
+					const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+					await dialog.find('[data-testid="dialog-cancel"').trigger("click");
+
+					expect(groupModule.deleteClass).not.toHaveBeenCalled();
+				});
+			});
+
+			describe("when clicking on confirm button", () => {
+				it("should delete class", async () => {
+					const { wrapper, groupModule } = setup();
+
+					await wrapper
+						.find('[data-testid="class-table-delete-icon"]')
+						.trigger("click");
+
+					const dialog = wrapper.find('[data-testid="delete-dialog"]');
+
+					await dialog.find('[data-testid="dialog-confirm"').trigger("click");
+
+					expect(groupModule.deleteClass).toHaveBeenCalled();
+				});
+			});
+		});
+	});
 });