Skip to content

Commit

Permalink
updated mockup
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Aug 8, 2019
1 parent 0f9e5ab commit 0896528
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 32 deletions.
128 changes: 97 additions & 31 deletions ui/src/app/metadata/configuration/component/filter-version-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,108 @@
<ng-container *ngIf="filters.dates.length > 0">
<div class="d-flex border-bottom border-light border-2 py-2">
<span [ngStyle]="{'width.%': width}">Order</span>
<span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
<span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
<strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
{{ date | date:'medium' }}
</strong>
</div>
<div class="">
<ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
class="list-group-item">
<div class="d-flex border-bottom border-light">
<div [ngStyle]="{'width.%': width}" class="py-2">
{{ i + 1 }}
</div>
<div *ngFor="let filter of version; let i = index; even as isEven"
[ngStyle]="{'width.%': width}"
class="border-primary p-2 d-flex align-items-center"
[ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
<div class="w-50">
<p>{{ filter.name }}</p>
<p class="mb-0 text-muted">{{ filter.type }}</p>
<ng-container *ngIf="!comparing">
<div class="">
<ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
class="list-group-item">
<div class="d-flex border-bottom border-light">
<div [ngStyle]="{'width.%': width}" class="py-2">
{{ i + 1 }}
</div>
<div *ngFor="let filter of version; let i = index; even as isEven"
[ngStyle]="{'width.%': width}"
class="border-primary p-2 d-flex align-items-center"
[ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
<div class="w-50">
<p>{{ filter.name }}</p>
<p class="mb-0 text-muted">{{ filter.type }}</p>
</div>
<button class="btn btn-link mx-auto"
*ngIf="filter.comparable"
(click)="selected = (selected !== filter.id) ? filter.id : null">
<i class="fa fa-lg"
[ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
aria-hidden="true"></i>
<span class="sr-only">Compare</span>
</button>
</div>
<button class="btn btn-link mx-auto"
*ngIf="filter.comparable"
(click)="selected = (selected !== filter.id) ? filter.id : null">
<i class="fa fa-lg"
[ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
aria-hidden="true"></i>
<span class="sr-only">Compare</span>
</button>
</div>
</div>
</ng-container>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-primary" [disabled]="!selected">
<translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
</button>
</div>
</ng-container>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-primary" [disabled]="!selected" (click)="compare(selected)">
<translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
</button>
</div>
</ng-container>
<ng-container *ngIf="comparing">
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Type</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Name</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Test Filter 1</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Renamed Filter</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Target Type</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Entity ID</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Entity ID</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Target Value</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Enabled?</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">false</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">true</span>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-success" (click)="comparing = null">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
Filter Versions
</button>
</div>
</ng-container>
</ng-container>
<div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
<h3 translate="message.no-filters">No Filters</h3>
Expand Down
7 changes: 6 additions & 1 deletion ui/src/app/metadata/configuration/component/filter-version-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';

const data = {
dates: ['2019-08-02T12:50:54.282', '2019-08-02T12:12:54.282'],
dates: ['2019-08-08T08:40:32.015', '2019-08-08T08:40:19.266'],
filters: [
[
{
Expand Down Expand Up @@ -56,11 +56,16 @@ export class FilterVersionListComponent {

filters = data;
selected: string;
comparing: string;

constructor() {

}

compare(id: string): void {
this.comparing = id;
}

get width(): string {
const columns = this.filters.dates.length;
return `${Math.floor(100 / (columns + 1))}`;
Expand Down

0 comments on commit 0896528

Please sign in to comment.