Add task work date management and enhance task popup layout

.vscode/ftp-kr.sync.cache.json

@@ -197,20 +197,20 @@
       "layout": {
         "style.css": {
           "type": "-",
-          "size": 18298,
+          "size": 18616,
-          "lmtime": 1734346488819,
+          "lmtime": 1738914090080,
           "modified": false
         },
         "style.css.map": {
           "type": "-",
-          "size": 32824,
+          "size": 33482,
-          "lmtime": 1734346488819,
+          "lmtime": 1738914090080,
           "modified": false
         },
         "style.scss": {
           "type": "-",
-          "size": 22746,
+          "size": 23242,
-          "lmtime": 1734346488372,
+          "lmtime": 1738914089934,
           "modified": false
         }
       },
@@ -470,8 +470,8 @@
           },
           "main_view.php": {
             "type": "-",
-            "size": 22533,
+            "size": 22535,
-            "lmtime": 1734256586048,
+            "lmtime": 1738913967676,
             "modified": false
           },
           "task_edit.php": {
@@ -482,8 +482,8 @@
           },
           "task_popup.php": {
             "type": "-",
-            "size": 5214,
+            "size": 5285,
-            "lmtime": 1734256307848,
+            "lmtime": 1738913959844,
             "modified": false
           },
           "task_single.php": {

autoload/controls/class.Tasks.php

@@ -345,6 +345,7 @@ class Tasks
 
     echo \Tpl::view( 'tasks/task_popup', [
       'task' => \factory\Tasks::task_details( \S::get( 'task_id' ), $user['id'] ),
+      'task_works' => \factory\Tasks::task_works( \S::get( 'task_id' ) ),
       'user' => $user,
       'statuses' => \factory\Tasks::get_statuses()
     ] );
@@ -404,4 +405,10 @@ class Tasks
       'settings' => \factory\Crm::settings()
     ] );
   }
+
+  static public function change_task_work_date_start()
+  {
+    $result = \factory\Tasks::change_task_work_date_start( \S::get( 'task_work_id' ), \S::get( 'date_start' ) );
+    exit;
+  }
 }

autoload/factory/class.Tasks.php

