From 14f42b8b7a98e54e67204a51042d9d724dc13f03 Mon Sep 17 00:00:00 2001
From: Jonas Winkler <jonas.winkler@jpwinkler.de>
Date: Wed, 4 Nov 2020 13:10:23 +0100
Subject: [PATCH] fixed date editing, fixes #10
---
src-ui/src/app/app.module.ts | 4 +-
.../input/date-time/date-time.component.css | 0
.../input/date-time/date-time.component.html | 14 +++++
.../date-time/date-time.component.spec.ts | 25 ++++++++
.../input/date-time/date-time.component.ts | 62 +++++++++++++++++++
.../document-detail.component.html | 11 +---
.../document-detail.component.ts | 49 +++++++--------
7 files changed, 127 insertions(+), 38 deletions(-)
create mode 100644 src-ui/src/app/components/common/input/date-time/date-time.component.css
create mode 100644 src-ui/src/app/components/common/input/date-time/date-time.component.html
create mode 100644 src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts
create mode 100644 src-ui/src/app/components/common/input/date-time/date-time.component.ts
diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index dce6a9225..3c1b37474 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { SelectComponent } from './components/common/input/select/select.compone
import { CheckComponent } from './components/common/input/check/check.component';
import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { DateTimeComponent } from './components/common/input/date-time/date-time.component';
@NgModule({
declarations: [
@@ -69,7 +70,8 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
TextComponent,
SelectComponent,
CheckComponent,
- SaveViewConfigDialogComponent
+ SaveViewConfigDialogComponent,
+ DateTimeComponent
],
imports: [
BrowserModule,
diff --git a/src-ui/src/app/components/common/input/date-time/date-time.component.css b/src-ui/src/app/components/common/input/date-time/date-time.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/common/input/date-time/date-time.component.html b/src-ui/src/app/components/common/input/date-time/date-time.component.html
new file mode 100644
index 000000000..eaed0e185
--- /dev/null
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.html
@@ -0,0 +1,14 @@
+<div class="form-row">
+ <div class="form-group col">
+ <label for="created_date">{{titleDate}}</label>
+ <input type="date" class="form-control" id="created_date" [(ngModel)]="dateValue" (change)="dateOrTimeChanged()">
+ </div>
+ <div class="form-group col">
+ <label for="created_time">{{titleTime}}</label>
+ <input type="time" class="form-control" id="created_time" [(ngModel)]="timeValue" (change)="dateOrTimeChanged()">
+ </div>
+
+</div>
+
+
+<!-- <small *ngIf="hint" class="form-text text-muted">{{hint}}</small> -->
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts b/src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts
new file mode 100644
index 000000000..0657768bd
--- /dev/null
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateTimeComponent } from './date-time.component';
+
+describe('DateTimeComponent', () => {
+ let component: DateTimeComponent;
+ let fixture: ComponentFixture<DateTimeComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ DateTimeComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DateTimeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src-ui/src/app/components/common/input/date-time/date-time.component.ts b/src-ui/src/app/components/common/input/date-time/date-time.component.ts
new file mode 100644
index 000000000..f8b66133a
--- /dev/null
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.ts
@@ -0,0 +1,62 @@
+import { formatDate } from '@angular/common';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AbstractInputComponent } from '../abstract-input';
+
+@Component({
+ providers: [{
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => DateTimeComponent),
+ multi: true
+ }],
+ selector: 'app-input-date-time',
+ templateUrl: './date-time.component.html',
+ styleUrls: ['./date-time.component.css']
+})
+export class DateTimeComponent implements OnInit,ControlValueAccessor {
+
+ constructor() {
+ }
+
+ onChange = (newValue: any) => {};
+
+ onTouched = () => {};
+
+ writeValue(newValue: any): void {
+ this.dateValue = formatDate(newValue, 'yyyy-MM-dd', "en-US")
+ this.timeValue = formatDate(newValue, 'HH:mm:ss', 'en-US')
+ }
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+ setDisabledState?(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ }
+
+ @Input()
+ titleDate: string = "Date"
+
+ @Input()
+ titleTime: string = "Time"
+
+ @Input()
+ disabled: boolean = false
+
+ @Input()
+ hint: string
+
+ timeValue
+
+ dateValue
+
+ ngOnInit(): void {
+ }
+
+ dateOrTimeChanged() {
+ this.onChange(formatDate(this.dateValue + "T" + this.timeValue,"yyyy-MM-ddTHH:mm:ssZZZZZ", "en-us", "UTC"))
+ }
+
+}
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index f6bb4cebb..23981aa47 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -32,16 +32,7 @@
formControlName='archive_serial_number'>
</div>
- <div class="form-row">
- <div class="form-group col">
- <label for="created_date">Date created</label>
- <input type="date" class="form-control" id="created_date" formControlName='created_date'>
- </div>
- <div class="form-group col">
- <label for="created_time">Time created</label>
- <input type="time" class="form-control" id="created_time" formControlName='created_time'>
- </div>
- </div>
+ <app-input-date-time title="Date created" titleTime="Time created" formControlName="created"></app-input-date-time>
<div class="form-group">
<label for="content">Content</label>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index dcbaaa1a8..fb6be56aa 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -38,8 +38,7 @@ export class DocumentDetailComponent implements OnInit {
documentForm: FormGroup = new FormGroup({
title: new FormControl(''),
content: new FormControl(''),
- created_date: new FormControl(),
- created_time: new FormControl(),
+ created: new FormControl(),
correspondent_id: new FormControl(),
document_type_id: new FormControl(),
archive_serial_number: new FormControl(),
@@ -59,6 +58,10 @@ export class DocumentDetailComponent implements OnInit {
private documentListViewService: DocumentListViewService) { }
ngOnInit(): void {
+ this.documentForm.valueChanges.subscribe(wow => {
+ Object.assign(this.document, this.documentForm.value)
+ })
+
this.correspondentService.list(1,100000).subscribe(result => this.correspondents = result.results)
this.documentTypeService.list(1,100000).subscribe(result => this.documentTypes = result.results)
this.tagService.list(1,100000).subscribe(result => this.tags = result.results)
@@ -67,18 +70,24 @@ export class DocumentDetailComponent implements OnInit {
this.documentId = +paramMap.get('id')
this.previewUrl = this.documentsService.getPreviewUrl(this.documentId)
this.downloadUrl = this.documentsService.getDownloadUrl(this.documentId)
- this.documentsService.get(this.documentId).subscribe(doc => {
- this.openDocumentService.openDocument(doc)
- this.document = doc
- this.title = doc.title
- this.documentForm.patchValue(doc)
- this.documentForm.get('created_date').patchValue(this.datePipe.transform(doc.created, 'yyyy-MM-dd'))
- this.documentForm.get('created_time').patchValue(this.datePipe.transform(doc.created, 'HH:mm:ss'))
- }, error => {this.router.navigate(['404'])})
+ if (this.openDocumentService.getOpenDocument(this.documentId)) {
+ this.updateComponent(this.openDocumentService.getOpenDocument(this.documentId))
+ } else {
+ this.documentsService.get(this.documentId).subscribe(doc => {
+ this.openDocumentService.openDocument(doc)
+ this.updateComponent(doc)
+ }, error => {this.router.navigate(['404'])})
+ }
})
}
+ updateComponent(doc: PaperlessDocument) {
+ this.document = doc
+ this.title = doc.title
+ this.documentForm.patchValue(doc)
+ }
+
createTag() {
var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
modal.componentInstance.dialogMode = 'create'
@@ -133,29 +142,15 @@ export class DocumentDetailComponent implements OnInit {
}
}
- getDateCreated() {
- let newDate = this.documentForm.value.created_date
- let newTime = this.documentForm.value.created_time
- return formatDate(newDate + "T" + newTime,"yyyy-MM-ddTHH:mm:ssZZZZZ", "en-us", "UTC")
-
- }
- save() {
- let newDocument = Object.assign(Object.assign({}, this.document), this.documentForm.value)
-
- newDocument.created = this.getDateCreated()
-
- this.documentsService.update(newDocument).subscribe(result => {
+ save() {
+ this.documentsService.update(this.document).subscribe(result => {
this.close()
})
}
saveEditNext() {
- let newDocument = Object.assign(Object.assign({}, this.document), this.documentForm.value)
-
- newDocument.created = this.getDateCreated()
-
- this.documentsService.update(newDocument).subscribe(result => {
+ this.documentsService.update(this.document).subscribe(result => {
this.documentListViewService.getNext(this.document.id).subscribe(nextDocId => {
if (nextDocId) {
this.openDocumentService.closeDocument(this.document)