ADD: Profile Manager slide

2024-02-06 17:51:06 +01:00
parent 287444e9b7
commit 21ced31381
2 changed files with 83 additions and 41 deletions
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -3,12 +3,12 @@
    <div>
      <div
        class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <button class="flex items-center" @click="showProfileList=true">
-          <component :is="showProfileList ? List : ArrowLeft" class="w-5 h-full mr-1" />
+        <button class="flex items-center" @click="showProfileConfig=false">
+          <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1" />
          <span class="font-heading mr-2">
-            <ScrambleText :text="showProfileList ? $t('profiles.title') : store.selectedProfile?.name" />
+            <ScrambleText :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')" />
            <ScrambleText
-              v-if="showProfileList" class="text-sm text-zinc-600"
+              v-if="!showProfileConfig" class="text-sm text-zinc-600"
              scramble-on-mount
              :fill-interval="20"
              :delay="500"
@@ -16,7 +16,7 @@
          </span>
        </button>
        <button
-          v-if="showProfileList"
+          v-if="!showProfileConfig"
          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
          @click="store.addProfile">
          <Plus class="h-4" />
@@ -24,24 +24,24 @@
      </div>
      <Separator />
    </div>
-    <template v-if="showProfileList">
-      <div v-if="showFilter">
-        <div class="flex w-full h-12 items-center">
-          <label for="filter" class="flex h-full items-center cursor-text">
-            <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
-          </label>
-          <input
-            id="filter"
-            v-model="filter"
-            :placeholder="$t('profiles.filter_placeholder')"
-            class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
-          <button
-            class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
-            <Plus />
-          </button>
-        </div>
-        <Separator />
+    <div v-if="showFilter">
+      <div class="flex w-full h-12 items-center">
+        <label for="filter" class="flex h-full items-center cursor-text">
+          <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
+        </label>
+        <input
+          id="filter"
+          v-model="filter"
+          :placeholder="$t('profiles.filter_placeholder')"
+          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
+        <button
+          class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
+          <Plus />
+        </button>
      </div>
+      <Separator />
+    </div>
+    <div class="grow relative">
      <div class="grow overflow-y-auto">
        <div v-if="filteredProfiles.length === 0">
          <div class="flex flex-col items-center justify-center h-32">
@@ -75,7 +75,7 @@
                    :key="element.id"
                    :profile="element"
                    :selected="store.selectedProfile?.id === element.id"
-                    @select="store.selectProfile(element.id); showProfileList=false"
+                    @select="store.selectProfile(element.id); showProfileConfig=true"
                    @duplicate="store.duplicateProfile(element.id)"
                    @delete="store.removeProfile(element.id)" />
                </template>
@@ -85,16 +85,20 @@
          </Collapsible>
        </div>
      </div>
-    </template>
-    <div v-else class="grow overflow-y-auto">
-      <ProfileConfig />
+      <Transition name="slide">
+        <div
+          v-if="showProfileConfig"
+          class="grow overflow-y-auto absolute top-0 h-full bg-zinc-950 transition-transform">
+          <ProfileConfig />
+        </div>
+      </Transition>
    </div>
  </div>
 </template>
 <script setup>
 import { Separator } from '@/components/ui/separator'
 import { ChevronRight, Plus, Search, ArrowLeft, List } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { useStore } from '@/store.js'
@@ -115,7 +119,18 @@ const store = useStore()
 const filter = ref('')
 const collapse = ref({})

