From dffa40a5132b1516a9d9846de1bcf77c90e86bc7 Mon Sep 17 00:00:00 2001
From: JAGFx <contact@jagfx.fr>
Date: Thu, 28 Jul 2022 08:44:09 +0200
Subject: [PATCH] :sparkles: #133 add configuration menu section with real data

---
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 .../components/menu/ConfigurationTab.vue      | 112 ------------------
 .../ConfigurationTab/ConfigurationList.vue    |  23 ++++
 .../ConfigurationListItem.vue                 |  34 ++++++
 .../ConfigurationListItemSelect.vue           |  26 ++++
 .../ConfigurationListItemSwitch.vue           |  19 +++
 .../ConfigurationSearchBar.vue                |  53 +++++++++
 .../ConfigurationTab/ConfigurationTab.vue     |  13 ++
 src/application/components/menu/Menu.vue      |   2 +-
 .../uses/useConfigurationLibrary.js           |  32 +++++
 src/assets/scss/menu/_menu-tab-config.scss    |   2 +-
 src/components/menu/MenuTabConfig.vue         |   6 +-
 .../configuration/configuration.library.json  |  36 ++++++
 .../configurationLibrary.model.js             |   9 ++
 .../configurationLibrary.util.js              |  38 ++++++
 .../configurationLibrary.util.spec.js         |  34 ++++++
 17 files changed, 324 insertions(+), 117 deletions(-)
 delete mode 100644 src/application/components/menu/ConfigurationTab.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationList.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationListItem.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationSearchBar.vue
 create mode 100644 src/application/components/menu/ConfigurationTab/ConfigurationTab.vue
 create mode 100644 src/application/uses/useConfigurationLibrary.js
 create mode 100644 src/domain/configuration/configuration.library.json
 create mode 100644 src/domain/configuration/configurationLibrary.model.js
 create mode 100644 src/domain/configuration/configurationLibrary.util.js
 create mode 100644 src/domain/configuration/configurationLibrary.util.spec.js

