feat(date input): create new component for date input (DSP-94) #298

tobiasschweizer · 2021-05-26T13:47:53Z

resolves DSP-94

TODO:

add @Input() valueRequiredValidator = true; to DateInputTextComponent
add @Input() valueRequiredValidator = true; to DateEditComponent
unsubscribe from valueChanges on component destruction (DateInputTextComponent and DateEditComponent)
disable era for Islamic dates
set day from existing date
move redundant set day logic in service
fix CSS
move createJDNCalendarDateFromKnoraDate to value service

following PR:

add @Input() errorStateMatcher: ErrorStateMatcher; to DateInputTextComponent
add @Input() errorStateMatcher: ErrorStateMatcher; to DateEditComponent
hide "noEra" when displaying date (pipe)
show start and end date side by side (see feat(date input): create new component for date input (DSP-94) #298 (comment))
check if there is a better way to listen for changes (see feat(date input): create new component for date input (DSP-94) #298 (comment) and feat(date input): create new component for date input (DSP-94) #298 (comment))
possibly hide era for Islamic calendar dates

…ction

tobiasschweizer · 2021-06-08T15:36:00Z

@gautschr To test this in the playground, follow these steps:

https://dasch-swiss.github.io/dsp-ui-lib/how-to-contribute/#first-steps
start DSP-API
go to http://localhost:4200/modify to edit or add a date

gautschr

works perfectly!

mdelez · 2021-06-09T08:35:11Z

...cts/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.ts

+
+        // recalculate days of month when era changes
+        const eraChangesSubscription = this.eraControl.valueChanges.subscribe(
+            data => {


do you need data here for the future or can it simply be () (also for the year and month subscriptions)

done in 1f5f699

mdelez · 2021-06-09T08:48:56Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss

+
+.date-form-grid {
+  display: grid;
+  grid-template-columns: 49% 49%;


I think you may be trying to do this here but I would align the start and end input components side by side. Also the form error for the year overlaps the month text. It might also be nice to have "Start" and "End" above the inputs respectively if it is a period.

good point, I thought myself that side by side would be better

I'll do that in an subsequent PR.

mdelez · 2021-06-09T08:52:06Z

...s/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html

@@ -0,0 +1,39 @@
+<div [formGroup]="form">
+
+    <div class="era-radio">


I'd argue that this should actually be hidden in the case of an Islamic date instead of just disabled. I think UIs shouldn't show something that isn't relevant to the user regardless of whether or not they can interact with it.

surely worth thinking about it ...

mdelez · 2021-06-09T08:55:49Z

...s/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html

+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Month</mat-label>
+        <mat-select class="month" [formControlName]="'month'" (selectionChange)="_handleInput()">


I'm not a huge fan of this dropdown for months but I know why you did it. Do you think it would be possible to open a calendar that is locked to the month view for this instead? Same for the days but the calendar would be locked to the days. dismissed

I don't really understand what you mean. Could we briefly talk about this?

There would be more attractive ways to solve this in the UI but the main purpose of this PR was to provide a solution that works for dates of arbitrary precision and BCE and CE dates. As soon as the MatDatePicker supports this (if ever) it could be used instead.

mdelez · 2021-06-09T09:03:09Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.ts

+
+        // TODO: find better way to detect changes
+        const startValueSubscription = this.startDate.valueChanges.subscribe(
+            data => {


is data needed here?

done in 1f5f699

mdelez · 2021-06-09T09:03:16Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.ts

+
+        // TODO: find better way to detect changes
+        const endValueSubscription = this.endDate.valueChanges.subscribe(
+            data => {


is data needed here?

done in 1f5f699

mdelez · 2021-06-09T09:03:55Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.ts

+
+        this._subscriptions.push(eraChangesSubscription);
+
+        // TODO: find better way to detect changes


should this TODO be handled in this PR?

I'll consider this in a subsequent PR.

mdelez · 2021-06-09T09:04:01Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.ts

+
+        this._subscriptions.push(startValueSubscription);
+
+        // TODO: find better way to detect changes


should this TODO be handled in this PR?

I'll consider this in a subsequent PR.

mdelez · 2021-06-09T09:05:55Z

projects/dsp-ui/src/lib/viewer/values/date-value/date-value.component.ts

@@ -45,8 +45,6 @@ export class DateValueComponent extends BaseValueComponent implements OnInit, On

    matcher = new ValueErrorStateMatcher();

-    dateEditable = true;
-
    constructor(@Inject(FormBuilder) private _fb: FormBuilder,
                private _valueService: ValueService) {


I don't think you need the ValueService here anymore

done in 7a2d826

feat(date input): create new component for date input (ongoing)

e4cdd08

tobiasschweizer self-assigned this May 26, 2021

tobiasschweizer added enhancement New feature or request user requirement labels May 26, 2021

Tobias Schweizer added 26 commits May 27, 2021 08:53

feat(date input): component for date input (ongoing)

7a3f730

feat(date input): component for date input (ongoing)

3487698

feat(date input): component for date input (ongoing)

c89d43b

feat(date input): component for date input (ongoing)

bd36043

feat(date input): component for date input (ongoing)

d05d6bf

feat(date input): component for date input (ongoing)

79153d3

feat(date input): component for date input (ongoing)

5e185df

feat(date input): component for date input (ongoing))

f4a4e90

feat(date input): component for date input (ongoing))

af02e3e

feat(date input): component for date input (ongoing))

5892342

feat(date input): component for date input (ongoing))

d5de294

feat(date input): component for date input (ongoing))

da7b1f8

feat(date input): component for date input (ongoing))

9dd504b

feat(date input): component for date input (ongoing))

b661bf3

feat(date input): component for date input (ongoing))

198d499

feat(date input): component for date input (ongoing))

6114a44

feat(date input): component for date input (ongoing))

