mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-08 05:43:18 +01:00
78 lines
3.0 KiB
Vue
78 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ArchiveBoxIcon, TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
|
|
import type { Goal } from '@/packages/api/src';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/packages/ui/src';
|
|
|
|
const emit = defineEmits<{
|
|
edit: [];
|
|
archive: [];
|
|
delete: [];
|
|
}>();
|
|
const props = defineProps<{
|
|
goal: Goal;
|
|
canEdit: boolean;
|
|
canDelete: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<button
|
|
class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-text-secondary"
|
|
:aria-label="'Actions for Goal ' + props.goal.name">
|
|
<svg
|
|
class="h-8 w-8 p-1 rounded-full"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="1.5"
|
|
d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
|
|
</svg>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="min-w-[150px]" align="end">
|
|
<DropdownMenuItem
|
|
v-if="props.canEdit"
|
|
:aria-label="'Edit Goal ' + props.goal.name"
|
|
data-testid="goal_edit"
|
|
class="flex items-center space-x-3 cursor-pointer"
|
|
@click="emit('edit')">
|
|
<PencilSquareIcon class="w-5 text-icon-active" />
|
|
<span>Edit</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
v-if="props.canEdit"
|
|
:aria-label="
|
|
(props.goal.is_archived ? 'Unarchive' : 'Archive') + ' Goal ' + props.goal.name
|
|
"
|
|
data-testid="goal_archive"
|
|
class="flex items-center space-x-3 cursor-pointer"
|
|
@click="emit('archive')">
|
|
<ArchiveBoxIcon class="w-5 text-icon-active" />
|
|
<span>{{ props.goal.is_archived ? 'Unarchive' : 'Archive' }}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
v-if="props.canDelete"
|
|
:aria-label="'Delete Goal ' + props.goal.name"
|
|
data-testid="goal_delete"
|
|
class="flex items-center space-x-3 cursor-pointer text-destructive focus:text-destructive"
|
|
@click="emit('delete')">
|
|
<TrashIcon class="w-5" />
|
|
<span>Delete</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|
|
|
|
<style scoped></style>
|