diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html')
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html | 345 |
1 files changed, 303 insertions, 42 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 1f5245222..3cc8707c5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -1,48 +1,309 @@ <app-header></app-header> -<div class="alert-dark" style="padding: 100px"> - <div> - <label>mode</label> - <label name="trst" *ngFor="let mode of modes; let i = index"> - <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode"> - {{mode}} - </label> - <br> - <label>dictionary Library Instances</label> - <label> - <select name="cars"> - <option value="audi" - *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> - </select> - </label> - </div> - <div> - <label>Name</label> - <label> - <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"> - </label> - <br> - <label>Description</label> - <label> - <input type="input"> - </label> - <br> - <label>Version</label> - <label> - <input type="input"> - </label> - <br> - <label>tags</label> - <label> - <input type="input"> - </label> - <br> + +<div class="new-wrapper"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0">CBA Packages + <span>({{numberOfPackages}} packages)</span> + </h2> + <div class="col"> + </div> + </div> + </header> + + <div class="main-container"> + + <div class="container-fluid body-container creat-container-all"> + + <div class="creat-container"> + <div class="creat-action-container"> + <a href="#" class="action-button"> + <i class="icon-clone" aria-hidden="true"></i> + <span>Clone</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-archive" aria-hidden="true"></i> + <span>Archive</span> + </a> + + <a href="#" class="action-button"> + <i class="icon-delete" aria-hidden="true"></i> + <span>Delete</span> + </a> + </div> + <nav class="row"> + <div class="col pr-0"> + <button class="float btn btn-sm btn-primary">Save</button> + <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button> + </div> + </nav> + <nav class="row"> + <!--Nav Tabs--> + <div class="col pr-0"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" + href="#nav-metadata" + role="tab" aria-controls="nav-metadata" + aria-selected="true">METADATA</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">IMPORTS</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> + <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> + <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> + </div> + </div> + + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Mode</label> + <label name="trst" *ngFor="let mode of modes; let i = index"> + <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio" + name="exampleRadios" id="exampleRadios1" value={{mode}}> + + <span> + <i [className]="mode.style" aria-hidden="true"></i> + <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> --> + {{mode.name}} + </span> + </label> + </div> + <!-- <div class="single-line"> + <label class="label-name">Dictionary Library Instances</label> + <div class="label-input"> + <select name="cars"> + <option class="select-placeholder">Select library</option> + <option value="audi" + *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option> + </select> + </div> + </div>--> + + </div> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" (input)="searchPackages($event)" + [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Description</label> + <div class="label-input"> + <input type="input" placeholder="Descripe the package"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Version</label> + <div class="label-input"> + <input type="input" placeholder="Example: 1.0.0"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">tags</label> + <div class="label-input"> + <input type="input" placeholder="Ex., vDNS-CDS"> + </div> + </div> + </div> + <div id="container"> + <div id="target"> + <div class="card creat-card"> + <div class="single-line"> + <h5 class="label-name"> + Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a> + </h5> + + </div> + <div class="single-line"> + <label class="label-name">Name</label> + <div class="label-input"> + <input type="input" placeholder="Enter Name"> + </div> + </div> + <hr/> + <div class="single-line"> + <label class="label-name">Value</label> + <div class="label-input"> + <input type="input" placeholder="Enter Value"> + </div> + </div> + + </div> + </div> + </div> + <div class="card creat-card"> + <div class="single-line"> + <div name="custom key"> + <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i + class="fa fa-plus" aria-hidden="true"></i> Add a custom key + </button> + + + </div> + </div> + </div> + + </div> + <div class="tab-pane fade" id="nav-imports" role="tabpanel" + aria-labelledby="nav-imports-tab"> + <div class="import-container-all"> + <div class="import-container"> + <div class="import-container-input"> + <input placeholder="Enter file URL" type="input" + class="ng-pristine ng-valid ng-touched"> + <a class="enter-link" href="#"><i class="icon-enter"></i></a> + </div> + <span class="import-container-span">Or you can also <a href="#" + data-toggle="modal" + data-target="#exampleModal">Import File</a></span> + + </div> + + <div class="accordion"> + <div class="card creat-card"> + <div class="single-line"> + <label class="label-name">File</label> + </div> + </div> + <div id="accordion"> + <div class="card"> + <div class="card-header" id="headingOne"> + <h5 class="mb-0 d-flex justify-content-between"> + <button class="btn btn-link" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> + <i class="icon-file-code"></i> Definitions/data_types.json + </button> + <a class="accordion-delete" href="#"><i class="icon-delete"></i></a> + </h5> + </div> + + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingTwo"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="false" + aria-controls="collapseTwo"> + Definitions/relationship_types.json + </button> + </h5> + </div> + <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="headingThree"> + <h5 class="mb-0"> + <button class="btn btn-link collapsed" data-toggle="collapse" + data-target="#collapseThree" aria-expanded="false" + aria-controls="collapseThree"> + Definitions/artifact_types.json + </button> + </h5> + </div> + <div id="collapseThree" class="collapse" aria-labelledby="headingThree" + data-parent="#accordion"> + <div class="card-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life + accusamus terry richardson ad squid. 3 wolf moon officia aute, + non cupidatat skateboard dolor brunch. Food truck quinoa + nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua + put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore + wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS. + </div> + </div> + </div> + </div> + </div> + + </div> + </div> + <div class="tab-pane fade" id="nav-authentication" role="tabpanel" + aria-labelledby="nav-authentication-tab">... + </div> + <div class="tab-pane fade" id="nav-template" role="tabpanel" + aria-labelledby="nav-template-tab">... + </div> + <div class="tab-pane fade" id="nav-scripts" role="tabpanel" + aria-labelledby="nav-scripts-tab">... + </div> + </div> + </div> + </div> + </div> + </div> </div> - <div> - <div name="custom key"> - <button (click)="createAnotherCustomKeyDiv()"></button> - <div id="target"></div> +</div> +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Import File</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Import</button> + </div> </div> </div> </div> -<app-imports-tab></app-imports-tab> |