feat(farmer-activity): Add Support for photo upload

apps/picsa-apps/extension-app-native/.env.local

@@ -1 +1 @@
-SERVER_URL=http://192.168.50.67:4200
+SERVER_URL=http://192.168.0.105:4200

apps/picsa-apps/extension-app-native/capacitor.config.ts

@@ -30,6 +30,7 @@ const config: CapacitorConfig = {
     '@capacitor-community/firebase-crashlytics',
     '@capacitor-firebase/performance',
     '@capacitor/screen-orientation',
+    '@capacitor/camera',
   ],
   // Enable app to use native http for requests (bypass cors)
   // https://capacitorjs.com/docs/apis/http

apps/picsa-tools/farmer-activity/src/app/components/components.module.ts

@@ -9,8 +9,9 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 // Local components
 import { FarmerActivityMaterialModule } from './material.module';
+import { PhotoInputComponent } from './photo-input/photo-input.component';
 
-const Components = [];
+const Components = [PhotoInputComponent];
 
 @NgModule({
   imports: [
@@ -23,7 +24,7 @@ const Components = [];
     RouterModule,
     FarmerActivityMaterialModule,
   ],
-  exports: [PicsaCommonComponentsModule, FarmerActivityMaterialModule, PicsaVideoPlayerModule, ...Components],
+  exports: [...Components, PicsaCommonComponentsModule, FarmerActivityMaterialModule, PicsaVideoPlayerModule],
   declarations: [Components],
   providers: [],
 })

