fix: Create toast fix (#456)

* chore: remove createToast in helpers.ts and leave showing of creation success messages up to the views

* chore: update jdocs of helpers.ts functions to include the selfProcessError parameter

* chore: edit of user on admin panel shows success message when successful

* chore: edit of docker image on admin panel shows success message when successful

* style: lint fix

* fix: messed up SubmissionView.vue during rebase, have just completely copied it from development now

* fix: display success message when uploading from SubmissionsView.vue

* style: lint fix

frontend/src/assets/lang/app/en.json

@@ -278,6 +278,7 @@
             "error": "Error",
             "unknown": "An unknown error has occurred.",
             "create": "{type} has successfully been created.",
+            "edit": "{type} has successfully been edited.",
             "courses": {
                 "enrollment": {
                     "success": "You have been successfully enrolled for the course '{0}'.",

frontend/src/assets/lang/app/nl.json

@@ -281,6 +281,7 @@
             "error": "Fout",
             "unknown": "Er is een onbekende fout opgetreden.",
             "create": "{type} werd succesvol aangemaakt.",
+            "edit": "{type} werd succesvol bewerkt.",
             "courses": {
                 "enrollment": {
                     "success": "Je bent succesvol ingeschreven voor het vak '{0}'.",

frontend/src/composables/services/admin.service.ts

@@ -1,6 +1,6 @@
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, getList, deleteId, createToast } from '@/composables/services/helpers.ts';
+import { get, getList, deleteId, create } from '@/composables/services/helpers.ts';
 import { User } from '@/types/users/User.ts';
 
 interface AdminState {
@@ -28,8 +28,7 @@ export function useAdmin(): AdminState {
 
     async function createAdmin(user: User, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.admins.index;
-        await createToast<User>(
-            'admin',
+        await create<User>(
             endpoint,
             {
                 id: user.id,

frontend/src/composables/services/assistant.service.ts

@@ -3,15 +3,7 @@ import { type User } from '@/types/users/User.ts';
 import { Response } from '@/types/Response';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import {
-    get,
-    getList,
-    create,
-    deleteId,
-    deleteIdWithData,
-    getPaginatedList,
-    createToast,
-} from '@/composables/services/helpers.ts';
+import { get, getList, create, deleteId, deleteIdWithData, getPaginatedList } from '@/composables/services/helpers.ts';
 import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 import { type Filter } from '@/types/filter/Filter.ts';
 
@@ -103,8 +95,7 @@ export function useAssistant(): AssistantState {
 
     async function createAssistant(user: User, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.assistants.index;
-        await createToast<Assistant>(
-            'assistant',
+        await create<Assistant>(
             endpoint,
             {
                 user: user.id,

frontend/src/composables/services/docker.service.ts

@@ -4,7 +4,7 @@ import { endpoints } from '@/config/endpoints.ts';
 import { type Ref, ref } from 'vue';
 import { type Filter } from '@/types/filter/Filter.ts';
 import {
-    createToast,
+    create,
     getList,
     getPaginatedList,
     patch,
@@ -64,8 +64,7 @@ export function useDockerImages(): DockerImagesState {
         selfProcessError: boolean = true,
     ): Promise<void> {
         const endpoint = endpoints.dockerImages.index;
-        await createToast<Response>(
-            'docker',
+        await create<Response>(
             endpoint,
             {
                 file,

frontend/src/composables/services/faculty.service.ts

@@ -1,7 +1,7 @@
 import { Faculty } from '@/types/Faculty.ts';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, getList, deleteId, createToast } from '@/composables/services/helpers.ts';
+import { get, getList, deleteId, create } from '@/composables/services/helpers.ts';
 
 interface FacultyState {
     faculties: Ref<Faculty[] | null>;
@@ -28,8 +28,7 @@ export function useFaculty(): FacultyState {
 
     async function createFaculty(facultyData: Faculty, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.faculties.index;
-        await createToast<Faculty>(
-            'faculty',
+        await create<Faculty>(
             endpoint,
             { id: facultyData.id, name: facultyData.name },
             faculty,

frontend/src/composables/services/group.service.ts

@@ -65,6 +65,7 @@ export function useGroup(): GroupState {
                     score: groupData.score,
                 },
                 response,
+                undefined,
                 selfProcessError,
             );
         }

frontend/src/composables/services/helpers.ts

@@ -13,6 +13,7 @@ import { type Filter } from '@/types/filter/Filter.ts';
  * @param endpoint
  * @param ref
  * @param fromJson
+ * @param selfProcessError
  */
 export async function get<T>(
     endpoint: string,
@@ -44,6 +45,7 @@ export async function get<T>(
  * @param ref
  * @param fromJson
  * @param contentType
+ * @param selfProcessError
  */
 export async function create<T>(
     endpoint: string,
@@ -70,38 +72,14 @@ export async function create<T>(
     }
 }
 
-/**
- * Create an item and display toast message when successful stating the creation has been successful.
- *
- * @param type type of the object that gets created
- * @param endpoint
- * @param data
- * @param ref
- * @param fromJson
- * @param contentType
- */
-export async function createToast<T>(
-    type: string,
-    endpoint: string,
-    data: any,
-    ref: Ref<T | null>,
-    fromJson: (data: any) => T,
-    contentType: string = 'application/json',
-): Promise<void> {
-    const { t } = i18n.global;
-    const { addSuccessMessage } = useMessagesStore();
-
-    await create<T>(endpoint, data, ref, fromJson, contentType);
-    addSuccessMessage(t('toasts.messages.success'), t('toasts.messages.create', { type: t('types.article.' + type) }));
-}
-
 /**
  * Patch an item given its ID.
  *
  * @param endpoint
  * @param data
  * @param ref
  * @param contentType
+ * @param selfProcessError
  */
 export async function patch(
     endpoint: string,
@@ -133,6 +111,7 @@ export async function patch(
  * @param endpoint
  * @param data
  * @param contentType
+ * @param selfProcessError
  */
 export async function put<T>(
     endpoint: string,
@@ -162,6 +141,7 @@ export async function put<T>(
  * @param endpoint
  * @param ref
  * @param fromJson
+ * @param selfProcessError
  */
 export async function deleteId<T>(
     endpoint: string,
@@ -189,6 +169,7 @@ export async function deleteId<T>(
  * @param data
  * @param ref
  * @param fromJson
+ * @param selfProcessError
  */
 export async function deleteIdWithData<T>(
     endpoint: string,
@@ -216,6 +197,7 @@ export async function deleteIdWithData<T>(
  * @param endpoint
  * @param ref
  * @param fromJson
+ * @param selfProcessError
  */
 export async function getList<T>(
     endpoint: string,
@@ -246,6 +228,7 @@ export async function getList<T>(
  * @param pageSize
  * @param pagination
  * @param fromJson
+ * @param selfProcessError
  */
 export async function getPaginatedList<T>(
     endpoint: string,

frontend/src/composables/services/project.service.ts

@@ -1,10 +1,8 @@
 import { Project } from '@/types/Project';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { i18n } from '@/config/i18n.ts';
 import { create, deleteId, get, getList, patch } from '@/composables/services/helpers.ts';
 import { type Response } from '@/types/Response.ts';
-import { useMessagesStore } from '@/store/messages.store.ts';
 
 interface ProjectState {
     projects: Ref<Project[] | null>;
@@ -75,9 +73,6 @@ export function useProject(): ProjectState {
         numberOfGroups: number,
         selfProcessError: boolean = true,
     ): Promise<void> {
-        const { t } = i18n.global;
-        const { addSuccessMessage } = useMessagesStore();
-
         const endpoint = endpoints.projects.byCourse.replace('{courseId}', courseId);
 
         // Initialize an empty object to hold the data to send
@@ -107,10 +102,6 @@ export function useProject(): ProjectState {
             'multipart/form-data',
             selfProcessError,
         );
-        addSuccessMessage(
-            t('toasts.messages.success'),
-            t('toasts.messages.projects.create.success', [project.value?.name]),
-        );
     }
 
     async function updateProject(projectData: Project, selfProcessError: boolean = true): Promise<void> {

frontend/src/composables/services/structure_check.service.ts

@@ -1,7 +1,7 @@
 import { StructureCheck } from '@/types/StructureCheck.ts';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, getList, createToast, deleteId, put } from '@/composables/services/helpers.ts';
+import { get, getList, create, deleteId, put } from '@/composables/services/helpers.ts';
 
 interface StructureCheckState {
     structureChecks: Ref<StructureCheck[] | null>;
@@ -42,8 +42,7 @@ export function useStructureCheck(): StructureCheckState {
         selfProcessError: boolean = true,
     ): Promise<void> {
         const endpoint = endpoints.structureChecks.byProject.replace('{projectId}', projectId);
-        await createToast<StructureCheck>(
-            'structureCheck',
+        await create<StructureCheck>(
             endpoint,
             {
                 path: structureCheckData.path,

frontend/src/composables/services/student.service.ts

@@ -2,7 +2,7 @@ import { Student } from '@/types/users/Student.ts';
 import { Response } from '@/types/Response';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, getList, create, deleteId, deleteIdWithData, createToast } from '@/composables/services/helpers.ts';
+import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
 
 interface StudentsState {
     students: Ref<Student[] | null>;
@@ -111,8 +111,7 @@ export function useStudents(): StudentsState {
     async function createStudent(studentData: Student, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.students.index;
 
-        await createToast<Student>(
-            'student',
+        await create<Student>(
             endpoint,
             {
                 user: studentData.id,

frontend/src/composables/services/submission.service.ts

@@ -1,9 +1,7 @@
 import { Submission } from '@/types/submission/Submission.ts';
 import { type Ref, ref, type UnwrapRef } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import { i18n } from '@/config/i18n.ts';
 import { get, getList, deleteId, create } from '@/composables/services/helpers.ts';
-import { useMessagesStore } from '@/store/messages.store.ts';
 
 interface SubmissionState {
     submissions: Ref<Submission[] | null>;
@@ -39,17 +37,13 @@ export function useSubmission(): SubmissionState {
         groupId: string,
         selfProcessError: boolean = true,
     ): Promise<void> {
-        const { t } = i18n.global;
-        const { addSuccessMessage } = useMessagesStore();
-
         const endpoint = endpoints.submissions.byGroup.replace('{groupId}', groupId);
         // formData is necessary with multiform data (otherwise files value is changed to files[] by axios)
         const formData = new FormData();
         uploadedFiles.forEach((file: File) => {
             formData.append('files', file); // Gebruik 'files' in plaats van 'files[]'
         });
         await create(endpoint, formData, submission, Submission.fromJSON, 'multipart/form-data', selfProcessError);
-        addSuccessMessage(t('toasts.messages.success'), t('toasts.messages.submissions.create.success'));
     }
 
     async function deleteSubmission(id: string, selfProcessError: boolean = true): Promise<void> {

frontend/src/composables/services/teacher.service.ts

@@ -4,15 +4,7 @@ import { Teacher } from '@/types/users/Teacher.ts';
 import { Response } from '@/types/Response';
 import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
-import {
-    get,
-    getList,
-    create,
-    deleteId,
-    deleteIdWithData,
-    getPaginatedList,
-    createToast,
-} from '@/composables/services/helpers.ts';
+import { get, getList, create, deleteId, deleteIdWithData, getPaginatedList } from '@/composables/services/helpers.ts';
 import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 import { type Filter } from '@/types/filter/Filter.ts';
 
@@ -104,8 +96,7 @@ export function useTeacher(): TeacherState {
 
     async function createTeacher(user: User, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.teachers.index;
-        await createToast<Teacher>(
-            'teacher',
+        await create<Teacher>(
             endpoint,
             {
                 user: user.id,

frontend/src/composables/services/users.service.ts

@@ -3,7 +3,7 @@ import { User } from '@/types/users/User.ts';
 import { type Response } from '@/types/Response.ts';
 import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 import { endpoints } from '@/config/endpoints.ts';
-import { get, patch, getList, getPaginatedList, createToast } from '@/composables/services/helpers.ts';
+import { get, patch, getList, getPaginatedList, create } from '@/composables/services/helpers.ts';
 import { type Filter } from '@/types/filter/Filter.ts';
 
 interface userState {
@@ -45,8 +45,7 @@ export function useUser(): userState {
 
     async function createUser(userData: User, selfProcessError: boolean = true): Promise<void> {
         const endpoint = endpoints.users.index;
-        await createToast<User>(
-            'user',
+        await create<User>(
             endpoint,
             {
                 username: userData.username,

frontend/src/views/admin/DockerImagesView.vue

@@ -15,6 +15,7 @@ import Body from '@/views/layout/Body.vue';
 import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
+import { useMessagesStore } from '@/store/messages.store.ts';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
@@ -35,6 +36,7 @@ const {
     deleteDockerImages,
 } = useDockerImages();
 const { filter, onFilter } = useFilter(getDockerImageFilters(query));
+const { addSuccessMessage } = useMessagesStore();
 const confirm = useConfirm();
 
 /* State */
@@ -93,7 +95,12 @@ const toggleSafetyGuardEdit = (data: DockerImage): void => {
  * Changes the public status in the backend of the docker image whose attributes are in editItem's value attribute
  */
 const changePublicStatus = async (): Promise<void> => {
-    await patchDockerImage(editItem.value);
+    try {
+        await patchDockerImage(editItem.value);
+        addSuccessMessage(t('toasts.messages.success'), t('toasts.messages.edit', { type: t('types.article.docker') }));
+    } catch (e) {
+        // TODO error message (when editing public status of docker image)
+    }
 };
 /**
  * Show safety guard for removing a docker image from the backend and set up values for when confirmed
@@ -135,10 +142,18 @@ const removeItems = async (): Promise<void> => {
  * @param event Event containing docker image file in files attributes
  */
 const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
-    const files: File[] = event.files as File[];
-    await createDockerImage(addItem.value, files[0]);
-    addItem.value.name = '';
-    selectedOption.value = selectOptions.value[0];
+    try {
+        const files: File[] = event.files as File[];
+        await createDockerImage(addItem.value, files[0]);
+        addSuccessMessage(
+            t('toasts.messages.success'),
+            t('toasts.messages.create', { type: t('types.article.docker') }),
+        );
+        addItem.value.name = '';
+        selectedOption.value = selectOptions.value[0];
+    } catch (e) {
+        // TODO error message
+    }
 };
 
 /**