@smarterplan/ngx-smarterplan-locations 0.2.43 → 0.2.44

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-smarterplan-locations'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-smarterplan-locations",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smarterplan/ngx-smarterplan-locations",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0",
@@ -9,31 +9,14 @@
     "@ngx-translate/core": "^14.0.0",
     "leaflet": "^1.8.0",
     "ngx-clipboard": "^15.1.0",
-    "@smarterplan/ngx-smarterplan-core": "^1.0.45",
+    "@smarterplan/ngx-smarterplan-core": "^1.0.48",
     "panzoom": "^9.4.2",
     "ng2-pdf-viewer": "^9.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/smarterplan-ngx-smarterplan-locations.mjs",
-  "es2020": "fesm2020/smarterplan-ngx-smarterplan-locations.mjs",
-  "esm2020": "esm2020/smarterplan-ngx-smarterplan-locations.mjs",
-  "fesm2020": "fesm2020/smarterplan-ngx-smarterplan-locations.mjs",
-  "fesm2015": "fesm2015/smarterplan-ngx-smarterplan-locations.mjs",
-  "typings": "smarterplan-ngx-smarterplan-locations.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./smarterplan-ngx-smarterplan-locations.d.ts",
-      "esm2020": "./esm2020/smarterplan-ngx-smarterplan-locations.mjs",
-      "es2020": "./fesm2020/smarterplan-ngx-smarterplan-locations.mjs",
-      "es2015": "./fesm2015/smarterplan-ngx-smarterplan-locations.mjs",
-      "node": "./fesm2015/smarterplan-ngx-smarterplan-locations.mjs",
-      "default": "./fesm2020/smarterplan-ngx-smarterplan-locations.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  "devDependencies": {
+    "@types/leaflet": "^1.7.9"
+  }
+}

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

@@ -0,0 +1,13 @@
+<ngb-carousel [interval]="5000" *ngIf="images && images.length > 1" (slide)="onSlide($event)">
+    <ng-template *ngFor="let image of images; let i = index" ngbSlide [id]="'slideId_' + i">
+        <div class="picsum-img-wrapper">
+            <img [src]="image.path" alt="Scan" class="d-block w-100">
+        </div>
+        <div class="carousel-caption">
+            <h3>{{image.title}}</h3>
+            <p>{{image.description}}</p>
+        </div>
+    </ng-template>
+</ngb-carousel>
+
+<img *ngIf="images.length === 1" [src]="images[0].path" alt="Scan" class="d-block w-100">

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

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

package/src/lib/components/carousel/carousel.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnInit {
+
+    @Input() images;
+
+    @Output() currentScan = new EventEmitter<number>();
+
+    dataEvent: string;
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.currentScan.emit(0);
+    }
+
+    onSlide(event) {
+        this.dataEvent = JSON.stringify(event);
+        const imageIndex = Number.parseInt(
+            event.current.replace("slideId_", ""),
+            10,
+        );
+        this.currentScan.emit(imageIndex);
+    }
+
+}

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

@@ -0,0 +1,5 @@
+<div style="height: 30px; width: 30px;">
+    <span class="icon-container" >
+      <div [class]="conditionShowing ? 'icon-img-up' : 'icon-img-down'"></div>
+    </span>
+</div>

package/src/lib/components/chevron/chevron.component.scss

@@ -0,0 +1,16 @@
+.icon-container {
+    height: 30px;
+    width: 30px;
+}
+
+.icon-img-down {
+    width: 30px;
+    height: 100%;
+    background: url('https://api.iconify.design/mdi-light/chevron-right.svg?width=28') no-repeat center center / contain;
+}
+
+.icon-img-up {
+    width: 30px;
+    height: 100%;
+    background: url('https://api.iconify.design/mdi-light/chevron-down.svg?width=28') no-repeat center center / contain;
+}

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

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

