build version 400

resources/assets/js/views/invoices/ItemSelect.vue

@@ -1,13 +1,20 @@
 <template>
-  <div class="item-selector">
-    <div v-if="item.item_id" class="selected-item">
+  <div class="flex-1 text-sm">
+    <div
+      v-if="item.item_id"
+      class="relative flex items-center h-10 pl-2 bg-gray-100 border border-gray-200 border-solid rounded"
+    >
       {{ item.name }}
 
-      <span class="deselect-icon" @click="deselectItem">
-        <font-awesome-icon icon="times-circle" />
+      <span
+        class="absolute text-gray-400 cursor-pointer"
+        style="top: 8px; right: 10px"
+        @click="deselectItem"
+      >
+        <x-circle-icon class="h-5" />
       </span>
     </div>
-    <base-select
+    <sw-select
       v-else
       ref="baseSelect"
       v-model="itemSelect"
@@ -24,93 +31,107 @@
       @select="onSelect"
     >
       <div slot="afterList">
-        <button type="button" class="list-add-button" @click="openItemModal">
-          <font-awesome-icon class="icon" icon="cart-plus" />
-          <label>{{ $t('general.add_new_item') }}</label>
+        <button
+          type="button"
+          class="flex items-center justify-center w-full p-3 bg-gray-200 border-none outline-none"
+          @click="openItemModal"
+        >
+          <shopping-cart-icon
+            class="h-5 mr-2 -ml-2 text-center text-primary-400"
+          />
+          <label class="ml-2 text-sm leading-none text-primary-400">{{
+            $t('general.add_new_item')
+          }}</label>
         </button>
       </div>
-    </base-select>
-    <div class="item-description">
-      <base-text-area
+    </sw-select>
+    <div class="w-full pt-1 text-xs text-light">
+      <sw-textarea
         v-autoresize
         v-model="item.description"
         :invalid-description="invalidDescription"
         :placeholder="$t('invoices.item.type_item_description')"
         type="text"
-        rows="1"
-        class="description-input"
+        variant="inv-desc"
+        class="w-full text-xs text-gray-600 border-none resize-none"
         @input="$emit('onDesriptionInput')"
       />
       <div v-if="invalidDescription">
-        <span class="text-danger">{{ $tc('validation.description_maxlength') }}</span>
+        <span class="text-xs text-danger">
+          {{ $tc('validation.description_maxlength') }}
+        </span>
       </div>
-      <!-- <textarea type="text" v-autoresize rows="1" class="description-input" v-model="item.description" placeholder="Type Item Description (optional)" /> -->
     </div>
   </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import { XCircleIcon, ShoppingCartIcon } from '@vue-hero-icons/solid'
 
 export default {
+  components: {
+    XCircleIcon,
+    ShoppingCartIcon,
+  },
   props: {
     item: {
       type: Object,
-      required: true
+      required: true,
     },
     invalid: {
       type: Boolean,
       required: false,
-      default: false
+      default: false,
     },
     invalidDescription: {
       type: Boolean,
       required: false,
-      default: false
+      default: false,
     },
     taxPerItem: {
       type: String,
-      default: ''
+      default: '',
     },
     taxes: {
       type: Array,
-      default: null
-    }
+      default: null,
+    },
   },
-  data () {
+  data() {
     return {
       itemSelect: null,
-      loading: false
+      loading: false,
     }
   },
   computed: {
-    ...mapGetters('item', [
-      'items'
-    ])
+    ...mapGetters('item', ['items']),
   },
   watch: {
-    invalidDescription (newValue) {
+    invalidDescription(newValue) {
       console.log(newValue)
-    }
+    },
   },
   methods: {
-    ...mapActions('modal', [
-      'openModal'
-    ]),
-    ...mapActions('item', [
-      'fetchItems'
-    ]),
-    async searchItems (search) {
+    ...mapActions('modal', ['openModal']),
+
+    ...mapActions('item', ['fetchItems']),
+
+    async searchItems(search) {
       let data = {
         search,
         filter: {
           name: search,
           unit: '',
-          price: ''
+          price: '',
         },
         orderByField: '',
         orderBy: '',
-        page: 1
+        page: 1,
+      }
+
+      if (this.item) {
+        data.item_id = this.item.item_id
       }
 
       this.loading = true
@@ -119,27 +140,31 @@ export default {
 
       this.loading = false
     },
-    onTextChange (val) {
+
+    onTextChange(val) {
       this.searchItems(val)
 
       this.$emit('search', val)
     },
-    openItemModal () {
+
+    openItemModal() {
       this.$emit('onSelectItem')
       this.openModal({
-        'title': this.$t('items.add_item'),
-        'componentName': 'ItemModal',
-        'data': {taxPerItem: this.taxPerItem, taxes: this.taxes}
+        title: this.$t('items.add_item'),
+        componentName: 'ItemModal',
+        data: { taxPerItem: this.taxPerItem, taxes: this.taxes },
       })
     },
+
     onSelect(val) {
       this.$emit('select', val)
       this.fetchItems()
     },
-    deselectItem () {
+
+    deselectItem() {
       this.itemSelect = null
       this.$emit('deselect')
-    }
-  }
+    },
+  },
 }
 </script>