Code cleanup & small improvements & renaming [SLE-192]

samuelgfeller · Apr 5, 2024 · afe6aae · afe6aae
1 parent c1383ea
commit afe6aae
Show file tree

Hide file tree

Showing 50 changed files with 197 additions and 173 deletions.
diff --git a/config/container.php b/config/container.php
@@ -143,7 +143,7 @@
         $settings = $container->get('settings');
         $rendererSettings = $settings['renderer'];
 
-        /** Global attributes are set in @see PhpRendererMiddleware */
+        /** Global attributes are set in @see PhpViewMiddleware */
         return new PhpRenderer($rendererSettings['path']);
     },
 

diff --git a/config/env/env.dev.php b/config/env/env.dev.php
@@ -9,7 +9,7 @@
  */
 
 // Set false to show production error pages
-$settings['dev'] = false;
+$settings['dev'] = true;
 
 // For the that the error is not caught by custom error handler (below)
 ini_set('display_errors', $settings['dev'] ? '1' : '0');

diff --git a/config/middleware.php b/config/middleware.php
@@ -3,7 +3,7 @@
 use App\Application\Middleware\ForbiddenExceptionMiddleware;
 use App\Application\Middleware\InvalidOperationExceptionMiddleware;
 use App\Application\Middleware\NonFatalErrorHandlerMiddleware;
-use App\Application\Middleware\PhpRendererMiddleware;
+use App\Application\Middleware\PhpViewMiddleware;
 use App\Application\Middleware\ValidationExceptionMiddleware;
 use Odan\Session\Middleware\SessionStartMiddleware;
 use Selective\BasePath\BasePathMiddleware;
@@ -21,7 +21,7 @@
 
     // * Put everything possible before PhpViewExtensionMiddleware as if there is an error in a middleware,
     // * the error page (and layout as well as everything else) needs this middleware loaded to work.
-    $app->add(PhpRendererMiddleware::class);
+    $app->add(PhpViewMiddleware::class);
 
     // Retrieve and store ip address, user agent and user id (has to be BEFORE SessionStartMiddleware as it is using it
     // but after PhpViewExtensionMiddleware as it needs the user id)

