UPD: Replace Command component in ProfileManager

src/components/ProfileManager.vue

@@ -13,21 +13,8 @@
     </div>
     <Separator />
     <div>
-      <Command>
+      <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-        <CommandList>
+      <Input :placeholder="$t('profiles.filter_placeholder')" class="border-none outline-none rounded-none" />
-          <CommandInput placeholder="Filter Profiles..." />
-          <CommandEmpty>No profile found :(</CommandEmpty>
-          <CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
-            <CommandItem
-              v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
-              :value="name.id">
-              <FileDigit color="grey" class="w-4 h-4 mr-2" />
-              {{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-        <CommandSeparator />
-      </Command>
     </div>
     <SchemaTest />
   </div>
@@ -35,95 +22,35 @@
 <script setup>
 import SchemaTest from '@/components/SchemaTest.vue'
 import { Separator } from '@/components/ui/separator/index.js'
-import {
+import { Input } from '@/components/ui/input'
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput, CommandItem,
-  CommandList,
-  CommandSeparator,
-} from '@/components/ui/command/index.js'
 import { FileDigit } from 'lucide-vue-next'
 import axios from 'axios'
 import { computed, onMounted, ref } from 'vue'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
 
 const profiles = ref([])
 
-const tags = computed(() => {
+const profilesByTag = computed(() => {
-  const tags = new Set()
+  const map = new Map()
-  profiles.value.forEach(tag => tags.add(tag.profileTag))
+  profiles.value.forEach(profile => {
-  return Array.from(tags)
+    const tag = profile.profileTag || 'Uncategorized'
+    if (!map.has(tag)) {
+      map.set(tag, [])
+    }
+    map.get(tag).push(profile)
+  })
+  return map
 })
 
-onMounted(async () => {
+function fetchProfiles() {
-  try {
+  axios.get('http://localhost:3001/profiles').then(res => {
-    const res = await axios.get('http://localhost:3001/profiles')
     profiles.value = res.data
-  } catch (e) {
+  }).catch(err => {
-    console.error(e)
+    console.error(err)
-  }
+  })
+}
+
+onMounted(() => {
+  fetchProfiles()
 })
-
-const names = (profileTag) => {
-  return profiles.value
-    .filter(tag => tag.profileTag === profileTag)
-    .map(tag => ({ name: tag.name, id: tag.id }))
-}
-
-const addNewProfile = async (event) => {
-  console.log(event)
-  const res = await axios.post('http://localhost:3001/profiles',
-    {
-      name: 'TODO: CHANGE THIS',
-      profileTag: 'Uncategorized',
-      profileConfig: {
-        profileDesc: '',
-        profileType: 1,
-        showDesc: true,
-      },
-      feedbackConfig: {
-        feedbackEn: true,
-        feedbackType: 'fd',
-        multiRev: false,
-        feedbackStrength: 1,
-        endstopStrength: 1,
-        outputRamp: 10000,
-        minMaxPos: [0, 156],
-        secondaryHaptic: true,
-        secondaryVol: 5,
-      },
-      mappingConfig: {
-        internalMacro: false,
-        knobMap: 'arrL',
-        switchA: 'shift',
-        switchB: 'ctrl',
-        switchC: 'alt',
-        switchD: 'esc',
-      },
-      ledConfig: {
-        ledEnable: true,
-        ledMode: 1,
-        primary: {
-          h: 100,
-          s: 100,
-          l: 100,
-        },
-        secondary: {
-          h: 120,
-          s: 120,
-          l: 120,
-        },
-        pointer: {
-          h: 255,
-          s: 255,
-          l: 255,
-        },
-      },
-      guiConfig: {
-        guiEnable: true,
-      },
-    })
-
-  profiles.value = [...profiles.value, res.data]
-}
 </script>

src/lang/en.json

@@ -36,7 +36,7 @@
     },
     "mapping_configuration": {
       "key_mapping": {
-        "not_found": "Key or function not found :(",
+        "not_found": "Key or function not found ;-;",
         "search_placeholder": "Find Key, Function or Macro...",
         "switch": {
           "a": "Switch A",
@@ -88,9 +88,11 @@
     }
   },
   "preview": {
-    "title": "Quick Preview"
+    "title": "Live Preview"
   },
   "profiles": {
+    "filter_placeholder": "Filter Profiles...",
+    "not_found": "No profiles found ;-;",
     "subtitle": "Customize to your heart's content",
     "title": "Device Profiles"
   }