@smarterplan/ngx-smarterplan-locations 0.2.43 → 0.2.44

package/src/lib/components/form-location/form-location.component.html

@@ -0,0 +1,160 @@
+<div class="col-md-6 form-new-loc" *ngIf="form">
+  <form (ngSubmit)="onSubmit()" [formGroup]="form">
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Name' | translate}} *</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" data-testid="new-location-name" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['name'])||  isFormError(form.controls['name'])}"
+          required formControlName="name">
+
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-name-invalid" [dismissible]="false" type="danger" *ngIf="validatorsService.isControlError(form.controls['name']) 
+          ||  isFormError(form.controls['name'])">
+            {{validatorsService.getError(form.controls['name']) | translate}}
+          </ngb-alert>
+
+        </div>
+      </div>
+    </div>
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Address' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="addresses" data-testid="new-location-address" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['addresses']) ||  isFormError(form.controls['addresses'])}">
+        <div class="invalid-feedback">
+          <span data-testid="" [translate]="validatorsService.getError(form.controls['addresses'])"
+            *ngIf=" validatorsService.isControlError(form.controls['addresses'])"></span>
+
+          <ngb-alert data-testid="new-location-address-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['addresses']) ">
+
+            {{validatorsService.getError(form.controls['addresses']) | translate}}
+          </ngb-alert>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Construction year' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="constructionYear"
+          data-testid="new-location-constructionYear" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['constructionYear']) || isFormError(form.controls['constructionYear'])}">
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-constructionYear-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['constructionYear']) ||  isFormError(form.controls['constructionYear'])">
+            {{validatorsService.getError(form.controls['constructionYear']) | translate}}
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Latitude' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="latitude" data-testid="new-location-latitude" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['latitude'])||  isFormError(form.controls['latitude'])}">
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-latitude-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['latitude']) ||  isFormError(form.controls['latitude'])">
+            {{validatorsService.getError(form.controls['latitude']) | translate}}
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Longitude' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="longitude" data-testid="new-location-longitude" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['longitude'])||  isFormError(form.controls['longitude'])}">
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-longitude-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['longitude']) ||  isFormError(form.controls['longitude'])">
+            {{validatorsService.getError(form.controls['longitude']) | translate}}
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Access level' | translate}}</label>
+      <div class="col-sm-9">
+        <select class="d-inline-block custom-select rounded-pill" formControlName="level">
+          <option *ngFor="let level of levels" [value]="level">{{level | translate}}</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Energy Class' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="classEnergyConsumption"
+          data-testid="new-location-classEnergyConsumption" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])}">
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-classEnergyConsumption-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['classEnergyConsumption']) ||  isFormError(form.controls['classEnergyConsumption'])">
+            {{validatorsService.getError(form.controls['classEnergyConsumption']) | translate}}
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Greenhouse gas emission Class' | translate}}</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" formControlName="classGes" data-testid="new-location-classGes" (ngModelChange)="onFormChange()"
+          [ngClass]="{'is-invalid' : validatorsService.isControlError(form.controls['classGes'])||  isFormError(form.controls['classGes'])}">
+        <div class="invalid-feedback">
+          <ngb-alert data-testid="new-location-classGes-invalid" [dismissible]="false" type="danger"
+            *ngIf="validatorsService.isControlError(form.controls['classGes']) ||  isFormError(form.controls['classGes'])">
+            {{validatorsService.getError(form.controls['classGes']) | translate}}
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-3 row">
+      <label class="col-sm-3 col-form-label">{{'Cover picture' | translate}}</label>
+      <div class="col-sm-9">
+        <img #imageBasePreview *ngIf="currentImage" class="image-preview" [src]="currentImage">
+        <label #imageInputContainer for="image"
+          class="btn btn-label-file btn-outline-primary rounded-pill imageInputContainer">
+          <input #imageInput type="file" id="image" (change)="handleImageInput($event.target)" />
+          {{ imageInputText | translate}}</label>
+        <button *ngIf="currentImage && !imageToUpload" class="btn btn-outline-primary rounded-pill"
+          (click)="imageToBeDeleted=true;clearImageFile()">{{'Delete picture' | translate }}</button>
+        <div class="image-name" *ngIf="imageToUpload">
+          <p>{{ imageToUpload.name}}</p>
+          <div (click)="clearImageFile()" [style.cursor]="'pointer'">
+            <span class="iconify" data-icon="mdi:trash-can-outline"></span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="mb-3 row" *ngIf="!location">
+      <label class="col-sm-3 col-form-label">{{'Create mission for this space' | translate}}</label>
+      <div class="col-sm-3">
+        <input type="checkbox" [(ngModel)]="addMissionForNewSpace" [ngModelOptions]="{standalone: true}">
+      </div>
+    </div>
+
+    <button data-testid="new-location-submit-btn" [ngClass]="{'is-invalid' : errorForm }" type="submit"
+      class="btn btn-outline-primary rounded-pill me-3">{{'Save' | translate}}</button>
+
+    <button data-testid="new-location-close-btn" type="button" (click)="onCancel()"
+      class="btn btn-outline-primary rounded-pill">{{'Cancel' |
+      translate}}</button>
+
+    <div class="invalid-feedback" *ngIf="errorForm">
+      <ngb-alert data-testid="new-location-form-invalid" [dismissible]="false" type="danger">
+        {{'errorForm.infoBtn' |translate}}
+
+      </ngb-alert>
+    </div>
+  </form>
+</div>