package/src/lib/components/chevron/chevron.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-chevron',
+  templateUrl: './chevron.component.html',
+  styleUrls: ['./chevron.component.scss']
+})
+export class ChevronComponent implements OnInit {
+
+  @Input() conditionShowing = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,108 @@
+<div class="container-fluid">
+    <div class="m-3">
+        <lib-tab-navigation [menuItems]='menuItems' (onGoBack)="reset()"></lib-tab-navigation>
+    </div>
+    <button class="btn btn-outline-primary rounded-pill me-3" (click)="onReturn()">{{'Back to locations' |
+        translate}}</button>
+    <div class="row" *ngIf="!isEditing && space">
+        <div class="col-md-5">
+            <ul class="list-group list-group-flush">
+                <li class="list-group-item bg-transparent">{{'Name' | translate}}: {{space.name}} </li>
+                <li class="list-group-item bg-transparent">{{'Address' | translate}}: {{space.addresses}} </li>
+                <li class="list-group-item bg-transparent">{{'Construction year' | translate}}:
+                    {{space.constructionYear ?
+                        space.constructionYear : "No data" | translate}} </li>
+                <li class="list-group-item bg-transparent">{{'Latitude' | translate}}:
+                    {{space.latitude ?
+                        space.latitude : "No data" | translate}}</li>
+                <li class="list-group-item bg-transparent">{{'Longitude' | translate}}: {{space.longitude ?
+                    space.longitude : "No data" | translate}} </li>
+                <li class="list-group-item bg-transparent">{{'Access level' | translate}}: {{space.level | translate
+                    }} </li>
+                <li class="list-group-item bg-transparent">{{'Energy Class' | translate}}:
+                    {{space.classEnergyConsumption ?
+                        space.classEnergyConsumption : "No data" | translate}}
+                    <button *ngIf="space.status !== 'DPE_TO_VALIDATE'"
+                        class="btn btn-outline-primary rounded-pill no-lowercase ms-5" (click)="onGetDpeData()">
+                        {{'Get data from API DPE' | translate}}</button>
+                    <a class="bg-transparent ms-5" *ngIf="space.status === 'DPE_TO_VALIDATE'"
+                        (click)="onDpeValidate()" style="cursor: pointer;">
+                        <span class="iconify" data-icon="mdi:alert-circle-check" style="color: #f19c80;" data-width="25"
+                            data-height="25"></span>
+                        {{'DPE data found. Click to validate' | translate}}
+                    </a>
+                </li>
+                <li class="list-group-item bg-transparent">{{'Greenhouse gas emission Class' | translate}}:
+                    {{space.classGes ? space.classGes : "No data" | translate}} </li>
+                <li class="list-group-item bg-transparent">{{'Shareable Guest Link' | translate}}:
+                    <div style="display: inline;" *ngIf="guestLink">
+                        <a id="linkHref" target="_blank">{{'Try the link' | translate }}</a>
+                        <div ngxClipboard [cbContent]="guestLink" [style.cursor]="'pointer'"
+                            style="margin-left: 5px; max-width: 20px; display: inline;" ngbTooltip="Copied!"
+                            triggers="click:blur">
+                            <span class="iconify" data-icon="mdi:content-copy" data-inline="false" data-width="20"
+                                data-height="20"></span>
+                        </div>
+                    </div>
+                    <p *ngIf="!guestLink" style="display: inline;">{{'No link' | translate }}</p>
+                    <p *ngIf="!guestLink"><small>({{'Generate link from a VISITOR mission'|translate}})</small>
+                    </p>
+                </li>
+
+            </ul>
+            <div class="d-flex justify-content-center" *ngIf="gettingData">
+                <div class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+            <hr>
+            <div class="d-flex">
+                <button class="btn btn-outline-primary rounded-pill me-3" (click)="onEdit()" data-testid="location-edit-btn">{{'Edit' |
+                    translate}}</button>
+                <div class="tooltip-wrapper" ngbTooltip="{{!canArchive ? ('Contact SmarterPlan' | translate) : ('Archive location and related data' | translate)}}">
+                    <button class="btn btn-outline-primary rounded-pill" (click)="onArchive()" [disabled]="!canArchive">
+                        {{'Archive' | translate}}</button>
+                </div>
+            </div>
+
+
+        </div>
+        <div class="col-md-7" *ngIf="isValidatingDpe">
+            <h6>{{'Most relevant results for' | translate}} : 
+                <b>diagnostics de performance énergétique (DPE) des bâtiments tertiaires</b></h6>
+            <table class="table table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">{{'Apply to location' | translate}}</th>
+                        <th scope="col">{{'Address' | translate}}</th>
+                        <th scope="col">{{'Activity sector' | translate}}</th>
+                        <th scope="col">{{'Construction year' | translate}}</th>
+                        <th scope="col">{{'Energy Class' | translate}}</th>
+                        <th scope="col">{{'Greenhouse gas emission Class' | translate}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let result of parsedMetadata; index as i">
+                        <th scope="row">{{ i + 1 }}</th>
+                        <td><input class="checkbox-apply" type="checkbox" [(ngModel)]="result.selected"
+                                (change)="onSelectChange(result)"></td>
+                        <td>{{result.geo_adresse}}</td>
+                        <td>{{result.secteur_activite}}</td>
+                        <td>{{ result.annee_construction }}</td>
+                        <td>{{ result.classe_consommation_energie }}</td>
+                        <td>{{ result.classe_estimation_ges }}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <button class="btn btn-outline-primary rounded-pill me-2" (click)="onSaveResult()"
+                [disabled]="!selectedDpeResult">{{'Save selected' |
+                translate}}</button>
+            <button class="btn btn-outline-primary rounded-pill me-2" (click)="onErase()">
+                {{'No match (erase data)' | translate}}</button>
+            <button class="btn btn-outline-primary rounded-pill me-2" (click)="onCancel()">
+                {{'Cancel' | translate}}</button>
+        </div>
+    </div>
+    <lib-form-location *ngIf="isEditing" [location]="space" (onChange)="onFormChange($event)"></lib-form-location>
+</div>

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

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

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

@@ -0,0 +1,215 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { MenuItem, SpaceService, BaseUserService, NavigatorService, SpaceStatus, Space } from '@smarterplan/ngx-smarterplan-core';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector: 'lib-detail-location',
+    templateUrl: './detail-location.component.html',
+    styleUrls: ['./detail-location.component.scss']
+})
+export class DetailLocationComponent implements OnInit {
+
+    space: Space;
+
+    editForm: FormGroup;
+
+    isEditing = false;
+
+    imageToUpload: File;
+
+    id: string;
+
+    menuItems: MenuItem[] = [];
+
+    isValidatingDpe = false;
+
+    selectedDpeResult: any;
+
+    gettingData = false;
+
+    parsedMetadata: {
+        geo_adresse: string;
+        secteur_activite: string;
+        annee_construction: string;
+        classe_consommation_energie: string;
+        classe_estimation_ges: string;
+        selected: boolean;
+    }[];
+
+    guestLink: string;
+
+    canArchive: boolean;
+
+    destroy$ = new Subject();
+
+    constructor(
+        private route: ActivatedRoute,
+        private spaceService: SpaceService,
+        private router: Router,
+        private userService: BaseUserService,
+        private translate: TranslateService,
+        private navigatorService: NavigatorService,
+    ) {
+        this.navigatorService.locationIDChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((spaceID) => {
+                this.router.navigate(["dashboard/localisation", spaceID]);
+            });
+
+        this.route.params.subscribe((params) => {
+            this.id = params.id;
+            this.setup();
+        });
+    }
+
+    ngOnInit() { }
+
+    async setup() {
+        this.space = await this.spaceService.getSpace(this.id);
+        this.setupMenuItems();
+        this.setGuestLink();
+        this.setCanArchive();
+    }
+
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+
+    setupMenuItems() {
+        this.menuItems = [
+            { label: "Locations", url: "/localisation" },
+            {
+                label: this.space.name,
+                url: `/localisation/${this.space.id}`,
+            },
+        ];
+
+        if (this.isEditing) {
+            this.menuItems.push({ label: "Edit" });
+        } else {
+            this.menuItems.push({ label: "Information" });
+        }
+    }
+
+    onEdit() {
+        this.isEditing = true;
+        this.setupMenuItems();
+    }
+
+    onReturn() {
+        // this.locationService.back()
+        this.router.navigate(["dashboard/localisation"]);
+    }
+
+    reset() {
+        this.isEditing = false;
+        this.setupMenuItems();
+    }
+
+    async onArchive() {
+        const message = this.translate.instant("confirm.archiveSpace");
+        if (window.confirm(message)) {
+            await this.spaceService.softDeleteSpace(this.id);
+            this.onReturn();
+        }
+    }
+
+    onFormChange(event: Space) {
+        this.isEditing = false;
+        if (event) {
+            this.space = event;
+        }
+        this.setupMenuItems();
+    }
+
+    onDpeValidate() {
+        this.isValidatingDpe = true;
+        this.parsedMetadata = JSON.parse(this.space.metadata);
+        this.parsedMetadata = this.parsedMetadata.filter(
+            (result) => result.geo_adresse,
+        );
+    }
+
+    onSelectChange(selectedResult: any) {
+        for (const result of this.parsedMetadata) {
+            if (result !== selectedResult && result.selected) {
+                result.selected = false;
+            }
+        }
+        this.selectedDpeResult = selectedResult;
+    }
+
+    async onSaveResult() {
+        if (this.selectedDpeResult) {
+            const input = {
+                id: this.space.id,
+                constructionYear: this.selectedDpeResult.annee_construction,
+                classEnergyConsumption:
+                    this.selectedDpeResult.classe_consommation_energie,
+                classGes: this.selectedDpeResult.classe_estimation_ges,
+                status: SpaceStatus.DPE_VALIDATED,
+            };
+            const updatedLoc = await this.spaceService.updateSpace(input);
+            this.space = updatedLoc;
+            this.isValidatingDpe = false;
+        }
+    }
+
+    onCancel() {
+        this.isValidatingDpe = false;
+    }
+
+    async onErase() {
+        await this.spaceService.updateSpace({
+            id: this.space.id,
+            status: SpaceStatus.DPE_VALIDATED,
+        });
+        this.space.status = SpaceStatus.DPE_VALIDATED;
+        this.isValidatingDpe = false;
+    }
+
+    async onGetDpeData() {
+        this.gettingData = true;
+        await this.spaceService.updateSpace({
+            id: this.space.id,
+            status: SpaceStatus.DPE_FETCH,
+        });
+
+        // force update of location
+        setTimeout(async () => {
+            this.space = await this.spaceService.getSpace(this.space.id);
+            this.gettingData = false;
+        }, 1500);
+    }
+
+    setGuestLink() {
+        if (this.space.guestLink) {
+            const { origin } = document.location;
+            this.guestLink = `${origin}/${this.space.guestLink}`;
+            setTimeout(() => {
+                const hyperlink = document.querySelector(
+                    "#linkHref",
+                ) as HTMLLinkElement;
+                const message = this.translate.instant("confirm.followLink");
+                hyperlink.addEventListener("click", async () => {
+                    if (window.confirm(message)) {
+                        window.location.href = this.guestLink;
+                        await this.userService.logoutCurrentAndSignOutAuth();
+                        this.router.navigate(["auth"]);
+                    }
+                });
+            }, 0);
+        }
+    }
+
+    async setCanArchive() {
+        this.canArchive = this.userService.isSPAdmin()
+            ? true
+            : await this.spaceService.canArchiveSpace(this.id);
+    }
+
+}