♻️ #133 refactor some stuff around user preferences

src/application/components/menu/Menu.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script setup>
-import AboutTab from '@/application/components/menu/AboutTab/AboutTab.vue';
-import ConfigurationTab from '@/application/components/menu/ConfigurationTab/ConfigurationTab.vue';
-import SkinTab from '@/application/components/menu/SkinTab.vue';
+import AboutTab         from '@/application/components/menu/AboutTab/AboutTab.vue';
+import UserPreferenceTab from '@/application/components/menu/UserPreferencesTab/UserPreferenceTab.vue';
+import SkinTab          from '@/application/components/menu/SkinTab.vue';
 import Navlink from '@/application/ui/Navlink/Navlink.vue';
 import { shallowRef } from 'vue';
 
@@ -38,16 +38,16 @@ const tabs = [
   },
   {
     icon: 'icon-route',
-    label: 'Configuration',
-    component: ConfigurationTab
+    label: 'User preferences',
+    component: UserPreferenceTab
   },
   {
     icon: 'icon-route',
     label: 'About',
     component: AboutTab
   }
 ];
-const currentTab = shallowRef(AboutTab);
+const currentTab = shallowRef(UserPreferenceTab);
 </script>
 
 <style lang="scss">

src/application/components/menu/ConfigurationTab/ConfigurationList.vue → src/application/components/menu/UserPreferencesTab/UserPreferenceList.vue

@@ -4,10 +4,10 @@
       <div class="card bg-transparent">
         <div class="card-body p-0">
           <div class="list-group">
-            <ConfigurationListItemSwitch
+            <UserPreferenceListItemSwitch
               configuration-id="general_refresh_rate"
             />
-            <ConfigurationListItemSelect configuration-id="general_port" />
+            <UserPreferenceListItemSelect configuration-id="general_port" />
           </div>
         </div>
       </div>
@@ -16,8 +16,10 @@
 </template>
 
 <script setup>
-import ConfigurationListItemSelect from '@/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue';
-import ConfigurationListItemSwitch from '@/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue';
+import UserPreferenceListItemSelect
+  from "@/application/components/menu/UserPreferencesTab/UserPreferenceListItemSelect.vue";
+import UserPreferenceListItemSwitch
+  from "@/application/components/menu/UserPreferencesTab/UserPreferenceListItemSwitch.vue";
 </script>
 
 <style lang="scss" scoped></style>

