cutom edit contribution modal

replaced sweet alert inline styles with CSS classes
moved add news button
2026-06-16 15:53:42 +02:00 · 2026-06-16 15:43:48 +02:00 · 2026-06-16 15:32:39 +02:00
5 changed files with 146 additions and 65 deletions
--- a/public/admin.php
+++ b/public/admin.php
@@ -457,11 +457,23 @@ $counts['total'] = count($all_contributions);
        <!-- News Article Tab                                      -->
        <!-- ========================================================= -->
        <div id="tab-news" class="page-tab-content" style="display:none;">
-            <div class="tab-header">
-                <h2><i class="fa-solid fa-newspaper"></i> Neuigkeiten</h2>
-                <button class="btn btn-approve" onclick="createNews()">
-                    <i class="fa-solid fa-plus"></i> Nachricht hinzufügen
-                </button>
+
+            <!-- Filter -->
+            <div class="filter-tabs" id="news-filter-tabs">
+                    <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
+                        Alle <span class="tab-count"><?= count($news_items) ?></span>
+                    </button>
+                </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="news-visible-count"><?= count($news_items) ?> Neuigkeiten</span>
+                <div style="display:flex;gap:var(--space-sm);align-items:center;">
+                    <select onchange="sortNewsRows(this.value)">
+                        <option value="date-desc">Neueste zuerst</option>
+                        <option value="date-asc">Älteste zuerst</option>
+                    </select>
+                </div>
            </div>

            <?php if (empty($news_items)): ?>
@@ -471,7 +483,7 @@ $counts['total'] = count($all_contributions);
                </div>
            <?php else: ?>
                <?php foreach ($news_items as $news): ?>
-                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>">
+                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>" data-date="<?= $news['published_at'] ?>">
                        <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
                            <div class="contribution-row-summary">
                                <span class="title"><?= htmlspecialchars($news['title']) ?></span>
@@ -498,6 +510,12 @@ $counts['total'] = count($all_contributions);
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
+
+            <div class="tab-footer-action">
+                    <button class="btn btn-approve" onclick="createNews()">
+                        <i class="fa-solid fa-plus"></i> Neuigkeit hinzufügen
+                    </button>
+            </div>
        </div>


--- a/public/index.php
+++ b/public/index.php
@@ -348,6 +348,33 @@ $news_items = $stmt->fetchAll();
        </div>
    </div>

