@reldens/cms 0.18.0 → 0.20.0

package/admin/reldens-admin-client.css

@@ -27,13 +27,13 @@
     padding: 0;
     font-size: 12px;
 
-    & .wrapper {
+    .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }
 
-    & .notification {
+    .notification {
         display: none;
         position: absolute;
         top: 1.5rem;
@@ -56,7 +56,7 @@
             color: var(--white);
         }
 
-        & .close {
+        .close {
             position: absolute;
             top: 1rem;
             right: 1rem;
@@ -65,26 +65,29 @@
         }
     }
 
-    & .header {
-        background-color: var(--darkGrey);
+    .header {
+        /* height: 3.85rem; */
         padding: 1.5rem;
+        background-color: var(--darkGrey);
         text-align: center;
 
-        & .title a {
+        .title a {
             color: var(--white);
             text-decoration: none;
-            font-size: 24px;
+            font-size: 1.5rem;
             font-weight: var(--bold);
             font-family: var(--reldensFont);
         }
     }
 
-    & .content {
+    .content {
         display: flex;
+        flex-grow: 1;
         position: relative;
+        /* min-height: calc(100vh - 11.80rem); */
     }
 
-    & .button {
+    .button {
         padding: 0.5rem 1rem;
         border: none;
         border-radius: 4px;
@@ -97,7 +100,7 @@
         }
     }
 
-    & .button-primary {
+    .button-primary {
         color: var(--white);
         background-color: var(--lightBlue);
 
@@ -106,7 +109,7 @@
         }
     }
 
-    & .button-secondary {
+    .button-secondary {
         color: var(--white);
         background-color: var(--grey);
 
@@ -115,7 +118,7 @@
         }
     }
 
-    & .button-warning {
+    .button-warning {
         color: var(--white);
         background-color: var(--orange);
 
@@ -124,7 +127,7 @@
         }
     }
 
-    & .button-danger {
+    .button-danger {
         color: var(--white);
         background-color: var(--red);
 
@@ -133,17 +136,17 @@
         }
     }
 
-    & .icon {
+    .icon {
         &-sm {
             width: 32px;
         }
     }
 
-    & .clickable {
+    .clickable {
         cursor: pointer;
     }
 
-    & .modal-overlay {
+    .modal-overlay {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -156,7 +159,7 @@
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    & .modal {
+    .modal {
         max-width: 92vw;
         max-height: 92vh;
         padding: 1rem;
@@ -170,12 +173,12 @@
         }
     }
 
-    & .response-error {
+    .response-error {
         color: var(--red);
         font-weight: var(--bold);
     }
 
-    & .side-bar {
+    .side-bar {
         min-width: 230px;
         padding: 1.4rem;
         background-color: var(--darkBlue);
@@ -183,9 +186,9 @@
         box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
     }
 
-    & .with-sub-items {
+    .with-sub-items {
         &.active {
-            & .side-bar-item {
+            .side-bar-item {
                 display: block;
 
                 &:first-of-type {
@@ -200,7 +203,7 @@
             }
         }
 
-        & .side-bar-item {
+        .side-bar-item {
             display: none;
 
             & a {
@@ -222,7 +225,7 @@
         }
     }
 
-    & .side-bar-item {
+    .side-bar-item {
         margin-bottom: 0.2rem;
 
         &:first-child {
@@ -249,11 +252,11 @@
         }
     }
 
-    & .user-area {
+    .user-area {
         margin-top: 1.5rem;
     }
 
-    & .main-content {
+    .main-content {
         padding: 2rem;
         background-color: var(--white);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -263,30 +266,30 @@
         width: 100%;
     }
 
-    & .entity-list {
+    .entity-list {
         overflow: auto;
 
-        & .actions {
+        .actions {
             display: flex;
             justify-content: end;
             margin-bottom: 1rem;
         }
     }
 
-    & .forms-container {
+    .forms-container {
         width: 96%;
         max-width: 400px;
         margin: auto;
     }
 
-    & .form-title {
+    .form-title {
         font-size: 22px;
         margin-bottom: 2%;
         color: var(--darkGrey);
         text-align: center;
     }
 
-    & .input-box {
+    .input-box {
         margin: 0 auto 4%;
 
         & label {
@@ -320,7 +323,7 @@
         min-height: 300px;
     }
 
-    & .table-container {
+    .table-container {
         width: 96%;
         margin: auto;
     }
@@ -332,14 +335,14 @@
         text-align: center;
     }
 
-    & .list {
+    .list {
         width: 100%;
         border-collapse: collapse;
         margin-bottom: 2%;
         color: var(--darkGrey);
         table-layout: auto;
 
-        & .row {
+        .row {
             background-color: var(--white);
 
             &.row-header {
@@ -360,7 +363,7 @@
             }
         }
 
-        & .field {
+        .field {
             padding: 0.5rem 0;
             min-width: min-content;
             white-space: nowrap;
@@ -368,20 +371,20 @@
             border: 1px solid #ccc;
             text-align: left;
 
-            & .button-list-delete {
+            .button-list-delete {
                 border: none;
                 background-color: transparent;
                 cursor: pointer;
             }
 
-            & .field-actions-container {
+            .field-actions-container {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 margin: 0 1rem;
 
-                & .button {
+                .button {
                     margin-bottom: 1rem;
 
                     &.list-delete-selection {
@@ -405,7 +408,7 @@
             }
         }
 
-        & .field-edit, & .field-delete {
+        .field-edit, .field-delete {
             & span {
                 display: block;
                 text-align: center;
@@ -413,7 +416,7 @@
             }
         }
 
-        & .field-edit {
+        .field-edit {
             & span {
                 & svg, path {
                     width: 24px;
@@ -422,7 +425,7 @@
             }
         }
 
-        & .field-delete {
+        .field-delete {
             & span {
                 & svg, path {
                     width: 24px;
@@ -432,11 +435,11 @@
         }
     }
 
-    & .filters-toggle {
+    .filters-toggle {
         cursor: pointer;
     }
 
-    & .filters-toggle-content {
+    .filters-toggle-content {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
@@ -447,7 +450,7 @@
         }
     }
 
-    & .pagination {
+    .pagination {
         width: 100%;
         display: flex;
         flex-flow: wrap;
@@ -469,9 +472,9 @@
         }
     }
 
-    & .footer {
+    .footer {
+        padding: 2rem;
         text-align: center;
-        padding: 2%;
         background-color: var(--darkGrey);
         color: var(--white);
 
@@ -485,7 +488,7 @@
         }
     }
 
-    & .copyright {
+    .copyright {
         position: relative;
         display: block;
         width: 100%;
@@ -502,23 +505,23 @@
 
     }
 
-    & .alert {
+    .alert {
         font-weight: var(--bold);
         color: var(--red);
     }
 
-    & .shutting-down {
+    .shutting-down {
         margin-bottom: 1rem;
     }
 
-    & .sub-content {
+    .sub-content {
         background-color: var(--lightGrey2);
         padding: 1rem;
         margin-bottom: 1rem;
         border: 1px solid #ccc;
         border-radius: 4px;
 
-        & .sub-content-form {
+        .sub-content-form {
             display: flex;
             flex-wrap: wrap;
             align-items: flex-end;
@@ -544,13 +547,13 @@
                 }
             }
 
-            & .actions {
+            .actions {
                 display: flex;
                 width: 100%;
                 margin: 1rem 0 0 0;
             }
 
-            & .sub-content-box {
+            .sub-content-box {
                 display: flex;
                 flex-direction: column;
                 margin-bottom: 1rem;
@@ -584,18 +587,18 @@
         }
     }
 
-    & .maps-wizard {
-        & .main-action-container.maps-selection {
+    .maps-wizard {
+        .main-action-container.maps-selection {
             width: 100%;
 
-            & .wizard-options-container {
+            .wizard-options-container {
                 display: flex;
                 justify-content: space-between;
                 flex-wrap: wrap;
                 width: 100%;
 
                 /* 3 or more items => 4 columns */
-                & .wizard-map-option-container {
+                .wizard-map-option-container {
                     flex: 0 0 22%;
                     padding: 1rem 1% 0;
                     margin: 1.5rem 0 0;
@@ -603,7 +606,7 @@
                 }
 
                 /* 1 child => 1 columns */
-                & .wizard-map-option-container:only-child {
+                .wizard-map-option-container:only-child {
                     flex: 0 0 100%;
                     padding: 1rem 0 0;
                     border: none;
@@ -611,7 +614,7 @@
 
                 /* 2 children => 2 columns */
                 .wizard-map-option-container:first-child:nth-last-child(2),
-                & .wizard-map-option-container:last-child:nth-child(2) {
+                .wizard-map-option-container:last-child:nth-child(2) {
                     flex: 0 0 47%;
                 }
 
@@ -622,13 +625,13 @@
             }
         }
 
-        & .checkbox-container {
+        .checkbox-container {
             display: flex;
             flex-direction: row;
             font-weight: var(--bold);
         }
 
-        & .wizard-options-container {
+        .wizard-options-container {
             padding: 0;
             margin-bottom: 1rem;
 
@@ -638,7 +641,7 @@
                 margin-right: 6px;
             }
 
-            & .wizard-map-option-container {
+            .wizard-map-option-container {
                 display: flex;
                 flex-direction: column;
                 list-style: none;
@@ -656,39 +659,39 @@
                 }
             }
 
-            & .wizard-option-container {
+            .wizard-option-container {
                 list-style: none;
                 margin-bottom: 1rem;
 
-                & .main-option {
+                .main-option {
                     display: inline-block;
                     cursor: pointer;
                 }
 
-                & .maps-wizard-option-content {
+                .maps-wizard-option-content {
                     display: none;
                     padding-left: 1.6rem;
                 }
 
                 &.active {
-                    & .maps-wizard-option-content {
+                    .maps-wizard-option-content {
                         display: block;
                     }
                 }
             }
         }
 
-        & .maps-wizard-form {
+        .maps-wizard-form {
             align-items: flex-start;
             flex-direction: column;
             justify-content: flex-start;
 
-            & .submit-container {
+            .submit-container {
                 display: flex;
             }
         }
 
-        & .sub-map-option-description {
+        .sub-map-option-description {
             display: flex;
             align-items: center;
 
@@ -697,7 +700,7 @@
             }
         }
 
-        & .sub-maps-container {
+        .sub-maps-container {
             display: block;
 
             &.hidden {
@@ -710,7 +713,7 @@
         }
     }
 
-    & .loading {
+    .loading {
         max-width: 50px;
 
         &.hidden {
@@ -718,7 +721,7 @@
         }
     }
 
-    & .entity-view, .entity-edit {
+    .entity-view, .entity-edit {
         & h2 {
             font-size: 22px;
             margin-bottom: 2rem;
@@ -726,7 +729,7 @@
             text-align: center;
         }
 
-        & .view-field, .edit-field {
+        .view-field, .edit-field {
             display: flex;
             justify-content: space-between;
             padding: 0;
@@ -765,11 +768,11 @@
             }
         }
 
-        & .view-field .field-value img {
+        .view-field .field-value img {
             max-width: 200px;
         }
 
-        & .edit-field {
+        .edit-field {
             & span, input {
                 &.field-value {
                     display: flex;
@@ -802,7 +805,7 @@
             }
         }
 
-        & .actions {
+        .actions {
             margin-top: 2rem;
             text-align: center;
 
@@ -810,7 +813,7 @@
                 display: inline;
             }
 
-            & .button {
+            .button {
                 display: inline-block;
                 margin: 0 0.5rem;
             }
@@ -818,9 +821,10 @@
     }
 
     .extra-actions {
-        display: block;
+        display: flex;
         width: 100%;
-        margin-top: 2rem;
+        justify-content: end;
+        margin: 1rem 0;
     }
 
     .cache-clean-form {
@@ -828,7 +832,7 @@
         text-align: center;
     }
 
-    & .extra-content-container, .default-room-container {
+    .extra-content-container, .default-room-container {
         display: flex;
         flex-direction: column;
         padding: 1rem 0;
@@ -840,11 +844,54 @@
         }
     }
 
-    & .association-maps-container {
+    .association-maps-container {
         display: block;
         width: 100%;
         max-height: 500px;
         overflow: auto;
     }
 
+    .cache-confirm-dialog {
+        border: none;
+        border-radius: 8px;
+        padding: 0;
+        max-width: 500px;
+        width: 90%;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .cache-confirm-dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .cache-dialog-content {
+        padding: 1rem;
+    }
+
+    .cache-dialog-content h5 {
+        margin: 0 0 1rem 0;
+        font-size: 18px;
+        color: var(--darkGrey);
+    }
+
+    .cache-dialog-content p {
+        margin: 0 0 1rem 0;
+        color: var(--darkGrey);
+    }
+
+    .cache-warning {
+        padding: 1rem;
+        background-color: #fff3cd;
+        border: 1px solid #ffeaa7;
+        border-radius: 4px;
+        color: #856404;
+        margin-bottom: 1rem;
+    }
+
+    .cache-dialog-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 1rem;
+    }
+
 }

package/admin/reldens-admin-client.js

@@ -276,4 +276,28 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // cache clear all functionality:
+    let cacheClearAllButton = document.querySelector('.cache-clear-all-button');
+    let cacheConfirmDialog = document.querySelector('.cache-confirm-dialog');
+    let cacheDialogCancel = document.querySelector('.cache-dialog-cancel');
+    let cacheClearForm = document.querySelector('.cache-clear-form');
+    if(cacheClearAllButton && cacheConfirmDialog){
+        cacheClearAllButton.addEventListener('click', () => {
+            cacheConfirmDialog.showModal();
+        });
+    }
+    if(cacheDialogCancel && cacheConfirmDialog){
+        cacheDialogCancel.addEventListener('click', () => {
+            cacheConfirmDialog.close();
+        });
+    }
+    if(cacheClearForm){
+        cacheClearForm.addEventListener('submit', (event) => {
+            let submitButton = cacheClearForm.querySelector('button[type="submit"]');
+            if(submitButton){
+                submitButton.disabled = true;
+            }
+        });
+    }
+
 });

package/admin/templates/clear-all-cache-button.html

@@ -0,0 +1,18 @@
+<button type="button" class="button button-warning cache-clear-all-button">
+    {{buttonText}}
+</button>
+<dialog class="cache-confirm-dialog">
+    <div class="cache-dialog-content">
+        <h5>{{confirmTitle}}</h5>
+        <p>{{confirmMessage}}</p>
+        <div class="alert cache-warning">
+            <strong>{{warningText}}</strong> {{warningMessage}}
+        </div>
+        <div class="cache-dialog-actions">
+            <button type="button" class="button button-secondary cache-dialog-cancel">{{cancelText}}</button>
+            <form method="post" action="{{clearAllCacheRoute}}" class="cache-clear-form">
+                <button type="submit" class="button button-danger">{{confirmText}}</button>
+            </form>
+        </div>
+    </div>
+</dialog>