1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00

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
This commit is contained in:
epriestley 2013-05-30 16:19:43 -07:00
parent 6637acb3e4
commit 01a6d580ac
6 changed files with 203 additions and 87 deletions

View file

@ -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',
),
));

View file

@ -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);
$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'));

View file

@ -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;
}
}

View file

@ -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;

View file

@ -127,3 +127,8 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999;
}
select[disabled="disabled"] {
opacity: 0.5;
}

View file

@ -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();
});