From 5df818e36709d55c96b3ab25c4b898df715a3872 Mon Sep 17 00:00:00 2001
From: Jake/Rads <jake.fulminated@gmail.com>
Date: Tue, 28 Jun 2022 08:04:19 +0200
Subject: [PATCH] feat(dashboard): copy short link from pages

---
 dashboard/src/pages/Group.svelte  | 23 +++++++++++++++++++++--
 dashboard/src/pages/Member.svelte | 22 ++++++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
index 38cba0f8..34c455ab 100644
--- a/dashboard/src/pages/Group.svelte
+++ b/dashboard/src/pages/Group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle } from "sveltestrap";
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
     import Body from '../lib/group/Body.svelte';
     import { useParams, Link, navigate } from 'svelte-navigator';
     import { onMount } from 'svelte';
@@ -21,6 +21,7 @@
     let systemMembers: Group[] = [];
     let isDeleted = false;
     let notOwnSystem = false;
+    let copied = false;
 
     const isPage = true;
     export let isPublic = true;
@@ -105,6 +106,21 @@
         members = members.filter(member => member.id !== event.detail);
         systemMembers = systemMembers.filter(member => member.id !== event.detail);
   }
+
+    async function copyShortLink(event?) {
+        if (event) {
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(`https://pk.mt/g/${group.id}`);
+            copied = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copied = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
 </script>
 
 {#if settings && settings.appearance.color_background && !notOwnSystem}
@@ -133,8 +149,11 @@
                 <Card class="mb-4">
                     <CardHeader>
                         <CardsHeader bind:item={group}>
-                            <FaUsers slot="icon" />
+                            <div slot="icon" style="cursor: pointer;" id={`group-copy-${group.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
+                                <FaUsers slot="icon" />
+                            </div>
                         </CardsHeader>
+                        <Tooltip placement="top" target={`group-copy-${group.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
                     </CardHeader>
                     <CardBody>
                         <Body on:deletion={updateDelete} on:updateMembers={updateMembers} bind:members={systemMembers} bind:group={group} isPage={isPage} isPublic={isPublic}/>
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
index eb34ecef..cff65d8b 100644
--- a/dashboard/src/pages/Member.svelte
+++ b/dashboard/src/pages/Member.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
     import Body from '../lib/member/Body.svelte';
     import CardsList from '../lib/list/CardsList.svelte';
     import { useParams, Link, navigate } from 'svelte-navigator';
@@ -22,6 +22,7 @@
     let systemMembers: Member[] = [];
     let isDeleted = false;
     let notOwnSystem = false;
+    let copied = false;
 
     const isPage = true;
     export let isPublic = true;
@@ -107,6 +108,20 @@
         systemGroups = systemGroups.filter(group => group.id !== event.detail);
   }
 
+    async function copyShortLink(event?) {
+        if (event) {
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(`https://pk.mt/m/${member.id}`);
+            copied = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copied = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
 </script>
 
 {#if settings && settings.appearance.color_background && !notOwnSystem}
@@ -135,8 +150,11 @@
                 <Card class="mb-4">
                     <CardHeader>
                         <CardsHeader bind:item={member}>
-                            <FaAddressCard slot="icon" />
+                            <div slot="icon" style="cursor: pointer;" id={`member-copy-${member.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
+                                <FaAddressCard slot="icon" />
+                            </div>
                         </CardsHeader>
+                        <Tooltip placement="top" target={`member-copy-${member.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
                     </CardHeader>
                     <CardBody>
                         <Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
