N21-1318 add schoolyear dependent tabs and a column to new class page

src/locales/de.json

@@ -293,7 +293,6 @@
 	"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",
@@ -755,6 +754,8 @@
 	"pages.administration.classes.edit": "Klasse bearbeiten",
 	"pages.administration.classes.delete": "Klasse löschen",
 	"pages.administration.classes.createSuccessor": "Klasse in das nächste Schuljahr versetzen",
+	"pages.administration.classes.label.archive": "Archiv",
+	"pages.administration.classes.hint": "Mit allen Änderungen und Einstellungen im Verwaltungsbereich wird bestätigt, dass diese durch einen weisungsberechtigten Schul-Admin mit Befugnis zu Anpassungen der Schule in der Cloud durchgeführt werden. Anpassungen durch den Schul-Admin gelten insofern als Weisung der Schule gegenüber dem Cloudbetreiber {institute_title}.",
 	"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

@@ -292,7 +292,6 @@
 	"global.sidebar.addons": "Add-ons",
 	"global.sidebar.calendar": "calendar",
 	"global.sidebar.classes": "Classes",
-	"global.sidebar.classes.new": "Classes (new)",
 	"global.sidebar.courses": "Courses",
 	"global.sidebar.files-old": "My Files",
 	"global.sidebar.files": "Files",
@@ -753,6 +752,8 @@
 	"pages.administration.classes.edit": "Edit class",
 	"pages.administration.classes.delete": "Delete class",
 	"pages.administration.classes.createSuccessor": "Move class to the next school year",
+	"pages.administration.classes.label.archive": "Archive",
+	"pages.administration.classes.hint": "With all changes and settings in the administration area, it is confirmed that these are carried out by a school admin with authority to make adjustments to the school in the cloud. Adjustments made by the school admin are deemed to be instructions from the school to the cloud operator {institute_title}.",
 	"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

@@ -292,7 +292,6 @@
 	"global.sidebar.addons": "Complementos",
 	"global.sidebar.calendar": "Calendario",
 	"global.sidebar.classes": "Clases",
-	"global.sidebar.classes.new": "Clases (nuevas)",
 	"global.sidebar.courses": "Cursos",
 	"global.sidebar.files-old": "Mis archivos",
 	"global.sidebar.files": "Archivos",
@@ -742,6 +741,8 @@
 	"pages.administration.classes.edit": "Editar clase",
 	"pages.administration.classes.delete": "Eliminar clase",
 	"pages.administration.classes.createSuccessor": "Mover la clase al próximo año escolar",
+	"pages.administration.classes.label.archive": "Archivo",
+	"pages.administration.classes.hint": "Con todos los cambios y ajustes en el área de administración, se confirma que estos son llevados a cabo por un administrador de la escuela autorizado para hacer ajustes en la escuela en la nube. Los ajustes realizados por el administrador de la escuela se consideran instrucciones de la escuela al operador de la nube {institute_title}.",
 	"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

@@ -471,7 +471,6 @@
 	"global.sidebar.addons": "Додаткові компоненти",
 	"global.sidebar.calendar": "календар",
 	"global.sidebar.classes": "Класи",
-	"global.sidebar.classes.new": "Класи (новий)",
 	"global.sidebar.courses": "Курси",
 	"global.sidebar.files-old": "Мої файли",
 	"global.sidebar.files": "файли",
@@ -833,6 +832,8 @@
 	"pages.administration.classes.edit": "Редагувати клас",
 	"pages.administration.classes.delete": "Видалити клас",
 	"pages.administration.classes.createSuccessor": "Перенести клас на наступний навчальний рік",
+	"pages.administration.classes.label.archive": "Архів",
+	"pages.administration.classes.hint": "З усіма змінами та налаштуваннями в області адміністрування ви підтверджуєте, що ви є авторизованим адміністратором школи та маєте право вносити зміни до школи у шкільній хмарі. Ваші дії розглядаються як інструкція школи для HPI.",
 	"pages.content._id.addToTopic": "Для додавання в",
 	"pages.content._id.collection.selectElements": "Виберіть елементи, які треба додати до теми",
 	"pages.content._id.metadata.author": "Автор",

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

@@ -3,13 +3,22 @@ import GroupModule from "@/store/group";
 import { ClassInfo, ClassRootType } from "@/store/types/class-info";
 import { Pagination } from "@/store/types/commons";
 import { SortOrder } from "@/store/types/sort-order.enum";
