Commit 62f275a2 authored by David's avatar David
Browse files

So it kinda works. Document submission is weird.

parent cf3eecbc
......@@ -29,6 +29,7 @@
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/@ng-select/ng-select/themes/material.theme.css",
"src/styles.scss"
],
"scripts": []
......
......@@ -2408,6 +2408,14 @@
"integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
"dev": true
},
"@ng-select/ng-select": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-3.7.2.tgz",
"integrity": "sha512-hbus2lRIJVPYm8g/z1b8T/iGpYaRQZpzGvfYzdeteguhQOly8pkC8gsSRCLVBv5wyJzDAuOKsKmHKdzakdRisA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@ngtools/webpack": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.0.1.tgz",
......
......@@ -17,6 +17,7 @@ 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';
import {NgSelectModule} from '@ng-select/ng-select';
@NgModule({
declarations: [
......@@ -38,7 +39,8 @@ import {MatSelectModule} from '@angular/material/select';
HttpClientModule,
StorageModule.forRoot({IDBNoWrap: true}),
MatCardModule,
MatSelectModule
MatSelectModule,
NgSelectModule
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true},
......
import { Component, OnInit } from '@angular/core';
import {EMPTY, Observable, of, timer} from 'rxjs';
import {flatMap, tap} from 'rxjs/operators';
import {DocumentService} from './document.service';
import {DocumentService} from './services/document.service';
import {StagingFolderFile} from '../mayan-api';
@Component({
......
import { TestBed } from '@angular/core/testing';
import { DocumentService } from './document.service';
import { DocumentTypesService } from './document-types.service';
describe('DocumentServiceService', () => {
let service: DocumentService;
describe('DocumentTypesService', () => {
let service: DocumentTypesService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(DocumentService);
service = TestBed.inject(DocumentTypesService);
});
it('should be created', () => {
......
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {EMPTY, Observable} from 'rxjs';
import {MayanDocumentType, MayanResult} from '../../mayan-api';
import {environment} from '../../../environments/environment';
import {expand, map} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DocumentTypesService {
constructor(private readonly httpClient: HttpClient) {
}
getAllDocumentTypes(): Observable<MayanDocumentType[]> {
return this.httpClient.get<MayanResult<MayanDocumentType>>(`${environment.mayan}/document_types/`).pipe(
expand(response => {
if (response.next !== null) {
return this.httpClient.get<MayanResult<MayanDocumentType>>(response.next);
} else {
return EMPTY;
}
}),
// @ts-ignore
map(result => result.results.flatMap(array => array)),
);
}
}
import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import {MayanResult, StagingFolder, StagingFolderFile} from '../mayan-api';
import {MayanResult, NewDocument, StagingFolder, StagingFolderFile} from '../../mayan-api';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {flatMap, map} from 'rxjs/operators';
import {environment} from '../../../environments/environment';
import {flatMap, map, tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
......@@ -20,4 +20,10 @@ export class DocumentService {
flatMap(stagingFolder => of(stagingFolder.files))
);
}
importDocument(newDocument: NewDocument): Observable<any> {
return this.httpClient.post(`${environment.mayan}/documents/`, newDocument).pipe(
tap(response => console.log('Creating document response: ', response))
);
}
}
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {MayanResult, Tag} from '../../mayan-api';
import {MayanResult, Tag, WritableTag} from '../../mayan-api';
import {EMPTY, Observable} from 'rxjs';
import {environment} from '../../../environments/environment';
import {expand, flatMap, map, reduce} from 'rxjs/operators';
import {expand, flatMap, map, reduce, tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
......@@ -30,4 +30,14 @@ export class TagsService {
reduce((acc: Tag[], x: Tag[]) => acc.concat(x), []),
);
}
createTag(color: string, label: string): Observable<Tag> {
const writableTag = {
color,
label
} as WritableTag;
return this.httpClient.post<Tag>(`${environment.mayan}/tags/`, writableTag).pipe(
tap(response => console.log('create Tag Response', response))
);
}
}
......@@ -11,32 +11,66 @@
<mat-card-actions>
<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>
<mat-form-field class="full-width">
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="label" placeholder="March Energy Bill"/>
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>Description</mat-label>
<textarea matInput formControlName="description" placeholder="This is a tax document..."></textarea>
</mat-form-field>
<div *ngIf="(documentTypes | async)?.length > 1">
<ng-select
placeholder="Select Document type"
[items]="documentTypes | async"
[closeOnSelect]="true"
[loading]="documentTypesLoading"
bindLabel="label"
bindValue="id"
formControlName="selectedDocumentType">
<ng-template ng-option-tmp let-item="item" let-index="index">
{{item.label}}
</ng-template>
</ng-select>
</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>
<ng-select
placeholder="Optional Tags"
[items]="tags | async" [multiple]="true"
[closeOnSelect]="false"
[addTag]="createTagPromise"
[loading]="tagsLoading"
bindLabel="label"
bindValue="id"
formControlName="selectedTags">
<ng-template ng-option-tmp let-item="item" let-index="index">
{{item.label}}
</ng-template>
</ng-select>
</div>
<div>
<ng-select
placeholder="Select Cabinet"
[items]="cabinets | async"
[loading]="cabinetsLoading"
[closeOnSelect]="true"
bindLabel="full_path"
bindValue="id"
formControlName="selectedCabinet">
<ng-template ng-option-tmp let-item="item" let-index="index">
{{item.full_path}}
</ng-template>
</ng-select>
</div>
<div class="document-action-buttons">
<button mat-raised-button color="primary" >Import</button>
<button mat-raised-button color="warn">Discard</button>
<button mat-raised-button color="primary" [disabled]="docForm.invalid"
(click)="importDocument()">Import</button>
<button mat-raised-button color="warn" (click)="discardDocument()">Discard</button>
</div>
......
......@@ -7,6 +7,10 @@
//max-height: 200px;
}
.full-width {
width: 100%;
}
.document-form {
display: flex;
flex-direction: column;
......
import {Component, Input, OnInit} from '@angular/core';
import {StagingFolderFile, Tag} from '../../mayan-api';
import {NewDocument, StagingFolderFile, Tag} from '../../mayan-api';
import {TagsService} from '../services/tags.service';
import {FormControl, FormGroup} from '@angular/forms';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {CabinetsService} from '../services/cabinets.service';
import {finalize, map, tap} from 'rxjs/operators';
import {DocumentTypesService} from '../services/document-types.service';
import {DocumentService} from '../services/document.service';
@Component({
selector: 'app-staging-document',
......@@ -14,19 +17,73 @@ export class StagingDocumentComponent implements OnInit {
@Input() stagingFolderFile: StagingFolderFile;
constructor(private readonly tagsService: TagsService,
private readonly cabinetsService: CabinetsService) {
private readonly cabinetsService: CabinetsService,
private readonly documentTypesService: DocumentTypesService,
private readonly documentService: DocumentService) {
}
tags = this.tagsService.getAllTags();
cabinets = this.cabinetsService.getAllCabinets();
documentTypesLoading = true;
documentTypes = this.documentTypesService.getAllDocumentTypes().pipe(
tap(next => this.docForm.controls.selectedDocumentType.setValue(next[0].id)),
finalize(() => this.documentTypesLoading = false)
);
tagsLoading = true;
tags = this.tagsService.getAllTags().pipe(
finalize(() => this.tagsLoading = false)
);
cabinetsLoading = true;
cabinets = this.cabinetsService.getAllCabinets().pipe(
finalize(() => this.cabinetsLoading = false)
);
submitting = false;
docForm = new FormGroup({
selectedTags: new FormControl([]),
selectedCabinet: new FormControl(null)
selectedCabinet: new FormControl(null, [Validators.required]),
selectedDocumentType: new FormControl(null, [Validators.required]),
description: new FormControl(null, [Validators.required]),
label: new FormControl(null, [Validators.required]),
});
importEnabled = this.docForm.controls.selectedCabinet.valueChanges.pipe(
map(val => val !== null)
);
createTagPromise(name: string): Promise<Tag>;
// @ts-ignore
ngOnInit(): void {
this.createTagPromise = (name) => {
// this is somehow the ng-select instead of this class
console.log('what am I?', this);
return this.tagsService.createTag('#020091', name).toPromise();
};
}
importDocument() {
const newDoc: NewDocument = {
document_type: this.docForm.controls.selectedDocumentType.value,
file: this.stagingFolderFile.url,
label: this.docForm.controls.label.value,
language: 'English',
description: this.docForm.controls.description.value
};
this.submitting = true;
this.documentService.importDocument(newDoc)
.subscribe(() => {
// TODO: need to remove myself from the list?
this.submitting = false;
});
}
discardDocument() {
console.log('discarding document!');
}
}
......@@ -32,6 +32,12 @@ export interface StagingFolderFile {
url: string;
}
export interface WritableTag {
color: string;
documents_pk_list?: number[];
label: string;
}
export interface Tag {
color: string;
documents_count: number;
......@@ -52,3 +58,30 @@ export interface Cabinet {
parent_url: string;
url: string;
}
export interface NewDocument {
description: string;
document_type: number;
file: string;
label: string;
language: string;
}
export type MayanTimeUnit = 'days' | 'hours' | 'minutes'
export interface MayanDocumentType {
delete_time_period: number;
delete_time_unit: MayanTimeUnit;
documents_url: string;
documents_count: number;
id: number;
label: string;
filenames: DocumentTypeFilename[];
trash_time_period: number;
trash_time_unit: MayanTimeUnit;
url: string;
}
export interface DocumentTypeFilename {
filename: string;
}
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