+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal                                       -->
+    <!-- ============================================================= -->
+    <div id="edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+
+            <div class="form-group">
+                <label for="edit-title">Titel</label>
+                <input type="text" id="edit-title" class="form-input">
+            </div>
+
+            <div class="form-group">
+                <label for="edit-description">Beschreibung</label>
+                <textarea id="edit-description" class="form-input" rows="4"></textarea>
+            </div>
+
+            <input type="hidden" id="edit-contribution-id">
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+

    <!-- ============================================================= -->
    <!-- Loads JavaScript Dependencies                                 -->
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -275,7 +275,26 @@ function sortCommentRows(sortBy) {


 // =====================================================================
-// Block 7: Helper Functions
+// Block 7: News Filter and Sorting
+// =====================================================================
+
+// Sorts News
+function sortNewsRows(sortBy) {
+    var container = document.getElementById('tab-news');
+    var rows = Array.from(container.querySelectorAll('.contribution-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date || 0) - new Date(a.dataset.date || 0);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date || 0) - new Date(b.dataset.date || 0);
+        return 0;
+    });
+
+    rows.forEach(function (row) { row.parentNode.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 8: Helper Functions
 // =====================================================================

 // Sends a POST request to API
@@ -301,7 +320,7 @@ function escapeHtml(text) {
 }

 // =====================================================================
-// Block 8: CRUD Operations for Contributions
+// Block 9: CRUD Operations for Contributions
 // =====================================================================

 // STATUS: Changes Contribution Status
@@ -387,7 +406,7 @@ function deleteContribution(contributionId) {
        showCancelButton: true,
        confirmButtonText: 'Beitrag löschen',
        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
    }).then(function (result) {
        if (!result.isConfirmed) return;

@@ -406,7 +425,7 @@ function deleteContribution(contributionId) {
 }

 // =====================================================================
-// Block 9: CRUD Operations for Comments
+// Block 10: CRUD Operations for Comments
 // =====================================================================

 // STATUS: Changes Comment Status
@@ -481,7 +500,7 @@ function deleteModComment(commentId) {
        showCancelButton: true,
        confirmButtonText: 'Löschen',
        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
    }).then(function (result) {
        if (!result.isConfirmed) return;

@@ -501,7 +520,7 @@ function deleteModComment(commentId) {


 // =====================================================================
-// Block 10: CRUD Operations for News
+// Block 11: CRUD Operations for News
 // =====================================================================

 // CREATE: Submits new News Article
@@ -618,7 +637,7 @@ function deleteNews(newsId) {
        showCancelButton: true,
        confirmButtonText: 'Löschen',
        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
    }).then(function (result) {
        if (!result.isConfirmed) return;

--- a/public/js/app.js
+++ b/public/js/app.js
@@ -653,58 +653,55 @@ function closeCreateModal() {
 }

 // UPDATE: Edits existing Contributions
+// UPDATE: Opens Edit Modal for existing Contributions
 function editContribution(contributionId) {
-    // Finds Contribution in local Data
    const contribution = contributionsData.find(function (f) {
        return f.properties.contribution_id === contributionId;
    });
-
    if (!contribution) return;

    const props = contribution.properties;
+    document.getElementById('edit-contribution-id').value = contributionId;
+    document.getElementById('edit-title').value = props.title;
+    document.getElementById('edit-description').value = props.description || '';
+    document.getElementById('edit-modal').style.display = 'flex';
+}

-    Swal.fire({
-        title: 'Beitrag bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-title" class="swal2-input" value="' + escapeHtml(props.title) + '">' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Beschreibung</label>' +
-                    '<textarea id="swal-description" class="swal2-textarea">' + escapeHtml(props.description || '') + '</textarea>' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: MUNICIPALITY.primaryColor,
-        preConfirm: function () {
-            return {
-                title: document.getElementById('swal-title').value.trim(),
-                description: document.getElementById('swal-description').value.trim()
-            };
+// Submits Edit from Custom Modal
+function submitEdit() {
+    const contributionId = document.getElementById('edit-contribution-id').value;
+    const title = document.getElementById('edit-title').value.trim();
+    const description = document.getElementById('edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update',
+        contribution_id: contributionId,
+        title: title,
+        description: description
+    }, function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
-
-        apiCall({
-            action: 'update',
-            contribution_id: contributionId,
-            title: result.value.title,
-            description: result.value.description
-        }, function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
-            loadContributions();
-        });
+        closeEditModal();
+        Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
+        loadContributions();
    });
 }

+// Closes Edit Modal
+function closeEditModal() {
+    document.getElementById('edit-modal').style.display = 'none';
+    document.getElementById('edit-contribution-id').value = '';
+    document.getElementById('edit-title').value = '';
+    document.getElementById('edit-description').value = '';
+}
+
 // DELETE: Deletes existing Contributions
 function deleteContribution(contributionId) {
    Swal.fire({
@@ -714,7 +711,7 @@ function deleteContribution(contributionId) {
        showCancelButton: true,
        confirmButtonText: 'Löschen',
        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
    }).then(function (result) {
        if (!result.isConfirmed) return;

@@ -1082,6 +1079,7 @@ document.addEventListener('keydown', function (e) {
        document.getElementById('welcome-modal').style.display = 'none';
        document.getElementById('login-modal').style.display = 'none';
        document.getElementById('create-modal').style.display = 'none';
+        document.getElementById('edit-modal').style.display = 'none';
    }
 });

--- a/public/styles.css
+++ b/public/styles.css
@@ -286,10 +286,12 @@ select.form-input { cursor: pointer; }
 }

 /* SweetAlert2 Portal Theme */
+/* SweetAlert2 Portal Theme — Notifications */
 .swal2-popup {
    font-family: var(--font-body) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--font-base) !important;
+    padding: var(--space-xl) !important;
 }

 .swal2-title {
@@ -304,31 +306,38 @@ select.form-input { cursor: pointer; }
    line-height: 1.6 !important;
 }

+.swal2-actions {
+    gap: var(--space-sm) !important;
+}
+
 .swal2-confirm {
    border-radius: var(--radius-md) !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    padding: var(--space-sm) var(--space-lg) !important;
+    min-height: 40px !important;
+    box-shadow: none !important;
+    background-color: var(--color-primary) !important;
 }

-.swal2-cancel {
-    border-radius: var(--radius-md) !important;
-    font-size: var(--font-sm) !important;
-    font-weight: 600 !important;
-    font-family: var(--font-body) !important;
-    padding: var(--space-sm) var(--space-lg) !important;
-    background: var(--color-bg) !important;
-    color: var(--color-text) !important;
-    border: 1px solid var(--color-border) !important;
-}
-
+.swal2-cancel,
 .swal2-deny {
    border-radius: var(--radius-md) !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    padding: var(--space-sm) var(--space-lg) !important;
+    min-height: 40px !important;
+    background: var(--color-bg) !important;
+    color: var(--color-text) !important;
+    border: 1px solid var(--color-border) !important;
+    box-shadow: none !important;
+}
+
+.swal2-cancel:hover,
+.swal2-deny:hover {
+    background: var(--color-border) !important;
 }

 .swal-label {
@@ -365,6 +374,10 @@ select.form-input { cursor: pointer; }
    color: #999;
 }

+.swal-btn-danger {
+    background-color: var(--color-error) !important;
+}
+

 /* -----------------------------------------------------------------
   3.7 Warning Notices
@@ -1374,6 +1387,12 @@ select.form-input { cursor: pointer; }
    border-top: 1px solid #f0f0f0;
 }

+.tab-footer-action {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--space-md);
+}
+

 /* News and Comments Tab Headers */
 .tab-header {
Author	SHA1	Message	Date
patrickzerhusen	70fe829e97	cutom edit contribution modal	2026-06-16 15:53:42 +02:00
patrickzerhusen	c1dd6cc009	replaced sweet alert inline styles with CSS classes	2026-06-16 15:43:48 +02:00
patrickzerhusen	336e7cf3a6	moved add news button	2026-06-16 15:32:39 +02:00