101 lines
3.9 KiB
HTML
101 lines
3.9 KiB
HTML
<app-page-header title="Documents">
|
|
|
|
<div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="displayMode" (ngModelChange)="saveDisplayMode()">
|
|
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
|
|
<input ngbButton type="radio" class="btn btn-sm" value="details">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#list-ul"/>
|
|
</svg>
|
|
</label>
|
|
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
|
|
<input ngbButton type="radio" class="btn btn-sm" value="smallCards">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#grid"/>
|
|
</svg>
|
|
</label>
|
|
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
|
|
<input ngbButton type="radio" class="btn btn-sm" value="largeCards">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#hdd-stack"/>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<div class="btn-group btn-group-toggle mr-2" ngbRadioGroup [(ngModel)]="docs.currentSortDirection" (ngModelChange)="reload()">
|
|
<div ngbDropdown class="btn-group">
|
|
<button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
|
|
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
|
<button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSort(f.field)" [class.active]="docs.currentSortField == f.field">{{f.name}}</button>
|
|
</div>
|
|
</div>
|
|
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
|
|
<input ngbButton type="radio" class="btn btn-sm" value="asc">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down"/>
|
|
</svg>
|
|
</label>
|
|
<label ngbButtonLabel class="btn-outline-secondary btn-sm">
|
|
<input ngbButton type="radio" class="btn btn-sm" value="des">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt"/>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" (click)="showFilter=!showFilter">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#funnel"/>
|
|
</svg>
|
|
Filter
|
|
</button>
|
|
</app-page-header>
|
|
|
|
<div class="card w-100 mb-3" [hidden]="!showFilter">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Filter</h5>
|
|
<app-filter-editor [(ruleSet)]="filter" (apply)="applyFilter()"></app-filter-editor>
|
|
</div>
|
|
</div>
|
|
|
|
<ngb-pagination
|
|
[pageSize]="25"
|
|
[collectionSize]="docs.collectionSize"
|
|
[(page)]="docs.currentPage"
|
|
[maxSize]="5"
|
|
[rotate]="true"
|
|
[boundaryLinks]="true"
|
|
(pageChange)="reload()"
|
|
aria-label="Default pagination"></ngb-pagination>
|
|
|
|
<div *ngIf="displayMode == 'largeCards'">
|
|
<app-document-card-large *ngFor="let d of docs.documents"
|
|
[document]="d"
|
|
[details]="d.content">
|
|
</app-document-card-large>
|
|
</div>
|
|
|
|
<table class="table table-striped table-sm" *ngIf="displayMode == 'details'">
|
|
<thead>
|
|
<th>ASN</th>
|
|
<th>Correspondent</th>
|
|
<th>Title</th>
|
|
<th>Document type</th>
|
|
<th>Date created</th>
|
|
<th>Date added</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let d of docs.documents" routerLink="/documents/{{d.id}}">
|
|
<td>{{d.archive_serial_number}}</td>
|
|
<td>{{d.correspondent ? d.correspondent.name : ''}}</td>
|
|
<td>{{d.title}}<app-tag [tag]="t" *ngFor="let t of d.tags" class="ml-1"></app-tag>
|
|
</td>
|
|
<td>{{d.document_type ? d.document_type.name : ''}}</td>
|
|
<td>{{d.created | date}}</td>
|
|
<td>{{d.added | date}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="row justify-content-left" *ngIf="displayMode == 'smallCards'">
|
|
<app-document-card-small [document]="d" *ngFor="let d of docs.documents"></app-document-card-small>
|
|
</div>
|
|
|
|
<p *ngIf="docs.documents.length == 0" class="mx-auto">No results</p> |