Feat schedule picker popover

src/app/features/planner/simple-schedule-picker/simple-schedule-picker.component.html

@@ -0,0 +1,9 @@
+<div class="date-picker">
+  <mat-calendar />
+  <!-- <mat-calendar
+    [selected]="selectedDate"
+    [minDate]="minDate"
+    (selectedChange)="onDateChanged($event)"
+  > 
+  </mat-calendar> -->
+</div>

src/app/features/planner/simple-schedule-picker/simple-schedule-picker.component.scss

@@ -0,0 +1,5 @@
+:host {
+  background: #fff;
+  display: block;
+  padding: 8px 16px;
+}

src/app/features/planner/simple-schedule-picker/simple-schedule-picker.component.spec.ts

@@ -0,0 +1,22 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { SimpleSchedulePickerComponent } from './simple-schedule-picker.component';
+
+// describe('DialogTimeDisplayComponent', () => {
+//   let component: SimpleSchedulePickerComponent;
+//   let fixture: ComponentFixture<SimpleSchedulePickerComponent>;
+
+//   beforeEach(async () => {
+//     await TestBed.configureTestingModule({
+//       imports: [SimpleSchedulePickerComponent],
+//     }).compileComponents();
+
+//     fixture = TestBed.createComponent(SimpleSchedulePickerComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });

src/app/features/planner/simple-schedule-picker/simple-schedule-picker.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { UiModule } from 'src/app/ui/ui.module';
+
+@Component({
+  selector: 'simple-schedule-picker',
+  standalone: true,
+  imports: [UiModule],
+  templateUrl: './simple-schedule-picker.component.html',
+  styleUrl: './simple-schedule-picker.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SimpleSchedulePickerComponent {}

src/app/features/tasks/add-task-bar/add-task-bar.component.scss

@@ -154,3 +154,8 @@ $short-syntax-bar-height: 32px;
     border-color: $dark-theme-extra-border-color;
   }
 }
+
+// Make the popover on top of the preview component
+::ng-deep .cdk-overlay-container:has(.overlay-pane_calendar) {
+  z-index: 10000;
+}

src/app/features/tasks/add-task-bar/add-task-bar.component.ts