-const showProfileList = ref(true)
+const showProfileConfig = ref(true)
+const renderProfileConfig = ref(showProfileConfig.value)
+
+watch(showProfileConfig, value => {
+  if (value) {
+    renderProfileConfig.value = true
+  } else {
+    setTimeout(() => {
+      renderProfileConfig.value = false
+    }, 300)
+  }
+})

 const filteredProfiles = computed(() => {
  if (!filter.value) {
@@ -166,4 +181,18 @@ const dragOptions = {
 [data-state=open] > .chevrot {
  transform: rotate(90deg);
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 300ms ease-out;
+}
+
+.slide-enter-active {
+  transition-delay: 150ms;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(-100%);
+}
 </style>
--- a/src/store.js
+++ b/src/store.js
@@ -49,14 +49,17 @@ export const useStore = defineStore('main', {
      if (!this.profileIds.includes(id)) return false
      this.selectedProfileId = id
      return true
-    }, addProfile(profile, categoryIndex, newIndex) {
+    },
+    addProfile(profile, categoryIndex, newIndex) {
      const category = this.profileCategories[categoryIndex]
      category.profiles.splice(newIndex, 0, profile)
-    }, removeProfile(profileId) {
+    },
+    removeProfile(profileId) {
      const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
      const index = category.profiles.findIndex(p => p.id === profileId)
      category.profiles.splice(index, 1)
-    }, duplicateProfile(profileId) {
+    },
+    duplicateProfile(profileId) {
      const originalProfile = this.profiles.find(p => p.id === profileId)
      const newProfile = JSON.parse(JSON.stringify(originalProfile))
      newProfile.id = this.newProfileId(originalProfile.id)
@@ -64,22 +67,26 @@ export const useStore = defineStore('main', {
      const category = this.categories.find(c => c.profiles.find(p => p.id === profileId))
      category.profiles.push(newProfile)
      return newProfile.id
-    }, moveProfile(profileId, oldIndex, newIndex) {
+    },
+    moveProfile(profileId, oldIndex, newIndex) {
      // Find the profile category, then swap the profiles at the old and new indices
      const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
      const tmpProfile = category.profiles[newIndex]
      category.profiles[newIndex] = category.profiles[oldIndex]
      category.profiles[newIndex] = tmpProfile
-    }, changeProfileCategory(profileId, newCategoryIndex, newIndex) {
+    },
+    changeProfileCategory(profileId, newCategoryIndex, newIndex) {
      const profile = this.profiles.find(p => p.id === profileId)
      const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
      const newCategory = this.profileCategories[newCategoryIndex]
      oldCategory.profiles = oldCategory.profiles.filter(p => p.id !== profileId)
      newCategory.profiles.splice(newIndex, 0, profile)
-    }, renameProfile(profileId, newName) {
+    },
+    renameProfile(profileId, newName) {
      const profile = this.profiles.find(p => p.id === profileId)
      profile.name = newName
-    }, fetchProfiles() {
+    },
+    fetchProfiles() {
      Axios.get('http://localhost:3001/categories').then((res) => {
        const categories = res.data
        console.log(categories)
@@ -105,14 +112,16 @@ export const useStore = defineStore('main', {
      }).catch((err) => {
        console.error(err)
      })
-    }, newProfileName(originalName = '') {
+    },
+    newProfileName(originalName = '') {
      let name = originalName
      let i = 1
      while (this.profiles.find(p => p.name === name)) {
        name = `${originalName} (${i++})`
      }
      return name
-    }, newProfileId(originalId = '') {
+    },
+    newProfileId(originalId = '') {
      let id = originalId
      if (originalId) {
        do {
@@ -124,15 +133,19 @@ export const useStore = defineStore('main', {
        } while (this.profileIds.includes(id))
      }
      return id
-    }, selectConfigFeature(feature) {
+    },
+    selectConfigFeature(feature) {
      this.selectedFeature = feature
      if (!this.currentConfigPages[this.currentConfigPage]) this.setCurrentConfigPage('mapping')
-    }, selectKey(key) {
+    },
+    selectKey(key) {
      this.selectedKey = key
      this.selectConfigFeature('key')
-    }, setCurrentConfigPage(page) {
+    },
+    setCurrentConfigPage(page) {
      this.currentConfigPage = page
-    }, setConnected(connected) {
+    },
+    setConnected(connected) {
      this.connected = connected
    },
  },