All day events should disable time editing in edit view

Summary: Closes T8021, All day events should disable time editing in edit view

Test Plan: Edit all day event, time text fields should be disabled. Unchecking all-day should show time fields.

Reviewers: chad, #blessed_reviewers, epriestley

Reviewed By: #blessed_reviewers, epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8021

Differential Revision: https://secure.phabricator.com/D12774

resources/celerity/map.php

@@ -345,6 +345,7 @@ return array(
     'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'b1a59974',
     'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
+    'rsrc/js/application/calendar/event-all-day.js' => '712540b4',
     'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '9e507b59',
     'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a',
@@ -583,6 +584,7 @@ return array(
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
     'javelin-behavior-durable-column' => '657c2b50',
     'javelin-behavior-error-log' => '6882e80a',
+    'javelin-behavior-event-all-day' => '712540b4',
     'javelin-behavior-fancy-datepicker' => '5c0f680f',
     'javelin-behavior-global-drag-and-drop' => 'c8e57404',
     'javelin-behavior-herald-rule-editor' => '7ebaeed3',

src/applications/calendar/controller/PhabricatorCalendarEventEditController.php

@@ -179,6 +179,16 @@ final class PhabricatorCalendarEventEditController
       }
     }
 
+    $all_day_id = celerity_generate_unique_node_id();
+    $start_date_id = celerity_generate_unique_node_id();
+    $end_date_id = celerity_generate_unique_node_id();
+
+    Javelin::initBehavior('event-all-day', array(
+      'allDayID' => $all_day_id,
+      'startDateID' => $start_date_id,
+      'endDateID' => $end_date_id,
+    ));
+
     $name = id(new AphrontFormTextControl())
       ->setLabel(pht('Name'))
       ->setName('name')
@@ -191,26 +201,31 @@ final class PhabricatorCalendarEventEditController
       ->setValue($type)
       ->setOptions($event->getStatusOptions());
 
-    $all_day_select = id(new AphrontFormCheckboxControl())
+    $all_day_checkbox = id(new AphrontFormCheckboxControl())
       ->addCheckbox(
         'isAllDay',
         1,
         pht('All Day Event'),
-        $is_all_day);
+        $is_all_day,
+        $all_day_id);
 
     $start_control = id(new AphrontFormDateControl())
       ->setUser($user)
       ->setName('start')
       ->setLabel(pht('Start'))
       ->setError($error_start_date)
-      ->setValue($start_value);
+      ->setValue($start_value)
+      ->setID($start_date_id)
+      ->setIsTimeDisabled($is_all_day);
 
     $end_control = id(new AphrontFormDateControl())
       ->setUser($user)
       ->setName('end')
       ->setLabel(pht('End'))
       ->setError($error_end_date)
-      ->setValue($end_value);
+      ->setValue($end_value)
+      ->setID($end_date_id)
+      ->setIsTimeDisabled($is_all_day);
 
     $description = id(new AphrontFormTextAreaControl())
       ->setLabel(pht('Description'))
@@ -248,7 +263,7 @@ final class PhabricatorCalendarEventEditController
       ->setUser($user)
       ->appendChild($name)
       ->appendChild($status_select)
-      ->appendChild($all_day_select)
+      ->appendChild($all_day_checkbox)
       ->appendChild($start_control)
       ->appendChild($end_control)
       ->appendControl($view_policies)

src/view/form/control/AphrontFormCheckboxControl.php

@@ -4,12 +4,18 @@ final class AphrontFormCheckboxControl extends AphrontFormControl {
 
   private $boxes = array();
 
-  public function addCheckbox($name, $value, $label, $checked = false) {
+  public function addCheckbox(
+    $name,
+    $value,
+    $label,
+    $checked = false,
+    $id = null) {
     $this->boxes[] = array(
       'name'    => $name,
       'value'   => $value,
       'label'   => $label,
       'checked' => $checked,
+      'id' => $id,
     );
     return $this;
   }
@@ -21,7 +27,10 @@ final class AphrontFormCheckboxControl extends AphrontFormControl {
   protected function renderInput() {
     $rows = array();
     foreach ($this->boxes as $box) {
-      $id = celerity_generate_unique_node_id();
+      $id = idx($box, 'id');
+      if ($id === null) {
+        $id = celerity_generate_unique_node_id();
+      }
       $checkbox = phutil_tag(
         'input',
         array(

src/view/form/control/AphrontFormDateControl.php

@@ -11,6 +11,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
   private $valueTime;
   private $allowNull;
   private $continueOnInvalidDate = false;
+  private $isTimeDisabled;
   private $isDisabled;
 
   public function setAllowNull($allow_null) {
@@ -18,6 +19,11 @@ final class AphrontFormDateControl extends AphrontFormControl {
     return $this;
   }
 
+  public function setIsTimeDisabled($is_disabled) {
+    $this->isTimeDisabled = $is_disabled;
+    return $this;
+  }
+
   const TIME_START_OF_DAY         = 'start-of-day';
   const TIME_END_OF_DAY           = 'end-of-day';
   const TIME_START_OF_BUSINESS    = 'start-of-business';
@@ -282,6 +288,9 @@ final class AphrontFormDateControl extends AphrontFormControl {
     if ($disabled) {
       $classes[] = 'datepicker-disabled';
     }
+    if ($this->isTimeDisabled) {
+      $classes[] = 'no-time';
+    }
 
     return javelin_tag(
       'div',
@@ -291,6 +300,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
         'meta'  => array(
           'disabled' => (bool)$disabled,
         ),
+        'id' => $this->getID(),
       ),
       array(
         $checkbox,

webroot/rsrc/css/phui/phui-form-view.css

@@ -457,6 +457,10 @@ properly, and submit values. */
   opacity: 0.5;
 }
 
+.aphront-form-date-container.no-time .aphront-form-date-time-input{
+  display: none;
+}
+
 
 .login-to-comment {
   margin: 12px;

webroot/rsrc/js/application/calendar/event-all-day.js

@@ -0,0 +1,16 @@
+/**
+ * @provides javelin-behavior-event-all-day
+ */
+
+
+JX.behavior('event-all-day', function(config) {
+  var checkbox = JX.$(config.allDayID);
+  JX.DOM.listen(checkbox, 'change', null, function() {
+    var start = JX.$(config.startDateID);
+    var end = JX.$(config.endDateID);
+
+    JX.DOM.alterClass(start, 'no-time', checkbox.checked);
+    JX.DOM.alterClass(end, 'no-time', checkbox.checked);
+  });
+
+});