@@ -5,6 +5,18 @@ class Tasks
 {
   public static $statuses = [ 0 => 'nowe', 3 => 'do rozliczenia', 5 => 'do zrobienia', 4 => 'zawieszone', 1 => 'do sprawdzenia', 6 => 'faktury', 2 => 'zamknięte' ];
 
+  static public function change_task_work_date_start( $task_work_id, $date_start )
+  {
+    global $mdb;
+    return $mdb -> update( 'tasks_work', [ 'date_start' => $date_start ? date( 'Y-m-d H:i:s', strtotime( $date_start ) ) : null ], [ 'id' => $task_work_id ] );
+  }
+
+  static public function task_works( $task_id )
+  {
+    global $mdb;
+    return $mdb -> select( 'tasks_work', '*', [ 'task_id' => $task_id, 'ORDER' => [ 'date_end' => 'DESC' ] ] );
+  }
+
   static public function get_statuses()
   {
     global $user;

layout/style.scss

@@ -3,6 +3,20 @@ $cRed: #aa0505;
 $cGreen: #43833f;
 $cBlack: #4e5e6a;
 
+.default-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: .25rem;
+  padding: 0 15px;
+  transition: all .3s ease;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 .animate {
   animation: mymove 3s infinite;
 }
@@ -122,7 +136,7 @@ body {
   }
 
   &.btn-danger {
-    background: #cc0000;
+    background: #cc563d;
 
     &:hover {
       background: #b30000;
@@ -135,7 +149,7 @@ body {
 }
 
 .form-error {
-  color: #cc0000;
+  color: #cc563d;
   font-size: 13px;
 }
 
@@ -324,7 +338,7 @@ body>.top {
 
     &.tasks_suspended {
       h2 {
-        border-bottom: 5px solid #cc0000;
+        border-bottom: 5px solid #cc563d;
       }
     }
 
@@ -378,7 +392,7 @@ body>.top {
         position: relative;
 
         &.notopened {
-          border: 2px solid #cc0000;
+          border: 2px solid #cc563d;
         }
 
         .left {
@@ -446,7 +460,7 @@ body>.top {
           }
 
           .task_end {
-            background: #cc0000;
+            background: #cc563d;
             color: #FFF;
             border-radius: 3px;
             cursor: pointer;
@@ -526,7 +540,7 @@ body>.top {
           font-size: 12px;
 
           .danger {
-            color: #cc0000;
+            color: #cc563d;
             font-weight: 600;
           }
 
@@ -569,7 +583,7 @@ body>.top {
     }
 
     &.btn_cancel {
-      background: #cc0000;
+      background: #cc563d;
 
       &:hover {
         background: #b30000;
@@ -628,6 +642,20 @@ body>.top {
     border-radius: 6px;
     max-width: 1140px;
     width: 100%;
+    transition: all 0.3s ease;
+    max-height: 600px;
+
+    &.open_works_time {
+      max-width: 1540px;
+
+      .content {
+        grid-template-columns: 1fr 300px 300px;
+
+        .task_work_details {
+          display: block;
+        }
+      }
+    }
 
     .title {
       font-size: 20px;
@@ -639,7 +667,7 @@ body>.top {
         margin-right: 10px;
 
         &.task-delete {
-          color: #cc0000;
+          color: #cc563d;
         }
       }
     }
@@ -652,8 +680,11 @@ body>.top {
     }
 
     .content {
-      display: flex;
+      display: grid;
       font-size: 14px;
+      grid-template-columns: 1fr 300px;
+      gap: 30px;
+      transition: all 0.3s ease;
 
       h3 {
         width: 100%;
@@ -665,7 +696,6 @@ body>.top {
       }
 
       .left {
-        width: 70%;
         max-height: 700px;
         overflow-y: auto;
 
@@ -740,7 +770,7 @@ body>.top {
                 top: 10px;
                 right: 10px;
                 cursor: pointer;
-                color: #cc0000;
+                color: #cc563d;
               }
 
               .author {
@@ -807,7 +837,7 @@ body>.top {
                 margin-left: auto;
                 margin-right: 0;
                 cursor: pointer;
-                background: #cc0000;
+                background: #cc563d;
                 display: flex;
                 height: 25px;
                 width: 25px;
@@ -839,30 +869,46 @@ body>.top {
       }
 
       .right {
-        width: 30%;
-        padding: 0 15px 15px;
 
         .box {
           margin-bottom: 15px;
         }
 
         .time {
-          a {
+          a.time_worked_toggle {
-            display: block;
+            @extend .default-btn;
-            padding: 10px;
+            color: #299cdb;
-            border-radius: 6px;
+            display: inline-flex;
+            border: 1px solid #299cdb;
+
+            &:hover {
+              background: #dff0fa;
+              text-decoration: none;
+            }
+
+            &:active,
+            &:focus {
+              text-decoration: none;
+            }
+          }
+
+          a:not(.time_worked_toggle) {
+            @extend .default-btn;
             margin-top: 10px;
             text-decoration: none;
-            text-align: center;
+            gap: 10px;
-            width: 100%;
 
             &.task_start {
-              background: #57b951;
+              background: #0ab39c;
               color: #FFF;
+
+              &:hover {
+                background: #099885;
+              }
             }
 
             &.task_end {
-              background: #cc0000;
+              background: #cc563d;
               color: #FFF;
             }
 
@@ -878,7 +924,7 @@ body>.top {
           flex-wrap: wrap;
 
           .danger {
-            color: #cc0000;
+            color: #cc563d;
             font-weight: 600;
           }
 
@@ -892,6 +938,32 @@ body>.top {
           }
         }
       }
+
+      .task_work_details {
+        display: none;
+        overflow-y: auto;
+        max-height: 508px;
+        width: 100%;
+        padding-right: 10px;
+
+        ._line {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 5px;
+
+          ._user {
+            width: 100%;
+            font-size: 13px;
+          }
+
+          input {
+            width: calc(50% - 10px);
+            text-align: center;
+          }
+        }
+      }
     }
   }
 }
@@ -1038,7 +1110,7 @@ body>.top {
           color: $cBlue;
 
           &:hover {
-            color: #cc0000;
+            color: #cc563d;
           }
         }
       }

templates/tasks/main_view.php

@@ -726,6 +726,33 @@
     document.location.href = '/tasks/main_view/tasks_closed=show';
   });
 
+  $( 'body' ).on( 'change', '.task_work_date_start', function()
+  {
+    var date_start = $( this ).val();
+    var task_work_id = $( this ).attr( 'task_work_id' );
+    $( this ).attr( 'disabled', 'disabled' );
+
+    $.ajax({
+      type: 'POST',
+      cache: false,
+      url: '/tasks/change_task_work_date_start/',
+      data: {
+        date_start: date_start,
+        task_work_id: task_work_id
+      },
+      beforeSend: function() { },
+      success: function( response )
+      {
+        $( '.task_work_start' ).removeAttr( 'disabled' );
+      }
+    });
+  });
+
+  $( 'body' ).on( 'click', '.task_popup .time_worked_toggle', function(e){
+    e.preventDefault();
+    $( '.task_popup .task_details' ).toggleClass( 'open_works_time' );
+  });
+
   $( function()
   {
     $( '.projects_container input.g-checkbox').on( 'change', function (e) {

templates/tasks/task_popup.php

@@ -92,7 +92,11 @@
       </div>
       <div class="time box">
         <h3>Przepracowany czas</h3>
-        <div class="time_worked"><?= sprintf( "%02d%s%02d%s%02d", floor( $this -> task['total_time'] / 3600 ), ':', ( $this -> task['total_time'] / 60) % 60, ':', $this -> task['total_time'] % 60 );?></div>
+        <div class="time_worked">
+          <a href="#" class="time_worked_toggle">
+            <?= sprintf( "%02d%s%02d%s%02d", floor( $this -> task['total_time'] / 3600 ), ':', ( $this -> task['total_time'] / 60) % 60, ':', $this -> task['total_time'] % 60 );?>
+          </a>
+        </div>
         <a href="#" class="task_start <? if ( $this -> task['is_open'] ):?> hidden<? endif;?>" task_id="<?= $this -> task['id'];?>">
           <i class="fa fa-play"></i> Włącz timer
         </a>
@@ -101,5 +105,13 @@
         </a>
       </div>
     </div>
+    <div class="task_work_details">
+      <? foreach ( $this -> task_works as $task_work ):?>
+        <div class="_line">
+          <div class="_user"><?= \factory\Users::user_details( $task_work['user_id'] )['name'] . ' ' . \factory\Users::user_details( $task_work['user_id'] )['surname'];?></div>
+          <input type="text" class="form-control task_work_date_start" task_work_id="<?= $task_work['id'];?>" value="<?= $task_work['date_start'];?>"><span>-</span><input type="text" class="form-control task_work_end" task_work_id="<?= $task_work['id'];?>" value="<?= $task_work['date_end'];?>">
+        </div>
+      <? endforeach;?>
+    </div>
   </div>
 </div>