BC-5426 - Add a delete option to the school specific Privacy Policy and Terms of Use

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,16 +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 Vue from "vue";
 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",
@@ -68,7 +73,9 @@ describe("SchoolPolicy", () => {
 			...getters,
 		});
 
-		const wrapper: Wrapper<Vue> = shallowMount(SchoolPolicy, {
+		notifierModule = createModuleMocks(NotifierModule);
+
+		const wrapper: Wrapper<any> = shallowMount(SchoolPolicy, {
 			...createComponentMocks({
 				i18n: true,
 			}),
@@ -77,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,
 			},
 		});
 
@@ -108,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
 			);
 		});
@@ -161,9 +167,30 @@ describe("SchoolPolicy", () => {
 		it("should change isSchoolPolicyFormDialogOpen to true", () => {
 			const wrapper = setup();
 
-			expect((wrapper.vm as any).isSchoolPolicyFormDialogOpen).toBe(false);
+			expect(wrapper.vm.isSchoolPolicyFormDialogOpen).toBe(false);
 			wrapper.find('[data-testid="edit-button"]').trigger("click");
-			expect((wrapper.vm as any).isSchoolPolicyFormDialogOpen).toBe(true);
+			expect(wrapper.vm.isSchoolPolicyFormDialogOpen).toBe(true);
+		});
+	});
+
+	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);
 		});
 	});
 

src/components/organisms/administration/SchoolPolicy.vue

@@ -21,8 +21,17 @@
 				class="mb-6"
 				data-testid="progress-bar"
 			/>
-			<v-list-item v-else two-line dense class="mb-6" 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>
@@ -33,9 +42,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>
@@ -50,32 +57,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>
@@ -85,13 +90,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>
 	</section>
 </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";
@@ -102,20 +128,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(
@@ -139,13 +172,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 = () => {
@@ -155,14 +203,32 @@ export default defineComponent({
 		return {
 			t,
 			isSchoolPolicyFormDialogOpen,
+			isDeletePolicyDialogOpen,
 			hasSchoolEditPermission,
 			privacyPolicy,
 			status,
 			error,
-			downloadFile,
-			dayjs,
+			downloadPolicy,
+			deleteFile,
+			formatDate,
 			closeDialog,
 		};
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.alert-text {
+	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

@@ -48,7 +48,7 @@ describe("SchoolPolicyFormDialog", () => {
 
 		notifierModule = createModuleMocks(NotifierModule);
 
-		const wrapper: Wrapper<Vue> = mount(
+		const wrapper: Wrapper<any> = mount(
 			SchoolPolicyFormDialog as MountOptions<Vue>,
 			{
 				...createComponentMocks({
@@ -72,13 +72,13 @@ describe("SchoolPolicyFormDialog", () => {
 			const wrapper = setup();
 
 			expect(
-				wrapper.find('[data-testid="submit-button"]').attributes().disabled
+				wrapper.find('[data-testid="dialog-confirm"]').attributes().disabled
 			).toBeDefined();
 		});
 
 		it("should render warning icon", async () => {
 			const wrapper = setup();
-			(wrapper.vm as any).isTouched = true;
+			wrapper.vm.isTouched = true;
 			await Vue.nextTick();
 			expect(wrapper.find('[data-testid="warning-icon"]').exists()).toBe(true);
 		});
@@ -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");
 		});
 	});