Revize 02818aaf

Re #7819: Úprava obrazovky browse

- upravena UI
- přidána tabulka se stránkováním
- přidány datum do modelové třídy (datum uploadu a datum původu)

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/IndexController.java

@@ -13 +13 @@
 import javax.xml.bind.JAXBException;
 import java.io.IOException;
 import java.util.ArrayList;
+import java.util.Date;
 import java.util.List;
 
 @CrossOrigin(origins = "*", allowedHeaders = "*")
@@ -61 +62 @@
             List<String> filenames = solrService.listAllFiles();
             int id = 0; // todo
             for (String filename: filenames) {
-                response.add(new DocumentResponse(filename, id++));
+                response.add(new DocumentResponse(filename, id++, new Date(), new Date()));
             }
         } catch (IOException e) {
             // todo

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/model/DocumentResponse.java

@@ -1 +1 @@
 package cz.zcu.kiv.aswi.fulltextsearch.model;
 
+import java.util.Date;
+
 public class DocumentResponse {
 
     private String documentName;
     private int id;
+    private Date originDate;
+    private Date uploadedDate;
 
-    public DocumentResponse(String documentName, int id) {
+    public DocumentResponse(String documentName, int id, Date originDate, Date uploadedDate) {
         this.documentName = documentName;
         this.id = id;
+        this.originDate = originDate;
+        this.uploadedDate = uploadedDate;
     }
 
     public String getDocumentName() {
         return documentName;
     }
 
-    public void setDocumentName(String documentName, int id) {
+    public void setDocumentName(String documentName) {
         this.documentName = documentName;
     }
 
@@ -25 +31 @@
     public void setId(int id) {
         this.id = id;
     }
+
+    public Date getOriginDate() {
+        return originDate;
+    }
+
+    public void setOriginDate(Date originDate) {
+        this.originDate = originDate;
+    }
+
+    public Date getUploadedDate() {
+        return uploadedDate;
+    }
+
+    public void setUploadedDate(Date uploadedDate) {
+        this.uploadedDate = uploadedDate;
+    }
 }

fe/fulltextsearch/src/app/app.module.ts

@@ -18 +18 @@
 import { MatSelectModule } from '@angular/material/select';
 import { SearchBoxComponent } from './components/shared-components/search-box/search-box.component';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { TableComponent } from './components/pages/browse/table/table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
 
 @NgModule({
   declarations: [
@@ -28 +32 @@
     BrowseComponent,
     UploadComponent,
     HelpComponent,
-    SearchBoxComponent
+    SearchBoxComponent,
+    TableComponent
   ],
   imports: [
     BrowserModule,
@@ -40 +45 @@
     MatButtonModule,
     MatIconModule,
     MatSelectModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule
   ],
   providers: [],
   bootstrap: [AppComponent]

fe/fulltextsearch/src/app/components/pages/browse/browse.component.css

@@ -1 @@
-h1 {
-  font-size: xx-large;
+.text-box{
+  width: 80%;
+  margin: 20px auto;
 }
 
-.text-box {
-  margin: auto;
-  width: 80%;
-  padding: 10px;
+.card-header {
+  margin-bottom: 0;
 }

fe/fulltextsearch/src/app/components/pages/browse/browse.component.html

@@ -1 @@
-<div class="text-box">
+<div class="text-box mat-elevation-z8">
   <div class="card">
     <h1 class="card-header">All documents</h1>
-    <div class="card-body">
-      <ul class="list-group">
-        <li class="list-group-item" *ngFor="let documentResponse of documents">
-          <b>Id: </b>{{documentResponse.id}}
-          <b>Document name: </b>{{documentResponse.documentName}}
-        </li>
-      </ul>
-    </div>
+      <div>
+        <app-table-browse></app-table-browse>
+      </div>
   </div>
 </div>
+

fe/fulltextsearch/src/app/components/pages/browse/table/table-datasource.ts

@@ +1 @@
+import {DataSource} from '@angular/cdk/collections';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {map} from 'rxjs/operators';
+import {merge, Observable, of as observableOf} from 'rxjs';
+import {DocumentResponse} from '../../../../model/DocumentResponse';
+
+/**
+ * Data source for the Table view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class TableDataSource extends DataSource<DocumentResponse> {
+  data: DocumentResponse[];
+  paginator: MatPaginator;
+  sort: MatSort;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Connect this data source to the table. The table will only update when
+   * the returned stream emits new items.
+   * @returns A stream of the items to be rendered.
+   */
+  connect(): Observable<DocumentResponse[]> {
+    // Combine everything that affects the rendered data into one update
+    // stream for the data-table to consume.
+    const dataMutations = [
+      observableOf(this.data),
+      this.paginator.page,
+      this.sort.sortChange
+    ];
+    return merge(...dataMutations).pipe(map(() => {
+      return this.getPagedData(this.getSortedData([...this.data]));
+    }));
+  }
+
+  /**
+   *  Called when the table is being destroyed. Use this function, to clean up
+   * any open connections or free any held resources that were set up during connect.
+   */
+  disconnect() {}
+
+  /**
+   * Paginate the data (client-side). If you're using server-side pagination,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getPagedData(data: DocumentResponse[]) {
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.splice(startIndex, this.paginator.pageSize);
+  }
+
+  /**
+   * Sort the data (client-side). If you're using server-side sorting,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getSortedData(data: DocumentResponse[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'name': return compare(a.documentName, b.documentName, isAsc);
+        case 'id': return compare(+a.id, +b.id, isAsc);
+        default: return 0;
+      }
+    });
+  }
+}
+
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a: string | number, b: string | number, isAsc: boolean) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.css

@@ +1 @@
+.full-width-table {
+  width: 100%;
+}

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.html

@@ +1 @@
+<div>
+  <table mat-table class="full-width-table" matSort aria-label="Elements">
+    <!-- Id Column -->
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+      <td mat-cell *matCellDef="let row">{{row.id}}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="documentName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Document name</th>
+      <td mat-cell *matCellDef="let row">{{row.documentName}}</td>
+    </ng-container>
+
+    <!-- Test Column -->
+    <ng-container matColumnDef="originDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Origin date</th>
+      <td mat-cell *matCellDef="let row">{{row.originDate | date:'d. M. yyyy'}}</td>
+    </ng-container>
+
+    <!-- Test Column -->
+    <ng-container matColumnDef="uploadedDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded date</th>
+      <td mat-cell *matCellDef="let row">{{row.uploadedDate | date:'d. M. yyyy'}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <div class="row justify-content-center align-items-center">
+
+    <mat-paginator #paginator
+                   [length]="dataSource?.data.length"
+                   [pageIndex]="0"
+                   [pageSize]="10"
+                   [pageSizeOptions]="[5, 10, 25]">
+    </mat-paginator>
+  </div>
+
+</div>

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.spec.ts

@@ +1 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TableComponent ],
+      imports: [
+        NoopAnimationsModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.ts

@@ +1 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+import { TableDataSource } from './table-datasource';
+import { DocumentResponse } from '../../../../model/DocumentResponse';
+import {QueryService} from '../../../../services/query.service';
+
+@Component({
+  selector: 'app-table-browse',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.css']
+})
+export class TableComponent implements AfterViewInit, OnInit {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatTable) table: MatTable<DocumentResponse>;
+  dataSource: TableDataSource;
+
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['id', 'documentName', 'originDate', 'uploadedDate'];
+
+  constructor( private queryService: QueryService ) { }
+
+  ngOnInit() {
+    this.queryService.getDocuments().subscribe( documents => {
+      this.dataSource.data = documents;
+    });
+    this.dataSource = new TableDataSource();
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.table.dataSource = this.dataSource;
+  }
+}

fe/fulltextsearch/src/app/model/DocumentResponse.ts

@@ -1 +1 @@
 export class DocumentResponse {
   public id: number;
-  documentName: string;
+  public documentName: string;
+  public originDate: Date;
+  public uploadedDate: Date;
 }

fe/fulltextsearch/src/theme.css

@@ -5 +5 @@
   --search-text-color: #ffffff;
   --search-background-color: #ffffff;
   --navbar-text-color: #ffffff;
+  --grey-color: #DFE2E6;
+  --black-color: #000000;
 }