models, messages and multiselects

vue3/src/stores/MealPlanStore.ts

@@ -2,6 +2,7 @@ import {acceptHMRUpdate, defineStore} from "pinia"
 import {ApiApi, MealPlan} from "@/openapi";
 import {computed, ref} from "vue";
 import {DateTime} from "luxon";
+import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
 
 
 const _STORE_ID = "meal_plan_store"
@@ -54,10 +55,12 @@ export const useMealPlanStore = defineStore(_STORE_ID, () => {
 
             const api = new ApiApi()
             return api.apiMealPlanList({fromDate: DateTime.fromJSDate(from_date).toISODate() as string, toDate: DateTime.fromJSDate(to_date).toISODate() as string}).then(r => {
-                r.forEach((p) => {
+                r.results.forEach((p) => {
                     plans.value.set(p.id, p)
                 })
                 currently_updating.value = [new Date(0), new Date(0)]
+            }).catch((err) => {
+                useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
             })
         }
         return new Promise(() => {
@@ -65,7 +68,7 @@ export const useMealPlanStore = defineStore(_STORE_ID, () => {
     }
 
     function createOrUpdate(object: MealPlan) {
-        if(object.id == undefined){
+        if (object.id == undefined) {
             return createObject(object)
         } else {
             return updateObject(object)
@@ -74,32 +77,32 @@ export const useMealPlanStore = defineStore(_STORE_ID, () => {
 
     function createObject(object: MealPlan) {
         const api = new ApiApi()
-        return api.apiMealPlanCreate({mealPlanRequest: object}).then((r) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
+        return api.apiMealPlanCreate({mealPlan: object}).then((r) => {
+            useMessageStore().addMessage(MessageType.SUCCESS, 'Created successfully', 7000, object)
             plans.value.set(r.id, r)
             return r
         }).catch((err) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
         })
     }
 
     function updateObject(object: MealPlan) {
         const api = new ApiApi()
         return api.apiMealPlanUpdate({id: object.id, mealPlanRequest: object}).then((r) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
+            useMessageStore().addMessage(MessageType.SUCCESS, 'Updated successfully', 7000, object)
             plans.value.set(r.id, r)
         }).catch((err) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
         })
     }
 
     function deleteObject(object: MealPlan) {
         const api = new ApiApi()
         return api.apiMealPlanDestroy({id: object.id}).then((r) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
+            useMessageStore().addMessage(MessageType.INFO, 'Deleted successfully', 7000, object)
             plans.value.delete(object.id)
         }).catch((err) => {
-            //StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
+            useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
         })
     }
 

vue3/src/stores/MessageStore.ts

@@ -0,0 +1,96 @@
+import {acceptHMRUpdate, defineStore} from 'pinia'
+import {ref} from "vue";
+import {useStorage} from "@vueuse/core";
+import {DateTime} from "luxon";
+
+/** @enum {string} different message types */
+export enum MessageType {
+    ERROR = 'error',
+    WARNING = 'warning',
+    INFO = 'info',
+    SUCCESS = 'success',
+}
+
+/** @enum {string} pre defined error messages */
+export enum ErrorMessageType {
+    FETCH_ERROR = 'Fetch Error',
+    UPDATE_ERROR = 'Update Error',
+    CREATE_ERROR = 'Update Error',
+    DELETE_ERROR = 'Update Error',
+}
+
+/**
+ * Type Message holding all required contents of a message
+ */
+export class Message {
+    type = {} as MessageType
+    createdAt = -1
+    showTimeout = 0
+    msg = ""
+    data = {} as any
+    code = ''
+
+    constructor(type: MessageType, msg: string, showTimeout?: number, data?: any) {
+        if (typeof showTimeout === 'undefined') {
+            showTimeout = 0
+        }
+        if (typeof data === 'undefined') {
+            data = {}
+        }
+
+        this.type = type
+        this.msg = msg
+        this.showTimeout = showTimeout
+        this.data = data
+        this.createdAt = DateTime.now().toSeconds()
+    }
+
+    toString() {
+        return {'type': this.type, 'createdAt': this.createdAt, 'msg': this.msg, 'data': this.data}
+    }
+}
+
+export const useMessageStore = defineStore('message_store', () => {
+    let messages = useStorage('LOCAL_MESSAGES', [] as Message[])
+    let snackbarQueue = ref([] as Message[])
+
+    /**
+     * Add a message to the message store. If showTimeout is greater than 0 it is also added to the display queue.
+     * @param {MessageType} type  type of message
+     * @param {String} msg message text
+     * @param {number} showTimeout optional number of ms to show message to user, set to 0 or leave undefined for silent message
+     * @param {string} data optional additional data only shown in log
+     */
+    function addMessage(type: MessageType, msg: string, showTimeout?: number, data?: any) {
+
+        let message = new Message(type, msg, showTimeout, data)
+
+        messages.value.push(message)
+        if (message.showTimeout > 0) {
+            snackbarQueue.value.push(message)
+        }
+    }
+
+    /**
+     * shorthand function to quickly add an error message
+     * @param errorType pre defined error type
+     * @param data optional error data
+     */
+    function addError(errorType: ErrorMessageType | string, data?: any) {
+        addMessage(MessageType.ERROR, errorType, 7000, data)
+    }
+
+    /**
+     * delete all messages from store
+     */
+    function deleteAllMessages() {
+        messages.value = [] as Message[]
+    }
+
+    return {snackbarQueue, messages, addMessage, addError, deleteAllMessages}
+})
+
+// enable hot reload for store
+if (import.meta.hot) {
+    import.meta.hot.accept(acceptHMRUpdate(useMessageStore, import.meta.hot))
+}