From c4dd34fa5e86cb74e5439a97c8a7bf3b9008bec8 Mon Sep 17 00:00:00 2001
From: sultanmyrza <sultanmyrza@gmail.com>
Date: Mon, 4 Apr 2022 21:20:43 +0800
Subject: [PATCH] feat: add icon to indicate capture with caption

---
 .../capture-item/capture-item.component.html  | 31 ++++++++++++-------
 .../capture-item/capture-item.component.scss  | 28 ++++++++++++-----
 .../capture-item/capture-item.component.ts    |  9 +++++-
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.html b/src/app/features/home/capture-tab/capture-item/capture-item.component.html
index adb4c2ea0..9bdf21344 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.html
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.html
@@ -6,17 +6,26 @@
   name="hourglass-outline"
   class="collecting"
 ></ion-icon>
-<ion-icon
-  *ngIf="hasUploaded$ | ngrxPush"
-  src="/assets/images/media-id.svg"
-  class="uploaded"
->
-</ion-icon>
-<ion-icon
-  *ngIf="hasGeolocation$ | ngrxPush"
-  src="/assets/images/location.svg"
-  class="located"
-></ion-icon>
+
+<div class="bottom-left-icons">
+  <ion-icon
+    *ngIf="hasUploaded$ | ngrxPush"
+    src="/assets/images/media-id.svg"
+    class="uploaded"
+  >
+  </ion-icon>
+  <ion-icon
+    *ngIf="hasGeolocation$ | ngrxPush"
+    src="/assets/images/location.svg"
+    class="located"
+  ></ion-icon>
+  <ion-icon
+    *ngIf="hasCaption$ | ngrxPush"
+    name="document-text-outline"
+    class="with-caption"
+  ></ion-icon>
+</div>
+
 <ion-icon
   *ngIf="isVideo$ | ngrxPush"
   name="videocam"
diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
index 491494734..c56f4ccb3 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss
@@ -34,16 +34,30 @@ ion-icon.collecting {
   font-size: 24px;
 }
 
-ion-icon.uploaded {
+.bottom-left-icons {
   bottom: 9px;
   left: 5px;
-  font-size: 13px;
-}
+  position: absolute;
+  display: flex;
 
-ion-icon.located {
-  bottom: 8px;
-  left: 23px;
-  font-size: 16px;
+  ion-icon.uploaded {
+    position: relative;
+    font-size: 13px;
+  }
+
+  ion-icon.located {
+    left: 4px;
+    bottom: 2px;
+    position: relative;
+    font-size: 16px;
+  }
+
+  ion-icon.with-caption {
+    left: 6px;
+    bottom: 1px;
+    position: relative;
+    font-size: 14px;
+  }
 }
 
 ion-icon.is-video {
diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
index 5b39f1692..9edf41e22 100644
--- a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
+++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts
@@ -13,6 +13,7 @@ import {
   switchMap,
 } from 'rxjs/operators';
 import { CaptureService } from '../../../../shared/capture/capture.service';
+import { DiaBackendAssetRepository } from '../../../../shared/dia-backend/asset/dia-backend-asset-repository.service';
 import { getOldProof } from '../../../../shared/repositories/proof/old-proof-adapter';
 import { Proof } from '../../../../shared/repositories/proof/proof';
 import { normalizeGeolocation } from '../../details/information/session/information-session.service';
@@ -70,6 +71,11 @@ export class CaptureItemComponent {
     )
   );
 
+  readonly hasCaption$ = this.proof$.pipe(
+    switchMap(proof => this.diaBackendAssetRepository.fetchByProof$(proof)),
+    map(asset => asset.caption !== '')
+  );
+
   readonly isVideo$ = this.proof$.pipe(
     concatMap(proof => proof.getFirstAssetMeta()),
     map(meta => meta.mimeType.startsWith('video'))
@@ -81,7 +87,8 @@ export class CaptureItemComponent {
     private readonly captureService: CaptureService,
     private readonly router: Router,
     private readonly route: ActivatedRoute,
-    private readonly sanitizer: DomSanitizer
+    private readonly sanitizer: DomSanitizer,
+    private readonly diaBackendAssetRepository: DiaBackendAssetRepository
   ) {}
 
   @HostListener('click')