From abd310f5684d2642a06bb5f85c751ecd542cfd47 Mon Sep 17 00:00:00 2001
From: Severino <severin.opel@outlook.com>
Date: Wed, 25 Oct 2023 10:14:35 +0200
Subject: [PATCH] set disabled on pref

---
 resources/js/components/BibliographyTable.vue | 11 +++++--
 resources/js/components/CommentList.vue       |  6 ++--
 resources/js/components/Roles.vue             |  2 +-
 resources/js/components/UserPreferences.vue   | 30 ++++++++++++-------
 resources/js/components/preferences/Color.vue |  2 +-
 .../js/components/preferences/Columns.vue     |  3 ++
 .../js/components/preferences/GuiLanguage.vue |  1 +
 .../components/preferences/MapProjection.vue  |  1 +
 .../preferences/ProjectMaintainer.vue         |  3 ++
 .../js/components/preferences/ProjectName.vue |  1 +
 resources/js/components/preferences/Tags.vue  |  1 +
 .../components/preferences/ThesaurusLink.vue  |  1 +
 .../_variables-override-dark_unrounded.scss   | 15 ++++++++++
 13 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/BibliographyTable.vue b/resources/js/components/BibliographyTable.vue
index 54479d1ff..067d8b2d8 100644
--- a/resources/js/components/BibliographyTable.vue
+++ b/resources/js/components/BibliographyTable.vue
@@ -461,8 +461,14 @@
                         </td>
                         <td>
                             <div class="dropdown">
-                                <span id="dropdownMenuButton" class="clickable" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <i class="fas fa-fw fa-ellipsis-vertical"></i>
+                                <span
+                                    id="dropdownMenuButton"
+                                    class="clickable"
+                                    data-bs-toggle="dropdown"
+                                    aria-haspopup="true"
+                                    aria-expanded="false"
+                                >
+                                    <i class="fas fa-fw fa-ellipsis-vertical" />
                                 </span>
                                 <div
                                     class="dropdown-menu overlay-all"
@@ -692,7 +698,6 @@
                             return false;
                         });
                     }
-                    
                     const size = Math.min(state.entriesLoaded, filteredEntries.length);
                     return _orderBy(filteredEntries, state.orderColumn, state.orderType).slice(0, size);
                 })
diff --git a/resources/js/components/CommentList.vue b/resources/js/components/CommentList.vue
index a708b0d1a..929f4494f 100644
--- a/resources/js/components/CommentList.vue
+++ b/resources/js/components/CommentList.vue
@@ -1,4 +1,5 @@
 <template>
+    <!-- eslint-disable vue/no-v-html-->
     <div :class="classes">
         <div :class="listClasses">
             <div v-show="!state.commentsHidden">
@@ -150,12 +151,13 @@
                                         v-if="comment.content"
                                         class="card-body px-3 py-2"
                                     >
-                                        <!-- eslint-disable -->
+                                        <!-- TODO; Here we insert user input into the comment. This is bad!-->
+                                        <!-- eslint-disable vue/no-v-html -->
                                         <p
                                             class="card-text"
                                             v-html="mentionify(comment.content)"
                                         />
-                                        <!-- eslint-enable -->
+                                        <!-- eslint-enable vue/no-v-html -->
                                     </div>
                                 </slot>
                                 <slot
diff --git a/resources/js/components/Roles.vue b/resources/js/components/Roles.vue
index a26be40f4..f4c714998 100644
--- a/resources/js/components/Roles.vue
+++ b/resources/js/components/Roles.vue
@@ -120,7 +120,7 @@
                                 <div
                                     class="dropdown-menu"
                                     :aria-labelledby="`role-options-dropdown-${role.id}`"
-                                >
+                                > 
                                     <a
                                         v-if="roleDirty(role.id)"
                                         class="dropdown-item"
diff --git a/resources/js/components/UserPreferences.vue b/resources/js/components/UserPreferences.vue
index fcc168ad5..e7ffbbf76 100644
--- a/resources/js/components/UserPreferences.vue
+++ b/resources/js/components/UserPreferences.vue
@@ -44,14 +44,10 @@
                         <td>
                             <component 
                                 :is="preferencesBlock.component"
