So it kinda works. Document submission is weird.

angular.json

@@ -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": []

package-lock.json

@@ -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",

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~9.0.0",
     "@angular/platform-browser-dynamic": "~9.0.0",
     "@angular/router": "~9.0.0",
+    "@ng-select/ng-select": "^3.7.2",
     "@ngx-pwa/local-storage": "^9.0.2",
     "ngx-take-until-destroy": "^5.4.0",
     "rxjs": "~6.5.4",

src/app/app.module.ts

@@ -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},

src/app/document-manager/document-manager.component.ts

 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({

src/app/document-manager/document-service.service.spec.ts → src/app/document-manager/services/document-types.service.spec.ts

 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', () => {

src/app/document-manager/services/document-types.service.ts

+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)),
+    );
+  }
+}

src/app/document-manager/document.service.ts → src/app/document-manager/services/document.service.ts

 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))
+    );
+  }
 }

src/app/document-manager/services/tags.service.ts

 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))
+    );
+  }
 }

src/app/document-manager/staging-document/staging-document.component.html

@@ -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>
 
 

src/app/document-manager/staging-document/staging-document.component.scss

@@ -7,6 +7,10 @@
   //max-height: 200px;
 }
 
+.full-width {
+  width: 100%;
+}
+
 .document-form {
   display: flex;
   flex-direction: column;

src/app/document-manager/staging-document/staging-document.component.ts

 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!');
+  }
 }

src/app/mayan-api.ts

@@ -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;
+}