refs #2590 Wizard currencies added default currency

app/View/Components/Layouts/Wizard/Scripts.php

@@ -103,6 +103,7 @@ class Scripts extends Component
                 'name' => trans('general.name'),
                 'code' => trans('currencies.code'),
                 'rate' => trans('currencies.rate'),
+                'default' => trans('currencies.default'),
                 'enabled' => trans('general.enabled'),
                 'actions' =>  trans('general.actions') ,
                 'yes' => trans('general.yes'),
@@ -162,7 +163,15 @@ class Scripts extends Component
 
     protected function getCurrencies()
     {
-        return Currency::all();
+        $currencies = collect();
+
+        Currency::all()->each(function ($currency) use (&$currencies) {
+            $currency->default = setting('default.currency') == $currency->code;
+
+            $currencies->push($currency);
+        });
+
+        return $currencies;
     }
 
     protected function getCurrencyCodes()

public/css/app.css

@@ -48204,6 +48204,10 @@ body{
     grid-column: span 7 / span 7;
   }
 
+  .sm\:col-span-12{
+    grid-column: span 12 / span 12;
+  }
+
   .sm\:row-span-2{
     grid-row: span 2 / span 2;
   }
@@ -48316,6 +48320,10 @@ body{
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-12{
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
   .sm\:flex-row{
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;

resources/assets/js/Wizard.vue

@@ -25,7 +25,7 @@
             this.modules = wizard_modules;
 
             Object.keys(this.currency_codes).map((key) => {
-              return this.currency_codes[key];
+                return this.currency_codes[key];
             });
 
             this.page_loaded = false;
@@ -34,10 +34,10 @@
         data() {
             return {
                 translations: {
-                  company: {},
+                    company: {},
-                  currencies: {},
+                    currencies: {},
-                  taxes: {},
+                    taxes: {},
-                  finish: {},
+                    finish: {},
                 },
                 company: {},
                 countries: {},

resources/assets/js/mixins/wizardAction.js

@@ -8,6 +8,7 @@ export default {
                 name: "",
                 rate: "",
                 select: "",
+                default_currency: 0,
                 enabled: 1
             },
             error_field: {},
@@ -15,6 +16,7 @@ export default {
             button_loading: false,
         }
     },
+
     methods: {
         onAddItem() {
             this.new_datas = true;
@@ -25,6 +27,8 @@ export default {
                 this.model.name = '';
                 this.model.rate = '';
                 this.model.select = '';
+                this.model.default = false;
+                this.model.default_currency = false;
             }
         },
 
@@ -36,6 +40,8 @@ export default {
             if (this.model) {
                 this.model.name = item.name ? item.name : '';
                 this.model.rate = item.rate ? item.rate : '';
+                this.model.default = item.default ? item.default : false;
+                this.model.default_currency = item.default ? item.default : false;
                 this.model.select = item.code ? item.code : '';
             }
         },
@@ -50,6 +56,8 @@ export default {
             this.model.name = '';
             this.model.rate = '';
             this.model.select = '';
+            this.model.default = false;
+            this.model.default_currency = false;
             this.model.enabled = 1;
         },
 
@@ -74,8 +82,8 @@ export default {
         },
 
         onDeleteItemMessage(event) {
-            let type = event.success ? 'success' : 'error';
+            let type = event.success ? 'success' : 'danger';
-            let timeout = 1000;
+            let timeout = 5000;
 
             if (event.important) {
                 timeout = 0;
@@ -84,7 +92,7 @@ export default {
             this.$notify({
                 message: event.message,
                 timeout: timeout,
-                icon: "",
+                icon: "error_outline",
                 type,
             });
 
@@ -108,6 +116,10 @@ export default {
                 });
             }
 
+            if (data.default_currency) {
+                data.rate = 1;
+            }
+
             window.axios({
                     method: form_method,
                     url: form_url,
@@ -125,7 +137,7 @@ export default {
                             });
                         }
     
-                        if(form_method == 'PATCH') {
+                        if (form_method == 'PATCH') {
                             form_list.forEach(item => {
                                 if (item.id == form_id) {
                                     item.name = response.data.data.name;
@@ -135,6 +147,7 @@ export default {
                             });
                         }
                     }
+
                     this.onSuccessMessage(response);
                 }, this)
                 .catch(error => {
@@ -145,20 +158,23 @@ export default {
         onEjetItem(event, form_list, event_id) {
             form_list.forEach(function (item, index) {
                 if (item.id == event_id) {
-                  form_list.splice(index, 1);
+                    form_list.splice(index, 1);
-                  return;
-                }
-              }, this);
 
-              this.component = "";
+                    return;
-              document.body.classList.remove("overflow-hidden");
+                }
-              this.onDeleteItemMessage(event);
+            }, this);
+
+            this.component = "";
+            document.body.classList.remove("overflow-hidden");
+
+            this.onDeleteItemMessage(event);
         },
 
         onFailErrorGet(field_name) {
-            if(this.error_field[field_name]) {
+            if (this.error_field[field_name]) {
                 return this.error_field[field_name][0];
             }
+
             this.button_loading = false;
         },
 

resources/assets/js/views/wizard/Company.vue

@@ -119,271 +119,273 @@
                 </div>
             </form>
         </div>
-  </div>
+    </div>
 </template>
 
 <script>
-import { Select, Option } from "element-ui";
+    import { Select, Option } from "element-ui";
-import AkauntingDropzoneFileUpload from "./../../components/AkauntingDropzoneFileUpload";
+    import AkauntingDropzoneFileUpload from "./../../components/AkauntingDropzoneFileUpload";
-import AkauntingDate from "./../../components/AkauntingDate";
+    import AkauntingDate from "./../../components/AkauntingDate";
-import WizardAction from "./../../mixins/wizardAction";
+    import WizardAction from "./../../mixins/wizardAction";
-import WizardSteps from "./Steps.vue";
+    import WizardSteps from "./Steps.vue";
 
-export default {
+    export default {
-    name: "Company",
+        name: "Company",
 
-    mixins: [WizardAction],
+        mixins: [
+            WizardAction
+        ],
 
-    components: {
+        components: {
-        [Select.name]: Select,
+            [Select.name]: Select,
-        [Option.name]: Option,
+            [Option.name]: Option,
-        AkauntingDropzoneFileUpload,
+            AkauntingDropzoneFileUpload,
-        AkauntingDate,
+            AkauntingDate,
-        WizardSteps
+            WizardSteps
-    },
-
-    props: {
-        company: {
-            type: [Object, Array],
         },
 
-        countries: {
+        props: {
-            type: [Object, Array],
+            company: {
-        },
+                type: [Object, Array],
-
+            },
-        translations: {
+
-            type: [Object, Array],
+            countries: {
-        },
+                type: [Object, Array],
-
+            },
-        url: {
+
-            type: String,
+            translations: {
-            default: "text",
+                type: [Object, Array],
-        },
+            },
-
+
-        pageLoad: {
+            url: {
-          type: [Boolean, String]
+                type: String,
-        },
+                default: "text",
-
+            },
-        locale: {
+
-            type: String,
+            pageLoad: {
-        },
+                type: [Boolean, String]
-
+            },
-        dateConfig: {
+
-            type: Object,
+            locale: {
-            default: function () {
+                type: String,
-                return {
+            },
-
+
-                };
+            dateConfig: {
+                type: Object,
+                default: function () {
+                    return {
+
+                    };
+                },
+                description: "FlatPckr date configuration"
             },
-            description: "FlatPckr date configuration"
         },
-    },
 
-    data() {
+        data() {
-        return {
+            return {
-            active: 0,
+                active: 0,
-            logo: [],
+                logo: [],
-            real_date: "",
+                real_date: "",
-            lang_data: '',
+                lang_data: '',
-            sorted_countries: [],
+                sorted_countries: [],
-            button_loading_company: false
+                button_loading_company: false
-        };
+            };
-    },
-
-    created() {
-        if (document.documentElement.lang) {
-            let lang_split = document.documentElement.lang.split("-");
-
-            if (lang_split[0] !== 'en') {
-                const lang = require(`flatpickr/dist/l10n/${lang_split[0]}.js`).default[lang_split[0]];
-
-                this.dateConfig.locale = lang;
-            }
-        }
-
-        this.setSortedCountries();
-    },
-
-    computed: {
-        sortedCountries() {
-            this.sorted_countries.sort(this.sortBy('value'));
-
-            return this.sorted_countries;
         },
-    },
 
-    mounted() {
+        created() {
-        let company_data = this.company;
+            if (document.documentElement.lang) {
+                let lang_split = document.documentElement.lang.split("-");
 
-        this.onDataWatch(company_data);
+                if (lang_split[0] !== 'en') {
-    },
+                    const lang = require(`flatpickr/dist/l10n/${lang_split[0]}.js`).default[lang_split[0]];
 
-    methods: {
+                    this.dateConfig.locale = lang;
-        sortBy(option) {
-            return (firstEl, secondEl) => {
-                let first_element = firstEl[option].toUpperCase(); // ignore upper and lowercase
-                let second_element = secondEl[option].toUpperCase(); // ignore upper and lowercase
-
-                if (first_element < second_element) {
-                    return -1;
                 }
-
-                if (first_element > second_element) {
-                    return 1;
-                }
-
-                // names must be equal
-                return 0;
             }
+
+            this.setSortedCountries();
         },
 
-        setSortedCountries() {
+        computed: {
-            // Reset sorted_countries
+            sortedCountries() {
-            this.sorted_countries = [];
+                this.sorted_countries.sort(this.sortBy('value'));
 
-            let created_options = this.countries;
+                return this.sorted_countries;
+            },
+        },
 
-            // Option set sort_option data
+        mounted() {
-            if (!Array.isArray(created_options)) {
+            let company_data = this.company;
-                for (const [key, value] of Object.entries(created_options)) {
+
-                    this.sorted_countries.push({
+            this.onDataWatch(company_data);
-                        key: key.toString(),
+        },
-                        value: value
+
+        methods: {
+            sortBy(option) {
+                return (firstEl, secondEl) => {
+                    let first_element = firstEl[option].toUpperCase(); // ignore upper and lowercase
+                    let second_element = secondEl[option].toUpperCase(); // ignore upper and lowercase
+
+                    if (first_element < second_element) {
+                        return -1;
+                    }
+
+                    if (first_element > second_element) {
+                        return 1;
+                    }
+
+                    // names must be equal
+                    return 0;
+                }
+            },
+
+            setSortedCountries() {
+                // Reset sorted_countries
+                this.sorted_countries = [];
+
+                let created_options = this.countries;
+
+                // Option set sort_option data
+                if (!Array.isArray(created_options)) {
+                    for (const [key, value] of Object.entries(created_options)) {
+                        this.sorted_countries.push({
+                            key: key.toString(),
+                            value: value
+                        });
+                    }
+                } else {
+                    created_options.forEach(function (option, index) {
+                        if (typeof(option) == 'string') {
+                            this.sorted_countries.push({
+                                index: index,
+                                key: index.toString(),
+                                value: option
+                            });
+                        } else {
+                            this.sorted_countries.push({
+                                index: index,
+                                key: option.id.toString(),
+                                value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
+                            });
+                        }
+                    }, this);
+                }
+            },
+
+            onDataWatch(company) {
+                if (Object.keys(company).length) {
+                    if (company.logo) {
+                        let logo_arr = [{
+                            id: company.logo.id,
+                            name: company.logo.filename + "." + company.logo.extension,
+                            path: company.logo.path,
+                            type: company.logo.mime_type,
+                            size: company.logo.size,
+                            downloadPath: false,
+                        }];
+
+                        this.logo.push(logo_arr);
+                    }
+                }
+            },
+
+            onEditSave(event) {
+                event.preventDefault();
+
+                this.button_loading_company = true;
+                
+                FormData.prototype.appendRecursive = function (data, wrapper = null) {
+                    for (var name in data) {
+                        if (name == "previewElement" || name == "previewTemplate") {
+                            continue;
+                        }
+
+                        if (wrapper) {
+                            if (
+                            (typeof data[name] == "object" || Array.isArray(data[name])) &&
+                            data[name] instanceof File != true &&
+                            data[name] instanceof Blob != true
+                            ) {
+                                this.appendRecursive(data[name], wrapper + "[" + name + "]");
+                            } else {
+                                this.append(wrapper + "[" + name + "]", data[name]);
+                            }
+                        } else {
+                            if (
+                            (typeof data[name] == "object" || Array.isArray(data[name])) &&
+                            data[name] instanceof File != true &&
+                            data[name] instanceof Blob != true
+                            ) {
+                                this.appendRecursive(data[name], name);
+                            } else {
+                                this.append(name, data[name]);
+                            }
+                        }
+                    }
+                };
+
+                const formData = new FormData(this.$refs["form"]);
+
+                let data_name = {};
+
+                for (let [key, val] of formData.entries()) {
+                    Object.assign(data_name, {
+                        [key]: val,
                     });
                 }
-            } else {
-                created_options.forEach(function (option, index) {
-                    if (typeof(option) == 'string') {
-                        this.sorted_countries.push({
-                            index: index,
-                            key: index.toString(),
-                            value: option
-                        });
-                    } else {
-                        this.sorted_countries.push({
-                            index: index,
-                            key: option.id.toString(),
-                            value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
-                        });
-                    }
-                }, this);
-            }
-        },
 
-        onDataWatch(company) {
+                let logo = '';
-            if (Object.keys(company).length) {
-                if (company.logo) {
-                    let logo_arr = [{
-                        id: company.logo.id,
-                        name: company.logo.filename + "." + company.logo.extension,
-                        path: company.logo.path,
-                        type: company.logo.mime_type,
-                        size: company.logo.size,
-                        downloadPath: false,
-                    }];
 
-                    this.logo.push(logo_arr);
+                if (this.$refs.dropzoneWizard.files[1]) {
+                    logo = this.$refs.dropzoneWizard.files[1];
+                } else if (this.$refs.dropzoneWizard.files[0]) {
+                    logo = this.$refs.dropzoneWizard.files[0];
                 }
-            }
-        },
 
-        onEditSave(event) {
-            event.preventDefault();
-
-            this.button_loading_company = true;
-            
-            FormData.prototype.appendRecursive = function (data, wrapper = null) {
-                for (var name in data) {
-                    if (name == "previewElement" || name == "previewTemplate") {
-                        continue;
-                    }
-
-                    if (wrapper) {
-                        if (
-                        (typeof data[name] == "object" || Array.isArray(data[name])) &&
-                        data[name] instanceof File != true &&
-                        data[name] instanceof Blob != true
-                        ) {
-                            this.appendRecursive(data[name], wrapper + "[" + name + "]");
-                        } else {
-                            this.append(wrapper + "[" + name + "]", data[name]);
-                        }
-                    } else {
-                        if (
-                        (typeof data[name] == "object" || Array.isArray(data[name])) &&
-                        data[name] instanceof File != true &&
-                        data[name] instanceof Blob != true
-                        ) {
-                            this.appendRecursive(data[name], name);
-                        } else {
-                            this.append(name, data[name]);
-                        }
-                    }
-                }
-            };
-
-            const formData = new FormData(this.$refs["form"]);
-
-            let data_name = {};
-
-            for (let [key, val] of formData.entries()) {
                 Object.assign(data_name, {
-                    [key]: val,
+                    ["logo"]: logo,
+                    ["_prefix"]: "company",
+                    ["_token"]: window.Laravel.csrfToken,
+                    ["_method"]: "POST",
                 });
-            }
 
-            let logo = '';
+                formData.appendRecursive(data_name);
 
-            if (this.$refs.dropzoneWizard.files[1]) {
+                this.company.financial_start = data_name.financial_start;
-                logo = this.$refs.dropzoneWizard.files[1];
-            } else if (this.$refs.dropzoneWizard.files[0]) {
-                logo = this.$refs.dropzoneWizard.files[0];
-            }
 
-            Object.assign(data_name, {
+                window.axios({
-                ["logo"]: logo,
+                    method: "POST",
-                ["_prefix"]: "company",
+                    url: url + "/wizard/companies",
-                ["_token"]: window.Laravel.csrfToken,
+                    data: formData,
-                ["_method"]: "POST",
+                    headers: {
-            });
+                        "X-CSRF-TOKEN": window.Laravel.csrfToken,
+                        "X-Requested-With": "XMLHttpRequest",
+                        "Content-Type": "multipart/form-data",
+                    },
+                })
+                .then((response) => {
+                    this.onSuccessMessage(response);
 
-            formData.appendRecursive(data_name);
+                    this.$router.push("/wizard/currencies");
+                    this.button_loading_company = false;
+                }, this)
+                .catch((error) => {
+                    this.onFailError(error);
+                    this.button_loading_company = false;
+                }, this);
+            },
 
-            this.company.financial_start = data_name.financial_start;
+            next() {
-
+                if (this.active++ > 2);
-            window.axios({
-                method: "POST",
-                url: url + "/wizard/companies",
-                data: formData,
-                headers: {
-                    "X-CSRF-TOKEN": window.Laravel.csrfToken,
-                    "X-Requested-With": "XMLHttpRequest",
-                    "Content-Type": "multipart/form-data",
-                },
-            })
-            .then((response) => {
-                this.onSuccessMessage(response);
 
                 this.$router.push("/wizard/currencies");
-                this.button_loading_company = false;
+            },
-            }, this)
-            .catch((error) => {
-                this.onFailError(error);
-                this.button_loading_company = false;
-            }, this);
         },
 
-        next() {
+        watch: {
-            if (this.active++ > 2);
+            company: function (company) {
-
+                this.onDataWatch(company);
-            this.$router.push("/wizard/currencies");
+            },
         },
-    },
+    };
-
-    watch: {
-        company: function (company) {
-            this.onDataWatch(company);
-        },
-    },
-};
 </script>

resources/assets/js/views/wizard/Currencies.vue

@@ -9,7 +9,7 @@
 
             <div class="overflow-x-visible menu-scroll mt-1">
                 <form ref="form" class="py-2 align-middle inline-block min-w-full">
-                    <table id="tbl-currencies" class="min-w-full divide-y divide-gray-200">
+                    <table v-if="currencies.length" id="tbl-currencies" class="min-w-full divide-y divide-gray-200">
                         <thead>
                             <tr class="flex items-center px-1">
                                 <th class="w-4/12 ltr:pr-6 rtl:pl-6 py-3 ltr:text-left rtl:text-right text-sm font-bold text-black tracking-wider">
@@ -29,11 +29,30 @@
                         <tbody data-table-body>
                             <tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
                                 <td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
-                                    {{ item.name }} 
+                                    {{ item.name }}
+
+                                    <span v-if="item.default" class="cursor-pointer">
+                                        <span class="relative auto" data-tooltip-target="wizard-currency-default" data-tooltip-placement="right">
+                                            <span class="material-icons-round text-purple text-sm ml-2">lock</span>
+                                        </span>
+
+                                        <div id="wizard-currency-default" role="tooltip"
+                                            class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm tooltip-content whitespace-normal opacity-0 invisible"
+                                        >
+                                            {{ translations.currencies.default }}
+                                            <div 
+                                                class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200"
+                                                data-popper-arrow
+                                            >
+                                            </div>
+                                        </div>
+                                    </span>
                                 </td>
+
                                 <td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 text-center whitespace-nowrap text-sm font-medium text-black">
                                     {{ item.code }} 
                                 </td>
+
                                 <td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
                                     {{ item.rate }}
 
@@ -59,14 +78,14 @@
                                 </td>
 
                                 <td class="w-full p-0 current-tab" v-if="current_tab == index">
-                                    <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 py-3">
+                                    <div class="grid sm:grid-cols-12 gap-x-8 gap-y-6 py-3">
-                                        <base-input name="name" data-name="name"
+                                        <base-input :label="translations.currencies.name" name="name" data-name="name"
-                                            form-classes="sm:col-span-2"
+                                            form-classes="sm:col-span-4"
                                             v-model="model.name"
                                             :error="onFailErrorGet('name')"
                                         />
 
-                                        <base-input class="sm:col-span-2" :error="onFailErrorGet('code')">
+                                        <base-input :label="translations.currencies.code" class="sm:col-span-3" :error="onFailErrorGet('code')">
                                             <el-select name="code" v-model="model.select" @change="onChangeCodeItem(model.select)" filterable>
                                                 <el-option
                                                 v-for="option in currency_codes"
@@ -78,14 +97,31 @@
                                             </el-select>
                                         </base-input>
 
-                                        <base-input name="rate" data-name="rate" :placeholder="translations.currencies.rate"
+                                        <base-input :label="translations.currencies.rate" name="rate" data-name="rate" :placeholder="translations.currencies.rate"
-                                            form-classes="sm:col-span-2"
+                                            form-classes="sm:col-span-3"
                                             v-model="model.rate"
                                             :error="onFailErrorGet('rate')"
+                                            :disabled="model.default_currency == 1"
                                         />
 
-                                        <div class="flex justify-end items-center sm:col-span-6">
+                                        <base-input :label="translations.currencies.default" class="sm:col-span-2" :error="onFailErrorGet('default_currency')">
-                                            <base-button class=" flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="onCancelItem()">
+                                            <div class="flex items-center mt-1">
+                                                <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="onChangeDefault(1)" v-bind:class="[model.default_currency == 1 ? ['bg-green-500','text-white'] : 'bg-black-100']">
+                                                    Yes
+                                                    <input type="radio" name="default_currency" id="default-1" class="absolute left-0 opacity-0">
+                                                </label>
+
+                                                <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="onChangeDefault(0)" v-bind:class="[model.default_currency == 0 ? ['bg-red-500','text-white'] : 'bg-black-100']">
+                                                    No
+                                                    <input type="radio" name="default_currency" id="default-0" class="absolute left-0 opacity-0">
+                                                </label>
+                                            </div>
+
+                                            <input type="hidden" name="default_currency" value="0" v-model="model.default_currency" />
+                                        </base-input>
+
+                                        <div class="flex justify-end items-center sm:col-span-12">
+                                            <base-button class="flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="onCancelItem()">
                                                 {{ translations.currencies.cancel }}
                                             </base-button>
 
@@ -106,54 +142,57 @@
                             </tr>
                         </tbody>
                     </table>
+
                     <div class="flex flex-col items-center">
-                        <div v-if="!currencies.length" class="flex flex-col items-center gap-y-2">
+                        <div v-if="new_datas" class="grid sm:grid-cols-12 gap-x-8 gap-y-6 px-1 py-3.5 w-full border-b hover:bg-gray-100">
-                            <span class="text-dark">
+                            <base-input :label="translations.currencies.name" 
-                                {{ translations.currencies.no_currency }}
+                                name="name" 
-                            </span>
+                                data-name="name" 
-
+                                :placeholder="translations.currencies.name"
-                            <span class="text-gray-700">
+                                class="sm:col-span-4"
-                                {{ translations.currencies.create_currency }}
+                                v-model="model.name"
-                            </span>
+                                :error="onFailErrorGet('name')"
-                        </div>
-
-                        <div v-if="currencies.length" class="w-full border-b hover:bg-gray-100" style="height:53px;">
-                            <button type="button" class="w-full h-full flex items-center justify-center text-purple font-medium disabled:bg-gray-200" @click="onAddItem()">
-                                <span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
-                                <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">{{ translations.currencies.new_currency }}</span>
-                            </button>
-                        </div>
-
-                        <button v-else type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 mt-3" @click="onAddItem()">
-                            {{ translations.currencies.new_currency }}
-                        </button>
-
-                        <div v-if="new_datas" class="grid sm:grid-cols-7 gap-x-8 gap-y-6 my-3.5 w-full">
-                            <base-input :label="translations.currencies.name" name="name" data-name="name" :placeholder="translations.currencies.name"
-                            class="sm:col-span-3"
-                            v-model="model.name"
-                            :error="onFailErrorGet('name')"
                             />
 
-                            <base-input :label="translations.currencies.code" class="sm:col-span-2" :error="onFailErrorGet('code')">
+                            <base-input :label="translations.currencies.code" class="sm:col-span-3" :error="onFailErrorGet('code')">
                                 <el-select name="code" v-model="model.select" @change="onChangeCodeItem(model.select)"filterable>
                                     <el-option
-                                    v-for="option in currency_codes"
+                                        v-for="option in currency_codes"
-                                    :key="option"
+                                        :key="option"
-                                    :label="option"
+                                        :label="option"
-                                    :value="option"
+                                        :value="option"
                                     >
                                     </el-option>
                                 </el-select>
                             </base-input>
 
-                            <base-input :label="translations.currencies.rate" name="rate" data-name="rate" :placeholder="translations.currencies.rate"
+                            <base-input :label="translations.currencies.rate"
-                            class="sm:col-span-2"
+                                name="rate"
-                            v-model="model.rate"
+                                data-name="rate"
-                            :error="onFailErrorGet('rate')"
+                                :placeholder="translations.currencies.rate"
+                                class="sm:col-span-3"
+                                v-model="model.rate"
+                                :disabled="model.default_currency == 1"
+                                :error="onFailErrorGet('rate')"
                             />
 
-                            <div class="flex items-center justify-end sm:col-span-7">
+                            <base-input :label="translations.currencies.default" class="sm:col-span-2" :error="onFailErrorGet('default_currency')">
+                                <div class="flex items-center mt-1">
+                                    <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="onChangeDefault(1)" v-bind:class="[model.default_currency == 1 ? ['bg-green-500','text-white'] : 'bg-black-100']">
+                                        Yes
+                                        <input type="radio" name="default_currency" id="default-1" class="absolute left-0 opacity-0">
+                                    </label>
+
+                                    <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="onChangeDefault(0)" v-bind:class="[model.default_currency == 0 ? ['bg-red-500','text-white'] : 'bg-black-100']">
+                                        No
+                                        <input type="radio" name="default_currency" id="default-0" class="absolute left-0 opacity-0">
+                                    </label>
+                                </div>
+
+                                <input type="hidden" name="default_currency" value="0" v-model="model.default_currency" />
+                            </base-input>
+
+                            <div class="flex items-center justify-end sm:col-span-12">
                                 <base-button class=" flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="new_datas = false">
                                     {{ translations.currencies.cancel }}
                                 </base-button>
@@ -166,167 +205,212 @@
                                 </button>
                             </div>
                         </div>
+
+                        <div v-if="! currencies.length && ! new_datas" class="flex flex-col items-center gap-y-2">
+                            <span class="text-dark">
+                                {{ translations.currencies.no_currency }}
+                            </span>
+
+                            <span class="text-gray-700">
+                                {{ translations.currencies.create_currency }}
+                            </span>
+                        </div>
+
+                        <button v-if="! currencies.length && ! new_datas" type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 mt-3" @click="onAddItem()">
+                            {{ translations.currencies.new_currency }}
+                        </button>
+
+                        <div v-if="currencies.length && ! new_datas" class="w-full border-b hover:bg-gray-100" style="height:53px;">
+                            <button type="button" class="w-full h-full flex items-center justify-center text-purple font-medium disabled:bg-gray-200" @click="onAddItem()">
+                                <span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
+                                <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">{{ translations.currencies.new_currency }}</span>
+                            </button>
+                        </div>
                     </div>
                 </form>
             </div>
 
             <div class="flex items-center justify-center mt-5 gap-x-10">
-            <base-button class="w-1/2  flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="prev()">
+                <base-button class="w-1/2  flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="prev()">
-                {{ translations.currencies.previous }}
+                    {{ translations.currencies.previous }}
-            </base-button>
+                </base-button>
 
-            <base-button class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="next()">
+                <base-button class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="next()">
-                {{translations.currencies.next}}
+                    {{ translations.currencies.next }}
-            </base-button>
+                </base-button>
             </div>
         </div>
 
-        <notifications></notifications>
-
         <form id="form-dynamic-component" method="POST" action="#"></form>
 
         <component v-bind:is="component" @deleted="onDeleteCurrency($event)"></component>
+
+        <notifications></notifications>
     </div>
 </template>
 
 <script>
-import { Select, Option } from "element-ui";
+    import { Select, Option } from "element-ui";
-import AkauntingRadioGroup from "./../../components/AkauntingRadioGroup";
+    import AkauntingRadioGroup from "./../../components/AkauntingRadioGroup";
-import BulkAction from "./../../plugins/bulk-action";
+    import BulkAction from "./../../plugins/bulk-action";
-import MixinsGlobal from "./../../mixins/global";
+    import MixinsGlobal from "./../../mixins/global";
-import WizardAction from "./../../mixins/wizardAction";
+    import WizardAction from "./../../mixins/wizardAction";
-import WizardSteps from "./Steps.vue";
+    import WizardSteps from "./Steps.vue";
 
-export default {
+    export default {
-    name: "Currencies",
+        name: "Currencies",
 
-    mixins: [MixinsGlobal, WizardAction],
+        mixins: [
+            MixinsGlobal,
+            WizardAction
+        ],
 
-    components: {
+        components: {
-        [Select.name]: Select,
+            [Select.name]: Select,
-        [Option.name]: Option,
+            [Option.name]: Option,
-        AkauntingRadioGroup,
+            AkauntingRadioGroup,
-        WizardSteps
+            WizardSteps
-    },
-
-    props: {
-        currencies: {
-            type: [Object, Array],
         },
 
-        currency_codes: {
+        props: {
-            type: [Object, Array],
+            currencies: {
-        },
+                type: [Object, Array],
+            },
 
-        translations: {
+            currency_codes: {
-            type: [Object, Array],
+                type: [Object, Array],
-        },
+            },
 
-        pageLoad: {
+            translations: {
-          type: [Boolean, String]
+                type: [Object, Array],
-        }
+            },
-    },
 
-    data() {
+            pageLoad: {
-        return {
+                type: [Boolean, String]
-            active: 1,
-            bulk_action: new BulkAction(url + "/settings/currencies"),
-        };
-    },
-
-    methods: {
-        onClickDelete(item) {
-            this.confirmDelete(
-                `${
-                  new URL(url).protocol +
-                  "//" +
-                  location.host +
-                  location.pathname +
-                  "/" +
-                  item.id
-                }`,
-                this.translations.currencies.title,
-                `Confirm Delete <strong>${item.name}</strong> ${this.translations.currencies.title}?`,
-                this.translations.currencies.cancel,
-                this.translations.currencies.delete
-            );
-        },
-
-        onDeleteCurrency(event) {
-            this.onEjetItem(event, this.currencies, event.currency_id);
-        },
-
-        onChangeCodeItem(code) {
-            const formData = new FormData(this.$refs["form"]);
-            const data = {
-                rate: "",
-                precision: "",
-                symbol: "",
-                symbol_first: "",
-                decimal_mark: "",
-                thousands_separator: "",
-            };
-
-            for (let [key, val] of formData.entries()) {
-                Object.assign(data, {
-                    [key]: val,
-                });
             }
-
-            window.axios({
-                method: "GET",
-                url: url + "/settings/currencies/config",
-                params: {
-                    code: code,
-                },
-            })
-            .then((response) => {
-                data.rate = response.data.rate;
-                data.precision = response.data.precision;
-                data.symbol = response.data.symbol;
-                data.symbol_first = response.data.symbol_first;
-                data.decimal_mark = response.data.decimal_mark;
-                data.thousands_separator = response.data.thousands_separator;
-
-                this.model.rate = response.data.rate;
-            }, this);
         },
 
-        onEditForm(item, event) {
+        data() {
-            event.preventDefault();
+            return {
-
+                active: 1,
-            this.onSubmitEvent(
+                empty: false,
-                "PATCH",
+            };
-                url + "/wizard/currencies/" + item.id,
-                "",
-                this.currencies,
-                item.id
-            );
         },
 
-        onSubmitForm(event) {
+        created() {
-            event.preventDefault();
+            this.empty = ! this.currencies.length;
-
-            this.onSubmitEvent(
-                "POST",
-                url + "/wizard/currencies",
-                "",
-                this.currencies
-            );
         },
 
-        prev() {
+        methods: {
-            if (this.active-- > 2);
+            onClickDelete(item) {
-            //history.back()
+                this.confirmDelete(
+                    `${
+                    new URL(url).protocol +
+                    "//" +
+                    location.host +
+                    location.pathname +
+                    "/" +
+                    item.id
+                    }`,
+                    this.translations.currencies.title,
+                    `Confirm Delete <strong>${item.name}</strong> ${this.translations.currencies.title}?`,
+                    this.translations.currencies.cancel,
+                    this.translations.currencies.delete
+                );
+            },
 
-            this.$router.push("/wizard/companies");
+            onDeleteCurrency(event) {
+                this.empty = this.currencies.length;
+
+                if (event.success) {
+                    this.onEjetItem(event, this.currencies, event.currency_id);
+
+                    this.empty = ! this.currencies.length;
+                } else {
+                    this.component = "";
+                    event.important = true;
+                    document.body.classList.remove("overflow-hidden");
+
+                    this.onDeleteItemMessage(event);
+                }
+            },
+
+            onChangeDefault(value) {
+                this.model.rate = 1;
+                this.model.default_currency = value;
+            },
+
+            onChangeCodeItem(code) {
+                const formData = new FormData(this.$refs["form"]);
+                const data = {
+                    rate: "",
+                    precision: "",
+                    symbol: "",
+                    symbol_first: "",
+                    decimal_mark: "",
+                    thousands_separator: "",
+                };
+
+                for (let [key, val] of formData.entries()) {
+                    Object.assign(data, {
+                        [key]: val,
+                    });
+                }
+
+                window.axios({
+                    method: "GET",
+                    url: url + "/settings/currencies/config",
+                    params: {
+                        code: code,
+                    },
+                })
+                .then((response) => {
+                    data.rate = response.data.rate;
+                    data.precision = response.data.precision;
+                    data.symbol = response.data.symbol;
+                    data.symbol_first = response.data.symbol_first;
+                    data.decimal_mark = response.data.decimal_mark;
+                    data.thousands_separator = response.data.thousands_separator;
+
+                    this.model.rate = response.data.rate;
+                }, this);
+            },
+
+            onEditForm(item, event) {
+                event.preventDefault();
+
+                this.onSubmitEvent(
+                    "PATCH",
+                    url + "/wizard/currencies/" + item.id,
+                    "",
+                    this.currencies,
+                    item.id
+                );
+            },
+
+            onSubmitForm(event) {
+                event.preventDefault();
+
+                this.onSubmitEvent(
+                    "POST",
+                    url + "/wizard/currencies",
+                    "",
+                    this.currencies
+                );
+            },
+
+            prev() {
+                if (this.active-- > 2);
+                //history.back()
+
+                this.$router.push("/wizard/companies");
+            },
+
+            next() {
+                if (this.active++ > 2);
+
+                this.$router.push("/wizard/taxes");
+            },
         },
-
+    };
-        next() {
-            if (this.active++ > 2);
-
-            this.$router.push("/wizard/taxes");
-        },
-    },
-};
 </script>

resources/views/components/form/group/toggle.blade.php

@@ -11,27 +11,27 @@
 
         <div class="flex items-center mt-1">
             @if (empty($attributes['disabled']))
-            <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="form.{{ $name }}=1" v-bind:class="[form.{{ $name }} == 1 ? ['bg-green-500','text-white'] : 'bg-black-100']">
+                <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="form.{{ $name }}=1" v-bind:class="[form.{{ $name }} == 1 ? ['bg-green-500','text-white'] : 'bg-black-100']">
-                {{ empty($enable) ? trans('general.yes') : $enable }}
+                    {{ empty($enable) ? trans('general.yes') : $enable }}
-                <input type="radio" name="{{ $name }}" id="{{ $name }}-1" class="absolute left-0 opacity-0">
+                    <input type="radio" name="{{ $name }}" id="{{ $name }}-1" class="absolute left-0 opacity-0">
-            </label>
+                </label>
             @else
-            <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-not-allowed{{ ($value) ? ' bg-green-500 text-white opacity-20 disabled' : ' disabled' }}">
+                <label class="relative w-10 rounded-tl-lg rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-not-allowed{{ ($value) ? ' bg-green-500 text-white opacity-20 disabled' : ' disabled' }}">
-                {{ empty($enable) ? trans('general.yes') : $enable }}
+                    {{ empty($enable) ? trans('general.yes') : $enable }}
-                <input type="radio" name="{{ $name }}" id="{{ $name }}-1" class="absolute left-0 opacity-0" disabled>
+                    <input type="radio" name="{{ $name }}" id="{{ $name }}-1" class="absolute left-0 opacity-0" disabled>
-            </label>
+                </label>
             @endif
 
             @if (empty($attributes['disabled']))
-            <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="form.{{ $name }}=0" v-bind:class="[form.{{ $name }} == 0 ? ['bg-red-500','text-white'] : 'bg-black-100']">
+                <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-pointer" @click="form.{{ $name }}=0" v-bind:class="[form.{{ $name }} == 0 ? ['bg-red-500','text-white'] : 'bg-black-100']">
-                {{ empty($disable) ? trans('general.no') : $disable }}
+                    {{ empty($disable) ? trans('general.no') : $disable }}
-                <input type="radio" name="{{ $name }}" id="{{ $name }}-0" class="absolute left-0 opacity-0">
+                    <input type="radio" name="{{ $name }}" id="{{ $name }}-0" class="absolute left-0 opacity-0">
-            </label>
+                </label>
             @else
-            <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-not-allowed{{ ($value) ? ' disabled' : 'bg-red-500 text-white opacity-20 disabled disabled' }}">
+                <label class="relative w-10 rounded-tr-lg rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-not-allowed{{ ($value) ? ' disabled' : 'bg-red-500 text-white opacity-20 disabled disabled' }}">
-                {{ empty($disable) ? trans('general.no') : $disable }}
+                    {{ empty($disable) ? trans('general.no') : $disable }}
-                <input type="radio" name="{{ $name }}" id="{{ $name }}-0" class="absolute left-0 opacity-0" disabled>
+                    <input type="radio" name="{{ $name }}" id="{{ $name }}-0" class="absolute left-0 opacity-0" disabled>
-            </label>
+                </label>
             @endif
         </div>
 

resources/views/components/layouts/wizard/scripts.blade.php

@@ -1,6 +1,8 @@
 @stack('scripts_start')
     <!-- Core -->
     <script src="{{ asset('public/vendor/js-cookie/js.cookie.js') }}"></script>
+    <script type="text/javascript" src="{{ asset('public/akaunting-js/generalAction.js') }}"></script>
+    <script type="text/javascript" src="{{ asset('public/akaunting-js/popper.js') }}"></script>
 
     <script type="text/javascript">
         var wizard_translations = {!! json_encode($translations) !!};