import { __awaiter } from "tslib";
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ApplicationService, ApplicationType } from '@c8y/client';
import { AlertService, WizardComponent } from '@c8y/ngx-components';
export class AddExternalApplicationComponent {
    constructor(applicationService, formBuilder, alertService, wizardComponent) {
        this.applicationService = applicationService;
        this.formBuilder = formBuilder;
        this.alertService = alertService;
        this.wizardComponent = wizardComponent;
    }
    ngOnInit() {
        this.initForm();
    }
    back() {
        this.wizardComponent.reset();
    }
    cancel() {
        this.wizardComponent.close();
    }
    done() {
        this.wizardComponent.close();
    }
    save(app) {
        return __awaiter(this, void 0, void 0, function* () {
            const appToSave = {
                manifest: {},
                externalUrl: app.externalUrl,
                type: ApplicationType.EXTERNAL,
                name: app.name,
                key: app.key
            };
            try {
                this.createdApp = yield this.applicationService.create(appToSave);
            }
            catch (ex) {
                this.alertService.addServerFailure(ex);
            }
        });
    }
    initForm() {
        this.formGroup = this.formBuilder.group({
            name: ['', [Validators.required, Validators.maxLength(120)]],
            key: ['', [Validators.required, Validators.maxLength(120)]],
            externalUrl: ['', Validators.required]
        });
    }
}
AddExternalApplicationComponent.decorators = [
    { type: Component, args: [{
                selector: 'c8y-add-external-application',
                template: "<form *ngIf=\"!createdApp; else appCreated\" [formGroup]=\"formGroup\" novalidate>\n  <c8y-wizard-header>\n    <h1 [c8yIcon]=\"'cloud-link'\"></h1>\n    <h4 translate>Add external application</h4>\n  </c8y-wizard-header>\n\n  <c8y-wizard-body>\n    <p class=\"p-16 text-medium text-center bg-white separator-bottom sticky-top\">\n      {{ 'Provide external application details' | translate }}\n    </p>\n    <div class=\"modal-body p-t-8\">\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Name' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"name\"\n          name=\"name\"\n          placeholder=\"{{ 'e.g. My application' | translate }}\"\n          required\n          type=\"text\"\n        />\n        <c8y-messages>\n          <c8y-message\n            *ngIf=\"formGroup?.controls?.name?.errors?.required && !formGroup.controls.name.pristine\"\n            translate\n          >\n            This field is required.\n          </c8y-message>\n          <c8y-message *ngIf=\"formGroup?.controls?.name?.errors?.maxlength\" translate>\n            Maximum 120 characters allowed.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'Application key' | translate }}</label>\n        <input\n          class=\"form-control\"\n          formControlName=\"key\"\n          name=\"key\"\n          placeholder=\"{{ 'e.g. my-external-application-key' | translate }}\"\n          required\n          type=\"text\"\n        />\n        <c8y-messages>\n          <c8y-message\n            *ngIf=\"formGroup?.controls?.key?.errors?.required && !formGroup.controls.key.pristine\"\n            translate\n          >\n            This field is required.\n          </c8y-message>\n          <c8y-message *ngIf=\"formGroup?.controls?.key?.errors?.maxlength\" translate>\n            Maximum 120 characters allowed.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label style=\"text-align: left\">{{ 'External URL' | translate }}</label>\n        <input\n          [pattern]=\"'^(?!javascript:).+'\"\n          class=\"form-control\"\n          formControlName=\"externalUrl\"\n          name=\"externalUrl\"\n          placeholder=\"{{ 'e.g.' | translate }} https://www.example.com\"\n          required\n          type=\"url\"\n        />\n        <c8y-messages>\n          <c8y-message\n            *ngIf=\"\n              formGroup?.controls?.externalUrl?.errors?.required &&\n              !formGroup.controls.externalUrl.pristine\n            \"\n            translate\n          >\n            This field is required.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n  </c8y-wizard-body>\n\n  <c8y-wizard-footer>\n    <button\n      (click)=\"back()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Back' | translate }}\"\n      translate\n      type=\"button\"\n    >\n      Back\n    </button>\n    <button (click)=\"cancel()\" class=\"btn btn-default\" title=\"{{ 'Cancel' | translate }}\" translate>\n      Cancel\n    </button>\n    <button\n      (click)=\"save(formGroup.value)\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Add application' | translate }}\"\n      type=\"button\"\n    >\n      {{ 'Add application' | translate }}\n    </button>\n  </c8y-wizard-footer>\n</form>\n<ng-template #appCreated>\n  <c8y-wizard-body>\n    <div class=\"d-flex d-col j-c-center a-i-center\" style=\"min-height: 324px\">\n      <c8y-operation-result\n        text=\"{{ 'Application created' | translate }}\"\n        [size]=\"84\"\n        [vertical]=\"true\"\n        type=\"success\"\n        class=\"lead\"\n      ></c8y-operation-result>\n    </div>\n  </c8y-wizard-body>\n  <c8y-wizard-footer>\n    <button (click)=\"done()\" class=\"btn btn-default\" title=\"{{ 'Done' | translate }}\" translate>\n      Done\n    </button>\n    <a\n      (click)=\"$event.stopPropagation()\"\n      [href]=\"formGroup.value.externalUrl\"\n      target=\"_blank\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Open' | translate }}\"\n    >\n      <i c8yIcon=\"external-link\" class=\"m-r-4\"></i>\n      {{ 'Open' | translate }}\n    </a>\n  </c8y-wizard-footer>\n</ng-template>\n"
            },] }
];
AddExternalApplicationComponent.ctorParameters = () => [
    { type: ApplicationService },
    { type: FormBuilder },
    { type: AlertService },
    { type: WizardComponent }
];
//# sourceMappingURL=data:application/json;base64, 