-import { AUTH_MODULE_KEY, GROUP_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import {
+	AUTH_MODULE_KEY,
+	GROUP_MODULE_KEY,
+	I18N_KEY,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { classInfoFactory, i18nMock } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { mount, MountOptions, Wrapper } from "@vue/test-utils";
 import Vue from "vue";
 import ClassOverview from "./ClassOverview.page.vue";
+import SchoolsModule from "@/store/schools";
+import { School, Year } from "@/store/types/schools";
+
+const $router = { replace: jest.fn() };
 
 describe("ClassOverview", () => {
 	const getWrapper = (getters: Partial<GroupModule> = {}) => {
@@ -36,20 +45,40 @@ describe("ClassOverview", () => {
 			getUserPermissions: ["CLASS_EDIT".toLowerCase()],
 		});
 
+		const schoolModule = createModuleMocks(SchoolsModule, {
+			getSchool: {
+				years: {
+					schoolYears: [],
+					nextYear: {
+						name: "2023/24",
+					} as Year,
+					activeYear: {
+						name: "2023/24",
+					} as Year,
+					lastYear: {} as Year,
+					defaultYear: {} as Year,
+				},
+			} as unknown as School,
+			...getters,
+		});
+
 		const wrapper: Wrapper<Vue> = mount(ClassOverview as MountOptions<Vue>, {
 			...createComponentMocks({
 				i18n: true,
 			}),
 			provide: {
 				[I18N_KEY.valueOf()]: i18nMock,
 				[GROUP_MODULE_KEY.valueOf()]: groupModule,
+				[SCHOOLS_MODULE_KEY.valueOf()]: schoolModule,
 				[AUTH_MODULE_KEY.valueOf()]: authModule,
 			},
+			mocks: { $router },
 		});
 
 		return {
 			wrapper,
 			groupModule,
+			schoolModule,
 		};
 	};
 
@@ -80,6 +109,9 @@ describe("ClassOverview", () => {
 				await Vue.nextTick();
 
 				expect(groupModule.loadClassesForSchool).toHaveBeenCalled();
+				expect($router.replace).toHaveBeenCalledWith({
+					query: { tab: "current" },
+				});
 			});
 		});
 	});
@@ -520,4 +552,166 @@ describe("ClassOverview", () => {
 			});
 		});
 	});
+
+	describe("tabs", () => {
+		describe("when loading page", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should show 3 tabs", () => {
+				const { wrapper } = setup();
+
+				const nextYearTab = wrapper.find(
+					'[data-testid="admin-class-next-year-tab"]'
+				);
+
+				const currentYearTab = wrapper.find(
+					'[data-testid="admin-class-current-year-tab"]'
+				);
+
+				const previousYearTab = wrapper.find(
+					'[data-testid="admin-class-previous-years-tab"]'
+				);
+
+				expect(nextYearTab.exists()).toBeTruthy();
+				expect(currentYearTab.exists()).toBeTruthy();
+				expect(previousYearTab.exists()).toBeTruthy();
+			});
+
+			it("should have current year tab active", () => {
+				const { wrapper } = setup();
+
+				const currentYearTab = wrapper.find(
+					'[data-testid="admin-class-current-year-tab"]'
+				);
+
+				expect(currentYearTab.classes()).toContain("v-tab--active");
+			});
+		});
+
+		describe("when clicking on a tab", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should replace the route to the given tab ", () => {
+				const { wrapper } = setup();
+
+				wrapper
+					.find('[data-testid="admin-class-next-year-tab"]')
+					.trigger("click");
+
+				expect($router.replace).toHaveBeenCalledWith({
+					query: { tab: "next" },
+				});
+			});
+		});
+
+		describe("when clicking on next year tab", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to load classes of next year", () => {
+				const { wrapper, groupModule } = setup();
+
+				wrapper
+					.find('[data-testid="admin-class-next-year-tab"]')
+					.trigger("click");
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalledWith(
+					"nextYear"
+				);
+			});
+		});
+
+		describe("when clicking on previous years tab", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to load classes of previous years", () => {
+				const { wrapper, groupModule } = setup();
+
+				wrapper
+					.find('[data-testid="admin-class-previous-years-tab"]')
+					.trigger("click");
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalledWith(
+					"previousYears"
+				);
+			});
+		});
+
+		describe("when clicking on current year tab", () => {
+			const setup = () => {
+				const { wrapper, groupModule } = getWrapper();
+
+				return {
+					wrapper,
+					groupModule,
+				};
+			};
+
+			it("should call store to load groups and classes of current year", () => {
+				const { wrapper, groupModule } = setup();
+
+				wrapper
+					.find('[data-testid="admin-class-next-year-tab"]')
+					.trigger("click");
+
+				wrapper
+					.find('[data-testid="admin-class-current-year-tab"]')
+					.trigger("click");
+
+				expect(groupModule.loadClassesForSchool).toHaveBeenCalledWith(
+					"currentYear"
+				);
+			});
+		});
+	});
+
+	describe("addClass", () => {
+		describe("when clicking on add class buttton", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper();
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should redirect to legacy create class page", () => {
+				const { wrapper } = setup();
+
+				const addClassBtn = wrapper.find(
+					'[data-testid="admin-class-add-button"]'
+				);
+
+				expect(addClassBtn.attributes().href).toStrictEqual(
+					"/administration/classes/create"
+				);
+			});
+		});
+	});
 });