UPD: Lots of refactoring
This commit is contained in:
Robert Kossessa
151
src/components/profile/ProfileButton.vue
Normal file
151
src/components/profile/ProfileButton.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div
|
||||
class="h-12 flex profile-row"
|
||||
@mouseenter="hover=true" @mouseleave="hover=false">
|
||||
<form
|
||||
v-if="nameEditable && editing"
|
||||
class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
|
||||
:class="{'bg-zinc-200' : selected}"
|
||||
@submit.prevent="profile.name = nameInput; editing=false">
|
||||
<span class="ml-4 mr-1 h-full w-4 flex items-center">
|
||||
<component
|
||||
:is="draggable && hover ? GripHorizontal : FileDigit"
|
||||
:class="{'text-zinc-600': selected,
|
||||
'text-muted-foreground': !selected}"
|
||||
class="w-4 h-4 mb-0.5"
|
||||
/>
|
||||
</span>
|
||||
<input
|
||||
ref="profileNameInput" v-model="nameInput"
|
||||
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}"
|
||||
@blur="editing=false">
|
||||
<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}"
|
||||
class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
|
||||
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
|
||||
<component
|
||||
:is="draggable && hover ? GripHorizontal : FileDigit"
|
||||
:class="{'text-zinc-600': selected,
|
||||
'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
|
||||
v-if="nameEditable"
|
||||
: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"
|
||||
@click="startEditing">
|
||||
<PenLine 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,
|
||||
'w-12' : hover && !editing}"
|
||||
class="flex w-0 h-12 justify-center items-center flex-shrink-0"
|
||||
@click="$emit('duplicate')">
|
||||
<Copy class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-orange-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"
|
||||
@click="confirmDelete=true">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
|
||||
'hover:bg-opacity-100 bg-orange-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"
|
||||
@click="$emit('delete', profile.id)">
|
||||
<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,
|
||||
'w-12' : hover && !editing}"
|
||||
class="flex w-0 h-12 justify-center items-center flex-shrink-0"
|
||||
@click="confirmDelete=false">
|
||||
<X class="h-4 w-4" />
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Check, Copy, FileDigit, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
|
||||
import ScrambleText from '@/components/effects/ScrambleText.vue'
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
defineEmits(['select', 'duplicate', 'delete'])
|
||||
|
||||
const profile = defineModel({
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: '1234',
|
||||
name: 'Profile Name',
|
||||
}),
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
nameEditable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initEditing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
draggable: {
|
||||
// Not implemented yet
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
async function startEditing() {
|
||||
editing.value = true
|
||||
await nextTick()
|
||||
profileNameInput.value.focus()
|
||||
}
|
||||
|
||||
const profileNameInput = ref(null)
|
||||
|
||||
const nameInput = ref(profile.value.name)
|
||||
|
||||
const editing = ref(props.initEditing)
|
||||
|
||||
const confirmDelete = ref(false)
|
||||
|
||||
const hover = ref(false)
|
||||
|
||||
</script>
|
||||
160
src/components/profile/ProfileManager.vue
Normal file
160
src/components/profile/ProfileManager.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="w-full px-4 h-20 flex items-center">
|
||||
<div>
|
||||
<h1 class="text-lg">
|
||||
{{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
|
||||
}})</span>
|
||||
</h1>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ $t(`profiles.subtitle`) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<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 disabled:cursor-not-allowed disabled:opacity-50">
|
||||
<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="filteredProfiles.length === 0">
|
||||
<div class="flex flex-col items-center justify-center h-32">
|
||||
<ScrambleText
|
||||
scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground"
|
||||
:text="$t('profiles.not_found')" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Collapsible
|
||||
v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
|
||||
v-model:open="collapse[profileTag]"
|
||||
:default-open="true">
|
||||
<CollapsibleTrigger
|
||||
class="w-full h-12 py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900">
|
||||
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
|
||||
{{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ProfileButton
|
||||
v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
|
||||
:selected="currentProfileId===profile.id"
|
||||
@select="currentProfileId=profile.id"
|
||||
@duplicate="duplicateProfile(profile.id)"
|
||||
@delete="deleteProfile(profile.id)" />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ChevronRight, Plus, Search } from 'lucide-vue-next'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import ScrambleText from '@/components/effects/ScrambleText.vue'
|
||||
import { store } from '@/store.js'
|
||||
import ProfileButton from '@/components/profile/ProfileButton.vue'
|
||||
|
||||
const maxProfiles = 32
|
||||
|
||||
const profiles = computed({
|
||||
get: () => store.device.profiles,
|
||||
set: val => store.device.profiles = val,
|
||||
})
|
||||
const currentProfileId = computed({
|
||||
get: () => store.currentProfileId,
|
||||
set: val => store.currentProfileId = val,
|
||||
})
|
||||
const filter = ref('')
|
||||
const collapse = ref({})
|
||||
|
||||
const filteredProfiles = computed(() => {
|
||||
if (!filter.value) {
|
||||
return profiles.value
|
||||
}
|
||||
const filterLower = filter.value.toLowerCase()
|
||||
return profiles.value.filter(profile => {
|
||||
const nameLower = profile.name.toLowerCase()
|
||||
const idLower = profile.id.toLowerCase()
|
||||
const tagLower = profile.profileTag.toLowerCase()
|
||||
return nameLower.includes(filterLower) || idLower.includes(filterLower) || tagLower.includes(filterLower)
|
||||
})
|
||||
})
|
||||
|
||||
function newProfileId(originalId = '') {
|
||||
let id = originalId
|
||||
if (originalId) {
|
||||
do {
|
||||
id = Math.floor((parseInt(id) + 1) % 9999).toString().padStart(4, '0')
|
||||
} while (store.profileIds.includes(id))
|
||||
} else {
|
||||
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(id)
|
||||
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 => {
|
||||
const tag = profile.profileTag || 'Uncategorized'
|
||||
if (!map.has(tag)) {
|
||||
map.set(tag, [])
|
||||
}
|
||||
map.get(tag).push(profile)
|
||||
})
|
||||
return map
|
||||
})
|
||||
|
||||
watch(profiles, () => {
|
||||
if (!currentProfileId.value && profiles.value.length > 0)
|
||||
currentProfileId.value = profiles.value[0].id
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
[data-state=open] > .chevrot {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user