package/src/lib/components/form-location/form-location.component.scss

@@ -0,0 +1,62 @@
+input[type="file"] {
+  display: none;
+}
+
+.custom-select {
+  border-color: var(--smarterplan-primary);
+  width: auto;
+}
+
+.form-new-loc {
+  background-color: lightgray;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.btn-outline-primary {
+  background-color: white;
+}
+
+h4 {
+  color: var(--smarterplan-primary);
+}
+.image-preview {
+  object-fit: cover;
+  max-height: 400px;
+  max-width: 400px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.imageInputContainer {
+  width: fit-content;
+  height: fit-content;
+}
+.image-name {
+  display: flex;
+}
+.col-form-label {
+  margin-bottom: 1rem;
+  width: 230px;
+}
+.form-new-loc {
+  background-color: lightgray;
+  margin-bottom: 15px;
+  padding: 10px;
+  width: 80%;
+  border-radius: 10px;
+}
+.col-sm-9 select {
+  width: 100%;
+  height: 31.25px;
+  padding-left: 10px;
+}
+.btn-outline-primary {
+  width: 200px;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
+.is-invalid ,.btn-outline-primary.is-invalid{
+  border-color: red!important;
+}

package/src/lib/components/form-location/form-location.component.spec.ts

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

package/src/lib/components/form-location/form-location.component.ts

@@ -0,0 +1,274 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
+import { Space, LevelStatus, SpaceService, PropertyService, BaseUserService, MissionService, enumToArray, uploadFileToS3, Layer, PropertyType, getSignedImageUrlForSpace, LayerService, deleteFromS3 } from '@smarterplan/ngx-smarterplan-core';
+import { ValidatorsService, textValidator, noEmptyValidator, floatValidator } from "@smarterplan/ngx-smarterplan-core";
+
+@Component({
+    selector: 'lib-form-location',
+    templateUrl: './form-location.component.html',
+    styleUrls: ['./form-location.component.scss']
+})
+export class FormLocationComponent implements OnInit {
+
+    form: FormGroup;
+
+    @ViewChild("imageInputContainer")
+    imageInputContainer: ElementRef;
+
+    @ViewChild("imageInput")
+    imageInput: ElementRef;
+
+    @ViewChild("imageBasePreview")
+    imageBasePreview: ElementRef;
+
+    @Input()
+    location: Space;
+
+    imageToUpload: any;
+
+    isSubmitted = false;
+
+    levels: Array<LevelStatus>;
+
+    addMissionForNewSpace = true;
+
+    imageInputText: string;
+
+    currentImage: string;
+
+    imageToBeDeleted: boolean = false;
+
+    errorForm: boolean = false;
+
+    @Output() onChange = new EventEmitter<Space | null>();
+
+    constructor(
+        private spaceService: SpaceService,
+        private propertyService: PropertyService,
+        private userService: BaseUserService,
+        private fb: FormBuilder,
+        private missionService: MissionService,
+        private layerService: LayerService,
+        public validatorsService: ValidatorsService
+    ) {
+        this.levels = enumToArray(LevelStatus);
+    }
+
+    ngOnInit(): void {
+        if (this.location) {
+            this.initEditForm();
+        } else {
+            this.initForm();
+        }
+        this.handleInputImageText();
+    }
+
+    initForm() {
+        this.form = this.fb.group({
+            name: ["", [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            addresses: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            latitude: [null, [Validators.maxLength(255), noEmptyValidator(), floatValidator()]],
+            longitude: [null, [Validators.maxLength(255), noEmptyValidator(), floatValidator()]],
+            level: LevelStatus.LOW,
+            classGes: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            classEnergyConsumption: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            constructionYear: ["", [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+        });
+    }
+
+    initEditForm() {
+        this.form = this.fb.group({
+            id: this.location.id,
+            name: [this.location.name, [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            addresses: [this.location.addresses, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            latitude: [this.location.latitude, [Validators.maxLength(255), floatValidator()]],
+            longitude: [this.location.longitude, [Validators.maxLength(255), floatValidator()]],
+            level: this.location.level,
+            classGes: [this.location.classGes, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            classEnergyConsumption: [this.location.classEnergyConsumption, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+            constructionYear: [this.location.constructionYear, [Validators.maxLength(255), textValidator(), noEmptyValidator()]],
+        });
+    }
+
+    handleImageInput(target: EventTarget) {
+        this.imageToUpload = (target as HTMLInputElement).files[0];
+        if (this.imageToUpload) {
+            this.imageInputContainer.nativeElement.style.display = "none";
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+                this.currentImage = reader.result as string;
+            });
+            reader.readAsDataURL(this.imageToUpload);
+        }
+    }
+
+    async uploadImage(spaceID: string) {
+        if (this.imageToUpload) {
+            uploadFileToS3("locations/", this.imageToUpload, spaceID).then(
+                async (url) => {
+                    if (url) {
+                        await this.spaceService.updateSpace({
+                            id: spaceID,
+                            annexes: url,
+                        });
+                    }
+                },
+            );
+        } else if (this.imageToBeDeleted) {
+            await this.spaceService.updateSpace({
+                id: spaceID,
+                annexes: null,
+            });
+            await deleteFromS3(this.location.annexes);
+        }
+    }
+
+    clearImageFile() {
+        this.imageToUpload = null;
+        this.currentImage = null;
+        this.imageInputContainer.nativeElement.style.display = "flex";
+        this.imageInput.nativeElement.value = "";
+        this.imageInputText = "Add picture";
+    }
+
+    async getLayerByName(name: string): Promise<Layer> {
+        const currentOrgId = this.userService.currentOrganisation().id;
+        const layers = await this.layerService.getLayerByNameForOrganisation(
+            name,
+            currentOrgId,
+        );
+        if (layers) {
+            return layers[0];
+        }
+        // create then
+        return this.layerService.createLayerForOrganisation(name, currentOrgId);
+    }
+
+    async onSubmit() {
+        this.isSubmitted = true;
+        if (!this.form.valid) {
+            this.errorForm = true;
+            return;
+        }
+        try { 
+            this.errorForm = false;
+            let space;
+            if (this.location) {
+                this.changeCommaToDot();
+                space = await this.spaceService.updateSpace(this.form.value);
+                if (space) {
+                    await this.uploadImage(space.id);
+                    this.location = space;
+                    this.onChange.emit(space);
+                }
+            } else {
+                this.changeCommaToDot();
+                const spaceInput = this.form.value as Space;
+                const currentOrgID = this.userService.currentOrganisation().id;
+                spaceInput.organisationID = currentOrgID;
+                let layer = await this.getLayerByName("BUILDING");
+                if (!layer) {
+                    layer = await this.layerService.createLayerForOrganisation(
+                        "BUILDING",
+                        currentOrgID,
+                    );
+                }
+                space = await this.spaceService.createSpace(
+                    spaceInput,
+                    layer,
+                );
+
+                const missions = this.userService.getManagerMissions();
+                if (space && missions.length > 0) {
+                    const exampleMission = missions[0];
+                    await this.uploadImage(space.id);
+                    try {
+                        await this.propertyService.createProperty({
+                            type: PropertyType.PROPERTY,
+                            spaceID: space.id,
+                            organisationID: currentOrgID,
+                        });
+                    } catch (e) {
+                        console.log("API Service does not have Property requests");
+                    }
+
+                    // add directly a mission for this space
+                    if (this.addMissionForNewSpace) {
+                        await this.missionService.create({
+                            spaceID: space.id,
+                            userID: exampleMission.userID,
+                            role: exampleMission.role,
+                            level: exampleMission.level,
+                            organisationID: exampleMission.organisationID,
+                            orderedOrganisationID:
+                                exampleMission.organisationID,
+                        });
+                    }
+                    this.onChange.emit(space);
+                } else {
+                    this.onChange.emit(null);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            this.onChange.emit(null);
+        }
+    }
+
+    onCancel() {
+        this.form.reset();
+        this.onChange.emit(null);
+    }
+
+    get name(): AbstractControl {
+        return this.form.get("name");
+    }
+
+    changeCommaToDot() {
+        const updatedSpace = this.form.value;
+        if (
+            updatedSpace.latitude &&
+            updatedSpace.latitude.toString().includes(",")
+        ) {
+            updatedSpace.latitude = updatedSpace.latitude
+                .toString()
+                .replace(",", ".");
+            Number.parseFloat(updatedSpace.latitude);
+        }
+        if (
+            updatedSpace.longitude &&
+            updatedSpace.longitude.toString().includes(",")
+        ) {
+            updatedSpace.longitude = updatedSpace.longitude
+                .toString()
+                .replace(",", ".");
+            Number.parseFloat(updatedSpace.longitude);
+        }
+    }
+
+    handleInputImageText() {
+        if (this.location && this.location.annexes) {
+            this.imageInputText = "Change picture";
+            getSignedImageUrlForSpace(this.location).then((url) => {
+                if (url) {
+                    this.currentImage = url;
+                }
+            });
+        } else {
+            this.imageInputText = "Add picture";
+        }
+    }
+
+    
+    isFormError(control) {
+        return control && control.invalid && this.errorForm;
+    }
+
+    
+    onFormChange(){
+        if (this.errorForm && this.form.valid) {
+            this.errorForm = false;
+        }
+
+    }
+}

package/src/lib/components/images/images.component.html

@@ -0,0 +1,27 @@
+<div class="container-fluid dashboard-tab col-sm-10 mb-3" *ngIf="currentSpace" >
+    <div class="m-3">
+      <lib-tab-navigation [menuItems]='menuItems' (onGoBack)="onGoBack()"></lib-tab-navigation>
+    </div>
+    <div class="d-flex justify-content-center" *ngIf="loading">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">{{'Loading' | translate}}...</span>
+      </div>
+    </div>
+    <div ngbDropdown class="d-inline-block" *ngIf="currentSpace.visits && currentSpace.visits.length > 0">
+      <button class="btn btn-label-file rounded-pill" id="dropdownBasic1" *ngIf="!currentVisit"
+        ngbDropdownToggle>{{'Choose 3D visit' | translate}}</button>
+      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+        <button ngbDropdownItem *ngFor="let visit of currentSpace.visits" (click)="setVisit(visit)"> {{ visit.name }}
+        </button>
+      </div>
+    </div>
+    <h3 *ngIf="currentVisit">{{ currentVisit.name }}</h3>
+    <div class="mt-3" *ngIf="currentVisit && currentImages.length == 0 && !loading">
+      <h4>{{'No imported images' | translate }}</h4>
+      <p>{{'For import: go Virtual Visits => Import Images' | translate}}</p>
+    </div>
+    <button *ngIf="currentVisit && currentImages.length > 0 && !loading"
+      class="btn btn-outline-primary rounded-pill no-lowercase mb-2" (click)="onInventoryClick()">
+      {{'Run AI inventory on this image' | translate}}</button>
+    <lib-carousel [images]="currentImages" *ngIf="currentImages" (currentScan)="setCurrentScan($event)"></lib-carousel>
+  </div>

package/src/lib/components/images/images.component.spec.ts

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