apps/picsa-tools/farmer-activity/src/app/components/material.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 
-const COMPONENTS = [MatIconModule, MatTabsModule];
+const COMPONENTS = [MatIconModule, MatTabsModule, MatButtonModule];
 // use custom module to make it easier to control what is available through app
 @NgModule({
   imports: COMPONENTS,

apps/picsa-tools/farmer-activity/src/app/components/photo-input/photo-input.component.html

@@ -0,0 +1,34 @@
+<div>
+  <div>
+    <div class="header-section">
+      <h2>Uploaded Photos</h2>
+      <button mat-button mat-raised-button color="warn" (click)="removeAllPhotos()" *ngIf="photos.length > 1">
+        <mat-icon>delete_sweep</mat-icon>
+        <span>
+          {{ 'Delete All' | translate }}
+        </span>
+      </button>
+    </div>
+
+    <div class="uploads-section" *ngIf="photos.length; else noPhotos">
+      <div *ngFor="let photo of photos; let i = index" class="photo-container">
+        <img [src]="photo.webPath" />
+        <mat-icon class="close-icon" (click)="removePhoto(i)">close</mat-icon>
+      </div>
+    </div>
+
+    <ng-template #noPhotos>
+      <div class="no-photos-message">No photos uploaded yet</div>
+    </ng-template>
+  </div>
+
+  <div>
+    <button mat-button mat-raised-button class="footer-button" color="primary" (click)="takeOrChoosePicture()">
+      <span>
+        <mat-icon class="photo-icon">add_a_photo</mat-icon>
+        {{ 'Add Photo' | translate }}
+      </span>
+    </button>
+    <input type="file" (change)="processWebPicture($event)" *ngIf="isWebPlatform" hidden #fileInput />
+  </div>
+</div>

apps/picsa-tools/farmer-activity/src/app/components/photo-input/photo-input.component.scss

@@ -0,0 +1,47 @@
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.no-photos-message {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.photo-container {
+  position: relative;
+  display: inline-block;
+
+  .close-icon {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    color: white;
+    background-color: red;
+    border-radius: 50%;
+    padding: 2px;
+    margin: 5px;
+  }
+
+  &:hover {
+    .close-icon {
+      display: block;
+    }
+  }
+}
+
+img {
+  max-width: 120px;
+  max-height: 120px;
+  object-fit: cover;
+  margin: 10px;
+}
+
+.photo-icon {
+  position: relative;
+  top: 2px;
+  right: 5px;
+}

apps/picsa-tools/farmer-activity/src/app/components/photo-input/photo-input.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PhotoInputComponent } from './photo-input.component';
+
+describe('PhotoInputComponent', () => {
+  let component: PhotoInputComponent;
+  let fixture: ComponentFixture<PhotoInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PhotoInputComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PhotoInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/picsa-tools/farmer-activity/src/app/components/photo-input/photo-input.component.ts

@@ -0,0 +1,59 @@
+import { Platform } from '@angular/cdk/platform';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+
+// Temporary service to simulate the photo service that will handle the photo input and output.
+import { PhotoService } from '../../services/photo-input.service';
+
+interface Photo {
+  webPath?: string;
+}
+
+@Component({
+  selector: 'farmer-activity-photo-input',
+  templateUrl: './photo-input.component.html',
+  styleUrls: ['./photo-input.component.scss'],
+})
+export class PhotoInputComponent implements OnInit {
+  @ViewChild('fileInput') fileInput: ElementRef;
+  photos: Photo[] = [];
+  isWebPlatform: boolean;
+
+  constructor(private platform: Platform, private photoService: PhotoService) {}
+
+  ngOnInit() {
+    this.isWebPlatform = this.platform.isBrowser;
+  }
+
+  async takeOrChoosePicture() {
+    const source = this.isWebPlatform ? CameraSource.Photos : CameraSource.Prompt;
+    const image = await Camera.getPhoto({
+      quality: 90,
+      allowEditing: false,
+      resultType: CameraResultType.Uri,
+      source: source,
+    });
+
+    this.photos.push({
+      webPath: image.webPath,
+    });
+  }
+
+  processWebPicture(event: any) {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const photo = { webPath: e.target?.result as string };
+      this.photos.push(photo);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  removePhoto(index: number) {
+    this.photos.splice(index, 1);
+  }
+
+  removeAllPhotos() {
+    this.photos = [];
+  }
+}

apps/picsa-tools/farmer-activity/src/app/pages/activity-details/activity-details.component.html

@@ -34,7 +34,9 @@ <h2 *ngIf="videoUri">{{ videoResource.title | translate }}</h2>
         <mat-icon class="tab-icon">edit_square</mat-icon>
         {{ 'Activity' | translate }}
       </ng-template>
-      <div class="tab-content">Coming soon...</div>
+      <div class="tab-content">
+        <farmer-activity-photo-input />
+      </div>
     </mat-tab>
 
     <mat-tab *ngIf="activity.tool">
@@ -49,4 +51,5 @@ <h2 *ngIf="videoUri">{{ videoResource.title | translate }}</h2>
       </div>
     </mat-tab>
   </mat-tab-group>
+  <!--  -->
 </div>

apps/picsa-tools/farmer-activity/src/app/services/photo-input.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+
+/**
+ * This is a temporary service to simulate the photo service that will handle the photo input and output.
+ */
+export class PhotoService {
+  constructor() {
+    null;
+  }
+
+  // This method will save the photo to the database.
+  savePhoto(photo: any) {
+    return;
+  }
+
+  // This method will get the photos from the database.
+  getPhotos() {
+    return;
+  }
+}

apps/picsa-tools/resources-tool/src/assets/resources/contents.json

@@ -44,8 +44,8 @@
   "covers/facebook.svg": {
     "relativePath": "covers/facebook.svg",
     "size_kb": 1.1,
-    "md5Checksum": "a09b2f44f6b44b5b6e29aedba9f92029",
-    "modifiedTime": "2023-12-11T07:03:50.845Z"
+    "md5Checksum": "8626bc9119bd6b8bc0fa04e8a20b6e74",
+    "modifiedTime": "2022-09-28T20:19:52.986Z"
   },
   "covers/gap.jpg": {
     "relativePath": "covers/gap.jpg",
@@ -61,9 +61,9 @@
   },
   "covers/gender-equality.svg": {
     "relativePath": "covers/gender-equality.svg",
-    "size_kb": 5.4,
-    "md5Checksum": "95af38f37c2179d4ad0c5288cbb236ed",
-    "modifiedTime": "2023-12-11T07:03:50.846Z"
+    "size_kb": 5.5,
+    "md5Checksum": "0b6599c4d8b3a87b787910b18a9d8851",
+    "modifiedTime": "2022-11-01T20:27:18.286Z"
   },
   "covers/gras-nelk.jpg": {
     "relativePath": "covers/gras-nelk.jpg",
@@ -110,8 +110,8 @@
   "covers/spreadsheet.svg": {
     "relativePath": "covers/spreadsheet.svg",
     "size_kb": 2.8,
-    "md5Checksum": "0a1bc91188bbc03fda0a7cb2bc1aa6ce",
-    "modifiedTime": "2023-12-11T07:03:50.848Z"
+    "md5Checksum": "a03a4bfb0a1791fda8e232a8b032715b",
+    "modifiedTime": "2022-09-30T09:35:53.529Z"
   },
   "covers/twitter.png": {
     "relativePath": "covers/twitter.png",
@@ -121,15 +121,15 @@
   },
   "covers/videos.svg": {
     "relativePath": "covers/videos.svg",
-    "size_kb": 3.4,
-    "md5Checksum": "37516a0c19e20344d02960c6368dde62",
-    "modifiedTime": "2023-12-11T07:03:50.849Z"
+    "size_kb": 3.5,
+    "md5Checksum": "9bee23e2f74d07bd0cdd27bdc286e777",
+    "modifiedTime": "2023-09-25T18:01:08.322Z"
   },
   "covers/weather.svg": {
     "relativePath": "covers/weather.svg",
     "size_kb": 3.1,
-    "md5Checksum": "ca87f24916d258b8b8b5dd8343d4305b",
-    "modifiedTime": "2023-12-11T07:03:50.849Z"
+    "md5Checksum": "db07c7d20d9520124c251c810c5817fd",
+    "modifiedTime": "2022-09-28T19:22:58.064Z"
   },
   "covers/whatsapp.svg": {
     "relativePath": "covers/whatsapp.svg",

package.json

@@ -57,6 +57,7 @@
     "@capacitor-firebase/performance": "^5.1.0",
     "@capacitor/app": "^5.0.6",
     "@capacitor/browser": "^5.1.0",
+    "@capacitor/camera": "^6.0.1",
     "@capacitor/core": "5.5.1",
     "@capacitor/device": "^5.0.6",
     "@capacitor/filesystem": "^5.1.4",

yarn.lock

@@ -3324,6 +3324,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@capacitor/camera@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@capacitor/camera@npm:6.0.1"
+  peerDependencies:
+    "@capacitor/core": ^6.0.0
+  checksum: ae9f23b3e532369f2da48eb0c9aa551945a30ea9df8fa3549fd4bbab65d57ef3e9968b8524d4d8ea111bc35570f208e44a3bf9e64f45e90ecf6cbcbc4ebd5a9b
+  languageName: node
+  linkType: hard
+
 "@capacitor/cli@npm:5.5.1":
   version: 5.5.1
   resolution: "@capacitor/cli@npm:5.5.1"
@@ -19312,6 +19321,7 @@ __metadata:
     "@capacitor/android": 5.5.1
     "@capacitor/app": ^5.0.6
     "@capacitor/browser": ^5.1.0
+    "@capacitor/camera": ^6.0.1
     "@capacitor/cli": 5.5.1
     "@capacitor/core": 5.5.1
     "@capacitor/device": ^5.0.6