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:
parent
adbd4fbab2
commit
25c21f03c3
@ -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);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -292,4 +292,5 @@ export enum ProjectRole {
|
||||
Member = 'Member',
|
||||
Owner = 'Owner',
|
||||
Invited = 'Invited',
|
||||
InviteExpired = 'Invite Expired',
|
||||
}
|
||||
|
3
web/satellite/static/images/team/clock.svg
Normal file
3
web/satellite/static/images/team/clock.svg
Normal 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 |
Loading…
Reference in New Issue
Block a user