Allow datetime inputs to be optional

Summary: Fixes T3279. For ApplicationSearch (and in some other cases) I'd like users to be able to provide an optional date. This isn't currently possible. Add a checkbox which disables or enables the input. Test Plan: Used UIExample to enter dates. Used Calendar to enter dates. Reviewers: chad, btrahan Reviewed By: chad CC: aran Maniphest Tasks: T3279 Differential Revision: https://secure.phabricator.com/D6082
2024-09-20 09:18:48 +02:00 · 2013-05-30 16:19:43 -07:00 · 2013-05-30 16:19:43 -07:00 · 01a6d580ac
commit 01a6d580ac
parent 6637acb3e4
6 changed files with 203 additions and 87 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -800,7 +800,7 @@ celerity_register_resource_map(array(
  ),
  'aphront-form-view-css' =>
  array(
-    'uri' => '/res/656ca1a3/rsrc/css/aphront/form-view.css',
+    'uri' => '/res/4fe4c174/rsrc/css/aphront/form-view.css',
    'type' => 'css',
    'requires' =>
    array(
@ -1641,7 +1641,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-behavior-fancy-datepicker' =>
  array(
-    'uri' => '/res/f5c13e07/rsrc/js/core/behavior-fancy-datepicker.js',
+    'uri' => '/res/dcd7c2ca/rsrc/js/core/behavior-fancy-datepicker.js',
    'type' => 'js',
    'requires' =>
    array(
@ -3657,7 +3657,7 @@ celerity_register_resource_map(array(
  ),
  'phui-form-css' =>
  array(
-    'uri' => '/res/ba4d7995/rsrc/css/phui/phui-form.css',
+    'uri' => '/res/eb478e83/rsrc/css/phui/phui-form.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3973,7 +3973,7 @@ celerity_register_resource_map(array(
 ), array(
  'packages' =>
  array(
-    'b7428f7c' =>
+    '1b14560c' =>
    array(
      'name' => 'core.pkg.css',
      'symbols' =>
@ -4022,7 +4022,7 @@ celerity_register_resource_map(array(
        41 => 'phabricator-property-list-view-css',
        42 => 'phabricator-tag-view-css',
      ),
-      'uri' => '/res/pkg/b7428f7c/core.pkg.css',
+      'uri' => '/res/pkg/1b14560c/core.pkg.css',
      'type' => 'css',
    ),
    '98f60e3f' =>
@ -4216,16 +4216,16 @@ celerity_register_resource_map(array(
  'reverse' =>
  array(
    'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'b7428f7c',
-    'aphront-error-view-css' => 'b7428f7c',
-    'aphront-form-view-css' => 'b7428f7c',
-    'aphront-list-filter-view-css' => 'b7428f7c',
-    'aphront-pager-view-css' => 'b7428f7c',
-    'aphront-panel-view-css' => 'b7428f7c',
-    'aphront-table-view-css' => 'b7428f7c',
-    'aphront-tokenizer-control-css' => 'b7428f7c',
-    'aphront-tooltip-css' => 'b7428f7c',
-    'aphront-typeahead-control-css' => 'b7428f7c',
+    'aphront-dialog-view-css' => '1b14560c',
+    'aphront-error-view-css' => '1b14560c',
+    'aphront-form-view-css' => '1b14560c',
+    'aphront-list-filter-view-css' => '1b14560c',
+    'aphront-pager-view-css' => '1b14560c',
+    'aphront-panel-view-css' => '1b14560c',
+    'aphront-table-view-css' => '1b14560c',
+    'aphront-tokenizer-control-css' => '1b14560c',
+    'aphront-tooltip-css' => '1b14560c',
+    'aphront-typeahead-control-css' => '1b14560c',
    'differential-changeset-view-css' => 'dd27a69b',
    'differential-core-view-css' => 'dd27a69b',
    'differential-inline-comment-editor' => '9488bb69',
@ -4239,7 +4239,7 @@ celerity_register_resource_map(array(
    'differential-table-of-contents-css' => 'dd27a69b',
    'diffusion-commit-view-css' => 'c8ce2d88',
    'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'b7428f7c',
+    'global-drag-and-drop-css' => '1b14560c',
    'inline-comment-summary-css' => 'dd27a69b',
    'javelin-aphlict' => '98f60e3f',
    'javelin-behavior' => 'c1359b5d',
@ -4313,56 +4313,56 @@ celerity_register_resource_map(array(
    'javelin-util' => 'c1359b5d',
    'javelin-vector' => 'c1359b5d',
    'javelin-workflow' => 'c1359b5d',
-    'lightbox-attachment-css' => 'b7428f7c',
+    'lightbox-attachment-css' => '1b14560c',
    'maniphest-task-summary-css' => '6b1fccc6',
    'maniphest-transaction-detail-css' => '6b1fccc6',
-    'phabricator-action-list-view-css' => 'b7428f7c',
-    'phabricator-application-launch-view-css' => 'b7428f7c',
+    'phabricator-action-list-view-css' => '1b14560c',
+    'phabricator-application-launch-view-css' => '1b14560c',
    'phabricator-busy' => '98f60e3f',
    'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => 'b7428f7c',
-    'phabricator-core-css' => 'b7428f7c',
-    'phabricator-crumbs-view-css' => 'b7428f7c',
-    'phabricator-directory-css' => 'b7428f7c',
+    'phabricator-core-buttons-css' => '1b14560c',
+    'phabricator-core-css' => '1b14560c',
+    'phabricator-crumbs-view-css' => '1b14560c',
+    'phabricator-directory-css' => '1b14560c',
    'phabricator-drag-and-drop-file-upload' => '9488bb69',
    'phabricator-dropdown-menu' => '98f60e3f',
    'phabricator-file-upload' => '98f60e3f',
-    'phabricator-filetree-view-css' => 'b7428f7c',
-    'phabricator-flag-css' => 'b7428f7c',
-    'phabricator-form-view-css' => 'b7428f7c',
-    'phabricator-header-view-css' => 'b7428f7c',
+    'phabricator-filetree-view-css' => '1b14560c',
+    'phabricator-flag-css' => '1b14560c',
+    'phabricator-form-view-css' => '1b14560c',
+    'phabricator-header-view-css' => '1b14560c',
    'phabricator-hovercard' => '98f60e3f',
-    'phabricator-jump-nav' => 'b7428f7c',
+    'phabricator-jump-nav' => '1b14560c',
    'phabricator-keyboard-shortcut' => '98f60e3f',
    'phabricator-keyboard-shortcut-manager' => '98f60e3f',
-    'phabricator-main-menu-view' => 'b7428f7c',
+    'phabricator-main-menu-view' => '1b14560c',
    'phabricator-menu-item' => '98f60e3f',
-    'phabricator-nav-view-css' => 'b7428f7c',
+    'phabricator-nav-view-css' => '1b14560c',
    'phabricator-notification' => '98f60e3f',
-    'phabricator-notification-css' => 'b7428f7c',
-    'phabricator-notification-menu-css' => 'b7428f7c',
-    'phabricator-object-item-list-view-css' => 'b7428f7c',
+    'phabricator-notification-css' => '1b14560c',
+    'phabricator-notification-menu-css' => '1b14560c',
+    'phabricator-object-item-list-view-css' => '1b14560c',
    'phabricator-object-selector-css' => 'dd27a69b',
    'phabricator-phtize' => '98f60e3f',
    'phabricator-prefab' => '98f60e3f',
    'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-property-list-view-css' => 'b7428f7c',
-    'phabricator-remarkup-css' => 'b7428f7c',
+    'phabricator-property-list-view-css' => '1b14560c',
+    'phabricator-remarkup-css' => '1b14560c',
    'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => 'b7428f7c',
-    'phabricator-standard-page-view' => 'b7428f7c',
-    'phabricator-tag-view-css' => 'b7428f7c',
+    'phabricator-side-menu-view-css' => '1b14560c',
+    'phabricator-standard-page-view' => '1b14560c',
+    'phabricator-tag-view-css' => '1b14560c',
    'phabricator-textareautils' => '98f60e3f',
    'phabricator-tooltip' => '98f60e3f',
-    'phabricator-transaction-view-css' => 'b7428f7c',
-    'phabricator-zindex-css' => 'b7428f7c',
-    'phui-form-css' => 'b7428f7c',
-    'phui-icon-view-css' => 'b7428f7c',
-    'spacing-css' => 'b7428f7c',
-    'sprite-apps-large-css' => 'b7428f7c',
-    'sprite-gradient-css' => 'b7428f7c',
-    'sprite-icons-css' => 'b7428f7c',
-    'sprite-menu-css' => 'b7428f7c',
-    'syntax-highlighting-css' => 'b7428f7c',
+    'phabricator-transaction-view-css' => '1b14560c',
+    'phabricator-zindex-css' => '1b14560c',
+    'phui-form-css' => '1b14560c',
+    'phui-icon-view-css' => '1b14560c',
+    'spacing-css' => '1b14560c',
+    'sprite-apps-large-css' => '1b14560c',
+    'sprite-gradient-css' => '1b14560c',
+    'sprite-icons-css' => '1b14560c',
+    'sprite-menu-css' => '1b14560c',
+    'syntax-highlighting-css' => '1b14560c',
  ),
 ));
--- a/src/applications/uiexample/examples/PhabricatorFormExample.php
+++ b/src/applications/uiexample/examples/PhabricatorFormExample.php
@ -19,20 +19,31 @@ final class PhabricatorFormExample extends PhabricatorUIExample {
      ->setName('start')
      ->setLabel('Start')
      ->setInitialTime(AphrontFormDateControl::TIME_START_OF_BUSINESS);
-    $start_value = $start_time->readValueFromRequest($request);

    $end_time = id(new AphrontFormDateControl())
      ->setUser($user)
      ->setName('end')
      ->setLabel('End')
      ->setInitialTime(AphrontFormDateControl::TIME_END_OF_BUSINESS);
-    $end_value = $end_time->readValueFromRequest($request);
+
+    $null_time = id(new AphrontFormDateControl())
+      ->setUser($user)
+      ->setName('nulltime')
+      ->setLabel('Nullable')
+      ->setAllowNull(true);
+
+    if ($request->isFormPost()) {
+      $start_value = $start_time->readValueFromRequest($request);
+      $end_value = $end_time->readValueFromRequest($request);
+      $null_value = $null_time->readValueFromRequest($request);
+    }

    $form = id(new AphrontFormView())
      ->setUser($user)
      ->setFlexible(true)
      ->appendChild($start_time)
      ->appendChild($end_time)
+      ->appendChild($null_time)
      ->appendChild(
        id(new AphrontFormSubmitControl())
          ->setValue('Submit'));
--- a/src/view/form/control/AphrontFormDateControl.php
+++ b/src/view/form/control/AphrontFormDateControl.php
@ -3,11 +3,18 @@
 final class AphrontFormDateControl extends AphrontFormControl {

  private $initialTime;
+  private $zone;

  private $valueDay;
  private $valueMonth;
  private $valueYear;
  private $valueTime;
+  private $allowNull;
+
+  public function setAllowNull($allow_null) {
+    $this->allowNull = $allow_null;
+    return $this;
+  }

  const TIME_START_OF_DAY         = 'start-of-day';
  const TIME_END_OF_DAY           = 'end-of-day';
@ -20,19 +27,17 @@ final class AphrontFormDateControl extends AphrontFormControl {
  }

  public function readValueFromRequest(AphrontRequest $request) {
-    $user = $this->user;
-    if (!$this->user) {
-      throw new Exception(
-        pht("Call setUser() before readValueFromRequest()!"));
-    }
-
-    $user_zone = $user->getTimezoneIdentifier();
-    $zone = new DateTimeZone($user_zone);
-
    $day = $request->getInt($this->getDayInputName());
    $month = $request->getInt($this->getMonthInputName());
    $year = $request->getInt($this->getYearInputName());
    $time = $request->getStr($this->getTimeInputName());
+    $enabled = $request->getBool($this->getCheckboxInputName());
+
+    if ($this->allowNull && !$enabled) {
+      $this->setError(null);
+      $this->setValue(null);
+      return;
+    }

    $err = $this->getError();

@ -45,6 +50,8 @@ final class AphrontFormDateControl extends AphrontFormControl {
      // Assume invalid.
      $err = 'Invalid';

+      $zone = $this->getTimezone();
+
      try {
        $date = new DateTime("{$year}-{$month}-{$day} {$time}", $zone);
        $value = $date->format('U');
@ -59,32 +66,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
        $this->setValue(null);
      }
    } else {
-      // TODO: We could eventually allow these to be customized per install or
-      // per user or both, but let's wait and see.
-      switch ($this->initialTime) {
-        case self::TIME_START_OF_DAY:
-        default:
-          $time = '12:00 AM';
-          break;
-        case self::TIME_START_OF_BUSINESS:
-          $time = '9:00 AM';
-          break;
-        case self::TIME_END_OF_BUSINESS:
-          $time = '5:00 PM';
-          break;
-        case self::TIME_END_OF_DAY:
-          $time = '11:59 PM';
-          break;
-      }
-
-      $today = $this->formatTime(time(), 'Y-m-d');
-      try {
-        $date = new DateTime("{$today} {$time}", $zone);
-        $value = $date->format('U');
-      } catch (Exception $ex) {
-        $value = null;
-      }
-
+      $value = $this->getInitialValue();
      if ($value) {
        $this->setValue($value);
      } else {
@ -176,7 +158,20 @@ final class AphrontFormDateControl extends AphrontFormControl {
    return $this->getName().'_t';
  }

+  private function getCheckboxInputName() {
+    return $this->getName().'_e';
+  }
+
  protected function renderInput() {
+
+    $disabled = null;
+    if ($this->getValue() === null) {
+      $this->setValue($this->getInitialValue());
+      if ($this->allowNull) {
+        $disabled = 'disabled';
+      }
+    }
+
    $min_year = $this->getMinYear();
    $max_year = $this->getMaxYear();

@ -198,6 +193,20 @@ final class AphrontFormDateControl extends AphrontFormControl {
      12 => pht('Dec'),
    );

+    $checkbox = null;
+    if ($this->allowNull) {
+      $checkbox = javelin_tag(
+        'input',
+        array(
+          'type' => 'checkbox',
+          'name' => $this->getCheckboxInputName(),
+          'sigil' => 'calendar-enable',
+          'class' => 'aphront-form-date-enabled-input',
+          'value' => 1,
+          'checked' => ($disabled === null ? 'checked' : null),
+        ));
+    }
+
    $years = range($this->getMinYear(), $this->getMaxYear());
    $years = array_fuse($years);

@ -207,6 +216,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
      array(
        'name' => $this->getDayInputName(),
        'sigil' => 'day-input',
+        'disabled' => $disabled,
      ));

    $months_sel = AphrontFormSelectControl::renderSelectTag(
@ -215,6 +225,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
      array(
        'name' => $this->getMonthInputName(),
        'sigil' => 'month-input',
+        'disabled' => $disabled,
      ));

    $years_sel = AphrontFormSelectControl::renderSelectTag(
@ -223,6 +234,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
      array(
        'name'  => $this->getYearInputName(),
        'sigil' => 'year-input',
+        'disabled' => $disabled,
      ));

    $cal_icon = javelin_tag(
@ -234,7 +246,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
      ),
      '');

-    $time_sel = phutil_tag(
+    $time_sel = javelin_tag(
      'input',
      array(
        'name'  => $this->getTimeInputName(),
@ -242,6 +254,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
        'value' => $this->getTimeInputValue(),
        'type'  => 'text',
        'class' => 'aphront-form-date-time-input',
+        'disabled' => $disabled,
      ),
      '');

@ -252,8 +265,12 @@ final class AphrontFormDateControl extends AphrontFormControl {
      array(
        'class' => 'aphront-form-date-container',
        'sigil' => 'phabricator-date-control',
+        'meta'  => array(
+          'disabled' => (bool)$disabled,
+        ),
      ),
      array(
+        $checkbox,
        $days_sel,
        $months_sel,
        $years_sel,
@ -262,4 +279,51 @@ final class AphrontFormDateControl extends AphrontFormControl {
      ));
  }

+  private function getTimezone() {
+    if ($this->zone) {
+      return $this->zone;
+    }
+
+    $user = $this->getUser();
+    if (!$this->getUser()) {
+      throw new Exception("Call setUser() before getTimezone()!");
+    }
+
+    $user_zone = $user->getTimezoneIdentifier();
+    $this->zone = new DateTimeZone($user_zone);
+    return $this->zone;
+  }
+
+  private function getInitialValue() {
+    $zone = $this->getTimezone();
+
+    // TODO: We could eventually allow these to be customized per install or
+    // per user or both, but let's wait and see.
+    switch ($this->initialTime) {
+      case self::TIME_START_OF_DAY:
+      default:
+        $time = '12:00 AM';
+        break;
+      case self::TIME_START_OF_BUSINESS:
+        $time = '9:00 AM';
+        break;
+      case self::TIME_END_OF_BUSINESS:
+        $time = '5:00 PM';
+        break;
+      case self::TIME_END_OF_DAY:
+        $time = '11:59 PM';
+        break;
+    }
+
+    $today = $this->formatTime(time(), 'Y-m-d');
+    try {
+      $date = new DateTime("{$today} {$time}", $zone);
+      $value = $date->format('U');
+    } catch (Exception $ex) {
+      $value = null;
+    }
+
+    return $value;
+  }
+
 }
--- a/webroot/rsrc/css/aphront/form-view.css
+++ b/webroot/rsrc/css/aphront/form-view.css
@ -278,6 +278,12 @@ table.aphront-form-control-checkbox-layout th {
  margin: 2px;
  display: inline;
 }
+.aphront-form-date-container input.aphront-form-date-enabled-input {
+  width: auto;
+  display: inline;
+  margin-right: 8px;
+  font-size: 16px;
+}

 .aphront-form-date-container input.aphront-form-date-time-input {
  width: 7em;
--- a/webroot/rsrc/css/phui/phui-form.css
+++ b/webroot/rsrc/css/phui/phui-form.css
@ -127,3 +127,8 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
  color: #999999;
 }
+
+
+select[disabled="disabled"] {
+  opacity: 0.5;
+}
--- a/webroot/rsrc/js/core/behavior-fancy-datepicker.js
+++ b/webroot/rsrc/js/core/behavior-fancy-datepicker.js
@ -70,11 +70,19 @@ JX.behavior('fancy-datepicker', function(config) {
    root = null;
  };

+  var ontoggle = function(e) {
+    var box = e.getTarget();
+    root = e.getNode('phabricator-date-control');
+    JX.Stratcom.getData(root).disabled = !box.checked;
+    redraw_inputs();
+  };
+
  var get_inputs = function() {
    return {
      y: JX.DOM.find(root, 'select', 'year-input'),
      m: JX.DOM.find(root, 'select', 'month-input'),
-      d: JX.DOM.find(root, 'select', 'day-input')
+      d: JX.DOM.find(root, 'select', 'day-input'),
+      t: JX.DOM.find(root, 'input', 'time-input')
    };
  };

@ -101,6 +109,23 @@ JX.behavior('fancy-datepicker', function(config) {
      ]);
  };

+  var redraw_inputs = function() {
+    var inputs = get_inputs();
+    var disabled = JX.Stratcom.getData(root).disabled;
+    for (var k in inputs) {
+      if (disabled) {
+        inputs[k].setAttribute('disabled', 'disabled');
+      } else {
+        inputs[k].removeAttribute('disabled');
+      }
+    }
+
+    var box = JX.DOM.scry(root, 'input', 'calendar-enable');
+    if (box.length) {
+      box[0].checked = !disabled;
+    }
+  };
+
  // Render a cell for the date picker.
  var cell = function(label, value, selected, class_name) {

@ -201,6 +226,7 @@ JX.behavior('fancy-datepicker', function(config) {


  JX.Stratcom.listen('click', 'calendar-button', onopen);
+  JX.Stratcom.listen('change', 'calendar-enable', ontoggle);

  JX.Stratcom.listen(
    'click',
@ -237,6 +263,10 @@ JX.behavior('fancy-datepicker', function(config) {
          break;
      }

+      // Enable the control.
+      JX.Stratcom.getData(root).disabled = false;
+      redraw_inputs();
+
      render();
    });