diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html')
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html | 724 |
1 files changed, 375 insertions, 349 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 0595db1ce..980a94ca5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -12,7 +12,7 @@ <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> + data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" 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">Package Details</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 package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -103,33 +103,36 @@ </div> </div> </header> - +<!--Editor Bar--> <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> + <!--Actions/Functions Side Menu Toogole Button--> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> + <!--Nav Tabs--> <div class="collapse navbar-collapse "> + <!--Action Tabs--> <ul class="navbar-nav"> <li class="nav-item active"> <nav class="row"> - <!--Nav Tabs--> <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> </li> </ul> + <!--Requirement/Capability Legend--> <ul class="templateLegend ml-auto mr-auto p-0"> <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li> <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li> </ul> - + <!--Undo/Redo Buttons--> <ul class="editor navbar"> <li> <button type="button" class="btn tooltip-bottom" data-tooltip="Undo"> @@ -153,34 +156,32 @@ <img src="/assets/img/icon-zoomIn.svg"></button> </li> </ul> - + <!--Designer/Scripting View Tabs--> <ul class="navbar ml-2" style="list-style: none"> <li class="nav-item"> <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" - class="btn btn-secondary topologyView">Scripting + class="btn btn-secondary topologyView">Scripting </button> </div> </li> </ul> - </div> </nav> <ng-sidebar-container class="sidebar-container"> - <!-- Controller SideBar --> + <!--Left Side Menu--> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> - + [mode]="'push'" #sidebarLeft> <nav class="row"> <!--Nav Tabs--> <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> @@ -188,10 +189,17 @@ <div class="col"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> - + <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> + Action Attributes + </button> + <br /><br /> + <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> + Function Attributes + </button> + <br /> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + New Action </button> @@ -205,7 +213,7 @@ <li *ngFor="let customActionName of actions"> <label> <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openFunctionAttributes(customActionName)"></i> + (click)="openFunctionAttributes(customActionName)"></i> {{customActionName}} </label> </li> </ul> @@ -217,16 +225,14 @@ <input type="text" class="form-control input-search-controller" placeholder="Search Functions"> <div id="palette-paper" class="componentsList"></div> </div> - </div> </div> </div> - <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a - href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a> + <div class="helpBox"><i class="icon-info" aria-hidden="true"></i> + <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a> </div> </ng-sidebar> - <!-- Page content --> - + <!--Page content--> <div ng-sidebar-content id="board-paper"> <button class="rotate" (click)="_toggleSidebar1()"> <span> @@ -235,7 +241,9 @@ </span> </button> - <!-- Canvas --> + + <!-- CANVAS --> + <!--Editor Bar--> <div class="editBar text-center"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo"> @@ -259,185 +267,165 @@ <button type="button" class="btn btn-secondary topologyView">Source</button> </div> </div> - <!-- <div class="card actionContainer"> - <div class="card-header"> - <span>Action 1</span> - </div> - <div class="card-body"> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType1.svg" title=""> - <h2>config-assign</h2> - <p>component-resource-resolution</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType3.svg" title=""> - <h2>function 1</h2> - <p>dg-generic</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - </div> - </div> --> - <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> + <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> - <!-- Action Attribute SideBar --> - <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight> + + <!--Right Side Menu - Action Attribute--> + <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" + [position]="'right'" #sidebarRight1> <div class="container-fluid0"> <div class="row m-0"> - <div class="col-2 pr-0"> - <button (click)="sidebarRight.close()" class="closeBar"></button> - </div> - <div class="col-10 attributesContainer p-0"> - <h1>Action Attributes</h1> - <div class="scrolll"> + <div class="col attributesContainer"> + <div class="row m-0 attributesContainertTitle"> + <div class="col-2 pl-0"> + <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" + placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button> + </div> + <h6 class="col pl-0">Action Attributes</h6> + <div class="col-3 pl-0"> + <div class="btn-group" role="group" aria-label="Basic example"> + <button type="button" class="btn view-source" tooltip="View Action Source" + placement="bottom"><i class="icon-source"></i></button> + <button type="button" class="btn trash-item" tooltip="Delete Action" + placement="bottom"><i class="icon-delete-sm" type="button" + aria-hidden="true"></i></button> + </div> + </div> + </div> + <div class="scrollWrapper"> <div class="row m-0"> <div class="col"> - <div class="form-group actionName"> + <div class="form-group"> <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action 1"> + <input type="text" class="form-control" placeholder="Action Name" + value="resource-assignment"> </div> </div> </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" - aria-controls="collapseOne"> - Steps - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> + <!--Add Attribute--> + <div class="row m-b add-attribute"> + <div class="col"> + <h5>Add Attribute</h5> + <div class="row"> + <div class="col pr-0 text-center"> + <button type="button" data-toggle="modal" data-target="#exampleModalScrollable" + class="btn btn-secondary"><i class="icon-custom-attribute" type="button" + aria-hidden="true"></i></button> + <span>Custom Attribute</span> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> </div> + <div class="col text-center"> + <button type="button" class="btn btn-secondary"><i + class="icon-function-attribute" type="button" + aria-hidden="true"></i></button> + <span>Function Attribute</span> + </div> </div> </div> + </div> + <!--INPUTS--> + <div class="accordion" id="accordionExample"> <div class="card"> - <div class="card-header row" id="headingTwo"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseTwo" aria-expanded="true" - aria-controls="collapseTwo"> - Inputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + <div class="card-header row" id="headingOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Inputs + </button> </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" - data-parent="#accordionExample"> - <div class="card-body"> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body action-attributes"> <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> + <div class="col"> + <div class="form-group"> + <label for="exampleFormControlTextarea1">template-prefix + <i class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">resource-assignment-properties <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">occurrence <i + class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">store-result + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + <div class="attributeOptions"> + <a data-toggle="modal" data-target="#templateDeletionModal" + class="accordion-delete editAttribute" + tooltip="Edit Attribute" placement="bottom"><i + class="icon-edit"></i></a><a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteAttribute" + tooltip="Delete Attribute" placement="bottom"><i + class="icon-delete-sm"></i></a> + </div> + </div> </div> </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> </div> </div> + </div> + <!--OUTPUTS--> + <div class="accordion" id="accordionExample1"> <div class="card"> - <div class="card-header row" id="headingThree"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseThree" aria-expanded="true" - aria-controls="collapseThree"> - Outputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + <div class="card-header row" id="headingOne"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + Outputs + </button> </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" - data-parent="#accordionExample"> + + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample1"> <div class="card-body"> <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> + <div class="col"> + <div class="form-group"> + <label for="exampleFormControlTextarea1">resolved-data + <i class="icon-required-star optional-attribute" type="button" + aria-hidden="true"></i></label> + </div> </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" - rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> </div> </div> @@ -446,212 +434,250 @@ </div> </div> </div> + <!-- Modal --> + </ng-sidebar> - <!-- Function Attribute SideBar --> - <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" - [mode]="'push'" [position]="'right'" #sidebarRight> + <!--Right Side Menu - Function Attribute--> + <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'" + [position]="'right'" #sidebarRight2> <div class="container-fluid0"> <div class="row m-0"> - <div class="col-2 pr-0"> - <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> --> - </div> - <div class="col-10 attributesContainer p-0"> - <div class="row m-0"> - <div class="col"> - <div class="col-3"> - <button (click)="sidebarRight.close()" class="closeBar"></button> - </div> - - <div class="function-attribute"> - <h6>Function Attributes - <span class="trash-span"> - <i class="fa fa-trash" type="button" aria-hidden="true"></i> - </span> - </h6> + <div class="col attributesContainer"> + <div class="row m-0 attributesContainertTitle"> + <div class="col-2 pl-0"> + <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close" + placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button> + </div> + <h6 class="col pl-0">Function Attributes</h6> + <div class="col-3 pl-0"> + <div class="btn-group" role="group" aria-label="Basic example"> + <button type="button" class="btn view-source" tooltip="View Function Source" + placement="bottom"><i class="icon-source"></i></button> + <button type="button" class="btn trash-item" tooltip="Delete Function" + placement="bottom"><i class="icon-delete-sm" type="button" + aria-hidden="true"></i></button> </div> - - </div> </div> - - <div> + <div class="scrollWrapper"> <div class="row m-0"> <div class="col"> - <div class="form-group actionName"> - <label for="exampleInputEmail1">Function Name</label> - <input type="text" class="form-control" placeholder="Function Name"> + <div class="form-group"> + <label for="exampleInputEmail1">Function Instance Name</label> + <input type="text" class="form-control" placeholder="Function Instance Name"> </div> - </div> - </div> - <div class="row m-0"> - <div class="col"> - <div class=" actionName"> + <div class="form-group"> <label>Function Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">component-resource-resolution <i - class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>other component</li> - </div> - </li> - </ul> + <label class="attribute-value">component-resource-resolution</label> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Description</label> + <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </div> </div> - </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> + <!--INTERFACES--> + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Interface + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Interfaces </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> </div> - </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">ResourceResolutionComponent</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <!--Inputs & Outputs Tabs--> + <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist"> + <li class="nav-item" role="presentation"> + <a class="nav-link active" id="pills-home-tab" data-toggle="pill" + href="#pills-home" role="tab" aria-controls="pills-home" + aria-selected="true">Inputs</a> + </li> + <li class="nav-item" role="presentation"> + <a class="nav-link" id="pills-profile-tab" data-toggle="pill" + href="#pills-profile" role="tab" aria-controls="pills-profile" + aria-selected="false">Outputs</a> + </li> + </ul> + <div class="tab-content" id="pills-tabContent"> + <div class="tab-pane fade show active" id="pills-home" role="tabpanel" + aria-labelledby="pills-home-tab"> + <div class="row"> + <div class="col"> + <!--list--> + <div class="attribute-wrap"> + <div class="form-group"> + <label + for="exampleFormControlTextarea1">artifact-prefix-names + <i class="icon-required-star" type="button" + aria-hidden="true"></i></label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline1">Pre-defined + Template</label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline2">Input Drivin + Template</label> + </div> + <br /> + <button type="button" class="btn btn-select-template"><i + class="icon-add-circle" type="button" + aria-hidden="true"></i> Select Template</button> + </div> + <!--string--> + <div class="attribute-wrap"> + <div class="form-group"> + <label for="exampleInputEmail1">resoluton-key <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <input type="text" class="form-control"> + </div> + </div> + <!--integer--> + <div class="attribute-wrap"> + <div class="form-group"> + <label for="exampleInputEmail1">request-id <i + class="icon-required-star" type="button" + aria-hidden="true"></i></label> + <input type="number" class="form-control" placeholder="" + value="356"> + </div> + </div> + <!--boolean--> + <div class="attribute-wrap"> + <div class="form-group"> + <label + for="exampleFormControlTextarea1">resolution-summary + <i class="icon-required-star optional-attribute" + type="button" aria-hidden="true"></i></label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline1" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline1">True</label> + </div> + <div + class="custom-control custom-radio custom-control-inline"> + <input type="radio" id="customRadioInline2" + name="customRadioInline1" + class="custom-control-input"> + <label class="custom-control-label" + for="customRadioInline2">False</label> + </div> + </div> + <!-- Add Optional Attributes button --> + </div> + </div> + </div> + <div class="tab-pane fade" id="pills-profile" role="tabpanel" + aria-labelledby="pills-profile-tab">2</div> </div> </div> - <div class="form-group"> - <label for="exampleInputEmail1">Resoluton-key</label> - <input type="text" class="form-control"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Store result</label> - </div> - <div class="form-group"> - <label> - <input class="with-gap radio-btn" name="group1" type="radio"/> - <span class="radio-btn">True</span> - </label> - <label class="radio-btn"> - <input class="with-gap radio-btn" name="group1" type="radio"/> - <span class="radio-btn">False</span> - </label> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder=""> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Artifact Prefix Name</label> - <input type="text" class="form-control" placeholder=""> - - </div> - </div> </div> </div> - - </div> - - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> + <!--ARTIFACTS--> + <div class="accordion" id="accordionExample1"> + <div class="card"> + <div class="card-header row" id="headingOne"> <button class="btn btn-link" type="button" data-toggle="collapse" - data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Artifact + data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> + Artifacts </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" - data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">base config-template</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-template-velocity <i - class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> - </div> - </li> - </ul> - </div> </div> - <div style="height: 30px; margin-top: 30px;"> - <hr> - </div> + <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample1"> + <div class="card-body"> + <div class="row"> + <div class="col-12"> + <a class="template-mapping-list"> + <p>baseconfig</p> + <span>Mapping</span> + <span>Template</span> + + <a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> + </a> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">base config-mapping</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Type</label> - <div class="dropdown w-100"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">artifact-mapping resource <i - class="fa fa-caret-down"></i></div> - <ul class="dropdown-content w-100"> - <li> - <div class="form-group "> - <li>ddwd</li> + </div> + <div class="col-12"> + <a class="template-mapping-list"> + <p>vpkg</p> + <span>Mapping</span> + <span>Template</span> + <a data-toggle="modal" + data-target="#templateDeletionModal" + class="accordion-delete deleteTemplate" + title="Delete Template"><i class="icon-delete-sm"></i></a> + </a> + </div> + </div> </div> - </li> - </ul> </div> </div> - - <div style="height: 30px; margin-top: 30px;"> - <hr> - </div> </div> </div> </div> - </div> </div> - </div> - </div> - </div> </ng-sidebar> + + </ng-sidebar-container> + <app-functions-attribute></app-functions-attribute> +<!--Action - Add Custom Attribute - Modal--> +<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" + aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalScrollableTitle"> + Add Custom Attributes</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg" /> + </button> + </div> + <div class="modal-body"> + <ul class="nav nav-tabs" id="myTab" role="tablist"> + <li class="nav-item"> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + </li> + </ul> + <div class="tab-content" id="myTabContent"> + <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> + <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary">Submit Attributes</button> + </div> + </div> + </div> +</div>
\ No newline at end of file |