diff options
Diffstat (limited to 'public/src/app/home')
-rw-r--r-- | public/src/app/home/home.component.html | 65 | ||||
-rw-r--r-- | public/src/app/home/home.component.scss | 12 | ||||
-rw-r--r-- | public/src/app/home/home.component.ts | 5 |
3 files changed, 53 insertions, 29 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html index 3c23385..a742696 100644 --- a/public/src/app/home/home.component.html +++ b/public/src/app/home/home.component.html @@ -34,8 +34,7 @@ <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents" [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12" - [rowHeight]="45" (selected)="onTableSelectItem($event)" [selectionType]="'single'" [selected]="selectedLine" - (activate)="onTableActivate($event)"> + [rowHeight]="45" (selected)="onTableSelectItem($event)" [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)"> <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3"> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> @@ -60,36 +59,46 @@ <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2"> <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template> - <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;"> - - <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted"> - <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted"> - </button> - - <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)" - [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit" - tooltipPosition="top"> - <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;" - [innerHTML]="'edit-3' | feather:18"></span> - </button> - - <div *ngIf="checkCanCreate();"> - <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC" - tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)"> - <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert"> - </button> + <div class="activeBtnWrapper"> + <div class="activeBtn" *ngIf="hoveredIndex == rowIndex"> + + <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted"> + <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted"> + </button> + + <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)" + [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit" + tooltipPosition="top"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;" + [innerHTML]="'edit-3' | feather:18"></span> + </button> + + <div *ngIf="checkCanCreate();"> + <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC" + tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)"> + <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert"> + </button> + </div> + + <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete" + pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;" + [innerHTML]="'trash-2' | feather:18"></span> + </button> + + </div> </div> + </ng-template> + </ngx-datatable-column> - <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete" - pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)"> - <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;" - [innerHTML]="'trash-2' | feather:18"></span> - </button> - + <ngx-datatable-footer> + <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount" + let-curPage="curPage" let-offset="offset" let-isVisible="isVisible"> + <div class="page-count" *ngIf="showTable===true"> + You have {{rowCount.toLocaleString()}} MC table elements </div> - </ng-template> - </ngx-datatable-column> + </ngx-datatable-footer> </ngx-datatable> diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss index fb2f5e4..523fc3b 100644 --- a/public/src/app/home/home.component.scss +++ b/public/src/app/home/home.component.scss @@ -73,6 +73,18 @@ color: #5a5a5a; } +.activeBtnWrapper .activeBtn { + opacity: 0; + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: -5px; +} + +.activeBtnWrapper:hover .activeBtn { + opacity: 1; +} + // .ngx-datatable.fixed-row // .datatable-scroll // .datatable-body-row diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts index ad970f6..ef29043 100644 --- a/public/src/app/home/home.component.ts +++ b/public/src/app/home/home.component.ts @@ -10,6 +10,7 @@ import { PluginPubSub } from 'sdc-pubsub'; import { Store } from '../store/store'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { environment } from '../../environments/environment'; +import { RuleEngineApiService } from '../rule-engine/api/rule-engine-api.service'; @Component({ selector: 'app-home', @@ -33,6 +34,7 @@ export class HomeComponent { private activeRoute: ActivatedRoute, private route: Router, private _restApi: RestApiService, + private _ruleApi: RuleEngineApiService, private dialog: MatDialog, public store: Store, private toastr: ToastrService, @@ -41,6 +43,8 @@ export class HomeComponent { this.store.loader = true; this.store.viewOnly = false; this.store.mcName = ''; + this._ruleApi.callUpdateTabIndex(-1); + this.store.setTabIndex(-1); this.activeRoute.queryParams.subscribe(params => { console.log('params: %o', params); this.store.sdcParmas = params; @@ -144,7 +148,6 @@ export class HomeComponent { this.hoveredIndex = this.store.monitoringComponents.findIndex( s => s === event.row ); - console.log('selected : '); } revertMcDialog(item) { |