added copy link button

This commit is contained in:
2026-01-01 02:35:36 -05:00
parent b94504bb69
commit ab247d720d
2 changed files with 33 additions and 19 deletions

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
import { CircleAlert, Clock4, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
import { CircleAlert, Clock4, EllipsisVertical, Link, MapPin, User, X } from 'lucide-vue-next';
import { computed, ref, watch } from 'vue';
import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
import Button from '../ui/button/Button.vue';
@@ -14,6 +14,7 @@ import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
import { Calendar } from 'lucide-vue-next';
import MemberCard from '../members/MemberCard.vue';
import Spinner from '../ui/spinner/Spinner.vue';
import { CopyLink } from '@/lib/copyLink';
const route = useRoute();
@@ -178,17 +179,20 @@ defineExpose({ forceReload })
<template>
<div v-if="loaded">
<!-- Header -->
<div class="flex items-center justify-between gap-3 border-b px-4 py-3 h-14">
<h2 class="text-lg font-semibold break-all">
<div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
<h2 class="text-lg font-semibold break-after-all">
{{ activeEvent?.name || 'Event' }}
</h2>
<div class="flex gap-4 items-center">
<div class="flex gap-2 items-center">
<DropdownMenu v-if="canEditEvent">
<DropdownMenuTrigger>
<button
<Button variant="ghost" size="icon">
<EllipsisVertical class="size-5" />
</Button>
<!-- <button
class="inline-flex flex-none size-8 items-center justify-center cursor-pointer rounded-md hover:bg-muted/40 transition">
<EllipsisVertical class="size-6" />
</button>
</button> -->
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="emit('edit', activeEvent)">
@@ -202,11 +206,17 @@ defineExpose({ forceReload })
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<button
class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer"
<Button variant="ghost" size="icon" @click="CopyLink()">
<Link class="size-4" />
</Button>
<Button variant="ghost" size="icon" @click="emit('close')">
<X class="size-5" />
</Button>
<!-- <button
class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted transition cursor-pointer"
aria-label="Close" @click="emit('close')">
<X class="size-4" />
</button>
</button> -->
</div>
</div>
<!-- Body -->
@@ -293,11 +303,9 @@ defineExpose({ forceReload })
</div>
</div>
<div v-else class="flex justify-center h-full items-center">
<button
class="absolute top-4 right-4 inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer z-50"
aria-label="Close" @click="emit('close')">
<X class="size-4" />
</button>
<Button variant="ghost" size="icon" @click="emit('close')">
<X class="size-5" />
</Button>
<Spinner class="size-8"></Spinner>
</div>

View File

@@ -10,7 +10,7 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table'
import { ArrowUpDown, ChevronDown, ChevronUp, Funnel, Plus, Search, X } from 'lucide-vue-next';
import { ArrowUpDown, ChevronDown, ChevronUp, Funnel, Link, Plus, Search, X } from 'lucide-vue-next';
import Button from '@/components/ui/button/Button.vue';
import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
@@ -33,6 +33,7 @@ import {
PaginationPrevious,
} from '@/components/ui/pagination'
import Tooltip from '@/components/tooltip/Tooltip.vue';
import { CopyLink } from '@/lib/copyLink';
enum sidePanelState { view, create, closed };
@@ -236,9 +237,14 @@ const expanded = ref<number>(null);
<div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
<div class="flex justify-between items-center">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
<Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
<X class="size-6"></X>
</Button>
<div class="flex items-center gap-2">
<Button class="cursor-pointer" variant="ghost" size="icon" @click="CopyLink()">
<Link class="size-4" />
</Button>
<Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
<X class="size-6"></X>
</Button>
</div>
</div>
<div v-if="TRLoaded" class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
<div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
@@ -251,7 +257,7 @@ const expanded = ref<number>(null);
:member-id="focusedTrainingReport.created_by" />
<p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
focusedTrainingReport.created_by_name
}}</p>
}}</p>
</p>
</div>
</div>