@smarterplan/ngx-smarterplan-admin 0.1.27

package/fesm2020/smarterplan-ngx-smarterplan-admin.mjs

@@ -0,0 +1,1921 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, ViewChild, NgModule, Pipe } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from 'ngx-smarterplan-core';
+import { RoleStatus, ProfileEntity, removeNullKeysFromObject, stringLocaleToEnum, enumToArray, Locale, LevelStatus, EmailStatus, filterUniqueArrayByID, DomainType, sortAlphabeticallyOnName, validEmail, NgxSmarterplanCoreModule } from 'ngx-smarterplan-core';
+import * as i3 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, takeUntil } from 'rxjs';
+import * as CryptoJS from 'crypto-js';
+import * as i4$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i4$2 from 'ngx-clipboard';
+import { ClipboardModule } from 'ngx-clipboard';
+import { DateTime } from 'luxon';
+import { v4 } from 'uuid';
+import * as i2$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as Papa from 'papaparse';
+
+class NgxSmarterplanAdminService {
+    constructor() { }
+}
+NgxSmarterplanAdminService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgxSmarterplanAdminService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ChevronComponent {
+    constructor() {
+        this.conditionShowing = false;
+    }
+    ngOnInit() {
+    }
+}
+ChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChevronComponent, selector: "lib-chevron", inputs: { conditionShowing: "conditionShowing" }, ngImport: i0, template: "<div style=\"height: 30px; width: 30px;\">\r\n    <span class=\"icon-container\" >\r\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\r\n    </span>\r\n</div>\r\n", styles: [".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}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChevronComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chevron', template: "<div style=\"height: 30px; width: 30px;\">\r\n    <span class=\"icon-container\" >\r\n      <div [class]=\"conditionShowing ? 'icon-img-up' : 'icon-img-down'\"></div>\r\n    </span>\r\n</div>\r\n", styles: [".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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { conditionShowing: [{
+                type: Input
+            }] } });
+
+class OrganisationComponent {
+    constructor(orgService, fb, userService, missionService, translate, propertyService) {
+        this.orgService = orgService;
+        this.fb = fb;
+        this.userService = userService;
+        this.missionService = missionService;
+        this.translate = translate;
+        this.propertyService = propertyService;
+        this.admins = [];
+        this.clients = [];
+        this.details = -1;
+        this.query = "";
+        this.error = null;
+        this.create = false;
+        this.working = false;
+        this.isAddingAdmin = false;
+        this.loading = false;
+        this.editing = false;
+        // fullAccess true gives access to all orgs
+        // this is reserved to Smarterplan ADMINs
+        this.fullAccess = false;
+    }
+    async ngOnInit() {
+        this.resetList();
+    }
+    /**
+     * resetList fetches a fresh organisation list from server
+     */
+    async resetList() {
+        this.loading = true;
+        await this.missionService
+            .getMissionsByOrderedOrganisation("6e28201f-4679-4c29-9d2d-8a325f57cee9")
+            .then(async (missions) => {
+            if (missions) {
+                const client = {};
+                await Promise.all(missions.map(async (m) => {
+                    if (!client.hasOwnProperty(m.organisationID)) {
+                        client[m.organisationID] = {
+                            name: m.organisation.name,
+                            organisation: m.organisation,
+                            adminMissions: [],
+                            properties: [],
+                        };
+                    }
+                    if (m.role === RoleStatus.ADMIN && !m.deletedAt) {
+                        const alreadyAdmin = client[m.organisationID].adminMissions.filter((mis) => mis.user.id === m.userID);
+                        if (alreadyAdmin.length === 0) {
+                            client[m.organisationID].adminMissions.push({
+                                user: new ProfileEntity(m.user),
+                                mission: m,
+                            });
+                        }
+                    }
+                    // get properties
+                    const properties = await this.propertyService.getPropertiesForOrganisation(m.organisationID);
+                    client[m.organisationID].properties = properties
+                        .filter((property) => !property.deletedAt && property.space)
+                        .map((property) => property.space.name);
+                }));
+                this.clients = Object.values(client);
+            }
+            this.loading = false;
+        });
+    }
+    /**
+     * onToggleDetail folds/unfolds details for a given organisation
+     * @param i index of the organisation to be toggled
+     */
+    onToggleDetail(index) {
+        this.details = index === this.details ? -1 : index;
+    }
+    onAdd() {
+        this.create = true;
+        this.form = this.fb.group({
+            name: [null, [Validators.required]],
+            address: [""],
+            city: [""],
+            postal: [null],
+            siret: [null],
+        });
+    }
+    onEdit(org) {
+        this.create = false;
+        this.editing = true;
+        this.form = this.fb.group({
+            id: [org.id],
+            name: [org.name, [Validators.required]],
+            address: [org.address],
+            city: [org.city],
+            postal: [org.postal],
+            siret: [org.siret],
+        });
+    }
+    onCancel() {
+        // this.form = null;
+        this.form.reset();
+        this.create = false;
+        this.editing = false;
+    }
+    get name() {
+        return this.form.get("name");
+    }
+    get email() {
+        return this.form.get("user").get("email");
+    }
+    /**
+     * Handle creation or update of organisation
+     * @see 174
+     */
+    async onSubmitOrg() {
+        this.working = true;
+        const formValue = this.form.value;
+        removeNullKeysFromObject(formValue);
+        try {
+            if (this.create) {
+                const organisation = await this.orgService.createOrganisation(formValue);
+            }
+            else {
+                await this.orgService.updateOrganisation(formValue);
+            }
+        }
+        catch (error) {
+            this.error = true;
+            console.error(error);
+        }
+        await this.resetList();
+        this.working = false;
+        this.create = false;
+        this.editing = false;
+        this.form.reset();
+    }
+    onArchive(_) {
+        console.log("Unimplemented");
+    }
+    onDismiss() {
+        this.error = null;
+    }
+    async onDeleteOrg(org) {
+        const message = this.translate.instant("confirm.deleteOrganisation");
+        if (window.confirm(message) &&
+            org.id !== "6e28201f-4679-4c29-9d2d-8a325f57cee9") {
+            const propertiesToDelete = await this.propertyService.getPropertiesForOrganisation(org.id);
+            await this.orgService.deleteOrganisation(org.id);
+            (await this.missionService.getMissionsByOrganisation(org.id)).map((m) => this.missionService.softDeleteMission(m.id));
+            await Promise.all(propertiesToDelete.map(async (property) => {
+                await this.propertyService.deleteProperty(property.id);
+            }));
+        }
+    }
+}
+OrganisationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: OrganisationComponent, deps: [{ token: i1.OrganisationService }, { token: i2.FormBuilder }, { token: i1.BaseUserService }, { token: i1.MissionService }, { token: i3.TranslateService }, { token: i1.PropertyService }], target: i0.ɵɵFactoryTarget.Component });
+OrganisationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: OrganisationComponent, selector: "lib-organisation", ngImport: i0, template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n  <h3>{{'SmarterPlan Client Organisations' | translate}}</h3>\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8 col-lg-6\">\r\n\r\n      <div *ngIf=\"error\" class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\">\r\n        <strong>{{'Error' | translate}}!</strong> We haven't been able to fulfil your request.\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"alert\" (click)=\"onDismiss()\" aria-label=\"Close\">\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!create && !editing\">\r\n        <div class=\"d-flex justify-content-between align-items-center p-1\">\r\n          <input class=\"form-control search-button\" [(ngModel)]=\"query\" i18n-placeholder placeholder=\"Search\"\r\n            type=\"text\">&nbsp;\r\n        </div>\r\n        <!-- <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAdd()\">{{'Add new client organisation' |\r\n            translate}}</button> -->\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n          <lib-loader></lib-loader>\r\n        </div>\r\n        <ul class=\"list-group list-group-flush\">\r\n          <li class=\"list-group-item list-group-item-action\" *ngFor=\"let a of clients; index as index\"\r\n            (click)=\"onToggleDetail(index)\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              {{a.name}}\r\n              <lib-chevron [conditionShowing]=\"index==details\"></lib-chevron>\r\n              <!-- <ic-icon [icon]=\"index==details ? chevronDown : chevronRight\"></ic-icon> -->\r\n            </div>\r\n\r\n            <div *ngIf=\"index==details\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <!-- <li class=\"list-group-item bg-transparent\">{{'Activit\u00E9' | translate}}</li> -->\r\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{ a.organisation.address }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{ 'Postal Code' | translate}}: {{ a.organisation.postal }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'City' | translate}}: {{ a.organisation.city }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'SIRET' | translate}}: {{ a.organisation.siret ?\r\n                  a.organisation.siret : 'Not provided' | translate }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Created' | translate}}: {{ a.organisation.createdAt }}\r\n                </li>\r\n                <ng-container *ngIf=\"a.adminMissions.length > 0\">\r\n                  <li *ngIf=\"a.adminMissions.length <= 1\" class=\"list-group-item bg-transparent\">\r\n                    {{'Administrator User' | translate}} :</li>\r\n                  <li *ngIf=\"a.adminMissions.length > 1\" class=\"list-group-item bg-transparent\">\r\n                    {{'Administrator User(s)' | translate}} :</li>\r\n                  <li class=\"list-group-item list-group-item-action\"\r\n                    *ngFor=\"let admin of a.adminMissions; index as index\" (click)=\"onToggleDetail(index)\">\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"ml-4\"> {{admin.user.displayName}} ({{admin.user.email}})\r\n                        <!-- <button type=\"button\" class=\"btn btn-primary rounded-pill\" style=\"float: right;\"\r\n                            (click)=\"onRemoveAdmin(admin)\">\r\n                            {{'Remove'|translate}}</button> \r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\">{{'Phone'}}: {{admin.user.phone}}</li> -->\r\n                    </ul>\r\n\r\n                </ng-container>\r\n                <ng-container *ngIf=\"a.adminMissions.length == 0\">\r\n                  <li class=\"list-group-item bg-warning\"><span class=\"badge badge-warning\">\r\n                      {{'Warning' | translate}}</span> {{'No Administrator User'| translate}} </li>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"a.properties.length > 0\">\r\n                  <li class=\"list-group-item bg-transparent\">{{'Locations' | translate}}: </li>\r\n                  <li class=\"list-group-item list-group-item-action\" *ngFor=\"let property of a.properties\">\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"ml-4\">{{property}}</li>\r\n                    </ul>\r\n                  </li>\r\n                </ng-container>\r\n              </ul>\r\n              <div class=\"action-button-container\">\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onEdit(a.organisation)\">\r\n                  {{'Edit' | translate}}</button>\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onArchive(a.organisation)\" disabled>\r\n                  {{'Archive' | translate}}</button>\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onDeleteOrg(a.organisation)\">\r\n                  {{'Delete' | translate}}</button>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <div *ngIf=\"form && (create || editing)\">\r\n        <form (ngSubmit)=\"onSubmitOrg()\" [formGroup]=\"form\">\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                formControlName=\"name\">\r\n              <div class=\"invalid-feedback\">\r\n                {{'A name is required' | translate}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Postal code' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"working\">\r\n            <lib-loader></lib-loader>\r\n          </div>\r\n          <div class=\"action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n              [disabled]=\"working || form.invalid\">{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"working\"\r\n              class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <!--<spOrganisationForm [model]=\" editingOrganisation\" (submit)=\"onSave($event)\" (cancel)=\"onCancel()\">\r\n              </spOrganisationForm>-->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <div>{{'Administrator User' | translate}}</div>\r\n            <div formGroupName=\"user\" *ngIf=\"create || isAddingAdmin\">\r\n              <div *ngIf=\"form\" class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Email' | translate}} *</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"email.invalid && email.touched\" required\r\n                    formControlName=\"email\">\r\n                  <div class=\"invalid-feedback\">\r\n                    {{'An email is required' | translate}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'First name' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"firstName\">\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Last name' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"lastName\">\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Phone' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"phone\">\r\n                </div>\r\n              </div>\r\n            </div> -->", styles: [".form-group{margin:1.5rem 0}.search-button{width:-moz-fit-content;width:fit-content}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: OrganisationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-organisation', template: "<div class=\"container-fluid\" class=\"dashboard-tab\">\r\n  <h3>{{'SmarterPlan Client Organisations' | translate}}</h3>\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8 col-lg-6\">\r\n\r\n      <div *ngIf=\"error\" class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\">\r\n        <strong>{{'Error' | translate}}!</strong> We haven't been able to fulfil your request.\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"alert\" (click)=\"onDismiss()\" aria-label=\"Close\">\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!create && !editing\">\r\n        <div class=\"d-flex justify-content-between align-items-center p-1\">\r\n          <input class=\"form-control search-button\" [(ngModel)]=\"query\" i18n-placeholder placeholder=\"Search\"\r\n            type=\"text\">&nbsp;\r\n        </div>\r\n        <!-- <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onAdd()\">{{'Add new client organisation' |\r\n            translate}}</button> -->\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n          <lib-loader></lib-loader>\r\n        </div>\r\n        <ul class=\"list-group list-group-flush\">\r\n          <li class=\"list-group-item list-group-item-action\" *ngFor=\"let a of clients; index as index\"\r\n            (click)=\"onToggleDetail(index)\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              {{a.name}}\r\n              <lib-chevron [conditionShowing]=\"index==details\"></lib-chevron>\r\n              <!-- <ic-icon [icon]=\"index==details ? chevronDown : chevronRight\"></ic-icon> -->\r\n            </div>\r\n\r\n            <div *ngIf=\"index==details\">\r\n              <ul class=\"list-group list-group-flush\">\r\n                <!-- <li class=\"list-group-item bg-transparent\">{{'Activit\u00E9' | translate}}</li> -->\r\n                <li class=\"list-group-item bg-transparent\">{{'Address' | translate}}: {{ a.organisation.address }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{ 'Postal Code' | translate}}: {{ a.organisation.postal }}\r\n                </li>\r\n                <li class=\"list-group-item bg-transparent\">{{'City' | translate}}: {{ a.organisation.city }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'SIRET' | translate}}: {{ a.organisation.siret ?\r\n                  a.organisation.siret : 'Not provided' | translate }}</li>\r\n                <li class=\"list-group-item bg-transparent\">{{'Created' | translate}}: {{ a.organisation.createdAt }}\r\n                </li>\r\n                <ng-container *ngIf=\"a.adminMissions.length > 0\">\r\n                  <li *ngIf=\"a.adminMissions.length <= 1\" class=\"list-group-item bg-transparent\">\r\n                    {{'Administrator User' | translate}} :</li>\r\n                  <li *ngIf=\"a.adminMissions.length > 1\" class=\"list-group-item bg-transparent\">\r\n                    {{'Administrator User(s)' | translate}} :</li>\r\n                  <li class=\"list-group-item list-group-item-action\"\r\n                    *ngFor=\"let admin of a.adminMissions; index as index\" (click)=\"onToggleDetail(index)\">\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"ml-4\"> {{admin.user.displayName}} ({{admin.user.email}})\r\n                        <!-- <button type=\"button\" class=\"btn btn-primary rounded-pill\" style=\"float: right;\"\r\n                            (click)=\"onRemoveAdmin(admin)\">\r\n                            {{'Remove'|translate}}</button> \r\n                        </li>\r\n                        <li class=\"list-group-item bg-transparent\">{{'Phone'}}: {{admin.user.phone}}</li> -->\r\n                    </ul>\r\n\r\n                </ng-container>\r\n                <ng-container *ngIf=\"a.adminMissions.length == 0\">\r\n                  <li class=\"list-group-item bg-warning\"><span class=\"badge badge-warning\">\r\n                      {{'Warning' | translate}}</span> {{'No Administrator User'| translate}} </li>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"a.properties.length > 0\">\r\n                  <li class=\"list-group-item bg-transparent\">{{'Locations' | translate}}: </li>\r\n                  <li class=\"list-group-item list-group-item-action\" *ngFor=\"let property of a.properties\">\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"ml-4\">{{property}}</li>\r\n                    </ul>\r\n                  </li>\r\n                </ng-container>\r\n              </ul>\r\n              <div class=\"action-button-container\">\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onEdit(a.organisation)\">\r\n                  {{'Edit' | translate}}</button>\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onArchive(a.organisation)\" disabled>\r\n                  {{'Archive' | translate}}</button>\r\n                <button type=\"button\" class=\"btn btn-primary rounded-pill action-button\"\r\n                  (click)=\"onDeleteOrg(a.organisation)\">\r\n                  {{'Delete' | translate}}</button>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <div *ngIf=\"form && (create || editing)\">\r\n        <form (ngSubmit)=\"onSubmitOrg()\" [formGroup]=\"form\">\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                formControlName=\"name\">\r\n              <div class=\"invalid-feedback\">\r\n                {{'A name is required' | translate}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Postal code' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n              <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"working\">\r\n            <lib-loader></lib-loader>\r\n          </div>\r\n          <div class=\"action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n              [disabled]=\"working || form.invalid\">{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"working\"\r\n              class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <!--<spOrganisationForm [model]=\" editingOrganisation\" (submit)=\"onSave($event)\" (cancel)=\"onCancel()\">\r\n              </spOrganisationForm>-->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <div>{{'Administrator User' | translate}}</div>\r\n            <div formGroupName=\"user\" *ngIf=\"create || isAddingAdmin\">\r\n              <div *ngIf=\"form\" class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Email' | translate}} *</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"email.invalid && email.touched\" required\r\n                    formControlName=\"email\">\r\n                  <div class=\"invalid-feedback\">\r\n                    {{'An email is required' | translate}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'First name' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"firstName\">\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Last name' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"lastName\">\r\n                </div>\r\n              </div>\r\n  \r\n              <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Phone' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                  <input type=\"text\" class=\"form-control\" formControlName=\"phone\">\r\n                </div>\r\n              </div>\r\n            </div> -->", styles: [".form-group{margin:1.5rem 0}.search-button{width:-moz-fit-content;width:fit-content}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.OrganisationService }, { type: i2.FormBuilder }, { type: i1.BaseUserService }, { type: i1.MissionService }, { type: i3.TranslateService }, { type: i1.PropertyService }]; } });
+
+class GuestLinkComponent {
+    constructor(spaceService, activeModal) {
+        this.spaceService = spaceService;
+        this.activeModal = activeModal;
+    }
+    ngOnInit() {
+        this.setModel3D();
+    }
+    async setModel3D() {
+        this.model3D = await this.spaceService.getModel3DForSpace(this.spaceID);
+    }
+    async onGenerate() {
+        const inputElement = document.querySelector("#password");
+        const password = inputElement.value;
+        if (password.length < 8) {
+            this.errorMessage = "register.password.weak";
+            return;
+        }
+        this.errorMessage = null;
+        const encrypted = CryptoJS.AES.encrypt(JSON.stringify({
+            user: this.username,
+            password,
+        }), "EncryptedUser").toString();
+        const redirect = `redirect?spaceID=${this.spaceID}&model3D=${this.model3D}&user=${encrypted}`;
+        const { origin } = document.location;
+        this.link = `${origin}/${redirect}`;
+        setTimeout(() => {
+            const hyperlink = document.querySelector("#linkHref");
+            if (hyperlink) {
+                hyperlink.setAttribute("href", this.link);
+            }
+        }, 200); // wait until the element is rendered because of *ngIf
+        await this.spaceService.updateSpace({
+            id: this.spaceID,
+            guestLink: redirect,
+        });
+    }
+    onCancel() {
+        if (this.activeModal) {
+            this.activeModal.close();
+        }
+    }
+}
+GuestLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GuestLinkComponent, deps: [{ token: i1.SpaceService }, { token: i4$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+GuestLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: GuestLinkComponent, selector: "lib-guest-link", inputs: { spaceID: "spaceID", username: "username" }, ngImport: i0, template: "<div class=\"main\">\r\n    <p>{{'Current password for account:' | translate}} {{username}}</p>\r\n    <input type=\"password\" class=\"form-control\" id=\"password\">\r\n    <p *ngIf=\"errorMessage\">{{errorMessage}}</p>\r\n    <div class=\"row ml-0 mt-3\" *ngIf=\"link\">\r\n        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\r\n        <div ngxClipboard [cbContent]=\"link\" [style.cursor]=\"'pointer'\" style=\"margin-left: 5px; max-width: 20px;\"\r\n            ngbTooltip=\"Copied!\" triggers=\"click:blur\">\r\n            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                data-height=\"20\"></span>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"row ml-0 mt-3\">\r\n        <button class=\"btn btn-primary rounded-pill mr-2\" (click)=\"onGenerate()\">{{'Generate link' | translate\r\n            }}</button>\r\n        <button class=\"btn btn-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' | translate }}</button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".main{margin:1.5rem}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.ClipboardDirective, selector: "[ngxClipboard]", inputs: ["ngxClipboard", "container", "cbContent", "cbSuccessMsg"], outputs: ["cbOnSuccess", "cbOnError"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GuestLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-guest-link', template: "<div class=\"main\">\r\n    <p>{{'Current password for account:' | translate}} {{username}}</p>\r\n    <input type=\"password\" class=\"form-control\" id=\"password\">\r\n    <p *ngIf=\"errorMessage\">{{errorMessage}}</p>\r\n    <div class=\"row ml-0 mt-3\" *ngIf=\"link\">\r\n        <a id=\"linkHref\" target=\"_blank\">{{'Try the link' | translate }}</a>\r\n        <div ngxClipboard [cbContent]=\"link\" [style.cursor]=\"'pointer'\" style=\"margin-left: 5px; max-width: 20px;\"\r\n            ngbTooltip=\"Copied!\" triggers=\"click:blur\">\r\n            <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                data-height=\"20\"></span>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"row ml-0 mt-3\">\r\n        <button class=\"btn btn-primary rounded-pill mr-2\" (click)=\"onGenerate()\">{{'Generate link' | translate\r\n            }}</button>\r\n        <button class=\"btn btn-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' | translate }}</button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".main{margin:1.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SpaceService }, { type: i4$1.NgbActiveModal }]; }, propDecorators: { spaceID: [{
+                type: Input
+            }], username: [{
+                type: Input
+            }] } });
+
+class FormMissionComponent {
+    constructor(fb, spaceService, userService, domainService, organisationService, zoneService, hashtagService, localeService) {
+        this.fb = fb;
+        this.spaceService = spaceService;
+        this.userService = userService;
+        this.domainService = domainService;
+        this.organisationService = organisationService;
+        this.zoneService = zoneService;
+        this.hashtagService = hashtagService;
+        this.localeService = localeService;
+        this.addedMissionInput = new EventEmitter();
+        this.availableHashtags = [];
+        this.isGuide = false;
+        this.missionTimeStart = 12 * 60 * 60000; // midday in milliseconds
+        this.missionTimeEnd = 12 * 60 * 60000;
+        this.addedHashtags = [];
+    }
+    async ngOnInit() {
+        this.updateUserInfo();
+        await this.setDomains();
+        if (this.isSP) {
+            this.allOrgs = await this.organisationService.listOrganisations();
+        }
+        this.currentLocale = stringLocaleToEnum(this.localeService.getLocale()); // to match enum Locale
+        this.locales = enumToArray(Locale);
+        if (this.missionToEdit) {
+            this.initFormForEdit();
+        }
+        else {
+            this.initEmptyForm();
+        }
+    }
+    updateUserInfo() {
+        this.availableRoles =
+            this.userService.getAvailableRolesForCurrentUser();
+        this.availableLevels =
+            this.userService.getAvalableLevelsForCurrentUser();
+        this.isGuide = this.userService.isGuide();
+    }
+    async setDomains() {
+        if (!this.isGuide) {
+            const domains = await this.domainService.getDomainsForMissionsForOrg(this.currentUserOrganisation.id);
+            this.domains = domains;
+        }
+    }
+    async setHashtags(spaceID) {
+        this.availableHashtags = await this.hashtagService.getHashtagsForSpace(spaceID);
+    }
+    get spaceID() {
+        return this.missionForm.get("space");
+    }
+    get role() {
+        return this.missionForm.get("role");
+    }
+    async initFormForEdit() {
+        const m = this.missionToEdit;
+        this.userForMissionID = m.userID;
+        this.availableSpaces = await this.spaceService.getAllowedSpacesForOrg(this.missionToEdit.organisationID, this.currentUserOrganisation.id);
+        await this.setHashtags(m.spaceID);
+        this.missionForm = this.fb.group({
+            id: m.id,
+            organisation: [{ value: m.organisation.name, disabled: true }],
+            organisationID: m.organisationID,
+            orderedOrganisationID: m.orderedOrganisationID,
+            role: [m.role],
+            level: [m.level],
+            space: [m.spaceID],
+            description: [m.description],
+            domains: [m.domains],
+            zone: [m.zoneID],
+            locale: [m.locale],
+        });
+        if (m.hashtags && m.hashtags.length > 0) {
+            this.addedHashtags = this.availableHashtags.filter((hashtag) => m.hashtags.includes(hashtag.id));
+        }
+        if (m.startDateTime) {
+            const date = DateTime.fromISO(m.startDateTime);
+            this.missionTimeStart = (date.hour * 60 + date.minute) * 60 * 1000;
+            this.startDate = date.toMillis() - this.missionTimeStart;
+        }
+        if (m.endDateTime) {
+            const date = DateTime.fromISO(m.endDateTime);
+            this.missionTimeEnd = (date.hour * 60 + date.minute) * 60 * 1000;
+            this.endDate = date.toMillis() - this.missionTimeEnd;
+        }
+        this.onSpaceClick();
+    }
+    async onSpaceClick() {
+        const zones = await this.zoneService.getZonesBySpace(this.spaceID.value);
+        this.defaultZone = zones.find((zone) => !zone.parentID);
+        const indexOfDefaultZone = zones.indexOf(this.defaultZone);
+        zones.splice(indexOfDefaultZone, 1);
+        this.zonesForSpace = zones;
+        await this.setHashtags(this.spaceID.value);
+    }
+    async initEmptyForm() {
+        this.availableSpaces = await this.spaceService.getAllowedSpacesForOrg(this.organisationForMission.id, this.currentUserOrganisation.id);
+        this.missionForm = this.fb.group({
+            role: [null, Validators.required],
+            level: [LevelStatus.MINIMUM],
+            organisation: [
+                { value: this.organisationForMission.name, disabled: true },
+            ],
+            organisationID: this.organisationForMission.id,
+            orderedOrganisationID: this.currentUserOrganisation.id,
+            space: [null, Validators.required],
+            zone: [null],
+            description: [""],
+            domains: [null],
+            locale: [this.currentLocale],
+        });
+    }
+    onHashtagClick(hashtag) {
+        if (!this.hashtagAdded(hashtag)) {
+            this.addedHashtags.push(hashtag);
+        }
+        else {
+            this.addedHashtags.splice(this.addedHashtags.indexOf(hashtag), 1);
+        }
+    }
+    hashtagAdded(hashtag) {
+        return (this.addedHashtags.find((_hashtag) => _hashtag.id === hashtag.id) !== undefined);
+    }
+    removeHashtag(hashtag) {
+        this.addedHashtags.splice(this.addedHashtags.indexOf(hashtag), 1);
+    }
+    onSubmit() {
+        const formValue = this.missionForm.value;
+        if (!this.missionForm.valid) {
+            // this shows errors in the form
+            this.missionForm.markAllAsTouched();
+            return;
+        }
+        let startDateString;
+        let endDateString;
+        if (this.startDate) {
+            const dateHourStartNumber = this.startDate + this.missionTimeStart;
+            const startDate = DateTime.fromMillis(dateHourStartNumber);
+            startDateString = startDate.toISO();
+        }
+        if (this.endDate) {
+            const dateHourEndNumber = this.endDate + this.missionTimeEnd;
+            const endDate = DateTime.fromMillis(dateHourEndNumber);
+            endDateString = endDate.toISO();
+        }
+        const missionInput = {
+            organisationID: formValue.organisationID,
+            orderedOrganisationID: formValue.orderedOrganisationID,
+            level: formValue.level,
+            role: formValue.role,
+            description: formValue.description,
+            startDateTime: startDateString,
+            endDateTime: endDateString,
+            domains: formValue.domains,
+            userID: this.userForMissionID,
+            emailStatus: this.missionToEdit
+                ? this.missionToEdit.emailStatus
+                : EmailStatus.CREATION_TO_DELIVER,
+            locale: formValue.locale,
+        };
+        missionInput.hashtags = this.addedHashtags.map((h) => h.id);
+        if (formValue.space) {
+            missionInput.spaceID = formValue.space;
+        }
+        if (formValue.zone) {
+            missionInput.zoneID = formValue.zone;
+        }
+        if (this.missionToEdit) {
+            missionInput.id = this.missionToEdit.id;
+        }
+        this.addedMissionInput.emit(missionInput);
+    }
+    onCancel() {
+        this.addedMissionInput.emit(null);
+    }
+}
+FormMissionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormMissionComponent, deps: [{ token: i2.FormBuilder }, { token: i1.SpaceService }, { token: i1.BaseUserService }, { token: i1.DomainService }, { token: i1.OrganisationService }, { token: i1.ZoneService }, { token: i1.HashtagService }, { token: i1.LocaleService }], target: i0.ɵɵFactoryTarget.Component });
+FormMissionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormMissionComponent, selector: "lib-form-mission", inputs: { missionToEdit: "missionToEdit", organisationForMission: "organisationForMission", isSP: "isSP", userForMissionID: "userForMissionID", currentUserOrganisation: "currentUserOrganisation" }, outputs: { addedMissionInput: "addedMissionInput" }, ngImport: i0, template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"></textarea>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" [class.is-invalid]=\"role.invalid && role.touched\">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Role is required' | translate}}.\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\" \r\n                [class.is-invalid]=\"spaceID.invalid && spaceID.touched\">\r\n                    <option *ngFor=\"let space of availableSpaces\" [ngValue]=\"space.id\">\r\n                        {{ space.name }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Location is required' | translate}}.\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                {{ 'No locations available' | translate}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                <div class=\"input-group-append\">\r\n                    <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\" type=\"button\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"endDate\" ngbDatepicker\r\n                    #d2=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                <div class=\"input-group-append\">\r\n                    <button class=\"btn btn-outline-secondary calendar\" (click)=\"d2.toggle()\" type=\"button\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                >{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormMissionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-mission', template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"></textarea>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" [class.is-invalid]=\"role.invalid && role.touched\">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Role is required' | translate}}.\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\" \r\n                [class.is-invalid]=\"spaceID.invalid && spaceID.touched\">\r\n                    <option *ngFor=\"let space of availableSpaces\" [ngValue]=\"space.id\">\r\n                        {{ space.name }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Location is required' | translate}}.\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                {{ 'No locations available' | translate}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                <div class=\"input-group-append\">\r\n                    <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\" type=\"button\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"endDate\" ngbDatepicker\r\n                    #d2=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                <div class=\"input-group-append\">\r\n                    <button class=\"btn btn-outline-secondary calendar\" (click)=\"d2.toggle()\" type=\"button\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                >{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: i1.SpaceService }, { type: i1.BaseUserService }, { type: i1.DomainService }, { type: i1.OrganisationService }, { type: i1.ZoneService }, { type: i1.HashtagService }, { type: i1.LocaleService }]; }, propDecorators: { missionToEdit: [{
+                type: Input
+            }], organisationForMission: [{
+                type: Input
+            }], isSP: [{
+                type: Input
+            }], userForMissionID: [{
+                type: Input
+            }], currentUserOrganisation: [{
+                type: Input
+            }], addedMissionInput: [{
+                type: Output
+            }] } });
+
+class UserMissionFormComponent {
+    constructor(fb, userService, translate) {
+        this.fb = fb;
+        this.userService = userService;
+        this.translate = translate;
+        this.createForExistingUser = false;
+        this.added = new EventEmitter();
+        this.working = false;
+    }
+    ngOnInit() {
+        this.onAddNewUserMissionToOrg();
+    }
+    async onAddNewUserMissionToOrg() {
+        this.form = this.fb.group({
+            email: [null, [Validators.required]],
+            lastName: [""],
+            firstName: [""],
+        });
+    }
+    onCancel() {
+        this.added.emit(false);
+    }
+    get email() {
+        return this.form.get("email");
+    }
+    async onSubmit() {
+        this.working = true;
+        let p;
+        try {
+            const formValue = this.form.value;
+            p = await this.userService.profileForMail(formValue.email);
+            if (p) {
+                alert("User with this email exists already!");
+                this.working = false;
+                return;
+            }
+            try {
+                const profile = await this.userService.createUserAWSandProfile(formValue, true);
+                console.log("User created!", profile.metadata);
+                this.createdUser = profile;
+            }
+            catch (error) {
+                this.working = false;
+                alert(this.translate.instant(JSON.stringify(error)));
+                return;
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+        this.working = false;
+    }
+    // async updateAllMissionsFromTemplate(missionInput: UpdateMissionInput) {
+    //     // all missions of this organisation
+    //     const missionsFromTemplate =
+    //         await this.missionService.getMissionsByTemplate(
+    //             this.missionToEdit.id,
+    //         );
+    //     await Promise.all(
+    //         missionsFromTemplate.map(async (mission) => {
+    //             const missionTemplate = { ...missionInput };
+    //             if (this.sendUpdate) {
+    //                 missionTemplate.emailStatus = EmailStatus.UPDATE_TO_DELIVER;
+    //             }
+    //             missionTemplate.id = mission.id;
+    //             await this.missionService.update(missionTemplate);
+    //         }),
+    //     );
+    // }
+    async onMissionInput(mission) {
+        if (mission) {
+            this.missionInput = mission;
+            await this.userService.createOrUpdateMissionForOrgWithProperty(this.missionInput, this.missionInput.organisationID);
+            this.added.emit(true);
+        }
+        else {
+            this.added.emit(false);
+        }
+    }
+}
+UserMissionFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: UserMissionFormComponent, deps: [{ token: i2.FormBuilder }, { token: i1.BaseUserService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+UserMissionFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: UserMissionFormComponent, selector: "lib-user-mission-form", inputs: { addToOrganisation: "addToOrganisation", isSP: "isSP", createForExistingUser: "createForExistingUser", currentOrg: "currentOrg" }, outputs: { added: "added" }, ngImport: i0, template: "<div *ngIf=\"form\">\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div id=\"personalInfo\">\r\n            <div style=\"margin-top: 1rem;\">\r\n                <h4>{{ 'User Personal Information' | translate }}</h4>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Email' | translate}} *</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"email.invalid && email.touched\" required\r\n                        formControlName=\"email\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'An email is required' | translate}}.\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Last name' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"lastName\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'First name' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"firstName\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n            <lib-loader></lib-loader>\r\n        </div>\r\n\r\n        <div *ngIf=\"createdUser; else waitingForUser\">\r\n            <div class=\"alert alert-info\">\r\n                {{'User successfully created' | translate}}\r\n            </div>\r\n            <lib-form-mission [organisationForMission]=\"addToOrganisation\" [userForMissionID]=\"createdUser.id\"\r\n                [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\" (addedMissionInput)=\"onMissionInput($event)\">\r\n            </lib-form-mission>\r\n        </div>\r\n        <ng-template #waitingForUser>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                    [disabled]=\"working || form.invalid\">{{'Create user' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"working\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n            </div>\r\n            <div style=\"margin-top: 1rem;\">\r\n                <h4>{{ 'Mission details' | translate }}</h4>\r\n            </div>\r\n            <ngb-alert type=\"warning\" [dismissible]=\"false\">{{'Please create a user first' | translate}}.</ngb-alert>\r\n\r\n        </ng-template>\r\n    </form>\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }, { type: FormMissionComponent, selector: "lib-form-mission", inputs: ["missionToEdit", "organisationForMission", "isSP", "userForMissionID", "currentUserOrganisation"], outputs: ["addedMissionInput"] }, { type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: UserMissionFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-mission-form', template: "<div *ngIf=\"form\">\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div id=\"personalInfo\">\r\n            <div style=\"margin-top: 1rem;\">\r\n                <h4>{{ 'User Personal Information' | translate }}</h4>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Email' | translate}} *</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"email.invalid && email.touched\" required\r\n                        formControlName=\"email\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'An email is required' | translate}}.\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Last name' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"lastName\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'First name' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"firstName\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n            <lib-loader></lib-loader>\r\n        </div>\r\n\r\n        <div *ngIf=\"createdUser; else waitingForUser\">\r\n            <div class=\"alert alert-info\">\r\n                {{'User successfully created' | translate}}\r\n            </div>\r\n            <lib-form-mission [organisationForMission]=\"addToOrganisation\" [userForMissionID]=\"createdUser.id\"\r\n                [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\" (addedMissionInput)=\"onMissionInput($event)\">\r\n            </lib-form-mission>\r\n        </div>\r\n        <ng-template #waitingForUser>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                    [disabled]=\"working || form.invalid\">{{'Create user' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"working\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n            </div>\r\n            <div style=\"margin-top: 1rem;\">\r\n                <h4>{{ 'Mission details' | translate }}</h4>\r\n            </div>\r\n            <ngb-alert type=\"warning\" [dismissible]=\"false\">{{'Please create a user first' | translate}}.</ngb-alert>\r\n\r\n        </ng-template>\r\n    </form>\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: i1.BaseUserService }, { type: i3.TranslateService }]; }, propDecorators: { addToOrganisation: [{
+                type: Input
+            }], isSP: [{
+                type: Input
+            }], createForExistingUser: [{
+                type: Input
+            }], currentOrg: [{
+                type: Input
+            }], added: [{
+                type: Output
+            }] } });
+
+class FormOrganisationComponent {
+    constructor(orgService, fb, userService) {
+        this.orgService = orgService;
+        this.fb = fb;
+        this.userService = userService;
+        this.working = false;
+        this.added = new EventEmitter();
+    }
+    async ngOnInit() {
+        this.isSP = this.userService.isSPAdmin();
+        this.initForm();
+    }
+    ngAfterViewInit() {
+        const handlePaste = function handlePaste(event) {
+            const pastedData = event.clipboardData.getData("Text");
+            if (pastedData.length > 10) {
+                this.findOrgByToken(pastedData);
+            }
+        }.bind(this);
+        if (this.existing) {
+            setTimeout(() => {
+                const inputElement = document.querySelector("#tokenInput");
+                inputElement.addEventListener("paste", handlePaste);
+                inputElement.addEventListener("keydown", ({ key }) => {
+                    if (key === "Backspace" || key === "Delete") {
+                        this.initForm();
+                    }
+                });
+                inputElement.addEventListener("keydown", ({ key }) => {
+                    if (key === "Enter") {
+                        const { value } = inputElement;
+                        this.findOrgByToken(value);
+                    }
+                });
+            }, 600);
+        }
+    }
+    initForm() {
+        this.form = this.fb.group({
+            name: [null, [Validators.required]],
+            address: [""],
+            city: [""],
+            postal: [null],
+            siret: [null],
+        });
+        if (this.existing) {
+            const orgControls = this.form;
+            for (const control of Object.keys(orgControls.controls)) {
+                orgControls.controls[control].disable();
+            }
+        }
+    }
+    onCancel() {
+        this.form = null;
+        this.added.emit(false);
+    }
+    get name() {
+        return this.form.get("name");
+    }
+    async onSubmit() {
+        this.working = true;
+        const formValue = this.form.value;
+        removeNullKeysFromObject(formValue);
+        try {
+            if (!this.existing) {
+                const organisation = await this.orgService.createOrganisation(formValue);
+                if (organisation) {
+                    this.createdOrg = organisation;
+                }
+            }
+            else {
+                // orgID = this.existingOrgID;
+            }
+        }
+        catch (error) {
+            console.error(error);
+            this.added.emit(false);
+        }
+        this.working = false;
+    }
+    async findOrgByToken(token) {
+        const org = await this.orgService.getOrganisationByToken(token);
+        if (org) {
+            this.form.setValue({
+                name: [org.name],
+                address: [org.address],
+                city: [org.city],
+                postal: [org.postal],
+                siret: [org.siret],
+            });
+            this.existingOrgID = org.id;
+        }
+        else {
+            alert("No organisation found. Maybe token is expired?");
+        }
+    }
+    userAndMissionAdded(added) {
+        this.added.emit(added);
+    }
+}
+FormOrganisationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormOrganisationComponent, deps: [{ token: i1.OrganisationService }, { token: i2.FormBuilder }, { token: i1.BaseUserService }], target: i0.ɵɵFactoryTarget.Component });
+FormOrganisationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormOrganisationComponent, selector: "lib-form-organisation", inputs: { currentOrg: "currentOrg", currentUser: "currentUser", existing: "existing" }, outputs: { added: "added" }, ngImport: i0, template: "<div *ngIf=\"form\">\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div>\r\n            <h4>{{ 'Organisation' | translate }}</h4>\r\n        </div>\r\n        <div class=\"form-group row\" *ngIf=\"existing\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Organisation Token' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" id=\"tokenInput\" placeholder=\"Paste organisation token here\">\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                    formControlName=\"name\">\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Name is mandatory' | translate}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Postal Code' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div *ngIf=\"createdOrg; else noOrg\">\r\n            <div class=\"alert alert-info\">\r\n                {{'Organisation successfully created' | translate}}\r\n            </div>\r\n            <lib-user-mission-form [addToOrganisation]=\"createdOrg\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n                (added)=\"userAndMissionAdded($event)\">\r\n            </lib-user-mission-form>\r\n        </div>\r\n        <ng-template #noOrg>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                    [disabled]=\"this.working || form.invalid\">{{'Create organisation' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n            </div>\r\n            <div style='margin-top: 1rem'>\r\n                <h4>{{ 'User Personal Information' | translate }}</h4>\r\n            </div>\r\n            <ngb-alert type=\"warning\" [dismissible]=\"false\">{{'Please create new organisation first' | translate}}\r\n            </ngb-alert>\r\n\r\n        </ng-template>\r\n\r\n\r\n    </form>\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: UserMissionFormComponent, selector: "lib-user-mission-form", inputs: ["addToOrganisation", "isSP", "createForExistingUser", "currentOrg"], outputs: ["added"] }, { type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormOrganisationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-organisation', template: "<div *ngIf=\"form\">\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div>\r\n            <h4>{{ 'Organisation' | translate }}</h4>\r\n        </div>\r\n        <div class=\"form-group row\" *ngIf=\"existing\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Organisation Token' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" id=\"tokenInput\" placeholder=\"Paste organisation token here\">\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                    formControlName=\"name\">\r\n                <div class=\"invalid-feedback\">\r\n                    {{'Name is mandatory' | translate}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'Postal Code' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n            <div class=\"col-sm-9\">\r\n                <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div *ngIf=\"createdOrg; else noOrg\">\r\n            <div class=\"alert alert-info\">\r\n                {{'Organisation successfully created' | translate}}\r\n            </div>\r\n            <lib-user-mission-form [addToOrganisation]=\"createdOrg\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n                (added)=\"userAndMissionAdded($event)\">\r\n            </lib-user-mission-form>\r\n        </div>\r\n        <ng-template #noOrg>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                    [disabled]=\"this.working || form.invalid\">{{'Create organisation' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n            </div>\r\n            <div style='margin-top: 1rem'>\r\n                <h4>{{ 'User Personal Information' | translate }}</h4>\r\n            </div>\r\n            <ngb-alert type=\"warning\" [dismissible]=\"false\">{{'Please create new organisation first' | translate}}\r\n            </ngb-alert>\r\n\r\n        </ng-template>\r\n\r\n\r\n    </form>\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.OrganisationService }, { type: i2.FormBuilder }, { type: i1.BaseUserService }]; }, propDecorators: { currentOrg: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], existing: [{
+                type: Input
+            }], added: [{
+                type: Output
+            }] } });
+
+class DetailOrganisationComponent {
+    constructor(organisationService, 
+    // private localStripe: StripeService,
+    formBuilder) {
+        this.organisationService = organisationService;
+        this.formBuilder = formBuilder;
+        this.orgChanged = new EventEmitter();
+        this.loading = false;
+        this.connectingStripe = false;
+    }
+    ngOnInit() {
+        this.myOrg = this.currentOrg.id === this.org.id;
+        if (!this.org.connectedAccountStripeID && (this.myOrg || this.isSP)) {
+            this.setConnectStripeLink();
+        }
+    }
+    ngOnChanges() {
+        this.myOrg = this.currentOrg.id === this.org.id;
+    }
+    async onToken() {
+        const token = v4();
+        const expires = new Date();
+        expires.setDate(expires.getDate() + 7); // 7 days expiration
+        this.org = await this.organisationService.updateOrganisation({
+            id: this.org.id,
+            shareToken: token,
+            tokenExpiresAt: expires.getTime(),
+        });
+        this.orgChanged.emit(true);
+    }
+    prettifyToken() {
+        const expirationDate = new Date(this.org.tokenExpiresAt);
+        const diffTime = expirationDate.getTime() - Date.now();
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        const expirationString = diffTime < 0 ? "expired!" : `expires in ${diffDays} days`;
+        return `${this.org.shareToken.slice(0, 6)}... ${expirationString}`;
+    }
+    /**
+     * Created New Stripe Account and launches onboarding procedure (mail, phone, business details..) by Stripe
+     * @returns null
+     */
+    // async onCreateStripe() {
+    //     this.loading = true;
+    //     // Make the request
+    //     const responseAccount = await API.post(
+    //         "stripeApi",
+    //         "/create/account",
+    //         {},
+    //     );
+    //     console.log(responseAccount);
+    //     if (responseAccount.err) {
+    //         this.handleStripeError(responseAccount);
+    //         return;
+    //     }
+    //     const { account } = responseAccount;
+    //     // save account id to organisation
+    //     await this.organisationService.update({
+    //         id: this.org.id,
+    //         connectedAccountStripeID: account.id,
+    //         stripeOnBoardingCompleted: false,
+    //     });
+    //     const { origin } = document.location;
+    //     const responseAccountLinks = await this.localStripe.createAccountLink(
+    //         account.id,
+    //         origin,
+    //     );
+    //     if (responseAccountLinks.err) {
+    //         this.handleStripeError(responseAccountLinks);
+    //         return;
+    //     }
+    //     window.location.href = responseAccountLinks.accountLinks.url;
+    //     this.loading = false;
+    // }
+    // async onCompleteOnboardingStripe() {
+    //     this.loading = true;
+    //     const responseAccountLinks = await this.localStripe.createAccountLink(
+    //         this.org.connectedAccountStripeID,
+    //         origin,
+    //     );
+    //     if (responseAccountLinks.err) {
+    //         this.handleStripeError(responseAccountLinks);
+    //         return;
+    //     }
+    //     window.location.href = responseAccountLinks.accountLinks.url;
+    //     this.loading = false;
+    // }
+    // handleStripeError(stripeResponse) {
+    //     alert(stripeResponse.err.raw.message);
+    //     this.loading = false;
+    // }
+    /**
+     * Generate link for Launching OAuth connection with Stripe: https://stripe.com/docs/connect/oauth-standard-accounts#integrating-oauth
+     */
+    setConnectStripeLink() {
+        setTimeout(() => {
+            const hyperlink = document.querySelector("#linkStripe");
+            if (hyperlink) {
+                const clientID = "ca_KQhYOlgR1ipOxLBBQHfQeCLoaySRVD5P"; // TODO change for live Stripe Account
+                const { origin } = document.location;
+                const returnUrl = `${origin}/stripe/redirect`;
+                hyperlink.setAttribute("href", `https://connect.stripe.com/oauth/authorize?response_type=code&client_id=${clientID}&scope=read_write&redirect_uri=${returnUrl}&state=${this.org.id}`);
+            }
+        }, 200); // wait until the element is rendered
+    }
+    /** Edit */
+    onEdit() {
+        this.editForm = this.formBuilder.group({
+            id: this.org.id,
+            name: this.org.name,
+            siret: this.org.siret,
+            city: this.org.city,
+            address: this.org.address,
+            contactDetails: this.org.contactDetails,
+            postal: this.org.postal,
+        });
+    }
+    get name() {
+        return this.editForm.get("name");
+    }
+    async onSubmit() {
+        const formValue = this.editForm.value;
+        removeNullKeysFromObject(formValue);
+        try {
+            const updatedOrg = await this.organisationService.updateOrganisation(formValue);
+            this.org = updatedOrg;
+        }
+        catch (error) {
+            console.error(JSON.stringify(error));
+        }
+        this.editForm = null;
+    }
+    onCancel() {
+        this.editForm = null;
+    }
+}
+DetailOrganisationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DetailOrganisationComponent, deps: [{ token: i1.OrganisationService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DetailOrganisationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DetailOrganisationComponent, selector: "lib-detail-organisation", inputs: { org: "org", currentOrg: "currentOrg", isSP: "isSP" }, outputs: { orgChanged: "orgChanged" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <h5>{{'Organisation Details' | translate }}</h5>\r\n    <div *ngIf=\"!editForm\">\r\n        <ul class=\"list-group list-group-flush\">\r\n            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{ org.name }}</li>\r\n\r\n            <li class=\"list-group-item bg-transparent\">{{'SIRET' | translate }}: {{\r\n                org.siret ? org.siret : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'Address' | translate }}: {{\r\n                org.address ? org.address : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'City' | translate }}: {{org.city }}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'Contact information' | translate}}:\r\n                {{ org.contactDetails ? org.contactDetails : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\" *ngIf=\"isSP\">\r\n                <div class=\"row ml-0\">\r\n                    <div>\r\n                        {{'Active token' | translate }}:\r\n                        {{ org.shareToken ? prettifyToken() : ('No' | translate) }}\r\n                    </div>\r\n                    <div *ngIf=\"org.shareToken && !tokenExpired\" ngxClipboard [cbContent]=\"org.shareToken\"\r\n                        [style.cursor]=\"'pointer'\" style=\"margin-left: 5px; max-width: 20px;\" ngbTooltip=\"Copied!\"\r\n                        triggers=\"click:blur\">\r\n                        <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                            data-height=\"20\"></span>\r\n                    </div>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n        <div class=\"action-button-container\">\r\n            <button class=\"btn btn-outline-primary rounded-pill mt-2 ml-3 action-button\" *ngIf=\"isSP || myOrg\"\r\n                (click)=\"onEdit()\">\r\n                {{'Edit' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill mt-2 ml-3 action-button\" *ngIf=\"isSP\"\r\n                (click)=\"onToken()\">{{'Generate\r\n                token' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!--Edit Form-->\r\n    <div *ngIf=\"editForm\">\r\n        <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"editForm\">\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Contact information' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"contactDetails\"\r\n                        placeholder=\"{{'Name, phone, email' | translate}}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Postal code' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n                </div>\r\n            </div>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                    [disabled]=\"editForm.invalid\">{{'Save' |\r\n                    translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                    translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <!--Loading-->\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <lib-loader></lib-loader>\r\n    </div>\r\n\r\n    <!--Stripe-->\r\n    <hr>\r\n    <h5>{{'stripe.account' | translate }}</h5>\r\n    <ul class=\"list-group list-group-flush\">\r\n        <li class=\"list-group-item bg-transparent\" *ngIf=\"(isSP || myOrg) && org.connectedAccountStripeID\">\r\n            {{'stripe.connected' | translate }}: {{org.connectedAccountStripeID.substring(0, 15) }}...</li>\r\n        <li class=\"list-group-item bg-transparent\" *ngIf=\"(isSP || myOrg) && org.stripeOnBoardingCompleted !== null\">\r\n            {{'stripe.completed' | translate }}: {{org.stripeOnBoardingCompleted }}</li>\r\n    </ul>\r\n    <!-- <a *ngIf=\"(myOrg || isSP) && !org.connectedAccountStripeID\" id=\"linkStripe\" \r\n        class=\"ml-3 stripe-connect\"><span>Connect with</span>\r\n    </a>\r\n    <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3 ml-3 no-lowercase\"\r\n        *ngIf=\"(myOrg || isSP) && org.connectedAccountStripeID && !org.stripeOnBoardingCompleted\"\r\n        (click)=\"onCompleteOnboardingStripe()\">{{'stripe.toComplete' | translate}}</button> -->\r\n\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.ClipboardDirective, selector: "[ngxClipboard]", inputs: ["ngxClipboard", "container", "cbContent", "cbSuccessMsg"], outputs: ["cbOnSuccess", "cbOnError"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DetailOrganisationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-detail-organisation', template: "<div>\r\n    <h5>{{'Organisation Details' | translate }}</h5>\r\n    <div *ngIf=\"!editForm\">\r\n        <ul class=\"list-group list-group-flush\">\r\n            <li class=\"list-group-item bg-transparent\">{{'Name' | translate}}: {{ org.name }}</li>\r\n\r\n            <li class=\"list-group-item bg-transparent\">{{'SIRET' | translate }}: {{\r\n                org.siret ? org.siret : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'Address' | translate }}: {{\r\n                org.address ? org.address : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'City' | translate }}: {{org.city }}</li>\r\n            <li class=\"list-group-item bg-transparent\">{{'Contact information' | translate}}:\r\n                {{ org.contactDetails ? org.contactDetails : (\"No data\" | translate)}}</li>\r\n            <li class=\"list-group-item bg-transparent\" *ngIf=\"isSP\">\r\n                <div class=\"row ml-0\">\r\n                    <div>\r\n                        {{'Active token' | translate }}:\r\n                        {{ org.shareToken ? prettifyToken() : ('No' | translate) }}\r\n                    </div>\r\n                    <div *ngIf=\"org.shareToken && !tokenExpired\" ngxClipboard [cbContent]=\"org.shareToken\"\r\n                        [style.cursor]=\"'pointer'\" style=\"margin-left: 5px; max-width: 20px;\" ngbTooltip=\"Copied!\"\r\n                        triggers=\"click:blur\">\r\n                        <span class=\"iconify\" data-icon=\"mdi:content-copy\" data-inline=\"false\" data-width=\"20\"\r\n                            data-height=\"20\"></span>\r\n                    </div>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n        <div class=\"action-button-container\">\r\n            <button class=\"btn btn-outline-primary rounded-pill mt-2 ml-3 action-button\" *ngIf=\"isSP || myOrg\"\r\n                (click)=\"onEdit()\">\r\n                {{'Edit' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill mt-2 ml-3 action-button\" *ngIf=\"isSP\"\r\n                (click)=\"onToken()\">{{'Generate\r\n                token' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!--Edit Form-->\r\n    <div *ngIf=\"editForm\">\r\n        <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"editForm\">\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" [class.is-invalid]=\"name.invalid && name.touched\" required\r\n                        formControlName=\"name\">\r\n                    <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Contact information' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"contactDetails\"\r\n                        placeholder=\"{{'Name, phone, email' | translate}}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Address' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"address\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'City' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"city\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'Postal code' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"postal\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'SIRET' | translate}}</label>\r\n                <div class=\"col-sm-9\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"siret\">\r\n                </div>\r\n            </div>\r\n            <div class=\"action-button-container\">\r\n                <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                    [disabled]=\"editForm.invalid\">{{'Save' |\r\n                    translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\"\r\n                    class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                    translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <!--Loading-->\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <lib-loader></lib-loader>\r\n    </div>\r\n\r\n    <!--Stripe-->\r\n    <hr>\r\n    <h5>{{'stripe.account' | translate }}</h5>\r\n    <ul class=\"list-group list-group-flush\">\r\n        <li class=\"list-group-item bg-transparent\" *ngIf=\"(isSP || myOrg) && org.connectedAccountStripeID\">\r\n            {{'stripe.connected' | translate }}: {{org.connectedAccountStripeID.substring(0, 15) }}...</li>\r\n        <li class=\"list-group-item bg-transparent\" *ngIf=\"(isSP || myOrg) && org.stripeOnBoardingCompleted !== null\">\r\n            {{'stripe.completed' | translate }}: {{org.stripeOnBoardingCompleted }}</li>\r\n    </ul>\r\n    <!-- <a *ngIf=\"(myOrg || isSP) && !org.connectedAccountStripeID\" id=\"linkStripe\" \r\n        class=\"ml-3 stripe-connect\"><span>Connect with</span>\r\n    </a>\r\n    <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3 ml-3 no-lowercase\"\r\n        *ngIf=\"(myOrg || isSP) && org.connectedAccountStripeID && !org.stripeOnBoardingCompleted\"\r\n        (click)=\"onCompleteOnboardingStripe()\">{{'stripe.toComplete' | translate}}</button> -->\r\n\r\n</div>", styles: [".form-group{margin:1.5rem 0}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.OrganisationService }, { type: i2.FormBuilder }]; }, propDecorators: { org: [{
+                type: Input
+            }], currentOrg: [{
+                type: Input
+            }], isSP: [{
+                type: Input
+            }], orgChanged: [{
+                type: Output
+            }] } });
+
+class UserComponent {
+    constructor(userService, missionService, domainService, organisationService, modalService, translate) {
+        this.userService = userService;
+        this.missionService = missionService;
+        this.domainService = domainService;
+        this.organisationService = organisationService;
+        this.modalService = modalService;
+        this.translate = translate;
+        this.detailsUser = '-1';
+        this.detailsOrg = '-1';
+        this.query = '';
+        this.create = false;
+        this.edit = false;
+        this.working = false;
+        this.createForExistingUser = false;
+        this.isAddingOrg = false;
+        this.isAddingToExistingOrg = false;
+        this.isManager = false;
+        this.hideList = false;
+        this.orgsUsersMissions = [];
+        this.isSP = false;
+        this.isGuide = false;
+        this.clientsSP = [];
+        this.prestataireClients = [];
+        this.loading = false;
+        this.destroy$ = new Subject();
+        this.userService.isChanged
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((isConnected) => {
+            if (isConnected) {
+                this.initInfo();
+            }
+        });
+    }
+    // @todo list my org and sub orgs
+    /**
+     * resetList fetches a fresh user list from server
+     */
+    async resetList() {
+        this.orgsUsersMissions = [];
+        let allMissions = [];
+        this.loading = true;
+        if (this.isSP) {
+            this.orgsUsersMissions = await this.initListForSP();
+            this.filteredOrgsUsersMissions = this.orgsUsersMissions;
+            this.loading = false;
+            return;
+        }
+        allMissions = await this.missionService.getMissionsByOrderedOrganisation(this.currentOrg.id);
+        const currentOrgMissions = await this.missionService.getMissionsByOrganisation(this.currentOrg.id);
+        allMissions = [...allMissions, ...currentOrgMissions];
+        allMissions = allMissions.filter((mission) => mission.user && !mission.user.deletedAt);
+        allMissions = filterUniqueArrayByID(allMissions);
+        if (allMissions) {
+            const orgs = allMissions.map((mis) => mis.organisation);
+            const profiles = allMissions.map((mis) => mis.user);
+            const uniqueOrg = filterUniqueArrayByID(orgs);
+            const uniqueUsers = filterUniqueArrayByID(profiles);
+            uniqueOrg.map((org) => {
+                const orgMissions = allMissions.filter((mis) => {
+                    return mis.organisationID === org.id;
+                });
+                let users = this.getUsersForOrgMissions(uniqueUsers, orgMissions);
+                users = users.sort((user) => (user.user.email ? 0 : -1));
+                const object = {
+                    org,
+                    users,
+                };
+                this.orgsUsersMissions.push(object);
+            });
+        }
+        this.filteredOrgsUsersMissions = this.orgsUsersMissions;
+        this.loading = false;
+    }
+    async initInfo() {
+        const currentUser = this.userService.cu;
+        if (currentUser) {
+            this.me = currentUser;
+            this.currentOrg = this.userService.currentOrganisation();
+            this.isManager = this.userService.hasManagerRoleInAnyMission();
+            this.isSP = this.userService.isSPAdmin();
+            this.isGuide = this.userService.isGuide();
+            this.resetList();
+            this.setDomains();
+        }
+    }
+    async ngOnInit() {
+        this.initInfo();
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    async initListForSP() {
+        const results = [];
+        let allMissions = [];
+        let allOrgs = [];
+        allOrgs = await this.organisationService.listOrganisations();
+        await Promise.all(allOrgs.map(async (org) => {
+            const missions = await this.missionService.getMissionsByOrganisation(org.id);
+            allMissions = [...allMissions, ...missions];
+        }));
+        const profiles = allMissions
+            .map((mis) => mis.user)
+            .filter((user) => !user.deletedAt);
+        const uniqueUsers = filterUniqueArrayByID(profiles.filter((profile) => profile !== null));
+        allOrgs.map((org) => {
+            const orgMissions = allMissions.filter((mis) => {
+                return mis.organisationID === org.id;
+            });
+            if (orgMissions.length > 0) {
+                if (orgMissions.filter((m) => m.orderedOrganisationID === '6e28201f-4679-4c29-9d2d-8a325f57cee9').length > 0) {
+                    this.clientsSP.push(org.id);
+                }
+                else {
+                    this.prestataireClients.push({
+                        orgOwner: orgMissions[0].orderedOrganisationID,
+                        prestataire: org.id,
+                    });
+                }
+            }
+            const users = this.getUsersForOrgMissions(uniqueUsers, orgMissions);
+            const object = {
+                org,
+                users,
+            };
+            results.push(object);
+        });
+        return results;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getUsersForOrgMissions(uniqueUsers, orgMissions) {
+        const users = uniqueUsers.map((user) => {
+            const userMissions = orgMissions.filter((m) => m.userID === user.id);
+            if (userMissions.length > 0) {
+                const userProfile = new ProfileEntity(user);
+                // once we got the user we check filter only active missions (not deleted)
+                const activeMissions = userMissions.filter((mis) => !mis.deletedAt);
+                return {
+                    missions: activeMissions,
+                    user: userProfile,
+                };
+            }
+            return null;
+        });
+        return users.filter((us) => us !== null);
+    }
+    async setDomains() {
+        const domains = await this.domainService.getDomainsForOrgExcludingTypes([DomainType.FEATURE, DomainType.BOOKING], this.currentOrg.id);
+        this.domains = domains;
+    }
+    /**
+     * onToggleDetail folds/unfolds details for a given organisation
+     * @param i index of the organisation to be toggled
+     */
+    onToggleDetailOrg(index, org) {
+        this.detailsOrg = index === this.detailsOrg ? '-1' : index;
+        this.orgSelectedDetails = this.detailsOrg === '-1' ? null : org;
+    }
+    onToggleDetailUser(index) {
+        this.detailsUser = index === this.detailsUser ? '-1' : index;
+    }
+    async onAdd(org) {
+        this.create = true;
+        this.hideList = true;
+        this.addToOrg = org;
+    }
+    async onEdit(m) {
+        this.edit = true;
+        this.hideList = true;
+        this.missionToEdit = m;
+    }
+    onCancel() {
+        this.working = false;
+        this.create = false;
+        this.missionToEdit = null;
+        this.createForExistingUser = false;
+    }
+    onAddForUser(org, user) {
+        this.hideList = true;
+        this.createForExistingUser = true;
+        this.userForAddingMission = user;
+        this.addToOrg = org;
+    }
+    onAddOrg() {
+        this.hideList = true;
+        this.isAddingOrg = true;
+    }
+    orgAdded(isAdded) {
+        this.hideList = false;
+        this.isAddingOrg = false;
+        this.isAddingToExistingOrg = false;
+        if (isAdded) {
+            this.resetList();
+        }
+    }
+    userAdded(isAdded) {
+        console.log(isAdded);
+        this.hideList = false;
+        this.create = false;
+        this.addToOrg = null;
+        this.createForExistingUser = false;
+        this.userForAddingMission = null;
+        if (isAdded) {
+            this.resetList();
+        }
+    }
+    async onMissionEdited(mission) {
+        this.edit = false;
+        this.missionToEdit = null;
+        if (mission) {
+            await this.userService.createOrUpdateMissionForOrgWithProperty(mission, mission.organisationID, false);
+            this.resetList();
+        }
+        this.hideList = false;
+    }
+    async onMissionCreated(mission) {
+        this.createForExistingUser = false;
+        this.userForAddingMission = null;
+        if (mission) {
+            await this.userService.createOrUpdateMissionForOrgWithProperty(mission, mission.organisationID);
+            this.resetList();
+        }
+        this.hideList = false;
+    }
+    getOrderedOrg(orgID) {
+        let name;
+        this.prestataireClients.map(async (presta) => {
+            if (presta.prestataire === orgID) {
+                const org = this.orgsUsersMissions.filter((object) => object.org.id === presta.orgOwner);
+                if (org.length > 0) {
+                    name = org[0].org.name;
+                }
+            }
+        });
+        return name;
+    }
+    domainIdsToStringForMission(mission) {
+        let names = '';
+        for (const domainID of mission.domains) {
+            const domain = this.domains.find((dom) => dom.id === domainID);
+            if (domain) {
+                names = `${names} ${domain.name},`;
+            }
+        }
+        return names.slice(0, -1); // to remove last comma
+    }
+    async onDeleteMission(mission) {
+        const message = this.translate.instant('confirm.deleteMission');
+        if (window.confirm(message)) {
+            await this.missionService.softDeleteMission(mission.id);
+            this.resetList();
+        }
+    }
+    async onDeleteUser(user) {
+        const message = this.translate.instant('confirm.deleteUser');
+        if (window.confirm(message)) {
+            const userMissions = await this.missionService.getMissionsFromUserID(user.id);
+            if (userMissions.length > 0) {
+                const resultDelete = [];
+                await Promise.all(userMissions.map(async (mission) => {
+                    if (mission.orderedOrganisationID === this.currentOrg.id ||
+                        this.isSP) {
+                        const deletedMission = await this.missionService.softDeleteMission(mission.id);
+                        if (deletedMission) {
+                            resultDelete.push(deletedMission);
+                        }
+                    }
+                }));
+                if (resultDelete.length > 0) {
+                    await this.userService.softDeleteUser(user.id);
+                    await this.resetList();
+                }
+            }
+            else {
+                await this.userService.softDeleteUser(user.id);
+                await this.resetList();
+            }
+        }
+    }
+    applyResultsSearchBar(results) {
+        this.orgSelectedDetails = null;
+        this.filteredOrgsUsersMissions = results || this.orgsUsersMissions;
+    }
+    onAddInExistingOrg() {
+        this.hideList = true;
+        this.isAddingToExistingOrg = true;
+    }
+    /**
+     * Creates encypted link and sets it for guestLink for Space.
+     * @param mis
+     */
+    onSetForShareableLink(user, mission) {
+        const modalReference = this.modalService.open(GuestLinkComponent);
+        modalReference.componentInstance.username = user.email;
+        modalReference.componentInstance.spaceID = mission.spaceID;
+    }
+    async onClearToken(user) {
+        await this.userService.clearUserToken(user.user.id);
+        const firstMessage = this.translate.instant('firstTokenMessage');
+        const secondMessage = this.translate.instant('secondTokenMessage');
+        alert(firstMessage + user.user.displayName + secondMessage);
+    }
+}
+UserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: UserComponent, deps: [{ token: i1.BaseUserService }, { token: i1.MissionService }, { token: i1.DomainService }, { token: i1.OrganisationService }, { token: i4$1.NgbModal }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+UserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: UserComponent, selector: "lib-user", ngImport: i0, template: "<div class=\"dashboard-tab\">\r\n  <div class=\"header-dashboard-tab\">\r\n    <h3>{{'Users' | translate}}</h3>\r\n    <!-- <app-search-bar *ngIf=\"!hideList\" [searchable]=\"orgsUsersMissions\" objectType=\"USER\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\">\r\n      </app-search-bar> -->\r\n    <hr>\r\n  </div>\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8 col-lg-6\">\r\n      <div class=\"row ml-0 mb-2\" *ngIf=\"!hideList\">\r\n        <button class=\"btn btn-outline-primary rounded-pill add-button\" *ngIf=\"isManager && !isGuide\" (click)=\"onAddOrg()\">\r\n          {{'Add user to new organisation' | translate}}</button>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <lib-loader></lib-loader>\r\n      </div>\r\n      <div *ngIf=\"!hideList\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"filteredOrgsUsersMissions\">\r\n          <li class=\"list-group-item list-group-item-action\" *ngFor=\"let o of filteredOrgsUsersMissions\">\r\n            <div class=\"d-flex justify-content-between align-items-center font-weight-bold\"\r\n              ngbTooltip=\"See details and users\" style=\"cursor: pointer;\" (click)=\"onToggleDetailOrg(o.org.id, o.org)\">\r\n              {{o.org.name}} <small *ngIf=\"o.org.id == currentOrg.id\">({{'My organisation' | translate}})</small>\r\n              <small *ngIf=\"isSP && clientsSP.includes(o.org.id)\">({{'Client of SmarterPlan' | translate}})</small>\r\n              <small *ngIf=\"isSP && getOrderedOrg(o.org.id)\">({{'Client of ' | translate}}\r\n                {{getOrderedOrg(o.org.id)}})</small>\r\n              <lib-chevron [conditionShowing]=\"detailsOrg==o.org.id\"></lib-chevron>\r\n            </div>\r\n            <div class=\"missions\" *ngIf=\"detailsOrg==o.org.id\">\r\n              <div class='d-flex'>\r\n                <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3\" (click)=\"onAdd(o.org)\">{{'Add user' |\r\n                  translate}}</button>\r\n              </div>\r\n\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let a of o.users\"\r\n                  (click)=\"onToggleDetailUser(a.user.id)\">\r\n                  <div class=\"d-flex justify-content-between align-items-center\">\r\n                    {{a.user.displayName}}\r\n                    <lib-chevron [conditionShowing]=\"detailsUser==a.user.id\"></lib-chevron>\r\n                  </div>\r\n\r\n                  <div *ngIf=\"detailsUser==a.user.id\">\r\n                    <div class=\"ml-3\">\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        {{'Email' | translate}}: {{a.user.email }}\r\n                      </div>\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\"\r\n                          (click)=\"onAddForUser(o.org, a.user)\">{{'Add new mission' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onClearToken(a)\">\r\n                          {{'Clear Token' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\"\r\n                          (click)=\"onDeleteUser(a.user)\">{{'Delete user' | translate}}</button>\r\n                      </div>\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        {{ a.missions.length > 0 ? ('Current Missions' | translate) : ('No missions' | translate)}}\r\n                      </div>\r\n                    </div>\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"list-group-item\" *ngFor=\"let mis of a.missions\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.description\">\r\n                            {{'Description' | translate}}: {{mis.description}}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.templateMissionID\">\r\n                            {{'Attendee of tour' | translate}}: {{mis.templateMission.title}}</li>\r\n\r\n                          <li class=\"list-group-item bg-transparent\">{{'Role' | translate}}: {{ mis.role }}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.hashtags && mis.hashtags.length> 0\">\r\n                            {{'Hashtags' | translate}}: <ul class=\"keywordsDisplay no-border\">\r\n                              <div class=\"keywordsdisplayContainer\">\r\n                                <li class=\"keywordsItem\" *ngFor=\"let hashtag of mis.hashtags\">\r\n                                  {{ hashtag | hashtagFromID | async }}</li>\r\n                              </div>\r\n                            </ul>\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Language' | translate }}: {{\r\n                            mis.locale ? mis.locale : ('Not applicable' | translate)}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Access level' | translate }}: {{\r\n                            mis.level}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Ordered by' | translate }}: {{\r\n                            mis.orderedOrganisation.name}}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.domains\">{{'Domains' | translate }}:\r\n                            {{mis.domains ?\r\n                            domainIdsToStringForMission(mis) : (\"No data\" | translate) }}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Authorized location' | translate }}:\r\n                            {{ mis.space ? mis.space.name : \"No location\" | translate}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Authorized zone' | translate }}:\r\n                            {{ mis.zone ? mis.zone.name : \"All zones allowed\" | translate}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Starts' | translate }}:\r\n                            {{ mis.startDateTime ? (mis.startDateTime | timeDateString: \"day_time_zone\" | async) :\r\n                            \"No data\" | translate}}, {{'Ends' | translate}}: {{ mis.endDateTime\r\n                            ? (mis.endDateTime | timeDateString: \"day_time_zone\" | async)\r\n                            : \"No data\" | translate}}.\r\n                          </li>\r\n                        </ul>\r\n                        <div class=\"action-button-container\">\r\n                          <button type=\"button\" class=\"btn btn-outline-primary rounded-pill mr-2 action-button\"\r\n                            (click)=\"onEdit(mis)\">{{'Edit' |\r\n                            translate}}</button>\r\n                          <button type=\"button\" *ngIf=\"mis.role === 'VISITOR' || mis.role === 'VISITOR_MUSEUM'\"\r\n                            class=\"btn btn-outline-primary rounded-pill mr-2 action-button share-visitor-button\"\r\n                            (click)=\"onSetForShareableLink(a.user, mis)\">{{'Generate Shareable Link' |\r\n                            translate}}</button>\r\n                          <button type=\"button\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                            (click)=\"onDeleteMission(mis)\">{{'Delete' | translate}}</button>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <div *ngIf=\"create\">\r\n        <lib-user-mission-form [addToOrganisation]=\"addToOrg\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n          (added)=\"userAdded($event)\">\r\n        </lib-user-mission-form>\r\n      </div>\r\n      <div *ngIf=\"edit\">\r\n        <lib-form-mission [missionToEdit]=\"missionToEdit\" [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\"\r\n          (addedMissionInput)=\"onMissionEdited($event)\"></lib-form-mission>\r\n      </div>\r\n      <div *ngIf=\"createForExistingUser\">\r\n        <lib-form-mission [organisationForMission]=\"addToOrg\" [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\"\r\n          [userForMissionID]=\"userForAddingMission.id\" (addedMissionInput)=\"onMissionCreated($event)\">\r\n        </lib-form-mission>\r\n      </div>\r\n      <div *ngIf=\"isAddingOrg || isAddingToExistingOrg\">\r\n        <lib-form-organisation [currentOrg]=\"currentOrg\" [currentUser]=\"me\" [existing]=\"isAddingToExistingOrg\"\r\n          (added)=\"orgAdded($event)\"></lib-form-organisation>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-md-4 col-lg-6\" *ngIf=\"orgSelectedDetails && !isGuide\">\r\n      <lib-detail-organisation [org]=\"orgSelectedDetails\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n        (orgChanged)='orgAdded($event)'></lib-detail-organisation>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".add-button{width:-moz-fit-content;width:fit-content;margin-left:.5rem}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}.action-button-container .share-visitor-button{width:-moz-fit-content;width:fit-content}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: UserMissionFormComponent, selector: "lib-user-mission-form", inputs: ["addToOrganisation", "isSP", "createForExistingUser", "currentOrg"], outputs: ["added"] }, { type: FormMissionComponent, selector: "lib-form-mission", inputs: ["missionToEdit", "organisationForMission", "isSP", "userForMissionID", "currentUserOrganisation"], outputs: ["addedMissionInput"] }, { type: FormOrganisationComponent, selector: "lib-form-organisation", inputs: ["currentOrg", "currentUser", "existing"], outputs: ["added"] }, { type: DetailOrganisationComponent, selector: "lib-detail-organisation", inputs: ["org", "currentOrg", "isSP"], outputs: ["orgChanged"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe, "async": i4.AsyncPipe, "hashtagFromID": i1.HashtagFromIdPipe, "timeDateString": i1.TimeDateToLocalStringPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: UserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user', template: "<div class=\"dashboard-tab\">\r\n  <div class=\"header-dashboard-tab\">\r\n    <h3>{{'Users' | translate}}</h3>\r\n    <!-- <app-search-bar *ngIf=\"!hideList\" [searchable]=\"orgsUsersMissions\" objectType=\"USER\"\r\n        (searchEvent)=\"applyResultsSearchBar($event)\">\r\n      </app-search-bar> -->\r\n    <hr>\r\n  </div>\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8 col-lg-6\">\r\n      <div class=\"row ml-0 mb-2\" *ngIf=\"!hideList\">\r\n        <button class=\"btn btn-outline-primary rounded-pill add-button\" *ngIf=\"isManager && !isGuide\" (click)=\"onAddOrg()\">\r\n          {{'Add user to new organisation' | translate}}</button>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n        <lib-loader></lib-loader>\r\n      </div>\r\n      <div *ngIf=\"!hideList\">\r\n        <ul class=\"list-group list-group-flush\" *ngIf=\"filteredOrgsUsersMissions\">\r\n          <li class=\"list-group-item list-group-item-action\" *ngFor=\"let o of filteredOrgsUsersMissions\">\r\n            <div class=\"d-flex justify-content-between align-items-center font-weight-bold\"\r\n              ngbTooltip=\"See details and users\" style=\"cursor: pointer;\" (click)=\"onToggleDetailOrg(o.org.id, o.org)\">\r\n              {{o.org.name}} <small *ngIf=\"o.org.id == currentOrg.id\">({{'My organisation' | translate}})</small>\r\n              <small *ngIf=\"isSP && clientsSP.includes(o.org.id)\">({{'Client of SmarterPlan' | translate}})</small>\r\n              <small *ngIf=\"isSP && getOrderedOrg(o.org.id)\">({{'Client of ' | translate}}\r\n                {{getOrderedOrg(o.org.id)}})</small>\r\n              <lib-chevron [conditionShowing]=\"detailsOrg==o.org.id\"></lib-chevron>\r\n            </div>\r\n            <div class=\"missions\" *ngIf=\"detailsOrg==o.org.id\">\r\n              <div class='d-flex'>\r\n                <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3\" (click)=\"onAdd(o.org)\">{{'Add user' |\r\n                  translate}}</button>\r\n              </div>\r\n\r\n              <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item list-group-item-action\" *ngFor=\"let a of o.users\"\r\n                  (click)=\"onToggleDetailUser(a.user.id)\">\r\n                  <div class=\"d-flex justify-content-between align-items-center\">\r\n                    {{a.user.displayName}}\r\n                    <lib-chevron [conditionShowing]=\"detailsUser==a.user.id\"></lib-chevron>\r\n                  </div>\r\n\r\n                  <div *ngIf=\"detailsUser==a.user.id\">\r\n                    <div class=\"ml-3\">\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        {{'Email' | translate}}: {{a.user.email }}\r\n                      </div>\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\"\r\n                          (click)=\"onAddForUser(o.org, a.user)\">{{'Add new mission' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\" (click)=\"onClearToken(a)\">\r\n                          {{'Clear Token' | translate}}</button>\r\n                        <button type=\"button\" class=\"btn btn-primary rounded-pill\"\r\n                          (click)=\"onDeleteUser(a.user)\">{{'Delete user' | translate}}</button>\r\n                      </div>\r\n                      <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n                        {{ a.missions.length > 0 ? ('Current Missions' | translate) : ('No missions' | translate)}}\r\n                      </div>\r\n                    </div>\r\n                    <ul class=\"list-group list-group-flush\">\r\n                      <li class=\"list-group-item\" *ngFor=\"let mis of a.missions\">\r\n                        <ul class=\"list-group list-group-flush\">\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.description\">\r\n                            {{'Description' | translate}}: {{mis.description}}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.templateMissionID\">\r\n                            {{'Attendee of tour' | translate}}: {{mis.templateMission.title}}</li>\r\n\r\n                          <li class=\"list-group-item bg-transparent\">{{'Role' | translate}}: {{ mis.role }}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.hashtags && mis.hashtags.length> 0\">\r\n                            {{'Hashtags' | translate}}: <ul class=\"keywordsDisplay no-border\">\r\n                              <div class=\"keywordsdisplayContainer\">\r\n                                <li class=\"keywordsItem\" *ngFor=\"let hashtag of mis.hashtags\">\r\n                                  {{ hashtag | hashtagFromID | async }}</li>\r\n                              </div>\r\n                            </ul>\r\n                          </li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Language' | translate }}: {{\r\n                            mis.locale ? mis.locale : ('Not applicable' | translate)}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Access level' | translate }}: {{\r\n                            mis.level}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Ordered by' | translate }}: {{\r\n                            mis.orderedOrganisation.name}}</li>\r\n                          <li class=\"list-group-item bg-transparent\" *ngIf=\"mis.domains\">{{'Domains' | translate }}:\r\n                            {{mis.domains ?\r\n                            domainIdsToStringForMission(mis) : (\"No data\" | translate) }}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Authorized location' | translate }}:\r\n                            {{ mis.space ? mis.space.name : \"No location\" | translate}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Authorized zone' | translate }}:\r\n                            {{ mis.zone ? mis.zone.name : \"All zones allowed\" | translate}}</li>\r\n                          <li class=\"list-group-item bg-transparent\">{{'Starts' | translate }}:\r\n                            {{ mis.startDateTime ? (mis.startDateTime | timeDateString: \"day_time_zone\" | async) :\r\n                            \"No data\" | translate}}, {{'Ends' | translate}}: {{ mis.endDateTime\r\n                            ? (mis.endDateTime | timeDateString: \"day_time_zone\" | async)\r\n                            : \"No data\" | translate}}.\r\n                          </li>\r\n                        </ul>\r\n                        <div class=\"action-button-container\">\r\n                          <button type=\"button\" class=\"btn btn-outline-primary rounded-pill mr-2 action-button\"\r\n                            (click)=\"onEdit(mis)\">{{'Edit' |\r\n                            translate}}</button>\r\n                          <button type=\"button\" *ngIf=\"mis.role === 'VISITOR' || mis.role === 'VISITOR_MUSEUM'\"\r\n                            class=\"btn btn-outline-primary rounded-pill mr-2 action-button share-visitor-button\"\r\n                            (click)=\"onSetForShareableLink(a.user, mis)\">{{'Generate Shareable Link' |\r\n                            translate}}</button>\r\n                          <button type=\"button\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                            (click)=\"onDeleteMission(mis)\">{{'Delete' | translate}}</button>\r\n                        </div>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <div *ngIf=\"create\">\r\n        <lib-user-mission-form [addToOrganisation]=\"addToOrg\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n          (added)=\"userAdded($event)\">\r\n        </lib-user-mission-form>\r\n      </div>\r\n      <div *ngIf=\"edit\">\r\n        <lib-form-mission [missionToEdit]=\"missionToEdit\" [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\"\r\n          (addedMissionInput)=\"onMissionEdited($event)\"></lib-form-mission>\r\n      </div>\r\n      <div *ngIf=\"createForExistingUser\">\r\n        <lib-form-mission [organisationForMission]=\"addToOrg\" [currentUserOrganisation]=\"currentOrg\" [isSP]=\"isSP\"\r\n          [userForMissionID]=\"userForAddingMission.id\" (addedMissionInput)=\"onMissionCreated($event)\">\r\n        </lib-form-mission>\r\n      </div>\r\n      <div *ngIf=\"isAddingOrg || isAddingToExistingOrg\">\r\n        <lib-form-organisation [currentOrg]=\"currentOrg\" [currentUser]=\"me\" [existing]=\"isAddingToExistingOrg\"\r\n          (added)=\"orgAdded($event)\"></lib-form-organisation>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-md-4 col-lg-6\" *ngIf=\"orgSelectedDetails && !isGuide\">\r\n      <lib-detail-organisation [org]=\"orgSelectedDetails\" [currentOrg]=\"currentOrg\" [isSP]=\"isSP\"\r\n        (orgChanged)='orgAdded($event)'></lib-detail-organisation>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".add-button{width:-moz-fit-content;width:fit-content;margin-left:.5rem}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}.action-button-container .share-visitor-button{width:-moz-fit-content;width:fit-content}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }, { type: i1.MissionService }, { type: i1.DomainService }, { type: i1.OrganisationService }, { type: i4$1.NgbModal }, { type: i3.TranslateService }]; } });
+
+class TemplateComponent {
+    constructor(route, fb, userService, spaceService, zoneService, location, hashtagService, translate, templateService) {
+        this.route = route;
+        this.fb = fb;
+        this.userService = userService;
+        this.spaceService = spaceService;
+        this.zoneService = zoneService;
+        this.location = location;
+        this.hashtagService = hashtagService;
+        this.translate = translate;
+        this.templateService = templateService;
+        this.updatedTemplate = new EventEmitter();
+        this.createdTemplate = new EventEmitter();
+        this.working = false;
+        this.missionTimeStart = 12 * 60 * 60000; // midday in milliseconds
+        this.missionTimeEnd = 12 * 60 * 60000;
+        this.availableHashtags = [];
+        this.addedHashtags = [];
+        this.userService.isChanged.subscribe(() => {
+            this.updateUserInfo();
+        });
+    }
+    ngOnInit() {
+        this.setup();
+        const lang = this.translate.currentLang
+            ? this.translate.currentLang
+            : this.translate.defaultLang;
+        /** Transforme '_fr' to 'fr' */
+        this.currentLocale = stringLocaleToEnum(lang.slice(1)); // to match enum Locale
+        this.locales = enumToArray(Locale);
+    }
+    async setup() {
+        this.initForm();
+        if (this.zoneID) {
+            this.inputZone = await this.zoneService.getZone(this.zoneID);
+            await this.setHashtags(this.inputZone.spaceID);
+        }
+        if (this.editTemplate) {
+            // we are editing a template
+            this.onSpaceClick();
+        }
+        await this.updateUserInfo();
+    }
+    async updateUserInfo() {
+        if (this.userService.cu) {
+            this.availableLevels =
+                this.userService.getAvalableLevelsForCurrentUser();
+            this.currentOrg = this.userService.currentOrganisation();
+            this.availableSpaces = await this.spaceService.getSpacesForOrg(this.currentOrg.id);
+        }
+    }
+    initForm() {
+        if (this.editTemplate) {
+            this.form = this.fb.group({
+                title: [this.editTemplate.title],
+                level: [this.editTemplate.level],
+                organisationID: [this.editTemplate.organisationID],
+                space: [this.editTemplate.spaceID],
+                description: [this.editTemplate.description],
+                zone: [
+                    this.editTemplate.zoneID,
+                    Validators.required,
+                ],
+                locale: [this.editTemplate.locale],
+            });
+            if (this.editTemplate.startDateTime) {
+                const date = DateTime.fromISO(this.editTemplate.startDateTime);
+                this.missionTimeStart = (date.hour * 60 + date.minute) * 60 * 1000;
+                this.startDate = date.toMillis() - this.missionTimeStart;
+            }
+            if (this.editTemplate.endDateTime) {
+                const date = DateTime.fromISO(this.editTemplate.endDateTime);
+                this.missionTimeEnd = (date.hour * 60 + date.minute) * 60 * 1000;
+                this.endDate = date.toMillis() - this.missionTimeEnd;
+            }
+        }
+        else {
+            this.form = this.fb.group({
+                title: [""],
+                level: [LevelStatus.MINIMUM],
+                organisationID: this.currentOrg.id,
+                space: this.inputZone ? this.inputZone.spaceID : [null],
+                description: [null],
+                zone: [
+                    this.inputZone ? this.inputZone.id : null,
+                    Validators.required,
+                ],
+                locale: [this.currentLocale],
+            });
+        }
+    }
+    async onSubmit() {
+        this.working = true;
+        const formValue = this.form.getRawValue();
+        let startDateString;
+        let endDateString;
+        if (this.startDate) {
+            const dateHourStartNumber = this.startDate + this.missionTimeStart;
+            const startDate = DateTime.fromMillis(dateHourStartNumber);
+            startDateString = startDate.toISO();
+        }
+        if (this.endDate) {
+            const dateHourEndNumber = this.endDate + this.missionTimeEnd;
+            const endDate = DateTime.fromMillis(dateHourEndNumber);
+            endDateString = endDate.toISO();
+        }
+        try {
+            if (this.editTemplate) {
+                // update
+                const template = {
+                    id: this.editTemplate.id,
+                    title: formValue.title,
+                    level: formValue.level,
+                    description: formValue.description,
+                    organisationID: formValue.organisationID,
+                    startDateTime: startDateString,
+                    endDateTime: endDateString,
+                    hashtags: this.addedHashtags.map((hashtag) => hashtag.id),
+                    locale: formValue.locale,
+                };
+                if (formValue.space) {
+                    template.spaceID = formValue.space;
+                }
+                if (formValue.zone) {
+                    template.zoneID = formValue.zone;
+                }
+                this.updatedTemplate.emit(template);
+            }
+            else {
+                //create
+                if (this.currentOrg) {
+                    const template = {
+                        title: formValue.title,
+                        organisationID: this.currentOrg.id,
+                        level: formValue.level,
+                        description: formValue.description,
+                        startDateTime: startDateString,
+                        endDateTime: endDateString,
+                        hashtags: this.addedHashtags.map((hashtag) => hashtag.id),
+                        locale: formValue.locale,
+                    };
+                    if (formValue.space) {
+                        template.spaceID = formValue.space;
+                    }
+                    if (formValue.zone) {
+                        template.zoneID = formValue.zone;
+                    }
+                    this.createdTemplate.emit(template);
+                }
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    onCancel() {
+        this.form = null;
+        if (this.editTemplate) {
+            this.updatedTemplate.emit(null);
+        }
+        else {
+            this.createdTemplate.emit(null);
+        }
+    }
+    get title() {
+        return this.form.get("title");
+    }
+    get spaceID() {
+        return this.form.get("space");
+    }
+    async onSpaceClick() {
+        const zones = await this.zoneService.getZonesBySpace(this.spaceID.value);
+        const museumZones = zones.filter((zone) => zone.isMuseumVisitZone);
+        this.zonesForSpace = sortAlphabeticallyOnName(museumZones);
+        await this.setHashtags(this.spaceID.value);
+    }
+    onHashtagClick(hashtag) {
+        if (!this.addedHashtags.includes(hashtag)) {
+            this.addedHashtags.push(hashtag);
+        }
+        else {
+            this.addedHashtags.splice(this.addedHashtags.indexOf(hashtag), 1);
+        }
+    }
+    async setHashtags(spaceID) {
+        this.availableHashtags = await this.hashtagService.getHashtagsForSpace(spaceID);
+    }
+}
+TemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i2.FormBuilder }, { token: i1.BaseUserService }, { token: i1.SpaceService }, { token: i1.ZoneService }, { token: i4.Location }, { token: i1.HashtagService }, { token: i3.TranslateService }, { token: i1.TemplateService }], target: i0.ɵɵFactoryTarget.Component });
+TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TemplateComponent, selector: "lib-template", inputs: { currentOrg: "currentOrg", editTemplate: "editTemplate", zoneID: "zoneID" }, outputs: { updatedTemplate: "updatedTemplate", createdTemplate: "createdTemplate" }, ngImport: i0, template: "<div class=\"form-container\" *ngIf=\"form\">\r\n    <div>\r\n        <h4>{{ 'Visit Template' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Visit Title' | translate}} *</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\"\r\n                        placeholder=\"Edvard Munch - \u00AB Un po\u00E8me d\u2019amour, de vie et de mort \u00BB\"\r\n                        [class.is-invalid]=\"title.invalid && title.touched\" required\r\n                        formControlName=\"title\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <textarea class=\"form-control\" formControlName=\"description\" style=\"height:200px\"\r\n                        placeholder=\"Cette visite d\u20191h30 vous pr\u00E9sentera les \u0153uvres embl\u00E9matiques du c\u00E9l\u00E8bre peintre norv\u00E9gien Edvard Munch (1863-1944)...\"></textarea>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <select class=\"form-control\" formControlName=\"locale\">\r\n                        <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                        <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                            {{ locale }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Level' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <select class=\"form-control\" required formControlName=\"level\">\r\n                        <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                            {{ level }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"availableSpaces && !inputZone\">\r\n                    <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\">\r\n                        <option *ngFor=\"let space of availableSpaces\" [ngValue]=\"space.id\">\r\n                            {{ space.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                    {{ 'No locations available' | translate}}\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"inputZone\">\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"inputZone.space.name\" disabled>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}*</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"zonesForSpace && zonesForSpace.length > 0 && !inputZone\">\r\n                    <select class=\"form-control\" required formControlName=\"zone\">\r\n                        <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"zonesForSpace && zonesForSpace.length === 0 && !inputZone\">\r\n                    <p class=\"warning col-form-label\">{{\"No Museum Zones found for this location\"| translate}}</p>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"inputZone\">\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"inputZone.name\" disabled>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                    <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}}\r\n                    </p>\r\n                    <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">{{'No hashtags created for this\r\n                        location' | translate}} </p>\r\n                    <div *ngIf=\"availableHashtags.length > 0\">\r\n                        <ul class=\"keywordsDisplay no-border\">\r\n                            <div class=\"keywordsdisplayContainer\">\r\n                                <li [class]=\"addedHashtags.includes(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                    *ngFor=\"let hashtag of availableHashtags\" (click)=\"onHashtagClick(hashtag)\"\r\n                                    style=\"cursor: pointer;\"\r\n                                    ngbTooltip=\"{{addedHashtags.includes(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                    {{hashtag.name}}</li>\r\n                            </div>\r\n                        </ul>\r\n                        <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                        <ul class=\"keywordsDisplay\">\r\n                            <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                                <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}</li>\r\n                            </div>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"!spaceID.value\">\r\n                    <p class=\"keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Start Date' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"startDate\" ngbDatepicker\r\n                        #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class=\"input-group-append\">\r\n                        <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\" type=\"button\"></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Start Time' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\">\r\n                    </ngb-timepicker>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'End Date' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"endDate\" ngbDatepicker\r\n                        #d2=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class=\"input-group-append\">\r\n                        <button class=\"btn btn-outline-secondary calendar\" (click)=\"d2.toggle()\" type=\"button\"></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'End Time' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                [disabled]=\"this.working || form.invalid\">{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n        </div>\r\n\r\n    </form>\r\n</div>", styles: [".form-container{margin:2rem 0rem}.form-container .btn-control-div .btn{width:8rem}.warning{margin:0;color:red}.keywordsDisplay{min-height:40px}.keywordsRules{margin-bottom:2px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px!important}\n"], components: [{ type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-template', template: "<div class=\"form-container\" *ngIf=\"form\">\r\n    <div>\r\n        <h4>{{ 'Visit Template' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n        <div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Visit Title' | translate}} *</label>\r\n                <div class=\"col-sm-8\">\r\n                    <input type=\"text\" class=\"form-control\"\r\n                        placeholder=\"Edvard Munch - \u00AB Un po\u00E8me d\u2019amour, de vie et de mort \u00BB\"\r\n                        [class.is-invalid]=\"title.invalid && title.touched\" required\r\n                        formControlName=\"title\">\r\n                </div>\r\n            </div>\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <textarea class=\"form-control\" formControlName=\"description\" style=\"height:200px\"\r\n                        placeholder=\"Cette visite d\u20191h30 vous pr\u00E9sentera les \u0153uvres embl\u00E9matiques du c\u00E9l\u00E8bre peintre norv\u00E9gien Edvard Munch (1863-1944)...\"></textarea>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <select class=\"form-control\" formControlName=\"locale\">\r\n                        <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                        <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                            {{ locale }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Level' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <select class=\"form-control\" required formControlName=\"level\">\r\n                        <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                            {{ level }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"availableSpaces && !inputZone\">\r\n                    <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\">\r\n                        <option *ngFor=\"let space of availableSpaces\" [ngValue]=\"space.id\">\r\n                            {{ space.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                    {{ 'No locations available' | translate}}\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"inputZone\">\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"inputZone.space.name\" disabled>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}*</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"zonesForSpace && zonesForSpace.length > 0 && !inputZone\">\r\n                    <select class=\"form-control\" required formControlName=\"zone\">\r\n                        <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"zonesForSpace && zonesForSpace.length === 0 && !inputZone\">\r\n                    <p class=\"warning col-form-label\">{{\"No Museum Zones found for this location\"| translate}}</p>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"inputZone\">\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"inputZone.name\" disabled>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n                <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                    <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}}\r\n                    </p>\r\n                    <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">{{'No hashtags created for this\r\n                        location' | translate}} </p>\r\n                    <div *ngIf=\"availableHashtags.length > 0\">\r\n                        <ul class=\"keywordsDisplay no-border\">\r\n                            <div class=\"keywordsdisplayContainer\">\r\n                                <li [class]=\"addedHashtags.includes(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                    *ngFor=\"let hashtag of availableHashtags\" (click)=\"onHashtagClick(hashtag)\"\r\n                                    style=\"cursor: pointer;\"\r\n                                    ngbTooltip=\"{{addedHashtags.includes(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                    {{hashtag.name}}</li>\r\n                            </div>\r\n                        </ul>\r\n                        <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                        <ul class=\"keywordsDisplay\">\r\n                            <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                                <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}</li>\r\n                            </div>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-sm-8\" *ngIf=\"!spaceID.value\">\r\n                    <p class=\"keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Start Date' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"startDate\" ngbDatepicker\r\n                        #d1=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class=\"input-group-append\">\r\n                        <button class=\"btn btn-outline-secondary calendar\" (click)=\"d1.toggle()\" type=\"button\"></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'Start Time' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\">\r\n                    </ngb-timepicker>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'End Date' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" [(ngModel)]=\"endDate\" ngbDatepicker\r\n                        #d2=\"ngbDatepicker\" [ngModelOptions]=\"{standalone: true}\">\r\n                    <div class=\"input-group-append\">\r\n                        <button class=\"btn btn-outline-secondary calendar\" (click)=\"d2.toggle()\" type=\"button\"></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group row\">\r\n                <label class=\"col-sm-4 col-form-label\">{{'End Time' | translate}}</label>\r\n                <div class=\"input-group col-sm-8\">\r\n                    <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill action-button\"\r\n                [disabled]=\"this.working || form.invalid\">{{'Save' | translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' | translate}}</button>\r\n        </div>\r\n\r\n    </form>\r\n</div>", styles: [".form-container{margin:2rem 0rem}.form-container .btn-control-div .btn{width:8rem}.warning{margin:0;color:red}.keywordsDisplay{min-height:40px}.keywordsRules{margin-bottom:2px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.ActivatedRoute }, { type: i2.FormBuilder }, { type: i1.BaseUserService }, { type: i1.SpaceService }, { type: i1.ZoneService }, { type: i4.Location }, { type: i1.HashtagService }, { type: i3.TranslateService }, { type: i1.TemplateService }]; }, propDecorators: { currentOrg: [{
+                type: Input
+            }], editTemplate: [{
+                type: Input
+            }], zoneID: [{
+                type: Input
+            }], updatedTemplate: [{
+                type: Output
+            }], createdTemplate: [{
+                type: Output
+            }] } });
+
+class CreateBatchComponent {
+    constructor(missionService, userService, translate) {
+        this.missionService = missionService;
+        this.userService = userService;
+        this.translate = translate;
+        this.createdMissions = new EventEmitter();
+        this.addedEmails = [];
+        this.working = false;
+    }
+    ngOnInit() { }
+    onAddEmail(value) {
+        if (value) {
+            if (validEmail(value)) {
+                this.addedEmails.push(value);
+            }
+            else {
+                alert("Please, enter a valid email address");
+            }
+        }
+    }
+    onDelete(index) {
+        this.addedEmails.splice(index, 1);
+    }
+    onCancel() {
+        this.createdMissions.emit(null);
+    }
+    async onCreateMissions() {
+        const createdMissions = [];
+        let user;
+        this.working = true;
+        await Promise.all(this.addedEmails.map(async (mail) => {
+            user = await this.userService.profileForMail(mail);
+            if (!user) {
+                try {
+                    const profile = await this.userService.createUserAWSandProfile({
+                        email: mail,
+                        lastName: mail,
+                        firstName: "",
+                        phone: "",
+                    }, true);
+                    user = profile;
+                }
+                catch (error) {
+                    alert(`Error creating users: ${this.translate.instant(error)}`);
+                    this.working = false;
+                    return;
+                }
+            }
+            if (user) {
+                const missionInput = {
+                    organisationID: this.template.organisationID,
+                    orderedOrganisationID: this.template.organisationID,
+                    level: this.template.level,
+                    role: RoleStatus.VISITOR_MUSEUM,
+                    description: "Generated from template",
+                    userID: user.id,
+                    startDateTime: this.template.startDateTime,
+                    endDateTime: this.template.endDateTime,
+                    spaceID: this.template.spaceID,
+                    zoneID: this.template.zoneID,
+                    templateMissionID: this.template.id,
+                    hashtags: this.template.hashtags,
+                };
+                const mission = await this.missionService.create(missionInput);
+                createdMissions.push(mission);
+            }
+        }));
+        this.working = false;
+        this.createdMissions.emit(createdMissions);
+        this.addedEmails = [];
+    }
+    async handleFileInput(eventTarget) {
+        const files = eventTarget.files;
+        const uploaded = files.item(0);
+        if (uploaded.name.includes(".csv")) {
+            Papa.parse(uploaded, {
+                complete: function onComplete(results) {
+                    for (const mail of results.data) {
+                        this.addedEmails.push(mail[0]);
+                    }
+                    console.log(this.addedEmails);
+                    // eslint-disable-next-line no-extra-bind
+                }.bind(this),
+            });
+        }
+        else {
+            alert("Not a csv file");
+        }
+    }
+}
+CreateBatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CreateBatchComponent, deps: [{ token: i1.MissionService }, { token: i1.BaseUserService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+CreateBatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CreateBatchComponent, selector: "lib-create-batch", inputs: { template: "template" }, outputs: { createdMissions: "createdMissions" }, ngImport: i0, template: "<div>\r\n    <h4>{{'Add email address' | translate}}</h4>\r\n    <div class=\"row\">\r\n        <input class=\"form-control custom-form\" #box (keyup.enter)=\"onAddEmail(box.value); box.value=''\"\r\n            placeholder=\"me@example.com\">\r\n        <div class=\"outer_circle\" style='margin-left: 1.1em;'>\r\n            <button id='btn-icon' (click)=\"onAddEmail(box.value); box.value=''\"></button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n            <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event.target)\" />\r\n            {{'Upload from csv' | translate}}</label>\r\n    </div>\r\n\r\n    <ul *ngIf=\"addedEmails.length > 0\">\r\n        <li class=\"list_item\" *ngFor=\"let mail of addedEmails; index as index\">{{mail}}\r\n            <div class=\"icon-container\" (click)=\"onDelete(index)\">\r\n                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n            </div>\r\n        </li>\r\n    </ul>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n        <lib-loader></lib-loader>\r\n    </div>\r\n    <div class=\"row action-button-container\">\r\n        <button class=\"btn btn-outline-primary rounded-pill mr-2 mt-3 action-button\" (click)=\"onCreateMissions()\">\r\n            {{'Create users' | translate}}</button>\r\n        <button class=\"btn btn-outline-primary rounded-pill mr-2 mt-3 action-button\" (click)=\"onCancel()\">\r\n            {{'Cancel' | translate}}</button>\r\n    </div>\r\n\r\n</div>", styles: ["#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.custom-form{width:80%}h4{color:var(--smarterplan-primary)}.pointer{cursor:pointer}.list_item{display:flex;font-size:1.1em}.icon-container{cursor:pointer;margin-left:5px}input[type=file]{display:none}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CreateBatchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-create-batch', template: "<div>\r\n    <h4>{{'Add email address' | translate}}</h4>\r\n    <div class=\"row\">\r\n        <input class=\"form-control custom-form\" #box (keyup.enter)=\"onAddEmail(box.value); box.value=''\"\r\n            placeholder=\"me@example.com\">\r\n        <div class=\"outer_circle\" style='margin-left: 1.1em;'>\r\n            <button id='btn-icon' (click)=\"onAddEmail(box.value); box.value=''\"></button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n            <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event.target)\" />\r\n            {{'Upload from csv' | translate}}</label>\r\n    </div>\r\n\r\n    <ul *ngIf=\"addedEmails.length > 0\">\r\n        <li class=\"list_item\" *ngFor=\"let mail of addedEmails; index as index\">{{mail}}\r\n            <div class=\"icon-container\" (click)=\"onDelete(index)\">\r\n                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n            </div>\r\n        </li>\r\n    </ul>\r\n    <div class=\"d-flex justify-content-center\" *ngIf=\"working\">\r\n        <lib-loader></lib-loader>\r\n    </div>\r\n    <div class=\"row action-button-container\">\r\n        <button class=\"btn btn-outline-primary rounded-pill mr-2 mt-3 action-button\" (click)=\"onCreateMissions()\">\r\n            {{'Create users' | translate}}</button>\r\n        <button class=\"btn btn-outline-primary rounded-pill mr-2 mt-3 action-button\" (click)=\"onCancel()\">\r\n            {{'Cancel' | translate}}</button>\r\n    </div>\r\n\r\n</div>", styles: ["#btn-icon{width:30px;height:30px;background:url(../../../../assets/icons/plus.svg);border:none;vertical-align:middle}#btn-icon:hover{background:url(../../../../assets/icons/plus-over.svg)}#btn-icon[disabled]:hover{background:url(../../../../assets/icons/plus.svg)}.outer_circle{background-color:#ebebeb;border-radius:50%;width:32px;height:32px;padding:1px;margin-left:5px}.custom-form{width:80%}h4{color:var(--smarterplan-primary)}.pointer{cursor:pointer}.list_item{display:flex;font-size:1.1em}.icon-container{cursor:pointer;margin-left:5px}input[type=file]{display:none}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MissionService }, { type: i1.BaseUserService }, { type: i3.TranslateService }]; }, propDecorators: { template: [{
+                type: Input
+            }], createdMissions: [{
+                type: Output
+            }] } });
+
+class VisitorComponent {
+    constructor(userService, missionService, router, translate, spaceService, zoneService, modalService, templateService) {
+        this.userService = userService;
+        this.missionService = missionService;
+        this.router = router;
+        this.translate = translate;
+        this.spaceService = spaceService;
+        this.zoneService = zoneService;
+        this.modalService = modalService;
+        this.templateService = templateService;
+        this.editing = false;
+        this.creating = false;
+        this.isAddingBatch = false;
+        this.allZoneTemplatesMap = new Map(); // zone=>its templates
+        this.allTemplateMissionsMap = new Map(); // templateID, its derived Missions
+        this.detailsForZones = [];
+        this.csvHeaders = [
+            "email",
+            "user_status",
+            "zone",
+            "location",
+            "start_date_time",
+            "end_date_time",
+            "access_level",
+        ];
+        this.loading = false;
+        this.toDuplicate = false;
+        this.userService.isChanged.subscribe(() => this.setup());
+    }
+    ngOnInit() {
+        this.setup();
+    }
+    setup() {
+        this.setupUser();
+        this.setZonesTemplates();
+    }
+    async setZonesTemplates() {
+        if (!this.currentOrg) {
+            return;
+        }
+        this.loading = true;
+        this.allZoneTemplatesMap = new Map();
+        this.allTemplateMissionsMap = new Map();
+        let locations = this.spaceService.locationsForUser;
+        if (locations.length === 0) {
+            locations = await this.spaceService.getLocationsForCurrentUser();
+        }
+        await Promise.all(locations.map(async (space) => {
+            let zones = await this.zoneService.getZonesBySpace(space.id);
+            zones = zones.filter((zone) => zone.isMuseumVisitZone);
+            await Promise.all(zones.map(async (zone) => {
+                const visitorsMissions = await this.missionService.getMissionsByZoneByRole(zone.id, RoleStatus.VISITOR_MUSEUM);
+                let templates = await this.templateService.getTemplatesByZone(zone.id);
+                templates = templates.filter((template) => !template.deletedAt);
+                templates = templates.sort((a, b) => 
+                // @ts-ignore
+                // eslint-disable-next-line prettier/prettier
+                new Date(b.startDateTime) - new Date(a.startDateTime));
+                for (const template of templates) {
+                    const missionsFromTemplate = visitorsMissions.filter((mis) => mis.templateMissionID === template.id);
+                    this.allTemplateMissionsMap.set(template.id, missionsFromTemplate);
+                }
+                this.allZoneTemplatesMap.set(zone, templates);
+            }));
+        }));
+        // sort list by zone name alphabetically
+        this.allZoneTemplatesMapFiltered =
+            new Map([...this.allZoneTemplatesMap.entries()].sort((a, b) => a[0].name.localeCompare(b[0].name)));
+        this.loading = false;
+    }
+    setupUser() {
+        this.currentOrg = this.userService.currentOrganisation();
+    }
+    onCreateTemplate() {
+        this.creating = true;
+    }
+    async onDeleteMission(mission) {
+        await this.missionService.softDeleteMission(mission.id);
+        this.setZonesTemplates();
+    }
+    async onEditTemplate(template) {
+        this.editing = true;
+        this.templateToEdit = template;
+    }
+    onUpdatedEvent(isAdded) {
+        this.editing = false;
+        this.templateToEdit = null;
+        this.isAddingBatch = false;
+        this.chosenTemplate = null;
+        if (isAdded) {
+            this.setZonesTemplates();
+        }
+    }
+    async onUpdatedTemplate(template) {
+        this.loading = true;
+        this.editing = false;
+        this.templateToEdit = null;
+        if (template) {
+            if (this.toDuplicate) {
+                // create new template
+                delete template.id;
+                await this.templateService.create(template);
+                this.toDuplicate = false;
+                await this.setZonesTemplates();
+                return;
+            }
+            await this.templateService.update(template);
+            await this.setZonesTemplates();
+            // update related Missions
+            const missionsForTemplate = await this.missionService.getMissionsByTemplate(template.id);
+            await Promise.all(missionsForTemplate.map(async (mission) => {
+                const missionUpdate = {
+                    id: mission.id,
+                    level: template.level,
+                    startDateTime: template.startDateTime,
+                    endDateTime: template.endDateTime,
+                    locale: template.locale,
+                    zoneID: template.zoneID,
+                    spaceID: template.spaceID,
+                    hashtags: template.hashtags,
+                };
+                await this.missionService.update(missionUpdate);
+            }));
+        }
+        this.loading = false;
+    }
+    async onCreatedTemplate(template) {
+        this.loading = true;
+        this.creating = false;
+        if (template) {
+            await this.templateService.create(template);
+            this.setZonesTemplates();
+        }
+        this.loading = false;
+    }
+    onToggleMissionsForZone(zoneID) {
+        if (this.detailsForZones.includes(zoneID)) {
+            const index = this.detailsForZones.indexOf(zoneID);
+            this.detailsForZones.splice(index, 1);
+        }
+        else {
+            this.detailsForZones.push(zoneID);
+        }
+    }
+    onToggleTemplateDetails(template) {
+        this.templateShowing =
+            this.templateShowing === template.id ? null : template.id;
+    }
+    onAddNewTemplateToZone(zone) {
+        this.zoneIDForNewTemplate = zone.id;
+        this.creating = true;
+    }
+    async onArchiveTemplate(template) {
+        const message = this.translate.instant("confirm.archiveTemplate");
+        if (window.confirm(message)) {
+            const missionsToDelete = this.allTemplateMissionsMap.get(template.id);
+            await Promise.all(missionsToDelete.map(async (mission) => {
+                await this.missionService.softDeleteMission(mission.id);
+            }));
+            await this.templateService.softDelete(template.id);
+            this.setZonesTemplates();
+        }
+    }
+    onGenerateBatch(template) {
+        this.chosenTemplate = template;
+        this.isAddingBatch = true;
+    }
+    generateCSVUsers(template) {
+        const data = [];
+        for (const mission of this.allTemplateMissionsMap.get(template.id)) {
+            const user = new ProfileEntity(mission.user);
+            data.push([
+                user.email,
+                mission.user.status,
+                mission.zone.name,
+                mission.space.name,
+                mission.startDateTime,
+                mission.endDateTime,
+                mission.level,
+            ]);
+        }
+        return data;
+    }
+    async onSendInvitation(template) {
+        await Promise.all(this.allTemplateMissionsMap
+            .get(template.id)
+            .map(async (mission) => {
+            if (mission.emailStatus !== EmailStatus.SENT) {
+                await this.missionService.update({
+                    id: mission.id,
+                    emailStatus: EmailStatus.CREATION_TO_DELIVER,
+                });
+            }
+        }));
+    }
+    async onSendUpdate(template) {
+        await Promise.all(this.allTemplateMissionsMap
+            .get(template.id)
+            .map(async (mission) => {
+            await this.missionService.update({
+                id: mission.id,
+                emailStatus: EmailStatus.UPDATE_TO_DELIVER,
+            });
+        }));
+    }
+    async onCancelTemplate(template) {
+        const message = this.translate.instant("confirm.cancelTemplate");
+        if (window.confirm(message)) {
+            await Promise.all(this.allTemplateMissionsMap
+                .get(template.id)
+                .map(async (mission) => {
+                await this.missionService.update({
+                    id: mission.id,
+                    emailStatus: EmailStatus.CANCELLATION_TO_DELIVER,
+                    deletedAt: Date.now(),
+                });
+            }));
+        }
+    }
+    applyResultsSearchBar(results) {
+        this.allZoneTemplatesMapFiltered = results || this.allZoneTemplatesMap;
+    }
+    onDeleteUsers(mis) {
+        this.currentTemplateUsers = [];
+        for (const mission of this.allTemplateMissionsMap.get(mis.id)) {
+            this.currentTemplateUsers.push({
+                mission,
+                profile: new ProfileEntity(mission.user),
+                checked: false,
+                index: this.allTemplateMissionsMap.get(mis.id).indexOf(mission),
+            });
+        }
+        this.modalRef = this.modalService.open(this.modal);
+    }
+    /**
+     * Deletes mission of the user and checks if can hard delete the Profile (no other missions)
+     */
+    async onDeleteChosen() {
+        const listToDelete = this.currentTemplateUsers.filter((object) => object.checked);
+        await Promise.all(listToDelete.map(async (object) => {
+            await this.missionService.softDeleteMission(object.mission.id);
+            await this.userService.softDeleteUser(object.profile.id);
+            this.allTemplateMissionsMap
+                .get(object.mission.templateMissionID)
+                .splice(object.index, 1);
+        }));
+        this.modalRef.close();
+    }
+    onDuplicateTemplate(template) {
+        this.editing = true;
+        this.templateToEdit = template;
+        this.toDuplicate = true;
+    }
+    async onCleanTimeTemplate(template) {
+        await this.templateService.update({
+            id: template.id,
+            realEndedAt: null,
+            realStartedAt: null
+        });
+        await this.setZonesTemplates();
+    }
+}
+VisitorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitorComponent, deps: [{ token: i1.BaseUserService }, { token: i1.MissionService }, { token: i2$1.Router }, { token: i3.TranslateService }, { token: i1.SpaceService }, { token: i1.ZoneService }, { token: i4$1.NgbModal }, { token: i1.TemplateService }], target: i0.ɵɵFactoryTarget.Component });
+VisitorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VisitorComponent, selector: "lib-visitor", viewQueries: [{ propertyName: "modal", first: true, predicate: ["deleteUsers"], descendants: true }], ngImport: i0, template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n        <h3>{{'Museum Visitors' | translate}}</h3>\r\n        <!-- <app-search-bar [searchable]=\"allZoneTemplatesMap\" objectType=\"TEMPLATE\"\r\n            (searchEvent)=\"applyResultsSearchBar($event)\">\r\n        </app-search-bar> -->\r\n        <hr>\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"col-md-8 col-lg-7\">\r\n            <div class=\"row ml-0 mb-2\">\r\n                <h4 class=\"header-small\">{{'Itineraries' | translate}}</h4>\r\n            </div>\r\n            <div class=\"row ml-0 mb-2\" *ngIf=\"!editing && !creating\">\r\n                <button class=\"btn btn-outline-primary rounded-pill ml-3 add-button\" (click)=\"onCreateTemplate()\">\r\n                    {{'Create template for new itinerary' | translate}}</button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n                <lib-loader></lib-loader>\r\n            </div>\r\n            <div *ngIf=\"!editing && !creating\">\r\n                <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item\" *ngFor=\"let pair of allZoneTemplatesMapFiltered | keyvalue\">\r\n                        <h4>{{pair.key.name}} <span style=\"font-size:0.8em\"> - {{pair.key.space.name}}</span> </h4>\r\n                        <div class=\"d-flex justify-content-between align-items-center\"\r\n                            (click)=\"onToggleMissionsForZone(pair.key.id)\">\r\n                            <ng-container *ngIf=\"pair.value.length <= 1\">\r\n                                {{pair.value.length}} {{'visit template found' | translate}}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"pair.value.length > 1\">\r\n                                {{pair.value.length}} {{'visit templates found' | translate}}\r\n                            </ng-container>\r\n                            <lib-chevron [conditionShowing]=\"detailsForZones.includes(pair.key.id)\"></lib-chevron>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"detailsForZones.includes(pair.key.id)\">\r\n                            <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3 ml-2\"\r\n                                (click)=\"onAddNewTemplateToZone(pair.key)\">{{'Add new template' | translate}}</button>\r\n\r\n                            <ul class=\"container-fluid list-group list-group-flush\">\r\n                                <li class=\"list-group-item\" *ngFor=\"let template of pair.value\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center\"\r\n                                        (click)=\"onToggleTemplateDetails(template)\">\r\n                                        <h5>{{template.title}}</h5>\r\n                                        <lib-chevron [conditionShowing]=\"templateShowing === template.id\"></lib-chevron>\r\n                                    </div>\r\n                                    <div *ngIf=\"templateShowing === template.id\">\r\n                                        <ul class=\"list-group list-group-flush\">\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Description' | translate }}:\r\n                                                {{ template.description}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Language' | translate }}:\r\n                                                {{ template.locale ? template.locale : ('Not applicable' | translate)}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\"\r\n                                                *ngIf=\"template.hashtags && template.hashtags.length> 0\">\r\n                                                {{'Hashtags' | translate}}:\r\n                                                <ul class=\"keywordsDisplay no-border\">\r\n                                                    <div class=\"keywordsdisplayContainer\"\r\n                                                        *ngIf=\"template.hashtags.length> 0\">\r\n                                                        <li class=\"keywordsItem\" *ngFor=\"let hashtag of template.hashtags\">{{\r\n                                                            hashtag | hashtagFromID | async }}</li>\r\n                                                    </div>\r\n                                                </ul>\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Access level' | translate }}:\r\n                                                {{ template.level}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Planned at' | translate }} :\r\n                                                {{ template.startDateTime ? (template.startDateTime |\r\n                                                timeDateString:\"day_time_zone\" | async) :\r\n                                                \"No data\" | translate }} - \r\n                                                {{ template.endDateTime ?\r\n                                                (template.endDateTime | timeDateString:\"day_time_zone\" | async) : \"No data\" |\r\n                                                translate}}\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\">\r\n                                                {{'Effective start/end time ' | translate }}: \r\n                                                {{ template.realStartedAt ? (template.realStartedAt |\r\n                                                    timeDateString:\"day_time_zone\" | async) : ('No data' | translate)}} / \r\n                                                    {{ template.realEndedAt ? (template.realEndedAt |\r\n                                                        timeDateString:\"day_time_zone\" | async) : ('No data' | translate)}}\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\"\r\n                                                *ngIf=\"allTemplateMissionsMap.get(template.id)\">\r\n                                                {{'Visitors created' |\r\n                                                translate}}:{{allTemplateMissionsMap.get(template.id).length}}\r\n                                                <lib-csv-export [headers]=\"csvHeaders\" [title]=\"'Users'\"\r\n                                                    buttonLabel=\"Download users\" [rowsInput]=\"generateCSVUsers(template)\">\r\n                                                </lib-csv-export>\r\n                                            </li>\r\n                                            \r\n                                        </ul>\r\n                                        <div class=\"action-button-container\">\r\n                                            <div class=\"d-inline-block mr-2 action-button\" ngbDropdown\r\n                                                #myDrop=\"ngbDropdown\">\r\n                                                <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\"\r\n                                                    ngbDropdownToggle>{{'Manage users' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\r\n                                                    <button (click)=\"onGenerateBatch(template)\" ngbDropdownItem>\r\n                                                        {{'Create users from this template' | translate}}</button>\r\n                                                    <button (click)=\"onSendInvitation(template)\" ngbDropdownItem>\r\n                                                        {{'Send invitation to all users' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onSendUpdate(template)\" ngbDropdownItem>\r\n                                                        {{'Send update to all users' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onDeleteUsers(template)\" ngbDropdownItem>\r\n                                                        {{'Remove users' | translate}}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"d-inline-block mr-2 action-button\" ngbDropdown\r\n                                                #myDrop2=\"ngbDropdown\">\r\n                                                <button class=\"btn btn-label-file rounded-pill\" id=\"dropdown2\"\r\n                                                    ngbDropdownToggle>{{'Manage template' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdown2\">\r\n                                                    <button (click)=\"onEditTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Edit template' | translate}}</button>\r\n                                                    <button (click)=\"onCleanTimeTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Clean effective times' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onArchiveTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Archive template' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onCancelTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Cancel visit' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onDuplicateTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Duplicate' | translate}}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <!-- <button type=\"button\" class=\"btn btn-primary rounded-pill mr-2 ml-auto\"\r\n                                            (click)=\"onEdit(mis)\">\r\n                                            {{'Edit' | translate}}</button>\r\n                                        <button class=\"btn btn-primary rounded-pill mt-3 mb-3 ml-auto\"\r\n                                            (click)=\"onArchiveTemplate(mis)\">{{'Archive' | translate}}</button> -->\r\n                                    </div>\r\n\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div *ngIf=\"editing\">\r\n                <lib-template [editTemplate]=\"templateToEdit\" [currentOrg]=\"currentOrg\"\r\n                    (updatedTemplate)=\"onUpdatedTemplate($event)\"></lib-template>\r\n            </div>\r\n            <div *ngIf=\"creating\">\r\n                <lib-template [currentOrg]=\"currentOrg\" [zoneID]=\"zoneIDForNewTemplate\"\r\n                    (createdTemplate)=\"onCreatedTemplate($event)\"></lib-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"col-md-4 col-lg-5\" *ngIf=\"isAddingBatch\">\r\n            <lib-create-batch [template]=\"chosenTemplate\" (createdMissions)=\"onUpdatedEvent($event)\"></lib-create-batch>\r\n        </div>\r\n        <ng-template #deleteUsers let-modal>\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\" id=\"modal-basic-title\">{{\"Delete users\" | translate}}\r\n                </h4>\r\n                <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modalRef.close()\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"column align-items-center\">\r\n                    <div class=\"row\" style=\"padding: 0 1.25rem;\">\r\n                        <ul class=\"container-fluid list-group list-group-flush\">\r\n                            <li class=\"list-group-item\" *ngFor=\"let object of currentTemplateUsers\">\r\n                                <input type=\"checkbox\" [(ngModel)]=\"object.checked\"> {{object.profile.email}}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n\r\n                    <div class=\"row\" style=\"padding: 1.25rem;\">\r\n                        <button class=\"btn btn-outline-primary rounded-pill mr-4\" (click)=\"onDeleteChosen()\">{{\"Apply\" |\r\n                            translate}}\r\n                        </button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"modalRef.close()\">{{\"Cancel\" |\r\n                            translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [".add-button{width:-moz-fit-content;width:fit-content;margin-left:.5rem}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px!important}\n"], components: [{ type: i1.LoaderComponent, selector: "lib-loader" }, { type: ChevronComponent, selector: "lib-chevron", inputs: ["conditionShowing"] }, { type: i1.CsvExportComponent, selector: "lib-csv-export", inputs: ["headers", "rowsInput", "getRows", "title", "buttonLabel"] }, { type: TemplateComponent, selector: "lib-template", inputs: ["currentOrg", "editTemplate", "zoneID"], outputs: ["updatedTemplate", "createdTemplate"] }, { type: CreateBatchComponent, selector: "lib-create-batch", inputs: ["template"], outputs: ["createdMissions"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe, "keyvalue": i4.KeyValuePipe, "async": i4.AsyncPipe, "hashtagFromID": i1.HashtagFromIdPipe, "timeDateString": i1.TimeDateToLocalStringPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VisitorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-visitor', template: "<div class=\"dashboard-tab\">\r\n    <div class=\"header-dashboard-tab\">\r\n        <h3>{{'Museum Visitors' | translate}}</h3>\r\n        <!-- <app-search-bar [searchable]=\"allZoneTemplatesMap\" objectType=\"TEMPLATE\"\r\n            (searchEvent)=\"applyResultsSearchBar($event)\">\r\n        </app-search-bar> -->\r\n        <hr>\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"col-md-8 col-lg-7\">\r\n            <div class=\"row ml-0 mb-2\">\r\n                <h4 class=\"header-small\">{{'Itineraries' | translate}}</h4>\r\n            </div>\r\n            <div class=\"row ml-0 mb-2\" *ngIf=\"!editing && !creating\">\r\n                <button class=\"btn btn-outline-primary rounded-pill ml-3 add-button\" (click)=\"onCreateTemplate()\">\r\n                    {{'Create template for new itinerary' | translate}}</button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\r\n                <lib-loader></lib-loader>\r\n            </div>\r\n            <div *ngIf=\"!editing && !creating\">\r\n                <ul class=\"list-group list-group-flush\">\r\n                    <li class=\"list-group-item\" *ngFor=\"let pair of allZoneTemplatesMapFiltered | keyvalue\">\r\n                        <h4>{{pair.key.name}} <span style=\"font-size:0.8em\"> - {{pair.key.space.name}}</span> </h4>\r\n                        <div class=\"d-flex justify-content-between align-items-center\"\r\n                            (click)=\"onToggleMissionsForZone(pair.key.id)\">\r\n                            <ng-container *ngIf=\"pair.value.length <= 1\">\r\n                                {{pair.value.length}} {{'visit template found' | translate}}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"pair.value.length > 1\">\r\n                                {{pair.value.length}} {{'visit templates found' | translate}}\r\n                            </ng-container>\r\n                            <lib-chevron [conditionShowing]=\"detailsForZones.includes(pair.key.id)\"></lib-chevron>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"detailsForZones.includes(pair.key.id)\">\r\n                            <button class=\"btn btn-outline-primary rounded-pill mt-3 mb-3 ml-2\"\r\n                                (click)=\"onAddNewTemplateToZone(pair.key)\">{{'Add new template' | translate}}</button>\r\n\r\n                            <ul class=\"container-fluid list-group list-group-flush\">\r\n                                <li class=\"list-group-item\" *ngFor=\"let template of pair.value\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center\"\r\n                                        (click)=\"onToggleTemplateDetails(template)\">\r\n                                        <h5>{{template.title}}</h5>\r\n                                        <lib-chevron [conditionShowing]=\"templateShowing === template.id\"></lib-chevron>\r\n                                    </div>\r\n                                    <div *ngIf=\"templateShowing === template.id\">\r\n                                        <ul class=\"list-group list-group-flush\">\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Description' | translate }}:\r\n                                                {{ template.description}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Language' | translate }}:\r\n                                                {{ template.locale ? template.locale : ('Not applicable' | translate)}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\"\r\n                                                *ngIf=\"template.hashtags && template.hashtags.length> 0\">\r\n                                                {{'Hashtags' | translate}}:\r\n                                                <ul class=\"keywordsDisplay no-border\">\r\n                                                    <div class=\"keywordsdisplayContainer\"\r\n                                                        *ngIf=\"template.hashtags.length> 0\">\r\n                                                        <li class=\"keywordsItem\" *ngFor=\"let hashtag of template.hashtags\">{{\r\n                                                            hashtag | hashtagFromID | async }}</li>\r\n                                                    </div>\r\n                                                </ul>\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Access level' | translate }}:\r\n                                                {{ template.level}}</li>\r\n                                            <li class=\"list-group-item bg-transparent\">{{'Planned at' | translate }} :\r\n                                                {{ template.startDateTime ? (template.startDateTime |\r\n                                                timeDateString:\"day_time_zone\" | async) :\r\n                                                \"No data\" | translate }} - \r\n                                                {{ template.endDateTime ?\r\n                                                (template.endDateTime | timeDateString:\"day_time_zone\" | async) : \"No data\" |\r\n                                                translate}}\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\">\r\n                                                {{'Effective start/end time ' | translate }}: \r\n                                                {{ template.realStartedAt ? (template.realStartedAt |\r\n                                                    timeDateString:\"day_time_zone\" | async) : ('No data' | translate)}} / \r\n                                                    {{ template.realEndedAt ? (template.realEndedAt |\r\n                                                        timeDateString:\"day_time_zone\" | async) : ('No data' | translate)}}\r\n                                            </li>\r\n                                            <li class=\"list-group-item bg-transparent\"\r\n                                                *ngIf=\"allTemplateMissionsMap.get(template.id)\">\r\n                                                {{'Visitors created' |\r\n                                                translate}}:{{allTemplateMissionsMap.get(template.id).length}}\r\n                                                <lib-csv-export [headers]=\"csvHeaders\" [title]=\"'Users'\"\r\n                                                    buttonLabel=\"Download users\" [rowsInput]=\"generateCSVUsers(template)\">\r\n                                                </lib-csv-export>\r\n                                            </li>\r\n                                            \r\n                                        </ul>\r\n                                        <div class=\"action-button-container\">\r\n                                            <div class=\"d-inline-block mr-2 action-button\" ngbDropdown\r\n                                                #myDrop=\"ngbDropdown\">\r\n                                                <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownManual\"\r\n                                                    ngbDropdownToggle>{{'Manage users' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdownManual\">\r\n                                                    <button (click)=\"onGenerateBatch(template)\" ngbDropdownItem>\r\n                                                        {{'Create users from this template' | translate}}</button>\r\n                                                    <button (click)=\"onSendInvitation(template)\" ngbDropdownItem>\r\n                                                        {{'Send invitation to all users' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onSendUpdate(template)\" ngbDropdownItem>\r\n                                                        {{'Send update to all users' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onDeleteUsers(template)\" ngbDropdownItem>\r\n                                                        {{'Remove users' | translate}}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"d-inline-block mr-2 action-button\" ngbDropdown\r\n                                                #myDrop2=\"ngbDropdown\">\r\n                                                <button class=\"btn btn-label-file rounded-pill\" id=\"dropdown2\"\r\n                                                    ngbDropdownToggle>{{'Manage template' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdown2\">\r\n                                                    <button (click)=\"onEditTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Edit template' | translate}}</button>\r\n                                                    <button (click)=\"onCleanTimeTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Clean effective times' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onArchiveTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Archive template' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onCancelTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Cancel visit' | translate}}\r\n                                                    </button>\r\n                                                    <button (click)=\"onDuplicateTemplate(template)\" ngbDropdownItem>\r\n                                                        {{'Duplicate' | translate}}\r\n                                                    </button>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <!-- <button type=\"button\" class=\"btn btn-primary rounded-pill mr-2 ml-auto\"\r\n                                            (click)=\"onEdit(mis)\">\r\n                                            {{'Edit' | translate}}</button>\r\n                                        <button class=\"btn btn-primary rounded-pill mt-3 mb-3 ml-auto\"\r\n                                            (click)=\"onArchiveTemplate(mis)\">{{'Archive' | translate}}</button> -->\r\n                                    </div>\r\n\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div *ngIf=\"editing\">\r\n                <lib-template [editTemplate]=\"templateToEdit\" [currentOrg]=\"currentOrg\"\r\n                    (updatedTemplate)=\"onUpdatedTemplate($event)\"></lib-template>\r\n            </div>\r\n            <div *ngIf=\"creating\">\r\n                <lib-template [currentOrg]=\"currentOrg\" [zoneID]=\"zoneIDForNewTemplate\"\r\n                    (createdTemplate)=\"onCreatedTemplate($event)\"></lib-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"col-md-4 col-lg-5\" *ngIf=\"isAddingBatch\">\r\n            <lib-create-batch [template]=\"chosenTemplate\" (createdMissions)=\"onUpdatedEvent($event)\"></lib-create-batch>\r\n        </div>\r\n        <ng-template #deleteUsers let-modal>\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\" id=\"modal-basic-title\">{{\"Delete users\" | translate}}\r\n                </h4>\r\n                <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modalRef.close()\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"column align-items-center\">\r\n                    <div class=\"row\" style=\"padding: 0 1.25rem;\">\r\n                        <ul class=\"container-fluid list-group list-group-flush\">\r\n                            <li class=\"list-group-item\" *ngFor=\"let object of currentTemplateUsers\">\r\n                                <input type=\"checkbox\" [(ngModel)]=\"object.checked\"> {{object.profile.email}}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n\r\n                    <div class=\"row\" style=\"padding: 1.25rem;\">\r\n                        <button class=\"btn btn-outline-primary rounded-pill mr-4\" (click)=\"onDeleteChosen()\">{{\"Apply\" |\r\n                            translate}}\r\n                        </button>\r\n                        <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"modalRef.close()\">{{\"Cancel\" |\r\n                            translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [".add-button{width:-moz-fit-content;width:fit-content;margin-left:.5rem}li.ml-4{margin-left:3rem}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }, { type: i1.MissionService }, { type: i2$1.Router }, { type: i3.TranslateService }, { type: i1.SpaceService }, { type: i1.ZoneService }, { type: i4$1.NgbModal }, { type: i1.TemplateService }]; }, propDecorators: { modal: [{
+                type: ViewChild,
+                args: ["deleteUsers"]
+            }] } });
+
+class AdminComponent {
+    constructor(userService) {
+        this.userService = userService;
+        this.isSmarterPlanUser = false;
+        this.isGuide = false;
+        this.userService.isChanged.subscribe((isChanged) => {
+            if (isChanged) {
+                this.isSmarterPlanUser = this.userService.isSPAdmin();
+            }
+        });
+    }
+    ngOnInit() {
+        this.isSmarterPlanUser = this.userService.isSPAdmin();
+        this.isGuide = this.userService.isGuide();
+    }
+    getIcon(path, isActive) {
+        const suffix = isActive ? "-over" : "";
+        return `/icons/${path.join("/")}${suffix}.svg`;
+    }
+}
+AdminComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminComponent, deps: [{ token: i1.BaseUserService }], target: i0.ɵɵFactoryTarget.Component });
+AdminComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AdminComponent, selector: "lib-admin", ngImport: i0, template: "<div class=\"container-fluid\">\n    <div class=\"row\">\n        <div class=\"d-none col-md-3 col-lg-2 d-md-block sidebar\">\n            <ul class=\"nav nav-pills flex-column\">\n                <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"/admin/users\" [routerLinkActive]=\"['active']\"\n                        #rlaUser=\"routerLinkActive\">\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaUser.isActive)\" />{{'Users' |\n                        translate}}</a></li>\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser\"><a class=\"nav-link\" routerLink=\"/admin/clients\"\n                        [routerLinkActive]=\"['active']\" #rlaOrganization=\"routerLinkActive\">\n                        <img class=\"big-icon\"\n                            [src]=\"getIcon(['menu', 'organisation'], rlaOrganization.isActive)\" />{{'Clients' |\n                        translate}}</a></li>\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser || isGuide\"><a class=\"nav-link\"\n                        routerLink=\"/admin/visitors\" [routerLinkActive]=\"['active']\" #rlaVisitor=\"routerLinkActive\">\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaVisitor.isActive)\" />\n                        {{'Museum Visitors' | translate }}</a></li>\n            </ul>\n        </div> <!-- ml-sm-auto -->\n        <main role=\"main\" class=\"col-12 col-md-9 col-lg-10 px-md-4\">\n            <router-outlet></router-outlet>\n        </main>\n    </div>\n</div>", styles: [""], directives: [{ type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-admin', template: "<div class=\"container-fluid\">\n    <div class=\"row\">\n        <div class=\"d-none col-md-3 col-lg-2 d-md-block sidebar\">\n            <ul class=\"nav nav-pills flex-column\">\n                <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"/admin/users\" [routerLinkActive]=\"['active']\"\n                        #rlaUser=\"routerLinkActive\">\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaUser.isActive)\" />{{'Users' |\n                        translate}}</a></li>\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser\"><a class=\"nav-link\" routerLink=\"/admin/clients\"\n                        [routerLinkActive]=\"['active']\" #rlaOrganization=\"routerLinkActive\">\n                        <img class=\"big-icon\"\n                            [src]=\"getIcon(['menu', 'organisation'], rlaOrganization.isActive)\" />{{'Clients' |\n                        translate}}</a></li>\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser || isGuide\"><a class=\"nav-link\"\n                        routerLink=\"/admin/visitors\" [routerLinkActive]=\"['active']\" #rlaVisitor=\"routerLinkActive\">\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaVisitor.isActive)\" />\n                        {{'Museum Visitors' | translate }}</a></li>\n            </ul>\n        </div> <!-- ml-sm-auto -->\n        <main role=\"main\" class=\"col-12 col-md-9 col-lg-10 px-md-4\">\n            <router-outlet></router-outlet>\n        </main>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }]; } });
+
+class GuideGuard {
+    constructor(userService, router) {
+        this.userService = userService;
+        this.router = router;
+    }
+    async canActivate(route, state) {
+        if (this.userService.isGuide() || this.userService.isSPAdmin()) {
+            return true;
+        }
+        return this.router.parseUrl("/notauthorized");
+    }
+}
+GuideGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GuideGuard, deps: [{ token: i1.BaseUserService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+GuideGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GuideGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GuideGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }, { type: i2$1.Router }]; } });
+
+class SpAdminGuard {
+    constructor(userService, router) {
+        this.userService = userService;
+        this.router = router;
+    }
+    canActivate() {
+        let canGo = false;
+        if (this.userService.cu) {
+            canGo = this.userService.isSPAdmin();
+        }
+        if (canGo) {
+            return true;
+        }
+        alert("You are not authorised to access this page");
+        this.router.navigate([""]);
+        return false;
+    }
+}
+SpAdminGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpAdminGuard, deps: [{ token: i1.BaseUserService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+SpAdminGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpAdminGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpAdminGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }, { type: i2$1.Router }]; } });
+
+const routes = [
+    {
+        path: "",
+        component: AdminComponent,
+        children: [
+            { path: "users", component: UserComponent },
+            {
+                path: "visitors",
+                children: [
+                    { path: "", component: VisitorComponent },
+                    { path: "template", component: TemplateComponent },
+                ],
+                canActivate: [GuideGuard]
+            },
+            {
+                path: "clients",
+                component: OrganisationComponent,
+                canActivate: [SpAdminGuard]
+            },
+            { path: "", redirectTo: "users", pathMatch: "full" },
+        ]
+    },
+];
+class AdminRoutingModule {
+}
+AdminRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdminRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminRoutingModule, imports: [i2$1.RouterModule], exports: [RouterModule] });
+AdminRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminRoutingModule, imports: [[RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdminRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class NameFromIdPipe {
+    constructor(userService) {
+        this.userService = userService;
+    }
+    async transform(userId) {
+        if (NameFromIdPipe.cache[userId] !== undefined) {
+            return new Promise((resolve) => {
+                resolve(NameFromIdPipe.cache[userId]);
+            });
+        }
+        const user = await this.userService.userFromUserID(userId);
+        // @ts-ignore
+        NameFromId.cache[userId] = `${user.displayName}`;
+        return NameFromIdPipe.cache[userId];
+    }
+}
+NameFromIdPipe.cache = {};
+NameFromIdPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NameFromIdPipe, deps: [{ token: i1.BaseUserService }], target: i0.ɵɵFactoryTarget.Pipe });
+NameFromIdPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NameFromIdPipe, name: "nameFromId" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NameFromIdPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nameFromId'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.BaseUserService }]; } });
+
+class NgxSmarterplanAdminModule {
+}
+NgxSmarterplanAdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSmarterplanAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminModule, declarations: [AdminComponent,
+        UserComponent,
+        VisitorComponent,
+        OrganisationComponent,
+        GuestLinkComponent,
+        ChevronComponent,
+        FormMissionComponent,
+        UserMissionFormComponent,
+        FormOrganisationComponent,
+        DetailOrganisationComponent,
+        CreateBatchComponent,
+        NameFromIdPipe,
+        TemplateComponent], imports: [ClipboardModule,
+        NgbModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxSmarterplanCoreModule, i3.TranslateModule, AdminRoutingModule] });
+NgxSmarterplanAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminModule, imports: [[
+            ClipboardModule,
+            NgbModule,
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxSmarterplanCoreModule,
+            TranslateModule.forChild({
+                extend: true
+            }),
+            AdminRoutingModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSmarterplanAdminModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AdminComponent,
+                        UserComponent,
+                        VisitorComponent,
+                        OrganisationComponent,
+                        GuestLinkComponent,
+                        ChevronComponent,
+                        FormMissionComponent,
+                        UserMissionFormComponent,
+                        FormOrganisationComponent,
+                        DetailOrganisationComponent,
+                        CreateBatchComponent,
+                        NameFromIdPipe,
+                        TemplateComponent,
+                    ],
+                    imports: [
+                        ClipboardModule,
+                        NgbModule,
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxSmarterplanCoreModule,
+                        TranslateModule.forChild({
+                            extend: true
+                        }),
+                        AdminRoutingModule
+                    ],
+                    exports: []
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-smarterplan-admin
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxSmarterplanAdminModule, NgxSmarterplanAdminService };
+//# sourceMappingURL=smarterplan-ngx-smarterplan-admin.mjs.map