From bb74953d21aee821c0cc0dcd33330ab2debfe9a4 Mon Sep 17 00:00:00 2001
From: Nabhi Jain <98026895+coolnj4@users.noreply.github.com>
Date: Sat, 19 Oct 2024 22:01:23 +0530
Subject: [PATCH 1/2] [Fixed]: Scanning modal remains open and blank when
 camera access is denied (#329)

Introduced an alert pop-up for the case of camera access permission denied. Added hasCameraAccess to track camera permission status.

Implemented a method to request camera access and show an alert if access is denied. The barcode scanner now only loads when camera access is granted.
---
 src/components/Scanner.vue | 78 +++++++++++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/src/components/Scanner.vue b/src/components/Scanner.vue
index 8002eefe..27cb16df 100644
--- a/src/components/Scanner.vue
+++ b/src/components/Scanner.vue
@@ -1,44 +1,86 @@
 <template>
   <ion-toolbar>
-    <ion-buttons slot="end" @click="closeScanner()" >
-      <ion-button >
+    <ion-buttons slot="end" @click="closeScanner()">
+      <ion-button>
         <ion-icon :icon="closeOutline" />
       </ion-button>
-    </ion-buttons>  
-  </ion-toolbar>   
+    </ion-buttons>
+  </ion-toolbar>
+
   <div class="scanner">
+    <!-- Conditionally render the "Start Scanning" button based on camera access -->
+    <ion-button v-if="!hasCameraAccess" @click="openScanner">Start Scanning</ion-button>
+
+    <!-- Load the barcode scanner only if camera access is granted -->
     <StreamBarcodeReader
+      v-if="hasCameraAccess"
       @decode="onDecode"
       @loaded="onLoaded"
     />
-  </div> 
+  </div>
 </template>
 
 <script>
 import { StreamBarcodeReader } from "vue-barcode-reader";
-import { IonButton,IonButtons, IonIcon, IonToolbar, modalController } from '@ionic/vue';
+import { IonButton, IonButtons, IonIcon, IonToolbar, modalController, alertController } from '@ionic/vue';
 import { closeOutline } from 'ionicons/icons';
+
 export default {
   name: 'Scanner',
   components: {
     IonButton,
     IonButtons,
-    IonIcon, 
+    IonIcon,
     IonToolbar,
     StreamBarcodeReader,
-  },   
+  },
+  data() {
+    return {
+      hasCameraAccess: false, // Track if the camera access is granted
+    };
+  },
   methods: {
-    onDecode (result) {
-      modalController.dismiss({dismissed: true}, result);
+    // Request camera access when the user interacts
+    async requestCameraAccess() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        if (stream) {
+          this.hasCameraAccess = true; // Access granted, show scanner
+        }
+      } catch (error) {
+        console.error('Camera access denied:', error);
+        this.hasCameraAccess = false; // Access denied, show alert
+        this.showAlert('Camera permission is denied. Please enable the camera permission in your device settings to use the scanner.');
+      }
+    },
+    // Show an alert when camera access is denied
+    async showAlert(message) {
+      const alert = await alertController.create({
+        header: 'Camera Permission Denied',
+        message: message,
+        buttons: ['OK'],
+      });
+      await alert.present();
+    },
+    // Triggered by user clicking "Start Scanning" button
+    async openScanner() {
+      await this.requestCameraAccess(); // Ask for camera access
+      if (this.hasCameraAccess) {
+        // Button will automatically disappear and scanner will be displayed
+      }
+    },
+    onDecode(result) {
+      modalController.dismiss({ dismissed: true }, result);
+    },
+    closeScanner() {
+      modalController.dismiss({ dismissed: true });
     },
-    closeScanner(){
-      modalController.dismiss({dismissed: true});
-    }
   },
   setup() {
     return {
-      closeOutline
-    }
-  }
-}
-</script>
\ No newline at end of file
+      closeOutline,
+    };
+  },
+};
+</script>
+

