@smarterplan/ngx-smarterplan-admin 0.1.34 → 0.1.35

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

@@ -3,7 +3,7 @@ import { Injectable, Component, Input, EventEmitter, Output, ViewChild, NgModule
 import * as i2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@smarterplan/ngx-smarterplan-core';
-import { RoleStatus, ProfileEntity, removeNullKeysFromObject, stringLocaleToEnum, enumToArray, Locale, LevelStatus, EmailStatus, getSignedFile, deleteFromS3, uploadFileToS3, filterUniqueArrayByID, waitUntil, DomainType, sortAlphabeticallyOnName, validEmail, NgxSmarterplanCoreModule } from '@smarterplan/ngx-smarterplan-core';
+import { RoleStatus, ProfileEntity, removeNullKeysFromObject, stringLocaleToEnum, enumToArray, Locale, LevelStatus, EmailStatus, getSignedFile, deleteFromS3, uploadFileToS3, filterUniqueArrayByID, waitUntil, DomainType, textValidator, noEmptyValidator, floatValidator, sortAlphabeticallyOnName, validEmail, NgxSmarterplanCoreModule } from '@smarterplan/ngx-smarterplan-core';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from '@angular/common';
@@ -1146,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
         }], 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) {
+    constructor(route, fb, userService, spaceService, zoneService, location, hashtagService, translate, templateService, validatorsService) {
         this.route = route;
         this.fb = fb;
         this.userService = userService;
@@ -1156,6 +1156,7 @@ class TemplateComponent {
         this.hashtagService = hashtagService;
         this.translate = translate;
         this.templateService = templateService;
+        this.validatorsService = validatorsService;
         this.updatedTemplate = new EventEmitter();
         this.createdTemplate = new EventEmitter();
         this.working = false;
@@ -1198,42 +1199,48 @@ class TemplateComponent {
         }
     }
     initForm() {
+        let startDate = '';
+        let endDate = '';
         if (this.editTemplate) {
+            if (this.editTemplate.startDateTime) {
+                const date = DateTime.fromISO(this.editTemplate.startDateTime);
+                this.missionTimeStart = (date.hour * 60 + date.minute) * 60 * 1000;
+                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;
+                endDate = date.toMillis() - this.missionTimeEnd;
+            }
             this.form = this.fb.group({
-                title: [this.editTemplate.title, Validators.required],
+                title: [this.editTemplate.title, [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
                 level: [this.editTemplate.level],
                 organisationID: [this.editTemplate.organisationID],
                 space: [this.editTemplate.spaceID, Validators.required],
-                description: [this.editTemplate.description],
+                description: [this.editTemplate.description, [textValidator(), noEmptyValidator()]],
                 zone: [
                     this.editTemplate.zoneID,
                     Validators.required,
                 ],
                 locale: [this.editTemplate.locale],
+                startDate: [startDate, [floatValidator()]],
+                endDate: [endDate, [floatValidator()]],
             });
-            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: [null, Validators.required],
+                title: [null, [Validators.required, Validators.maxLength(255), textValidator(), noEmptyValidator()]],
                 level: [LevelStatus.MINIMUM],
                 organisationID: this.currentOrg.id,
                 space: [this.inputZone ? this.inputZone.spaceID : null, Validators.required],
-                description: [null],
+                description: ['', [textValidator(), noEmptyValidator()]],
                 zone: [
                     this.inputZone ? this.inputZone.id : null,
                     Validators.required,
                 ],
                 locale: [this.currentLocale],
+                startDate: [startDate, [floatValidator()]],
+                endDate: [endDate, [floatValidator()]],
             });
         }
     }
@@ -1242,13 +1249,14 @@ class TemplateComponent {
         const formValue = this.form.getRawValue();
         let startDateString;
         let endDateString;
-        if (this.startDate) {
-            const dateHourStartNumber = this.startDate + this.missionTimeStart;
+        if (formValue.startDate) {
+            const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
             const startDate = DateTime.fromMillis(dateHourStartNumber);
             startDateString = startDate.toISO();
+            console.log(startDateString);
         }
-        if (this.endDate) {
-            const dateHourEndNumber = this.endDate + this.missionTimeEnd;
+        if (formValue.endDate) {
+            const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
             const endDate = DateTime.fromMillis(dateHourEndNumber);
             endDateString = endDate.toISO();
         }
@@ -1335,12 +1343,12 @@ class TemplateComponent {
         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\"\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\" 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\" 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\">\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 [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.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: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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 } });
+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 }, { token: i1.ValidatorsService }], 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]=\"validatorsService.isControlError(form.controls['title'])\"\r\n                        formControlName=\"title\" data-testid=\"form-template-title\">\r\n                    <div class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-title-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['title'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['title'])\"></span>\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\">{{'Description' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <textarea class=\"form-control\" formControlName=\"description\" style=\"height:200px\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['description'])\"\r\n                        data-testid=\"form-template-description\"\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-description-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['description'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['description'])\"></span>\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\">{{'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\" 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\" formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                        data-testid=\"form-template-space\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['space'])\">\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                        <span data-testid=\"form-template-space-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['space'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['space'])\"></span>\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 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                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['zone'])\"\r\n                        data-testid=\"form-template-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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-zone-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['zone'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['zone'])\"></span>\r\n                    </div>\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\">\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 [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\" formControlName=\"startDate\" ngbDatepicker\r\n                        data-testid=\"form-template-startDate\" #d1=\"ngbDatepicker\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['startDate'])\">\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-startDate-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['startDate'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['startDate'])\"></span>\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\" formControlName=\"endDate\" ngbDatepicker\r\n                        data-testid=\"form-template-endDate\" #d2=\"ngbDatepicker\" [class.is-invalid]=\"validatorsService.isControlError(form.controls['endDate'])\">\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-endDate-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['endDate'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['endDate'])\"></span>\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\" data-testid=\"form-template-submit-btn\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\" data-testid=\"form-template-cancel-btn\"\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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\"\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\" 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\" 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\">\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 [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: [{
+            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]=\"validatorsService.isControlError(form.controls['title'])\"\r\n                        formControlName=\"title\" data-testid=\"form-template-title\">\r\n                    <div class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-title-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['title'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['title'])\"></span>\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\">{{'Description' | translate}}</label>\r\n                <div class=\"col-sm-8\">\r\n                    <textarea class=\"form-control\" formControlName=\"description\" style=\"height:200px\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['description'])\"\r\n                        data-testid=\"form-template-description\"\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-description-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['description'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['description'])\"></span>\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\">{{'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\" 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\" formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                        data-testid=\"form-template-space\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['space'])\">\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                        <span data-testid=\"form-template-space-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['space'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['space'])\"></span>\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 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                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['zone'])\"\r\n                        data-testid=\"form-template-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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-zone-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['zone'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['zone'])\"></span>\r\n                    </div>\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\">\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 [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\" formControlName=\"startDate\" ngbDatepicker\r\n                        data-testid=\"form-template-startDate\" #d1=\"ngbDatepicker\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['startDate'])\">\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-startDate-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['startDate'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['startDate'])\"></span>\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\" formControlName=\"endDate\" ngbDatepicker\r\n                        data-testid=\"form-template-endDate\" #d2=\"ngbDatepicker\" [class.is-invalid]=\"validatorsService.isControlError(form.controls['endDate'])\">\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 class=\"invalid-feedback\">\r\n                        <span data-testid=\"form-template-endDate-invalid\"\r\n                            [translate]=\"validatorsService.getError(form.controls['endDate'])\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['endDate'])\"></span>\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\" data-testid=\"form-template-submit-btn\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" [disabled]=\"this.working\" data-testid=\"form-template-cancel-btn\"\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 }, { type: i1.ValidatorsService }]; }, propDecorators: { currentOrg: [{
                 type: Input
             }], editTemplate: [{
                 type: Input
@@ -1715,10 +1723,10 @@ class VisitorComponent {
     }
 }
 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 } });
