Commit cf3eecbc authored by David's avatar David
Browse files

Can view a staged document reasonably well

parent 5778e9b9
......@@ -131,4 +131,4 @@
"cli": {
"analytics": "b1071caa-ca8a-408c-8c60-405d1c88f3e1"
}
}
\ No newline at end of file
}
......@@ -8934,6 +8934,14 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
"ngx-take-until-destroy": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/ngx-take-until-destroy/-/ngx-take-until-destroy-5.4.0.tgz",
"integrity": "sha512-e+VfCrHbLybdKWoQ8prdhmVzWI6vTnedr/9cVGQTkfepMdLz5D++VDk+Wnbs7mru6S9C+kIpNWUlh2YMPl928Q==",
"requires": {
"tslib": "^1.9.0"
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
......
......@@ -5,7 +5,7 @@ import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LoginComponent} from './login/login.component';
import {ReactiveFormsModule} from '@angular/forms';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
......@@ -16,18 +16,20 @@ import {DocumentManagerComponent} from './document-manager/document-manager.comp
import {TokenInterceptor} from './token-interceptor';
import { StagingDocumentComponent } from './document-manager/staging-document/staging-document.component';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DocumentManagerComponent,
StagingDocumentComponent
StagingDocumentComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatIconModule,
......@@ -35,7 +37,8 @@ import {MatCardModule} from '@angular/material/card';
MatButtonModule,
HttpClientModule,
StorageModule.forRoot({IDBNoWrap: true}),
MatCardModule
MatCardModule,
MatSelectModule
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true},
......
......@@ -18,7 +18,7 @@ export class DocumentManagerComponent implements OnInit {
ngOnInit() {
// load staging documents, display them create a timer to update the list
timer(0, 5000).pipe(
of(1).pipe(
tap( m => this.loading = true),
flatMap(m => this.documentService.loadStagingFiles()),
tap(stagingFiles => {
......
import { TestBed } from '@angular/core/testing';
import { CabinetsService } from './cabinets.service';
describe('CabinetsService', () => {
let service: CabinetsService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(CabinetsService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {EMPTY, Observable} from 'rxjs';
import {Cabinet, MayanResult} from '../../mayan-api';
import {environment} from '../../../environments/environment';
import {expand, map, reduce} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CabinetsService {
constructor(private readonly httpClient: HttpClient) {
}
getAllCabinets(): Observable<Cabinet[]> {
return this.httpClient.get<MayanResult<Cabinet>>(`${environment.mayan}/cabinets/`).pipe(
expand(response => {
if (response.next !== null) {
return this.httpClient.get<MayanResult<Cabinet>>(response.next);
} else {
return EMPTY;
}
}),
// @ts-ignore
map(result => result.results.flatMap(array => array)),
reduce((acc: Cabinet[], x) => acc.concat(x), []),
map(cabinets => cabinets.sort((a, b) =>
a.full_path.localeCompare(b.full_path)))
);
}
}
import { TestBed } from '@angular/core/testing';
import { TagsService } from './tags.service';
describe('TagsService', () => {
let service: TagsService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(TagsService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {MayanResult, Tag} from '../../mayan-api';
import {EMPTY, Observable} from 'rxjs';
import {environment} from '../../../environments/environment';
import {expand, flatMap, map, reduce} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class TagsService {
constructor(private readonly httpClient: HttpClient) {
}
// TODO: implement caching of the tags request?
getAllTags(): Observable<Tag[]> {
return this.httpClient.get<MayanResult<Tag>>(`${environment.mayan}/tags/`).pipe(
expand(response => {
if (response.next !== null) {
// ANOTHER REQUEST
return this.httpClient.get<MayanResult<Tag>>(response.next);
} else {
return EMPTY;
}
}),
// @ts-ignore
map(result => result.results.flatMap(array => array)),
reduce((acc: Tag[], x: Tag[]) => acc.concat(x), []),
);
}
}
......@@ -3,9 +3,44 @@
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{stagingFolderFile.filename}}</mat-card-title>
</mat-card-header>
<img mat-card-image src="{{stagingFolderFile.image_url}}" alt="Staging Document Preview">
<div class="preview-container">
<div>
<img mat-card-image src="{{stagingFolderFile.image_url}}" alt="Staging Document Preview" class="preview-image" />
</div>
</div>
<mat-card-actions>
<button mat-button>Import</button>
<button mat-button>Discard</button>
<div class="document-form">
<form [formGroup]="docForm">
<div>
<mat-form-field>
<mat-label>Tags</mat-label>
<mat-select multiple formControlName="selectedTags" >
<mat-option *ngFor="let tag of (tags | async)" [value]="tag.id">
{{tag.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>Cabinet</mat-label>
<mat-select formControlName="selectedCabinet">
<mat-option *ngFor="let cabinet of (cabinets | async)" [value]="cabinet.id">
{{cabinet.full_path}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="document-action-buttons">
<button mat-raised-button color="primary" >Import</button>
<button mat-raised-button color="warn">Discard</button>
</div>
</form>
</div>
</mat-card-actions>
</mat-card>
.preview-container {
display: flex;
justify-content: space-around;
background: lightgray;
}
.preview-image {
//max-height: 200px;
}
.document-form {
display: flex;
flex-direction: column;
.document-action-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
import {Component, Input, OnInit} from '@angular/core';
import {StagingFolderFile} from '../../mayan-api';
import {StagingFolderFile, Tag} from '../../mayan-api';
import {TagsService} from '../services/tags.service';
import {FormControl, FormGroup} from '@angular/forms';
import {CabinetsService} from '../services/cabinets.service';
@Component({
selector: 'app-staging-document',
......@@ -10,7 +13,18 @@ export class StagingDocumentComponent implements OnInit {
@Input() stagingFolderFile: StagingFolderFile;
constructor() { }
constructor(private readonly tagsService: TagsService,
private readonly cabinetsService: CabinetsService) {
}
tags = this.tagsService.getAllTags();
cabinets = this.cabinetsService.getAllCabinets();
docForm = new FormGroup({
selectedTags: new FormControl([]),
selectedCabinet: new FormControl(null)
});
ngOnInit(): void {
}
......
......@@ -31,3 +31,24 @@ export interface StagingFolderFile {
image_url: string;
url: string;
}
export interface Tag {
color: string;
documents_count: number;
documents_url: string;
id: number;
label: string;
url: string;
}
export interface Cabinet {
children: Cabinet[];
documents_count: number;
documents_url: string;
full_path: string;
id: number;
label: string;
parent?: number;
parent_url: string;
url: string;
}
......@@ -15,7 +15,7 @@
"node_modules/@types"
],
"lib": [
"es2018",
"es2019",
"dom"
]
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment