Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[59845] Update Datepicker for automatic scheduling mode #17349

Draft
wants to merge 21 commits into
base: feature/42388-new-automatic-scheduling-mode
Choose a base branch
from
Draft

[59845] Update Datepicker for automatic scheduling mode #17349

wants to merge 21 commits into from

Conversation

HDinger
Copy link
Contributor

@HDinger HDinger commented Dec 4, 2024 •
edited
Loading

Ticket

https://community.openproject.org/projects/stream-planning-and-reporting/work_packages/59845/activity

What are you trying to accomplish?

Primerise the datepicker dialog

ToDo

  • Render a Primer Banner with different texts depending on the data
  • There is a new segmented control "Scheduling mode"
  • The inputs are Primer Text fields
  • The dialog content (text fields) update automatically:
    • when the calendar is changed
    • when the text field values are changed manually
  • Works for Milestone and "normal" Datepicker

Screenshots

Dec-18-2024 09-26-28

What approach did you choose and why?

Moving the datepicker dialog closer towards Primer. Two things will remain however in angular:

  • the modal itself, and
  • the flatpickr Instance.

The modal is so closely coupled to the edit field that it will be very hard to get rid of that. Flatpickr is an external library which will not get rid of for now.

Merge checklist

  • Added/updated tests
  • Added/updated documentation in Lookbook (patterns, previews, etc)
  • Tested major browsers (Chrome, Firefox, Edge, ...)

@HDinger HDinger added the feature label Dec 4, 2024
@HDinger HDinger added this to the 15.2.x milestone Dec 4, 2024
@HDinger HDinger force-pushed the feature/59845-update-datepicker-for-automatic-scheduling-mode branch 5 times, most recently from cc0f76c to 7bdd2e1 Compare December 6, 2024 12:45
@HDinger HDinger force-pushed the feature/59845-update-datepicker-for-automatic-scheduling-mode branch from d7bcc0a to 7f70319 Compare December 11, 2024 08:39
@HDinger HDinger force-pushed the feature/59845-update-datepicker-for-automatic-scheduling-mode branch from b7cba78 to ec6b2bd Compare December 16, 2024 12:04
github-advanced-security[bot]
github-advanced-security bot found potential problems Dec 18, 2024
View reviewed changes
...tend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts
Comment on lines +29 to +36
import {
ChangeDetectorRef,
Component,
ElementRef,
Inject,
Injector,
OnInit,
} from '@angular/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports ChangeDetectorRef, ElementRef, Inject, Injector.
...tend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts
import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-picker-edit-field.component';
import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import PathHelperService.
...tend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts
import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-picker-edit-field.component';
import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
import { I18nService } from 'core-app/core/i18n/i18n.service';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import I18nService.
...tend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts
import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-picker-edit-field.component';
import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
import { I18nService } from 'core-app/core/i18n/i18n.service';
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import ResourceChangeset.
...tend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts
import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
import { I18nService } from 'core-app/core/i18n/i18n.service';
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import HalResource.
...tend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts
OpEditingPortalHandlerToken,
OpEditingPortalSchemaToken,
} from 'core-app/shared/components/fields/edit/edit-field.component';
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import ResourceChangeset.
...tend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts
OpEditingPortalSchemaToken,
} from 'core-app/shared/components/fields/edit/edit-field.component';
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import HalResource.
...tend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts
} from 'core-app/shared/components/fields/edit/edit-field.component';
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';
import { IFieldSchema } from 'core-app/shared/components/fields/field.base';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import IFieldSchema.
...tend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts
import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';
import { IFieldSchema } from 'core-app/shared/components/fields/field.base';
import { EditFieldHandler } from 'core-app/shared/components/fields/edit/editing-portal/edit-field-handler';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import EditFieldHandler.
...tend/src/app/shared/components/fields/edit/field-types/days-duration-edit-field.component.ts
import { HalResource } from 'core-app/features/hal/resources/hal-resource';
import { IFieldSchema } from 'core-app/shared/components/fields/field.base';
import { EditFieldHandler } from 'core-app/shared/components/fields/edit/editing-portal/edit-field-handler';
import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import PathHelperService.
HDinger added 18 commits December 18, 2024 09:23
@HDinger
Start on using Primer components inside the datepicker modal
54acf64
@HDinger
Remove unused angular components which are going to be replaced by Vi…
f27f490 
…ewComponents
@HDinger
Use existing fields for now to get the modal working again
d4a5c81
@HDinger
Render the form from rails and only the actual datepicker in angular.
19a731a
@HDinger
Extract logic to update the edit field after the turboFrame was submi…
9149bd3 
…tted into a directive so that it can be used for the datepicker as well
@HDinger
Extract logic of the progress modal to be reused for the datepicker m…
a9cf431 
…odal as well
@HDinger
Update the dialog when the "ignore_non_working_days" checkbox is checked
a3824b1
@HDinger
Update the dialog content when chaning the scheduling mode
0b96e2f
@HDinger
Cancel the editField correctly when canceling the dialog
4cd3e66
@HDinger
First try on updating the datepicker when the fields above change
3e8ec27
@HDinger
Correctly save the sheduling mode and duration
d823bfd
@HDinger
Preserve values when updating the content via turboStream
82d8461
@HDinger
Disable the form in automatic scheduling mode
fe6132a
@HDinger
Show additional tabs in datepicker dialog
9fda4e6
@HDinger
Do not update the fields so often
3499005
@HDinger
Correctly parese the duration
505be7e
@HDinger
Revert commit d2a6ba2
6fc0e7f
@HDinger
Improve event handling when datepicker field change so that also non-…
37cf8c3 
…user changes are tracked
@HDinger HDinger force-pushed the feature/59845-update-datepicker-for-automatic-scheduling-mode branch from 0a32707 to 9488170 Compare December 18, 2024 08:37
@HDinger HDinger changed the base branch from dev to feature/42388-new-automatic-scheduling-mode December 18, 2024 08:38
@HDinger HDinger removed this from the 15.2.x milestone Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
feature pullpreview
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@HDinger