[Fixed]: Scanning modal remains open and blank when camera access is denied (#329)

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>
+      closeOutline,
+    };
+  },
+};
+</script>
+

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 }

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,

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,

src/views/ShipmentDetails.vue

@@ -121,8 +121,9 @@
 import Scanner from "@/components/Scanner.vue";
 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 @@
       this.queryString = ''
     },
     async scanCode () {
+      if (!hasCameraAccess()) {
+        showToast(translate("Camera access is required to scan items."));
+        return;
+      }
       const modal = await modalController
         .create({
           component: Scanner,