Implement adding, editing and displaying plants (#6)

* Displaying basic plant info

* Add plants service and plant delete button

* Add plants list element

* Change plants service directory name

* Implement adding new plants

* Add displaying image in PlantsListElement and deleting images

* Implement editing plants

* Change the way images are handled in db

* Fix adding image when adding plant

.firebaserc

@@ -2,4 +2,4 @@
   "projects": {
     "default": "watering-reminder"
   }
-}
+}

firebase.json

@@ -48,5 +48,8 @@
     "ui": {
       "enabled": true
     }
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
-}
+}

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
     "@angular/service-worker": "~13.3.0",
+    "ngx-image-cropper": "^6.1.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -38,4 +39,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}

src/app/app-routing.module.ts

@@ -9,6 +9,8 @@ import { map } from 'rxjs'
 import { UnverifiedComponent } from './pages/unverified/unverified.component'
 import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component'
 import { ActionComponent } from './pages/action/action.component'
+import { AddPlantComponent } from './pages/add-plant/add-plant.component'
+import { EditPlantComponent } from './pages/edit-plant/edit-plant.component'
 
 const loggedInVerifiedUser: AuthPipeGenerator = () => (
   map(user => {
@@ -36,6 +38,8 @@ const loggedOutUser: AuthPipeGenerator = () => (
 
 const routes: Routes = [
   { path: 'action', component: ActionComponent },
+  { path: 'add-plant', component: AddPlantComponent, ...canActivate(loggedInVerifiedUser) },
+  { path: 'edit-plant/:id', component: EditPlantComponent, ...canActivate(loggedInVerifiedUser) },
   { path: 'dashboard', component: DashboardComponent, ...canActivate(loggedInVerifiedUser) },
   { path: 'login', component: LoginComponent, ...canActivate(loggedOutUser) },
   { path: 'register', component: RegisterComponent, ...canActivate(loggedOutUser) },

src/app/app.module.ts

@@ -10,8 +10,6 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app'
 import { provideAuth, getAuth } from '@angular/fire/auth'
 import { provideFirestore, getFirestore } from '@angular/fire/firestore'
 import { provideMessaging, getMessaging } from '@angular/fire/messaging'
-import { USE_EMULATOR } from '@angular/fire/compat/auth'
-import { SETTINGS } from '@angular/fire/compat/firestore'
 import { LoginComponent } from './pages/login/login.component'
 import { RegisterComponent } from './pages/register/register.component'
 import { IndexComponent } from './pages/index/index.component'
@@ -21,6 +19,12 @@ import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password
 import { ActionComponent } from './pages/action/action.component'
 import { PasswordResetComponent } from './pages/action/modes/password-reset/password-reset.component'
 import { EmailVerificationComponent } from './pages/action/modes/email-verification/email-verification.component'
+import { PlantsListElementComponent } from './pages/dashboard/plants-list-element/plants-list-element.component'
+import { AddPlantComponent } from './pages/add-plant/add-plant.component'
+import { PlantFormComponent } from './plant-form/plant-form.component'
+import { ImageCropperModule } from 'ngx-image-cropper'
+import { getStorage, provideStorage } from '@angular/fire/storage';
+import { EditPlantComponent } from './pages/edit-plant/edit-plant.component'
 
 @NgModule({
   declarations: [
@@ -34,12 +38,17 @@ import { EmailVerificationComponent } from './pages/action/modes/email-verificat
     ActionComponent,
     PasswordResetComponent,
     EmailVerificationComponent,
+    PlantsListElementComponent,
+    AddPlantComponent,
+    PlantFormComponent,
+    EditPlantComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
+    ImageCropperModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,
       // Register the ServiceWorker as soon as the application is stable
@@ -49,7 +58,8 @@ import { EmailVerificationComponent } from './pages/action/modes/email-verificat
     provideFirebaseApp(() => initializeApp(environment.firebase)),
     provideAuth(() => getAuth()),
     provideFirestore(() => getFirestore()),
-    provideMessaging(() => getMessaging())
+    provideMessaging(() => getMessaging()),
+    provideStorage(() => getStorage()),
   ],
   bootstrap: [AppComponent]
 })

src/app/models/plant.model.ts

@@ -0,0 +1,10 @@
+export interface Plant {
+    id: string
+    name: string
+    description: string
+    timezone: string
+    waterTime: string
+    imageUrl: string
+}
+
+export type PlantWithoutImage = Omit<Plant, 'imageUrl'>

src/app/pages/action/action.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService } from 'src/app/services/auth.service'
+import { AuthService } from 'src/app/services/auth/auth.service'
 
 enum Mode {
   Loading,

src/app/pages/action/modes/email-verification/email-verification.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService } from 'src/app/services/auth.service'
+import { AuthService } from 'src/app/services/auth/auth.service'
 
 enum Status {
   Loading,

src/app/pages/action/modes/password-reset/password-reset.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { FormControl } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService } from 'src/app/services/auth.service'
+import { AuthService } from 'src/app/services/auth/auth.service'
 
 enum Status {
   WaitingForInput,

src/app/pages/add-plant/add-plant.component.html

@@ -0,0 +1,14 @@
+<app-plant-form [formGroup]="form" [(imageUrl)]="imageUrl" [(isCropping)]="isCropping"></app-plant-form>
+<br>
+<button [disabled]="!canAddPlant" (click)="addPlant()">Add plant</button>
+<button routerLink="/dashboard">Cancel</button>
+<br>
+<div [ngSwitch]="addPlantState">
+    <div *ngSwitchCase="AddPlantState.Loading">
+        Loading
+    </div>
+
+    <div *ngSwitchCase="AddPlantState.Error">
+        <p>Error adding plant</p>
+    </div>
+</div>

src/app/pages/add-plant/add-plant.component.spec.ts

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

src/app/pages/add-plant/add-plant.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core'
+import { FormControl, FormGroup, Validators } from '@angular/forms'
+import { Router } from '@angular/router'
+import { PlantsService } from 'src/app/services/plants/plants.service'
+
+enum AddPlantState {
+  WaitingForInput,
+  Loading,
+  Error,
+}
+
+@Component({
+  selector: 'app-add-plant',
+  templateUrl: './add-plant.component.html',
+  styleUrls: ['./add-plant.component.scss']
+})
+export class AddPlantComponent {
+  AddPlantState = AddPlantState
+
+  form = new FormGroup({
+    name: new FormControl('', Validators.required),
+    description: new FormControl(''),
+    timezone: new FormControl(Intl.DateTimeFormat().resolvedOptions().timeZone, Validators.required),
+    waterTime: new FormControl('', Validators.required),
+  })
+  imageUrl = ''
+  isCropping = false
+  addPlantState = AddPlantState.WaitingForInput
+
+  constructor(public plantsService: PlantsService, public router: Router) { }
+
+  async addPlant() {
+    if (this.canAddPlant) {
+      try {
+        this.addPlantState = AddPlantState.Loading
+        await this.plantsService.addPlant(this.form.value, this.imageUrl)
+        await this.router.navigate(['/dashboard'])
+      } catch (error) {
+        console.error(error)
+        this.addPlantState = AddPlantState.Error
+      }
+    }
+  }
+
+  get canAddPlant() {
+    return this.form.valid && !this.isCropping
+  }
+}

src/app/pages/dashboard/dashboard.component.html

@@ -1,3 +1,23 @@
 <p>dashboard works!</p>
 <button (click)="logout()">Logout</button>
-<button (click)="auth.logUser()">Log user</button>
+
+<div *ngIf="isLoading; then loadingBlock else loadedBlock"></div>
+
+<ng-template #loadingBlock>
+    <p>Loading</p>
+</ng-template>
+
+<ng-template #loadedBlock>
+    <div *ngIf="plantsService.plantsAreEmpty$ | async; then plantsEmptyBlock else plantsNotEmptyBlock"></div>
+
+    <ng-template #plantsEmptyBlock>
+        <p>You have no plants.</p>
+        <button routerLink="/add-plant">Add your first plant</button>
+    </ng-template>
+
+    <ng-template #plantsNotEmptyBlock>
+        <button routerLink="/add-plant">Add a plant</button>
+        <app-plants-list-element *ngFor="let plant of plantsService.plants$ | async" [plant]="plant">
+        </app-plants-list-element>
+    </ng-template>
+</ng-template>

src/app/pages/dashboard/dashboard.component.ts

@@ -1,19 +1,22 @@
 import { Component } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService } from 'src/app/services/auth.service'
+import { AuthService } from 'src/app/services/auth/auth.service'
+import { PlantsService } from 'src/app/services/plants/plants.service'
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
+  isLoading = true
 
-  constructor(public auth: AuthService, public router: Router) { }
+  constructor(public auth: AuthService, public router: Router, public plantsService: PlantsService) {
+    this.plantsService.plants$.subscribe(() => this.isLoading = false)
+  }
 
   async logout() {
     await this.auth.logout()
     await this.router.navigate(['/login'])
   }
-
 }

src/app/pages/dashboard/plants-list-element/plants-list-element.component.html

@@ -0,0 +1,8 @@
+<h3>{{ plant.name }}</h3>
+<p>{{ plant.description }} {{ plant.waterTime }}</p>
+<button (click)="deletePlant()">Delete</button>
+<p *ngIf="deleteState === DeleteState.Loading">Loading</p>
+<p *ngIf="deleteState === DeleteState.Error">Could not delete plant</p>
+<button [routerLink]="'/edit-plant/' + plant.id">Edit</button>
+<img [src]="plant.imageUrl ? plant.imageUrl : 'assets/images/default_plant_image.png'" alt="plant image">
+<hr>

src/app/pages/dashboard/plants-list-element/plants-list-element.component.spec.ts

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

src/app/pages/dashboard/plants-list-element/plants-list-element.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core'
+import { Plant } from 'src/app/models/plant.model'
+import { PlantsService } from 'src/app/services/plants/plants.service'
+
+enum DeleteState {
+  WaitingForInput,
+  Loading,
+  Error,
+}
+
+@Component({
+  selector: 'app-plants-list-element',
+  templateUrl: './plants-list-element.component.html',
+  styleUrls: ['./plants-list-element.component.scss']
+})
+export class PlantsListElementComponent {
+  @Input() plant!: Plant
+
+  DeleteState = DeleteState
+  deleteState = DeleteState.WaitingForInput
+
+  constructor(public plantsService: PlantsService) { }
+
+  async deletePlant() {
+    try {
+      this.deleteState = DeleteState.Loading
+      await this.plantsService.deletePlant(this.plant.id, !!this.plant.imageUrl)
+    }
+    catch (e) {
+      this.deleteState = DeleteState.Error
+      console.error(e)
+    }
+  }
+
+}