From 2d197e5500b2f80dffb3b01c433d246b7874e9c3 Mon Sep 17 00:00:00 2001
From: Nabhi Jain <98026895+coolnj4@users.noreply.github.com>
Date: Mon, 21 Oct 2024 20:18:33 +0530
Subject: [PATCH 2/2] [Improved]: Refactored camera access handling and
 internationalized static text for product scanning modal (#329)

Moved the 'hasCameraAccess' check to the parent components (ShipmentDetails, ReturnDetails, and PurchaseOrderDetails), ensuring consistent handling of camera permissions across all views. Also, updated static text with the translate function to support internationalization, improving usability for global users.
---
 src/utils/index.ts                | 14 +++++++++++++-
 src/views/PurchaseOrderDetail.vue |  5 +++++
 src/views/ReturnDetails.vue       |  5 +++++
 src/views/ShipmentDetails.vue     |  5 +++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index b699b0ca..6510aab3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -52,4 +52,16 @@ const handleDateTimeInput = (dateTimeValue: any) => {
   return DateTime.fromISO(dateTime).toMillis()
 }
 
-export { handleDateTimeInput, showToast, hasError, copyToClipboard }
+const hasCameraAccess = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    if (stream) {
+      showToast(translate('Camera access granted.'));
+    }
+  } catch (error) {
+    console.error('Camera access denied:', error);
+    showToast(translate('Camera permission is denied. Please enable the camera permission in your device settings to use the scanner.'));
+  }
+}
+
+export { handleDateTimeInput, showToast, hasError, copyToClipboard, hasCameraAccess }
diff --git a/src/views/PurchaseOrderDetail.vue b/src/views/PurchaseOrderDetail.vue
index c55fc3cf..873c06ea 100644
--- a/src/views/PurchaseOrderDetail.vue
+++ b/src/views/PurchaseOrderDetail.vue
@@ -190,6 +190,7 @@ import LocationPopover from '@/components/LocationPopover.vue'
 import ImageModal from '@/components/ImageModal.vue';
 import { copyToClipboard, hasError, showToast } from '@/utils';
 import { Actions, hasPermission } from '@/authorization'
+import { hasCameraAccess } from '@/utils/';
 
 export default defineComponent({
   name: "PurchaseOrderDetails",
@@ -249,6 +250,10 @@ export default defineComponent({
       return imageModal.present();
     },
     async scan() {
+      if (!hasCameraAccess()) {
+        showToast(translate("Camera access is required to scan items."));
+        return;
+      }
       const modal = await modalController
       .create({
         component: Scanner,
diff --git a/src/views/ReturnDetails.vue b/src/views/ReturnDetails.vue
index 52508f0e..8c877568 100644
--- a/src/views/ReturnDetails.vue
+++ b/src/views/ReturnDetails.vue
@@ -117,6 +117,7 @@ import ImageModal from '@/components/ImageModal.vue';
 import { hasError } from '@/utils';
 import { showToast } from '@/utils'
 import { Actions, hasPermission } from '@/authorization'
+import { hasCameraAccess } from '@/utils';
 
 export default defineComponent({
   name: "ReturnDetails",
@@ -268,6 +269,10 @@ export default defineComponent({
       this.queryString = ''
     },
     async scanCode () {
+      if (!hasCameraAccess()) {
+        showToast(translate("Camera access is required to scan items."));
+        return;
+      }
       const modal = await modalController
         .create({
           component: Scanner,
diff --git a/src/views/ShipmentDetails.vue b/src/views/ShipmentDetails.vue
index 50ff3e44..f7fef24e 100644
--- a/src/views/ShipmentDetails.vue
+++ b/src/views/ShipmentDetails.vue
@@ -123,6 +123,7 @@ import LocationPopover from '@/components/LocationPopover.vue'
 import ImageModal from '@/components/ImageModal.vue';
 import { hasError, showToast } from '@/utils'
 import { Actions, hasPermission } from '@/authorization'
+import { hasCameraAccess } from '@/utils'
 
 export default defineComponent({
   name: "ShipmentDetails",
@@ -287,6 +288,10 @@ export default defineComponent({
       this.queryString = ''
     },
     async scanCode () {
+      if (!hasCameraAccess()) {
+        showToast(translate("Camera access is required to scan items."));
+        return;
+      }
       const modal = await modalController
         .create({
           component: Scanner,