Vue.js code sample for a workflow management system.

AlertComponent.vue

<template>
    <div>
        <v-alert type="success" dismissible v-model="newUserSuccess">
            Success
        </v-alert>

        <v-alert type="error" dismissible v-model="newUserFail">
            Failed
        </v-alert>
    </div>
</template>

<script>
export default {
    data: () => ({
        newUserSuccess: false,
        newUserFail: false
    }),
    mounted() {
        this.$root.$on("ok", () => {
            this.newUserFail = false;
            this.newUserSuccess = true;
        });

        this.$root.$on("no", () => {
            this.newUserSuccess = false;
            this.newUserFail = true;
        });
    }
};
</script>

MakerComponent.vue

<template>
    <v-data-table
        :headers="headers"
        :items="alerts"
        class="elevation-1"
        hide-default-footer
        disable-pagination
        :loading="loading"
    >
        <template v-slot:top>
            <v-toolbar flat color="white">
                <v-toolbar-title>Maker Panel</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-spacer></v-spacer>
            </v-toolbar>
        </template>
        <template v-slot:no-data> </template>

        <template v-slot:item.action="{ item }">
            <div class="my-2">
                <v-btn
                    :disabled="item.decision ? false : true"
                    @click="save(item)"
                    color="success"
                    large
                    >Save</v-btn
                >
            </div>
        </template>
        <template v-slot:item.decision="{ item }">
            <div class="my-2">
                <v-row>
                    <v-col cols="12">
                        <v-select
                            :items="decisions"
                            clearable
                            item-value="id"
                            item-text="name"
                            v-model="item.decision"
                            :menu-props="{ top: true, offsetY: true }"
                            :label="decisionMade(item)"
                        ></v-select>
                    </v-col>
                </v-row>
            </div>
        </template>
    </v-data-table>
</template>

<script>
export default {
    data: () => ({
        loading: true,
        headers: [
            { text: "Action", value: "action", sortable: false },
            {
                text: "Decision",
                value: "decision",
                sortable: false,
                width: 200,
                align: "center"
            },
            { text: "NSSID", value: "NSSID", sortable: false },
            { text: "LISTID", value: "LISTID", sortable: false },
            { text: "SOURCEFIELD", value: "SOURCEFIELD", sortable: false },
            { text: "MATCHFIELD", value: "MATCHFIELD", sortable: false },
            { text: "SOURCEDATA", value: "SOURCEDATA", sortable: false },
            { text: "MATCHDATA", value: "MATCHDATA", sortable: false },
            { text: "RANKo", value: "RANKo", sortable: false },
            { text: "CHANNELNAME", value: "CHANNELNAME", sortable: false },
            {
                text: "APPLICATIONNAME",
                value: "APPLICATIONNAME",
                sortable: false
            },
            { text: "BRANCHNO", value: "BRANCHNO", sortable: false },
            { text: "USERCODE", value: "USERCODE", sortable: false },
            {
                text: "PRIMARYKEYFIELDNAME",
                value: "PRIMARYKEYFIELDNAME",
                sortable: false
            },
            {
                text: "REQUESTDATETIME",
                value: "REQUESTDATETIME",
                sortable: false
            },
            { text: "RPADecision", value: "RPADecision", sortable: false },
            {
                text: "RPADecisionDatTime",
                value: "RPADecisionDatTime",
                sortable: false
            },
            { text: "id", value: "id", sortable: false }
        ],
        alerts: [],
        decisions: [],
        editedIndex: -1,
        editedItem: {
            decision: "",
            btnDisabled: true
        },
        defaultItem: {
            decision: "",
            btnDisabled: true
        }
    }),

    computed: {
        formTitle() {
            return this.editedIndex === -1 ? "New User" : "Edit User";
        }
    },

    mounted() {
        this.getDataFromApi().then(data => {
            this.alerts = data;
            this.totalAlerts = this.totalAlerts;
        });
    },

    methods: {
        decisionMade(item) {
            let $label = "SELECT DECISION";
            this.decisions.forEach(function(arrayItem) {
                if (arrayItem.id == item.SAMBAPHONEDECISION) {
                    $label = arrayItem.name;
                }
            });
            return $label;
        },
        getDataFromApi() {
            this.loading = true;
            return new Promise((resolve, reject) => {
                this.getAlerts();
                this.getDecisions();
                setTimeout(() => {
                    // this.loading = false
                }, 1000);
            });
        },

        getAlerts() {
            fetch("/alerts/maker")
                .then(response => response.json())
                .then(alertJson => {
                    this.alerts = alertJson;
                    return alertJson;
                });
        },

        getDecisions() {
            fetch("/decisions")
                .then(response => response.json())
                .then(desJson => {
                    this.decisions = desJson;
                    this.loading = false;
                    return desJson;
                });
        },

        close() {
            this.dialog = false;
            setTimeout(() => {
                this.editedItem = Object.assign({}, this.defaultItem);
                this.editedIndex = -1;
                this.showPassword = false;
            }, 300);
        },

        save(item) {
            var data = new FormData();
            data.append("decision", item.decision);

            var self = this;
            fetch("/alerts/maker/" + item.id, {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                body: data
            })
                .then(function(res) {
                    if (!res.ok) {
                        self.sendFailAlert();
                        res.reject("error.");
                    }
                    res.json();
                })
                .then(function(data) {
                    self.sendSuccessAlert();
                    self.getAlerts();
                })
                .catch(function() {
                    self.sendFailAlert();
                });
        },

        sendSuccessAlert() {
            this.$root.$emit("ok");
        },
        sendFailAlert() {
            this.$root.$emit("no");
        }
    }
};
</script>