lexi

package.json

@@ -69,6 +69,7 @@
     "vue-tour": "^1.1.0",
     "vue-tree-halower": "^1.8.0",
     "vue-video-player": "^5.0.2",
+    "vue2-editor": "^2.10.3",
     "vue2-google-maps": "^0.10.6",
     "vue2-hammer": "^2.1.2",
     "vue2-tinymce-editor": "0.0.1",

src/views/billing/BillingList.vue

@@ -31,7 +31,7 @@
               @change="handleChangeFilterStatus"
             >
               <a-select-option :value="2">
-                Approve
+                Approved
               </a-select-option>
               <a-select-option :value="4">
                 Paid

src/views/billing/BillingPayment.vue

@@ -19,6 +19,7 @@
               class="select"
               show-search
               :filter-option="filterOption"
+              :loading="loading"
               @change="handleChangeClient"
               v-decorator="['from_client',{ rules: [{ required: true, message: 'This field is required.' }] }]"
             >
@@ -37,6 +38,7 @@
               placeholder="Select payment source"
               allowClear
               class="select"
+              :loading="loading"
               v-decorator="['source',{ initialValue:'Direct',rules: [{ required: true, message: 'This field is required.' }] }]"
               @change="handleChangeSource"
             >
@@ -45,7 +47,7 @@
               </a-select-option>
               <template v-if="typePayment === '1'">
                 <a-select-option v-for="source in sourceOptions" :value="source.id">
-                  {{ source.bank_account.account_name }} - {{ 'RM' + source.balance }}
+                  {{ source.bank_account.account_name }} - {{ sourceName(source) +  '(' + 'RM' + source.balance + ')' }}
                 </a-select-option>
               </template>
             </a-select>
@@ -72,10 +74,11 @@
             <a-select
               allowClear
               class="select w-full"
+              :loading="loading"
               v-decorator="['destination',{rules: [{ required: true, message: 'This field is required.' }] }]"
             >
               <a-select-option v-for="account in destinationOptions" :value="account.id">
