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,8 @@ describe("ExternalToolSection", () => {
 		ReturnType<typeof useSchoolExternalToolUsage>
 	>;
 
+	const deleteButtonIndex = 2;
+
 	const getWrapper = (getters: Partial<SchoolExternalToolsModule> = {}) => {
 		el = document.createElement("div");
 		el.setAttribute("data-app", "true");
@@ -149,6 +151,7 @@ describe("ExternalToolSection", () => {
 					},
 				],
 			});
+
 			return {
 				wrapper,
 				schoolExternalToolsModule,
@@ -231,14 +234,17 @@ describe("ExternalToolSection", () => {
 					expect(
 						firstRowButtons.at(1).classes().includes("v-btn--icon")
 					).toBeTruthy();
+					expect(
+						firstRowButtons.at(2).classes().includes("v-btn--icon")
+					).toBeTruthy();
 				});
 
 				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 +260,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 +289,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 +322,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 +407,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 +422,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 +441,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 +472,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 +487,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,6 @@
 </template>
 
 <script lang="ts">
-import { RenderHTML } from "@feature-render-html";
 import AuthModule from "@/store/auth";
 import NotifierModule from "@/store/notifier";
 import SchoolExternalToolsModule from "@/store/school-external-tools";
@@ -116,6 +116,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 +134,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 +181,12 @@ export default defineComponent({
 			});
 		};
 
+		const showDatasheet = (item: SchoolExternalToolItem) => {
+			window.open(
+				`${window.location.origin}/api/v3/tools/external-tools/${item.externalToolId}/datasheet`
+			);
+		};
+
 		const onDeleteTool = async () => {
 			if (itemToDelete.value) {
 				await schoolExternalToolsModule.deleteSchoolExternalTool(
@@ -232,6 +239,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,

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

@@ -1,28 +1,34 @@
-import { useExternalToolsSectionUtils } from "./external-tool-section-utils.composable";
-import { DataTableHeader } from "vuetify";
-import { schoolExternalToolsModule } from "@/store";
 import {
 	SchoolExternalToolResponse,
 	SchoolExternalToolSearchListResponse,
 } from "@/serverApi/v3";
-import { SchoolExternalToolItem } from "./school-external-tool-item";
+import { schoolExternalToolsModule } from "@/store";
 import { ContextExternalToolConfigurationStatusFactory } from "@@/tests/test-utils";
+import { DataTableHeader } from "vuetify";
+import SchoolExternalToolsModule from "../../store/school-external-tools";
+import { useExternalToolsSectionUtils } from "./external-tool-section-utils.composable";
+import { SchoolExternalToolItem } from "./school-external-tool-item";
 
-const schoolExternalToolsModuleMock = () => {
-	return {
-		getSchoolExternalTools: [
-			{
-				id: "id",
-				name: "toolName",
-				version: 1,
-				status: {
-					isOutdatedOnScopeSchool: false,
+const schoolExternalToolsModuleMock =
+	(): Partial<SchoolExternalToolsModule> => {
+		return {
+			getSchoolExternalTools: [
+				{
+					id: "id",
+					name: "toolName",
+					version: 1,
 					isDeactivated: false,
+					toolId: "toolId",
+					schoolId: "schoolId",
+					parameters: [],
+					status: {
+						isOutdatedOnScopeSchool: false,
+						isDeactivated: false,
+					},
 				},
-			},
-		],
+			],
+		};
 	};
-};
 
 jest.mock("@/store", () => ({
 	schoolExternalToolsModule: schoolExternalToolsModuleMock(),
@@ -60,6 +66,7 @@ describe("useSchoolExternalToolUtils", () => {
 			new SchoolExternalToolItem({
 				name: toolResponse.name,
 				id: toolResponse.id,
+				externalToolId: toolResponse.toolId,
 				statusText: "translationKey",
 				isOutdated: false,
 				isDeactivated: false,
@@ -135,14 +142,14 @@ describe("useSchoolExternalToolUtils", () => {
 				schoolExternalToolsModule
 			);
 
-			expect(items).toEqual([
+			expect(items).toEqual<SchoolExternalToolItem[]>([
 				{
 					id: "id",
+					externalToolId: "toolId",
 					name: "toolName",
 					statusText: "translated",
 					isOutdated: false,
 					isDeactivated: false,
-					version: undefined,
 				},
 			]);
 		});

src/components/administration/school-external-tool-item.ts

@@ -1,6 +1,8 @@
 export class SchoolExternalToolItem {
 	id: string;
 
+	externalToolId: string;
+
 	name: string;
 
 	statusText: string;
@@ -11,6 +13,7 @@ export class SchoolExternalToolItem {
 
 	constructor(props: SchoolExternalToolItem) {
 		this.id = props.id;
+		this.externalToolId = props.externalToolId;
 		this.name = props.name;
 		this.statusText = props.statusText;
 		this.isOutdated = props.isOutdated;

src/locales/de.json

@@ -182,6 +182,7 @@
 	"components.administration.externalToolsSection.description": "Die schulspezifischen Parameter für das externe Tool werden hier konfiguriert. Nach dem Speichern der Konfiguration ist das Tool innerhalb der Schule verfügbar.<br><br>\nWeitere Informationen sind in unserem <a href=\"https://docs.dbildungscloud.de/x/uoKqDg\" target=\"_blank\">Hilfebereich zu externen Tools</a> zu finden.",
 	"components.administration.externalToolsSection.table.header.status": "Status",
 	"components.administration.externalToolsSection.action.add": "Externes Tool hinzufügen",
+	"components.administration.externalToolsSection.action.showDatasheet": "Datenblatt anzeigen",
 	"components.administration.externalToolsSection.action.edit": "Tool bearbeiten",
 	"components.administration.externalToolsSection.action.delete": "Tool löschen",
 	"components.administration.externalToolsSection.dialog.title": "Externes Tool entfernen?",