From bd58aca9785a688f3980ceef92ed92f9b9d3e435 Mon Sep 17 00:00:00 2001
From: ratree <ratree.ochn@gmail.com>
Date: Tue, 4 Jun 2024 12:44:31 +0700
Subject: [PATCH] #2016 CNN Validation - add error message when failed to call
 recording id

---
 .../cnn-job-detail-by-species.vue                | 16 ++++++++++++++++
 .../components/job-detections.vue                |  3 ++-
 .../cnn-job-detail/components/detection-item.vue |  7 +++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue b/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue
index 90a903af5..88ca0f111 100644
--- a/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue
+++ b/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue
@@ -29,6 +29,13 @@
         :selected-grouping="selectedGrouping"
         :max-page="maxPage"
         @emit-validation-result="onEmitValidateResult"
+        @show-alert-dialog="showAlertDialog"
+      />
+      <alert-dialog
+        v-if="showAlert"
+        severity="error"
+        title="Loading Error"
+        message="Couldn't retrieve the recording ID. Please try again."
       />
     </div>
   </section>
@@ -46,6 +53,7 @@ import { type GetDetectionsQueryParams } from '@rfcx-bio/common/api-bio/cnn/dete
 import type { GetDetectionsSummaryQueryParams } from '@rfcx-bio/common/api-bio/cnn/detections-summary'
 import { CLASSIFIER_JOB_STATUS } from '@rfcx-bio/common/api-core/classifier-job/classifier-job-status'
 
+import alertDialog from '@/_components/alert-dialog.vue'
 import { useGetBestDetections, useGetBestDetectionsSummary } from '@/detect/_composables/use-get-best-detections'
 import { apiClientKey } from '@/globals'
 import { useDetectionsResultFilterBySpeciesStore } from '~/store'
@@ -244,4 +252,12 @@ onBeforeUnmount(() => {
   detectionsResultFilterBySpeciesStore.resetFilter()
 })
 
+const showAlert = ref(false)
+const showAlertDialog = () => {
+  showAlert.value = true
+  setTimeout(() => {
+    showAlert.value = false
+  }, 7000)
+}
+
 </script>
diff --git a/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue b/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue
index b96175426..ffe002ba2 100644
--- a/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue
+++ b/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue
@@ -41,6 +41,7 @@
               :score="dt.score"
               :selected-grouping="selectedGrouping"
               @emit-detection="updateSelectedDetections"
+              @show-alert-dialog="$emit('showAlertDialog')"
             />
           </div>
         </div>
@@ -129,7 +130,7 @@ const props = withDefaults(defineProps<{ isLoading: boolean, isError: boolean, d
   data: undefined
 })
 
-const emit = defineEmits<{(e: 'update:page', value: number): void, (e: 'emitValidationResult'): void}>()
+const emit = defineEmits<{(e: 'update:page', value: number): void, (e: 'emitValidationResult'): void, (e: 'showAlertDialog'): void}>()
 
 const pageIndex = ref(props.page ?? 1)
 const index = useDebounce(pageIndex, 1000)
diff --git a/apps/website/src/detect/cnn-job-detail/components/detection-item.vue b/apps/website/src/detect/cnn-job-detail/components/detection-item.vue
index 542ba7ef2..5d5bbeb67 100644
--- a/apps/website/src/detect/cnn-job-detail/components/detection-item.vue
+++ b/apps/website/src/detect/cnn-job-detail/components/detection-item.vue
@@ -123,7 +123,7 @@ const props = withDefaults(defineProps<{
   selectedGrouping: undefined
 })
 
-const emit = defineEmits<{(e: 'emitDetection', detectionId: number, event: DetectionEvent): void}>()
+const emit = defineEmits<{(e: 'emitDetection', detectionId: number, event: DetectionEvent): void, (e: 'showAlertDialog'): void}>()
 const store = useStore()
 
 const spectrogramLoading = ref(false)
@@ -200,7 +200,10 @@ const stop = () => {
 const onVisualizerRedirect = async (): Promise<void> => {
   if (!props.start || !props.siteIdCore) return
   const response = await apiArbimonLegacyFindRecording(apiClientArbimon, store.project?.slug ?? '', { start: props.start, site_external_id: props.siteIdCore })
-  if (response == null) return
+  if (response == null) {
+    emit('showAlertDialog')
+    return
+  }
   window.location.assign(`${window.location.origin}/project/${store.project?.slug}/visualizer/rec/${response}`)
 }