work on date filter

src/ui/dialogs/DateFilterDialog.ts

@@ -1,60 +1,48 @@
-import {filterMissingMarkup, findFilterMissing} from '../missing';
-import ADialog, {IDialogContext} from './ADialog';
-import {uniqueId} from './utils';
 import {DateColumn, IDateFilter} from '../../model';
-import {noDateFilter, shiftFilterDateDay} from '../../model/internalDate';
-import {timeFormat} from 'd3-time-format';
+import {noDateFilter} from '../../model/internalDate';
+import {createDateFilter} from '../../renderer/DateHistogramCellRenderer';
+import {cssClass} from '../../styles';
+import ADialog, {IDialogContext} from './ADialog';
 
 /** @internal */
 export default class DateFilterDialog extends ADialog {
-
   private readonly before: IDateFilter;
+  private handler: {reset: () => void, submit: () => void, cleanUp: () => void} | null = null;
+
 
-  constructor(private readonly column: DateColumn, dialog: IDialogContext) {
+  constructor(private readonly column: DateColumn, dialog: IDialogContext, private readonly ctx: IRankingHeaderContext) {
     super(dialog, {
       livePreview: 'filter'
     });
     this.before = this.column.getFilter() || noDateFilter();
   }
 
-  private updateFilter(filter: IDateFilter | null) {
-    this.column.setFilter(filter);
+  protected build(node: HTMLElement) {
+    node.classList.add(cssClass('dialog-mapper'));
+
+    this.handler = createDateFilter(this.column, node, {
+      dialogManager: this.ctx.dialogManager,
+      idPrefix: this.ctx.idPrefix,
+      tasks: this.ctx.provider.getTaskExecutor(),
+    }, this.showLivePreviews());
   }
 
-  protected reset() {
-    this.forEach('input[type=date]', (n: HTMLInputElement) => n.value = '');
-    this.forEach('input[type=checkbox]', (n: HTMLInputElement) => n.checked = false);
+
+  cleanUp(action: 'cancel' | 'confirm' | 'handled') {
+    super.cleanUp(action);
+    this.handler!.cleanUp();
   }
 
-  protected cancel() {
-    this.updateFilter(this.before);
+  protected reset() {
+    this.handler!.reset();
   }
 
   protected submit() {
-    const filterMissing = findFilterMissing(this.node).checked;
-    const from: Date | null = this.findInput('input[name="from"]').valueAsDate;
-    const to: Date | null = this.findInput('input[name="to"]').valueAsDate;
-    this.updateFilter({
-      filterMissing,
-      min: from == null ? -Infinity : shiftFilterDateDay(from.getTime(), 'min'),
-      max: to == null ? +Infinity : shiftFilterDateDay(to.getTime(), 'max')
-    });
+    this.handler!.submit();
     return true;
   }
 
-  protected build(node: HTMLElement) {
-    const act = this.before;
-    const id = uniqueId(this.dialog.idPrefix);
-
-    const f = timeFormat('%Y-%m-%d');
-
-    node.insertAdjacentHTML('beforeend', `
-    <label for="${id}F">From: </label>
-    <input type="date" id="${id}F" name="from" placeholder="From..." autofocus value="${isFinite(act.min) ? f(new Date(act.min)) : ''}">
-    <label for="${id}T">To: </label>
-    <input type="date" id="${id}T" name="to" placeholder="To..." value="${isFinite(act.max) ? f(new Date(act.max)) : ''}">
-    ${filterMissingMarkup(act.filterMissing)}`);
-
-    this.enableLivePreviews('input');
+  protected cancel() {
+    this.column.setFilter(this.before);
   }
 }