v2 first commit

resources/assets/js/plugins/bulk-action.js

@@ -0,0 +1,128 @@
+import axios from "axios";
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import NProgressAxios from './nprogress-axios';
+
+export default class BulkAction {
+    constructor(path) {
+        //This path use action url
+        this['path'] = path;
+        // Count selected items
+        this['count'] = '';
+        // Select action value ex: delete, export
+        this['value'] = '*';
+        // Select action message
+        this['message'] = '';
+        // Bulk action view status
+        this['show'] = false;
+        // Bulk action modal status
+        this['modal'] = false;
+        // Bulk action modal action
+        this['loading'] = false;
+        // Selected item list
+        this['selected'] = [];
+        // Select all items
+        this['select_all'] = false;
+    }
+
+    // Change checkbox status
+    select() {
+        this.show = true;
+        this.select_all = false;
+
+        this.count = this.selected.length;
+
+        if (this.count == document.querySelectorAll('[data-bulk-action]').length) {
+            this.select_all = true;
+        }
+
+        if (!this.count) {
+            this.show = false;
+        }
+    }
+
+    // Select all items action
+    selectAll() {
+        this.show = false;
+        this.selected = [];
+
+        if (!this.select_all) {
+            this.show = true;
+
+            for (let input of document.querySelectorAll('[data-bulk-action]')) {
+                this.selected.push(input.getAttribute('value'));
+            }
+        }
+
+        this.count = this.selected.length;
+    }
+
+    change(event) {
+        this.message = event.target.options[event.target.options.selectedIndex].dataset.message;
+
+        if (typeof(this.message) == "undefined") {
+            this.message = '';
+        }
+
+        return this.message;
+    }
+
+    // Selected item use action
+    action() {
+        var path = document.getElementsByName("bulk_action_path")[0].getAttribute('value');
+
+        this.loading = true;
+
+        axios.post('bulk-actions/' + path, {
+            'handle': this.value,
+            'selected': this.selected
+        })
+        .then(response => {
+            //this.loading = false;
+            //this.modal = false;
+
+            window.location.reload(false);
+        })
+        .catch(error => {
+            //this.loading = false;
+            //this.modal = false;
+
+            window.location.reload(false);
+        });
+    }
+
+    // Selected items clear
+    clear() {
+        this.show = false;
+        this.select_all = false;
+        this.selected = [];
+    }
+
+    // Change enabled status
+    status(item_id, event, notify) {
+        var item = event.target;
+        var status = (event.target.checked) ? 'enable' : 'disable';
+
+        axios.get(this.path + '/' + item_id + '/' + status)
+        .then(response => {
+            var type = (response.data.success) ? 'success' : 'warning';
+
+            if (!response.data.success) {
+                if (item.checked) {
+                    item.checked = false;
+                } else {
+                    item.checked = true;
+                }
+            }
+
+            notify({
+                message: response.data.message,
+                timeout: 5000,
+                icon: 'fas fa-bell',
+                type
+            });
+        })
+        .catch(error => {
+        });
+    }
+}

resources/assets/js/plugins/dashboard-plugin.js

@@ -0,0 +1,41 @@
+// Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE)
+import './../polyfills';
+// Notifications plugin. Used on Notifications page
+import Notifications from './../components/NotificationPlugin';
+// Validation plugin used to validate forms
+import VeeValidate from 'vee-validate';
+// A plugin file where you could register global components used across the app
+import GlobalComponents from './globalComponents';
+// A plugin file where you could register global directives
+import GlobalDirectives from './globalDirectives';
+// Sidebar on the right. Used as a local plugin in DashboardLayout.vue
+import SideBar from './../components/SidebarPlugin';
+
+// element ui language configuration
+import lang from 'element-ui/lib/locale/lang/en';
+import locale from 'element-ui/lib/locale';
+
+locale.use(lang);
+
+// asset imports
+import './../../sass/argon.scss';
+import './../../css/nucleo/css/nucleo.css';
+import 'element-ui/lib/theme-chalk/index.css';
+
+export default {
+    install(Vue) {
+        Vue.use(GlobalComponents);
+        Vue.use(GlobalDirectives);
+        Vue.use(SideBar);
+        Vue.use(Notifications);
+        Vue.use(VeeValidate, {
+            fieldsBagName: 'veeFields',
+            classes      : true,
+            validity     : true,
+            classNames   : {
+                valid  : 'is-valid',
+                invalid: 'is-invalid'
+            }
+        });
+    }
+};

