From 5b50964d06ea5d5ddb1c45e4094ee81f6c462869 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 16 May 2025 16:36:18 -0400
Subject: [PATCH] Fixed ticket editing, and ticket overview size.

---
 assets/css/ticket.css  | 15 +++++++++++++--
 assets/js/dashboard.js | 19 ++++++-------------
 assets/js/ticket.js    | 26 ++++++++++++++++++++++++++
 ticket.php             | 13 +++++++++++++
 4 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/assets/css/ticket.css b/assets/css/ticket.css
index 7f6a617..6765b68 100644
--- a/assets/css/ticket.css
+++ b/assets/css/ticket.css
@@ -1,6 +1,8 @@
 /* Base Layout Components */
 .ticket-container {
     width: 90%;
+    height: auto !important;
+    min-height: 900px !important;
     min-width: 800px;
     max-width: 1800px;
     margin: 40px auto;
@@ -125,9 +127,18 @@ input.editable {
 
 textarea.editable {
     width: calc(100% - 20px);
-    min-height: 150px;
-    resize: vertical;
+    min-height: 800px !important;
+    height: auto !important; /* Allow it to grow with content */
     box-sizing: border-box;
+    white-space: pre; /* Preserve formatting */
+    font-family: monospace; /* Better for ASCII art */
+    line-height: 1.2; /* Tighter line spacing for ASCII art */
+}
+
+#description-tab {
+    min-height: 850px !important; /* Slightly larger than the textarea */
+    height: auto !important;
+    padding-bottom: 20px; /* Add some padding at the bottom */
 }
 
 .editable:disabled {
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 31e5902..358b3dc 100644
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -492,21 +492,15 @@ function resetHamburgerEditMode() {
 }
 
 function createHamburgerMenu() {
-    // Create hamburger menu container
     const hamburgerMenu = document.createElement('div');
     hamburgerMenu.className = 'hamburger-menu';
     
-    // Check if we're on a ticket page
     const isTicketPage = window.location.pathname.includes('ticket.php');
     
-    if (isTicketPage) {
-        // Get current values from existing select elements
-        const selects = document.querySelectorAll('select.editable');
-        const values = {};
-        selects.forEach(select => {
-            select.dataset.originalValue = select.value;
-        });
-    
+    if (isTicketPage && window.ticketData) {
+        // Use the ticket data from the global variable
+        const values = window.ticketData;
+        
         hamburgerMenu.innerHTML = `
             <div class="hamburger-icon">☰</div>
             <div class="hamburger-content">
@@ -552,13 +546,12 @@ function createHamburgerMenu() {
                 </div>
             </div>
         `;
+        
         const hamburgerEditButton = hamburgerMenu.querySelector('#hamburgerEditButton');
         if (hamburgerEditButton) {
             hamburgerEditButton.addEventListener('click', toggleHamburgerEditMode);
-        } else {
-            console.error("Error: #hamburgerEditButton not found!");
         }
-        // Add event listener for Escape key press
+
         document.addEventListener('keydown', (event) => {
             if (event.key === 'Escape') {
                 cancelHamburgerEdit();
diff --git a/assets/js/ticket.js b/assets/js/ticket.js
index 4e13371..145e5ff 100644
--- a/assets/js/ticket.js
+++ b/assets/js/ticket.js
@@ -161,6 +161,32 @@ function addComment() {
 document.addEventListener('DOMContentLoaded', function() {
     // Show description tab by default
     showTab('description');
+    
+    // Add the auto-resize functionality here
+    // Auto-resize the description textarea to fit content
+    const descriptionTextarea = document.querySelector('textarea[data-field="description"]');
+    
+    function autoResizeTextarea() {
+        // Reset height to auto to get the correct scrollHeight
+        descriptionTextarea.style.height = 'auto';
+        // Set the height to match the scrollHeight
+        descriptionTextarea.style.height = descriptionTextarea.scrollHeight + 'px';
+    }
+    
+    // Initial resize
+    autoResizeTextarea();
+    
+    // Resize on input when in edit mode
+    descriptionTextarea.addEventListener('input', autoResizeTextarea);
+    
+    // Also resize when edit mode is toggled
+    const originalToggleEditMode = window.toggleEditMode;
+    if (typeof originalToggleEditMode === 'function') {
+        window.toggleEditMode = function() {
+            originalToggleEditMode.apply(this, arguments);
+            setTimeout(autoResizeTextarea, 0);
+        };
+    }
 });
 
 function showTab(tabName) {
diff --git a/ticket.php b/ticket.php
index bc69238..89a0ffe 100644
--- a/ticket.php
+++ b/ticket.php
@@ -30,6 +30,17 @@ $ticket = $result->fetch_assoc();
     <script src="assets/js/dashboard.js"></script>
     <script src="assets/js/ticket.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script>
+    // Store ticket data in a global variable
+    window.ticketData = {
+        ticket_id: "<?php echo $ticket['ticket_id']; ?>",
+        title: "<?php echo htmlspecialchars($ticket['title']); ?>",
+        status: "<?php echo $ticket['status']; ?>",
+        priority: "<?php echo $ticket['priority']; ?>",
+        category: "<?php echo $ticket['category']; ?>",
+        type: "<?php echo $ticket['type']; ?>"
+    };
+</script>
 </head>
 <body>
     <div class="ticket-container" data-priority="<?php echo $ticket[
@@ -55,6 +66,7 @@ $ticket = $result->fetch_assoc();
             </div>
         </div>
         <div class="ticket-details">
+        <!--
         <div class="detail-group status-priority-row">
             <div class="detail-quarter">
                 <label>Status</label>
@@ -120,6 +132,7 @@ $ticket = $result->fetch_assoc();
                 </select>
             </div>
         </div>
+                    -->
         <div class="ticket-tabs">
             <button class="tab-btn active" onclick="showTab('description')">Description</button>
             <button class="tab-btn" onclick="showTab('comments')">Comments</button>