citrus-cms/resources/views/admin-ajax/row-history.blade.php

<?php 

use App\Models\ColumnComment;
use App\Models\User;

$rowId = get("row_id");
$table = get("table");

// Get comments from our new table for this specific row
$users = User::all();
$comments = ColumnComment::where('table_name', $table)
    ->where('record_id', $rowId)
    ->orderBy('created_at', 'DESC')
    ->get();

// Convert comments to JSON for DataGrid
$commentsJson = json_encode($comments);
// Convert users to a lookup object for DataGrid
$usersLookup = [];
foreach ($users as $user) {
    $usersLookup[$user->id] = $user->name;
}
$usersJson = json_encode($usersLookup);

if($comments->count() > 0 || true)
{
    ?>
    <div class="card mb-3">
        <div class="card-header">
            <h5>
                <span class="badge badge-primary">{{e2($table)}}</span> / 
                <span class="badge badge-secondary">Row #{{e2($rowId)}}</span> 
                <span class="badge badge-default">{{e2("Add Comment")}}</span>
            </h5>
        </div>
        <div class="card-body">
            <form id="rowCommentForm" method="post">
                @csrf
                <input type="hidden" name="table_name" value="<?php echo $table; ?>">
                <input type="hidden" name="record_id" value="<?php echo $rowId; ?>">
                <input type="hidden" name="column_name" value="">
                <input type="hidden" name="column_value" value="">
                
                <div class="form-group">
                    <label for="column_select">{{e2("Select Column")}}</label>
                    <select class="form-control" id="column_select" name="column_name" required>
                        <option value="">{{e2("Select a column to comment on")}}</option>
                        <?php
                        // Get column names from the first comment or try to get them from the table
                        $columnNames = [];
                        if($comments->count() > 0) {
                            $columnNames = $comments->pluck('column_name')->unique()->toArray();
                        }
                        ?>
                        @foreach($columnNames as $columnName)
                            <option value="{{$columnName}}">{{e2($columnName)}}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="comment">{{e2("Your Comment")}}</label>
                    <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary">{{e2("Submit Comment")}}</button>
            </form>
        </div>
    </div>

    <div class="card fullsize-grid">
        <div class="card-header">
            <h5>{{e2("Row Comments History")}}</h5>
        </div>
        <div class="card-body p-0">
            <!-- DevExtreme DataGrid container -->
            <div id="rowCommentsDataGrid" style="width: 100%;"></div>
        </div>
    </div>
   
    <?php 
  
} else {
     ?>
     <div class="alert alert-info">{{e2("No Comments Found for this Row")}}</div>
     <?php 
}

// Add JS for form submission
?>

<style>
/* DataGrid için stil ayarları */
.dx-datagrid {
    min-height: 500px;
}

/* Card gövdesi padding kaldırma */
.card-body.p-0 {
    padding: 0 !important;
}

/* Card kendisi için margin ayarları */
.card.fullsize-grid {
    margin-bottom: 0 !important;
}
</style>

<script>
$(function() {
    // Format date for DataGrid
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }
    
    // Users lookup table from server
    const usersLookup = <?php echo $usersJson; ?>;
    
    // Format user information
    function formatUser(userId) {
        return usersLookup[userId] || 'Unknown';
    }
    
    // Calculate grid height - responsive approach
    function calculateGridHeight() {
        // Minimum yükseklik 500px, aksi takdirde pencere yüksekliğinin %70'i
        return Math.max(500, window.innerHeight * 0.7);
    }
    
    // Initialize DataGrid with comments data
    const comments = <?php echo $commentsJson; ?>;
    
    const dataGrid = $("#rowCommentsDataGrid").dxDataGrid({
        dataSource: comments,
        showBorders: true,
        height: calculateGridHeight(),
        width: "100%",
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: "Search..."
        },
        headerFilter: {
            visible: true
        },
        grouping: {
            autoExpandAll: false
        },
        paging: {
            pageSize: 10
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [5, 10, 20, 50],
            showInfo: true
        },
        columnAutoWidth: true,
        columns: [
            {
                dataField: "created_at",
                caption: "Date",
                dataType: "datetime",
                format: "dd.MM.yyyy HH:mm",
                sortOrder: "desc",
                width: 160
            },
            {
                dataField: "column_name",
                caption: "Column",
                dataType: "string",
                width: 150
            },
            {
                dataField: "comment",
                caption: "Comment",
                dataType: "string",
                width: 350
            },
            {
                dataField: "column_value",
                caption: "Value at Comment Time",
                dataType: "string",
                width: 200
            },
            {
                dataField: "user_id",
                caption: "User",
                lookup: {
                    dataSource: Object.entries(usersLookup).map(([id, name]) => ({ id: parseInt(id), name: name })),
                    displayExpr: "name",
                    valueExpr: "id"
                },
                width: 150
            },
            {
                dataField: "ip_address",
                caption: "IP Address",
                dataType: "string",
                width: 120
            }
        ],
        export: {
            enabled: true,
            allowExportSelectedData: true
        },
        onContentReady: function(e) {
            if(comments.length === 0) {
                e.component.option("noDataText", "No comments found for this row");
            }
        }
    }).dxDataGrid("instance");
    
    // Pencere yeniden boyutlandırıldığında grid yüksekliğini güncelle
    $(window).on("resize", function() {
        dataGrid.option("height", calculateGridHeight());
    });
    
    // Form submission handler
    $('#rowCommentForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '<?php echo url('api/column-comment'); ?>',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if(response.success) {
                    // Show success message with SweetAlert
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Your comment has been added successfully.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        // After alert is closed, refresh the content
                        refreshComments();
                    });
                    
                    // Clear the form
                    $('#comment').val('');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.message || 'Failed to add comment.',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'An error occurred while processing your request.',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
    
    // Function to refresh comments
    function refreshComments() {
        $.ajax({
            url: '<?php echo url('admin-ajax/row-history?row_id=' . $rowId . '&table=' . $table); ?>',
            type: 'GET',
            success: function(data) {
                $('#modal-popin .block-content').html(data);
            },
            error: function() {
                Swal.fire('Error', 'Failed to refresh comments.', 'error');
            }
        });
    }
});
</script>