resources/assets/js/plugins/error.js

@@ -0,0 +1,36 @@
+export default class Errors {
+    constructor() {
+        this.errors = {};
+    }
+
+    has(field) {
+        // if this.errors contains as "field" property.
+        return this.errors.hasOwnProperty(field);
+    }
+
+    any() {
+        return Object.keys(this.errors).length > 0;
+    }
+
+    set(key, field) {
+        return this.errors[key] = field;
+    }
+
+    get(field) {
+        if (this.errors[field]) {
+            return this.errors[field][0];
+        }
+    }
+
+    record(errors) {
+        this.errors = errors;
+    }
+
+    clear(field) {
+        if (field) {
+            return delete this.errors[field];
+        }
+
+        this.errors = {};
+    }
+}

resources/assets/js/plugins/form.js

@@ -0,0 +1,179 @@
+import Errors from './error';
+import axios from "axios";
+
+export default class Form {
+    constructor(form_id) {
+        let form = document.getElementById(form_id);
+
+        if (!form) {
+            return;
+        }
+
+        this['method'] = form.getAttribute('method').toLowerCase();
+        this['action'] = form.getAttribute('action');
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("input")) {
+            if (form_element.getAttribute('id') == 'global-search') {
+                continue;
+            }
+
+            var name = form_element.getAttribute('name');
+            var type = form_element.getAttribute('type');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (form_element.getAttribute('data-item')) {
+                if (!this['items']) {
+                    var item = {};
+                    var row = {};
+
+                    item[0] = row;
+                    this['items'] = item;
+                }
+
+                if (!this['items'][0][form_element.getAttribute('data-item')]) {
+                    this['items'][0][form_element.getAttribute('data-item')] = '';
+                }
+
+                this['item_backup'] = this['items'];
+
+                continue;
+            }
+
+            if (type == 'radio') {
+                if (!this[name]) {
+                    this[name] = form_element.getAttribute('value') || '';
+                }
+            } else if (type == 'checkbox') {
+                if (this[name]) {
+                    if (!this[name].push) {
+                        this[name] = [this[name]];
+                    }
+
+                    if (form_element.checked) {
+                        this[name].push(form_element.value);
+                    }
+                } else {
+                    if (form_element.checked) {
+                        this[name] = form_element.value;
+                    } else {
+                        this[name] = [];
+                    }
+                }
+            } else {
+                this[name] = form_element.getAttribute('value') || '';
+            }
+        }
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("textarea")) {
+            var name = form_element.getAttribute('name');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (this[name]) {
+                if (!this[name].push) {
+                    this[name] = [this[name]];
+                }
+
+                this[name].push(form_element.value || '');
+            } else {
+                this[name] = form_element.value || '';
+            }
+        }
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("select")) {
+            var name = form_element.getAttribute('name');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (this[name]) {
+                if (!this[name].push) {
+                    this[name] = [this[name]];
+                }
+
+                this[name].push(form_element.getAttribute('value') || '');
+            } else {
+                this[name] = form_element.getAttribute('value') || '';
+            }
+        }
+
+        this.errors = new Errors();
+
+        this.loading = false;
+
+        this.response = {};
+    }
+
+    data() {
+        let data = Object.assign({}, this);
+
+        delete data.method;
+        delete data.action;
+        delete data.errors;
+        delete data.loading;
+        delete data.response;
+
+        return data;
+    }
+
+    reset() {
+        for (let form_element of document.getElementsByTagName("input")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+
+        for (let form_element of document.getElementsByTagName("textarea")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+
+        for (let form_element of document.getElementsByTagName("select")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+    }
+
+    submit() {
+        this.loading = true;
+
+        axios[this.method](this.action, this.data())
+        .then(this.onSuccess.bind(this))
+        .catch(this.onFail.bind(this));
+    }
+
+    onSuccess(response) {
+        this.errors.clear();
+
+        this.loading = false;
+
+        if (response.data.redirect) {
+            this.loading = true;
+
+            window.location.href = response.data.redirect;
+        }
+
+        this.response = response.data;
+    }
+
+    // Form fields check validation issue
+    onFail(error) {
+        this.errors.record(error.response.data.errors);
+
+        this.loading = false;
+    }
+}

resources/assets/js/plugins/globalComponents.js

@@ -0,0 +1,46 @@
+import BaseInput from './../components/Inputs/BaseInput';
+import BaseDropdown from './../components/BaseDropdown.vue';
+import Card from './../components/Cards/Card.vue';
+import Modal from './../components/Modal.vue';
+import StatsCard from './../components/Cards/StatsCard.vue';
+import BaseButton from './../components/BaseButton.vue';
+import Badge from './../components/Badge.vue';
+import RouteBreadcrumb from './../components/Breadcrumb/RouteBreadcrumb';
+import BaseCheckbox from './../components/Inputs/BaseCheckbox.vue';
+import BaseSwitch from './../components/BaseSwitch.vue';
+import BaseRadio from "./../components/Inputs/BaseRadio";
+import BaseProgress from "./../components/BaseProgress";
+import BasePagination from "./../components/BasePagination";
+import BaseAlert from "./../components/BaseAlert";
+import BaseNav from "./../components/Navbar/BaseNav";
+import BaseHeader from './../components/BaseHeader';
+import { Input, Tooltip, Popover } from 'element-ui';
+/**
+ * You can register global components here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalComponents = {
+    install(Vue) {
+        Vue.component(Badge.name, Badge);
+        Vue.component(BaseAlert.name, BaseAlert);
+        Vue.component(BaseButton.name, BaseButton);
+        Vue.component(BaseCheckbox.name, BaseCheckbox);
+        Vue.component(BaseHeader.name, BaseHeader);
+        Vue.component(BaseInput.name, BaseInput);
+        Vue.component(BaseDropdown.name, BaseDropdown);
+        Vue.component(BaseNav.name, BaseNav);
+        Vue.component(BasePagination.name, BasePagination);
+        Vue.component(BaseProgress.name, BaseProgress);
+        Vue.component(BaseRadio.name, BaseRadio);
+        Vue.component(BaseSwitch.name, BaseSwitch);
+        Vue.component(Card.name, Card);
+        Vue.component(Modal.name, Modal);
+        Vue.component(StatsCard.name, StatsCard);
+        Vue.component(RouteBreadcrumb.name, RouteBreadcrumb);
+        Vue.component(Input.name, Input);
+        Vue.use(Tooltip);
+        Vue.use(Popover);
+    }
+};
+
+export default GlobalComponents;

resources/assets/js/plugins/globalDirectives.js

@@ -0,0 +1,13 @@
+import clickOutside from './../directives/click-ouside.js';
+
+/**
+ * You can register global directives here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalDirectives = {
+    install(Vue) {
+        Vue.directive('click-outside', clickOutside);
+    }
+};
+
+export default GlobalDirectives;

resources/assets/js/plugins/nprogress-axios.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+import NProgress from "nprogress";
+
+axios.interceptors.request.use(function (config) {
+    // Do something before request is sent
+    NProgress.start();
+
+    return config;
+}, function (error) {
+    // Do something with request error
+    console.log(error);
+
+    return Promise.reject(error);
+});
+
+// Add a response interceptor
+axios.interceptors.response.use(function (response) {
+    // Do something with response data
+    NProgress.done();
+
+    return response;
+}, function (error) {
+    NProgress.done();
+    // Do something with response error
+    console.log(error);
+
+    return Promise.reject(error);
+});

resources/assets/js/plugins/selecttwo.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+/*
+// Initialize the annoying-background directive.
+export const SelectTwo = {
+    twoWay: true,
+    bind(el, binding, vnode) {
+        var variblee = this;
+        var selectbox = el.getAttribute('id');
+        var binding2 = binding;
+        var vnode2 = vnode;
+
+        $(vnode.elm).select2()
+            .on("select2:select", function(e) {
+                //this.$set($(vnode.elm).val());
+            }.bind($(vnode.elm)));
+    },
+    update: function(nv, ov) {
+        $('#' + nv.id).trigger("change");
+    }
+}
+
+// You can also make it available globally.
+Vue.directive('select-two', SelectTwo);
+*/
+
+
+Vue.component('select2', {
+    props: ['options', 'value'],
+    template: '#select2-template',
+    mounted: function () {
+        var vm = this
+        $(this.$el)
+        // init select2
+            .select2({ data: this.options })
+            .val(this.value)
+            .trigger('change')
+            // emit event on change.
+            .on('change', function () {
+                vm.$emit('input', this.value)
+            })
+    },
+    watch: {
+        value: function (value) {
+            // update value
+            $(this.$el)
+                .val(value)
+                .trigger('change')
+        },
+        options: function (options) {
+            // update options
+            $(this.$el).empty().select2({ data: options })
+        }
+    },
+    destroyed: function () {
+        $(this.$el).off().select2('destroy')
+    }
+})