Add inline task title editing in popup

This commit is contained in:
2026-02-22 17:23:54 +01:00
parent 8f2e332069
commit 8d4d539283
2 changed files with 101 additions and 1 deletions

View File

@@ -342,6 +342,17 @@ class Tasks
exit;
}
static public function task_change_title() {
global $mdb;
if ( $mdb -> update( 'tasks', [ 'name' => \S::get( 'title' ) ], [ 'id' => \S::get( 'task_id' ) ] ) ) {
echo json_encode( [ 'status' => 'success' ] );
} else {
echo json_encode( [ 'status' => 'error' ] );
}
exit;
}
static public function task_change_users() {
global $mdb, $user;

View File

@@ -9,7 +9,17 @@
<i class="fa fa-trash"></i>
</a>
<? endif;?>
#<?= $this -> task['id'];?> <?= $this -> task['name'];?>
<span class="task-title-wrapper">
<span class="task-id">#<?= $this -> task['id'];?></span>
<span class="task-title-text"><?= $this -> task['name'];?></span>
<a href="#" class="task-title-edit-btn" title="Edytuj tytuł"><i class="fa fa-pencil-square-o"></i></a>
<span class="task-title-edit-box" style="display:none;">
<input type="text" class="task-title-input form-control form-control-sm" value="<?= htmlspecialchars($this -> task['name']);?>">
<a href="#" class="task-title-save btn btn-success btn-sm"><i class="fa fa-check"></i></a>
<a href="#" class="task-title-cancel btn btn-danger btn-sm"><i class="fa fa-times"></i></a>
</span>
</span>
</div>
<?
$checklist_count = is_array( $this -> task['actions'] ) ? count( $this -> task['actions'] ) : 0;
@@ -378,6 +388,34 @@
line-height: 1;
text-shadow: 0 0 8px rgba(0,0,0,.6);
}
.task_popup .task_details .title .task-title-wrapper {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.task_popup .task_details .title .task-title-edit-btn {
font-size: 14px;
color: #999;
margin-left: 5px;
opacity: 0.6;
transition: opacity 0.2s;
}
.task_popup .task_details .title .task-title-edit-btn:hover {
opacity: 1;
color: #333;
}
.task_popup .task_details .title .task-title-edit-box {
align-items: center;
gap: 5px;
}
.task_popup .task_details .title .task-title-input {
font-size: 18px;
padding: 4px 8px;
width: 400px;
max-width: 100%;
}
</style>
<script type="text/javascript">
( function() {
@@ -528,6 +566,57 @@
});
});
popup.on( 'click', '.task-title-edit-btn', function( e ) {
e.preventDefault();
popup.find( '.task-title-edit-btn' ).hide();
popup.find( '.task-title-text' ).hide();
popup.find( '.task-title-edit-box' ).css( 'display', 'inline-flex' );
popup.find( '.task-title-input' ).focus();
});
popup.on( 'click', '.task-title-cancel', function( e ) {
e.preventDefault();
popup.find( '.task-title-edit-box' ).hide();
popup.find( '.task-title-text' ).show();
popup.find( '.task-title-edit-btn' ).show();
// Reset input to current text
popup.find( '.task-title-input' ).val( popup.find( '.task-title-text' ).text() );
});
popup.on( 'click', '.task-title-save', function( e ) {
e.preventDefault();
var btn = $( this );
var new_title = popup.find( '.task-title-input' ).val().trim();
var task_id = popup.attr( 'task_id' );
if ( !new_title ) return;
btn.addClass( 'disabled' );
$.ajax({
type: 'POST',
url: '/tasks/task_change_title/',
data: { task_id: task_id, title: new_title },
success: function( response ) {
var res = typeof response === 'string' ? JSON.parse( response ) : response;
if ( res.status === 'success' ) {
popup.find( '.task-title-text' ).text( new_title );
popup.find( '.task-title-cancel' ).click(); // Close edit mode
// Update main view list if exists
if ( typeof getSelectedTaskFilters === 'function' && typeof reload_tasks === 'function' )
{
var selected_filters = getSelectedTaskFilters();
reload_tasks( selected_filters.projects, selected_filters.users );
}
} else {
alert( 'Wystąpił błąd podczas zmiany tytułu.' );
}
btn.removeClass( 'disabled' );
}
});
});
var interval_id = setInterval( function() {
if ( !document.body.contains( popup.get( 0 ) ) )
{