-                                v-if="preferencesBlock.data === 'v-model'"
-                                v-model="state.preferences[preferencesBlock.label]"
-                                @changed="value => trackChanges(preferencesBlock.label, value)"
-                            />
-                            <component 
-                                :is="preferencesBlock.component"
-                                v-else
-                                :data="state.preferences[preferencesBlock.label]"
+                                :model-value="(preferencesBlock.data === 'v-model') ? state.preferences[preferencesBlock.label] : null"
+                                :readonly="!state.overrides[preferencesBlock.label]"
+                                :data="(preferencesBlock.data === undefined) ? state.preferences[preferencesBlock.label] : null"
+                                @update:model-value="value => updateValue(preferencesBlock, value)"
                                 @changed="e => trackChanges(preferencesBlock.label, e)"
                             /> 
                         </td>
@@ -126,6 +122,13 @@
                     state.dirtyData[label].value = data;
                 }
             };
+
+            const updateValue = (preferencesBlock, data) => {
+                if(preferencesBlock.data === 'v-model') {
+                    state.preferences[preferencesBlock.label] = data;
+                }
+            };  
+
             const savePreferences = _ => {
                 if(!state.hasDirtyData) return;
 
@@ -145,9 +148,13 @@
                      * 
                      * Otherwise there will be an 'array to text conversion' error -SO
                      */
-                    if(label == 'prefs.map-projection') {
-                        dirtyData.value = JSON.stringify(dirtyData.value);
-                    }
+                    // if(label == 'prefs.map-projection') {
+                    //     dirtyData.value = JSON.stringify(dirtyData.value);
+                    // }
+
+                    // if(label == 'prefs.project-maintainer') {
+                    //     dirtyData.value = JSON.stringify(dirtyData.value);
+                    // }
                 }
                 const data = {
                     changes: Object.values(state.dirtyData),
@@ -251,6 +258,7 @@
                 // LOCAL
                 trackChanges,
                 savePreferences,
+                updateValue,
                 // PROPS
                 // STATE
                 state,
diff --git a/resources/js/components/preferences/Color.vue b/resources/js/components/preferences/Color.vue
index 7cdaafd15..c2417eb77 100644
--- a/resources/js/components/preferences/Color.vue
+++ b/resources/js/components/preferences/Color.vue
@@ -13,7 +13,7 @@
                 :filterResults="true"
                 :options="state.colorList"
                 :searchable="true"
-                :readonly="readonly"
+                :disabled="readonly"
                 :placeholder="t('global.select.placeholder')"
                 @change="onChange"
             >
diff --git a/resources/js/components/preferences/Columns.vue b/resources/js/components/preferences/Columns.vue
index 00fb43506..9d3790cfd 100644
--- a/resources/js/components/preferences/Columns.vue
+++ b/resources/js/components/preferences/Columns.vue
@@ -10,6 +10,7 @@
                 v-model="data.left"
                 class="form-control"
                 type="number"
+                :disabled="readonly"
                 min="0"
                 :max="state.maxLeft"
                 :readonly="readonly"
@@ -28,6 +29,7 @@
                 v-model="data.center"
                 class="form-control"
                 type="number"
+                :disabled="readonly"
                 min="0"
                 :max="state.maxCenter"
                 :readonly="readonly"
@@ -46,6 +48,7 @@
                 v-model="data.right"
                 class="form-control"
                 type="number"
+                :disabled="readonly"
                 min="0"
                 :max="state.maxRight"
                 :readonly="readonly"
diff --git a/resources/js/components/preferences/GuiLanguage.vue b/resources/js/components/preferences/GuiLanguage.vue
index 1f17b4deb..417782724 100644
--- a/resources/js/components/preferences/GuiLanguage.vue
+++ b/resources/js/components/preferences/GuiLanguage.vue
@@ -10,6 +10,7 @@
                 :filterResults="true"
                 :options="state.languageList"
                 :searchable="true"
+                :disabled="readonly"
                 :readonly="readonly"
                 :placeholder="t('global.select.placeholder')"
                 @change="onChange"
diff --git a/resources/js/components/preferences/MapProjection.vue b/resources/js/components/preferences/MapProjection.vue
index 56b6543ff..d5fff1409 100644
--- a/resources/js/components/preferences/MapProjection.vue
+++ b/resources/js/components/preferences/MapProjection.vue
@@ -11,6 +11,7 @@
                 min="0"
                 max="99999"
                 step="1"
+                :disabled="readonly"
                 :readonly="readonly"
                 @input="onChange"
             >
diff --git a/resources/js/components/preferences/ProjectMaintainer.vue b/resources/js/components/preferences/ProjectMaintainer.vue
index 363f225dc..26b7b3292 100644
--- a/resources/js/components/preferences/ProjectMaintainer.vue
+++ b/resources/js/components/preferences/ProjectMaintainer.vue
@@ -5,6 +5,7 @@
             <input
                 v-model="localData.name"
                 class="form-control"
+                :disabled="readonly"
                 type="text"
                 :readonly="readonly"
                 @input="onChange"
@@ -17,6 +18,7 @@
             <input
                 v-model="localData.email"
                 class="form-control"
+                :disabled="readonly"
                 type="text"
                 :readonly="readonly"
                 @input="onChange"
@@ -29,6 +31,7 @@
             <textarea
                 v-model="localData.description"
                 class="form-control"
+                :disabled="readonly"
                 rows="1"
                 :readonly="readonly"
                 @input="onChange"
diff --git a/resources/js/components/preferences/ProjectName.vue b/resources/js/components/preferences/ProjectName.vue
index 4ecc4e38a..820f9a0d3 100644
--- a/resources/js/components/preferences/ProjectName.vue
+++ b/resources/js/components/preferences/ProjectName.vue
@@ -6,6 +6,7 @@
                 :value="modelValue"
                 class="form-control"
                 type="text"
+                :disabled="readonly"
                 :readonly="readonly"
                 @input="onInput"
             >
diff --git a/resources/js/components/preferences/Tags.vue b/resources/js/components/preferences/Tags.vue
index 44e3f1b62..5db55eb55 100644
--- a/resources/js/components/preferences/Tags.vue
+++ b/resources/js/components/preferences/Tags.vue
@@ -6,6 +6,7 @@
                 :value="data"
                 class="form-control"
                 type="text"
+                :disabled="readonly"
                 :readonly="readonly"
                 @input="onChange"
             >
diff --git a/resources/js/components/preferences/ThesaurusLink.vue b/resources/js/components/preferences/ThesaurusLink.vue
index 6ea5f2101..c76a5b9e4 100644
--- a/resources/js/components/preferences/ThesaurusLink.vue
+++ b/resources/js/components/preferences/ThesaurusLink.vue
@@ -7,6 +7,7 @@
                 class="form-control"
                 type="text"
                 :readonly="readonly"
+                :disabled="readonly"
                 @input="onChange"
             >
         </div>
diff --git a/resources/sass/_variables-override-dark_unrounded.scss b/resources/sass/_variables-override-dark_unrounded.scss
index 589632593..dfafa384a 100644
--- a/resources/sass/_variables-override-dark_unrounded.scss
+++ b/resources/sass/_variables-override-dark_unrounded.scss
@@ -37,6 +37,10 @@ $brand-danger: $red;
 // Corners
 $enable-rounded: false;
 
+// Inputs
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-color: $gray-400 !default;
+
 
 // Addons
 
@@ -49,11 +53,20 @@ $enable-rounded: false;
 .multiselect {
     --ms-bg: $gray-100;
     color: $gray-600;
+
     @if not $enable-rounded {
         --ms-radius: 0px;
     }
 }
 
+.multiselect.is-disabled {
+    --ms-bg-disabled: #{$input-disabled-bg};
+    --ms-color-disabled: #{$input-disabled-color};
+
+    color: var(--ms-color-disabled) !important;
+    border-color: #{$input-disabled-color} !important;
+}
+
 .multiselect-search {
     --ms-placeholder-color: $gray-600;
 }
@@ -63,6 +76,7 @@ $enable-rounded: false;
     --ms-tag-color: #{$gray-600};
     --ms-tag-bg-disabled: #{$gray-400};
     --ms-tag-color-disabled: #{$gray-600};
+
     @if not $enable-rounded {
         --ms-tag-radius: 0px;
     }
@@ -71,6 +85,7 @@ $enable-rounded: false;
 .multiselect-dropdown {
     --ms-dropdown-border-color: #{$gray-300};
     --ms-dropdown-bg: #{$gray-100};
+
     @if not $enable-rounded {
         --ms-dropdown-radius: 0px;
     }