131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
|
import { PhPlus } from "@phosphor-icons/vue"
|
|
import { useToast } from "~/components/ui/toast"
|
|
import { ToastLifetime } from "~/components/ui/toast/use-toast"
|
|
import { cn } from "~/lib/utils"
|
|
|
|
const { toast } = useToast()
|
|
const { t } = useI18n()
|
|
|
|
type FooterMode = "add" | "view"
|
|
const currentMode = ref<FooterMode>("view")
|
|
|
|
const rowRef = ref<HTMLDivElement | null>(null)
|
|
const inputRef = ref<HTMLInputElement | null>(null)
|
|
const { focused: inputFocused } = useFocus(inputRef)
|
|
|
|
/**
|
|
* Toggle view mode options
|
|
*/
|
|
type ToggleViewOptions = {
|
|
execution?: "now" | "nextTick"
|
|
}
|
|
|
|
/**
|
|
* Toggle view mode
|
|
* @param options.execution - When to execute the toggle. "now" or "nextTick"
|
|
*/
|
|
function toggleView(options: ToggleViewOptions = { execution: "now" }) {
|
|
currentMode.value = "view"
|
|
|
|
if (options.execution === "now") {
|
|
inputFocused.value = false
|
|
} else {
|
|
nextTick(() => {
|
|
inputFocused.value = false
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle add mode
|
|
*/
|
|
function toggleAdd() {
|
|
currentMode.value = "add"
|
|
categorySkeleton.value = { name: "", color: "black" }
|
|
|
|
nextTick(() => {
|
|
inputFocused.value = true
|
|
})
|
|
}
|
|
|
|
onClickOutside(rowRef, () => toggleView({ execution: "nextTick" }))
|
|
onKeyStroke("Escape", () => toggleView({ execution: "now" }))
|
|
|
|
const { addCategoryFromSkeleton } = useCategoryStore()
|
|
const { categorySkeleton } = storeToRefs(useCategoryStore())
|
|
|
|
/**
|
|
* Submit the update
|
|
*/
|
|
async function submitNew() {
|
|
if (!categorySkeleton.value) return
|
|
const newCategoryName = toRaw(categorySkeleton.value).name
|
|
|
|
const { error } = await tryCatch(addCategoryFromSkeleton())
|
|
|
|
if (error) {
|
|
toast({
|
|
title: t("entity.category.addedToast.titleError", { category: newCategoryName }),
|
|
variant: "destructive",
|
|
duration: ToastLifetime.LONG
|
|
})
|
|
return
|
|
}
|
|
|
|
toggleView({ execution: "now" })
|
|
toast({
|
|
title: t("entity.category.addedToast.title", { category: newCategoryName }),
|
|
variant: "success",
|
|
duration: ToastLifetime.SHORT
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border-y-[1px] border-b-foreground/10 mr-4">
|
|
<form
|
|
ref="rowRef"
|
|
class="grid grid-cols-12 items-center gap-4 p-1 bg-transparent hover:bg-slate-50 dark:bg-transparent dark:hover:bg-slate-900"
|
|
@submit.prevent="submitNew"
|
|
>
|
|
<div v-if="currentMode === 'add'" class="col-span-1" />
|
|
<div
|
|
:class="cn({
|
|
'col-span-6': currentMode === 'view',
|
|
'col-span-5': currentMode === 'add'
|
|
})"
|
|
>
|
|
<template v-if="currentMode === 'view'">
|
|
<button
|
|
class="p-2 h-full w-full text-left underline-offset-4 hover:underline cursor-pointer"
|
|
@click="toggleAdd"
|
|
>
|
|
<PhPlus size="18" />
|
|
</button>
|
|
</template>
|
|
<template v-if="currentMode === 'add' && categorySkeleton">
|
|
<input
|
|
ref="inputRef"
|
|
v-model="categorySkeleton.name"
|
|
type="text"
|
|
class="p-1 h-full w-full bg-transparent focus-visible:outline-none italic"
|
|
>
|
|
</template>
|
|
</div>
|
|
<div class="col-span-4">
|
|
<template v-if="currentMode === 'add' && categorySkeleton">
|
|
<div class="-mx-2">
|
|
<InputColor
|
|
id="category-color"
|
|
v-model="categorySkeleton.color"
|
|
position="item-aligned"
|
|
theme="subtle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|