N21-1626 ctl data sheet

src/components/administration/ExternalToolSection.unit.ts

@@ -10,18 +10,18 @@ import {
 } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { i18nMock } from "@@/tests/test-utils/i18nMock";
-import { mdiAlert, mdiCheckCircle } from "@mdi/js";
-import { mount, Wrapper } from "@vue/test-utils";
-import Vue, { ref } from "vue";
-import ExternalToolSection from "./ExternalToolSection.vue";
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { useSchoolExternalToolUsage } from "@data-external-tool";
 import {
 	schoolExternalToolFactory,
 	schoolExternalToolMetadataFactory,
 	schoolToolConfigurationStatusFactory,
 } from "@@/tests/test-utils/factory";
+import { i18nMock } from "@@/tests/test-utils/i18nMock";
+import { useSchoolExternalToolUsage } from "@data-external-tool";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { mdiAlert, mdiCheckCircle } from "@mdi/js";
+import { mount, Wrapper } from "@vue/test-utils";
+import Vue, { ref } from "vue";
+import ExternalToolSection from "./ExternalToolSection.vue";
 
 jest.mock("@data-external-tool");
 
@@ -32,6 +32,9 @@ describe("ExternalToolSection", () => {
 		ReturnType<typeof useSchoolExternalToolUsage>
 	>;
 
+	const createDatasheetButtonIndex = 1;
+	const deleteButtonIndex = 2;
+
 	const getWrapper = (getters: Partial<SchoolExternalToolsModule> = {}) => {
 		el = document.createElement("div");
 		el.setAttribute("data-app", "true");
@@ -111,18 +114,20 @@ describe("ExternalToolSection", () => {
 		const setupItems = () => {
 			const firstToolName = "Test";
 			const secondToolName = "Test2";
+			const schoolExternalTool = schoolExternalToolFactory.build({
+				id: "testId",
+				toolId: "toolId",
+				schoolId: "schoolId",
+				parameters: [],
+				name: firstToolName,
+				status: schoolToolConfigurationStatusFactory.build(),
+				version: 1,
+				isDeactivated: false,
+			});
+
 			const { wrapper, schoolExternalToolsModule } = getWrapper({
 				getSchoolExternalTools: [
-					{
-						id: "testId",
-						toolId: "toolId",
-						schoolId: "schoolId",
-						parameters: [],
-						name: firstToolName,
-						status: schoolToolConfigurationStatusFactory.build(),
-						version: 1,
-						isDeactivated: false,
-					},
+					schoolExternalTool,
 					{
 						id: "testId2",
 						toolId: "toolId",
@@ -149,11 +154,15 @@ describe("ExternalToolSection", () => {
 					},
 				],
 			});
+
+			jest.spyOn(window, "open");
+
 			return {
 				wrapper,
 				schoolExternalToolsModule,
 				firstToolName,
 				secondToolName,
+				schoolExternalTool,
 			};
 		};
 
@@ -231,14 +240,35 @@ describe("ExternalToolSection", () => {
 					expect(
 						firstRowButtons.at(1).classes().includes("v-btn--icon")
 					).toBeTruthy();
+					expect(
+						firstRowButtons.at(2).classes().includes("v-btn--icon")
+					).toBeTruthy();
+				});
+
+				it("should open a new tab with click on create datasheet", async () => {
+					const { wrapper, schoolExternalTool } = setupItems();
+					const toolId = schoolExternalTool.toolId;
+
+					const tableRows = wrapper.find("tbody").findAll("tr");
+					const firstRowButtons = tableRows.at(0).findAll("button");
+					const datasheetButton = firstRowButtons.at(
+						createDatasheetButtonIndex
+					);
+
+					await datasheetButton.trigger("click");
+					await Vue.nextTick();
+
+					expect(window.open).toHaveBeenCalledWith(
+						`/api/v3/tools/external-tools/${toolId}/datasheet`
+					);
 				});
 
 				it("a dialog should be displayed with click on delete", async () => {
 					const { wrapper } = setupItems();
 
 					const tableRows = wrapper.find("tbody").findAll("tr");
 					const firstRowButtons = tableRows.at(0).findAll("button");
-					const deleteButton = firstRowButtons.at(1);
+					const deleteButton = firstRowButtons.at(deleteButtonIndex);
 
 					await deleteButton.trigger("click");
 
@@ -254,7 +284,7 @@ describe("ExternalToolSection", () => {
 
 						const tableRows = wrapper.find("tbody").findAll("tr");
 						const firstRowButtons = tableRows.at(0).findAll("button");
-						const deleteButton = firstRowButtons.at(1);
+						const deleteButton = firstRowButtons.at(deleteButtonIndex);
 
 						await deleteButton.trigger("click");
 
@@ -283,7 +313,7 @@ describe("ExternalToolSection", () => {
 
 						const firstRowButtons = tableRows.at(0).findAll("button");
 
-						const deleteButton = firstRowButtons.at(1);
+						const deleteButton = firstRowButtons.at(deleteButtonIndex);
 						await deleteButton.trigger("click");
 
 						const confirmButton = wrapper.find(
@@ -316,7 +346,7 @@ describe("ExternalToolSection", () => {
 
 						const firstRowButtons = tableRows.at(0).findAll("button");
 
-						const deleteButton = firstRowButtons.at(1);
+						const deleteButton = firstRowButtons.at(deleteButtonIndex);
 						await deleteButton.trigger("click");
 
 						const confirmButton = wrapper.find(
@@ -401,7 +431,7 @@ describe("ExternalToolSection", () => {
 
 				const firstRowButtons = tableRows.at(0).findAll("button");
 
-				const deleteButton = firstRowButtons.at(1);
+				const deleteButton = firstRowButtons.at(deleteButtonIndex);
 				await deleteButton.trigger("click");
 
 				const dialog = wrapper.find('[data-testid="delete-dialog"]');
@@ -416,7 +446,7 @@ describe("ExternalToolSection", () => {
 
 				const firstRowButtons = tableRows.at(0).findAll("button");
 
-				const deleteButton = firstRowButtons.at(1);
+				const deleteButton = firstRowButtons.at(deleteButtonIndex);
 				await deleteButton.trigger("click");
 
 				const dialogContent = wrapper.find(
@@ -435,7 +465,7 @@ describe("ExternalToolSection", () => {
 
 				const firstRowButtons = tableRows.at(0).findAll("button");
 
-				const deleteButton = firstRowButtons.at(1);
+				const deleteButton = firstRowButtons.at(deleteButtonIndex);
 				await deleteButton.trigger("click");
 
 				expect(notifierModule.show).not.toHaveBeenCalled();
@@ -466,7 +496,7 @@ describe("ExternalToolSection", () => {
 
 				const firstRowButtons = tableRows.at(0).findAll("button");
 
-				const deleteButton = firstRowButtons.at(1);
+				const deleteButton = firstRowButtons.at(deleteButtonIndex);
 				await deleteButton.trigger("click");
 
 				const dialog = wrapper.find('[data-testid="delete-dialog"]');
@@ -481,7 +511,7 @@ describe("ExternalToolSection", () => {
 
 				const firstRowButtons = tableRows.at(0).findAll("button");
 
-				const deleteButton = firstRowButtons.at(1);
+				const deleteButton = firstRowButtons.at(deleteButtonIndex);
 				await deleteButton.trigger("click");
 
 				expect(notifierModule.show).toHaveBeenCalledWith({

src/components/administration/ExternalToolSection.vue

@@ -32,8 +32,9 @@
 			</template>
 			<template #[`item.actions`]="{ item }">
 				<external-tool-toolbar
-					@delete="openDeleteDialog(item)"
 					@edit="editTool(item)"
+					@datasheet="showDatasheet(item)"
+					@delete="openDeleteDialog(item)"
 				/>
 			</template>
 		</v-data-table>
@@ -105,7 +106,8 @@
 </template>
 
 <script lang="ts">
-import { RenderHTML } from "@feature-render-html";
+import { ToolApiAxiosParamCreator } from "@/serverApi/v3";
+import { RequestArgs } from "@/serverApi/v3/base";
 import AuthModule from "@/store/auth";
 import NotifierModule from "@/store/notifier";
 import SchoolExternalToolsModule from "@/store/school-external-tools";
@@ -116,6 +118,8 @@ import {
 	NOTIFIER_MODULE_KEY,
 	SCHOOL_EXTERNAL_TOOLS_MODULE_KEY,
 } from "@/utils/inject";
+import { useSchoolExternalToolUsage } from "@data-external-tool";
+import { RenderHTML } from "@feature-render-html";
 import { mdiAlert, mdiCheckCircle } from "@mdi/js";
 import {
 	computed,
@@ -132,7 +136,6 @@ import { DataTableHeader } from "vuetify";
 import { useExternalToolsSectionUtils } from "./external-tool-section-utils.composable";
 import ExternalToolToolbar from "./ExternalToolToolbar.vue";
 import { SchoolExternalToolItem } from "./school-external-tool-item";
-import { useSchoolExternalToolUsage } from "@data-external-tool";
 
 export default defineComponent({
 	name: "ExternalToolSection",
@@ -180,6 +183,15 @@ export default defineComponent({
 			});
 		};
 
+		const showDatasheet = async (item: SchoolExternalToolItem) => {
+			const requestArgs: RequestArgs =
+				await ToolApiAxiosParamCreator().toolControllerGetDatasheet(
+					item.externalToolId
+				);
+
+			window.open("/api/v3" + requestArgs.url);
+		};
+
 		const onDeleteTool = async () => {
 			if (itemToDelete.value) {
 				await schoolExternalToolsModule.deleteSchoolExternalTool(
@@ -232,6 +244,7 @@ export default defineComponent({
 			isLoading,
 			editTool,
 			onDeleteTool,
+			showDatasheet,
 			isDeleteDialogOpen,
 			openDeleteDialog,
 			onCloseDeleteDialog,

src/components/administration/ExternalToolToolbar.unit.ts

@@ -31,9 +31,10 @@ describe("ExternalToolToolbar", () => {
 
 			const actions = wrapper.findAll("button");
 
-			expect(actions.length).toEqual(2);
+			expect(actions.length).toEqual(3);
 			expect(actions.at(0).classes().includes("v-btn--icon")).toBeTruthy();
 			expect(actions.at(1).classes().includes("v-btn--icon")).toBeTruthy();
+			expect(actions.at(2).classes().includes("v-btn--icon")).toBeTruthy();
 		});
 
 		describe("when action button is clicked", () => {
@@ -46,6 +47,15 @@ describe("ExternalToolToolbar", () => {
 				expect(wrapper.emitted("edit")).toHaveLength(1);
 			});
 
+			it("should emit datasheet event", async () => {
+				setup();
+
+				const datasheetButton = wrapper.find("[data-testId=datasheetAction]");
+				await datasheetButton.trigger("click");
+
+				expect(wrapper.emitted("datasheet")).toHaveLength(1);
+			});
+
 			it("should emit delete event", async () => {
 				setup();
 

src/components/administration/ExternalToolToolbar.vue

@@ -3,6 +3,7 @@
 		<v-btn
 			icon
 			data-testId="editAction"
+			:title="$t('components.administration.externalToolsSection.action.edit')"
 			:aria-label="
 				$t('components.administration.externalToolsSection.action.edit')
 			"
@@ -12,9 +13,29 @@
 				{{ mdiPencilOutline }}
 			</v-icon>
 		</v-btn>
+		<v-btn
+			icon
+			data-testId="datasheetAction"
+			:title="
+				$t(
+					'components.administration.externalToolsSection.action.showDatasheet'
+				)
+			"
+			:aria-label="
+				$t(
+					'components.administration.externalToolsSection.action.showDatasheet'
+				)
+			"
+			@click="$emit('datasheet')"
+		>
+			<v-icon> {{ mdiFileDocumentOutline }}</v-icon>
+		</v-btn>
 		<v-btn
 			icon
 			data-testId="deleteAction"
+			:title="
+				$t('components.administration.externalToolsSection.action.delete')
+			"
 			:aria-label="
 				$t('components.administration.externalToolsSection.action.delete')
 			"
@@ -28,16 +49,21 @@
 </template>
 
 <script lang="ts">
+import {
+	mdiFileDocumentOutline,
+	mdiPencilOutline,
+	mdiTrashCanOutline,
+} from "@mdi/js";
 import { defineComponent } from "vue";
-import { mdiPencilOutline, mdiTrashCanOutline } from "@mdi/js";
 
 export default defineComponent({
 	name: "ExternalToolToolbar",
-	emits: ["delete", "edit"],
+	emits: ["edit", "datasheet", "delete"],
 	setup() {
 		return {
 			mdiPencilOutline,
 			mdiTrashCanOutline,
+			mdiFileDocumentOutline,
 		};
 	},
 });

src/components/administration/external-tool-section-utils.composable.ts

@@ -1,7 +1,7 @@
-import { DataTableHeader } from "vuetify";
-import { SchoolExternalToolItem } from "./school-external-tool-item";
 import { SchoolExternalTool } from "@/store/external-tool";
 import SchoolExternalToolsModule from "@/store/school-external-tools";
+import { DataTableHeader } from "vuetify";
+import { SchoolExternalToolItem } from "./school-external-tool-item";
 
 export function useExternalToolsSectionUtils(
 	t: (key: string) => string = () => ""
@@ -40,6 +40,7 @@ export function useExternalToolsSectionUtils(
 
 			return {
 				id: tool.id,
+				externalToolId: tool.toolId,
 				name: tool.name,
 				statusText: t(statusTranslationKey),
 				isOutdated: tool.status.isOutdatedOnScopeSchool,