Skip to content

Commit

Permalink
BC-5426 - Add a delete option to the school specific Privacy Policy a…
Browse files Browse the repository at this point in the history 
…nd Terms of Use (#2853)

* add delete action to terms of use and privacy policy modules

* add views and actions to remove terms of use and privacy policy

* add an option to download policy and terms from new admin page
  • Loading branch information
@davwas
davwas authored Oct 18, 2023
1 parent c5373a9 commit da6e4be
Show file tree
Hide file tree
Showing 17 changed files with 526 additions and 145 deletions.
47 changes: 37 additions & 10 deletions src/components/organisms/administration/SchoolPolicy.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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",
Expand Down Expand Up @@ -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,
}),
Expand All @@ -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,
},
});

Expand Down Expand Up @@ -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
);
});
Expand Down Expand Up @@ -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);
});
});

Expand Down
112 changes: 89 additions & 23 deletions src/components/organisms/administration/SchoolPolicy.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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";
Expand All @@ -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(
Expand All @@ -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 = () => {
Expand All @@ -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>
8 changes: 4 additions & 4 deletions src/components/organisms/administration/SchoolPolicyFormDialog.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe("SchoolPolicyFormDialog", () => {

notifierModule = createModuleMocks(NotifierModule);

const wrapper: Wrapper<Vue> = mount(
const wrapper: Wrapper<any> = mount(
SchoolPolicyFormDialog as MountOptions<Vue>,
{
...createComponentMocks({
Expand All @@ -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);
});
Expand All @@ -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");
});
});
Expand Down
Loading

0 comments on commit da6e4be

Please sign in to comment.