From 4b3dd0ab902c6090381fa3eab291b989591f1318 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 27 Jan 2024 16:00:26 +0100
Subject: [PATCH] UPD: Profile management del+dup

---
 src/components/ProfileButton.vue  |  77 +++++++++++---------
 src/components/ProfileManager.vue |  39 +++++++++-
 src/data/nanoConfig.json          | 114 ++++++++++++++++++++++++++++--
 src/store.js                      |   1 +
 4 files changed, 193 insertions(+), 38 deletions(-)

diff --git a/src/components/ProfileButton.vue b/src/components/ProfileButton.vue
index a4e2160..9c826d4 100644
--- a/src/components/ProfileButton.vue
+++ b/src/components/ProfileButton.vue
@@ -2,42 +2,50 @@
   <div
     class="h-12 flex profile-row"
     @mouseenter="hover=true" @mouseleave="hover=false">
+    <form
+      v-if="editing"
+      class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
+      :class="{'bg-zinc-200' : selected}" @submit.prevent="editing=false">
+      <span class="ml-4 mr-1 h-full w-4 flex items-center">
+        <FileDigit
+          :class="{'text-zinc-600': selected,
+          'text-muted-foreground': !selected}"
+          class="w-4 h-4 mb-0.5"
+        />
+      </span>
+      <input
+        ref="profileNameInput" v-model="profile.name"
+        onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
+        class="flex-1 pl-1 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+        :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+        'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}">
+      <button
+        type="submit"
+        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
+                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
+        class="flex w-12 h-12 justify-center items-center flex-shrink-0">
+        <Check class="h-4 w-4" />
+      </button>
+    </form>
     <button
+      v-else
       :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
-      'hover:bg-zinc-900 bg-opacity-50 text-white': !selected,
-      'text-ellipsis': !editing}"
-      class="flex-1 h-full text-left whitespace-nowrap overflow-hidden"
+      'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
+      class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
       <FileDigit
         :class="{'text-zinc-600': selected,
-        'text-muted-foreground': !selected,
-        'w-0': hover}"
-        class="h-4 ml-10 mb-1 inline-block" />
-      <input
-        v-if="editing" ref="profileNameInput" v-model="profile.name"
-        onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
-        class="pl-10 w-full h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-        style="color: inherit; background: inherit">
-      <template v-else>
-        <ScrambleText
-          ref="profileTitle"
-          :class="{'text-black': selected, 'text-zinc-100': !selected}"
-          :text="profile.name" />
-        <span
-          class="text-xs text-zinc-600"
-          :class="{'hidden': hover}"> uID:{{ profile.id }}</span>
-      </template>
+        'text-muted-foreground': !selected}"
+        class="ml-4 mr-2 mb-0.5 h-4 w-4 inline-block" />
+      <ScrambleText
+        ref="profileTitle"
+        :class="{'text-black': selected, 'text-zinc-100': !selected}"
+        :text="profile.name" />
+      <span
+        class="text-xs text-zinc-600"
+        :class="{'hidden': hover}"> uID:{{ profile.id }}</span>
     </button>
     <template v-if="!confirmDelete">
-      <button
-        :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
-                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
-                'w-12': editing,
-                'w-0': !editing}"
-        class="flex h-12 justify-center items-center flex-shrink-0"
-        @click="editing=false">
-        <Check class="h-4 w-4" />
-      </button>
       <button
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
@@ -50,7 +58,8 @@
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0">
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        @click="$emit('duplicate')">
         <Copy class="h-4 w-4" />
       </button>
       <button
@@ -98,14 +107,18 @@ const profile = defineModel({
   }),
 })
 
-defineProps({
+const props = defineProps({
   selected: {
     type: Boolean,
     default: false,
   },
+  initEditing: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const editing = ref(false)
+const editing = ref(props.initEditing)
 
 const confirmDelete = ref(false)
 
diff --git a/src/components/ProfileManager.vue b/src/components/ProfileManager.vue
index 3e4e834..2215bf8 100644
--- a/src/components/ProfileManager.vue
+++ b/src/components/ProfileManager.vue
@@ -50,7 +50,9 @@
             <ProfileButton
               v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
               :selected="currentProfileId===profile.id"
-              @select="currentProfileId=profile.id" />
+              @select="currentProfileId=profile.id"
+              @duplicate="duplicateProfile(profile.id)"
+              @delete="deleteProfile(profile.id)" />
           </CollapsibleContent>
         </Collapsible>
       </div>
@@ -92,6 +94,41 @@ const filteredProfiles = computed(() => {
   })
 })
 
+function newProfileId() {
+  let id = ''
+  do {
+    id = Math.floor(Math.random() * 9999).toString().padStart(4, '0')
+  } while (store.profileIds.includes(id))
+  return id
+}
+
+function newProfileName(originalName) {
+  let name = originalName
+  let i = 1
+  while (profiles.value.find(p => p.name === name)) {
+    name = `${originalName}-${i++}`
+  }
+  return name
+}
+
+const duplicateProfile = (id) => {
+  const profile = profiles.value.find(p => p.id === id)
+  const profileIndex = profiles.value.indexOf(profile)
+  const newProfile = JSON.parse(JSON.stringify(profile))
+  newProfile.id = newProfileId()
+  newProfile.name = newProfileName(profile.name)
+  profiles.value.splice(profileIndex + 1, 0, newProfile)
+}
+
+const deleteProfile = (id) => {
+  const profile = profiles.value.find(p => p.id === id)
+  const profileIndex = profiles.value.indexOf(profile)
+  profiles.value.splice(profileIndex, 1)
+  if (currentProfileId.value === id && profiles.value.length > 0) {
+    currentProfileId.value = profiles.value[0].id
+  }
+}
+
 const filteredProfilesByTag = computed(() => {
   const map = new Map()
   filteredProfiles.value.forEach(profile => {
diff --git a/src/data/nanoConfig.json b/src/data/nanoConfig.json
index 1b8b907..b86c842 100644
--- a/src/data/nanoConfig.json
+++ b/src/data/nanoConfig.json
@@ -1,8 +1,8 @@
 {
   "profiles": [
     {
-      "id": "5867",
-      "name": "NEW PROFILE",
+      "id": "1732",
+      "name": "Official Profile #1",
       "profileTag": "Binaris",
       "profileConfig": {
         "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
@@ -52,10 +52,62 @@
         "guiEnable": true
       }
     },
+    {
+      "id": "5867",
+      "name": "My First Profile 😳",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
+    },
     {
       "id": "1232",
-      "name": "Another",
-      "profileTag": "Binaris",
+      "name": "AN0Th3R Pr0f1l3",
+      "profileTag": "Custom",
       "profileConfig": {
         "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
         "profileType": 1,
@@ -156,9 +208,61 @@
         "guiEnable": true
       }
     },
+    {
+      "id": "2891",
+      "name": "Color Grading M-2",
+      "profileTag": "Third Party",
+      "profileConfig": {
+        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
+    },
     {
       "id": "5238",
-      "name": "sdfsdf",
+      "name": "sdfsdf (Invalid)",
       "profileTag": "Uncategorized",
       "profileConfig": {
         "profileDesc": "",
diff --git a/src/store.js b/src/store.js
index 434f267..950623c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -12,4 +12,5 @@ export const store = reactive({
   currentProfile: computed(() => {
     return store.device.profiles.find(p => p.id === store.currentProfileId)
   }),
+  profileIds: computed(() => store.device.profiles.map(p => p.id)),
 })
\ No newline at end of file