/
ProjectMemberListItem.vue
81 lines (67 loc) · 2.28 KB
/
ProjectMemberListItem.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<table-item
:class="{ 'owner': isProjectOwner }"
:item="itemToRender"
:selectable="true"
:select-disabled="isProjectOwner"
:selected="model.isSelected()"
:on-click="(_) => $emit('memberClick', model)"
@selectClicked="($event) => $emit('selectClicked', $event)"
/>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { ProjectMember, ProjectMemberItemModel, ProjectRole } from '@/types/projectMembers';
import { useResize } from '@/composables/resize';
import { useProjectsStore } from '@/store/modules/projectsStore';
import TableItem from '@/components/common/TableItem.vue';
const { isMobile, isTablet } = useResize();
const projectsStore = useProjectsStore();
const props = withDefaults(defineProps<{
model: ProjectMemberItemModel;
}>(), {
model: () => new ProjectMember('', '', '', new Date(), ''),
});
const isProjectOwner = computed((): boolean => {
return props.model.getUserID() === projectsStore.state.selectedProject.ownerId;
});
const itemToRender = computed((): { [key: string]: unknown } => {
let role: ProjectRole = ProjectRole.Member;
if (props.model.isPending()) {
role = ProjectRole.Invited;
} else if (isProjectOwner.value) {
role = ProjectRole.Owner;
}
if (!isMobile.value && !isTablet.value) {
const dateStr = props.model.getJoinDate().toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
return {
name: props.model.getName(),
email: props.model.getEmail(),
role: role,
date: dateStr,
};
}
if (isTablet.value) {
return { name: props.model.getName(), email: props.model.getEmail(), role: role };
}
// TODO: change after adding actions button to list item
return { name: props.model.getName(), email: props.model.getEmail() };
});
</script>
<style scoped lang="scss">
:deep(.primary) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:deep(th) {
max-width: 25rem;
}
@media screen and (width <= 940px) {
:deep(th) {
max-width: 10rem;
}
}
</style>