✨ #133 add configuration menu section with real data

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",

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>

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>

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>

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>

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>

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>

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';

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
+});

src/assets/scss/menu/_menu-tab-config.scss

@@ -1,7 +1,7 @@
 /**
  * @author:	Emmanuel SMITH <[email protected]>
  * project:	ets2-dashboard-skin
- * file: 	_tab-config.scss
+ * file: 	_tab-configuration.scss
  * Date: 	21/05/2020
  * Time: 	15:22
  */

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) => {