57a0488

feat(date input): component for date input (ongoing))

4924318

feat(date input): component for date input (ongoing))

6568cb6

feat(date input): component for date input (ongoing))

89c01bd

feat(date input): component for date input (ongoing))

14a6068

feat(date input): component for date input (ongoing))

dec5b13

feat(date input): component for date input (ongoing))

10031b2

feat(date input): component for date input (ongoing))

fbf1946

feat(date input): component for date input (ongoing))

6fba550

feat(date input): component for date input (ongoing))

aca2df9

Tobias Schweizer added 19 commits June 7, 2021 11:23

test(date edit): add spec

5bdcaf8

feat(value service): move date calc logic to service

c55e74e

test(date edit): add spec

58ac4d7

test(date edit): add spec

5f09c34

test(date input text): add spec

5b9e458

test(date input text): add spec

69a244a

test(date input text): add spec

d4c3f8f

test(date input text): add spec

a22fa04

test(date input text): add spec

42bbc2d

test(date input text): add spec

e604f01

test(date input text): add spectest(date input text): add spec

52a6c50

test(date input text): add spec

922a070

test(date input text): add spec

86ebb93

test(date input text): fix CSS

55dcd07

feat(value service): move date calc logic to service

28bd174

feat(value service): move date calc logic to service

848a523

feat(viewer): handle Islamic date (no era)

1e2cb4a

refactor(date edit): centralize logic for setting era

9429679

feat(date input / edit): unsubscribe from valueChanges on com. destru…

5a14452

…ction

tobiasschweizer requested review from mdelez and gautschr June 8, 2021 15:33

gautschr approved these changes Jun 9, 2021

View reviewed changes

mdelez requested changes Jun 9, 2021

View reviewed changes

Tobias Schweizer added 2 commits June 9, 2021 11:25

refactor(viewer): remove parameters

1f5f699

refactor(viewer): remove injected service

7a2d826

mdelez self-requested a review June 9, 2021 10:31

mdelez approved these changes Jun 9, 2021

View reviewed changes

tobiasschweizer merged commit d23e844 into main Jun 9, 2021

tobiasschweizer deleted the wip/dsp-94-date-input branch June 9, 2021 11:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(date input): create new component for date input (DSP-94) #298

feat(date input): create new component for date input (DSP-94) #298

tobiasschweizer commented May 26, 2021 •

edited

tobiasschweizer commented Jun 8, 2021

gautschr left a comment

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021 •

edited

tobiasschweizer Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

mdelez Jun 9, 2021

tobiasschweizer Jun 9, 2021

		@@ -0,0 +1,39 @@
		<div [formGroup]="form">

		<div class="era-radio">


		this._subscriptions.push(eraChangesSubscription);

		// TODO: find better way to detect changes


		this._subscriptions.push(startValueSubscription);

		// TODO: find better way to detect changes

feat(date input): create new component for date input (DSP-94) #298

feat(date input): create new component for date input (DSP-94) #298

Conversation

tobiasschweizer commented May 26, 2021 • edited

TODO:

tobiasschweizer commented Jun 8, 2021

gautschr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdelez Jun 9, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer commented May 26, 2021 •

edited

mdelez Jun 9, 2021 •

edited