@smarterplan/ngx-smarterplan-admin 0.1.41 → 0.1.43

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

@@ -282,6 +282,7 @@ class FormMissionComponent {
         this.missionTimeEnd = 12 * 60 * 60000;
         this.addedHashtags = [];
         this.dateError = false;
+        this.errorForm = false;
     }
     async ngOnInit() {
         this.updateUserInfo();
@@ -398,40 +399,49 @@ class FormMissionComponent {
     removeHashtag(hashtag) {
         this.addedHashtags.splice(this.addedHashtags.indexOf(hashtag), 1);
     }
-    onSubmit() {
-        const formValue = this.missionForm.value;
+    async onSubmit() {
         if (!this.missionForm.valid) {
-            // this shows errors in the form
-            this.missionForm.markAllAsTouched();
+            this.errorForm = true;
             return;
         }
-        let startDateString;
-        let endDateString;
-        if (formValue.startDate) {
-            const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
-            const startDate = DateTime.fromMillis(dateHourStartNumber);
-            startDateString = startDate.toISO();
-        }
-        if (formValue.endDate) {
-            const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
-            const endDate = DateTime.fromMillis(dateHourEndNumber);
-            endDateString = endDate.toISO();
-        }
-        if (endDateString && startDateString && (endDateString < startDateString)) {
+        const datesValues = await this.onVerifDate();
+        if (datesValues.error) {
             this.dateError = true;
+            this.errorForm = true;
             return;
         }
-        else {
-            this.dateError = false;
-        }
+        const formValue = this.missionForm.value;
+        // if (!this.missionForm.valid) {
+        //     // this shows errors in the form
+        //     this.missionForm.markAllAsTouched();
+        //     return;
+        // }
+        // let startDateString: string;
+        // let endDateString: string;
+        // if (formValue.startDate) {
+        //     const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
+        //     const startDate = DateTime.fromMillis(dateHourStartNumber);
+        //     startDateString = startDate.toISO();
+        // }
+        // if (formValue.endDate) {
+        //     const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
+        //     const endDate = DateTime.fromMillis(dateHourEndNumber);
+        //     endDateString = endDate.toISO();
+        // }
+        // if (endDateString && startDateString && (endDateString < startDateString)) {
+        //     this.dateError = true;
+        //     return;
+        // } else {
+        //     this.dateError = false;
+        // }
         const missionInput = {
             organisationID: formValue.organisationID,
             orderedOrganisationID: formValue.orderedOrganisationID,
             level: formValue.level,
             role: formValue.role,
             description: formValue.description,
-            startDateTime: startDateString,
-            endDateTime: endDateString,
+            startDateTime: datesValues.startDateString,
+            endDateTime: datesValues.endDateString,
             domains: formValue.domains,
             userID: this.userForMissionID,
             emailStatus: this.missionToEdit
@@ -454,12 +464,41 @@ class FormMissionComponent {
     onCancel() {
         this.addedMissionInput.emit(null);
     }
+    isFormError(control) {
+        return control && control.invalid && this.errorForm;
+    }
+    onVerifDate() {
+        return new Promise((resolve) => {
+            const formValue = this.missionForm.getRawValue();
+            let startDateString;
+            let endDateString;
+            if (formValue.startDate) {
+                const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
+                const startDate = DateTime.fromMillis(dateHourStartNumber);
+                startDateString = startDate.toISO();
+            }
+            if (formValue.endDate) {
+                const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
+                const endDate = DateTime.fromMillis(dateHourEndNumber);
+                endDateString = endDate.toISO();
+            }
+            if (endDateString && startDateString &&
+                endDateString <= startDateString) {
+                this.dateError = true;
+                resolve({ error: true });
+            }
+            else {
+                this.dateError = false;
+                resolve({ startDateString, endDateString });
+            }
+        });
+    }
 }
 FormMissionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormMissionComponent, deps: [{ token: i2.FormBuilder }, { token: i1.SpaceService }, { token: i1.BaseUserService }, { token: i1.DomainService }, { token: i1.OrganisationService }, { token: i1.ZoneService }, { token: i1.HashtagService }, { token: i1.LocaleService }, { token: i1.ValidatorsService }], target: i0.ɵɵFactoryTarget.Component });
-FormMissionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormMissionComponent, selector: "lib-form-mission", inputs: { missionToEdit: "missionToEdit", organisationForMission: "organisationForMission", isSP: "isSP", userForMissionID: "userForMissionID", currentUserOrganisation: "currentUserOrganisation" }, outputs: { addedMissionInput: "addedMissionInput" }, ngImport: i0, template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" data-testid=\"form-mission-organisation\" class=\"form-control\"\r\n                    formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['description'])\"\r\n                    data-testid=\"form-mission-description\"></textarea>\r\n                <div class=\"invalid-feedback\">\r\n                    <span data-testid=\"form-mission-description-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['description'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.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\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" data-testid=\"form-mission-role\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['role'])\">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    <span data-testid=\"form-mission-role-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['role'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['role'])\"></span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\" data-testid=\"form-mission-level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                    data-testid=\"form-mission-space\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.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-mission-space-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['space'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.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>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\" data-testid=\"form-mission-zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" formControlName=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" data-testid=\"form-mission-startDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['startDate'])|| dateError\">\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-mission-startDate-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['startDate'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['startDate'])\"></span>\r\n\r\n                    <span data-testid=\"form-template-startDate-invalid-verif\" translate=\"errorForm.date_start_end\"\r\n                        *ngIf=\"dateError\"></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\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" ngbDatepicker #d2=\"ngbDatepicker\"\r\n                    formControlName=\"endDate\" data-testid=\"form-mission-endDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.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-mission-endDate-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['endDate'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['endDate'])\"></span>\r\n                        \r\n                        <span data-testid=\"form-template-endDate-invalid-verif\"\r\n                            translate=\"errorForm.date_end_start\"\r\n                            *ngIf=\"dateError\"></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\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" [disabled]=\"missionForm.invalid\"\r\n                class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                data-testid=\"form-mission-submit-btn\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" data-testid=\"form-mission-cancel-btn\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+FormMissionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FormMissionComponent, selector: "lib-form-mission", inputs: { missionToEdit: "missionToEdit", organisationForMission: "organisationForMission", isSP: "isSP", userForMissionID: "userForMissionID", currentUserOrganisation: "currentUserOrganisation" }, outputs: { addedMissionInput: "addedMissionInput" }, ngImport: i0, template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" data-testid=\"form-mission-organisation\" class=\"form-control\"\r\n                    formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['description'])|| isFormError(missionForm.controls['description'])} \"\r\n                    data-testid=\"form-mission-description\"></textarea>\r\n                <div class=\"invalid-feedback\">\r\n                    <ngb-alert data-testid=\"form-mission-description-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['description']) \r\n                        ||  isFormError(missionForm.controls['description'])\">\r\n                        {{validatorsService.getError(missionForm.controls['description']) |\r\n                        translate}}\r\n                    </ngb-alert>\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\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" data-testid=\"form-mission-role\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['role'])|| isFormError(missionForm.controls['role'])} \">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    <ngb-alert data-testid=\"form-mission-role-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['role']) \r\n                        ||  isFormError(missionForm.controls['role'])\">\r\n                        {{validatorsService.getError(missionForm.controls['role']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\" data-testid=\"form-mission-level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                    data-testid=\"form-mission-space\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['space'])|| isFormError(missionForm.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                    <ngb-alert data-testid=\"form-mission-space-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['space']) \r\n                        ||  isFormError(missionForm.controls['space'])\">\r\n                        {{validatorsService.getError(missionForm.controls['space']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                {{ 'No locations available' | translate}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\" data-testid=\"form-mission-zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" formControlName=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" data-testid=\"form-mission-startDate\" (ngModelChange)=\"onVerifDate()\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['startDate'])|| isFormError(missionForm.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                    <ngb-alert data-testid=\"form-mission-startDate-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['startDate']) \r\n                        ||  isFormError(missionForm.controls['startDate'])\">\r\n                        {{validatorsService.getError(missionForm.controls['startDate']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n\r\n                    <ngb-alert data-testid=\"form-mission-startDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                        *ngIf=\"dateError\">\r\n                        {{'errorForm.date_start_end' |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (ngModelChange)=\"onVerifDate()\"></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\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" ngbDatepicker #d2=\"ngbDatepicker\"\r\n                    formControlName=\"endDate\" data-testid=\"form-mission-endDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['endDate'])\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['endDate'])|| isFormError(missionForm.controls['endDate'])} \"\r\n                    (ngModelChange)=\"onVerifDate()\">\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                    <ngb-alert data-testid=\"form-mission-endDate-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['endDate']) \r\n                        ||  isFormError(missionForm.controls['endDate'])\">\r\n                        {{validatorsService.getError(missionForm.controls['endDate']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n\r\n                    <ngb-alert data-testid=\"form-mission-endDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                        *ngIf=\"dateError\">\r\n                        {{'errorForm.date_end_start' |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (ngModelChange)=\"onVerifDate()\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                data-testid=\"form-mission-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" data-testid=\"form-mission-cancel-btn\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n        <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n            <ngb-alert data-testid=\"form-mission-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                {{'errorForm.infoBtn' |translate}}\r\n            </ngb-alert>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"], components: [{ type: i4$1.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i4$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormMissionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-mission', template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" data-testid=\"form-mission-organisation\" class=\"form-control\"\r\n                    formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['description'])\"\r\n                    data-testid=\"form-mission-description\"></textarea>\r\n                <div class=\"invalid-feedback\">\r\n                    <span data-testid=\"form-mission-description-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['description'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.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\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" data-testid=\"form-mission-role\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['role'])\">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    <span data-testid=\"form-mission-role-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['role'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['role'])\"></span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\" data-testid=\"form-mission-level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                    data-testid=\"form-mission-space\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.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-mission-space-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['space'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.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>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\" data-testid=\"form-mission-zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" formControlName=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" data-testid=\"form-mission-startDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['startDate'])|| dateError\">\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-mission-startDate-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['startDate'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['startDate'])\"></span>\r\n\r\n                    <span data-testid=\"form-template-startDate-invalid-verif\" translate=\"errorForm.date_start_end\"\r\n                        *ngIf=\"dateError\"></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\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" ngbDatepicker #d2=\"ngbDatepicker\"\r\n                    formControlName=\"endDate\" data-testid=\"form-mission-endDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.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-mission-endDate-invalid\"\r\n                        [translate]=\"validatorsService.getError(missionForm.controls['endDate'])\"\r\n                        *ngIf=\" validatorsService.isControlError(missionForm.controls['endDate'])\"></span>\r\n                        \r\n                        <span data-testid=\"form-template-endDate-invalid-verif\"\r\n                            translate=\"errorForm.date_end_start\"\r\n                            *ngIf=\"dateError\"></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\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" [disabled]=\"missionForm.invalid\"\r\n                class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                data-testid=\"form-mission-submit-btn\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" data-testid=\"form-mission-cancel-btn\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
+            args: [{ selector: 'lib-form-mission', template: "<div class=\"form-containter\" *ngIf=\"missionForm\">\r\n    <div style=\"margin-top: 1rem;\">\r\n        <h4>{{ 'Mission details' | translate }}</h4>\r\n    </div>\r\n    <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"missionForm\">\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Organisation' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <input type=\"text\" data-testid=\"form-mission-organisation\" class=\"form-control\"\r\n                    formControlName=\"organisation\">\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\" *ngIf=\"isSP\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Ordered by' | translate }}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"orderedOrganisationID\">\r\n                    <option *ngFor=\"let org of allOrgs\" [ngValue]=\"org.id\">\r\n                        {{ org.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Description' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <textarea class=\"form-control\" formControlName=\"description\" rows=\"10\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['description'])|| isFormError(missionForm.controls['description'])} \"\r\n                    data-testid=\"form-mission-description\"></textarea>\r\n                <div class=\"invalid-feedback\">\r\n                    <ngb-alert data-testid=\"form-mission-description-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['description']) \r\n                        ||  isFormError(missionForm.controls['description'])\">\r\n                        {{validatorsService.getError(missionForm.controls['description']) |\r\n                        translate}}\r\n                    </ngb-alert>\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\">{{'Role' | translate}}*</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"role\" data-testid=\"form-mission-role\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['role'])|| isFormError(missionForm.controls['role'])} \">\r\n                    <option *ngFor=\"let r of availableRoles\" [ngValue]=\"r\">\r\n                        {{ r }}\r\n                    </option>\r\n                </select>\r\n                <div class=\"invalid-feedback\">\r\n                    <ngb-alert data-testid=\"form-mission-role-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['role']) \r\n                        ||  isFormError(missionForm.controls['role'])\">\r\n                        {{validatorsService.getError(missionForm.controls['role']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\"\r\n            *ngIf=\"missionForm.get('role').value !== 'VISITOR_MUSEUM' && missionForm.get('role').value !== 'GUIDE_MUSEUM'\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Domains' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"domains\">\r\n                <select class=\"form-control\" multiple formControlName=\"domains\">\r\n                    <option *ngFor=\"let domain of domains\" [ngValue]=\"domain.id\">\r\n                        {{ domain.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Access level' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" required formControlName=\"level\" data-testid=\"form-mission-level\">\r\n                    <option *ngFor=\"let level of availableLevels\" [ngValue]=\"level\">\r\n                        {{ level }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized location' | translate }}*</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"availableSpaces\">\r\n                <select class=\"form-control\" required formControlName=\"space\" (change)=\"onSpaceClick()\"\r\n                    data-testid=\"form-mission-space\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['space'])|| isFormError(missionForm.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                    <ngb-alert data-testid=\"form-mission-space-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['space']) \r\n                        ||  isFormError(missionForm.controls['space'])\">\r\n                        {{validatorsService.getError(missionForm.controls['space']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8\" *ngIf=\"!availableSpaces\">\r\n                {{ 'No locations available' | translate}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{ 'Authorized zone' | translate }}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"zonesForSpace; else noSpace\">\r\n                <select class=\"form-control\" formControlName=\"zone\" data-testid=\"form-mission-zone\">\r\n                    <option [ngValue]=\"defaultZone.id\">\r\n                        {{ 'All zones' | translate }}\r\n                    </option>\r\n                    <option *ngFor=\"let zone of zonesForSpace\" [ngValue]=\"zone.id\">\r\n                        {{ zone.name }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #noSpace>\r\n                <div class=\"col-sm-8 hint-container\">\r\n                    <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Language' | translate}}</label>\r\n            <div class=\"col-sm-8\">\r\n                <select class=\"form-control\" formControlName=\"locale\">\r\n                    <option [ngValue]=\"null\">{{'Not applicable' | translate}}</option>\r\n                    <option *ngFor=\"let locale of locales\" [ngValue]=\"locale\">\r\n                        {{ locale }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n        <!-- Hashtags are available after Space is set -->\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Hashtags' | translate}}</label>\r\n            <div class=\"col-sm-8\" *ngIf=\"spaceID.value\">\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length > 0\">{{'Available hashtags' | translate}} </p>\r\n                <p class=\"keywordsRules\" *ngIf=\"availableHashtags.length === 0\">\r\n                    {{'No hashtags created for this location' | translate}} </p>\r\n                <div *ngIf=\"availableHashtags.length > 0\">\r\n                    <ul class=\"keywordsDisplay no-border\">\r\n                        <div class=\"keywordsdisplayContainer\">\r\n                            <li *ngFor=\"let hashtag of availableHashtags\"\r\n                                [class]=\"hashtagAdded(hashtag) ? 'keywordsItem added' : 'keywordsItem'\"\r\n                                (click)=\"onHashtagClick(hashtag)\" style=\"cursor: pointer;\"\r\n                                ngbTooltip=\"{{hashtagAdded(hashtag) ? ('Remove'|translate) : ('Add'|translate) }}\">\r\n                                {{hashtag.name}}\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                    <p class=\"keywordsRules\">{{'Added hashtags' | translate}} </p>\r\n                    <ul class=\"keywordsDisplay\">\r\n                        <div class=\"keywordsdisplayContainer\" *ngIf=\"addedHashtags.length> 0\">\r\n                            <li class=\"keywordsItem\" *ngFor=\"let hashtag of addedHashtags\">{{ hashtag.name }}\r\n                                <a type=\"button\" class=\"closeButton\" (click)=\"removeHashtag(hashtag)\">\r\n                                    <span class=\"crossItem\"></span>\r\n                                </a>\r\n                            </li>\r\n                        </div>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-8 hint-container\" *ngIf=\"!spaceID.value\">\r\n                <p class=\"hint keywordsRules\">{{'You need to choose the location first' | translate}} </p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" formControlName=\"startDate\" ngbDatepicker\r\n                    #d1=\"ngbDatepicker\" data-testid=\"form-mission-startDate\" (ngModelChange)=\"onVerifDate()\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['startDate'])|| isFormError(missionForm.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                    <ngb-alert data-testid=\"form-mission-startDate-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['startDate']) \r\n                        ||  isFormError(missionForm.controls['startDate'])\">\r\n                        {{validatorsService.getError(missionForm.controls['startDate']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n\r\n                    <ngb-alert data-testid=\"form-mission-startDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                        *ngIf=\"dateError\">\r\n                        {{'errorForm.date_start_end' |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission Start Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeStart\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (ngModelChange)=\"onVerifDate()\"></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\">{{'Mission End Date' | translate}}</label>\r\n            <div class=\"input-group col-sm-8\">\r\n                <input class=\"form-control\" placeholder=\"dd/mm/yyyy\" ngbDatepicker #d2=\"ngbDatepicker\"\r\n                    formControlName=\"endDate\" data-testid=\"form-mission-endDate\"\r\n                    [class.is-invalid]=\"validatorsService.isControlError(missionForm.controls['endDate'])\"\r\n                    [ngClass]=\"{'is-invalid' : validatorsService.isControlError(missionForm.controls['endDate'])|| isFormError(missionForm.controls['endDate'])} \"\r\n                    (ngModelChange)=\"onVerifDate()\">\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                    <ngb-alert data-testid=\"form-mission-endDate-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(missionForm.controls['endDate']) \r\n                        ||  isFormError(missionForm.controls['endDate'])\">\r\n                        {{validatorsService.getError(missionForm.controls['endDate']) |\r\n                        translate}}\r\n                    </ngb-alert>\r\n\r\n                    <ngb-alert data-testid=\"form-mission-endDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                        *ngIf=\"dateError\">\r\n                        {{'errorForm.date_end_start' |\r\n                        translate}}\r\n                    </ngb-alert>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-4 col-form-label\">{{'Mission End Time' | translate}}</label>\r\n            <div class=\"input-group col-sm-8 timeZoneContainer\">\r\n                <ngb-timepicker [(ngModel)]=\"missionTimeEnd\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (ngModelChange)=\"onVerifDate()\"></ngb-timepicker>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-control-div action-button-container\">\r\n            <button type=\"submit\" class=\"btn btn-outline-primary rounded-pill mr-3 action-button\"\r\n                data-testid=\"form-mission-submit-btn\" [ngClass]=\"{'is-invalid' : errorForm }\">{{'Save' |\r\n                translate}}</button>\r\n            <button type=\"button\" (click)=\"onCancel()\" data-testid=\"form-mission-cancel-btn\"\r\n                class=\"btn btn-outline-primary rounded-pill action-button\">{{'Cancel' |\r\n                translate}}</button>\r\n        </div>\r\n        <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n            <ngb-alert data-testid=\"form-mission-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                {{'errorForm.infoBtn' |translate}}\r\n            </ngb-alert>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".form-containter{padding:0rem 1rem;margin-bottom:2rem}.checkbox-apply{margin-top:calc(.375rem + 1px)}.keywordsDisplay{min-height:40px}.hint{margin:0!important}.hint-container{display:flex;align-items:center}.crossItem{margin:0;padding:0;border:0;background:none;position:relative;width:7px;height:20px}.crossItem:before,.crossItem:after{content:\"\";position:absolute;top:6.25px;left:0;right:0;height:1.5px;background:#fff;border-radius:1.5px}.crossItem:before{transform:rotate(45deg)}.crossItem:after{transform:rotate(-45deg)}.crossItem span{display:block}.btn-control-div .btn{width:8rem}.timeZoneContainer{align-items:center}.timeZoneContainer span{margin-left:5px}.form-group{margin:1.5rem 0}label.col-sm-4.col-form-label{width:200px;min-width:200px}.action-button-container{display:flex;justify-content:space-evenly}.action-button-container .action-button{width:145px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: i1.SpaceService }, { type: i1.BaseUserService }, { type: i1.DomainService }, { type: i1.OrganisationService }, { type: i1.ZoneService }, { type: i1.HashtagService }, { type: i1.LocaleService }, { type: i1.ValidatorsService }]; }, propDecorators: { missionToEdit: [{
                 type: Input
             }], organisationForMission: [{
@@ -1183,6 +1222,7 @@ class TemplateComponent {
         this.availableHashtags = [];
         this.addedHashtags = [];
         this.dateError = false;
+        this.errorForm = false;
         this.userService.isChanged.subscribe(() => {
             this.updateUserInfo();
         });
@@ -1197,10 +1237,12 @@ class TemplateComponent {
         this.locales = enumToArray(Locale);
     }
     async setup() {
+        console.log('SETUP');
         // respect the order of functions here !!
         if (this.zoneID) {
             this.inputZone = await this.zoneService.getZone(this.zoneID);
             await this.setHashtags(this.inputZone.spaceID);
+            console.log(this.inputZone);
         }
         this.initForm();
         if (this.editTemplate) {
@@ -1261,30 +1303,24 @@ class TemplateComponent {
                 startDate: [startDate, [floatValidator(), Validators.required]],
                 endDate: [endDate, [floatValidator(), Validators.required]],
             });
+            console.log(this.form.value);
         }
     }
     async onSubmit() {
-        // this.working = true;
-        const formValue = this.form.getRawValue();
-        let startDateString;
-        let endDateString;
-        if (formValue.startDate) {
-            const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
-            const startDate = DateTime.fromMillis(dateHourStartNumber);
-            startDateString = startDate.toISO();
-        }
-        if (formValue.endDate) {
-            const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
-            const endDate = DateTime.fromMillis(dateHourEndNumber);
-            endDateString = endDate.toISO();
-        }
-        if (endDateString > startDateString) {
-            this.dateError = false;
+        this.working = true;
+        if (!this.form.valid) {
+            this.errorForm = true;
+            this.working = false;
+            return;
         }
-        else {
+        const datesValues = await this.onVerifDate();
+        if (datesValues.error) {
             this.dateError = true;
+            this.errorForm = true;
+            this.working = false;
             return;
         }
+        const formValue = this.form.getRawValue();
         try {
             if (this.editTemplate) {
                 // update
@@ -1294,8 +1330,8 @@ class TemplateComponent {
                     level: formValue.level,
                     description: formValue.description,
                     organisationID: formValue.organisationID,
-                    startDateTime: startDateString,
-                    endDateTime: endDateString,
+                    startDateTime: datesValues.startDateString,
+                    endDateTime: datesValues.endDateString,
                     hashtags: this.addedHashtags.map((hashtag) => hashtag.id),
                     locale: formValue.locale,
                 };
@@ -1315,8 +1351,8 @@ class TemplateComponent {
                         organisationID: this.currentOrg.id,
                         level: formValue.level,
                         description: formValue.description,
-                        startDateTime: startDateString,
-                        endDateTime: endDateString,
+                        startDateTime: datesValues.startDateString,
+                        endDateTime: datesValues.endDateString,
                         hashtags: this.addedHashtags.map((hashtag) => hashtag.id),
                         locale: formValue.locale,
                     };
@@ -1329,6 +1365,7 @@ class TemplateComponent {
                     this.createdTemplate.emit(template);
                 }
             }
+            this.working = false;
         }
         catch (error) {
             console.error(error);
@@ -1367,12 +1404,41 @@ class TemplateComponent {
     async setHashtags(spaceID) {
         this.availableHashtags = await this.hashtagService.getHashtagsForSpace(spaceID);
     }
+    isFormError(control) {
+        return control && control.invalid && this.errorForm;
+    }
+    onVerifDate() {
+        return new Promise((resolve) => {
+            const formValue = this.form.getRawValue();
+            let startDateString;
+            let endDateString;
+            if (formValue.startDate) {
+                const dateHourStartNumber = formValue.startDate + this.missionTimeStart;
+                const startDate = DateTime.fromMillis(dateHourStartNumber);
+                startDateString = startDate.toISO();
+            }
+            if (formValue.endDate) {
+                const dateHourEndNumber = formValue.endDate + this.missionTimeEnd;
+                const endDate = DateTime.fromMillis(dateHourEndNumber);
+                endDateString = endDate.toISO();
+            }
+            if (endDateString && startDateString &&
+                endDateString <= startDateString) {
+                this.dateError = true;
+                resolve({ error: true });
+            }
+            else {
+                this.dateError = false;
+                resolve({ startDateString, endDateString });
+            }
+        });
+    }
 }
 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']) || dateError\">\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\r\n                        <span data-testid=\"form-template-startDate-invalid-verif\"\r\n                            [translate]=\"'errorForm.date_start_end'\"\r\n                            *ngIf=\"dateError\"></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                        #d2=\"ngbDatepicker\" data-testid=\"form-template-endDate\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['endDate']) || dateError\">\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\r\n                        <span data-testid=\"form-template-endDate-invalid-verif\"\r\n                            translate=\"errorForm.date_end_start\"\r\n                            *ngIf=\"dateError\">\r\n                        </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 } });
+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\" formControlName=\"title\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['title'])|| isFormError(form.controls['title'])} \"\r\n                        data-testid=\"form-template-title\">\r\n                    <div class=\"invalid-feedback\">\r\n                        <ngb-alert data-testid=\"form-template-title-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['title']) \r\n                            ||  isFormError(form.controls['title'])\">\r\n                            {{validatorsService.getError(form.controls['title']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['description'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-description-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['description']) \r\n                            ||  isFormError(form.controls['description'])\">\r\n                            {{validatorsService.getError(form.controls['description']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['space'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-space-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['space']) \r\n                            ||  isFormError(form.controls['space'])\">\r\n                            {{validatorsService.getError(form.controls['space']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['zone'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-zone-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['zone']) \r\n                            ||  isFormError(form.controls['zone'])\">\r\n                            {{validatorsService.getError(form.controls['zone']) |\r\n                            translate}}\r\n                        </ngb-alert>\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\" (ngModelChange)=\"onVerifDate()\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['startDate'])|| isFormError(form.controls['startDate'])|| dateError}  \">\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                        <ngb-alert data-testid=\"form-template-startDate-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['startDate']) \r\n                            ||  isFormError(form.controls['startDate'])\">\r\n                            {{validatorsService.getError(form.controls['startDate']) |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\r\n                        <ngb-alert data-testid=\"form-template-startDate-invalid-verif\" [dismissible]=\"false\"\r\n                            type=\"danger\" *ngIf=\"dateError\">\r\n                            {{'errorForm.date_start_end' |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\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                        (ngModelChange)=\"onVerifDate()\">\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                        #d2=\"ngbDatepicker\" data-testid=\"form-template-endDate\" (ngModelChange)=\"onVerifDate()\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['endDate'])|| isFormError(form.controls['endDate'])|| dateError} \">\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                        <ngb-alert data-testid=\"form-template-endDate-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['endDate']) \r\n                        ||  isFormError(form.controls['endDate'])\">\r\n                            {{validatorsService.getError(form.controls['endDate']) |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\r\n                        <ngb-alert data-testid=\"form-template-endDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\"dateError\">\r\n                            {{'errorForm.date_end_start' |\r\n                            translate}}\r\n                        </ngb-alert>\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}\"\r\n                        (ngModelChange)=\"onVerifDate()\"></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                [ngClass]=\"{'is-invalid' : errorForm }\" [disabled]=\"this.working \"\r\n                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        <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n            <ngb-alert data-testid=\"form-template-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                {{'errorForm.infoBtn' |translate}}\r\n            </ngb-alert>\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.NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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]=\"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']) || dateError\">\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\r\n                        <span data-testid=\"form-template-startDate-invalid-verif\"\r\n                            [translate]=\"'errorForm.date_start_end'\"\r\n                            *ngIf=\"dateError\"></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                        #d2=\"ngbDatepicker\" data-testid=\"form-template-endDate\"\r\n                        [class.is-invalid]=\"validatorsService.isControlError(form.controls['endDate']) || dateError\">\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\r\n                        <span data-testid=\"form-template-endDate-invalid-verif\"\r\n                            translate=\"errorForm.date_end_start\"\r\n                            *ngIf=\"dateError\">\r\n                        </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"] }]
+            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\" formControlName=\"title\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['title'])|| isFormError(form.controls['title'])} \"\r\n                        data-testid=\"form-template-title\">\r\n                    <div class=\"invalid-feedback\">\r\n                        <ngb-alert data-testid=\"form-template-title-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['title']) \r\n                            ||  isFormError(form.controls['title'])\">\r\n                            {{validatorsService.getError(form.controls['title']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['description'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-description-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['description']) \r\n                            ||  isFormError(form.controls['description'])\">\r\n                            {{validatorsService.getError(form.controls['description']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['space'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-space-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['space']) \r\n                            ||  isFormError(form.controls['space'])\">\r\n                            {{validatorsService.getError(form.controls['space']) |\r\n                            translate}}\r\n                        </ngb-alert>\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                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['zone'])|| isFormError(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                        <ngb-alert data-testid=\"form-template-zone-invalid\" [dismissible]=\"false\" type=\"danger\" *ngIf=\" validatorsService.isControlError(form.controls['zone']) \r\n                            ||  isFormError(form.controls['zone'])\">\r\n                            {{validatorsService.getError(form.controls['zone']) |\r\n                            translate}}\r\n                        </ngb-alert>\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\" (ngModelChange)=\"onVerifDate()\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['startDate'])|| isFormError(form.controls['startDate'])|| dateError}  \">\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                        <ngb-alert data-testid=\"form-template-startDate-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['startDate']) \r\n                            ||  isFormError(form.controls['startDate'])\">\r\n                            {{validatorsService.getError(form.controls['startDate']) |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\r\n                        <ngb-alert data-testid=\"form-template-startDate-invalid-verif\" [dismissible]=\"false\"\r\n                            type=\"danger\" *ngIf=\"dateError\">\r\n                            {{'errorForm.date_start_end' |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\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                        (ngModelChange)=\"onVerifDate()\">\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                        #d2=\"ngbDatepicker\" data-testid=\"form-template-endDate\" (ngModelChange)=\"onVerifDate()\"\r\n                        [ngClass]=\"{'is-invalid' : validatorsService.isControlError(form.controls['endDate'])|| isFormError(form.controls['endDate'])|| dateError} \">\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                        <ngb-alert data-testid=\"form-template-endDate-invalid\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\" validatorsService.isControlError(form.controls['endDate']) \r\n                        ||  isFormError(form.controls['endDate'])\">\r\n                            {{validatorsService.getError(form.controls['endDate']) |\r\n                            translate}}\r\n                        </ngb-alert>\r\n\r\n                        <ngb-alert data-testid=\"form-template-endDate-invalid-verif\" [dismissible]=\"false\" type=\"danger\"\r\n                            *ngIf=\"dateError\">\r\n                            {{'errorForm.date_end_start' |\r\n                            translate}}\r\n                        </ngb-alert>\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}\"\r\n                        (ngModelChange)=\"onVerifDate()\"></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                [ngClass]=\"{'is-invalid' : errorForm }\" [disabled]=\"this.working \"\r\n                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        <div class=\"invalid-feedback\" *ngIf=\"errorForm\">\r\n            <ngb-alert data-testid=\"form-template-invalid\" [dismissible]=\"false\" type=\"danger\">\r\n                {{'errorForm.infoBtn' |translate}}\r\n            </ngb-alert>\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: [{