frontend: small changes, fixed bugs

Author: dev-otitarenko

frontend/angular.json

@@ -31,7 +31,7 @@
  "src/styles.css",
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
- "node_modules/primeng/resources/primeng.min.css"
+ "node_modules/primeng/resources/primeng.css"
  ],
  "scripts": [
  "node_modules/js-base64/base64.js",

frontend/proxy.conf.json

@@ -1,6 +1,6 @@
 {
  "/api/bs": {
- "target": "http://127.0.0.1:8080/api",
+ "target": "http://127.0.0.1:8810/api",
  "secure": false,
  "logLevel": "debug",
  "pathRewrite": {

frontend/src/app/app.module.ts

@@ -16,6 +16,7 @@ import {ProgressBarModule} from "primeng/progressbar";
 import {FileUploadModule} from "primeng/fileupload";
 import {ToastModule} from "primeng/toast";
 import {MessageService} from "primeng/api";
+import {ToolbarModule} from "primeng/toolbar";
 
 @NgModule({
  declarations: [
@@ -28,7 +29,7 @@ import {MessageService} from "primeng/api";
  BrowserAnimationsModule,
  HttpClientModule,
  AppRoutingModule,
- ToastModule,
+ ToastModule, ToolbarModule,
  DialogModule, ProgressBarModule, FileUploadModule,
  TableModule, ButtonModule, RippleModule, TooltipModule
  ],

frontend/src/app/components/start/start.component.html

@@ -1,25 +1,37 @@
-<p-table #dt
- [value]="containers"
+<p-toolbar>
+ <div class="p-toolbar-group-left">
+ <p-button icon="pi pi-plus"
+ (click)="showUpload()" pTooltip="Upload new file" tooltipPosition="bottom"
+ styleClass="p-button-success"></p-button>
+
+ <i class="pi pi-bars"></i>
+
+ <p-button icon="pi pi-trash" [disabled]="selected == null"
+ (click)="remove()" pTooltip="Remove file" tooltipPosition="bottom"
+ styleClass="p-button-danger"></p-button>
+ </div>
+</p-toolbar>
+
+<p-table [value]="containers"
  selectionMode="single" [selection]="selected" (onRowSelect)="onRowSelect($event)"
  [scrollable]="true" [scrollHeight]="'calc(100vh - 150px)'">
- <ng-template pTemplate="caption">
- <div class="p-d-flex">
- <button type="button" pButton icon="pi pi-plus"
- (click)="showUpload()" class="p-mr-2" pTooltip="Upload new file" tooltipPosition="bottom"></button>
- <button type="button" pButton icon="pi pi-trash" [disabled]="selected == null"
- (click)="remove()" class="p-button-warning p-mr-2" pTooltip="Remove file" tooltipPosition="bottom"></button>
- </div>
- </ng-template>
-
  <ng-template pTemplate="header">
  <tr>
  <th>Name</th>
+ <th>Lease State</th>
+ <th>Lease Status</th>
+ <th>Last Modified</th>
+ <th>ETag</th>
  </tr>
  </ng-template>
 
  <ng-template pTemplate="body" let-container>
  <tr [pSelectableRow]="container">
- <td>{{container}}</td>
+ <td><a href="#" (click)="open($event, container)">{{container.name}}</a></td>
+ <td>{{container.leaseState}}</td>
+ <td>{{container.leaseStatus}}</td>
+ <td>{{container.lastModified}}</td>
+ <td>{{container.etag}}</td>
  </tr>
  </ng-template>
 </p-table>

frontend/src/app/components/start/start.component.ts

@@ -3,6 +3,7 @@ import {FilesService} from "../../services/files.service";
 import * as uuid from "uuid";
 import {UploadFileComponent} from "../upload-file/upload-file.component";
 import {MessageService} from "primeng/api";
+import {Container} from "../../utils/Container";
 
 @Component({
  selector: 'app-start',
@@ -11,8 +12,8 @@ import {MessageService} from "primeng/api";
 })
 export class StartComponent implements OnInit {
  idContainer: string = "";
- containers: any[] = [];
- selected: any;
+ containers: Container[] = [];
+ selected: Container;
 
  @ViewChild(UploadFileComponent, { static: false }) uploaderCmp;
 
@@ -29,9 +30,8 @@ export class StartComponent implements OnInit {
  }
 
  async remove() {
- const code = this.selected;
+ const code = this.selected.name;
  const listOfFiles: any = await this.filesService.listOfFilesInContainer(code);
- console.log("ListOfBlobs", listOfFiles);
 
  for(const i in listOfFiles) {
  const idFile = listOfFiles[i];
@@ -48,9 +48,31 @@ export class StartComponent implements OnInit {
 
  async onRowSelect(data: any) {
  this.selected = data.data;
- const code = this.selected;
+ const code = this.selected.name;
  const listOfFiles: any = await this.filesService.listOfFilesInContainer(code);
- console.log("onRowSelect", data, listOfFiles);
+ const url = (listOfFiles.length > 0) ? await this.filesService.getStorageLink(code, listOfFiles[0]) : "";
+
+ console.log("onRowSelect", data, listOfFiles, url);
+ }
+
+ async open(event, row: Container) {
+ const code = row.name;
+ const listOfFiles: any = await this.filesService.listOfFilesInContainer(code);
+ const url = (listOfFiles.length > 0) ? await this.filesService.getStorageLink(code, listOfFiles[0]) : "";
+
+ //this._loading = true;
+ (event as MouseEvent).preventDefault();
+ if (url != "") window.open(""+ url, "_blank")
+ // this.dataService.getLink(this.idProject, id)
+ // .pipe(finalize(() => this._loading = false))
+ // .subscribe(
+ // data => {
+ // window.open(data, '_blank');
+ // },
+ // error => {
+ // this.messageService.showMessage(error, 'Error receiving data');
+ // }
+ // );
  }
 
  fileUploadSuccess(data: any) {

frontend/src/app/services/files.service.ts

@@ -3,6 +3,7 @@ import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {MessageService} from "primeng/api";
 import {UIUtils} from "../utils/Utils";
+import {Container} from "../utils/Container";
 
 @Injectable({
  providedIn: 'root'
@@ -15,6 +16,7 @@ export class FilesService {
  return this.http.get<any>('/api/bs/')
  .toPromise()
  .catch((error) => { this.messageService.add(UIUtils.getMessageVar(error)); })
+ .then(res => <Container[]>res)
  .then(data => { return data; });
  }
 
@@ -49,8 +51,11 @@ export class FilesService {
  .catch((error) => { this.messageService.add(UIUtils.getMessageVar(error)); });
  }
 
- getStorageLink(iddoc: string, id: string): Observable<string> {
- return this.http.get(`/api/bs/${iddoc}/files/${id}/link`, {responseType: 'text'});
+ getStorageLink(iddoc: string, id: string) {
+ return this.http.get(`/api/bs/${iddoc}/files/${id}/link`, {responseType: 'text'})
+ .toPromise()
+ .catch((error) => { this.messageService.add(UIUtils.getMessageVar(error)); })
+ .then(data => { return data; });
  }
 
  beforeUpload(iddoc: string): Observable<string> {

frontend/src/app/utils/Container.ts

@@ -0,0 +1,12 @@
+export class Container {
+ // Container name
+ name: string;
+ // BlobContainerItemProperties.leaseState
+ leaseState?: string;
+ // BlobContainerItemProperties.leaseStatus
+ leaseStatus?: string;
+ // BlobContainerItemProperties.lastModified
+ lastModified?: string;
+ // BlobContainerItemProperties.ETag
+ etag?: string;
+}

frontend/src/app/utils/Utils.ts

@@ -23,17 +23,17 @@ export class UIUtils {
  return { severity: apiError.status === "error" ? 'error' : 'warn', summary: title || 'Error', detail: _message }
  } else {
  try {
- let _message: string = "<b>Status:</b> [" + error.status + "] " + error.statusText + " " + error.url + "<br /><b>Message:</b> " + error.message;
+ let _message: string = `[${error.status}] \"${error.url}\": ${error.statusText}`;
+ if (error.message) _message += `\nMessage: ${error.message}`;
  if (error.error) {
- if (error.error.exception) _message += "<br /><b>Exception: </b>" + error.error.exception;
- if (error.error.message) _message += "<br /><b>Detail message: </b>" + error.error.message;
- let _errors = error.error.errors;
- if (_errors) {
- _message += "<br /><b>Detail info:</b><ul>";
+ if (error.error.exception) _message += `\nException: ${error.error.exception}`;
+ if (error.error.message) _message += `\nAdditional: ${error.error.message}`;
+ if (error.error.errors) {
+  const _errors = error.error.errors;
+ _message += "\nDetail: ";
  for (let _k in _errors) {
- _message += "<li>" + _errors[_k] + "</li>";
+ _message += ", " + _errors[_k];
  }
- _message += "</ul>";
  }
  }
  return { severity: 'error', summary: title || 'Error', detail: _message }