Code refactoring

resources/assets/js/Wizard.vue

@@ -5,14 +5,18 @@
     :taxes="taxes"
     :modules="modules.data"
     :currency_codes="currency_codes"
-    :companies="companies"
+    :company="company"
   ></router-view>
 </template>
 
 <script>
 export default {
-  name: 'Wizard',
-
+    name: 'Wizard',
+    data: function () {
+        return {
+            page_loaded: true,
+        }
+    },
   created() {
     let self = this;
 
@@ -31,6 +35,10 @@ export default {
         Object.keys(data.currency_codes).map((key) => {
           return data.currency_codes[key];
         });
+
+        setTimeout(function() {
+            self.page_loaded = false;
+        }.bind(self), 800);
       });
   },
 
@@ -40,9 +48,9 @@ export default {
       currency_codes: [],
       taxes: [],
       modules: {},
-      companies: {},
+      company: {},
       translations: {
-        companies: {},
+        company: {},
         currencies: {},
         taxes: {},
         finish: {},
@@ -94,6 +102,11 @@ export default {
   border-right:1px solid;
 }
 
+ .el-step__icon {
+    -webkit-transition: unset;
+    transition: unset;
+  }
+
 @media screen and (max-width: 991px) {
   .form-container .has-error {
     position: relative;

resources/assets/js/components/AkauntingDate.vue

@@ -12,7 +12,7 @@
         :disabled="disabled"
         >
         <flat-picker slot-scope="{focus, blur}"
-            :name="title"
+            :name="dataName"
             @on-open="focus"
             @on-close="blur"
             :config="dateConfig"
@@ -42,6 +42,11 @@ export default {
             default: '',
             description: "Modal header title"
         },
+        dataName: {
+            type: String,
+            default: '',
+            description: "Modal header title"
+        },
         placeholder: {
             type: String,
             default: '',
@@ -93,7 +98,7 @@ export default {
 
     data() {
         return {
-            real_model: this.model,
+            real_model: '',
         }
     },
     
@@ -121,6 +126,13 @@ export default {
             
             this.$emit('change', this.real_model);
         }
+    },
+    watch: {
+        real_model: function(val) {
+            this.real_model = val;
+
+        this.$emit('interface', this.real_model);
+        }
     }
 }
 </script>

resources/assets/js/components/AkauntingDropzoneFileUpload.vue

@@ -231,6 +231,42 @@ export default {
     async mounted() {
         this.initDropzone();
     },
+    
+    watch: {
+    attachments: function (attachments) {
+      attachments.forEach((attachment) => {
+            var mockFile = {
+                id: attachment[0].id,
+                name: attachment[0].name,
+                size: attachment[0].size,
+                type: attachment[0].type,
+                download: attachment[0].downloadPath,
+                dropzone: 'edit',
+            };
+
+            this.dropzone.emit("addedfile", mockFile);
+            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, attachment[0].path);
+
+            // Make sure that there is no progress bar, etc...
+            this.dropzone.emit("complete", mockFile);
+        }, this);
+
+
+
+        this.files.forEach(async (attachment) => {
+            if (attachment.download) {
+                attachment.previewElement.querySelector("[data-dz-download]").href = attachment.download;
+                attachment.previewElement.querySelector("[data-dz-download]").classList.remove("d-none");
+            }
+        });
+
+        if (this.preview == 'single' && attachments.length == 1) {
+            this.$nextTick(() => {
+                document.querySelector("#dropzone-" + this._uid).classList.add("dz-max-files-reached");
+            });
+        }
+    },
+  },
 }
 </script>
 

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

@@ -1,51 +1,51 @@
 <template>
   <div>
-    <h1 class="text-white">{{ translations.companies.title }}</h1>
+    <h1 class="text-white">
+      {{ translations.company.title }}
+    </h1>
     <div class="card">
       <div class="card-header wizard-header p-3">
         <el-steps :active="active" finish-status="success" align-center>
-          <el-step :title="translations.companies.title"></el-step>
+          <el-step :title="translations.company.title"></el-step>
           <el-step :title="translations.currencies.title"></el-step>
           <el-step :title="translations.taxes.title"></el-step>
           <el-step :title="translations.finish.title"></el-step>
         </el-steps>
       </div>
-      <form
-        ref="form"
-        class="w-100"
-      >
+      <form ref="form" class="w-100">
         <div class="card-body">
           <div class="row mb-4">
             <div class="col-12 mb-4">
               <base-input
-                :label="translations.companies.api_key"
+                :label="translations.company.api_key"
                 name="api_key"
                 data-name="api_key"
-                :placeholder="translations.companies.api_key"
+                :placeholder="translations.company.api_key"
                 prepend-icon="fas fa-key"
-                v-model="model.apiKey"
+                v-model="company.api_key"
               />
               <p class="mb-0 mt--3">
                 <small>
-                  <div v-html="translations.companies.get_api_key"></div>
+                  <div v-html="translations.company.get_api_key"></div>
                 </small>
               </p>
             </div>
             <div class="col-6 mb-4">
               <base-input
                 type="text"
-                :label="translations.companies.tax_number"
+                :label="translations.company.tax_number"
                 name="tax_number"
                 data-name="tax_number"
-                :placeholder="translations.companies.tax_number"
+                :placeholder="translations.company.tax_number"
                 prepend-icon="fas fa-percent"
-                v-model="companies.tax_number"
+                v-model="company.tax_number"
               />
             </div>
             <div class="col-6 mb-4">
               <akaunting-date
-                :title="translations.companies.financial_start"
-                :placeholder="translations.companies.financial_start"
+                :title="translations.company.financial_start"
+                data-name="financial_start"
+                :placeholder="translations.company.financial_start"
                 prepend-icon="fas fa-calendar"
                 :date-config="{
                   dateFormat: 'd-m',
@@ -53,27 +53,30 @@
                   altInput: true,
                   altFormat: 'j F',
                 }"
-                v-model="model.date"
+                v-model="company.financial_start"
               ></akaunting-date>
             </div>
             <div class="col-12 mb-4">
-              <base-input :label="translations.companies.address">
+              <base-input :label="translations.company.address">
                 <textarea
                   class="form-control"
                   name="address"
                   data-name="address"
                   rows="3"
-                  :placeholder="translations.companies.address"
-                  v-model="companies.address"
+                  :placeholder="translations.company.address"
+                  v-model="company.address"
                 ></textarea>
               </base-input>
             </div>
             <div class="col-6">
-              <base-input :label="translations.companies.logo">
-                <akaunting-dropzone-file-upload
-                  preview-classes="single"
-                >
-                </akaunting-dropzone-file-upload>
+              <base-input :label="translations.company.logo">
+                <keep-alive>
+                  <akaunting-dropzone-file-upload
+                    preview-classes="single"
+                    :attachments="logo"
+                  >
+                  </akaunting-dropzone-file-upload>
+                </keep-alive>
               </base-input>
             </div>
           </div>
@@ -81,11 +84,14 @@
         <div class="card-footer">
           <div class="row">
             <div class="col-md-12 text-right">
-              <base-button type="success" native-type="button" @click="onEditSave()">{{
-                translations.companies.save
-              }}</base-button>
+              <base-button
+                type="success"
+                native-type="button"
+                @click="onEditSave()"
+                >{{ translations.company.save }}</base-button
+              >
               <base-button type="white" native-type="submit" @click="next()">{{
-                translations.companies.skip
+                translations.company.skip
               }}</base-button>
             </div>
           </div>
@@ -111,7 +117,7 @@ export default {
     AkauntingDate,
   },
   props: {
-    companies: {
+    company: {
       type: [Object, Array],
     },
     translations: {
@@ -121,23 +127,56 @@ export default {
   data() {
     return {
       active: 0,
-      model: {
-        apiKey: "503df039-d0bc-4f74-aba8-a6f1d38c645b",
-        taxNumber: "",
-        address: "",
-        date: "01.01",
-      },
-    };
+      logo: [],
+      real_date: ''
+      };
+  },
+  mounted() {
+    setTimeout(() => {
+      debugger;
+      if (this.company != undefined) {
+        let logo_arr = [
+          {
+            id: this.company.logo.id,
+            name:this.company.logo.filename + "." + this.company.logo.extension,
+            path: this.company.logo.path,
+            type: this.company.logo.mime_type,
+            size: this.company.logo.size,
+            downloadPath: false,
+          },
+        ];
+        this.logo.push(logo_arr);
+        this.real_date = this.company.financial_start;
+      }
+    }, 500);
+  },
+  watch: {
+    company: function (company) {
+      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);
+      this.real_date = company.financial_start;
+    },
   },
   methods: {
     next() {
       if (this.active++ > 2);
       this.$router.push("/wizard/currencies");
     },
+
     onEditSave() {
-      this.onEditEvent("PATCH", url + "/wizard/companies", '', '', '');
+      this.onEditEvent("PATCH", url + "/wizard/company", "", "", "");
+
       this.$router.push("/wizard/currencies");
-    }
+    },
   },
 };
 </script>

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

@@ -7,7 +7,7 @@
     <div class="card">
       <div class="card-header wizard-header p-3">
         <el-steps :active="active" finish-status="success" align-center>
-          <el-step :title="translations.companies.title"></el-step>
+          <el-step :title="translations.company.title"></el-step>
           <el-step :title="translations.currencies.title"></el-step>
           <el-step :title="translations.taxes.title"></el-step>
           <el-step :title="translations.finish.title"></el-step>

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

@@ -4,7 +4,7 @@
     <div class="card">
       <div class="card-header wizard-header p-3">
         <el-steps :active="active" finish-status="success" align-center>
-          <el-step :title="translations.companies.title"></el-step>
+          <el-step :title="translations.company.title"></el-step>
           <el-step :title="translations.currencies.title"></el-step>
           <el-step :title="translations.taxes.title"></el-step>
           <el-step :title="translations.finish.title"></el-step>

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

@@ -4,7 +4,7 @@
     <div class="card">
       <div class="card-header wizard-header p-3">
         <el-steps :active="active" finish-status="success" align-center>
-          <el-step :title="translations.companies.title"></el-step>
+          <el-step :title="translations.company.title"></el-step>
           <el-step :title="translations.currencies.title"></el-step>
           <el-step :title="translations.taxes.title"></el-step>
           <el-step :title="translations.finish.title"></el-step>