Implement datetimepicker for motion workflow

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.html

@@ -0,0 +1,53 @@
+<h4>
+    <span class="title-font">{{ title }}</span>
+    <button
+        class="small-button"
+        type="button"
+        mat-icon-button
+        disableRipple
+        *ngIf="!isEditMode && perms.isAllowed('change_metadata')"
+        (click)="onEdit()"
+    >
+        <mat-icon>edit</mat-icon>
+    </button>
+    <button
+        class="small-button"
+        type="button"
+        mat-icon-button
+        disableRipple
+        *ngIf="isEditMode && perms.isAllowed('change_metadata')"
+        (click)="onCancel()"
+    >
+        <mat-icon>close</mat-icon>
+    </button>
+</h4>
+
+<div *ngIf="!isEditMode || !perms.isAllowed('change_metadata')">
+    <div>{{ motion[field] | localizedDate }}</div>
+</div>
+
+<div *ngIf="isEditMode && perms.isAllowed('change_metadata')">
+    <form [formGroup]="form">
+        <os-datepicker formControlName="date"></os-datepicker>
+        <mat-form-field style="width: 100%">
+            <input style="width: 100%" matInput [format]="24" formControlName="time" [ngxTimepicker]="timepicker" />
+            <div class="suffix-wrapper" matSuffix>
+                <ngx-material-timepicker-toggle [for]="timepicker">
+                    <mat-icon class="icon" style="margin-right: 10px" ngxMaterialTimepickerToggleIcon>
+                        access_time
+                    </mat-icon>
+                </ngx-material-timepicker-toggle>
+            </div>
+            <ngx-material-timepicker #timepicker></ngx-material-timepicker>
+        </mat-form-field>
+    </form>
+
+    <p>
+        <button type="button" mat-button (click)="onSave()">
+            <span>{{ 'Save' | translate }}</span>
+        </button>
+        <button type="button" mat-button (click)="onCancel()">
+            <span>{{ 'Cancel' | translate }}</span>
+        </button>
+    </p>
+</div>

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MotionManageTimestampComponent } from './motion-manage-timestamp.component';
+
+xdescribe(`MotionManageTimestampComponent`, () => {
+    let component: MotionManageTimestampComponent;
+    let fixture: ComponentFixture<MotionManageTimestampComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [MotionManageTimestampComponent]
+        });
+        fixture = TestBed.createComponent(MotionManageTimestampComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it(`should create`, () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-manage-timestamp/motion-manage-timestamp.component.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { fromUnixTime, getHours, getMinutes, isDate } from 'date-fns';
+import { KeyOfType } from 'src/app/infrastructure/utils/keyof-type';
+import { BaseUiComponent } from 'src/app/ui/base/base-ui-component';
+
+import { MotionControllerService } from '../../../../services/common/motion-controller.service';
+import { MotionPermissionService } from '../../../../services/common/motion-permission.service';
+import { ViewMotion } from '../../../../view-models';
+
+@Component({
+    selector: `os-motion-manage-timestamp`,
+    templateUrl: `./motion-manage-timestamp.component.html`,
+    styleUrls: [`./motion-manage-timestamp.component.scss`],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MotionManageTimestampComponent extends BaseUiComponent {
+    public get motion(): ViewMotion {
+        return this._motion;
+    }
+
+    @Input()
+    public set motion(value: ViewMotion) {
+        this._motion = value;
+    }
+
+    @Input()
+    public field: KeyOfType<ViewMotion, number>;
+
+    @Input()
+    public title: string;
+
+    public form: UntypedFormGroup;
+
+    /**
+     * Saves if the users edits the note.
+     */
+    public set isEditMode(value: boolean) {
+        this._editMode = value;
+    }
+
+    public get isEditMode(): boolean {
+        return this._editMode;
+    }
+
+    private _editMode = false;
+
+    private _motion!: ViewMotion;
+
+    public constructor(
+        public perms: MotionPermissionService,
+        private motionController: MotionControllerService,
+        private fb: UntypedFormBuilder
+    ) {
+        super();
+
+        this.form = this.fb.group({
+            date: [``],
+            time: [``]
+        });
+
+        this.form.get(`date`).valueChanges.subscribe(currDate => {
+            if (isDate(currDate) !== !!this.form.get(`time`).value) {
+                this.form.get(`time`).setValue(isDate(currDate) ? `00:00` : ``);
+            }
+        });
+        this.form.get(`time`).valueChanges.subscribe(currTime => {
+            if (!!currTime !== isDate(this.form.get(`date`).value)) {
+                this.form.get(`date`).setValue(!!currTime ? new Date() : null);
+            }
+        });
+    }
+
+    public async onSave(): Promise<void> {
+        const date: { date: Date | null; time: string } = this.form.value;
+        const [hours, minutes, ..._] = date.time.split(`:`);
+        if (date.date) {
+            date.date.setHours(+hours, +minutes);
+        }
+        await this.motionController
+            .update({ [this.field]: date.date ? Math.floor(date.date.getTime() / 1000) : null }, this.motion)
+            .resolve();
+        this.isEditMode = false;
+    }
+
+    /**
+     * Close the edit view.
+     */
+    public onCancel(): void {
+        this.isEditMode = false;
+    }
+
+    /**
+     * Enter the edit mode and reset the form and the data.
+     */
+    public onEdit(): void {
+        const timestamp = this.motion[this.field];
+        const date = timestamp
+            ? this.getTimes(timestamp)
+            : {
+                  date: ``,
+                  time: ``
+              };
+        this.form.patchValue(date);
+        this.isEditMode = true;
+    }
+
+    public getTimes(timestamp: number): { date: Date; time: string } {
+        const date = fromUnixTime(timestamp);
+        const time = getHours(date) + `:` + getMinutes(date);
+        return { date, time };
+    }
+
+    public clearForm(): void {
+        this.form.patchValue({
+            date: ``,
+            time: ``
+        });
+    }
+}

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-meta-data/motion-meta-data.component.html

@@ -254,10 +254,11 @@ <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.block">
 </div>
 
 <!-- Workflow timestamp -->
-<div *ngIf="motion?.workflow_timestamp">
-    <h4>{{ 'Submission date' | translate }}</h4>
-    <div>{{ motion.workflow_timestamp | localizedDate }}</div>
-</div>
+<os-motion-manage-timestamp
+    title="{{ 'Submission date' | translate }}"
+    [motion]="motion"
+    field="workflow_timestamp"
+></os-motion-manage-timestamp>
 
 <!-- Created timestamp -->
 <div *ngIf="motion?.created && perms.isAllowed('change_metadata', motion)">

client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/motion-detail.module.ts

@@ -18,16 +18,19 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import { ChipSelectModule } from 'src/app/site/modules/chip-select/chip-select.module';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { MeetingsComponentCollectorModule } from 'src/app/site/pages/meetings/modules/meetings-component-collector';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { ActionCardModule } from 'src/app/ui/modules/action-card';
 import { ChoiceDialogModule } from 'src/app/ui/modules/choice-dialog';
 import { CommaSeparatedListingModule } from 'src/app/ui/modules/comma-separated-listing';
+import { DatepickerModule } from 'src/app/ui/modules/datepicker';
 import { EditorModule } from 'src/app/ui/modules/editor';
 import { HeadBarModule } from 'src/app/ui/modules/head-bar';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
+import { OpenSlidesDateAdapterModule } from 'src/app/ui/modules/openslides-date-adapter/openslides-date-adapter.module';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';
 import { SortingModule } from 'src/app/ui/modules/sorting';
 import { PipesModule } from 'src/app/ui/pipes/pipes.module';
@@ -55,6 +58,7 @@ import { MotionFinalVersionComponent } from './components/motion-final-version/m
 import { MotionHighlightFormComponent } from './components/motion-highlight-form/motion-highlight-form.component';
 import { MotionManageMotionMeetingUsersComponent } from './components/motion-manage-motion-meeting-users/motion-manage-motion-meeting-users.component';
 import { MotionManagePollsComponent } from './components/motion-manage-polls/motion-manage-polls.component';
+import { MotionManageTimestampComponent } from './components/motion-manage-timestamp/motion-manage-timestamp.component';
 import { MotionManageTitleComponent } from './components/motion-manage-title/motion-manage-title.component';
 import { MotionMetaDataComponent } from './components/motion-meta-data/motion-meta-data.component';
 import { MotionParagraphbasedAmendmentComponent } from './components/motion-paragraphbased-amendment/motion-paragraphbased-amendment.component';
@@ -86,7 +90,8 @@ import { MotionDetailServiceModule } from './services/motion-detail-service.modu
         MotionPersonalNoteComponent,
         MotionCommentComponent,
         MotionFinalVersionComponent,
-        ParagraphBasedAmendmentComponent
+        ParagraphBasedAmendmentComponent,
+        MotionManageTimestampComponent
     ],
     imports: [
         CommonModule,
@@ -129,6 +134,9 @@ import { MotionDetailServiceModule } from './services/motion-detail-service.modu
         MatInputModule,
         MatProgressBarModule,
         ParticipantSearchSelectorModule,
+        OpenSlidesDateAdapterModule,
+        NgxMaterialTimepickerModule,
+        DatepickerModule,
 
         // Detail view
         ScrollingModule,