@@ -9,6 +9,7 @@ import {
   OnDestroy,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { TaskService } from '../task.service';
@@ -45,10 +46,12 @@ import { SearchResultItem } from '../../issue/issue.model';
 import { truncate } from '../../../util/truncate';
 import { TagService } from '../../tag/tag.service';
 import { ProjectService } from '../../project/project.service';
+import { Popover } from '../../../ui/popover';
 import { Tag } from '../../tag/tag.model';
 import { Project } from '../../project/project.model';
 import { ShortSyntaxTag, shortSyntaxToTags } from './short-syntax-to-tags';
 import { slideAnimation } from '../../../ui/animations/slide.ani';
+import { SimpleSchedulePickerComponent } from '../../planner/simple-schedule-picker/simple-schedule-picker.component';
 import { blendInOutAnimation } from 'src/app/ui/animations/blend-in-out.ani';
 import { fadeAnimation } from '../../../ui/animations/fade.ani';
 import { SS } from '../../../core/persistence/storage-keys.const';
@@ -80,11 +83,14 @@ export class AddTaskBarComponent implements AfterViewInit, OnDestroy {
   @Output() blurred: EventEmitter<any> = new EventEmitter();
   @Output() done: EventEmitter<any> = new EventEmitter();
 
-  @ViewChild('inputEl', { static: true }) inputEl?: ElementRef;
+  @ViewChild('inputEl', { static: true }) inputEl!: ElementRef;
 
   T: typeof T = T;
   isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  popover = inject(Popover);
   doubleEnterCount: number = 0;
+  ignoreBlur: boolean = false;
+  scheduledDate: Date | null = null;
 
   taskSuggestionsCtrl: UntypedFormControl = new UntypedFormControl();
 
@@ -241,6 +247,12 @@ export class AddTaskBarComponent implements AfterViewInit, OnDestroy {
             this.blurred.emit();
             // needs to be set otherwise the activatedIssueTask won't reflect the task that is added
             this.activatedIssueTask$.next(null);
+          } else if (ev.key === '@') {
+            this.ignoreBlur = true;
+            // Need to pass origin element to calculate the position to insert the popover
+            this.popover.open(SimpleSchedulePickerComponent, {
+              origin: this.inputEl,
+            });
           } else if (ev.key === '1' && ev.ctrlKey) {
             this.isAddToBottom = !this.isAddToBottom;
             this._cd.detectChanges();
@@ -290,6 +302,10 @@ export class AddTaskBarComponent implements AfterViewInit, OnDestroy {
   }
 
   onBlur(ev: FocusEvent): void {
+    if (this.ignoreBlur) {
+      this.ignoreBlur = false;
+      return;
+    }
     const relatedTarget: HTMLElement = ev.relatedTarget as HTMLElement;
     let isUIelement = false;
 

src/app/features/tasks/tasks.module.ts

@@ -35,6 +35,7 @@ import { IS_ELECTRON } from '../../app.constants';
 import { TasksByTagComponent } from './tasks-by-tag/tasks-by-tag.component';
 import { ShortSyntaxEffects } from './store/short-syntax.effects';
 import { InlineMultilineInputComponent } from '../../ui/inline-multiline-input/inline-multiline-input.component';
+import { PopoverModule } from '../../ui/popover';
 import { TaskContextMenuComponent } from './task-context-menu/task-context-menu.component';
 import { TaskHoverControlsComponent } from './task/task-hover-controls/task-hover-controls.component';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
@@ -62,6 +63,7 @@ import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
     ]),
     BetterDrawerModule,
     InlineMultilineInputComponent,
+    PopoverModule,
     TaskContextMenuComponent,
     TaskHoverControlsComponent,
     CdkDropList,

src/app/ui/popover/index.ts

@@ -0,0 +1,5 @@
+export * from './popover-container';
+export * from './popover-ref';
+export * from './popover';
+export * from './popover.module';
+// ex

src/app/ui/popover/popover-container.component.html

@@ -0,0 +1 @@
+<ng-template cdkPortalOutlet />

src/app/ui/popover/popover-container.ts

@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  EmbeddedViewRef,
+  inject,
+  ViewChild,
+} from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import {
+  BasePortalOutlet,
+  CdkPortalOutlet,
+  ComponentPortal,
+  TemplatePortal,
+} from '@angular/cdk/portal';
+import { PopoverRef } from './popover-ref';
+
+@Component({
+  selector: 'popover-container',
+  templateUrl: './popover-container.component.html',
+  styleUrl: './popover-container.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.Default,
+  imports: [CdkPortalOutlet],
+  host: {
+    class: 'cdk-popover-container',
+  },
+})
+export class CdkPopoverContainerComponent extends BasePortalOutlet {
+  private _overlayRef = inject(OverlayRef);
+  @ViewChild(CdkPortalOutlet, { static: true }) _portalOutlet!: CdkPortalOutlet;
+  renderMethod: 'template' | 'component' = 'component';
+  context: any;
+  constructor(private popoverRef: PopoverRef) {
+    super();
+  }
+  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
+    console.log(this._portalOutlet);
+    const result = this._portalOutlet.attachComponentPortal(portal);
+    return result;
+  }
+  attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T> {
+    const result = this._portalOutlet.attachTemplatePortal(portal);
+    // this._contentAttached() // TODO: check if this is necessary
+    return result;
+  }
+}

src/app/ui/popover/popover-ref.ts

@@ -0,0 +1,16 @@
+import { ComponentRef, TemplateRef } from '@angular//core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { BasePortalOutlet } from '@angular/cdk/portal';
+
+export type PopoverContent = TemplateRef<any> | ComponentRef<any>;
+
+export class PopoverRef<C = unknown> {
+  readonly componentInstance: C | null = null;
+  /**
+   * `ComponentRef` of the component opened into the dialog. Will be
+   * null when the dialog is opened using a `TemplateRef`
+   */
+  readonly componentRef: ComponentRef<C> | null = null;
+  readonly containerInstance: BasePortalOutlet | null = null;
+  constructor(readonly overlayRef: OverlayRef) {}
+}

src/app/ui/popover/popover.component.spec.ts

@@ -0,0 +1,22 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { CdkPopoverContainerComponent } from './popover-container';
+
+// describe('CalendarPopoverComponent', () => {
+//   let component: CdkPopoverContainerComponent;
+//   let fixture: ComponentFixture<CdkPopoverContainerComponent>;
+
+//   beforeEach(async () => {
+//     await TestBed.configureTestingModule({
+//       imports: [CdkPopoverContainerComponent],
+//     }).compileComponents();
+
+//     fixture = TestBed.createComponent(CdkPopoverContainerComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });

src/app/ui/popover/popover.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
+import { Popover } from './popover';
+import { CdkPopoverContainerComponent } from './popover-container';
+
+@NgModule({
+  imports: [OverlayModule, PortalModule, CdkPopoverContainerComponent],
+  exports: [PortalModule, CdkPopoverContainerComponent],
+  providers: [Popover],
+})
+export class PopoverModule {}

src/app/ui/popover/popover.ts

@@ -0,0 +1,120 @@
+import {
+  ComponentRef,
+  ElementRef,
+  inject,
+  Injectable,
+  Injector,
+  StaticProvider,
+} from '@angular/core';
+import {
+  ComponentType,
+  Overlay,
+  ConnectionPositionPair,
+  OverlayConfig,
+  OverlayRef,
+  PositionStrategy,
+} from '@angular/cdk/overlay';
+import { BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { PopoverRef } from './popover-ref';
+import { CdkPopoverContainerComponent } from './popover-container';
+
+export type PopoverConfig = {
+  origin: ElementRef<any>;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Popover {
+  private _injector = inject(Injector);
+  private _overlay = inject(Overlay);
+  overlayRef: OverlayRef | null = null;
+  constructor() {}
+
+  open<C = unknown>(component: ComponentType<C>, config: PopoverConfig): PopoverRef<C> {
+    const overlayConfig = this._getOverlayConfig(config.origin);
+    const overlayRef = this._overlay.create(overlayConfig);
+    const popoverRef = new PopoverRef(overlayRef);
+    const popoverContainer = this._attachContainer(overlayRef, popoverRef);
+    (popoverRef as { containerInstance: BasePortalOutlet }).containerInstance =
+      popoverContainer;
+    this._attachDialogContent(component, popoverRef, popoverContainer);
+    // popoverRef.closed.subscribe()
+    return popoverRef as PopoverRef<C>;
+  }
+
+  private _getOverlayConfig(origin: ElementRef): OverlayConfig {
+    const overlayConfig = new OverlayConfig({
+      hasBackdrop: true, // set backdrop to true so we can close the popover when the user
+      // clicks outside of it
+      backdropClass: 'popover-backdrop',
+      panelClass: 'overlay-pane_calendar',
+      positionStrategy: this.getOverlayPosition(origin),
+      scrollStrategy: this._overlay.scrollStrategies.reposition(),
+    });
+    return overlayConfig;
+  }
+
+  private getOverlayPosition(origin: any): PositionStrategy {
+    const positionStrategy = this._overlay
+      .position()
+      .flexibleConnectedTo(origin)
+      .withPositions(this.getPositions())
+      .withPush(false);
+    console.log({ positionStrategy });
+    return positionStrategy;
+  }
+
+  // Get a list of preferred positions
+  private getPositions(): ConnectionPositionPair[] {
+    return [
+      {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+      },
+      {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+      },
+      {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+      },
+    ];
+  }
+  private _attachContainer<C>(
+    overlay: OverlayRef,
+    popoverRef: PopoverRef<C>,
+  ): BasePortalOutlet {
+    const providers: StaticProvider[] = [
+      { provide: PopoverRef, useValue: popoverRef },
+      { provide: OverlayRef, useValue: overlay },
+    ];
+    const containerPortal = new ComponentPortal(
+      CdkPopoverContainerComponent,
+      null,
+      Injector.create({ parent: this._injector, providers }),
+    );
+    const containerRef = overlay.attach(containerPortal);
+    return containerRef.instance;
+  }
+  private _attachDialogContent<C>(
+    component: ComponentType<C>,
+    popoverRef: PopoverRef<C>,
+    popupContainer: BasePortalOutlet,
+  ): void {
+    const providers: StaticProvider[] = [{ provide: PopoverRef, useValue: popoverRef }];
+    const injector = Injector.create({ parent: this._injector, providers });
+    const contentRef = popupContainer.attachComponentPortal<C>(
+      new ComponentPortal(component, null, injector),
+    );
+    (popoverRef as { componentRef: ComponentRef<C> }).componentRef = contentRef;
+    (popoverRef as { componentInstance: C }).componentInstance = contentRef.instance;
+  }
+}