diff options
Diffstat (limited to 'cds-ui/designer-client/src')
11 files changed, 352 insertions, 208 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index ddde3dadc..a281aafae 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -24,14 +24,14 @@ <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div> <ul class="dropdown-content"> <li> - <i class="icon-get_started" aria-hidden="true"></i> - <p> - <input id="clicker3" type="checkbox" /> - <label for="clicker"> - Getting Started - <span>Quick steps to help you get started</span> - </label> - </p> + <i class="icon-get_started" aria-hidden="true"></i> + <p> + <input id="clicker3" type="checkbox"/> + <label for="clicker"> + Getting Started + <span>Quick steps to help you get started</span> + </label> + </p> </li> <!-- <li> <i class="icon-get_started" aria-hidden="true"></i> @@ -91,7 +91,7 @@ <span>Save</span> </button> <button data-target="#discardChangesModal" data-toggle="modal" class="action-button" - [disabled]="!isSaveEnabled"> + [disabled]="!isSaveEnabled"> <i class="icon-discard-sm" aria-hidden="true"></i> <span>Discard Changes</span> </button> @@ -108,7 +108,7 @@ </a> <a class="action-button" - (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> + (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)"> <i class="icon-download" aria-hidden="true"></i> <span>Download</span> </a> @@ -149,19 +149,19 @@ <ul class="package-contributers"> <li> <button type="button" class="border-fade" data-toggle="tooltip" - data-placement="bottom" title="User name"> + data-placement="bottom" title="User name"> <img src="/assets/img/img-user1.jpeg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user2.jpg"> </button> </li> <li> <button type="button" data-toggle="tooltip" data-placement="bottom" - title="User name"> + title="User name"> <img src="/assets/img/img-user3.jpg"> </button> </li> @@ -179,24 +179,24 @@ <!-- Button trigger modal - 1st Action --> <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" - data-toggle="modal" [attr.data-target]="dataTarget"> + data-toggle="modal" [attr.data-target]="dataTarget"> <i class="icon-topologyView-active"></i> Designer Mode </button> <!-- Designer Modal --> <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" - title="Close"> + title="Close"> <i class="icon-action-close"></i> </button> </div> <div class="modal-body"> <div id="carouselExampleIndicators" class="carousel slide" - data-ride="carousel" data-interval="false"> + data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <!--OPTIONS SLIDE--> <div class="carousel-item active"> @@ -206,15 +206,15 @@ <!--Custom Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="1"> + data-target="#carouselExampleIndicators" + data-slide-to="1"> <div class="card actionType custom"> <div class="card-body"> <h3>Custom</h3> <p>Start with your own settings</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="1" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="1" class="btn"> Create </button> </div> @@ -224,16 +224,16 @@ <!--Default Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="2"> + data-target="#carouselExampleIndicators" + data-slide-to="2"> <div class="card actionType default"> <div class="card-body"> <h3>Default</h3> <p>Explore preset actions from CDS Action Catalog</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="2" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="2" class="btn"> Select </button> </div> @@ -243,8 +243,8 @@ <!--Recent Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="3"> + data-target="#carouselExampleIndicators" + data-slide-to="3"> <div class="card actionType recent"> <div class="card-body"> <h3>Recent</h3> @@ -252,8 +252,8 @@ recent packages</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="3" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="3" class="btn"> Select </button> </div> @@ -263,15 +263,15 @@ <!--Import Action--> <div class="col-3 d-flex"> <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="4"> + data-target="#carouselExampleIndicators" + data-slide-to="4"> <div class="card actionType import"> <div class="card-body"> <h3>Import</h3> <p>Import your own action files</p> <button - data-target="#carouselExampleIndicators" - data-slide-to="4" class="btn"> + data-target="#carouselExampleIndicators" + data-slide-to="4" class="btn"> Browse </button> </div> @@ -282,7 +282,7 @@ <div class="row"> <div class="col text-center"> <button class="btn skip-btn" data-dismiss="modal" - (click)="goToDesignerMode(viewedPackage.id)"> + (click)="goToDesignerMode(viewedPackage.id)"> Skip to Designer Canvas </button> @@ -292,16 +292,16 @@ <!--Custom Action Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Create Custom Action</h1> <div class="form-group text-center"> <input type="text" [(ngModel)]="customActionName" - class="form-control customAction" - placeholder="Type Action Name" autofocus> - <button type="button" data-dismiss="modal" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start + class="form-control customAction" + placeholder="Type Action Name" autofocus> + <button type="button" data-dismiss="modal" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start </button> </div> @@ -309,7 +309,7 @@ <!--Default Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Choose Action(s) from CDS Default Package </h1> <div class="actionFormWrapper"> @@ -331,7 +331,7 @@ </div> <div class="col"> <input type="text" class="form-control searchInput" - placeholder="Search"> + placeholder="Search"> </div> </div> <div class="row actionsListScroll"> @@ -339,10 +339,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" required> + class="custom-control-input" + id="customControlValidation1" + required> <label class="custom-control-label" - for="customControlValidation1">config-assign</label> + for="customControlValidation1">config-assign</label> </div> </div> </div> @@ -350,10 +351,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" required> + class="custom-control-input" + id="customControlValidation2" + required> <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> + for="customControlValidation2">config-assign-test</label> </div> </div> </div> @@ -361,10 +363,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" required> + class="custom-control-input" + id="customControlValidation3" + required> <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> + for="customControlValidation3">config-deploy</label> </div> </div> </div> @@ -372,10 +375,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" required> + class="custom-control-input" + id="customControlValidation4" + required> <label class="custom-control-label" - for="customControlValidation4">config-modify</label> + for="customControlValidation4">config-modify</label> </div> </div> </div> @@ -383,10 +387,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -394,10 +399,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -405,10 +411,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -416,10 +423,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -427,10 +435,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -438,10 +447,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -449,10 +459,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -461,8 +472,8 @@ <div class="col text-center"> <p class="selectedActions">0 selected</p> <button type="button" data-dismiss="modal" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start </button> </div> </div> @@ -471,7 +482,7 @@ <!--Recent Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Choose Action(s) from Recent Packages</h1> <div class="actionFormWrapper"> @@ -501,7 +512,7 @@ </div> <div class="col"> <input type="text" class="form-control searchInput" - placeholder="Search"> + placeholder="Search"> </div> </div> <div class="row actionsListScroll"> @@ -509,10 +520,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" required> + class="custom-control-input" + id="customControlValidation1" + required> <label class="custom-control-label" - for="customControlValidation1">config-assign</label> + for="customControlValidation1">config-assign</label> </div> </div> </div> @@ -520,10 +532,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" required> + class="custom-control-input" + id="customControlValidation2" + required> <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> + for="customControlValidation2">config-assign-test</label> </div> </div> </div> @@ -531,10 +544,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" required> + class="custom-control-input" + id="customControlValidation3" + required> <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> + for="customControlValidation3">config-deploy</label> </div> </div> </div> @@ -542,10 +556,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" required> + class="custom-control-input" + id="customControlValidation4" + required> <label class="custom-control-label" - for="customControlValidation4">config-modify</label> + for="customControlValidation4">config-modify</label> </div> </div> </div> @@ -553,10 +568,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -564,10 +580,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -575,10 +592,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -586,10 +604,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -597,10 +616,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -608,10 +628,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -619,10 +640,11 @@ <div class="actionName"> <div class="custom-control custom-checkbox"> <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" required> + class="custom-control-input" + id="customControlValidation5" + required> <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> + for="customControlValidation5">config-assign1</label> </div> </div> </div> @@ -639,30 +661,30 @@ <!--Import Actions Form--> <div class="carousel-item"> <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i + data-slide-to="0" title="Back" class="btn back"><i class="icon-action-back"></i></button> <h1>Import Action(s)</h1> <div class="actionFormWrapper"> <div class="row"> <div class="col"> <ngx-file-drop accept=".json" - dropZoneLabel="Drop files here" - (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" - (onFileLeave)="fileLeave($event)"> + dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" + (onFileLeave)="fileLeave($event)"> <ng-template ngx-file-drop-content-tmp - let-openFileSelector="openFileSelector"> + let-openFileSelector="openFileSelector"> <div class="folder-upload"> <img - src="assets/img/folder-upload.svg" /> + src="assets/img/folder-upload.svg"/> </div> <div class="folder-upload-text"> Drag & Drop file </div> <div class="folder-upload-text">or <button type="button" - class="btn btn-sm btn-primary" - (click)="openFileSelector()"> + class="btn btn-sm btn-primary" + (click)="openFileSelector()"> Browse Files </button> @@ -676,17 +698,17 @@ <div class="upload-table"> <table class="table"> <thead> - <tr + <tr *ngFor="let item of uploadedFiles; let i=index"> - <th width="40"><img - src="assets/img/icon-file-code.svg" /> - </th> - <th>{{ item.name }}</th> - <th width="40" class="text-right"> - <img - src="assets/img/icon-remove-file.svg" /> - </th> - </tr> + <th width="40"><img + src="assets/img/icon-file-code.svg"/> + </th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"> + <img + src="assets/img/icon-remove-file.svg"/> + </th> + </tr> </thead> </table> </div> @@ -707,7 +729,7 @@ </div> </div> <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal" - data-target="#enrichModal"> + data-target="#enrichModal"> <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich </button> @@ -725,17 +747,17 @@ <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab" - href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" - autofocus #nameit (focusout)="saveMetaData()">METADATA</a> + href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true" + autofocus #nameit (focusout)="saveMetaData()">METADATA</a> <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" - role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> + role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" - role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> + role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" - role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> + role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" - href="#nav-authentication" role="tab" aria-controls="nav-authentication" - aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> + href="#nav-authentication" role="tab" aria-controls="nav-authentication" + aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> </div> </div> @@ -744,24 +766,24 @@ <div class="col"> <div class="tab-content" id="nav-tabContent" (change)="clickEvent()"> <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab"> + aria-labelledby="nav-metadata-tab"> <app-metadata-tab></app-metadata-tab> </div> <div class="tab-pane fade" id="nav-template" role="tabpanel" - aria-labelledby="nav-template-tab"> + aria-labelledby="nav-template-tab"> <app-template-mapping></app-template-mapping> </div> <div class="tab-pane fade" id="nav-scripts" role="tabpanel" - aria-labelledby="nav-scripts-tab"> + aria-labelledby="nav-scripts-tab"> <app-scripts-tab></app-scripts-tab> </div> <div class="tab-pane fade" id="nav-imports" role="tabpanel" - aria-labelledby="nav-imports-tab"> + aria-labelledby="nav-imports-tab"> <app-imports-tab></app-imports-tab> </div> <div class="tab-pane fade" id="nav-authentication" role="tabpanel" - aria-labelledby="nav-authentication-tab"> + aria-labelledby="nav-authentication-tab"> <div class="card creat-card"> <div class="editor-container"> <app-dsl-definitions-tab></app-dsl-definitions-tab> @@ -778,13 +800,13 @@ <!-- Enrich Modal --> <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body"> @@ -793,15 +815,16 @@ <li>1. Copy and paste "workflows" and "node_templates"</li> <li>2. Press <b>Enrich</b> button</li> </ul> - <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'" - [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" - [theme]="'eclipse'" #editor style="height:300px;"> + <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'" + [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" + (textChanged)="textChanged($event)" + #editor style="height:300px;"> </ace-editor> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich" - (click)="enrichBluePrint()">Enrich + (click)="enrichBluePrint()">Enrich </button> </div> </div> @@ -809,7 +832,7 @@ </div> <!-- Delete Modal --> <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -831,7 +854,7 @@ </div> <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel" - aria-hidden="true"> + aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> @@ -851,4 +874,4 @@ </div> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 079e4edbc..dc5697f78 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; import {PackageCreationStore} from '../package-creation/package-creation.store'; @@ -18,13 +18,15 @@ import {NgxFileDropEntry} from 'ngx-file-drop'; import {PackageCreationService} from '../package-creation/package-creation.service'; import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service'; +import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; +import {Subject} from 'rxjs'; @Component({ selector: 'app-configuration-dashboard', templateUrl: './configuration-dashboard.component.html', styleUrls: ['./configuration-dashboard.component.css'], }) -export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit { +export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) metadataTabComponent: MetadataTabComponent; @@ -47,6 +49,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl metadataClasses = 'nav-item nav-link active'; private cbaPackage: CBAPackage = new CBAPackage(); dataTarget: any = ''; + ngUnsubscribe = new Subject(); + private designerState: any; constructor( private route: ActivatedRoute, @@ -61,15 +65,25 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl ) { super(); - this.packageCreationStore.state$.subscribe( - cbaPackage => { - this.cbaPackage = cbaPackage; - }); + } ngOnInit() { this.vlbDefinition.topology_template = new TemplateTopology(); - + this.packageCreationStore.state$ + .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe( + cbaPackage => { + this.cbaPackage = cbaPackage; + }); + this.designerStore.state$.pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe(state => { + this.designerState = state; + this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template); + }); this.elementRef.nativeElement.focus(); this.refreshCurrentPackage(); const regexp = RegExp(this.versionPattern); @@ -206,13 +220,17 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } textChanged($event: {}) { - this.packageCreationStore.addTopologyTemplate(this.vlbDefinition.topology_template); + this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates; + this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows; + this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content; } enrichBluePrint() { - + this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology); this.formTreeData(); this.enrichPackage(); + this.designerStore.clear(); + this.packageCreationStore.clear(); } @@ -259,13 +277,19 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl return this.isSaveEnabled; } + ngOnDestroy() { + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); + } + checkSkipTypesOfAction() { console.log(this.cbaPackage); - if (this.cbaPackage.templateTopology.node_templates && this.cbaPackage.templateTopology.workflows) { - console.log('eeeeee'); + if (this.cbaPackage.templateTopology && this.cbaPackage.templateTopology.node_templates + && this.cbaPackage.templateTopology.workflows) { this.goToDesignerMode(this.id); } else { this.dataTarget = '#exampleModalLong'; } } } + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 099d96615..19d000f8f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -25,32 +25,32 @@ limitations under the License. import dagre from 'dagre'; import graphlib from 'graphlib'; -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; import * as joint from 'jointjs'; import './jointjs/elements/palette.function.element'; import './jointjs/elements/action.element'; import './jointjs/elements/board.function.element'; -import { DesignerStore } from './designer.store'; -import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; -import { GraphUtil } from './graph.util'; -import { GraphGenerator } from './graph.generator.util'; -import { FunctionsStore } from './functions.store'; -import { Subject } from 'rxjs'; -import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; -import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; -import { ActivatedRoute, Router } from '@angular/router'; -import { DesignerService } from './designer.service'; -import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model'; -import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes'; -import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder'; -import { PackageCreationStore } from '../package-creation/package-creation.store'; -import { PackageCreationService } from '../package-creation/package-creation.service'; -import { PackageCreationUtils } from '../package-creation/package-creation.utils'; +import {DesignerStore} from './designer.store'; +import {ActionElementTypeName} from 'src/app/common/constants/app-constants'; +import {GraphUtil} from './graph.util'; +import {GraphGenerator} from './graph.generator.util'; +import {FunctionsStore} from './functions.store'; +import {Subject} from 'rxjs'; +import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; +import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import {ActivatedRoute, Router} from '@angular/router'; +import {DesignerService} from './designer.service'; +import {FilesContent, FolderNodeElement} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; +import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; +import {PackageCreationStore} from '../package-creation/package-creation.store'; +import {PackageCreationService} from '../package-creation/package-creation.service'; +import {PackageCreationUtils} from '../package-creation/package-creation.utils'; import * as JSZip from 'jszip'; -import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service'; -import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model'; -import { TopologyTemplate } from './model/designer.topologyTemplate.model'; -import { ToastrService } from 'ngx-toastr'; +import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service'; +import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; +import {TopologyTemplate} from './model/designer.topologyTemplate.model'; +import {ToastrService} from 'ngx-toastr'; @Component({ selector: 'app-designer', @@ -74,7 +74,7 @@ export class DesignerComponent implements OnInit, OnDestroy { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; ngUnsubscribe = new Subject(); - opt = { tx: 100, ty: 100 }; + opt = {tx: 100, ty: 100}; filesData: any = []; folder: FolderNodeElement = new FolderNodeElement(); zipFile: JSZip = new JSZip(); @@ -117,7 +117,7 @@ export class DesignerComponent implements OnInit, OnDestroy { publishBluePrint() { this.create(); - this.zipFile.generateAsync({ type: 'blob' }) + this.zipFile.generateAsync({type: 'blob'}) .then(blob => { const formData = new FormData(); formData.append('file', blob); @@ -164,7 +164,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion) .subscribe(response => { - const blob = new Blob([response], { type: 'application/octet-stream' }); + const blob = new Blob([response], {type: 'application/octet-stream'}); this.packageCreationExtractionService.extractBlobToStore(blob); }); } @@ -226,9 +226,10 @@ export class DesignerComponent implements OnInit, OnDestroy { setLinkVertices: false, marginX: 10, marginY: 10, - clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 }, + clusterPadding: {top: 100, left: 30, right: 10, bottom: 100}, rankDir: 'TB' }); + this.actions = []; for (const workflowsKey in topologtTemplate.workflows) { if (workflowsKey && !this.actions.includes(workflowsKey)) { this.actions.push(workflowsKey); @@ -455,7 +456,7 @@ export class DesignerComponent implements OnInit, OnDestroy { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({ type: 'blob' }) + this.zipFile.generateAsync({type: 'blob'}) .then(blob => { this.packageCreationService.savePackage(blob).subscribe( bluePrintDetailModels => { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts index 0d20f9662..e07fbb94d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts @@ -144,4 +144,9 @@ export class DesignerStore extends Store<DesignerDashboardState> { } }); } + + clear() { + this.setState(new DesignerDashboardState()); + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts index a9deb675a..e2790d552 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts @@ -80,24 +80,25 @@ export class DesignerCreationMode extends PackageCreationModes { if (!key.includes(cbaPackage.metaData.name)) { files.push({file: key}); } else { - // it means this is entry definition insideVlbDefinition = JSON.parse(valueOfFile); } }); } console.log(vlbDefinition); - vlbDefinition.imports = files; - if (insideVlbDefinition && insideVlbDefinition.topology_template) { - vlbDefinition.topology_template = insideVlbDefinition.topology_template; - } console.log(cbaPackage.definitions.dslDefinition.content); - if (cbaPackage.definitions.dslDefinition.content) { + if (cbaPackage.definitions && cbaPackage.definitions.dslDefinition && + cbaPackage.definitions.dslDefinition.content) { vlbDefinition.dsl_definitions = JSON.parse(cbaPackage.definitions.dslDefinition.content); } - if (cbaPackage.templateTopology.content) { + vlbDefinition.imports = files; + if (insideVlbDefinition && insideVlbDefinition.topology_template) { + vlbDefinition.topology_template = insideVlbDefinition.topology_template; + } else if (cbaPackage.templateTopology && cbaPackage.templateTopology.content) { vlbDefinition.topology_template = JSON.parse(cbaPackage.templateTopology.content); } + + console.log(vlbDefinition); const value = packageCreationUtils.transformToJson(vlbDefinition); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts index b4de578b9..6d980190e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts @@ -10,10 +10,11 @@ export class MappingAdapter { private dependanciesSource: Map<string, string>) { } ToMapping(): Mapping { + // console.log(this.resourceDictionary.definition.property); const mapping = new Mapping(); mapping.name = this.resourceDictionary.name; mapping.dictionaryName = this.resourceDictionary.name; - mapping.property = this.resourceDictionary.definition.property; + mapping.property = Object.assign({}, this.resourceDictionary.definition.property); mapping.inputParam = false; mapping.dictionarySource = this.dependanciesSource.get(mapping.name); if (this.dependancies.get(mapping.name)) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 870770ac5..d93d49dba 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -71,7 +71,8 @@ </div> </div> <div class="create-template-import">Use the editor to add parameters or you can also - <a href="#" data-toggle="modal" data-target="#templateModal"><b>Import + <a href="#" data-toggle="modal" (click)="allowedExt=['.'+templateExt]" + data-target="#templateModal"><b>Import File</b></a>. <br /> <span class="templateNote"><i class="icon-info" aria-hidden="true"></i> When you import new file, the new attributes will replace current attributes.</span></div> @@ -98,8 +99,8 @@ <div class="card-body"> <p class="text-center"><b>Select a source to load config parameters</b></p> <div class="text-center"> - <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)" - (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0 + <button [disabled]="!(templateFileContent?.trim()?.length > 0)" + (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="templateFileContent?.trim()?.length > 0 ?'hover-enable':'hover-disable'"> <i class="icon-use-attributes"></i> <br /> @@ -153,12 +154,13 @@ <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> </thead> <tbody> - <tr *ngFor="let dict of resourceDictionaryRes"> + <tr *ngFor="let dict of resourceDictionaryRes;let i=index;trackBy: identify"> <td> <div class="custom-control custom-checkbox" tooltip="Select" placement="bottom"> <input type="checkbox" class="custom-control-input" @@ -170,6 +172,13 @@ (click)="selectProp(dict.name)"></td> --> </td> <td> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" + id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck-{{dict.name}}"></label> + </div> + <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg"> <img *ngIf="!dict.definition?.property?.required" @@ -189,12 +198,13 @@ <!-- <select class="custom-select"> <option *ngFor="let val of getKeys(dependancies)"> {{ getValue(dict.name)}}</option> - </select> --> <input type="text" class="form-control" [ngModel]="getValue(dict.name)"> <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict.definition?.property?.default }}</td> + <td><input type="text" class="form-control" #velocity + (input)="setVelocity(i,velocity.value)"></td> <td>{{ dict.definition?.property?.type }}</td> <td>{{ dict.definition?.property['entry_schema'] }}</td> </tr> @@ -225,6 +235,7 @@ <th>Dictionary Source</th> <th>Dependancies</th> <th>Default</th> + <th>Velocity</th> <th>Data Type</th> <th>Entry Schema</th> </tr> @@ -257,6 +268,10 @@ <!-- {{ dict.definition.sources }} --> </td> <td>{{ dict['property']['default'] }}</td> + <td *ngIf="dict?.property?.metadata"> + {{dict?.property?.metadata['transform-template']}} + </td> + <td *ngIf="!dict?.property?.metadata"></td> <td>{{ dict['property']['type'] }}</td> <td>{{ dict['property']['entry_schema'] }}</td> </tr> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index 9d94b6bf8..a99f65b86 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -301,8 +301,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { const fileReader = new FileReader(); fileReader.onload = (e) => { this.templateFileContent = fileReader.result.toString(); - this.variables = this.getTemplateVariable(this.templateFileContent); - console.log(this.variables); + // this.variables = this.getTemplateVariable(this.templateFileContent); + // console.log(this.variables); }; fileReader.readAsText(file); @@ -338,12 +338,27 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { this.showCreationView.emit('close create form and open list'); } + identify(index, item) { + return item.name; + } + setVelocity(index, value) { + // console.log('velocity value = ' + value); + // console.log(this.resourceDictionaryRes[index]); + // tslint:disable-next-line: no-string-literal + this.resourceDictionaryRes[index].definition.property['metadata'] = { + 'transform-template': value + }; + console.log(this.resourceDictionaryRes[index]); + } + getMappingTableFromTemplate(e) { console.log('-' + this.templateFileContent + '-'); this.resourceDictionaryRes = []; if (e) { e.preventDefault(); } + this.variables = this.getTemplateVariable(this.templateFileContent); + console.log(this.variables); if (this.variables && this.variables.length > 0) { console.log('base'); this.packageCreationService.getTemplateAndMapping(this.variables).subscribe(res => { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html index 274435cd4..d578582fd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html @@ -45,9 +45,14 @@ (click)="resetTheUploadedFiles()">Cancel </button> <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" - data-dismiss="modal" (click)="openFilesInCreationPackage();saveFileToStore()"> + data-dismiss="modal" (click)="importAndSave()"> + Import&Save + </button> + <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" (click)="importPackageAndViewIt()"> Import </button> + </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts index dae58a493..7496338d6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts @@ -3,6 +3,10 @@ import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop'; import {PackageCreationExtractionService} from '../../package-creation/package-creation-extraction.service'; import {Router} from '@angular/router'; import {PackageCreationStore} from '../../package-creation/package-creation.store'; +import * as JSZip from 'jszip'; +import {PackageCreationService} from '../../package-creation/package-creation.service'; +import {ToastrService} from 'ngx-toastr'; +import {PackagesStore} from '../../packages.store'; @Component({ selector: 'app-import-package', @@ -14,10 +18,14 @@ export class ImportPackageComponent implements OnInit { public uploadedFiles: FileSystemFileEntry[] = []; private fileNames: Set<string> = new Set(); fileToDelete: any = {}; + zipFile: JSZip = new JSZip(); public files: NgxFileDropEntry[] = []; constructor(private packageCreationExtractionService: PackageCreationExtractionService, private packageCreationStore: PackageCreationStore, + private packageCreationService: PackageCreationService, + private toastService: ToastrService, + private packagesStore: PackagesStore, private router: Router) { } @@ -72,7 +80,12 @@ export class ImportPackageComponent implements OnInit { public fileLeave(event) { console.log(event); } -// TODO mix two function in ond bigger one + + importPackageAndViewIt() { + this.openFilesInCreationPackage(); + this.saveFileToStore(); + } + saveFileToStore() { console.log(this.uploadedFiles.length); const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]); @@ -91,4 +104,23 @@ export class ImportPackageComponent implements OnInit { console.log(err); } } + + importAndSave() { + const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]); + this.zipFile = new JSZip(); + this.zipFile.loadAsync(file).then(zip => { + this.zipFile = zip; + console.log(this.zipFile); + this.resetTheUploadedFiles(); + this.zipFile.generateAsync({type: 'blob'}).then(blob => { + this.packageCreationService.savePackage(blob).subscribe( + bluePrintDetailModels => { + this.toastService.info('package is imported and saved successfully '); + this.router.navigate(['/packages']); + this.packagesStore.getAll(); + }, error => + this.toastService.error('there is an error happened ' + error)); + }); + }); + } } diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 2d7e23094..91b1f8652 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -18,7 +18,7 @@ body{ transition: 0.3s !important; } /*Bootstrap*/ -.custom-control-input:checked ~ .custom-control-label::before { +.custom-control-input:checked ~ .custom-control-label::before{ border-color: transparent !important; } .btn-outline-danger{ @@ -33,6 +33,28 @@ body{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; } +.reuiredInput .custom-control-label::before{ + width: 18px !important; + height: 18px !important; + border-radius: 50% !important; +} + +.reuiredInput .custom-control-label::after{ + content: "_"; + color: #C4CEDB !important; + width: 18px !important; + height: 18px !important; + line-height: 6px; + text-align: center; +} +.reuiredInput .custom-control-input:checked ~ .custom-control-label::after{ + top: 4px !important; + left: -24px !important; + content: ""; +} +.reuiredInput .custom-control-input:checked ~ .custom-control-label::before{ + background: #66BB00 !important; +} .custom-control-input:checked ~ .custom-control-label::before{ background: #1B3E6F !important; } |