Merge pull request '#136-Link-Copy' (#140) from #136-Link-Copy into main

Reviewed-on: #140

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -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">
+        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
-            <h2 class="text-lg font-semibold break-all">
+            <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
+                <Button variant="ghost" size="icon" @click="CopyLink()">
-                    class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer"
+                    <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
+        <Button variant="ghost" size="icon" @click="emit('close')">
-            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"
+            <X class="size-5" />
-            aria-label="Close" @click="emit('close')">
+        </Button>
-            <X class="size-4" />
-        </button>
 
         <Spinner class="size-8"></Spinner>
     </div>

ui/src/lib/copyLink.ts

@@ -0,0 +1,3 @@
+export function CopyLink() {
+    navigator.clipboard.writeText(window.location.href);
+}

ui/src/pages/Application.vue

@@ -5,10 +5,11 @@ import { onMounted, ref } from 'vue';
 import { approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, getMyApplication, postAdminChatMessage } from '@/api/application';
 import { useRoute } from 'vue-router';
 import Button from '@/components/ui/button/Button.vue';
-import { CheckIcon, XIcon } from 'lucide-vue-next';
+import { CheckIcon, Link, XIcon } from 'lucide-vue-next';
 import Unauthorized from './Unauthorized.vue';
 import { ApplicationData, ApplicationFull, ApplicationStatus, CommentRow } from '@shared/types/application';
 import Spinner from '@/components/ui/spinner/Spinner.vue';
+import { CopyLink } from '@/lib/copyLink';
 
 const appData = ref<ApplicationData>(null);
 const appID = ref<number | null>(null);
@@ -143,7 +144,10 @@ async function handleDeny(id) {
             <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
                 <!-- Application header -->
                 <div>
-                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
+                    <div class="flex gap-4 items-center">
+                        <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
+                        <Button variant="ghost" size="icon" @click="CopyLink()"><Link class="size-5"/></Button>
+                    </div>
                     <p class="text-muted-foreground">Submitted: {{ submitDate?.toLocaleString("en-US", {
                         year: "numeric",
                         month: "long",

ui/src/pages/ManageApplications.vue

@@ -13,9 +13,10 @@ import {
 import Button from '@/components/ui/button/Button.vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { CheckIcon, XIcon } from 'lucide-vue-next';
+import { CheckIcon, Link, XIcon } from 'lucide-vue-next';
 import Application from './Application.vue';
 import MemberCard from '@/components/members/MemberCard.vue';
+import { CopyLink } from '@/lib/copyLink';
 
 const appList = ref([]);
 const now = Date.now();
@@ -127,9 +128,11 @@ onMounted(async () => {
         <div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
             <div class="mb-5 flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p>
-                <button @click="closeApplication()" class="cursor-pointer">
+                <div class="flex items-center gap-2">
-                    <XIcon></XIcon>
+                    <Button @click="closeApplication()" variant="ghost" size="icon">
-                </button>
+                        <XIcon class="size-6"></XIcon>
+                    </Button>
+                </div>
             </div>
             <div class="overflow-y-auto max-h-[80vh] h-full mt-5 scrollbar-themed">
                 <Application :mode="'view-recruiter'"></Application>

ui/src/pages/TrainingReport.vue

@@ -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">
+                <div class="flex items-center gap-2">
-                    <X class="size-6"></X>
+                    <Button class="cursor-pointer" variant="ghost" size="icon" @click="CopyLink()">
-                </Button>
+                        <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>