Merge branch 'main' into BC-820-design-improvement-admin-page

# Conflicts:
#	src/components/organisms/administration/SchoolPolicy.unit.ts
#	src/components/organisms/administration/SchoolPolicy.vue
#	src/components/organisms/administration/SchoolTerms.unit.ts
#	src/components/organisms/administration/SchoolTerms.vue

src/components/organisms/administration/SchoolPolicy.unit.ts

@@ -2,6 +2,7 @@ import SchoolPolicy from "./SchoolPolicy.vue";
 import AuthModule from "@/store/auth";
 import SchoolsModule from "@/store/schools";
 import PrivacyPolicyModule from "@/store/privacy-policy";
+import NotifierModule from "@/store/notifier";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { shallowMount, Wrapper } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
@@ -10,15 +11,20 @@ import { ConsentVersion } from "@/store/types/consent-version";
 import {
 	AUTH_MODULE_KEY,
 	I18N_KEY,
+	NOTIFIER_MODULE_KEY,
 	PRIVACY_POLICY_MODULE_KEY,
 	SCHOOLS_MODULE_KEY,
 } from "@/utils/inject";
 import { i18nMock } from "@@/tests/test-utils";
+import { downloadFile } from "@/utils/fileHelper";
+
+jest.mock("@/utils/fileHelper");
 
 describe("SchoolPolicy", () => {
 	let authModule: jest.Mocked<AuthModule>;
 	let schoolsModule: jest.Mocked<SchoolsModule>;
 	let privacyPolicyModule: jest.Mocked<PrivacyPolicyModule>;
+	let notifierModule: jest.Mocked<NotifierModule>;
 
 	const mockPolicy: ConsentVersion = {
 		_id: "123",
@@ -67,6 +73,8 @@ describe("SchoolPolicy", () => {
 			...getters,
 		});
 
+		notifierModule = createModuleMocks(NotifierModule);
+
 		const wrapper: Wrapper<any> = shallowMount(SchoolPolicy, {
 			...createComponentMocks({
 				i18n: true,
@@ -76,6 +84,7 @@ describe("SchoolPolicy", () => {
 				[PRIVACY_POLICY_MODULE_KEY.valueOf()]: privacyPolicyModule,
 				[AUTH_MODULE_KEY.valueOf()]: authModule,
 				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
+				[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
 			},
 		});
 
@@ -107,22 +116,20 @@ describe("SchoolPolicy", () => {
 	});
 
 	describe("when privacy policy is found", () => {
-		it("should render download button", () => {
+		it("should render delete button", () => {
 			const wrapper = setup();
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
-				true
-			);
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true);
 		});
 	});
 
 	describe("when privacy policy is not found", () => {
-		it("should not render download button", () => {
+		it("should not render delete button", () => {
 			const wrapper = setup({
 				getPrivacyPolicy: null,
 			});
 
-			expect(wrapper.find('[data-testid="download-button"]').exists()).toBe(
+			expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(
 				false
 			);
 		});
@@ -166,6 +173,27 @@ describe("SchoolPolicy", () => {
 		});
 	});
 
+	describe("when user clicks delete button", () => {
+		it("should change isDeletePolicyDialogOpen to true", () => {
+			const wrapper = setup();
+
+			expect(wrapper.vm.isDeletePolicyDialogOpen).toBe(false);
+			wrapper.find('[data-testid="delete-button"]').trigger("click");
+			expect(wrapper.vm.isDeletePolicyDialogOpen).toBe(true);
+		});
+	});
+
+	describe("when user clicks policy item", () => {
+		it("should call downloadFile method", () => {
+			const wrapper = setup();
+
+			const downloadFileMock = jest.mocked(downloadFile).mockReturnValueOnce();
+
+			wrapper.find('[data-testid="policy-item"]').vm.$emit("click");
+			expect(downloadFileMock).toHaveBeenCalledTimes(1);
+		});
+	});
+
 	describe("when error is thrown in privacyPolicyModule", () => {
 		it("should render error alert", () => {
 			const wrapper = setup({

src/components/organisms/administration/SchoolPolicy.vue

@@ -19,8 +19,17 @@
 				class="mb-6"
 				data-testid="progress-bar"
 			/>
-			<v-list-item v-else two-line dense data-testid="policy-item">
-				<v-list-item-icon>
+			<v-list-item
+				v-else
+				two-line
+				dense
+				class="mb-6"
+				data-testid="policy-item"
+				@click="downloadPolicy"
+				:class="{ 'item-no-action': !privacyPolicy }"
+				:ripple="privacyPolicy !== null"
+			>
+				<v-list-item-icon class="me-4">
 					<v-icon>$file_pdf_outline</v-icon>
 				</v-list-item-icon>
 				<v-list-item-content>
@@ -31,9 +40,7 @@
 						<template v-if="privacyPolicy">
 							{{
 								t("pages.administration.school.index.schoolPolicy.uploadedOn", {
-									date: dayjs(privacyPolicy.publishedAt).format(
-										t("format.dateTime")
-									),
+									date: formatDate(privacyPolicy.publishedAt),
 								})
 							}}
 						</template>
@@ -48,32 +55,30 @@
 				</v-list-item-content>
 				<v-list-item-action
 					v-if="hasSchoolEditPermission"
-					class="edit-icon"
 					data-testid="edit-button"
-					@click="isSchoolPolicyFormDialogOpen = true"
+					@click.stop="isSchoolPolicyFormDialogOpen = true"
 				>
 					<v-btn
 						icon
 						:aria-label="
 							t('pages.administration.school.index.schoolPolicy.edit')
 						"
 					>
-						<v-icon>$mdiPencilOutline</v-icon>
+						<v-icon>$mdiTrayArrowUp</v-icon>
 					</v-btn>
 				</v-list-item-action>
 				<v-list-item-action
 					v-if="privacyPolicy"
-					class="download-icon"
-					data-testid="download-button"
-					@click="downloadFile"
+					data-testid="delete-button"
+					@click.stop="isDeletePolicyDialogOpen = true"
 				>
 					<v-btn
 						icon
 						:aria-label="
-							t('pages.administration.school.index.schoolPolicy.download')
+							t('pages.administration.school.index.schoolPolicy.delete.title')
 						"
 					>
-						<v-icon>$mdiTrayArrowDown</v-icon>
+						<v-icon>$mdiTrashCanOutline</v-icon>
 					</v-btn>
 				</v-list-item-action>
 			</v-list-item>
@@ -83,13 +88,34 @@
 				@close="closeDialog"
 				data-testid="form-dialog"
 			/>
+			<v-custom-dialog
+				v-model="isDeletePolicyDialogOpen"
+				:size="430"
+				has-buttons
+				confirm-btn-title-key="common.actions.delete"
+				confirm-btn-icon="$mdiTrashCanOutline"
+				@dialog-confirmed="deleteFile"
+				data-testid="delete-dialog"
+			>
+				<h4 class="text-h4 mt-0" slot="title">
+					{{ t("pages.administration.school.index.schoolPolicy.delete.title") }}
+				</h4>
+				<template #content>
+					<v-alert light text type="info" class="mb-0">
+						<div class="alert-text">
+							{{
+								t("pages.administration.school.index.schoolPolicy.delete.text")
+							}}
+						</div>
+					</v-alert>
+				</template>
+			</v-custom-dialog>
 		</template>
 	</div>
 </template>
 
 <script lang="ts">
 import SchoolPolicyFormDialog from "@/components/organisms/administration/SchoolPolicyFormDialog.vue";
-import dayjs from "dayjs";
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from "vue";
 import { School } from "@/store/types/schools";
 import { ConsentVersion } from "@/store/types/consent-version";
@@ -100,20 +126,27 @@ import {
 	PRIVACY_POLICY_MODULE_KEY,
 	injectStrict,
 	SCHOOLS_MODULE_KEY,
+	NOTIFIER_MODULE_KEY,
 } from "@/utils/inject";
+import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
+import { downloadFile } from "@/utils/fileHelper";
+import { formatDateForAlerts } from "@/plugins/datetime";
 
 export default defineComponent({
 	name: "SchoolPolicy",
 	components: {
+		vCustomDialog,
 		SchoolPolicyFormDialog,
 	},
 	setup() {
 		const { t } = useI18n();
 		const authModule = injectStrict(AUTH_MODULE_KEY);
 		const privacyPolicyModule = injectStrict(PRIVACY_POLICY_MODULE_KEY);
 		const schoolsModule = injectStrict(SCHOOLS_MODULE_KEY);
+		const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
 
 		const isSchoolPolicyFormDialogOpen: Ref<boolean> = ref(false);
+		const isDeletePolicyDialogOpen: Ref<boolean> = ref(false);
 
 		const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
 		watch(
@@ -137,13 +170,28 @@ export default defineComponent({
 			() => privacyPolicyModule.getBusinessError
 		);
 
-		const downloadFile = () => {
-			const link = document.createElement("a");
-			link.href = privacyPolicy.value?.consentData.data as string;
-			link.download = t(
-				"pages.administration.school.index.schoolPolicy.fileName"
-			);
-			link.click();
+		const formatDate = (dateTime: string) =>
+			formatDateForAlerts(dateTime, true);
+
+		const downloadPolicy = () => {
+			if (privacyPolicy.value) {
+				downloadFile(
+					privacyPolicy.value.consentData.data,
+					t("pages.administration.school.index.schoolPolicy.fileName")
+				);
+			}
+		};
+
+		const deleteFile = async () => {
+			await privacyPolicyModule.deletePrivacyPolicy();
+
+			notifierModule.show({
+				text: t(
+					"pages.administration.school.index.schoolPolicy.delete.success"
+				),
+				status: "success",
+				timeout: 10000,
+			});
 		};
 
 		const closeDialog = () => {
@@ -153,12 +201,14 @@ export default defineComponent({
 		return {
 			t,
 			isSchoolPolicyFormDialogOpen,
+			isDeletePolicyDialogOpen,
 			hasSchoolEditPermission,
 			privacyPolicy,
 			status,
 			error,
-			downloadFile,
-			dayjs,
+			downloadPolicy,
+			deleteFile,
+			formatDate,
 			closeDialog,
 		};
 	},
@@ -170,4 +220,13 @@ export default defineComponent({
 	color: var(--v-black-base) !important;
 	line-height: var(--line-height-lg) !important;
 }
+
+.item-no-action {
+	&:hover {
+		cursor: default;
+	}
+	&:before {
+		background-color: unset;
+	}
+}
 </style>

src/components/organisms/administration/SchoolPolicyFormDialog.unit.ts

@@ -72,7 +72,7 @@ describe("SchoolPolicyFormDialog", () => {
 			const wrapper = setup();
 
 			expect(
-				wrapper.find('[data-testid="submit-button"]').attributes().disabled
+				wrapper.find('[data-testid="dialog-confirm"]').attributes().disabled
 			).toBeDefined();
 		});
 
@@ -88,7 +88,7 @@ describe("SchoolPolicyFormDialog", () => {
 		it("should emit 'close'", () => {
 			const wrapper = setup();
 
-			wrapper.find('[data-testid="cancel-button"]').trigger("click");
+			wrapper.find('[data-testid="dialog-cancel"]').trigger("click");
 			expect(wrapper.emitted()).toHaveProperty("close");
 		});
 	});

src/components/organisms/administration/SchoolPolicyFormDialog.vue

@@ -1,5 +1,14 @@
 <template>
-	<v-custom-dialog :is-open="isOpen" :size="450" @dialog-closed="cancel">
+	<v-custom-dialog
+		:is-open="isOpen"
+		:size="425"
+		@dialog-closed="cancel"
+		has-buttons
+		confirm-btn-title-key="pages.administration.school.index.schoolPolicy.replace"
+		confirm-btn-icon="$mdiFileReplaceOutline"
+		:confirm-btn-disabled="!isValid"
+		@dialog-confirmed="submit"
+	>
 		<h4 class="text-h4 mt-0" slot="title">
 			{{ t("common.words.privacyPolicy") }}
 		</h4>
@@ -43,32 +52,6 @@
 						>
 					</template>
 				</v-file-input>
-				<v-card-actions>
-					<v-spacer></v-spacer>
-					<div class="button-section button-right">
-						<v-btn
-							class="dialog-closed"
-							depressed
-							text
-							@click="cancel"
-							data-testid="cancel-button"
-						>
-							{{ t("pages.administration.school.index.schoolPolicy.cancel") }}
-						</v-btn>
-						<v-btn
-							class="icon-button dialog-confirmed px-6"
-							type="submit"
-							color="primary"
-							depressed
-							:disabled="!isValid"
-							@click.prevent="submit"
-							data-testid="submit-button"
-						>
-							<v-icon dense class="mr-1">$mdiFileReplaceOutline</v-icon>
-							{{ t("pages.administration.school.index.schoolPolicy.replace") }}
-						</v-btn>
-					</div>
-				</v-card-actions>
 			</v-form>
 		</template>
 	</v-custom-dialog>