1.0.0-beta.6: UI bugfixes, some QoL changes

- removed requirement that internship must not begin in past, for application form at Student
- UI bugfixs cardbox allocation
- some text edits
- admins will now see e-mail stored in engine when re-sending emails

1.0.0-beta.6

Author: lukablaskovic

src/components/AsideMenu/AsideMenuItem.vue

@@ -97,7 +97,7 @@ const menuClick = (event) => {
 			class="flex cursor-pointer transition-all duration-150"
 			:class="[componentClass, isCompact ? 'justify-center' : 'justify-start', item.color == 'info' ? 'hover:bg-fipu_dark_blue' : 'hover:bg-gray-900/75']">
 			<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none transition-all duration-300" :w="isCompact ? 'w-8 lg:w-16' : 'w-8'" :size="item.size ? item.size : 18" :class="[vSlot && vSlot.isExactActive ? asideMenuItemActiveStyle : asideMenuItemInactiveStyle, { relative: item.updateMark }, item.color == 'info' ? 'text-slate-800' : '']">
-				<UpdateMark v-if="(item.updateMark && adminStore.dashboard_data.waiting_for_allocation > 0) || adminStore.dashboard_data.b_waiting_for_assignment_approval > 0" :color="item.updateMark" :position="isCompact ? 'top-0 left-5 md:left-9' : 'top-0 left-5'" />
+				<UpdateMark v-if="item.updateMark && (adminStore.dashboard_data.waiting_for_allocation > 0 || adminStore.dashboard_data.b_waiting_for_assignment_approval > 0 || adminStore.dashboard_data.waiting_for_mark > 0)" :color="item.updateMark" :position="isCompact ? 'top-0 left-5 md:left-9' : 'top-0 left-5'" />
 			</BaseIcon>
 
 			<span class="line-clamp-1 text-clip transition-all duration-300" :class="[{ '': isCompact, '': !hasSub }, vSlot && vSlot.isExactActive ? asideMenuItemActiveStyle : asideMenuItemInactiveStyle, isCompact ? (item.menu == undefined ? 'w-52 lg:w-0' : 'w-40 lg:w-0') : 'w-40', item.color == 'info' ? 'font-medium text-slate-900 hover:underline' : '']">

src/components/BPMN/BpmnDiagram.vue

@@ -205,7 +205,9 @@ function applyCustomStyling(highlightColor, highlightElementId, viewer) {
 			}
 		}
 	}
+
 	// must be tested