+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                    data-testid=\"new-museum-template-btn\">\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 data-testid=\"open-museum-zone-btn\" [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 data-testid=\"open-museum-template-btn\" [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)}}\r\n                                            </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\"\r\n                                                            *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\r\n                                                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\"\r\n                                                    [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\" data-testid=\"open-dropdown2-museum-template-btn\"\r\n                                                    ngbDropdownToggle>{{'Manage template' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdown2\">\r\n                                                    <button (click)=\"onEditTemplate(template)\" ngbDropdownItem data-testid=\"edit-museum-template-btn\">\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"] }]
+            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                    data-testid=\"new-museum-template-btn\">\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 data-testid=\"open-museum-zone-btn\" [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 data-testid=\"open-museum-template-btn\" [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)}}\r\n                                            </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\"\r\n                                                            *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\r\n                                                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\"\r\n                                                    [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\" data-testid=\"open-dropdown2-museum-template-btn\"\r\n                                                    ngbDropdownToggle>{{'Manage template' |\r\n                                                    translate}}</button>\r\n                                                <div ngbDropdownMenu aria-labelledby=\"dropdown2\">\r\n                                                    <button (click)=\"onEditTemplate(template)\" ngbDropdownItem data-testid=\"edit-museum-template-btn\">\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"]
@@ -1745,10 +1753,10 @@ class AdminComponent {
     }
 }
 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 } });
+AdminComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AdminComponent, selector: "lib-admin", ngImport: i0, template: "<div class=\"container-fluid\">\r\n    <div class=\"row\">\r\n        <div class=\"d-none col-md-3 col-lg-2 d-md-block sidebar\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n                <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"/admin/users\" [routerLinkActive]=\"['active']\"\r\n                        #rlaUser=\"routerLinkActive\">\r\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaUser.isActive)\" />{{'Users' |\r\n                        translate}}</a></li>\r\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser\"><a class=\"nav-link\" routerLink=\"/admin/clients\"\r\n                        [routerLinkActive]=\"['active']\" #rlaOrganization=\"routerLinkActive\">\r\n                        <img class=\"big-icon\"\r\n                            [src]=\"getIcon(['menu', 'organisation'], rlaOrganization.isActive)\" />{{'Clients' |\r\n                        translate}}</a></li>\r\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser || isGuide\" data-testid=\"admin-visitor-btn\"> <a class=\"nav-link\"\r\n                        routerLink=\"/admin/visitors\" [routerLinkActive]=\"['active']\" #rlaVisitor=\"routerLinkActive\">\r\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaVisitor.isActive)\" />\r\n                        {{'Museum Visitors' | translate }}</a></li>\r\n            </ul>\r\n        </div> <!-- ml-sm-auto -->\r\n        <main role=\"main\" class=\"col-12 col-md-9 col-lg-10 px-md-4\">\r\n            <router-outlet></router-outlet>\r\n        </main>\r\n    </div>\r\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: [""] }]
+            args: [{ selector: 'lib-admin', template: "<div class=\"container-fluid\">\r\n    <div class=\"row\">\r\n        <div class=\"d-none col-md-3 col-lg-2 d-md-block sidebar\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n                <li class=\"nav-item\"><a class=\"nav-link\" routerLink=\"/admin/users\" [routerLinkActive]=\"['active']\"\r\n                        #rlaUser=\"routerLinkActive\">\r\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaUser.isActive)\" />{{'Users' |\r\n                        translate}}</a></li>\r\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser\"><a class=\"nav-link\" routerLink=\"/admin/clients\"\r\n                        [routerLinkActive]=\"['active']\" #rlaOrganization=\"routerLinkActive\">\r\n                        <img class=\"big-icon\"\r\n                            [src]=\"getIcon(['menu', 'organisation'], rlaOrganization.isActive)\" />{{'Clients' |\r\n                        translate}}</a></li>\r\n                <li class=\"nav-item\" *ngIf=\"isSmarterPlanUser || isGuide\" data-testid=\"admin-visitor-btn\"> <a class=\"nav-link\"\r\n                        routerLink=\"/admin/visitors\" [routerLinkActive]=\"['active']\" #rlaVisitor=\"routerLinkActive\">\r\n                        <img class=\"big-icon\" [src]=\"getIcon(['menu', 'user'], rlaVisitor.isActive)\" />\r\n                        {{'Museum Visitors' | translate }}</a></li>\r\n            </ul>\r\n        </div> <!-- ml-sm-auto -->\r\n        <main role=\"main\" class=\"col-12 col-md-9 col-lg-10 px-md-4\">\r\n            <router-outlet></router-outlet>\r\n        </main>\r\n    </div>\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.BaseUserService }]; } });
 
 class GuideGuard {