ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add edit and copy to clipboard

Browse Source
This commit is contained in:
rotimi-best
2021-10-10 14:05:50 +03:00
parent 32ee665cb4
commit 1da1f779df
5 changed files with 86 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+27
View File
@@ -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
+1
View File
@@ -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
+3 -3
View File
@@ -1,7 +1,7 @@
<script>
export let name;
export let src;
export let className;
export let name = '';
export let src = '';
export let className = '';
</script>
<img
src/components/Form/Select.svelte
+1 -1
View File
@@ -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
+54 -16
View File
@@ -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() {
shouldEditMemberId = true;
function handleEditStudentIdMode(personId: string) {
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}
<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}
{#if shouldEditMemberId === person.id}
<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>