Added Instance removal from admin

Author: lukablaskovic

src/components/Internship/Model_B/Model_B_Student_DirectApplication.vue

@@ -81,11 +81,13 @@ const directApplication = async () => {
 
 <template>
 	<component :is="Layout">
-		<SectionMain>
+		<SectionMain class="relative">
 			<SectionTitleLineWithButton :icon="mdiLaptop" title="Moja Praksa" main> </SectionTitleLineWithButton>
 			<p><b>Akademska godina:</b> {{ mainStore.academicYear }}</p>
 			<p><b>Voditelj:</b> {{ mainStore.voditelj_prakse }}</p>
-			<hr />
+
+			<br />
+			<img src="/illustrations/guy_with_glasses.svg" class="absolute right-0 top-0 mb-12 mr-6 mt-4 hidden w-1/12 max-w-full md:block" />
 			<br />
 			<SectionTitleLineWithButton :icon="mdiClipboardText" main title="Direktna prijava na zadatak"></SectionTitleLineWithButton>
 			<div class="flex flex-wrap text-base">Voditelj je odobrio zadatak koji ste prijavili u dogovoru s poslodavcem. Kako biste nastavili, morate se direktno prijaviti ispod. Ako ste već odradili praksu, molimo da to navedete u napomeni.</div>

src/components/Tables/TableStudents.vue

@@ -4,14 +4,15 @@ import { watch } from "vue";
 
 import { tableButtonMenuOptions } from "@/tableButtonMenuOptions.js";
 import { StudentMappings, UserTaskMappings } from "@/helpers/maps";
+import CardBoxModal from "@/components/Cardbox/CardBoxModal.vue";
+import { mdiEye, mdiMenuDown, mdiCloseOutline } from "@mdi/js";
 import ButtonMenu from "@/components/Premium/ButtonMenu.vue";
 import BaseButtons from "@/components/Base/BaseButtons.vue";
 import BaseButton from "@/components/Base/BaseButton.vue";
 import UserAvatar from "@/components/User/UserAvatar.vue";
 import BaseLevel from "@/components/Base/BaseLevel.vue";
 import PillTag from "@/components/PillTag/PillTag.vue";
 import LoadingOverlay from "../LoadingOverlay.vue";
-import { mdiEye, mdiMenuDown } from "@mdi/js";
 import { adminStore } from "@/main.js";
 import { useRoute } from "vue-router";
 
@@ -22,6 +23,7 @@ const route = useRoute();
 
 const sortDirection = ref("asc");
 const sortColumn = ref("ime");
+let instanceDeleteModalActive = ref(false);
 
 function sortStudents(studentsList) {
 	const sortedStudents = [...studentsList];
@@ -53,6 +55,7 @@ defineProps({
 
 const students = computed(() => adminStore.students);
 const selectedStudentInstanceID = ref(null);
+const selectedStudentInstanceIDForDelete = ref(null);
 
 const studentsFetched = computed(() => adminStore.studentsFetched);
 const emit = defineEmits(["show-student-diagram"]);
@@ -116,6 +119,14 @@ function showDiagram(student) {
 	emit("show-student-diagram", student);
 }
 
+function deleteProcessInstance(student) {
+	selectedStudentInstanceIDForDelete.value = student["process_instance_id"];
+	adminStore.setSelectedStudentForDelete(student);
+
+	instanceDeleteModalActive.value = true;
+	console.log(adminStore.selectedStudentForDelete);
+}
+
 onMounted(async () => {
 	await adminStore.getStudents();
 	if (route.params.process_instance_id) {
@@ -302,12 +313,28 @@ function toggleSortDirection(column) {
 				<td class="whitespace-nowrap before:hidden lg:w-1">
 					<BaseButtons type="justify-start lg:justify-end" no-wrap>
 						<BaseButton color="fipu_blue" :icon="mdiEye" small @click="showDiagram(student)" />
+						<BaseButton color="danger" :icon="mdiCloseOutline" small @click="deleteProcessInstance(student)" />
 					</BaseButtons>
 				</td>
 			</tr>
 		</tbody>
 	</table>
-
+	<div v-if="instanceDeleteModalActive">
+		<CardBoxModal v-model="instanceDeleteModalActive" title="Brisanje procesne instance" button="danger" has-cancel @confirm="adminStore.removeInstanceData()" button-label="Obriši">
+			<p>
+				<b>OPREZ!</b> Ova radnja će obrisati kompletnu procesnu instancu prakse za studenta: <b>{{ adminStore.selectedStudentForDelete.ime }} {{ adminStore.selectedStudentForDelete.prezime }}</b> uključujući sve podatke koje je student unio,
+				generirane prijavnice i dnevnik prakse. <b>Radnja je nepovratna.</b>
+			</p>
+			<br />
+			<p><b>ID procesne instance:</b> {{ adminStore.selectedStudentForDelete.process_instance_id }}</p>
+			<p><b>Baserow id_preferencije:</b> {{ adminStore.selectedStudentForDelete["process_instance_data"]["variables"]["id_preferencije"] }}</p>
+			<p><b>Baserow id_alokacija:</b> {{ adminStore.selectedStudentForDelete["process_instance_data"]["variables"]["id_alokacija"] }}</p>
+			<p><b>Baserow id_prijavnica:</b> {{ adminStore.selectedStudentForDelete["process_instance_data"]["variables"]["id_prijavnica"] }}</p>
+			<p><b>Baserow id_dnevnik_prakse:</b> {{ adminStore.selectedStudentForDelete["process_instance_data"]["variables"]["id_dnevnik_prakse"] }}</p>
+			<p class="mt-2">Jeste li sigurni da želite obrisati instancu i sve podatke?</p>
+			<br />
+		</CardBoxModal>
+	</div>
 	<div class="border-t border-gray-100 p-3 dark:border-slate-800 lg:px-6">
 		<BaseLevel>
 			<BaseButtons>

src/helpers/axios-wrapper.js

@@ -51,8 +51,11 @@ function createAxiosInstance(API_URL) {
 			const response = await AxiosInstance.patch(endpoint, data, { headers });
 			return response.data;
 		},
-		delete: async (endpoint, headers = {}) => {
-			const response = await AxiosInstance.delete(endpoint, { headers });
+		delete: async (endpoint, data = {}, headers = {}) => {
+			const response = await AxiosInstance.delete(endpoint, {
+				headers,
+				data,
+			});
 			return response.data;
 		},
 	};

src/services/baserow_client_api.js

@@ -181,5 +181,29 @@ const Admin = {
 			return null;
 		}
 	},
+	async completeInstanceRemoval(data) {
+		try {
+			if (!data.process_instance_id) {
+				throw new Error('"process_instance_id" is required');
+			}
+
+			Object.keys(data).forEach((key) => {
+				if (key !== "process_instance_id" && (data[key] === undefined || data[key] === null)) {
+					delete data[key];
+				}
+			});
+
+			if (Object.keys(data).length === 0) {
+				throw new Error("No valid data to send");
+			}
+			console.log("data im sending:", data);
+			let result = await AxiosWrapper.delete("complete-deletion", data);
+			console.log("Baserow process instance complete deletion result:", result);
+			return result;
+		} catch (error) {
+			console.log("Error:", error);
+			return null;
+		}
+	},
 };
 export { Guest, Admin, Student };

src/services/bpmn_engine_api.js

@@ -93,6 +93,18 @@ const ProcessInstance = {
 			return null;
 		}
 	},
+
+	async removeInstance(instance_id) {
+		try {
+			let result = await AxiosWrapper.delete(`/instance/${instance_id}`);
+			console.log(`Successfuly removed instance with id: ${instance_id} from BPMN engine.`);
+			return result;
+		} catch (error) {
+			console.log("Error:", error);
+
+			return null;
+		}
+	},
 };
 
 export { ProcessInstance, Model };

src/stores/admin_store.ts

@@ -4,6 +4,7 @@ import { mainStore } from "@/main";
 import { Model, ProcessInstance } from "@/services/bpmn_engine_api";
 import { Admin, Student } from "@/services/baserow_client_api";
 import { SendGrid } from "@/services/sendgrid_client_api";
+import { snackBarStore } from "@/main";
 import Utils from "@/helpers/utils";
 
 // Define interfaces for state properties
@@ -58,10 +59,19 @@ interface Event {
 	student_email?: string;
 }
 
+interface InstanceRemovalData {
+	process_instance_id: string;
+	id_preferencije?: string;
+	id_alokacija?: string;
+	id_prijavnica?: string;
+	id_dnevnik_prakse?: string;
+}
+
 export const useAdminStore = defineStore("admin", {
 	state: () => ({
 		students: [] as Student[],
 		selectedStudent: null as Student | null,
+		selectedStudentForDelete: null as Student | null,
 		companies: [] as any[],
 		studentsFetched: false,
 		newAssignments: [] as any[],
@@ -160,6 +170,11 @@ export const useAdminStore = defineStore("admin", {
 		setSelectedStudent(student: Student | null) {
 			this.selectedStudent = student;
 		},
+
+		setSelectedStudentForDelete(student: Student | null) {
+			this.selectedStudentForDelete = student;
+		},
+
 		async getProcessInstanceData(student: Student) {
 			try {
 				const response = await ProcessInstance.get(student.process_instance_id);
@@ -324,6 +339,38 @@ export const useAdminStore = defineStore("admin", {
 				console.log("[admin_store].sendAnAdditionalEmail(): ", error);
 			}
 		},
+		async removeInstanceData() {
+			const data = {
+				process_instance_id: this.selectedStudentForDelete.process_instance_id,
+				id_alokacija: this.selectedStudentForDelete?.process_instance_data?.variables?.id_alokacija,
+				id_preferencije: this.selectedStudentForDelete?.process_instance_data?.variables?.id_preferencije,
+				id_prijavnica: this.selectedStudentForDelete?.process_instance_data?.variables?.id_prijavnica,
+				id_dnevnik_prakse: this.selectedStudentForDelete?.process_instance_data?.variables?.id_dnevnik_prakse,
+			} as InstanceRemovalData;
+
+			console.log("data:::", data);
+
+			try {
+				let process_instance_id = data.process_instance_id;
+
+				const response_engine = await ProcessInstance.removeInstance(process_instance_id);
+
+				let response_baserow = null;
+				if (process_instance_id || data.id_alokacija || data.id_preferencije || data.id_prijavnica || data.id_dnevnik_prakse) {
+					response_baserow = await Admin.completeInstanceRemoval(data);
+				}
+
+				if (response_engine && (response_baserow !== null || data.id_alokacija === undefined)) {
+					snackBarStore.pushMessage("Uspješno izbrisana instanca!", "success");
+					return true;
+				} else {
+					return false;
+				}
+			} catch (error) {
+				console.error("[admin_store].removeInstanceData(): ", error);
+				throw error; // Rethrow the error so it can be handled upstream
+			}
+		},
 	},
 	persist: {
 		storage: sessionStorage,

src/stores/main_store.ts

@@ -12,7 +12,7 @@ export interface Assignment {
 
 export const useMainStore = defineStore("main", {
 	state: () => ({
-		praksa_version: "1.0.3",
+		praksa_version: "1.1.0",
 		academicYear: "2024/2025",
 		voditelj_prakse: "doc. dr. sc. Ivan Lorencin",