diff --git a/public/assets/client/list/client-list-profile-card.html.js b/public/assets/client/list/client-list-profile-card.html.js
@@ -62,50 +62,50 @@ export function getClientProfileCardHtml(client, allUsers, allStatuses) {
 }
 
 export function getClientProfileCardLoadingPlaceholderHtml() {
-    return `<div class="client-profile-card-loading-placeholder">
-        <div class="client-profile-card-loading-placeholder-header">
-            <div class="client-profile-card-avatar-age-loading-placeholder">
-                <div class="client-profile-card-avatar-loading-placeholder">
+    return `<div class="client-profile-card-skeleton-loader">
+        <div class="client-profile-card-skeleton-loader-header">
+            <div class="client-profile-card-avatar-age-skeleton-loader">
+                <div class="client-profile-card-avatar-skeleton-loader">
                     <!-- Avatar-->
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
                 <!-- Age -->
-                <div class="client-profile-card-age-loading-placeholder">
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+                <div class="client-profile-card-age-skeleton-loader">
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
             </div>
 
         </div>
-        <div class="client-profile-card-loading-placeholder-body">
+        <div class="client-profile-card-skeleton-loader-body">
             <!-- CSS Grid -->
-            <div class="client-profile-card-name-loading-placeholder">
-                <div class="moving-loading-placeholder-part-wrapper">
-                    <div class="moving-loading-placeholder-part"></div>
+            <div class="client-profile-card-name-skeleton-loader">
+                <div class="moving-skeleton-loader-part-wrapper">
+                    <div class="moving-skeleton-loader-part"></div>
                 </div>
             </div>
-            <div class="client-profile-card-loading-placeholder-infos-container">
-                <div class="client-profile-card-location-loading-placeholder">
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+            <div class="client-profile-card-skeleton-loader-infos-container">
+                <div class="client-profile-card-location-skeleton-loader">
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
-                <div class="client-profile-card-phone-nr-loading-placeholder">
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+                <div class="client-profile-card-phone-nr-skeleton-loader">
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
-                <div class="client-profile-card-assignee-loading-placeholder">
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+                <div class="client-profile-card-assignee-skeleton-loader">
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
-                <div class="client-profile-card-status-loading-placeholder">
-                    <div class="moving-loading-placeholder-part-wrapper">
-                        <div class="moving-loading-placeholder-part"></div>
+                <div class="client-profile-card-status-skeleton-loader">
+                    <div class="moving-skeleton-loader-part-wrapper">
+                        <div class="moving-skeleton-loader-part"></div>
                     </div>
                 </div>
             </div>

diff --git a/public/assets/client/list/client-list-skeleton-loader.css b/public/assets/client/list/client-list-skeleton-loader.css
@@ -5,36 +5,36 @@
 /* mobile first min-width sets base and content is adapted to computers. */
 @media (min-width: 100px) {
     /*Client profile card*/
-    .client-profile-card-loading-placeholder {
+    .client-profile-card-skeleton-loader {
         height: calc(266px * var(--card-placeholder-scale));
         width: 100%;
         min-width: calc(232px * var(--card-placeholder-scale));
         padding: calc(20px * var(--card-placeholder-scale));
         border-radius: calc(30px * var(--card-placeholder-scale));
         /* Change card to look good for preloading */
-        background: var(--background-light-accent-color);
+        background: var(--background-accent-1-color);
     }
 
-    .client-profile-card-loading-placeholder-header {
+    .client-profile-card-skeleton-loader-header {
         height: calc(115px * var(--card-placeholder-scale));
     }
 
     /*Avatar and age container*/
-    .client-profile-card-avatar-age-loading-placeholder {
+    .client-profile-card-avatar-age-skeleton-loader {
         margin: auto;
         width: calc(100px * var(--card-placeholder-scale));
         height: calc(100px * var(--card-placeholder-scale));
         position: relative;
     }
 
-    .client-profile-card-avatar-loading-placeholder {
+    .client-profile-card-avatar-skeleton-loader {
         width: 100%;
         height: 100%;
         border-radius: 99px;
         overflow: hidden;
     }
 
-    .client-profile-card-age-loading-placeholder {
+    .client-profile-card-age-skeleton-loader {
         width: calc(35px * var(--card-placeholder-scale));
         height: calc(35px * var(--card-placeholder-scale));
         right: calc(-20px * var(--card-placeholder-scale));
@@ -45,19 +45,19 @@
         z-index: 11;
     }
 
-    .client-profile-card-loading-placeholder-body {
+    .client-profile-card-skeleton-loader-body {
         height: 94px;
         margin-bottom: 16px;
     }
 
     /*Name*/
-    .client-profile-card-name-loading-placeholder {
+    .client-profile-card-name-skeleton-loader {
         width: 75%;
         margin: auto;
         height: calc(27px * var(--card-placeholder-scale));
     }
 
-    .client-profile-card-loading-placeholder-infos-container {
+    .client-profile-card-skeleton-loader-infos-container {
         display: grid;
         grid-template-columns: 37% 55%;
         grid-template-rows: auto;
@@ -66,27 +66,27 @@
     }
 
     /*Location*/
-    .client-profile-card-location-loading-placeholder {
+    .client-profile-card-location-skeleton-loader {
         height: calc(25px * var(--card-placeholder-scale));
         margin-top: calc(15px * var(--card-placeholder-scale));
     }
 
     /*Phone nr*/
-    .client-profile-card-phone-nr-loading-placeholder {
+    .client-profile-card-phone-nr-skeleton-loader {
         height: calc(25px * var(--card-placeholder-scale));
         margin-top: calc(15px * var(--card-placeholder-scale));
     }
 
     /*Assignee select*/
-    .client-profile-card-assignee-loading-placeholder {
+    .client-profile-card-assignee-skeleton-loader {
         height: calc(30px * var(--card-placeholder-scale));
         margin-top: calc(11px * var(--card-placeholder-scale));
         border-radius: 99px;
         overflow: hidden;
     }
 
     /*Status select*/
-    .client-profile-card-status-loading-placeholder {
+    .client-profile-card-status-skeleton-loader {
         height: calc(30px * var(--card-placeholder-scale));
         margin-top: calc(11px * var(--card-placeholder-scale));
         border-radius: 99px;
@@ -96,17 +96,17 @@
 
 /* After very small phones (iPhone 4) for medium phones to big phones to bigger */
 @media (min-width: 337px) {
-    .client-profile-card-loading-placeholder-infos-container {
+    .client-profile-card-skeleton-loader-infos-container {
         grid-template-columns: 33% 49%;
     }
 }
 
 @media (min-width: 641px) {
-    .client-profile-card-loading-placeholder-infos-container {
+    .client-profile-card-skeleton-loader-infos-container {
         grid-template-columns: calc(90px * var(--card-placeholder-scale)) calc(120px * var(--card-placeholder-scale));
     }
 
-    .client-profile-card-loading-placeholder {
+    .client-profile-card-skeleton-loader {
         width: calc(280px * var(--card-placeholder-scale));
     }
 }

diff --git a/public/assets/client/list/client-list.css b/public/assets/client/list/client-list.css
@@ -71,7 +71,7 @@
         /*More padding on the right side for mobile because of the age circle top right of the avatar*/
         padding: 20px 20px 5px 20px;
         /*background: #d7b9b9;*/
-        background: var(--background-light-accent-color);
+        background: var(--background-accent-1-color);
         /*width: 100%;*/
     }
 
@@ -82,7 +82,7 @@
         margin: auto;
         position: relative;
         /*background: rgba(0,0,0,.1);*/
-        background: var(--background-accent-2-color);
+        background: var(--background-accent-4-color);
         border-radius: 99px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
         padding: 5px;
@@ -113,7 +113,7 @@
 
     .profile-card-content {
         padding: 0 20px 20px 20px;
-        background: var(--background-accent-3-color);
+        background: var(--background-accent-5-color);
         width: 100%;
         /*position: relative; makes outline hidden behind content which is unwanted */
         font-size: 16px;

diff --git a/public/assets/client/note/client-note.css b/public/assets/client/note/client-note.css
@@ -21,7 +21,7 @@
         border: none;
         width: 100%;
         font-size: 15px;
-        background: var(--background-accent-color);
+        background: var(--background-accent-2-color);
         padding: 15px 45px 15px 25px;
         line-height: 21px;
         /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/

diff --git a/public/assets/client/note/client-read-note-event-listener-setup.js b/public/assets/client/note/client-read-note-event-listener-setup.js
@@ -196,7 +196,7 @@ export function addHideNoteBtnEventListener(btn) {
         submitUpdate(
             {hidden: newHiddenValue}, `notes/${noteId}`,
             btn.closest('.note-container').id
-        ).then(r => {}).catch(errorMsg => {
+        ).then(r => {}).catch(exception => {
             // Revert eye to how it was before on failure
             toggleEyeIcon();
         });

diff --git a/public/assets/client/note/client-read-note-loading.js b/public/assets/client/note/client-read-note-loading.js
@@ -2,7 +2,7 @@ import {getNoteHtml} from "./client-read-template-note.html.js?v=0.4.0";
 import {
     displayClientNoteLoadingPlaceholder,
     removeClientNoteContentPlaceholder
-} from "./client-read-note-loading-placeholder.js?v=0.4.0";
+} from "./client-read-note-skeleton-loader.js?v=0.4.0";
 import {fetchData} from "../../general/ajax/fetch-data.js?v=0.4.0";
 import {initNotesEventListeners} from "./client-read-note-event-listener-setup.js?v=0.4.0";
 import {

diff --git a/...e/client-read-note-loading-placeholder.js → .../note/client-read-note-skeleton-loader.js b/...e/client-read-note-loading-placeholder.js → .../note/client-read-note-skeleton-loader.js
@@ -25,7 +25,7 @@ export function removeClientNoteContentPlaceholder(wrapperId = null) {
     let noteContainer = document.getElementById(wrapperId ?? 'client-note-wrapper');
 
     // I had a very strange issue. With getElementsByClassName I got 3 elements but only 2 seem to be looped through
-    let contentPlaceholders = noteContainer.querySelectorAll('.client-note-loading-placeholder');
+    let contentPlaceholders = noteContainer.querySelectorAll('.client-note-skeleton-loader');
     // Foreach loop over content placeholders
     for (let contentPlaceholder of contentPlaceholders) {
         // remove from DOM

diff --git a/public/assets/client/note/client-read-template-note.html.js b/public/assets/client/note/client-read-template-note.html.js
@@ -42,33 +42,33 @@ export function getNoteHtml(note) {
 }
 
 export function getClientNoteLoadingPlaceholderHtml() {
-    return `<div class="client-note-loading-placeholder">
+    return `<div class="client-note-skeleton-loader">
     <!-- Note label container-->
     <div class="client-note-upper-placeholder-container">
         <!-- Date and time -->
         <div class="client-note-top-left-placeholder">
-            <div class="moving-loading-placeholder-part-wrapper">
-                <div class="moving-loading-placeholder-part"></div>
+            <div class="moving-skeleton-loader-part-wrapper">
+                <div class="moving-skeleton-loader-part"></div>
             </div>
         </div>
         <!-- Note autor -->
         <div class="client-note-top-right-placeholder">
-            <div class="moving-loading-placeholder-part-wrapper">
-                <div class="moving-loading-placeholder-part"></div>
+            <div class="moving-skeleton-loader-part-wrapper">
+                <div class="moving-skeleton-loader-part"></div>
             </div>
         </div>
     </div>
     <!-- Textarea container-->
     <div class="client-note-lower-placeholder-container">
         <!-- Text line inside textarea container -->
         <div class="text-line-skeleton-loader client-note-first-text-line-placeholder">
-            <div class="moving-loading-placeholder-part-wrapper">
-                <div class="moving-loading-placeholder-part"></div>
+            <div class="moving-skeleton-loader-part-wrapper">
+                <div class="moving-skeleton-loader-part"></div>
             </div>
         </div>
         <div class="text-line-skeleton-loader client-note-second-text-line-placeholder">
-            <div class="moving-loading-placeholder-part-wrapper">
-                <div class="moving-loading-placeholder-part"></div>
+            <div class="moving-skeleton-loader-part-wrapper">
+                <div class="moving-skeleton-loader-part"></div>
             </div>
         </div>
     </div>

diff --git a/public/assets/client/read/client-read-note-skeleton-loader.css b/public/assets/client/read/client-read-note-skeleton-loader.css
@@ -1,7 +1,7 @@
 /*This file is in the skeleton-loader folder and not the client-read folder to be found faster and serve as
 inspiration when creating new content placeholder*/
 
-.client-note-loading-placeholder {
+.client-note-skeleton-loader {
     width: 100%;
     min-width: 232px;
     border-radius: 30px;
@@ -29,7 +29,7 @@ inspiration when creating new content placeholder*/
     margin-top: 10px;
     height: 85px;
     width: 100%;
-    background: var(--background-light-accent-color);
+    background: var(--background-accent-1-color);
     border-radius: 30px;
 }
 

diff --git a/public/assets/client/read/client-read.css b/public/assets/client/read/client-read.css
@@ -10,7 +10,7 @@
     --vigilance-low: 0 0 5px 4px rgb(189, 177, 44);
     --vigilance-medium: 0 0 5px 4px rgb(178, 127, 18);
     --vigilance-high: 0 0 5px 4px rgb(169, 62, 26);
-    --add-personal-info-icon-background: var(--background-accent-color);
+    --add-personal-info-icon-background: var(--background-accent-2-color);
     --add-personal-info-icon-box-shadow: 0 0px 9px rgba(123, 197, 255, 0.12);
 }
 
@@ -71,7 +71,7 @@
         padding: 15px 45px 15px 25px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         /*box-shadow: 0 0px 20px 10px #ffdfa3;*/
-        background: var(--background-accent-color);
+        background: var(--background-accent-2-color);
         /*background: #2e3e50;*/
         color: var(--primary-text-color);
         font-size: 18px;

diff --git a/public/assets/client/update/client-update-contenteditable.js b/public/assets/client/update/client-update-contenteditable.js
@@ -139,8 +139,14 @@ function saveClientValueAndDisableContentEditable(field) {
                 field.closest('a').href = `tel:${submitValue}`;
             }
         }
-    }).catch(errorMsg => {
-        // If request not successful, make field editable again
-        makeClientFieldEditable.call(field);
+    }).catch(exception => {
+        // If error message contains 422 in the string, make the field editable again
+        if (exception.message.includes('422')) {
+            makeClientFieldEditable.call(field);
+            return;
+        }
+
+        // If it's a server error, let the user read the error flash message and reloaded the page in 3 seconds
+        setTimeout(() => { location.reload(); }, 3000);
     });
 }