web/satellite: add project role for expired invitations

Pending project members whose invitations have expired now appear with
the "Invite Expired" role in the Team page.

References #5752

Change-Id: Ic91289618ee02e65de29e986fa3205eccf39b267
This commit is contained in:
Jeremy Wharton 2023-06-22 00:42:39 -05:00 committed by Jeremy Wharton
parent adbd4fbab2
commit 25c21f03c3
5 changed files with 34 additions and 10 deletions

View File

@ -27,7 +27,7 @@
</p>
<p v-else :class="{primary: index === 0}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
<middle-truncate v-if="keyVal === 'fileName'" :text="val" />
<project-ownership-tag v-else-if="keyVal === 'role'" :no-icon="itemType !== 'project' && val !== ProjectRole.Invited" :role="val" />
<project-ownership-tag v-else-if="keyVal === 'role'" :no-icon="!isProjectRoleIconShown(val)" :role="val" />
<span v-else>{{ val }}</span>
</p>
<div v-if="showBucketGuide(index)" class="animation">
@ -92,6 +92,10 @@ const customIconClasses = computed(() => {
return classes;
});
function isProjectRoleIconShown(role: ProjectRole) {
return props.itemType === 'project' || role === ProjectRole.Invited || role === ProjectRole.InviteExpired;
}
function selectClicked(event: Event): void {
emit('selectClicked', event);
}

View File

@ -2,9 +2,8 @@
// See LICENSE for copying information.
<template>
<div class="tag" :class="{[role.toLowerCase()]: true}">
<div class="tag" :class="{[role.toLowerCase().replaceAll(' ', '-')]: true}">
<component :is="icon" v-if="!noIcon" class="tag__icon" />
<span class="tag__text">{{ role }}</span>
</div>
</template>
@ -16,6 +15,7 @@ import { ProjectRole } from '@/types/projectMembers';
import BoxIcon from '@/../static/images/navigation/project.svg';
import InviteIcon from '@/../static/images/navigation/quickStart.svg';
import ClockIcon from '@/../static/images/team/clock.svg';
const props = withDefaults(defineProps<{
role: ProjectRole,
@ -26,7 +26,14 @@ const props = withDefaults(defineProps<{
});
const icon = computed((): string => {
return props.role === ProjectRole.Invited ? InviteIcon : BoxIcon;
switch (props.role) {
case ProjectRole.Invited:
return InviteIcon;
case ProjectRole.InviteExpired:
return ClockIcon;
default:
return BoxIcon;
}
});
</script>
@ -65,13 +72,18 @@ const icon = computed((): string => {
}
}
&.invited {
&.invited,
&.invite-expired {
color: var(--c-grey-6);
border-color: var(--c-grey-4);
}
:deep(path) {
fill: var(--c-yellow-3);
}
&.invited :deep(path) {
fill: var(--c-yellow-3);
}
&.invite-expired :deep(path) {
fill: var(--c-grey-4);
}
}
</style>

View File

@ -16,7 +16,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { ProjectMember, ProjectMemberItemModel, ProjectRole } from '@/types/projectMembers';
import { ProjectInvitationItemModel, ProjectMember, ProjectMemberItemModel, ProjectRole } from '@/types/projectMembers';
import { useResize } from '@/composables/resize';
import { useProjectsStore } from '@/store/modules/projectsStore';
@ -38,7 +38,11 @@ const isProjectOwner = computed((): boolean => {
const itemToRender = computed((): { [key: string]: unknown } => {
let role: ProjectRole = ProjectRole.Member;
if (props.model.isPending()) {
role = ProjectRole.Invited;
if ((props.model as ProjectInvitationItemModel).expired) {
role = ProjectRole.InviteExpired;
} else {
role = ProjectRole.Invited;
}
} else if (isProjectOwner.value) {
role = ProjectRole.Owner;
}

View File

@ -292,4 +292,5 @@ export enum ProjectRole {
Member = 'Member',
Owner = 'Owner',
Invited = 'Invited',
InviteExpired = 'Invite Expired',
}

View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.075 4.45C10.5195 4.45 10.8819 4.80157 10.8993 5.24182L10.9 5.275L10.9002 9.373H14.398C14.8536 9.373 15.223 9.74237 15.223 10.198C15.223 10.6425 14.8714 11.0049 14.4312 11.0223L14.398 11.023H10.1574C9.98602 11.023 9.82617 10.9724 9.69221 10.8852C9.43851 10.7585 9.26053 10.5004 9.25044 10.1971L9.25011 10.1838L9.25 5.275C9.25 4.81937 9.61937 4.45 10.075 4.45Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 754 B