diff options
Diffstat (limited to 'cds-ui/designer-client')
11 files changed, 111 insertions, 606 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 1441406ce..876ba0965 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -825,3 +825,28 @@ ul.templateLegend{ .templateLegend .capability i{ color: #0ABDE3; } +ul.editor{ + margin-right: -40px; + margin-top: 16px; +} +.editor li{ + list-style: none; +} +.roundBtn .btn{ + width: 15px; + height: 15px; + padding: 0px; + border-radius: 15px; + font-size: 10px; + text-align: center; + background-color:rgb(215, 234, 250); + color: white; + margin: 5px; +} +.ace_editor{ + top: 5.4vh; + height: 92vh !important; +} +.dsl-editor { + height: 500px; +} 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 08f9a0789..503aade9f 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 @@ -99,14 +99,6 @@ </div> </div> </header> -<!-- <div class="source-button editBar"> - - <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</button> - </div> -</div> --> <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" @@ -133,7 +125,15 @@ <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> - <ul class="navbar" style="list-style: none;"> + + <ul class="editor navbar ml-auto"> + <li class="roundBtn"><button class="btn"><span class="glyphicon">−</span></button></li> + <li>100%</li> + <li class="roundBtn"><button class="btn"><span class="glyphicon">+</span></button> + </li> + </ul> + + <ul class="navbar ml-auto" 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> @@ -619,4 +619,4 @@ </div> </ng-sidebar> -</ng-sidebar-container> +</ng-sidebar-container>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css index bc1890bdb..e69de29bb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css @@ -1,582 +0,0 @@ -.dsl-editor { - height: 500px; -} - -body{ - background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; - background-size: 6px 6px !important; -} -/*Header*/ -header{ - height: 60px; - background-color: #1B3E6F; - box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); -} -.logo{ - float: left; - width: 50px; - height: 60px; - background: url(/assets/img/logo-icon.svg) center center #fff no-repeat; -} - -/**Bread Crumb**/ -.breadcrumb{ - padding: 9px 20px; - background: transparent; - line-height: 40px; -} -.breadcrumb a, -.breadcrumb a:hover{ - color: #fff; -} -.breadcrumb .breadcrumb-item{ - font-size: 12px; - font-weight: bold; -} -.breadcrumb .breadcrumb-item:first-child{ - font-size: 16px; -} -.breadcrumb-item + .breadcrumb-item::before{ - color: #fff; -} -.breadcrumb .breadcrumb-item.active p{ - display: inline; - padding: 4px 10px; - background: #F4F9FE; - border-radius: 10px; - color: #C3CDDB; - font-size: 10px; -} -.designer-breadcrumb .fa-angle-right::before{ - color: #fff; -} -.sidebar-container{ - height: calc(100vh - 60px) !important; -} -/**Topology Actions**/ -.topology-actions{ - margin: 0; - height: 60px; -} -.topology-actions > li{ - height: 59px; - display: inline-block; - padding: 0 20px; -} -.topology-actions > li:first-child{ - border-right: solid 1px #16396A; -} -.topology-actions .btn-group{ - margin-top: 11px; -} -.btn-topology-action, -.btn-topology-action:hover{ - margin: 0 6px; - padding: 6px 10px; - color: #fff; - border-radius: 50%; - border: solid .5px #fff; -} -.btn-topology-action:last-child{ - margin-right: 0; -} -.btn-topology-action .fa{ - width: 16px; - height: 16px; - text-align: center; -} -.topology-actions .dropdown-text, -.dropdown-toggle:hover ~ .dropdown-text, -.dropdown-toggle:focus ~ .dropdown-text{ - top: 7px; - text-indent: 15px; - background: #1273EB; - border-radius: 15px; - border: 0; - box-shadow: none; - color: #fff; - font-weight: bold; - font-size: 13px; -} -.topology-actions .dropdown-text::after{ - right: 15px; - top: 13px; - border-width: 6px 6px 0 6px; - border-color: #fff transparent transparent transparent; -} -.topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{ - top: 13px; - border-width: 0 6px 6px 6px; - border-color: transparent transparent #fff transparent -} -.topology-actions .dropdown-content:hover, -.topology-actions .dropdown-toggle:focus ~ .dropdown-content{ - padding: 12px 0; - text-indent: 0; - background: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 2px 6px rgba(47, 83, 151, .15) -} -.topology-actions .dropdown-content a{ - padding: 0 20px; - color: #1B3E6F; - font-size: 13px; -} -.topology-actions .dropdown-content a:hover{ - background: #F4F9FE; - text-decoration: none; -} - - - - - - - - - - - - - - - - - - -/*Rotated Text*/ -button.rotate{ - position: absolute; - margin-top: 1px; - padding: 0; - background: transparent; - border: 0; -} -.rotate{ - vertical-align: bottom; - /* text-align: center; */ -} -.rotate span{ - display: inline-table !important; - -ms-writing-mode: tb-rl; - -webkit-writing-mode: vertical-rl; - writing-mode: vertical-rl !important; - transform: rotate(180deg); - white-space: nowrap; - background: #1B3E6F; - padding: 15px 12px; - font-weight: bold; - font-size: 12px; - color:#fff; - /* border-bottom-left-radius: 2px; */ - border-top-left-radius: 2px; -} -.rotate i{ - margin-right: 3px; - margin-top: 9px; - font-size: 15px; -} -.rotate span:first-child{ - margin-bottom: 0; -} -.rotate a:hover{ - text-decoration: none; -} - -/*ACTIONS & COMPONENTS MENU*/ -.input-search-controller{ - height: 50px; - padding-left: 30px; - background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; - border-radius: 0; - border: 0; - border-bottom: solid 1px #D7E7F9; - color: #1B3E6F; - font-size: 13px; -} -.input-search-controller::placeholder{ - color: #D0D7E4; - font-size: 11px; -} -.input-search-controller:focus{ - - box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); - border-color: #DEE8F3; -} -.actions-scroll{ - max-height: 29vh; - overflow-y: auto; - margin-top: 12px; - margin-bottom: 20px; -} -.componentsList p{ - margin-bottom: 0; - padding-left: 30px; - background-position: left center; - background-repeat: no-repeat; -} -p.compType-1{ - background-image: url(/assets/img/icon-comType1-sm.svg); -} -p.compType-2{ - background-image: url(/assets/img/icon-comType2-sm.svg); -} -p.compType-3{ - background-image: url(/assets/img/icon-comType3-sm.svg); -} -p.compType-4{ - background-image: url(/assets/img/icon-comType4-sm.svg); -} -/*Actions Wrapper*/ -.actions-wrapper{ - position: absolute; - width: 100%; - top: 0; -} -.actions-container{ - width: 92%; - margin: 0 auto; - background: red; -} - -.controllerSidebar{ - width: 320px; - background: #F4F9FE; - border: solid 1px #C1CDDD; - box-shadow: 0 2px 6px rgba(47, 83, 151, .10); -} -.controllerSidebar h1{ - margin-bottom: 15px; - padding: 12px 0 12px 12px; - background: #fff; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - color: #C3CDDB; -} -.controllerSidebar b{ - margin-left: 12px; - font-size: 12px; - color: #C3CDDB; -} -.actionBtns .btn{ - margin: 0 15px 12px; - padding: 9px 20px; - border-radius: 2px !important; - font-size: 12px; - font-weight: bold; -} -.actionBtns .btn:first-child{ - background: #1B3E6F; - border: solid 1px #1B3E6F; - color: #fff; -} -.actionBtns .btn:last-child{ - padding-left: 34px !important; - border: solid 1px #D0DFF1; - color: #1B3E6F; - outline: 0 !important; -} -.actionsList, -.componentsList{ - padding: 0 12px 20px; -} -.componentsList{ - padding-bottom: 0; -} -.custom-control.custom-checkbox:hover, -.custom-control-label:hover{ - cursor: pointer; -} -.actionsList .custom-checkbox, -.componentsList .list-group-item{ - margin-bottom: 10px; - padding-left: 40px; - background: #fff; - box-shadow: 0 2px 6px rgba(47, 83, 151, .15); - border-radius: 2px; -} -.actionsList .custom-control-label{ - width: 100%; - padding: 6px; - vertical-align: unset; - color: #1B3E6F; - font-size: 14px; - line-height: 20px; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; -} -.actionsList .custom-control-label::before, -.actionsList .custom-control-label::after{ - top: 1.25rem; -} -.actionsList .custom-control-label p{ - color: #C7D0DD; - font-size: 12px; -} -.custom-control-input:checked ~ .custom-control-label{ - background-color: #1B3E6F !important; - color: #fff; -} -.inserActionBtns .btn{ - border-radius: 15px !important; - padding: 6px 20px; - font-size: 12px; - font-weight: bold; - border: 0; - -} -.inserActionBtns .btn:first-child{ - background: #1273EB; - border: solid 1px #1273EB; - color: #fff; -} -.inserActionBtns .btn:last-child{ - background: #fff; - border: solid 1px #D9E6F2; - color: #C3CDDB; -} -/*Components List*/ -.componentsList .list-group-item{ - padding-left: 36px; - border: 0; - font-size: 14px; - background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; -} - -/*CANVAS*/ -.editBar{ - width: 200px; - margin: 0 auto 0; - padding: 6px 10px; - background:#F4F9FE; - /* border: solid 1px #E8EFF8; */ - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); -} -.editBar .btn-group{ - box-shadow: 0 2px 6px rgba(47, 83, 151, .15); -} -.editBar .btn{ - background-color: #fff; - background-repeat: no-repeat; - background-position: left center; - border: 0; - color: #1B3E6F; - font-size: 10px; -} -.editBar .btn.active{ - background-color: #1B3E6F !important; - color: #fff; -} -.viewBtns .btn{ - background-position: 10px center; - padding-left: 30px!important; -} -.viewBtns .topologySource{ - background-image: url(src/assets/img/icon-topologyView-active.svg); -} -.viewBtns .topologyView{ - background-image: url(src/assets/img/icon-topologySource.svg); -} -.card.actionContainer{ - margin: 20px 20px 40px 60px; - background: transparent; - border: 0; -} -.actionContainer .card-header{ - padding: 0; - background: transparent; - border: 0; -} -.actionContainer .card-header span{ - padding: 12px 20px; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - font-size: 12px; - line-height: 38px; - font-weight: bold; - color: #1B3E6F; - background: #C3CDDB; -} -.actionContainer .card-body{ - min-height: 170px; - padding: 15px 20px !important; - border: solid 1px #C3CDDB; - background: #fff; - box-shadow: 0 2px 6px rgba(18, 115, 235, .1); -} -.actionContainer a{ - display: inline-block; - width: 230px; - height: 130px; - margin: 20px; - padding: 24px; - background: #1B3E6F; - color: #fff !important; - text-align: center; - border-radius: 2px; - border: solid 1px #1B3E6F; -} -.actionContainer a:hover{ - cursor: pointer; - border: dashed 1px #E9FCC6; -}.componentContainer img{ - height: 38px; -} -.componentContainer h2{ - margin-top: 9px; - font-size: 14px; - font-weight: bold; -} -.componentContainer p{ - font-size: 12px; -} - -/*ATTRIBUTES SIDE BAR*/ -.attributesSideBar{ - width: 396px; - padding: 0; -} -.attributesSideBar .attributesContainer{ - background: #fff; - border: solid 1px #C1CDDD; - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); -} -.closeBar{ - float: right; - width: 90%; - height: 40px; - background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; - border: 0; - outline: 0; -} -.closeBar:focus{ - outline: none; -} -.attributesContainer h1{ - margin-bottom: 10px; - padding: 12px 0 12px 15px; - background: #DEE8F3; - font-size: 12px; - font-weight: bold; - text-transform: uppercase; - color: #1B3E6F; -} -.actionName{ - margin-bottom: 21px; -} -.attributesContainer label{ - color: #1B3E6F; - text-transform: uppercase; - font-size: 11px; - font-weight: bold; -} -.attributesContainer .form-group{ - margin-bottom: 9px; -} -.attributesContainer .form-control{ - border-color: #F0F5FC; - border-radius: 2px; - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); - color: #103D73; - font-size: 13px; -} -.attributesContainer .form-control:focus{ - border-color: #66bfff; - box-shadow: 0 0 0 4px rgba(0,149,255,0.15); -} -.attributesContainer .form-control::placeholder{ - color: #CFD7E5; -} -.scrolll{ - max-height: 88.75vh; - overflow-y: auto; -} -.accordion > .card{ - margin-bottom: 0 !important; - border: 0; -} -.accordion > .card .card-header{ - margin: 0; - padding: 0; - background-color: #F4F9FE; - border: 0; - border-radius: 0; -} -.accordion > .card .card-body{ - padding-bottom: 10px !important; -} -.accordion .btn-link{ - padding: 0; - color: #C3CDDB; - font-weight: bold; - font-size: 13px; - text-transform: uppercase; - line-height: 38px; -} -.accordion .btn-link:hover{ - color: #103D73; - text-decoration: unset; -} -.accordion .card-header .btn-link[aria-expanded="true"]:after, -.accordion .card-header .btn-link[aria-expanded="false"]:after{ - margin-right: 9px; - font-family: 'FontAwesome'; - float: left; - font-weight: normal; - font-size: 12px; -} -.accordion .card-header .btn-link[aria-expanded="true"]:after{ - content: "\f078"; -} -.accordion .card-header .btn-link[aria-expanded="false"]:after{ - content: "\f054"; -} -.btn-addAttribute{ - width: 20px; - height: 20px; - background-image: url(/assets/img/icon-add.svg); - background-position: center center; - background-repeat: no-repeat; - vertical-align: sub; -} -.btn-addAttribute:hover{ - background-image: url(/assets/img/icon-add-hover.svg); -} -.btn-deleteAttribute{ - padding: 5px 10px; - background: #FFE6E7; - border: solid .5px #FFC9CB; - border-radius: 2px; - color: #FF6469; - font-size: 10px; - -} -.source-button{ - position: absolute; - z-index: 9999999; - top: 69px; - left: 50%; -} -/*jointjs paper*/ -/* #board-paper { - position: relative; - border: 1px solid gray; - display: inline-block; - background: transparent; - overflow: hidden; -} -#board-paper svg { - background: transparent; -} -#board-paper svg .link { - z-index: 2; -} -.html-element { - position: absolute; - background: #F4F9FE; - pointer-events: none; - -webkit-user-select: none; - z-index: 2; -} */ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html index 05f6eeb5a..c6b442bb6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html @@ -3,17 +3,61 @@ <div class="col pl-0"> <p class="logo mb-0"></p> <nav aria-label="breadcrumb"> - <ol class="breadcrumb mb-0"> + <ol class="breadcrumb designer-breadcrumb mb-0"> <li class="breadcrumb-item"> <a href="#">CBA Packages</a> </li> + <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> + <button type="button" class="btn package-info-btn" data-toggle="modal" + data-target="#exampleModalLong"> + <i class="icon-info" aria-hidden="true"></i> + </button> </li> + <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item active" aria-current="page"> <p class="mb-0">Topology View</p> </li> </ol> + <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" + 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" /> + </button> + </div> + <div class="modal-body"> + <div class="row package-info"> + <div class="col"> + <h3>Test Package + <span class="package-version">Version 1.0.2</span></h3> + </div> + <div class="col mb-3"> + <span class="badge badge-primary">test</span> + <span class="badge badge-primary">vDNS-CDS</span> + <span class="badge badge-primary">SCALE-OUT</span> + <span class="badge badge-primary">MARCO</span> + </div> + <div class="col-2"> + <img src="/assets/img/img-user3.jpg" class="creator-pic"> + </div> + <div class="col-10 pl-0"> + <p><b>Author information:</b></p> + <p>Abdelmuhaimen Seaudi</p> + <p>abdelmuhaimen.seaudi@orange.com</p> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> + </div> </nav> </div> <div class="col pr-0 text-right"> @@ -71,6 +115,9 @@ </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> </ng-sidebar> <div ng-sidebar-content id="board-paper"> <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts index e6b00f413..487c19ad1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts @@ -10,7 +10,8 @@ import { SourceViewService } from './source-view.service'; @Component({ selector: 'app-designer-source-view', templateUrl: './source-view.component.html', - styleUrls: ['./source-view.component.css'] + // styleUrls: ['./source-view.component.css'] + styleUrls: ['../designer.component.css'] }) export class DesignerSourceViewComponent implements OnInit, OnDestroy { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index d487de3d1..593dc1d0e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -144,7 +144,8 @@ <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> + <th (click)="removeInitFile(i)" width="40" class="text-right"><img + src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts index e18923154..35c531aec 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts @@ -26,7 +26,9 @@ export class ImportsTabComponent implements OnInit { } }); } - + removeInitFile(index) { + this.uploadedFiles.splice(index, 1); + } public dropped(files: NgxFileDropEntry[]) { this.files = files; for (const droppedFile of files) { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index 1ecf2985e..6688a9202 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -106,7 +106,7 @@ <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> + <th (click)="removeInitFile(i)" width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> @@ -116,7 +116,7 @@ <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal" type="button">Cancel </button> - <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button"> + <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" data-dismiss="modal" type="button"> Import </button> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts index 63a734726..c3704365c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts @@ -44,6 +44,11 @@ export class ScriptsTabComponent implements OnInit { } } } + + removeInitFile(index) { + this.uploadedFiles.splice(index, 1); + } + initDelete(file) { this.fileToDelete = file; } 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 fdf10e0a9..99b085507 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 @@ -1,8 +1,8 @@ - <div class="row template-mapping-action"> <div class="col"> <h6 [hidden]="edit" class="create-title">Create Template</h6> - <button (click)="closeCreationForm()" [hidden]="!edit" class="btn btn-outline-secondary"><i class="fa fa-chevron-left mr-2"></i>Template List</button> + <button (click)="closeCreationForm()" [hidden]="!edit" class="btn btn-outline-secondary"><i + class="fa fa-chevron-left mr-2"></i>Template List</button> </div> <div class="col text-right"> <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button> @@ -252,7 +252,7 @@ <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> + <th (click)="removeFile(i)" width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> @@ -260,12 +260,11 @@ </div> <div class="modal-footer"> - <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" + <button type="button" class="btn btn-sm btn-secondary btn-cancel" data-dismiss="modal" (click)="resetTheUploadedFiles()">Cancel </button> - <button (click)="uploadFile();openListView()" class="btn btn-sm btn-primary" data-dismiss="modal" - type="button"> + <button data-dismiss="modal" (click)="uploadFile()" class="btn btn-sm btn-primary" type="button"> Import </button> </div> 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 7b777696f..5feb76e06 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 @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; +import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { PackageCreationStore } from '../../package-creation.store'; import { TemplateInfo, TemplateStore } from '../../template.store'; @@ -9,8 +9,9 @@ import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.mod import { PackageCreationUtils } from '../../package-creation.utils'; import { JsonConvert, Any } from 'json2typescript'; import { ToastrService } from 'ngx-toastr'; -import { Router, ActivatedRoute } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { SharedService } from '../shared-service'; +declare var $: any; @Component({ selector: 'app-templ-mapp-creation', @@ -178,6 +179,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } } } + removeFile(index) { + this.uploadedFiles.splice(index, 1); + } uploadFile() { this.dependancies.clear(); @@ -187,6 +191,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy { } else { this.setTemplateFilesToStore(); } + $('.btn-cancel').click(); + + } fetchCSVkeys() { |