build version 400

resources/assets/js/components/base/popup/CustomerSelectPopup.vue

@@ -1,98 +1,136 @@
 <template>
   <div class="customer-select">
-    <div class="main">
-      <div class="search-bar">
-        <base-input
+    <div class="flex flex-col w-full pb-4">
+      <div class="flex px-4 pt-4 pb-2">
+        <sw-input
           v-model="search"
           :placeholder="$t('general.search')"
           focus
           type="text"
           icon="search"
           @input="searchCustomer"
-        />
+        >
+          <template v-slot:leftIcon>
+            <search-icon class="h-5 m-2 text-gray-500" />
+          </template>
+        </sw-input>
       </div>
 
-      <div v-if="(customers.length > 0) && !loading" class="list">
+      <div
+        v-if="customers.length > 0 && !loading"
+        class="relative flex flex-col overflow-auto sw-scroll list"
+      >
         <div
           v-for="(customer, index) in customers"
           :key="index"
-          class="list-item"
+          class="flex px-6 py-2 border-b border-gray-200 border-solid cursor-pointer hover:cursor-pointer hover:bg-gray-100 last:border-b-0"
           @click="selectNewCustomer(customer.id)"
         >
-          <span class="avatar" >{{ initGenerator(customer.name) }}</span>
-          <div class="name">
-            <label class="title">{{ customer.name }}</label>
-            <label class="sub-title">{{ customer.contact_name }}</label>
+          <span
+            class="flex items-center content-center justify-center w-10 h-10 mr-4 text-xl font-semibold leading-9 text-white bg-gray-400 rounded-full avatar"
+            >{{ initGenerator(customer.name) }}</span
+          >
+          <div class="flex flex-col justify-center">
+            <label class="m-0 leading-tight cursor-pointer font-base">{{
+              customer.name
+            }}</label>
+            <label
+              class="m-0 text-sm font-medium text-gray-500 cursor-pointer font-base"
+              >{{ customer.contact_name }}</label
+            >
           </div>
         </div>
       </div>
-      <div v-if="loading" class="list flex justify-content-center align-items-center">
-        <font-awesome-icon icon="spinner" class="fa-spin"/>
+
+      <div v-if="loading" class="flex items-center justify-center list">
+        <refresh-icon class="animate-spin" />
       </div>
-      <div v-if="customers.length === 0" class="no-data-label">
-        <label> {{ $t('customers.no_customers_found') }} </label>
+
+      <div
+        v-if="customers.length === 0"
+        class="flex justify-center p-5 text-gray-400"
+      >
+        <label class="cursor-pointer">
+          {{ $t('customers.no_customers_found') }}
+        </label>
       </div>
     </div>
 
-    <button type="button" class="list-add-button" @click="openCustomerModal">
-      <font-awesome-icon class="icon" icon="user-plus" />
-      <label>{{ $t('customers.add_new_customer') }}</label>
+    <button
+      type="button"
+      class="flex items-center justify-center w-full px-2 py-3 bg-gray-200 border-none outline-none"
+      @click="openCustomerModal"
+    >
+      <user-add-icon class="text-primary-400" />
+
+      <label
+        class="m-0 ml-3 text-sm leading-none cursor-pointer font-base text-primary-400"
+        >{{ $t('customers.add_new_customer') }}</label
+      >
     </button>
   </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import { UserAddIcon, SearchIcon, RefreshIcon } from '@vue-hero-icons/solid'
 
 export default {
+  components: { UserAddIcon, SearchIcon, RefreshIcon },
+
   props: {
     type: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
+    userId: {
+      type: Number,
+      required: false,
+    },
   },
-  data () {
+
+  data() {
     return {
       search: null,
-      loading: false
+      loading: false,
     }
   },
+
   computed: {
-    ...mapGetters('customer', [
-      'customers'
-    ])
+    ...mapGetters('customer', ['customers']),
   },
-  created () {
+
+  created() {
     this.fetchInitialCustomers()
   },
+
   methods: {
-    ...mapActions('modal', [
-      'openModal'
-    ]),
-    ...mapActions('customer', [
-      'fetchCustomers'
-    ]),
+    ...mapActions('modal', ['openModal']),
+    ...mapActions('customer', ['fetchCustomers']),
     ...mapActions('invoice', {
-      setInvoiceCustomer: 'selectCustomer'
+      setInvoiceCustomer: 'selectCustomer',
     }),
     ...mapActions('estimate', {
-      setEstimateCustomer: 'selectCustomer'
+      setEstimateCustomer: 'selectCustomer',
     }),
-    async fetchInitialCustomers () {
+
+    async fetchInitialCustomers() {
       await this.fetchCustomers({
         filter: {},
         orderByField: '',
-        orderBy: ''
+        orderBy: '',
+        customer_id: this.userId,
       })
     },
-    async searchCustomer () {
+
+    async searchCustomer() {
       let data = {
         display_name: this.search,
         email: '',
         phone: '',
         orderByField: '',
         orderBy: '',
-        page: 1
+        page: 1,
       }
 
       this.loading = true
@@ -101,27 +139,38 @@ export default {
 
       this.loading = false
     },
-    openCustomerModal () {
+
+    openCustomerModal() {
       this.openModal({
         title: this.$t('customers.add_customer'),
         componentName: 'CustomerModal',
-        size: 'lg'
+        variant: 'lg',
       })
     },
-    initGenerator (name) {
+
+    initGenerator(name) {
       if (name) {
         let nameSplit = name.split(' ')
         let initials = nameSplit[0].charAt(0).toUpperCase()
         return initials
       }
     },
-    selectNewCustomer (id) {
+
+    selectNewCustomer(id) {
       if (this.type === 'estimate') {
         this.setEstimateCustomer(id)
       } else {
         this.setInvoiceCustomer(id)
       }
-    }
-  }
+    },
+  },
 }
 </script>
+<style lang="scss">
+.customer-select {
+  .list {
+    max-height: 173px;
+    min-height: 173px;
+  }
+}
+</style>