Merge pull request #794 from akshayitzme/pos-barcode

feat: POS: add items by barcode scan and input
frappe · Jan 8, 2024 · b1c94c3 · b1c94c3
2 parents bcb602e + ecb46d7
commit b1c94c3
Showing 1 changed file with 30 additions and 16 deletions.
diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue
@@ -35,22 +35,34 @@
     >
       <div class="bg-white border col-span-5 rounded-md">
         <div class="rounded-md p-4 col-span-5">
-          <!-- Item Search -->
-          <Link
-            class="border-r flex-shrink-0 w-full"
-            :df="{
-              label: t`Search an Item`,
-              fieldtype: 'Link',
-              fieldname: 'item',
-              target: 'Item',
-            }"
-            :border="true"
-            :value="itemSearchTerm"
-            @keyup.enter="
-              async () => await addItem(await getItem(itemSearchTerm))
-            "
-            @change="(item: string) =>itemSearchTerm= item"
-          />
+          <div class="flex gap-x-2">
+            <!-- Item Search -->
+            <Link
+              class="flex-shrink-0 w-2/3"
+              :df="{
+                label: t`Search an Item`,
+                fieldtype: 'Link',
+                fieldname: 'item',
+                target: 'Item',
+              }"
+              :border="true"
+              :value="itemSearchTerm"
+              @keyup.enter="
+                async () => await addItem(await getItem(itemSearchTerm))
+              "
+              @change="(item: string) =>itemSearchTerm= item"
+            />
+
+            <Barcode
+              class="w-1/3"
+              @item-selected="
+                async (name: string) => {
+                  await addItem(await getItem(name));
+                }
+              "
+            />
+          </div>
+
           <ItemsTable @add-item="addItem" />
         </div>
       </div>
@@ -199,6 +211,7 @@ import {
   validateShipment,
   validateSinv,
 } from 'src/utils/pos';
+import Barcode from 'src/components/Controls/Barcode.vue';
 
 export default defineComponent({
   name: 'POS',
@@ -213,6 +226,7 @@ export default defineComponent({
     PageHeader,
     PaymentModal,
     SelectedItemTable,
+    Barcode,
   },
   provide() {
     return {