Skip to content

Commit

Permalink
refactor: align styling for servers page #1035 (#795)
Browse files Browse the repository at this point in the history
  • Loading branch information
StephGit authored Nov 13, 2024
1 parent 0cb4da9 commit 5f53fff
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 77 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<b>Add Filter</b>
</div>
</div>
<div class="row justify-content-between align-items-center">
<div class="row justify-content-between align-items-end">
<div class="col-sm-4">
<label for="appName" class="form-label">Application/AS name</label>
<input class="form-control" id="appName" type="text" [(ngModel)]="appName" />
Expand All @@ -23,7 +23,7 @@
</ng-select>
</div>
<div class="col-sm">
<app-button [variant]="'primary'" [additionalClasses]="'mt-4 float-end'" (click)="search()">Search</app-button>
<app-button [variant]="'primary'" [additionalClasses]="'float-start'" (click)="search()">Search</app-button>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,65 +1,65 @@
<div class="container">
<div class="card">
<div class="card-header">
Filter
</div>
<div class="card-body">
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="appServer" class="form-label">AppServer</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="appServer"
[ngbTypeahead]="search"
[(ngModel)]="appServer">
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label class="form-label">Runtime</label>
</div>
<div class="col-sm-3">
<select class="form-select" [(ngModel)]="selectedRuntimeName">
<option [value]="'All'">All</option>
@for(runtime of runtimes(); track runtime.id){
<option [value]="runtime.name">{{ runtime.name }}</option>
}
</select>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label class="form-label">Env</label>
</div>
<div class="col-sm-3">
<select class="form-select" [(ngModel)]="selectedEnvironmentName">
<option [value]="'All'">All</option>
@for(env of environments(); track env.id){
<option [value]="env.name">{{ env.name }}</option>
}
</select>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="host" class="form-label">Host</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="host" [(ngModel)]="host">
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="node" class="form-label">Node</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="node" [(ngModel)]="node">
</div>
</div>
</div>
<div class="card-footer">
<app-button [variant]="'danger'" [additionalClasses]="'float-end'" (click)="reset()">Reset</app-button>
<app-button [variant]="'primary'" [additionalClasses]="'float-end'" (click)="searchServerFilter()">Search</app-button>
</div>
<div class="row mb-3">
<div class="col-sm">
<b>Filter</b>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="appServer" class="form-label">AppServer</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="appServer" [ngbTypeahead]="search" [(ngModel)]="appServer" />
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label class="form-label">Runtime</label>
</div>
<div class="col-sm-3">
<select class="form-select" [(ngModel)]="selectedRuntimeName">
<option [value]="'All'">All</option>
@for (runtime of runtimes(); track runtime.id) {
<option [value]="runtime.name">{{ runtime.name }}</option>
}
</select>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label class="form-label">Env</label>
</div>
<div class="col-sm-3">
<select class="form-select in" [(ngModel)]="selectedEnvironmentName">
<option [value]="'All'">All</option>
@for (env of environments(); track env.id) {
<option [value]="env.name">{{ env.name }}</option>
}
</select>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="host" class="form-label">Host</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="host" [(ngModel)]="host" />
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-sm-1">
<label for="node" class="form-label">Node</label>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="node" [(ngModel)]="node" />
</div>
</div>
<div class="row mb-3">
<div class="col">
<app-button [variant]="'primary'" [additionalClasses]="'float-start'" (click)="searchServerFilter()"
>Search</app-button
>
<app-button [variant]="'light'" [additionalClasses]="'float-start'" (click)="reset()">Reset</app-button>
</div>
</div>
</div>
35 changes: 22 additions & 13 deletions AMW_angular/io/src/app/servers/servers-page.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,28 @@ import { ServerFilter } from './servers-filter/server-filter';
<app-page>
<div class="page-title">Servers</div>
<div class="page-content">
<app-servers-filter
[environments]="environments()"
[runtimes]="runtimes()"
[appServerSuggestions]="appServerSuggestions()"
(searchFilter)="searchFilter($event)"
/>
<app-servers-list
[servers]="servers()"
[canReadAppServer]="permissions().canReadAppServer"
[canReadResources]="permissions().canReadResources"
[linkToHostUrl]="linkToHostUrl()"
/></div
></app-page>`,
<div class="container">
<div class="card">
<div class="card-header"><b>Servers</b></div>
<div class="card-body">
<app-servers-filter
[environments]="environments()"
[runtimes]="runtimes()"
[appServerSuggestions]="appServerSuggestions()"
(searchFilter)="searchFilter($event)"
/>
<app-servers-list
[servers]="servers()"
[canReadAppServer]="permissions().canReadAppServer"
[canReadResources]="permissions().canReadResources"
[linkToHostUrl]="linkToHostUrl()"
/>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</app-page>`,
})
export class ServersPageComponent {
private authService = inject(AuthService);
Expand Down

0 comments on commit 5f53fff

Please sign in to comment.