-                {{ account.account_name }} {{ account.balance !== null ? '- RM' + account.balance :'' }}
+                {{ account.account_name }} {{ account.balance !== null ? '- RM' + account.balance : '' }}
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -172,10 +175,19 @@ export default {
       model             : null,
       sourceSelected    : null,
       total_amount      : undefined,
-      typePayment       : this.$route.query.type
+      typePayment       : this.$route.query.type,
+      loading           : false
     }
   },
   methods:{
+    sourceName(source) {
+      if(source.type === 3) return source.owner.title
+      if (source.type === 2) {
+        if (source.owner.person) return source.owner.person.first_name + ' ' + source.owner.person.last_name
+        return source.owner.company.name
+      }
+      return '--'
+    },
     checkTotalAmount(field, record) {
       if (this.form.getFieldValue(field) !== undefined)
         return this.form.getFieldValue(field) <= (record.total_amount - record.payed_amount)
@@ -220,21 +232,32 @@ export default {
       this.total_amount  = sum_amount - payed_amount
     },
     async getContacts(){
-      const { data } = await axios.post('/contact/query/',{limit:999})
-      this.contacts = data.rows
+      try {
+        this.loading = true
+        const { data } = await axios.post('/contact/query/',{limit:999})
+        this.contacts = data.rows
+      }catch (e) {
+        throw e
+      }finally {
+        this.loading = false
+      }
     },
     async getSources(id){
       try{
+        this.loading = true
         if (id) {
           const {data} = await axios.post(`/bank-account/get-client-balance/${id}/`)
           this.sourceOptions = data.rows
         }
       }catch (e) {
         throw new Error(e)
+      } finally {
+        this.loading = false
       }
     },
     async getBankAccounts(){
       try {
+        this.loading = true
         const { data } = await axios.post('/bank-account/query/',
           {
             limit:999,
@@ -243,10 +266,11 @@ export default {
         this.destinationOptions = data.rows
       }catch (e) {
         throw new Error(e)
+      } finally {
+        this.loading = false
       }
     },
     toObject(arr,bill) {
-      console.log(arr,bill,'arr,bill arr,bill')
       let rv = {};
       for (let i = 0; i < arr.length; ++i)
         if (arr[i] !== undefined && bill[i] !== '') rv[arr[i].id] = bill[i];
@@ -296,7 +320,7 @@ export default {
       if (findSource !== undefined) this.sourceSelected = findSource
     },
     hasAmountSmallerBalance(value) {
-      if (this.form.getFieldValue('source') !== 'Direct') {
+      if (value && this.form.getFieldValue('source') !== 'Direct') {
         return value <= this.sourceSelected.balance
       }
       return true

src/views/pages/user-settings/settings/Billing.vue

@@ -52,10 +52,7 @@
               class="avatar-firm-logo"
             />
           </a-form-item>
-<!--          <vue2-tinymce-editor v-model="description"></vue2-tinymce-editor>-->
-          <a-form-item label="Description" has-feedback class="w-full self-center">
-            <a-textarea v-decorator="['description',{ rules: [{ required: true, message: 'This field is required.' }] }]" />
-          </a-form-item>
+          <vue-editor v-model="description" :editorToolbar="customToolbar" class="w-full h-full"></vue-editor>
         </div>
       </a-form>
     </ASpin>
@@ -70,6 +67,7 @@
   import SelectOption from "../../../forms/SelectOptionSingle"
   import XUpload from "@/components/x-upload/XUpload";
   // import { Vue2TinymceEditor } from "vue2-tinymce-editor";
+  import { VueEditor } from "vue2-editor";
 
 
   export default {
@@ -78,6 +76,7 @@
   components:{
     SelectOption,
     XUpload,
+    VueEditor
   },
   data(){
     return{
@@ -95,6 +94,10 @@
         { img:'template.png',item: 1 },
         { img:'template2.png',item: 2 },
         { img:'template3.png',item: 3 }
+      ],
+      customToolbar: [
+        ["bold", "italic", "underline"],
+        [{ list: "ordered" }, { list: "bullet" }],
       ]
     }
   },
@@ -151,6 +154,7 @@
           if(data.setting.templates.avatar) this.$refs.avatar.imageUrl = data.setting.templates.avatar
           this.item_select = data.setting.templates.template
           this.isActive    = true
+          this.description = data.setting.templates.description
           this.formTemplates.setFieldsValue(data.setting.templates)
         }else{
           this.item_select =  1

src/views/template/Template.vue

@@ -10,7 +10,7 @@
           <div v-if="setting.templates && setting.templates.avatar" class="flex space-y-logo">
 <!--            <a-avatar shape="square" :src="setting.templates.avatar" :size="120" style="box-shadow: rgb(0 0 0 / 10%) 0 1px 0 0"/>-->
 <!--            <img :src="setting.templates.avatar" width="120" height="75" alt="avatar" class="object-contain"/>-->
-            <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 20rem;"/>
+            <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 10rem;"/>
           </div>
           <a-avatar v-else :size="120" icon="user" />
         </div>

src/views/template/Template2.vue

@@ -18,7 +18,7 @@
         <div v-if="setting.templates && setting.templates.avatar" class="flex space-y-logo">
 <!--          <a-avatar :src="setting.templates.avatar" :size="120" style="box-shadow: rgb(0 0 0 / 10%) 0 1px 0 0"/>-->
 <!--          <img :src="setting.templates.avatar" width="120" height="75" alt="avatar" class="object-cover"/>-->
-          <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 20rem;"/>
+          <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 10rem;"/>
         </div>
         <a-avatar v-else :size="120" icon="user" />
       </div>

src/views/template/Template3.vue

@@ -6,7 +6,7 @@
           <div v-if="setting.templates && setting.templates.avatar" class="flex space-y-logo">
 <!--            <a-avatar :src="setting.templates.avatar" :size="120" style="box-shadow: rgb(0 0 0 / 10%) 0 1px 0 0"/>-->
 <!--            <img :src="setting.templates.avatar" width="120" height="75" alt="avatar" class="object-cover"/>-->
-            <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 20rem;"/>
+            <img :src="setting.templates.avatar" alt="avatar" class="object-contain" style="width: 10rem;"/>
           </div>
           <a-avatar v-else :size="120" icon="user" />
         </div>

src/views/template/components/DescriptionTblBill.vue

@@ -94,8 +94,7 @@
     </a-table>
     <a-descriptions v-if="setting.templates !== undefined" :column="1" class="mt-5" layout="vertical">
       <a-descriptions-item v-if="setting.templates.description" label="Notes">
-        <span class="word-note">{{ setting.templates.description }}</span>
-<!--        class="word-break"-->
+        <span v-html="setting.templates.description" class="word-note"></span>
       </a-descriptions-item>
     </a-descriptions>
   </div>