Add edit and copy to clipboard

package-lock.json

@@ -18,6 +18,7 @@
         "canvas-confetti": "^1.4.0",
         "compression": "^1.7.1",
         "cookie-parser": "^1.4.5",
+        "copy-to-clipboard": "^3.3.1",
         "express": "^4.17.1",
         "hotkeys-js": "^3.8.5",
         "js-yaml": "^4.1.0",
@@ -2732,6 +2733,14 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.12.1.tgz",
@@ -6185,6 +6194,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "node_modules/toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -8832,6 +8846,14 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js-compat": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.12.1.tgz",
@@ -11463,6 +11485,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "canvas-confetti": "^1.4.0",
     "compression": "^1.7.1",
     "cookie-parser": "^1.4.5",
+    "copy-to-clipboard": "^3.3.1",
     "express": "^4.17.1",
     "hotkeys-js": "^3.8.5",
     "js-yaml": "^4.1.0",

src/components/Avatar/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  export let name;
+  export let name = '';
-  export let src;
+  export let src = '';
-  export let className;
+  export let className = '';
 </script>
 
 <img

src/components/Form/Select.svelte

@@ -8,7 +8,6 @@
   export let isRequired = false;
   export let className = '';
   export let selectClassName = '';
-  export let color = 'default'; // primary
   export let onChange = () => {}; // This is to know if element is 'dirty'
 
   // onMount(() => {
@@ -22,6 +21,7 @@
     bind:value
     class="form-select block w-auto mt-1 {selectClassName}"
     required={isRequired}
+    on:blur={() => {}}
     on:change={onChange}
     class:customColor={!!selectClassName}
   >

src/routes/courses/[id]/people.svelte

@@ -12,7 +12,10 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import copy from 'copy-to-clipboard';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import Edit16 from 'carbon-icons-svelte/lib/Edit16';
+  import Copy16 from 'carbon-icons-svelte/lib/Copy16';
   import Delete24 from 'carbon-icons-svelte/lib/Delete24';
   import Avatar from '../../../components/Avatar/index.svelte';
   import PageNav from '../../../components/PageNav/index.svelte';
@@ -39,13 +42,14 @@
   } from '../../../components/Course/components/People/types';
   import { ROLE_LABEL, ROLES } from '../../../utils/constants/roles';
   import { profile } from '../../../utils/store/user';
+  import { snackbarStore } from '../../../components/Snackbar/store';
 
   export let courseId: string = '';
 
   let people: Array<Person> = [];
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
-  let shouldEditMemberId = false;
+  let shouldEditMemberId: string | null = null;
   let filterBy: ProfileRole = ROLES[0];
   let isStudent = false;
 
@@ -69,7 +73,7 @@
       { assigned_student_id: person.assigned_student_id },
       { id: person.id }
     );
-    shouldEditMemberId = false;
+    shouldEditMemberId = null;
   }
 
   function sortAndFilterPeople(_people: Array<Person>, filterBy: ProfileRole) {
@@ -82,8 +86,17 @@
       .sort((a: Person, b: Person) => a.role_id - b.role_id);
   }
 
-  function handleEditStudentIdMode() {
+  function handleEditStudentIdMode(personId: string) {
-    shouldEditMemberId = true;
+    shouldEditMemberId = personId;
+  }
+
+  function copyToClipboard(studentAssignedId: string | null) {
+    $snackbarStore.open = true;
+    $snackbarStore.message = `Copied to clipboard`;
+
+    if (studentAssignedId) {
+      copy(studentAssignedId);
+    }
   }
 
   onMount(async () => {
@@ -127,7 +140,7 @@
       <div
         class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
       >
-        <span class="mr-2 w-20 text-center">ID</span>
+        <span class="w-1/4 text-center">ID</span>
         <!-- <span class="flex-grow" /> -->
         <p class="text-lg w-2/4">Name</p>
         <p class="text-lg w-1/4 ">Role</p>
@@ -136,24 +149,30 @@
         </RoleBasedSecurity>
       </div>
 
-      {#each people as person, index}
+      {#each people as person}
         <div class="flex relative items-center p-3 {borderBottomGrey}">
-          {#if !shouldEditMemberId}
+          {#if shouldEditMemberId === person.id}
-            <p
-              class="mr-2 w-10 text-center {!isStudent &&
-                'hover:bg-gray-100 cursor-pointer'} p-3"
-              on:click={() => !isStudent && handleEditStudentIdMode()}
-            >
-              {person.assigned_student_id || '-'}
-            </p>
-          {:else}
             <TextField
               bind:value={person.assigned_student_id}
               type="string"
               placeholder="Unique ID"
-              className="w-20"
+              className="w-1/4"
               onChange={() => editMemberId(person)}
             />
+          {:else}
+            <div class="student-id flex items-center justify-between relative">
+              <p class="w-11/12">{person.assigned_student_id || '-'}</p>
+              <div class="absolute {!isStudent && 'edit-btn'}">
+                <IconButton onClick={() => handleEditStudentIdMode(person.id)}>
+                  <Edit16 class="carbon-icon active" />
+                </IconButton>
+                <IconButton
+                  onClick={() => copyToClipboard(person.assigned_student_id)}
+                >
+                  <Copy16 class="carbon-icon active" />
+                </IconButton>
+              </div>
+            </div>
           {/if}
           <!-- <span class="flex-grow" /> -->
           {#if person.profile}
@@ -214,4 +233,23 @@
     width: fit-content;
     padding: 1px 15px;
   }
+
+  .student-id {
+    width: 155px;
+  }
+
+  .student-id p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .edit-btn {
+    display: none;
+  }
+  .student-id:hover .edit-btn {
+    display: flex;
+    bottom: 20px;
+    right: 0px;
+  }
 </style>