¨4.0.1¨

Modules/Admin/Resources/assets/js/Admin.js

@@ -1,4 +1,4 @@
-import NProgress from 'nprogress';
+import NProgress from "nprogress";
 
 export default class {
     constructor() {
@@ -14,43 +14,52 @@ export default class {
     }
 
     selectize() {
-        let selects = $('select.selectize').removeClass('form-control custom-select-black');
+        let selects = $("select.selectize").removeClass(
+            "form-control custom-select-black"
+        );
 
-        let options = _.merge({
-            valueField: 'id',
-            labelField: 'name',
-            searchField: 'name',
-            delimiter: ',',
-            persist: true,
-            selectOnTab: true,
-            hideSelected: false,
-            allowEmptyOption: true,
-            onItemAdd(value) {
-                this.getItem(value)[0].innerHTML = this.getItem(value)[0].innerHTML.replace(/¦––\s/g, '');
-            },
-            onInitialize() {
-                for (let index in this.options) {
-                    let label = this.options[index].name;
-                    let value = this.options[index].id;
+        let options = _.merge(
+            {
+                valueField: "id",
+                labelField: "name",
+                searchField: "name",
+                delimiter: ",",
+                persist: true,
+                selectOnTab: true,
+                hideSelected: true,
+                allowEmptyOption: true,
+                onItemAdd(value) {
+                    this.getItem(value)[0].innerHTML = this.getItem(
+                        value
+                    )[0].innerHTML.replace(/¦––\s/g, "");
+                },
+                onInitialize() {
+                    for (let index in this.options) {
+                        let label = this.options[index].name;
+                        let value = this.options[index].id;
 
-                    this.$control.find(`.item[data-value="${value}"]`).html(
-                        label.replace(/¦––\s/g, '') +
-                        '<a href="javascript:void(0)" class="remove" tabindex="-1">×</a>'
-                    );
-                }
+                        this.$control
+                            .find(`.item[data-value="${value}"]`)
+                            .html(
+                                label.replace(/¦––\s/g, "") +
+                                    '<a href="javascript:void(0)" class="remove" tabindex="-1">×</a>'
+                            );
+                    }
+                },
             },
-        }, ...FleetCart.selectize);
+            ...FleetCart.selectize
+        );
 
         for (let select of selects) {
             select = $(select);
 
             let create = true;
-            let plugins = ['remove_button', 'restore_on_backspace'];
+            let plugins = ["remove_button", "restore_on_backspace"];
 
-            if (select.hasClass('prevent-creation')) {
+            if (select.hasClass("prevent-creation")) {
                 create = false;
 
-                plugins.remove('restore_on_backspace');
+                plugins.remove("restore_on_backspace");
             }
 
             select.selectize(_.merge(options, { create, plugins }));
@@ -58,33 +67,33 @@ export default class {
     }
 
     dateTimePicker(elements) {
-        elements = elements || $('.datetime-picker');
+        elements = elements || $(".datetime-picker");
 
         elements = elements instanceof jQuery ? elements : $(elements);
 
         for (let el of elements) {
             $(el).flatpickr({
-                mode: el.hasAttribute('data-range') ? 'range' : 'single',
-                enableTime: el.hasAttribute('data-time'),
-                noCalender: el.hasAttribute('data-no-calender'),
+                mode: el.hasAttribute("data-range") ? "range" : "single",
+                enableTime: el.hasAttribute("data-time"),
+                noCalender: el.hasAttribute("data-no-calender"),
                 altInput: true,
             });
         }
     }
 
     changeAccordionTabState() {
-        $('.accordion-box [data-toggle="tab"]').on('click', (e) => {
-            if (! $(e.currentTarget).parent().hasClass('active')) {
-                $('.accordion-tab li.active').removeClass('active');
+        $('.accordion-box [data-toggle="tab"]').on("click", (e) => {
+            if (!$(e.currentTarget).parent().hasClass("active")) {
+                $(".accordion-tab li.active").removeClass("active");
             }
         });
     }
 
     preventChangingCurrentTab() {
-        $('[data-toggle="tab"]').on('click', (e) => {
+        $('[data-toggle="tab"]').on("click", (e) => {
             let targetElement = $(e.currentTarget);
 
-            if (targetElement.parent().hasClass('active')) {
+            if (targetElement.parent().hasClass("active")) {
                 return false;
             }
         });
@@ -93,76 +102,85 @@ export default class {
     removeSubmitButtonOffsetOn(tabs, tabsSelector = null) {
         tabs = Array.isArray(tabs) ? tabs : [tabs];
 
-        $(tabsSelector || '.accordion-tab li > a').on('click', (e) => {
-            if (tabs.includes(e.currentTarget.getAttribute('href'))) {
+        $(tabsSelector || ".accordion-tab li > a").on("click", (e) => {
+            if (tabs.includes(e.currentTarget.getAttribute("href"))) {
                 setTimeout(() => {
-                    $('button[type=submit]').parent().removeClass('col-md-offset-2');
+                    $("button[type=submit]")
+                        .parent()
+                        .removeClass("col-md-offset-2");
                 }, 150);
             } else {
                 setTimeout(() => {
-                    $('button[type=submit]').parent().addClass('col-md-offset-2');
+                    $("button[type=submit]")
+                        .parent()
+                        .addClass("col-md-offset-2");
                 }, 150);
             }
         });
     }
 
     buttonLoading() {
-        $(document).on('click', '[data-loading]', (e) => {
+        $(document).on("click", "[data-loading]", (e) => {
             let button = $(e.currentTarget);
 
-            button.data('loading-text', button.html())
-                .addClass('btn-loading')
-                .button('loading');
+            button
+                .data("loading-text", button.html())
+                .addClass("btn-loading")
+                .button("loading");
         });
     }
 
     stopButtonLoading(button) {
         button = button instanceof jQuery ? button : $(button);
 
-        button.data('loading-text', button.html())
-            .removeClass('btn-loading')
-            .button('reset');
+        button
+            .data("loading-text", button.html())
+            .removeClass("btn-loading")
+            .button("reset");
     }
 
     confirmationModal() {
-        let confirmationModal = $('#confirmation-modal');
+        let confirmationModal = $("#confirmation-modal");
 
-        $('[data-confirm]').on('click', () => {
-            confirmationModal.modal('show');
+        $("[data-confirm]").on("click", () => {
+            confirmationModal.modal("show");
         });
 
-        confirmationModal.find('form').on('submit', () => {
-            confirmationModal.find('button.delete').prop('disabled', true);
+        confirmationModal.find("form").on("submit", () => {
+            confirmationModal.find("button.delete").prop("disabled", true);
         });
 
-        confirmationModal.on('hidden.bs.modal', () => {
-            confirmationModal.find('button.delete').prop('disabled', false);
+        confirmationModal.on("hidden.bs.modal", () => {
+            confirmationModal.find("button.delete").prop("disabled", false);
         });
 
-        confirmationModal.on('shown.bs.modal', () => {
-            confirmationModal.find('button.delete').focus();
+        confirmationModal.on("shown.bs.modal", () => {
+            confirmationModal.find("button.delete").focus();
         });
     }
 
     tooltip() {
-        $('[data-toggle="tooltip"]').tooltip({ trigger : 'hover' })
-            .on('click', (e) => {
-                $(e.currentTarget).tooltip('hide');
+        $('[data-toggle="tooltip"]')
+            .tooltip({ trigger: "hover" })
+            .on("click", (e) => {
+                $(e.currentTarget).tooltip("hide");
             });
     }
 
     shortcuts() {
-        Mousetrap.bind('f1', () => {
-            window.open(`http://envaysoft.com/fleetcart/docs/${FleetCart.version}`, '_blank');
+        Mousetrap.bind("f1", () => {
+            window.open("https://docs.envaysoft.com/", "_blank");
         });
 
-        Mousetrap.bind('?', () => {
-            $('#keyboard-shortcuts-modal').modal();
+        Mousetrap.bind("?", () => {
+            $("#keyboard-shortcuts-modal").modal();
         });
     }
 
     nprogress() {
-        let inMobile = /iphone|ipod|android|ie|blackberry|fennec/i.test(window.navigator.userAgent);
+        let inMobile = /iphone|ipod|android|ie|blackberry|fennec/i.test(
+            window.navigator.userAgent
+        );
 
         if (inMobile) {
             return;

Modules/Admin/Resources/assets/js/DataTable.js

@@ -1,3 +1,6 @@
+import "datatables.net";
+import "datatables.net-bs";
+
 // Initialize state holders.
 FleetCart.dataTable = { routes: {}, selected: {} };
 
@@ -24,7 +27,7 @@ export default class {
                 {
                     serverSide: true,
                     processing: true,
-                    ajax: this.route("index", { table: true }),
+                    ajax: this.route("table", { table: true }),
                     stateSave: true,
                     sort: true,
                     info: true,
@@ -34,9 +37,6 @@ export default class {
                     autoWidth: false,
                     pageLength: 20,
                     lengthMenu: [10, 20, 50, 100, 200],
-                    language: {
-                        processing: '<i class="fa fa-refresh fa-spin"></i>',
-                    },
                     order: [
                         sortColumn.index() !== -1 ? sortColumn.index() : 1,
                         sortColumn.data("sort") || "desc",
@@ -74,7 +74,6 @@ export default class {
                         });
                     },
                     stateSaveParams(settings, data) {
-                        delete data.start;
                         delete data.search;
                     },
                 },
@@ -136,7 +135,6 @@ export default class {
                         deleted = _.flatten(deleted.concat(ids));
 
                         this.constructor.setSelectedIds(this.selector, []);
-
                         this.constructor.reload(this.element);
                     },
                     error: (xhr) => {
@@ -145,7 +143,6 @@ export default class {
                         deleted = _.flatten(deleted.concat(ids));
 
                         this.constructor.setSelectedIds(this.selector, []);
-
                         this.constructor.reload(this.element);
                     },
                 });
@@ -157,10 +154,6 @@ export default class {
         let url = this.route(key, { id });
 
         $(row).addClass("clickable-row").data("href", url);
-
-        setTimeout(() => {
-            $(".clickable-row td:not(:first-child)").css("cursor", "pointer");
-        });
     }
 
     onRowClick(handler) {

Modules/Admin/Resources/assets/js/Errors.js

@@ -0,0 +1,56 @@
+import Vue from "vue";
+
+export default class {
+    constructor() {
+        this.errors = {};
+    }
+
+    record(errors) {
+        this.errors = Object.assign({}, this.errors, errors);
+    }
+
+    any() {
+        return Object.keys(this.errors).length > 0;
+    }
+
+    has(key) {
+        return this.errors.hasOwnProperty(this.normalizeKey(key));
+    }
+
+    get(key) {
+        if (this.errors[this.normalizeKey(key)]) {
+            return this.errors[this.normalizeKey(key)][0];
+        }
+    }
+
+    set(errors = {}) {
+        this.errors = Object.assign({}, this.errors, errors);
+    }
+
+    clear(keys) {
+        if (keys === undefined) {
+            return;
+        }
+
+        keys = Array.isArray(keys) ? keys : [keys];
+
+        keys.forEach((key) => {
+            Vue.delete(this.errors, this.normalizeKey(key));
+        });
+    }
+
+    reset() {
+        this.errors = {};
+    }
+
+    normalizeKey(key) {
+        let keyParts = key.split("[");
+
+        // No need to normalize the key.
+        if (keyParts.length === 1) {
+            return key;
+        }
+
+        return keyParts.join(".").slice(0, -1).replace(/]/g, "");
+    }
+}

Modules/Admin/Resources/assets/js/FleetCart.js

@@ -0,0 +1,245 @@
+$.FleetCart = {};
+
+/* ----------------------------------
+   - FleetCart Options -
+   ---------------------------------- */
+$.FleetCart.options = {
+    animationSpeed: 300,
+    // Sidebar push menu toggle button selector
+    sidebarToggleSelector: "[data-toggle='offcanvas']",
+    // Activate sidebar push menu
+    sidebarPushMenu: true,
+    // BoxRefresh Plugin
+    enableBoxRefresh: true,
+    // Bootstrap.js tooltip
+    enableBSToppltip: true,
+    BSTooltipSelector: "[data-toggle='tooltip']",
+    // Control Sidebar Tree views
+    enableControlTreeView: true,
+    // The standard screen sizes that bootstrap uses.
+    screenSizes: {
+        xs: 480,
+        sm: 768,
+        md: 992,
+        lg: 1200,
+    },
+};
+
+/* ----------------------------------
+   - Implementation -
+   ---------------------------------- */
+$(function () {
+    // Easy access to options
+    var o = $.FleetCart.options;
+
+    // Set up the object
+    _init();
+
+    // Activate layout
+    $.FleetCart.layout.activate();
+
+    // Enable sidebar tree view controls
+    if (o.enableControlTreeView) {
+        $.FleetCart.tree(".sidebar");
+    }
+
+    // Activate sidebar push menu
+    if (o.sidebarPushMenu) {
+        $.FleetCart.pushMenu.activate(o.sidebarToggleSelector);
+    }
+
+    // Activate Bootstrap tooltip
+    if (o.enableBSToppltip) {
+        $("body").tooltip({
+            selector: o.BSTooltipSelector,
+            container: "body",
+        });
+    }
+});
+
+/* ----------------------------------
+   - Initialize the FleetCart Object -
+   ---------------------------------- */
+function _init() {
+    // Layout
+    $.FleetCart.layout = {
+        activate: function () {
+            var _this = this;
+            _this.fix();
+
+            $(window, ".wrapper").resize(function () {
+                _this.fix();
+            });
+        },
+        fix: function () {
+            var window_height = $(window).height();
+
+            $(".wrapper").css("min-height", window_height + "px");
+        },
+    };
+
+    // PushMenu
+    $.FleetCart.pushMenu = {
+        activate: function (toggleBtn) {
+            var screenSizes = $.FleetCart.options.screenSizes;
+
+            $(document).on("click", toggleBtn, function (e) {
+                e.preventDefault();
+
+                if ($(window).outerWidth() > screenSizes.md - 1) {
+                    if ($("body").hasClass("sidebar-collapse")) {
+                        $("body")
+                            .removeClass("sidebar-collapse")
+                            .trigger("expanded.pushMenu");
+
+                        return;
+                    }
+
+                    $("body")
+                        .addClass("sidebar-collapse")
+                        .trigger("collapsed.pushMenu");
+
+                    return;
+                }
+
+                if ($("body").hasClass("sidebar-open")) {
+                    $("body")
+                        .removeClass("sidebar-open")
+                        .removeClass("sidebar-collapse")
+                        .trigger("collapsed.pushMenu");
+
+                    return;
+                }
+
+                $("body").addClass("sidebar-open").trigger("expanded.pushMenu");
+            });
+
+            $(window).on("resize", function () {
+                if ($(window).outerWidth() > screenSizes.md - 1) {
+                    return;
+                } else {
+                    $("body").removeClass("sidebar-collapse");
+                }
+            });
+
+            $(".content-wrapper").click(function () {
+                if (
+                    $(window).width() <= screenSizes.md - 1 &&
+                    $("body").hasClass("sidebar-open")
+                ) {
+                    $("body").removeClass("sidebar-open");
+                }
+            });
+        },
+    };
+
+    // Tree
+    $.FleetCart.tree = function (menu) {
+        var animationSpeed = $.FleetCart.options.animationSpeed;
+
+        $(document)
+            .off("click", menu + " li a")
+            .on("click", menu + " li a", function (e) {
+                var self = $(this);
+                var checkElement = self.next();
+                var activeElement = self
+                    .closest(".sidebar-menu")
+                    .find(".active");
+
+                if (checkElement.is(".treeview-menu")) {
+                    self.closest(".sidebar-menu")
+                        .find(".selected")
+                        .removeClass("selected");
+
+                    e.preventDefault();
+                }
+
+                if (self.parent().is(".active")) {
+                    activeElement.toggleClass("closed");
+                } else {
+                    activeElement.addClass("closed");
+                }
+
+                if (
+                    checkElement.is(".treeview-menu") &&
+                    checkElement.is(":visible") &&
+                    !$("body").hasClass("sidebar-collapse")
+                ) {
+                    self.parent().removeClass("selected");
+
+                    checkElement.slideUp(animationSpeed);
+                } else if (
+                    checkElement.is(".treeview-menu") &&
+                    !checkElement.is(":visible")
+                ) {
+                    var ul = self
+                        .parents("ul")
+                        .first()
+                        .find("ul:visible")
+                        .slideUp(animationSpeed);
+
+                    self.parent().addClass("selected");
+                    checkElement.slideDown(animationSpeed);
+                }
+            });
+    };
+}
+
+/* ----------------------------------
+   - Box Refresh Button -
+   ---------------------------------- */
+(function ($) {
+    $.fn.boxRefresh = function (options) {
+        var settings = $.extend(
+            {
+                trigger: ".refresh-btn",
+                source: "",
+                onLoadStart: function (box) {
+                    return box;
+                },
+                onLoadDone: function (box) {
+                    return box;
+                },
+            },
+            options
+        );
+
+        var overlay = $(
+            '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
+        );
+
+        return this.each(function () {
+            if (settings.source === "") {
+                if (window.console) {
+                    window.console.log(
+                        "Please specify a source first - boxRefresh()"
+                    );
+                }
+
+                return;
+            }
+
+            var box = $(this);
+            var rBtn = box.find(settings.trigger).first();
+
+            rBtn.on("click", function (e) {
+                e.preventDefault();
+                start(box);
+
+                box.find(".box-body").load(settings.source, function () {
+                    done(box);
+                });
+            });
+        });
+
+        function start(box) {
+            box.append(overlay);
+            settings.onLoadStart.call(box);
+        }
+
+        function done(box) {
+            box.find(overlay).remove();
+            settings.onLoadDone.call(box);
+        }
+    };
+})(jQuery);

Modules/Admin/Resources/assets/js/Toaster.js

@@ -0,0 +1,16 @@
+import Vue from "vue";
+import VueToast from "vue-toast-notification";
+
+Vue.use(VueToast);
+
+export function toaster(message, options = {}) {
+    Vue.$toast.open({
+        message,
+        type: options.type || "default",
+        duration: 5000,
+        dismissible: true,
+        position: "bottom-right",
+        pauseOnHover: true,
+        ...options,
+    });
+}

Modules/Admin/Resources/assets/js/app.js

@@ -1,215 +1,48 @@
-$.FleetCart = {};
+import "bootstrap";
+import "selectize";
+import "flatpickr";
+import "mousetrap";
+import "./FleetCart";
+import "./jquery.keypressAction";
 
-/* ----------------------------------
-   - FleetCart Options -
-   ---------------------------------- */
-$.FleetCart.options = {
-    animationSpeed: 300,
-    // Sidebar push menu toggle button selector
-    sidebarToggleSelector: '[data-toggle=\'offcanvas\']',
-    // Activate sidebar push menu
-    sidebarPushMenu: true,
-    // BoxRefresh Plugin
-    enableBoxRefresh: true,
-    // Bootstrap.js tooltip
-    enableBSToppltip: true,
-    BSTooltipSelector: '[data-toggle=\'tooltip\']',
-    // Control Sidebar Tree views
-    enableControlTreeView: true,
-    // The standard screen sizes that bootstrap uses.
-    screenSizes: {
-        xs: 480,
-        sm: 768,
-        md: 992,
-        lg: 1200,
-    },
-};
+import Admin from "./Admin";
+import Form from "./Form";
+import DataTable from "./DataTable";
+import {
+    trans,
+    keypressAction,
+    notify,
+    info,
+    success,
+    warning,
+    error,
+} from "./functions";
 
-/* ----------------------------------
-   - Implementation -
-   ---------------------------------- */
-$(function () {
-    // Easy access to options
-    var o = $.FleetCart.options;
-
-    // Set up the object
-    _init();
-
-    // Activate layout
-    $.FleetCart.layout.activate();
-
-    // Enable sidebar tree view controls
-    if (o.enableControlTreeView) {
-        $.FleetCart.tree('.sidebar');
-    }
-
-    // Activate sidebar push menu
-    if (o.sidebarPushMenu) {
-        $.FleetCart.pushMenu.activate(o.sidebarToggleSelector);
-    }
-
-    // Activate Bootstrap tooltip
-    if (o.enableBSToppltip) {
-        $('body').tooltip({
-            selector: o.BSTooltipSelector,
-            container: 'body',
-        });
-    }
-});
-
-/* ----------------------------------
-   - Initialize the FleetCart Object -
-   ---------------------------------- */
-function _init() {
-
-    // Layout
-    $.FleetCart.layout = {
-        activate: function () {
-            var _this = this;
-            _this.fix();
-
-            $(window, '.wrapper').resize(function () {
-                _this.fix();
-            });
-        },
-        fix: function () {
-            var window_height = $(window).height();
-
-            $('.wrapper').css('min-height', window_height + 'px');
-        }
-    };
-
-    // PushMenu
-    $.FleetCart.pushMenu = {
-        activate: function (toggleBtn) {
-            var screenSizes = $.FleetCart.options.screenSizes;
-
-            $(document).on('click', toggleBtn, function (e) {
-                e.preventDefault();
-
-                if ($(window).outerWidth() > (screenSizes.md - 1)) {
-                    if ($('body').hasClass('sidebar-collapse')) {
-                        $('body').removeClass('sidebar-collapse').trigger('expanded.pushMenu');
-
-                        return;
-                    }
-
-                    $('body').addClass('sidebar-collapse').trigger('collapsed.pushMenu');
-
-                    return;
-                }
-
-                if ($('body').hasClass('sidebar-open')) {
-                    $('body').removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
-
-                    return;
-                }
-
-                $('body').addClass('sidebar-open').trigger('expanded.pushMenu');
-            });
-
-            $(window).on('resize', function () {
-                if ($(window).outerWidth() > (screenSizes.md - 1)) {
-                    return;
-                } else {
-                    $('body').removeClass('sidebar-collapse');
-                }
-            });
-
-            $('.content-wrapper').click(function () {
-                if ($(window).width() <= (screenSizes.md - 1) && $('body').hasClass('sidebar-open')) {
-                    $('body').removeClass('sidebar-open');
-                }
-            });
-        }
-    };
-
-    // Tree
-    $.FleetCart.tree = function (menu) {
-        var animationSpeed = $.FleetCart.options.animationSpeed;
-
-        $(document).off('click', menu + ' li a')
-            .on('click', menu + ' li a', function (e) {
-                var self = $(this);
-                var checkElement = self.next();
-                var activeElement = self.closest('.sidebar-menu').find('.active');
-
-                if (checkElement.is('.treeview-menu')) {
-                    self.closest('.sidebar-menu').find('.selected').removeClass('selected');
-
-                    e.preventDefault();
-                }
-
-                if (self.parent().is('.active')) {
-                    activeElement.toggleClass('closed');
-                } else {
-                    activeElement.addClass('closed');
-                }
-
-                if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
-                    self.parent().removeClass('selected');
-
-                    checkElement.slideUp(animationSpeed);
-                }
-
-                else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
-                    var ul = self.parents('ul').first().find('ul:visible').slideUp(animationSpeed);
-
-                    self.parent().addClass('selected');
-                    checkElement.slideDown(animationSpeed);
-                }
-            });
-    };
+if (
+    !route().current("admin.products.create") &&
+    !route().current("admin.products.edit")
+) {
+    window.admin = new Admin();
 }
 
-/* ----------------------------------
-   - Box Refresh Button -
-   ---------------------------------- */
-(function ($) {
-    $.fn.boxRefresh = function (options) {
-        var settings = $.extend({
-            trigger: '.refresh-btn',
-            source: '',
-            onLoadStart: function (box) {
-                return box;
-            },
-            onLoadDone: function (box) {
-                return box;
-            },
-        }, options);
+window.form = new Form();
+window.DataTable = DataTable;
 
-        var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
+window.trans = trans;
+window.keypressAction = keypressAction;
+window.notify = notify;
+window.info = info;
+window.success = success;
+window.warning = warning;
+window.error = error;
 
-        return this.each(function () {
-            if (settings.source === '') {
-                if (window.console) {
-                    window.console.log('Please specify a source first - boxRefresh()');
-                }
+$.ajaxSetup({
+    headers: {
+        Authorization: FleetCart.apiToken,
+        "X-CSRF-TOKEN": FleetCart.csrfToken,
+    },
+});
 
-                return;
-            }
-
-            var box = $(this);
-            var rBtn = box.find(settings.trigger).first();
-
-            rBtn.on('click', function (e) {
-                e.preventDefault();
-                start(box);
-
-                box.find('.box-body').load(settings.source, function () {
-                    done(box);
-                });
-            });
-        });
-
-        function start(box) {
-            box.append(overlay);
-            settings.onLoadStart.call(box);
-        }
-
-        function done(box) {
-            box.find(overlay).remove();
-            settings.onLoadDone.call(box);
-        }
-    };
-})(jQuery);
+$(document).on("preInit.dt", () => {
+    $(".dataTables_length select").addClass("custom-select-black");
+});

Modules/Admin/Resources/assets/js/dashboard.js

@@ -1,11 +1,16 @@
-import Chart from 'chart.js';
+import Chart from "chart.js/auto";
 
 $(function () {
     $.ajax({
-        type: 'GET',
-        url: route('admin.sales_analytics.index'),
+        type: "GET",
+        url: route("admin.sales_analytics.index"),
         success(response) {
-            let data = { labels: response.labels, sales: [], formatted: [], totalOrders: [] };
+            let data = {
+                labels: response.labels,
+                sales: [],
+                formatted: [],
+                totalOrders: [],
+            };
 
             for (let item of response.data) {
                 data.sales.push(item.total.amount);
@@ -19,45 +24,56 @@ $(function () {
 });
 
 function initSalesAnalyticsChart(data) {
-    new Chart($('.sales-analytics .chart'), {
-        type: 'bar',
+    new Chart($(".sales-analytics .chart"), {
+        type: "bar",
         data: {
             labels: data.labels,
-            datasets: [{
-                data: data.sales,
-                backgroundColor: [
-                    'rgba(255, 99, 132, 0.5)',
-                    'rgba(54, 162, 235, 0.5)',
-                    'rgba(255, 206, 86, 0.5)',
-                    'rgba(75, 192, 192, 0.5)',
-                    'rgba(153, 102, 255, 0.5)',
-                    'rgba(255, 159, 64, 0.5)',
-                ],
-            }],
+            datasets: [
+                {
+                    data: data.sales,
+                    backgroundColor: [
+                        "rgba(255, 99, 132, 0.5)",
+                        "rgba(54, 162, 235, 0.5)",
+                        "rgba(255, 206, 86, 0.5)",
+                        "rgba(75, 192, 192, 0.5)",
+                        "rgba(153, 102, 255, 0.5)",
+                        "rgba(255, 159, 64, 0.5)",
+                    ],
+                },
+            ],
         },
-        barThickness: 1,
         options: {
+            responsive: true,
             maintainAspectRatio: false,
-            legend: {
-                display: false,
-            },
-            tooltips: {
-                displayColors: false,
-                callbacks: {
-                    label(item) {
-                        let orders = `${trans('admin::dashboard.sales_analytics.orders')}: ${data.totalOrders[item.index]}`;
-                        let sales = `${trans('admin::dashboard.sales_analytics.sales')}: ${data.formatted[item.index]}`;
+            plugins: {
+                legend: false,
+                tooltip: {
+                    displayColors: false,
+                    callbacks: {
+                        label(item) {
+                            let orders = `${trans(
+                                "admin::dashboard.sales_analytics.orders"
+                            )}: ${data.totalOrders[item.dataIndex]}`;
 
-                        return [orders, sales];
+                            let sales = `${trans(
+                                "admin::dashboard.sales_analytics.sales"
+                            )}: ${data.formatted[item.dataIndex]}`;
+
+                            return [orders, sales];
+                        },
                     },
                 },
             },
             scales: {
-                yAxes: [{
+                y: {
+                    beginAtZero: true,
                     ticks: {
-                        beginAtZero: true,
+                        // Include the currency symbol in the ticks
+                        callback: function (value) {
+                            return data.formatted[0].charAt(0) + value;
+                        },
                     },
-                }],
+                },
             },
         },
     });

Modules/Admin/Resources/assets/js/functions.js

@@ -1,4 +1,4 @@
-import { ohSnap } from './ohsnap';
+import { ohSnap } from "./ohsnap";
 
 export function trans(langKey, replace = {}) {
     let line = window.FleetCart.langs[langKey];
@@ -16,14 +16,14 @@ export function keypressAction(actions) {
 
 export function notify(type, message, { duration = 5000, context = document }) {
     let types = {
-        'info': 'blue',
-        'success': 'green',
-        'warning': 'yellow',
-        'error': 'red',
+        info: "blue",
+        success: "green",
+        warning: "yellow",
+        error: "red",
     };
 
     ohSnap(message, {
-        'container-id': 'notification-toast',
+        "container-id": "notification-toast",
         context,
         color: types[type],
         duration,
@@ -31,27 +31,60 @@ export function notify(type, message, { duration = 5000, context = document }) {
 }
 
 export function info(message, duration) {
-    notify('info', message, { duration });
+    notify("info", message, { duration });
 }
 
 export function success(message, duration) {
-    notify('success', message, { duration });
+    notify("success", message, { duration });
 }
 
 export function warning(message, duration) {
-    notify('warning', message, { duration });
+    notify("warning", message, { duration });
 }
 
 export function error(message, duration) {
-    notify('error', message, { duration });
+    notify("error", message, { duration });
+}
+
+export function generateSlug(name) {
+    let slug = "";
+
+    // Change to lower case
+    const nameLower = name.toLowerCase();
+
+    // Letter "e"
+    slug = nameLower.replace(/e|é|è|ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi, "e");
+    // Letter "a"
+    slug = slug.replace(/a|á|à|ã|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi, "a");
+    // Letter "o"
+    slug = slug.replace(/o|ó|ò|õ|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi, "o");
+    // Letter "u"
+    slug = slug.replace(/u|ú|ù|ũ|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi, "u");
+    // Letter "c"
+    slug = slug.replace(/ć|ĉ|č|ċ|ç/gi, "c");
+    // Letter "i"
+    slug = slug.replace(/î|ï|í|ī|į|ì/gi, "i");
+    // Letter (/, ', ")
+    slug = slug.replace(/\/|'|"|′|’|,|\?|\.|;|]|\[|\+|=|\$|%|&|<|>|:/g, " ");
+    // Letter "d"
+    slug = slug.replace(/đ/gi, "d");
+    // Trim the last whitespace
+    slug = slug.replace(/\s*$/g, "");
+    // Change whitespace to "-"
+    slug = slug.replace(/\s+/g, "-");
+
+    return slug;
 }
 
 /**
  * @see https://stackoverflow.com/a/3955096
  */
-if (! Array.prototype.remove) {
+if (!Array.prototype.remove) {
     Array.prototype.remove = function () {
-        let what, a = arguments, L = a.length, ax;
+        let what,
+            a = arguments,
+            L = a.length,
+            ax;
 
         while (L && this.length) {
             what = a[--L];
@@ -68,10 +101,12 @@ if (! Array.prototype.remove) {
 /**
  * @see https://stackoverflow.com/a/4673436
  */
-if (! String.prototype.format) {
+if (!String.prototype.format) {
     String.prototype.format = function () {
         return this.replace(/%(\d+)%/g, (match, number) => {
-            return typeof arguments[number] !== 'undefined' ? arguments[number] : match;
+            return typeof arguments[number] !== "undefined"
+                ? arguments[number]
+                : match;
         });
     };
 }

Modules/Admin/Resources/assets/js/main.js

@@ -1,43 +1,7 @@
-window._ = require('lodash');
-window.Sortable = require('sortablejs');
-window.$ = window.jQuery = require('jquery');
+import jQuery from "jquery";
+import _ from "lodash";
+import Sortable from "sortablejs";
 
-require('bootstrap');
-require('selectize');
-require('flatpickr');
-require('jquery-slimscroll');
-require('mousetrap');
-require('datatables.net');
-require('datatables.net-bs');
-
-require('./app');
-require('./wysiwyg');
-require('./jquery.keypressAction');
-
-import Admin from './Admin';
-import Form from './Form';
-import DataTable from './DataTable';
-import { trans, keypressAction, notify, info, success, warning, error } from './functions';
-
-window.admin = new Admin();
-window.form = new Form();
-window.DataTable = DataTable;
-
-window.trans = trans;
-window.keypressAction = keypressAction;
-window.notify = notify;
-window.info = info;
-window.success = success;
-window.warning = warning;
-window.error = error;
-
-$.ajaxSetup({
-    headers: {
-        'Authorization': FleetCart.apiToken,
-        'X-CSRF-TOKEN': FleetCart.csrfToken,
-    },
-});
-
-$(document).on('preInit.dt', () => {
-    $('.dataTables_length select').addClass('custom-select-black');
-});
+window.$ = window.jQuery = jQuery;
+window._ = _;
+window.Sortable = Sortable;

Modules/Admin/Resources/assets/js/wysiwyg.js

@@ -1,38 +1,46 @@
-import tinyMCE from 'tinymce';
+import tinyMCE from "tinymce";
 
-tinyMCE.baseURL = `${FleetCart.baseUrl}/modules/admin/js/wysiwyg`;
+export default function () {
+    tinyMCE.baseURL = `${FleetCart.baseUrl}/build/assets/tinymce`;
 
-tinyMCE.init({
-    selector: '.wysiwyg',
-    theme: 'silver',
-    mobile: { theme: 'mobile' },
-    height: 350,
-    menubar: false,
-    branding: false,
-    image_advtab: true,
-    automatic_uploads: true,
-    media_alt_source: false,
-    media_poster: false,
-    relative_urls: false,
-    directionality: FleetCart.rtl ? 'rtl' : 'ltr',
-    cache_suffix: `?v=${FleetCart.version}`,
-    plugins: 'lists, link, table, image, media, paste, autosave, autolink, wordcount, code, fullscreen',
-    toolbar: 'styleselect bold italic underline | bullist numlist | alignleft aligncenter alignright | outdent indent | image media link table | code fullscreen',
+    tinyMCE.init({
+        selector: ".wysiwyg",
+        theme: "silver",
+        height: 350,
+        menubar: false,
+        branding: false,
+        image_advtab: true,
+        automatic_uploads: true,
+        media_alt_source: false,
+        media_poster: false,
+        relative_urls: false,
+        toolbar_mode: "sliding", // Possible values: floating, sliding, scrolling, wrap
+        directionality: FleetCart.rtl ? "rtl" : "ltr",
+        cache_suffix: `?v=${FleetCart.version}`,
+        plugins:
+            "lists, link, table, image, media, paste, autosave, autolink,quickbars, wordcount, code, fullscreen",
+        toolbar:
+            "styleselect | bold italic underline strikethrough blockquote | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent | forecolor removeformat | table | image media link | code fullscreen",
+        quickbars_selection_toolbar:
+            "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
+        images_upload_handler(blobInfo, success, failure) {
+            let formData = new FormData();
 
-    images_upload_handler(blobInfo, success, failure) {
-        let formData = new FormData();
-        formData.append('file', blobInfo.blob(), blobInfo.filename());
+            formData.append("file", blobInfo.blob(), blobInfo.filename());
 
-        $.ajax({
-            method: 'POST',
-            url: route('admin.media.store'),
-            data: formData,
-            processData: false,
-            contentType: false,
-        }).then((file) => {
-            success(file.path);
-        }).catch((xhr) => {
-            failure(xhr.responseJSON.message);
-        });
-    },
-});
+            $.ajax({
+                method: "POST",
+                url: route("admin.media.store"),
+                data: formData,
+                processData: false,
+                contentType: false,
+            })
+                .then((file) => {
+                    success(file.path);
+                })
+                .catch((xhr) => {
+                    failure(xhr.responseJSON.message);
+                });
+        },
+    });
+}