More info on features needed about jetstream-inertia-generator HOT 3 CLOSED

This is a good pointer that it is time to do a proper documentation of all the features of JIG and how to use the custom components and utilities included.

How displaying messages/errors work?
JIG uses vue3-vt-Notifications.
Assuming you are using JIG 3.x:

The library is imported in main.ts:

import Notifications from "vue3-vt-notifications";
app.use(Notifications)

2. Inside JigLayout.vue, we import a component called JigNotifications which provides the markup and groups for different types of notifications: (Line 27 of JigLayout.vue)

<template>
<jig-notifications/>
</template>
<script>
import JigNotifications from "@/JigComponents/JigNotifications.vue";
export default {
    components: {
       ....
       JigNotifications,
       ...
    }
}
</script>

3. Finally, there is a mixin called DisplayMixin which provides a function that makes it easier to display notifications: The displayNotification() function. To enable using this function in your component or page, simply include the DisplayMixin and call the function as you illustrated above.
   
   Here is how this function is implemented:

// DisplayMixin.js
displayNotification(type, message, title=null) {
            this.$notify({
                group: "top",
                type: type,
                title: title || type,
                text: message
            });
        },

How to import the DisplayMixin

import DisplayMixin from "@/Mixins/DisplayMixin";
export default {
    ...,
    mixins: [DisplayMixin],
    ...,
   methods: {
        onSuccess(msg) {
            this.displayNotification("success", msg);
            this.$inertia.visit(route("admin.employers.index"));
        },
        onError(msg) {
            this.displayNotification("error", msg);
        },
    },

NB: In this case onSuccess is called when the included component triggers the event and passes the error message from the child component. Here is how the actual child component catches the error: (CreateForm):

export default {
    computed: {
        flash() {
            return this.$page.props.flash || {};
        },
    },
    methods: {
        async storeModel() {
            this.form.post(
                this.route("admin.employers.store"),
                {
                    onSuccess: (res) => {
                        if (this.flash.success) {
                            this.$emit("success", this.flash.success);
                        } else if (this.flash.error) {
                            this.$emit("error", this.flash.error);
                        } else {
                            this.$emit("error", "Unknown server error.");
                        }
                    },
                    onError: (res) => {
                        this.$emit("error", "A server error occurred");
                    },
                },
                { remember: false, preserveState: true }
            );
        },
    },
}

Take note of this.$page.props.flash: This is how we access all the variables passed from the server by inertia. In this case, flash is an object automatically passed from Laravel when the session has two possible keys: 'error' and 'success'. Check Line 31 - 34 of JigMiddleware.php.

In order to pass an error or success message from the server, simply flash the message with the correct key (either 'success' or 'error') into the session when returning a response. For example in your controller:

public function store(StoreEmployer $request)
    {
        try {
            $data = $request->sanitizedObject();
            $employer = $this->repo::store($data);
            return back()->with(['success' => "The Employer was created succesfully."]);
        } catch (\Throwable $exception) {
            \Log::error($exception);
            return back()->with([
                'error' => $exception->getMessage(),
            ]);
        }
    }

I hope that makes it clear to you. In case of any clarifications, feel free to reach out.

from jetstream-inertia-generator.

Thx for great explanation!

I found out notifications work in built app, but not with vite/dev mode.

I planted console.log inside 1. DisplayMixin / displayNotification() and 2. the module itself, in global function notify().
First message works, second doesn't, like perhaps notify() hasn't run at all.

from jetstream-inertia-generator.

Thx for great explanation!

I found out notifications work in built app, but not with vite/dev mode.

I planted console.log inside 1. DisplayMixin / displayNotification() and 2. the module itself, in global function notify(). First message works, second doesn't, like perhaps notify() hasn't run at all.

Yes, that is actually the case. It is an open issue with vue3-vt-notifications. See the Issue HERE. I haven't managed to go around it either.

from jetstream-inertia-generator.