src/application/components/menu/ConfigurationTab/ConfigurationListItem.vue → src/application/components/menu/UserPreferencesTab/UserPreferenceListItem.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script setup>
-import Tag from '@/application/ui/Tag/Tag.vue';
-import { retrieveConfigurationSettings } from '@/domain/configuration/configurationLibrary.util.js';
+import Tag                         from '@/application/ui/Tag/Tag.vue';
+import { findPreferenceEntryById } from '@/domain/user-preferences/preference-entry.util.js';
 
 const props = defineProps({
   configurationId: {
@@ -28,7 +28,7 @@ const props = defineProps({
   }
 });
 
-const configurationItem = retrieveConfigurationSettings(props.configurationId);
+const configurationItem = findPreferenceEntryById(props.configurationId);
 </script>
 
 <style lang="scss" scoped></style>

src/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue → src/application/components/menu/UserPreferencesTab/UserPreferenceListItemSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigurationListItem :configuration-id="configurationId">
+  <UserPreferenceListItem :configuration-id="configurationId">
     <select
       class="form-select form-select-sm"
       aria-label="Default select example"
@@ -9,11 +9,11 @@
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>
-  </ConfigurationListItem>
+  </UserPreferenceListItem>
 </template>
 
 <script setup>
-import ConfigurationListItem from '@/application/components/menu/ConfigurationTab/ConfigurationListItem.vue';
+import UserPreferenceListItem from "@/application/components/menu/UserPreferencesTab/UserPreferenceListItem.vue";
 
 defineProps({
   configurationId: {

src/application/components/menu/UserPreferencesTab/UserPreferenceListItemSwitch.vue

@@ -0,0 +1,19 @@
+<template>
+  <UserPreferenceListItem :configuration-id="configurationId">
+    <Switch />
+  </UserPreferenceListItem>
+</template>
+
+<script setup>
+import UserPreferenceListItem from "@/application/components/menu/UserPreferencesTab/UserPreferenceListItem.vue";
+import Switch                 from '@/application/ui/Switch/Switch.vue';
+
+defineProps({
+  configurationId: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/application/components/menu/UserPreferencesTab/UserPreferenceTab.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <UserPreferenceSearchBar />
+    <UserPreferenceList />
+  </div>
+</template>
+
+<script setup>
+import UserPreferenceList      from "@/application/components/menu/UserPreferencesTab/UserPreferenceList.vue";
+import UserPreferenceSearchBar from "@/application/components/menu/UserPreferencesTab/UserPreferenceSearchBar.vue";
+</script>
+
+<style lang="scss"></style>

src/application/uses/usePreferencesEntryLibrary.js

@@ -0,0 +1,32 @@
+import {
+  applyFiltersToPreferenceEntriesList,
+  convertJsonObjectToPreferenceEntry
+} from '@/domain/user-preferences/preference-entry.util.js';
+import { computed, reactive, readonly } from 'vue';
+import map from '@/domain/user-preferences/map.json';
+
+const state = reactive({
+  search: ''
+});
+
+const getters = {
+  search: computed(() => state.search),
+  configurationMatchWithSearch: computed(() =>
+    applyFiltersToPreferenceEntriesList(
+      {
+        label: state.search
+      },
+      map.map((configurationItem) =>
+        convertJsonObjectToPreferenceEntry(configurationItem)
+      )
+    )
+  )
+};
+
+const actions = {};
+
+export const usePreferencesEntryLibrary = () => ({
+  state: readonly(state),
+  ...getters,
+  ...actions
+});

src/domain/configuration/configurationLibrary.model.js → src/domain/user-preferences/PreferenceEntry.js

@@ -1,4 +1,4 @@
-export class ConfigurationLibrary {
+export class PreferenceEntry {
   constructor(id = '', target = '', label = '', description = '', values = []) {
     this.id = id;
     this.target = target;

src/domain/user-preferences/preference-entry.util.js

@@ -0,0 +1,40 @@
+import map from '@/domain/user-preferences/map.json';
+import { PreferenceEntry } from '@/domain/user-preferences/PreferenceEntry.js';
+
+export const findPreferenceEntryById = (preferenceEntryId) => {
+  const matches = map.filter(
+    (preferenceEntry) => preferenceEntry.id === preferenceEntryId
+  );
+
+  if (matches.length !== 1)
+    throw new Error(
+      `Unable to find ${preferenceEntryId} on preference entries list`
+    );
+
+  return matches.at(0);
+};
+
+export const applyFiltersToPreferenceEntriesList = (filters, list) => {
+  return list.filter((preferenceEntry) => {
+    const filterMatches = [true];
+
+    if (Object.hasOwn(filters, 'label') && filters.label.length !== 0) {
+      filterMatches.push(
+        preferenceEntry.label
+          .toLowerCase()
+          .includes(filters.label.toLowerCase())
+      );
+    }
+
+    if (Object.hasOwn(filters, 'target') && filters.target.length !== 0) {
+      filterMatches.push(
+        preferenceEntry.target.includes(filters.target.toLowerCase())
+      );
+    }
+
+    return filterMatches.every((match) => match);
+  });
+};
+
+export const convertJsonObjectToPreferenceEntry = (json) =>
+  Object.assign(new PreferenceEntry(), json);

src/domain/configuration/configurationLibrary.util.spec.js → src/domain/user-preferences/preference-entry.util.spec.js

@@ -17,7 +17,7 @@ jest.mock('@/domain/configuration/configuration.library.json', () => [
   existingConfiguration
 ]);
 
-import { retrieveConfigurationSettings } from '@/domain/configuration/configurationLibrary.util.js';
+import { retrieveConfigurationSettings } from '@/domain/user-preferences/configurationLibrary.util.js';
 
 beforeEach(() => {
   jest.resetModules();