+
 	// Animate the highlighting in order
 	directPath.forEach((element, index) => {
 		setTimeout(
@@ -216,8 +218,8 @@ function applyCustomStyling(highlightColor, highlightElementId, viewer) {
 					applyHighlight(element, "highlight");
 				}
 
-				// If the element is a Gateway, apply highlights to all outgoing connections
-				if (element.type === "bpmn:ParallelGateway" || element.type === "bpmn:ExclusiveGateway") {
+				// If the element is a ParallelGateway, apply highlights to all outgoing connections
+				if (element.type === "bpmn:ParallelGateway") {
 					const outgoing = element.outgoing || [];
 					outgoing.forEach((connection) => {
 						applyHighlight(connection.target, "highlight-previous");

src/components/Cardbox/CardBoxAllocation.vue

@@ -4,13 +4,9 @@
 
 		<div class="sm:flex sm:justify-between sm:gap-4">
 			<div>
-				<h1 class="text-lg font-bold sm:text-2xl">
+				<h1 class="text-xl font-bold sm:text-2xl">
 					{{ props.data.id_zadatak }}
 				</h1>
-				<h3 class="text-lg font-bold sm:text-xl">
-					{{ truncatedDescription }}
-				</h3>
-
 				<p class="mt-1 text-xs font-medium text-gray-600 dark:text-gray-200">
 					{{ props.data["Poslodavac"][0]["value"] }}:
 					{{ props.data.poslodavac_email }}
@@ -23,7 +19,7 @@
 		</div>
 
 		<div>
-			<p class="text-sm text-gray-500 dark:text-gray-300">
+			<p class="mt-4 text-sm text-gray-500 dark:text-gray-300 sm:mt-0">
 				{{ props.data.opis_zadatka }}
 			</p>
 		</div>

src/components/Cardbox/CardBoxModal.vue

@@ -4,7 +4,7 @@ import BaseButtons from "@/components/Base/BaseButtons.vue";
 import BaseButton from "@/components/Base/BaseButton.vue";
 import OverlayLayer from "@/components/OverlayLayer.vue";
 import CardBox from "@/components/Cardbox/CardBox.vue";
-import { computed, onMounted } from "vue";
+import { computed, watch } from "vue";
 
 const props = defineProps({
 	title: {
@@ -49,6 +49,14 @@ const value = computed({
 	set: (value) => emit("update:modelValue", value),
 });
 
+watch(value, (newValue) => {
+	if (newValue) {
+		document.body.style.overflow = "hidden";
+	} else {
+		document.body.style.overflow = "";
+	}
+});
+
 const confirmCancel = (mode) => {
 	value.value = false;
 	emit(mode);
@@ -76,14 +84,16 @@ window.addEventListener("keydown", (e) => {
 				'mobile-fullscreen': !isLogout,
 			}"
 			is-modal>
-			<CardBoxComponentTitle :title="title"> </CardBoxComponentTitle>
+			<div class="modal-content">
+				<CardBoxComponentTitle :title="title"></CardBoxComponentTitle>
 
-			<slot v-if="modelValue != null" :assignment="modelValue"></slot>
+				<slot v-if="modelValue != null" :assignment="modelValue"></slot>
 
-			<BaseButtons class="justify-center">
-				<BaseButton v-if="hasConfirm" :label="buttonLabel" :color="button" :disabled="disabledCondition" @click="confirm" />
-				<BaseButton v-if="hasCancel" label="Natrag" :color="button" outline @click="cancel" />
-			</BaseButtons>
+				<BaseButtons class="justify-center">
+					<BaseButton v-if="hasConfirm" :label="buttonLabel" :color="button" :disabled="disabledCondition" @click="confirm" />
+					<BaseButton v-if="hasCancel" label="Natrag" :color="button" outline @click="cancel" />
+				</BaseButtons>
+			</div>
 		</CardBox>
 	</OverlayLayer>
 </template>
@@ -102,13 +112,19 @@ window.addEventListener("keydown", (e) => {
 		max-height: 100vh;
 		top: 0;
 		left: 0;
-		right: 0;
-		bottom: 0;
 		position: fixed;
 		margin: 0;
 		border-radius: 0;
 		overflow-y: auto;
-		padding: 1rem;
+	}
+
+	/* Center the content inside the modal */
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 100%;
 	}
 }
 </style>

src/components/Internship/Student_DnevnikPrakseForm.vue

@@ -106,7 +106,7 @@ async function submit_diary_form() {
 			<br />
 			<SectionTitleLineWithButton :icon="mdiNotebook" main title="Dnevnik prakse"></SectionTitleLineWithButton>
 			<p><b>Nakon što se završili praksu</b> i ispunili sve vaše obaveze, predajete dnevnik prakse skupa s ispunjenom potvrdom o obavljenoj praksi.</p>
-			<p>Potvrdu ispunjava vaš mentor, vi predajete PDF sken ispunjene potvrde.</p>
+			<p>Potvrdu ispunjava vaš mentor, vi predajete PDF sken (ili digitalno potpisani PDF) ispunjene potvrde.</p>
 			<p>Dnevnik prakse je potrebno predati prije prijave ispitnog roka.</p>
 			<br />
 			<p>
@@ -129,7 +129,7 @@ async function submit_diary_form() {
 					</FormField>
 
 					<FormField
-						label="PDF sken ispunjene potvrde o obavljenoj praksi"
+						label="PDF ispunjene potvrde o obavljenoj praksi"
 						help="obavezno PDF format
 "
 						horizontal>

src/components/Internship/Student_PrijavnicaForm.vue

@@ -93,7 +93,6 @@ const rules = {
 	student_email: {
 		required: helpers.withMessage("Polje je obavezno", required),
 		email: helpers.withMessage("Molimo unesite ispravnu e-mail adresu", email),
-		isUnipuEmail: helpers.withMessage("E-mail mora biti UNIPU adresa", isUnipuEmail),
 	},
 	mentor_ime: {
 		required: helpers.withMessage("Polje je obavezno", required),
@@ -117,13 +116,6 @@ const rules = {
 	pocetak_prakse: {
 		required: helpers.withMessage("Polje je obavezno", required),
 
-		dateMustBeAfterCurrentDate: helpers.withMessage("Datum početka ne može biti u prošlosti", (value) => {
-			const currentDate = new Date();
-			const selectedDate = new Date(value);
-
-			return !(selectedDate <= currentDate);
-		}),
-
 		dateMustBeBeforeKrajPrakse: helpers.withMessage("Datum početka ne može biti nakon datuma završetka", (value) => {
 			const krajPrakseDate = new Date(form.kraj_prakse);
 			const selectedDate = new Date(value);

src/router/index.js

@@ -22,7 +22,6 @@ router.beforeEach((to, from, next) => {
 
 	const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
 	const requiresAdmin = to.matched.some((record) => record.meta.requiresAdmin);
-	//console.log("to", to, "from", from, "next", next);
 
 	// Handle redirection from root path
 	if (to.path === "/") {

src/router/routes.js

@@ -175,8 +175,8 @@ const routes = [
 		component: () => import("@/views/NewAssignmentFormPublic.vue"),
 	},
 	{
-		path: "/error",
-		name: "ErrorView",
+		path: "/:pathMatch(.*)*", // Vue 3 wildcard route
+		name: "ne postoji",
 		component: () => import("@/views/common/ErrorView.vue"),
 	},
 ];

src/stores/admin_store.ts

@@ -86,8 +86,9 @@ export const useAdminStore = defineStore("admin", {
 		selectedEvents: [] as any[], // Assuming events are not yet typed
 		events: [] as Event[], // Typed array of Event
 		relativeToNowTimestmap: true,
-		filterActiveInstances: true,
-		filterFinishedInstances: true,
+		filterActiveInstances: false,
+
+		filterFinishedInstances: false,
 		availableAssignmentsFilter: true,
 
 		filterModelA: "AB",

src/stores/main_store.ts

@@ -12,7 +12,7 @@ export interface Assignment {
 
 export const useMainStore = defineStore("main", {
 	state: () => ({
-		praksa_version: "1.0.0-beta.5",
+		praksa_version: "1.0.0-beta.6",
 		academicYear: "2024/2025",
 		voditelj_prakse: "doc. dr. sc. Ivan Lorencin",
 
@@ -65,7 +65,6 @@ export const useMainStore = defineStore("main", {
 
 	actions: {
 		async fetchCurrentUser(): Promise<void> {
-			console.log("Fetching current user");
 			try {
 				let sessionStorageToken;
 				try {
@@ -258,7 +257,7 @@ export const useMainStore = defineStore("main", {
 	},
 	persist: {
 		storage: sessionStorage,
-		omit: ["assignments", "checkedAssignments", "praksa_version"],
+		omit: ["assignments", "checkedAssignments"],
 		debug: true,
 	},
 });

src/views/EvaluationView.vue

@@ -101,7 +101,7 @@ const updateDisabledCondition = (allFilled) => {
 
 				<p class="mb-4">Molimo da nakon što evaluirate studenta (bilo to kroz intervju, tehnički ispit ili pak bez procesa selekcije) potvrdite prihvaćate li studenta za obavljanje prakse u Vašem poduzeću.</p>
 
-				<FormDynamic v-if="pendingTaskInfo != null" v-model="formDynamicValues" class="mb-4" :form-fields="pendingTaskInfo.form_fields" :variables="instanceInfo.variables" :documentation="pendingTaskInfo.documentation" @all-fields-filled="updateDisabledCondition" />
+				<FormDynamic v-if="pendingTaskInfo != null" v-model="formDynamicValues" class="mb-4 rounded-md p-1" :form-fields="pendingTaskInfo.form_fields" :variables="instanceInfo.variables" :documentation="pendingTaskInfo.documentation" @all-fields-filled="updateDisabledCondition" />
 
 				<BaseButton v-if="formDynamicValues['kandidat_odobren']" class="mb-4" label="Potvrdi" :loading="isLoading" color="fipu_blue" @disabled="disabledCondition" @click="handleNewInstance()" />
 			</div>

src/views/admin/DashboardView.vue

@@ -222,7 +222,7 @@ const toggleDateType = () => {
 					</div>
 
 					<div class="flex flex-row">
-						<div class="mb-4"><PillTag class="cursor-pointer" :left="false" :icon="adminStore.filterActiveInstances ? mdiAccountGroup : mdiAccountMultiple" :color="adminStore.filterActiveInstances ? 'info' : 'success'" :label="adminStore.filterActiveInstances ? 'Sve instance' : 'Samo aktivne'" @click="toggleActiveEventsFilter" /></div>
+						<div class="mb-4"><PillTag class="cursor-pointer" :left="false" :icon="adminStore.filterActiveInstances ? mdiAccountGroup : mdiAccountMultiple" :color="adminStore.filterActiveInstances ? 'info' : 'success'" :label="adminStore.filterActiveInstances ? 'Sve instance' : 'Aktivne instance'" @click="toggleActiveEventsFilter" /></div>
 					</div>
 					<div class="flex flex-row">
 						<div class="mb-4"><PillTag class="cursor-pointer" :icon="adminStore.filterModelState === 'A' ? mdiAlphaACircle : adminStore.filterModelState === 'B' ? mdiAlphaBCircleOutline : mdiAbTesting" :color="adminStore.filterModelState === 'A' ? 'danger' : adminStore.filterModelState === 'B' ? 'success' : 'info'" :label="adminStore.filterModelState === 'A' ? 'Model A' : adminStore.filterModelState === 'B' ? 'Model B' : 'Modeli AB'" @click="toggleModelEventsFilter" /></div>

src/views/admin/StudentsInternshipView.vue

@@ -79,12 +79,12 @@ async function handleProcessDiagram() {
 }
 
 const route = useRoute();
+
 // Load data based on process_instance_id from the route
 async function loadDataForStudent() {
 	const id = route.params.process_instance_id;
 	if (id) {
 		const student = { process_instance_id: id };
-
 		process_instance_data.value = await adminStore.getProcessInstanceData(student);
 	}
 }
@@ -130,16 +130,24 @@ const toggleBetweenModelsFilter = () => {
 	}
 };
 
+let email_postData = ref(null);
+let email_template = ref(null);
+let email_to = ref(null);
+
 async function sendAnAdditionalEmail() {
-	let { postData, template, to } = getPostDataForSendEmail();
+	//let { postData, template, to } = getPostDataForSendEmail();
+
+	let postData = email_postData.value;
+	let template = email_template.value;
+	let to = email_to.value;
 
 	if (newEmail.value) {
 		to = newEmail.value;
 	}
 
 	if (postData && template && to) {
 		await adminStore.sendAnAdditionalEmail(postData, to, template);
-		snackBarStore.pushMessage("Email je uspješno poslan!", "success");
+		snackBarStore.pushMessage("Dodatni email uspješno poslan!", "success");
 		modal_send_task.value = false;
 	}
 }
@@ -148,6 +156,17 @@ watch(() => route.params.process_instance_id, loadDataForStudent, {
 	immediate: true,
 });
 
+watch(modal_send_task, (newValue) => {
+	let { postData, template, to } = getPostDataForSendEmail();
+	email_postData.value = postData;
+	email_template.value = template;
+	email_to.value = to;
+
+	if (newValue) {
+		newEmail.value = to;
+	}
+});
+
 onMounted(async () => {
 	await adminStore.getStudents();
 });
@@ -170,7 +189,7 @@ onMounted(loadDataForStudent);
 			<SectionMain>
 				<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Studenti u procesu prakse" button-enabled main @click="bpmn_help_modal = true"> </SectionTitleLineWithButton>
 				<div class="flex flex-row">
-					<div class="mb-4"><PillTag class="cursor-pointer" :left="false" :icon="adminStore.filterFinishedInstances ? mdiAccountGroup : mdiAccountMultiple" :color="adminStore.filterFinishedInstances ? 'info' : 'success'" :label="adminStore.filterFinishedInstances ? 'Sve instance' : 'Samo aktivne'" @click="toggleActiveEventsFilter" /></div>
+					<div class="mb-4"><PillTag class="cursor-pointer" :left="false" :icon="adminStore.filterFinishedInstances ? mdiAccountGroup : mdiAccountMultiple" :color="adminStore.filterFinishedInstances ? 'info' : 'success'" :label="adminStore.filterFinishedInstances ? 'Sve instance' : 'Aktivne instance'" @click="toggleActiveEventsFilter" /></div>
 					<div class="mb-4"><PillTag class="cursor-pointer" :icon="adminStore.filterModelState === 'A' ? mdiAlphaACircle : adminStore.filterModelState === 'B' ? mdiAlphaBCircleOutline : mdiAbTesting" :color="adminStore.filterModelState === 'A' ? 'danger' : adminStore.filterModelState === 'B' ? 'success' : 'info'" :label="adminStore.filterModelState === 'A' ? 'Model A' : adminStore.filterModelState === 'B' ? 'Model B' : 'Modeli AB'" @click="toggleBetweenModelsFilter" /></div>
 				</div>
 
@@ -201,8 +220,8 @@ onMounted(loadDataForStudent);
 				</CardBoxModal>
 
 				<CardBoxModal v-if="modal_send_task" v-model="modal_send_task" :title="'Ponovno slanje emaila'" has-cancel button-label="Pošalji" @confirm="sendAnAdditionalEmail()">
-					<p class="">E-mail je već poslan koristeći kroz BPMN engine, no možete ga poslati ponovo pritiskom na 'Pošalji'</p>
-					<p class="mb-2">Dodatno, možete unijeti e-mail te poslati na novu adresu. Ako želite poslati na adresu pohranjenu u <i>logovima enginea</i>, ostavite prazno.</p>
+					<p class="">E-mail je već poslan putem BPMN enginea, ali ga možete ponovo poslati klikom na gumb 'Pošalji'.</p>
+					<p class="mb-2">Ispod je prikazan e-mail koji je pohranjen u BPMN engineu, no možete unijeti novi e-mail u polje ispod i poslati ga, u tom slučaju, e-mail u engineu neće biti izmijenjen.</p>
 
 					<FormField label="Novi E-mail">
 						<FormControl v-model="newEmail" :icon-left="mdiAccount" name="email" autocomplete="email" />

src/views/common/ErrorView.vue

@@ -1,15 +1,17 @@
 <script setup>
-import SectionFullScreen from "@/components/Section/SectionFullScreen.vue";
-import CardBox from "@/components/Cardbox/CardBox.vue";
+import BaseButton from "../../components/Base/BaseButton.vue";
+import { router } from "@/router";
 </script>
 
 <template>
-	<SectionFullScreen v-slot="{ cardClass }" bg="blue">
-		<CardBox class="rounded-lg" :class="cardClass">
-			<div class="space-y-3">
-				<h1 class="text-2xl">❌ Nešto se zeznulo. Sorry!</h1>
-				<p>Aplikacija ne radi. Vjerojatno radimo na tome, probaj refreshati!</p>
+	<section class="bg-white dark:bg-gray-900">
+		<div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+			<div class="mx-auto max-w-screen-sm text-center">
+				<h1 class="dark:text-primary-500 mb-4 text-7xl font-extrabold tracking-tight text-fipu_blue lg:text-9xl">404</h1>
+				<p class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white md:text-4xl">Stranica ne postoji.</p>
+				<p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Stranica koju ste zatražili ne postoji, vjerojatno je greška u URL-u!</p>
+				<BaseButton label="Vrati me na početnu" color="fipu_blue" outline @click="router.push('/')" />
 			</div>
-		</CardBox>
-	</SectionFullScreen>
+		</div>
+	</section>
 </template>

src/views/student/ProcessStateViewStudent.vue

@@ -92,33 +92,6 @@ function getPostDataForSendEmail() {
 	};
 }
 
-const toggleActiveEventsFilter = () => {
-	adminStore.filterFinishedInstances = !adminStore.filterFinishedInstances;
-};
-
-async function sendAnAdditionalEmail() {
-	let { postData, template, to } = getPostDataForSendEmail();
-
-	if (newEmail.value) {
-		to = newEmail.value;
-	}
-
-	if (postData && template && to) {
-		await adminStore.sendAnAdditionalEmail(postData, to, template);
-		snackBarStore.pushMessage("Email je uspješno poslan!", "success");
-		modal_send_task.value = false;
-	}
-}
-
-async function handleNewInstance() {
-	adminStore.handleNewInstance(process_instance_data.value.id, process_instance_data.value.pending[0], formDynamicValues.value);
-	if (UserTaskMappings.getTaskProperty(process_instance_data.value.pending[0], "snackbar_msg")) {
-		snackBarStore.pushMessage(UserTaskMappings.getTaskProperty(process_instance_data.value.pending[0], "snackbar_msg"), UserTaskMappings.getTaskProperty(process_instance_data.value.pending[0], "snackbar_color"));
-	}
-	await Utils.wait(2);
-	location.reload();
-}
-
 const process_instance_id = ref(null);
 const bpmn_model = ref(null);