diff --git a/package-lock.json b/package-lock.json
index c164d53e..13762ce4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "yaml-loader": "0.6.0"
       },
       "devDependencies": {
+        "@jest/globals": "^28.1.3",
         "@modyfi/vite-plugin-yaml": "^1.0.2",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vue/cli-service": "^5.0.8",
diff --git a/package.json b/package.json
index 2b151eef..8f21d9cc 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "yaml-loader": "0.6.0"
   },
   "devDependencies": {
+    "@jest/globals": "^28.1.3",
     "@modyfi/vite-plugin-yaml": "^1.0.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/cli-service": "^5.0.8",
diff --git a/src/application/components/menu/ConfigurationTab.vue b/src/application/components/menu/ConfigurationTab.vue
deleted file mode 100644
index 258a9829..00000000
--- a/src/application/components/menu/ConfigurationTab.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div>
-    <div class="row my-2 configuration-tab">
-      <div class="col-12">
-        <!--        <div class="d-flex-center-center">-->
-        <div class="input-group">
-          <input
-            type="search"
-            class="form-control bg-acrylic"
-            placeholder="Type to search..."
-          />
-<!--          <button-->
-<!--            class="btn btn-acrylic dropdown-toggle d-flex-center-center px-2 py-1 m-0 d-flex-center-center"-->
-<!--            type="button"-->
-<!--            data-bs-toggle="dropdown"-->
-<!--            aria-expanded="false"-->
-<!--          >-->
-<!--            <i class="icon-endpoint"></i>-->
-<!--          </button>-->
-<!--          <ul class="dropdown-menu">-->
-<!--            <li>-->
-<!--              <Tag>#jagfx</Tag>-->
-<!--            </li>-->
-<!--            <li>-->
-<!--              <Tag>#jagfx</Tag>-->
-<!--            </li>-->
-<!--            <li>-->
-<!--              <Tag>#jagfx</Tag>-->
-<!--            </li>-->
-<!--          </ul>-->
-          <button
-            class="btn btn-acrylic px-2 py-1 pe-3 m-0 d-flex-center-center"
-            type="button"
-          >
-            <i class="icon-location_arrow"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-<!--    <div class="row my-2 configuration-tab">-->
-<!--      <div class="col d-flex justify-content-start align-items-center">-->
-<!--        <Tag>#jagfx</Tag>-->
-<!--        <Tag>#jagfx</Tag>-->
-<!--        <Tag>#jagfx</Tag>-->
-<!--        <div class="d-flex-center-center text-muted mx-1">-->
-<!--          <i class="icon-endpoint"></i>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-    <div class="row my-2 h-100 configuration-tab">
-      <div class="col">
-        <div class="card bg-transparent">
-          <div class="card-body p-0">
-            <div class="list-group">
-              <div class="list-group-item bg-acrylic light text-white">
-                <div class="d-flex-center-center">
-                  <div
-                    class="d-flex justify-content-center align-items-start flex-column w-100"
-                  >
-                    <div
-                      class="d-flex justify-content-start align-items-center"
-                    >
-                      <Tag class="ms-0">#jagfx</Tag>
-                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
-                    </div>
-                    <small class="text-muted">Lorem ipsum dolor.</small>
-                  </div>
-                  <div>
-                    <Switch />
-                  </div>
-                </div>
-              </div>
-              <div class="list-group-item bg-acrylic light text-white">
-                <div class="d-flex-center-center">
-                  <div
-                    class="d-flex justify-content-center align-items-start flex-column w-100"
-                  >
-                    <div
-                      class="d-flex justify-content-start align-items-center"
-                    >
-                      <Tag class="ms-0">#unit</Tag>
-                      <span class="mx-1">Lorem ipsum dolor sit amet.</span>
-                    </div>
-                    <small class="text-muted">Lorem ipsum dolor.</small>
-                  </div>
-                  <div>
-                    <select
-                      class="form-select form-select-sm"
-                      aria-label="Default select example"
-                    >
-                      <option selected>Open this select menu</option>
-                      <option value="1">One</option>
-                      <option value="2">Two</option>
-                      <option value="3">Three</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Switch from '@/application/ui/Switch/Switch.vue';
-import Tag from '@/application/ui/Tag/Tag.vue';
-</script>
-
-<style lang="scss"></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationList.vue b/src/application/components/menu/ConfigurationTab/ConfigurationList.vue
new file mode 100644
index 00000000..25442c98
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationList.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="row my-2 h-100 configuration-tab">
+    <div class="col">
+      <div class="card bg-transparent">
+        <div class="card-body p-0">
+          <div class="list-group">
+            <ConfigurationListItemSwitch
+              configuration-id="general_refresh_rate"
+            />
+            <ConfigurationListItemSelect configuration-id="general_port" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ConfigurationListItemSelect from '@/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue';
+import ConfigurationListItemSwitch from '@/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue';
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationListItem.vue b/src/application/components/menu/ConfigurationTab/ConfigurationListItem.vue
new file mode 100644
index 00000000..3de4ad59
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationListItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="list-group-item bg-acrylic light text-white">
+    <div class="d-flex-center-center">
+      <div
+        class="d-flex justify-content-center align-items-start flex-column w-100"
+      >
+        <div class="d-flex justify-content-start align-items-center">
+          <Tag class="ms-0">#{{ configurationItem.target }}</Tag>
+          <span class="mx-1">{{ configurationItem.label }}</span>
+        </div>
+        <small class="text-muted">{{ configurationItem.description }}</small>
+      </div>
+      <div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Tag from '@/application/ui/Tag/Tag.vue';
+import { retrieveConfigurationSettings } from '@/domain/configuration/configurationLibrary.util.js';
+
+const props = defineProps({
+  configurationId: {
+    type: String,
+    required: true
+  }
+});
+
+const configurationItem = retrieveConfigurationSettings(props.configurationId);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue b/src/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue
new file mode 100644
index 00000000..c9f105ff
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationListItemSelect.vue
@@ -0,0 +1,26 @@
+<template>
+  <ConfigurationListItem :configuration-id="configurationId">
+    <select
+      class="form-select form-select-sm"
+      aria-label="Default select example"
+    >
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </ConfigurationListItem>
+</template>
+
+<script setup>
+import ConfigurationListItem from '@/application/components/menu/ConfigurationTab/ConfigurationListItem.vue';
+
+defineProps({
+  configurationId: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue b/src/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue
new file mode 100644
index 00000000..6878f813
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationListItemSwitch.vue
@@ -0,0 +1,19 @@
+<template>
+  <ConfigurationListItem :configuration-id="configurationId">
+    <Switch />
+  </ConfigurationListItem>
+</template>
+
+<script setup>
+import ConfigurationListItem from '@/application/components/menu/ConfigurationTab/ConfigurationListItem.vue';
+import Switch from '@/application/ui/Switch/Switch.vue';
+
+defineProps({
+  configurationId: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationSearchBar.vue b/src/application/components/menu/ConfigurationTab/ConfigurationSearchBar.vue
new file mode 100644
index 00000000..c615d8f1
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationSearchBar.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="row my-2 configuration-tab">
+    <div class="col-12">
+      <!--        <div class="d-flex-center-center">-->
+      <div class="input-group">
+        <input
+          type="search"
+          class="form-control bg-acrylic"
+          placeholder="Type to search..."
+        />
+        <!--          <button-->
+        <!--            class="btn btn-acrylic dropdown-toggle d-flex-center-center px-2 py-1 m-0 d-flex-center-center"-->
+        <!--            type="button"-->
+        <!--            data-bs-toggle="dropdown"-->
+        <!--            aria-expanded="false"-->
+        <!--          >-->
+        <!--            <i class="icon-endpoint"></i>-->
+        <!--          </button>-->
+        <!--          <ul class="dropdown-menu">-->
+        <!--            <li>-->
+        <!--              <Tag>#jagfx</Tag>-->
+        <!--            </li>-->
+        <!--            <li>-->
+        <!--              <Tag>#jagfx</Tag>-->
+        <!--            </li>-->
+        <!--            <li>-->
+        <!--              <Tag>#jagfx</Tag>-->
+        <!--            </li>-->
+        <!--          </ul>-->
+        <button
+          class="btn btn-acrylic px-2 py-1 pe-3 m-0 d-flex-center-center"
+          type="button"
+        >
+          <i class="icon-location_arrow"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!--    <div class="row my-2 configuration-tab">-->
+  <!--      <div class="col d-flex justify-content-start align-items-center">-->
+  <!--        <Tag>#jagfx</Tag>-->
+  <!--        <Tag>#jagfx</Tag>-->
+  <!--        <Tag>#jagfx</Tag>-->
+  <!--        <div class="d-flex-center-center text-muted mx-1">-->
+  <!--          <i class="icon-endpoint"></i>-->
+  <!--        </div>-->
+  <!--      </div>-->
+  <!--    </div>-->
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/application/components/menu/ConfigurationTab/ConfigurationTab.vue b/src/application/components/menu/ConfigurationTab/ConfigurationTab.vue
new file mode 100644
index 00000000..26c9182d
--- /dev/null
+++ b/src/application/components/menu/ConfigurationTab/ConfigurationTab.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <ConfigurationSearchBar />
+    <ConfigurationList />
+  </div>
+</template>
+
+<script setup>
+import ConfigurationList from '@/application/components/menu/ConfigurationTab/ConfigurationList.vue';
+import ConfigurationSearchBar from '@/application/components/menu/ConfigurationTab/ConfigurationSearchBar.vue';
+</script>
+
+<style lang="scss"></style>
diff --git a/src/application/components/menu/Menu.vue b/src/application/components/menu/Menu.vue
index 6ffdbae8..747c8c6d 100644
--- a/src/application/components/menu/Menu.vue
+++ b/src/application/components/menu/Menu.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import AboutTab from '@/application/components/menu/AboutTab/AboutTab.vue';
-import ConfigurationTab from '@/application/components/menu/ConfigurationTab.vue';
+import ConfigurationTab from '@/application/components/menu/ConfigurationTab/ConfigurationTab.vue';
 import SkinTab from '@/application/components/menu/SkinTab.vue';
 import Navlink from '@/application/ui/Navlink/Navlink.vue';
 import { shallowRef } from 'vue';
diff --git a/src/application/uses/useConfigurationLibrary.js b/src/application/uses/useConfigurationLibrary.js
new file mode 100644
index 00000000..deee4349
--- /dev/null
+++ b/src/application/uses/useConfigurationLibrary.js
@@ -0,0 +1,32 @@
+import {
+  applyFiltersToConfigurationsSettingsList,
+  convertJsonObjectToConfigurationItem
+} from '@/domain/configuration/configurationLibrary.util.js';
+import { computed, reactive, readonly } from 'vue';
+import configurationMap from '@/domain/configuration/configuration.library.json';
+
+const state = reactive({
+  search: ''
+});
+
+const getters = {
+  search: computed(() => state.search),
+  configurationMatchWithSearch: computed(() =>
+    applyFiltersToConfigurationsSettingsList(
+      {
+        label: state.search
+      },
+      configurationMap.map((configurationItem) =>
+        convertJsonObjectToConfigurationItem(configurationItem)
+      )
+    )
+  )
+};
+
+const actions = {};
+
+export const useConfigurationLibrary = () => ({
+  state: readonly(state),
+  ...getters,
+  ...actions
+});
diff --git a/src/assets/scss/menu/_menu-tab-config.scss b/src/assets/scss/menu/_menu-tab-config.scss
index 0d1be5a0..28fb41e8 100644
--- a/src/assets/scss/menu/_menu-tab-config.scss
+++ b/src/assets/scss/menu/_menu-tab-config.scss
@@ -1,7 +1,7 @@
 /**
  * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
  * project:	ets2-dashboard-skin
- * file: 	_tab-config.scss
+ * file: 	_tab-configuration.scss
  * Date: 	21/05/2020
  * Time: 	15:22
  */
diff --git a/src/components/menu/MenuTabConfig.vue b/src/components/menu/MenuTabConfig.vue
index bfa1e893..6307592d 100644
--- a/src/components/menu/MenuTabConfig.vue
+++ b/src/components/menu/MenuTabConfig.vue
@@ -121,19 +121,19 @@ export default {
   },
   methods: {
     download(target) {
-      this.$pushALog('Download config', HTY_ZONE.MENU_CONFIG, HTY_LEVEL.DEBUG);
+      this.$pushALog('Download configuration', HTY_ZONE.MENU_CONFIG, HTY_LEVEL.DEBUG);
 
       configDownload(target);
     },
     upload(input) {
-      this.$pushALog('Start config upload', HTY_ZONE.MENU_CONFIG);
+      this.$pushALog('Start configuration upload', HTY_ZONE.MENU_CONFIG);
 
       configUpload(input.target.files[0], this.targetUpload)
         .then((data) => {
           this.$pushALog('Config upload done', HTY_ZONE.MENU_CONFIG);
 
           const commitName =
-            this.targetUpload === 'game' ? 'config/setGame' : 'config/setApp';
+            this.targetUpload === 'game' ? 'configuration/setGame' : 'configuration/setApp';
           this.$store.commit(commitName, data);
         })
         .catch((e) => {
diff --git a/src/domain/configuration/configuration.library.json b/src/domain/configuration/configuration.library.json
new file mode 100644
index 00000000..043791e3
--- /dev/null
+++ b/src/domain/configuration/configuration.library.json
@@ -0,0 +1,36 @@
+[
+	{
+		"id" :          "general_refresh_rate",
+		"target" :      "application",
+		"label" :       "Refresh rate",
+		"description" : "Set your refresh rate of the data. Less than rate are, more the dashboard data will up to date. You need to restart this app after change ;)",
+		"values" :      [
+			{
+				"label" : "Quickly (100ms)",
+				"value" : "100"
+			},
+			{
+				"label" : "Balanced (500ms)",
+				"value" : "500"
+			},
+			{
+				"label" : "Slowly (1000ms)",
+				"value" : "1000"
+			}
+		]
+	},
+	{
+		"id": "general_port",
+		"target": "application",
+		"label": "Port",
+		"description": "Port used by the server",
+		"value": null
+	},
+	{
+		"id": "general_skin_on_load",
+		"target": "application",
+		"label": "Default skin loaded",
+		"description": "Set the skin loaded when this app was started",
+		"value": []
+	}
+]
\ No newline at end of file
diff --git a/src/domain/configuration/configurationLibrary.model.js b/src/domain/configuration/configurationLibrary.model.js
new file mode 100644
index 00000000..4559e36f
--- /dev/null
+++ b/src/domain/configuration/configurationLibrary.model.js
@@ -0,0 +1,9 @@
+export class ConfigurationLibrary {
+  constructor(id = '', target = '', label = '', description = '', values = []) {
+    this.id = id;
+    this.target = target;
+    this.label = label;
+    this.description = description;
+    this.values = values;
+  }
+}
diff --git a/src/domain/configuration/configurationLibrary.util.js b/src/domain/configuration/configurationLibrary.util.js
new file mode 100644
index 00000000..9b14408b
--- /dev/null
+++ b/src/domain/configuration/configurationLibrary.util.js
@@ -0,0 +1,38 @@
+import configurationMap from '@/domain/configuration/configuration.library.json';
+import { ConfigurationLibrary } from '@/domain/configuration/configurationLibrary.model.js';
+
+export const retrieveConfigurationSettings = (configurationId) => {
+  const matches = configurationMap.filter(
+    (configuration) => configuration.id === configurationId
+  );
+
+  if (matches.length !== 1)
+    throw new Error(`Unable to find ${configurationId} on configuration map`);
+
+  return matches.at(0);
+};
+
+export const applyFiltersToConfigurationsSettingsList = (filters, list) => {
+  return list.filter((configurationSetting) => {
+    const filterMatches = [true];
+
+    if (Object.hasOwn(filters, 'label') && filters.label.length !== 0) {
+      filterMatches.push(
+        configurationSetting.label
+          .toLowerCase()
+          .includes(filters.label.toLowerCase())
+      );
+    }
+
+    if (Object.hasOwn(filters, 'target') && filters.target.length !== 0) {
+      filterMatches.push(
+        configurationSetting.target.includes(filters.target.toLowerCase())
+      );
+    }
+
+    return filterMatches.every((match) => match);
+  });
+};
+
+export const convertJsonObjectToConfigurationItem = (json) =>
+  Object.assign(new ConfigurationLibrary(), json);
diff --git a/src/domain/configuration/configurationLibrary.util.spec.js b/src/domain/configuration/configurationLibrary.util.spec.js
new file mode 100644
index 00000000..696c6bd0
--- /dev/null
+++ b/src/domain/configuration/configurationLibrary.util.spec.js
@@ -0,0 +1,34 @@
+import { jest } from '@jest/globals';
+
+const existingConfigurationId = 'an_existing_configuration_id';
+const existingConfiguration = {
+  id: existingConfigurationId,
+  target: 'application',
+  label: 'Configuration 1',
+  description: 'Description 1',
+  values: [
+    {
+      label: 'Value 1',
+      value: 'value1'
+    }
+  ]
+};
+jest.mock('@/domain/configuration/configuration.library.json', () => [
+  existingConfiguration
+]);
+
+import { retrieveConfigurationSettings } from '@/domain/configuration/configurationLibrary.util.js';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe('Configuration', () => {
+  it('An existing configuration ID must return the configuration data successfully', () => {
+    const configuration = retrieveConfigurationSettings(
+      existingConfigurationId
+    );
+
+    expect(configuration).toMatchObject(existingConfiguration);
+  });
+});