@lowcodeunit/applications-flow-common 1.33.99-lets-get-social-ish → 1.33.100-lets-get-social-ish

package/bundles/lowcodeunit-applications-flow-common.umd.js

@@ -1775,6 +1775,7 @@
         HostingDetailsFormGroupComponent.prototype.ngOnChanges = function () { };
         HostingDetailsFormGroupComponent.prototype.ngOnInit = function () {
             var _a, _b, _c;
+            console.log("made it to hosting details");
             this.BuildPipeline =
                 this.BuildPipeline || ((_a = this.Details) === null || _a === void 0 ? void 0 : _a.HostingOptions)
                     ? (_c = (_b = this.Details) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
@@ -4746,6 +4747,7 @@
 
     var SlottedCardComponent = /** @class */ (function () {
         function SlottedCardComponent() {
+            this.MainActionClicked = new i0.EventEmitter;
         }
         SlottedCardComponent.prototype.ngOnInit = function () {
         };
@@ -4757,7 +4759,7 @@
     SlottedCardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-slotted-card',
-                    template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
+                    template: "<mat-card class=\"col-info-card\">\n    <mat-card-header fxLayoutAlign=\"space-between center\">\n      <mat-card-title class=\"card-title\">{{ Title }}</mat-card-title>\n      <mat-icon class=\"header-icon\">{{ Icon }}</mat-icon>\n    </mat-card-header>\n    \n    <mat-card-content>\n\n        <div class=\"slot-main-container\">\n\n            <div class=\"header-description\">{{ MainSlotDescription }}</div>\n\n            <div class=\"slot-main\">\n                <ng-content></ng-content>\n            </div>\n        \n        </div>\n\n        <div *ngIf=\"SecondarySlotDescription\" class=\"slot-secondary-container\">\n\n            <div class=\"header-description\">{{ SecondarySlotDescription }}</div>\n\n            <div class=\"slot-secondary\">\n                <ng-content select=\"[secondary]\"></ng-content>\n            </div>\n        \n        </div>\n      \n    </mat-card-content>\n\n    <mat-card-actions *ngIf=\"ActionText\" fxLayoutAlign=\"center\">\n      <a mat-button *ngIf=\"ActionPath\" class=\"slotted-card-action-btn\" [href]=\"ActionPath\">{{ ActionText }}</a>\n      <a mat-button *ngIf=\"!ActionPath\" class=\"slotted-card-action-btn\" (click)=\"MainActionClickEvent()\">{{ ActionText }}</a>\n    </mat-card-actions>\n\n  </mat-card>\n\n\n",
                     styles: [".col-info-card{border:2px solid #d3d3d3;margin:20px;padding:0}.header-icon{margin-right:10px}.card-title{font-size:30px;margin-bottom:0}.header-description{background-color:#d3d3d3;margin-left:-2px;padding:10px}mat-card-actions{margin-bottom:0!important;margin-left:-1px!important;margin-right:0!important}.slotted-card-action-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
                 },] }
     ];
@@ -5482,17 +5484,23 @@
     };
 
     var BuildPipelineFormComponent = /** @class */ (function () {
-        function BuildPipelineFormComponent(formBldr, appsFlowSvc) {
-            this.formBldr = formBldr;
+        function BuildPipelineFormComponent(formBuilder, appsFlowSvc) {
+            this.formBuilder = formBuilder;
             this.appsFlowSvc = appsFlowSvc;
             this.HostingDetails = new ProjectHostingDetails();
         }
         Object.defineProperty(BuildPipelineFormComponent.prototype, "Artifact", {
-            //PROPERTIES
+            // @Input('main-branch')
+            // public MainBranch: string;
+            // @Input('organization')
+            // public Organization: string;
+            // @Input('repository')
+            // public Repository: string;
             get: function () {
-                var _a, _b;
-                return ((_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts) && this.ArtifactLookup
-                    ? ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts[this.ArtifactLookup]) || {}
+                var _a, _b, _c;
+                console.log("ARTIFACT: ", (_a = this.Environment) === null || _a === void 0 ? void 0 : _a.Artifacts[this.ArtifactLookup]);
+                return ((_b = this.Environment) === null || _b === void 0 ? void 0 : _b.Artifacts) && this.ArtifactLookup
+                    ? ((_c = this.Environment) === null || _c === void 0 ? void 0 : _c.Artifacts[this.ArtifactLookup]) || {}
                     : {};
             },
             enumerable: false,
@@ -5507,6 +5515,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "BuildPipelineFormControl", {
+            get: function () {
+                var _a;
+                return (_a = this.BuildPipelineFormGroup) === null || _a === void 0 ? void 0 : _a.controls.buildPipeline;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BuildPipelineFormComponent.prototype, "DevOpsAction", {
             get: function () {
                 return this.Environment.DevOpsActions && this.DevOpsActionLookup
@@ -5535,13 +5551,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BuildPipelineFormComponent.prototype, "SelectedHostingOption", {
+            // (ho) => ho.Lookup === this.BuildPipeline
+            get: function () {
+                var _this = this;
+                var _a, _b;
+                return (_b = (_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) === null || _b === void 0 ? void 0 : _b.find(function (ho) { return ho.Lookup === _this.BuildPipeline; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BuildPipelineFormComponent.prototype, "SourceControlLookups", {
-            // @Input('main-branch')
-            // public MainBranch: string;
-            // @Input('organization')
-            // public Organization: string;
-            // @Input('repository')
-            // public Repository: string;
             get: function () {
                 return Object.keys(this.SourceControls || {});
             },
@@ -5556,13 +5576,94 @@
             configurable: true
         });
         BuildPipelineFormComponent.prototype.ngOnInit = function () {
+            var _a, _b, _c;
+            this.BuildPipelineFormGroup = this.formBuilder.group({});
+            this.loadProjectHostingDetails();
+            console.log("ARTIFACT: ", this.Artifact);
+            // this.BuildPipeline ||
+            // github-artifacts-release is  this.HostingDetails?.HostingOptions[0]?.Lookup
+            this.BuildPipeline =
+                ((_a = this.HostingDetails) === null || _a === void 0 ? void 0 : _a.HostingOptions) ? (_c = (_b = this.HostingDetails) === null || _b === void 0 ? void 0 : _b.HostingOptions[0]) === null || _c === void 0 ? void 0 : _c.Lookup : '';
+            console.log("Build Pipeline HERE= ", this.BuildPipeline);
+            if (this.BuildPipelineFormGroup != null) {
+                this.BuildPipelineFormGroup.removeControl('hostingDetails');
+            }
+            this.BuildPipelineFormGroup.addControl('hostingDetails', this.formBuilder.group({
+                buildPipeline: [this.BuildPipeline, [forms.Validators.required]],
+            }));
+            this.setupControlsForForm();
+        };
+        //API METHODS
+        BuildPipelineFormComponent.prototype.BuildPipelineChanged = function () {
+            var _a, _b;
+            console.log("build pipeline value: ", (_a = this.BuildPipelineFormControl) === null || _a === void 0 ? void 0 : _a.value);
+            this.BuildPipeline = (_b = this.BuildPipelineFormControl) === null || _b === void 0 ? void 0 : _b.value;
+            this.setupControlsForForm();
+        };
+        //  Helpers
+        BuildPipelineFormComponent.prototype.setupControlsForForm = function () {
+            var _this = this;
+            //for (const ctrlName in this.BuildPipelineFormGroup.controls) {
+            //devOpsAction doesn't exist
+            //removes hosting details
+            // if (ctrlName !== 'buildPipeline' && ctrlName !== 'devOpsAction') {
+            //   console.log("removing control: ", ctrlName)
+            //   this.BuildPipelineFormGroup.removeControl(ctrlName);
+            // }
+            //}
+            var _a, _b, _c, _d, _e, _f;
+            this.BuildPipelineFormGroup.addControl('devOpsActionName', this.formBuilder.control(((_a = this.DevOpsAction) === null || _a === void 0 ? void 0 : _a.Name) || ((_b = this.SelectedHostingOption) === null || _b === void 0 ? void 0 : _b.Name) || '', [forms.Validators.required]));
+            (_d = (_c = this.SelectedHostingOption) === null || _c === void 0 ? void 0 : _c.Inputs) === null || _d === void 0 ? void 0 : _d.forEach(function (input) {
+                var validators = input.Required ? [forms.Validators.required] : [];
+                _this.BuildPipelineFormGroup.addControl(input.Lookup, _this.formBuilder.control(_this.Artifact[input.Lookup] || input.DefaultValue || '', validators));
+                // if (this.Disabled) {
+                //   this.FormGroup.controls[input.Lookup].disable();
+                // }
+            });
+            debugger;
+            if (((_e = this.BuildPipelineFormControl) === null || _e === void 0 ? void 0 : _e.value) === 'npm-release') {
+                debugger;
+                if (!this.BuildPipelineFormGroup.controls.npmToken) {
+                    this.BuildPipelineFormGroup.addControl('npmToken', this.formBuilder.control('', this.Disabled ? [] : [forms.Validators.required]));
+                    if (this.Disabled) {
+                        this.BuildPipelineFormGroup.controls.npmToken.disable();
+                    }
+                }
+            }
+            else if (((_f = this.BuildPipelineFormControl) === null || _f === void 0 ? void 0 : _f.value) === 'github-artifacts-release') {
+                if (this.BuildPipelineFormGroup.controls.npmToken) {
+                    this.BuildPipelineFormGroup.removeControl('npmToken');
+                }
+            }
+        };
+        BuildPipelineFormComponent.prototype.loadProjectHostingDetails = function () {
+            var _this = this;
+            // this.HostingDetails.Loading = true;
+            // this.Organization,
+            // this.Repository,
+            // this.MainBranch
+            // 'powhound4',
+            //     "RedwoodCrystals",
+            //     "master"
+            this.appsFlowSvc
+                .LoadProjectHostingDetails('powhound4', "RedwoodCrystals", "master")
+                .subscribe(function (response) {
+                _this.HostingDetails = response.Model;
+                console.log("response: ", response);
+                _this.HostingDetails.Loading = false;
+            }, function (err) {
+                _this.HostingDetails.Loading = false;
+                console.log("hosting details LOADING EERR: ", _this.HostingDetails);
+                console.log("ERR: ", err);
+            });
+            console.log("HOSTING DETAILS: ", this.HostingDetails);
         };
         return BuildPipelineFormComponent;
     }());
     BuildPipelineFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-build-pipeline-form',
-                    template: "<div class=\"form-card\" fxFlex=\"35%\" fxFlex.lt-md=\"100%\">\n    <mat-card\n      class=\"spread\"\n      *ngIf=\"EditingSourceControl?.Branches?.length > 0\"\n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n          <!-- [details]=\"HostingDetails\" \n          [organization]=\"Organization\"\n        [formGroup]=\"DevOpsFormGroup\"-->\n\n          <lcu-hosting-details-form-group\n            [artifact]=\"Artifact\"\n            [devops-action]=\"DevOpsActions[DevOpsActionLookup]\"\n            \n            \n            [disabled]=\"false\"\n          ></lcu-hosting-details-form-group>\n        </ng-container>\n      </mat-card-content>\n    </mat-card>\n  </div>\n",
+                    template: "<form class=\"form-card\" [formGroup]=\"BuildPipelineFormGroup\">\n    <!-- *ngIf=\"EditingSourceControl?.Branches?.length > 0\" -->\n    <mat-card\n      class=\"spread\"  \n    >\n      <mat-card-header>\n        <mat-card-title> Build Pipeline </mat-card-title>\n\n        <mat-hint>\n          Changes made here are reflected for all sources using this\n          DevOpsAction\n        </mat-hint>\n      </mat-card-header>\n\n      <mat-card-content>\n\n        <ng-container>\n\n        <div  *ngIf=\"!HostingDetails?.Loading\">\n          <mat-form-field class=\"mat-full-width\">\n            <mat-select\n              formControlName=\"buildPipeline\"\n              placeholder=\"Build Pipeline\"\n              [disabled]=\"Disabled\"\n              (selectionChange)=\"BuildPipelineChanged()\"\n              required\n            >\n              <ng-container\n                *ngFor=\"let hostOption of HostingDetails?.HostingOptions; let i = index\"\n              >\n                <mat-option [value]=\"hostOption?.Lookup\">\n                  {{ hostOption.Name }}\n                </mat-option>\n              </ng-container>\n            </mat-select>\n        \n            <mat-hint>\n              <ng-container *ngFor=\"let hostOption of HostingDetails?.HostingOptions\">\n                <span *ngIf=\"BuildPipeline == hostOption?.Lookup\">\n                  {{ hostOption.Description }}\n                </span>\n              </ng-container>\n            </mat-hint>\n          </mat-form-field>\n        \n          <mat-form-field class=\"mat-full-width\">\n            <input\n              matInput\n              formControlName=\"devOpsActionName\"\n              placeholder=\"Name of DevOps Action\"\n              required=\"true\"\n            />\n          </mat-form-field>\n        \n          <ng-container *ngFor=\"let input of SelectedHostingOption?.Inputs\">\n            <mat-form-field class=\"mat-full-width\">\n              <input\n                matInput\n                [formControlName]=\"input.Lookup\"\n                [placeholder]=\"input.Placeholder\"\n                [required]=\"input.Required\"\n              />\n        \n              <mat-hint>{{ input.Hint }}</mat-hint>\n            </mat-form-field>\n          </ng-container>\n        \n          <div *ngIf=\"BuildPipeline == 'npm-release'\">\n            <mat-form-field class=\"mat-full-width with-hint padding-bottom-4\">\n              <mat-icon matPrefix>security</mat-icon>\n        \n              <input\n                id=\"npm-token\"\n                matInput\n                type=\"text\"\n                formControlName=\"npmToken\"\n                placeholder=\"NPM token\"\n                [required]=\"!Disabled\"\n                style=\"-webkit-text-security: disc;\"\n              />\n              <mat-hint>\n                Securely publish to NPM, provide an NPM Personal Access Token (PAT) with publish access to the organization used for your NPM packages.              \n                Learn how to create and view access tokens \n                <a\n                  href=\"https://docs.npmjs.com/creating-and-viewing-access-tokens\"\n                  target=\"_blank\"\n                >\n                  here.\n                </a>\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </div>\n        \n        <div *ngIf=\"HostingDetails?.Loading\">\n          <div class=\"spread\">\n            <lcu-loader style=\"margin: auto\" [loading]=\"true\"></lcu-loader>\n        \n            <div class=\"margin-3\">\n              <h4 class=\"mat-title\">Loading hosting details</h4>\n            </div>\n          </div>\n        </div>\n        </ng-container>\n      </mat-card-content>\n    </mat-card>\n</form>\n",
                     styles: [""]
                 },] }
     ];
@@ -5571,7 +5672,9 @@
         { type: ApplicationsFlowService }
     ]; };
     BuildPipelineFormComponent.propDecorators = {
+        BuildPipeline: [{ type: i0.Input, args: ['build-pipeline',] }],
         DevOpsActionLookup: [{ type: i0.Input, args: ['devops-action-lookup',] }],
+        Disabled: [{ type: i0.Input, args: ['disabled',] }],
         Environment: [{ type: i0.Input, args: ['environment',] }]
     };
 
@@ -6068,7 +6171,7 @@
     BuildPipelineDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-build-pipeline-dialog',
-                    template: "<lcu-build-pipeline-form\n[devops-action-lookup]=\"data.devopsActionLookup\"\n[environment]=\"data.environment\"\n>\n\n</lcu-build-pipeline-form>\n",
+                    template: "<lcu-build-pipeline-form\n[build-pipeline]=\"data.buildPipeline\"\n[devops-action-lookup]=\"data.devopsActionLookup\"\n[environment]=\"data.environment\"\n>\n\n</lcu-build-pipeline-form>\n",
                     styles: [""]
                 },] }
     ];