89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
|
<li
|
|
class="project">
|
|
<router-link
|
|
:to="{name: 'project', params: {slug: project.slug}}"
|
|
tag="div"
|
|
class="project__link"
|
|
data-cy="project-link">
|
|
<span
|
|
class="project__title"
|
|
data-cy="project-title">{{ project.title }}</span>
|
|
|
|
<owner-widget
|
|
:owner="project.student"
|
|
class="project__owner"/>
|
|
|
|
<entry-count-widget
|
|
:verbose="false"
|
|
:entry-count="project.entriesCount"/>
|
|
|
|
</router-link>
|
|
<project-actions
|
|
:id="project.id"
|
|
:final="project.final"
|
|
data-cy="project-actions"
|
|
class="project__actions"
|
|
v-if="!isReadOnly && isOwner"/>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
import OwnerWidget from '@/components/portfolio/OwnerWidget';
|
|
import ProjectActions from '@/components/portfolio/ProjectActions';
|
|
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
|
|
|
import me from '@/mixins/me';
|
|
|
|
export default {
|
|
props: {
|
|
project: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
}
|
|
},
|
|
|
|
mixins: [me],
|
|
|
|
components: {
|
|
EntryCountWidget,
|
|
OwnerWidget,
|
|
ProjectActions,
|
|
},
|
|
|
|
computed: {
|
|
isOwner() {
|
|
return this.project.student.id === this.me.id;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.project {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: $small-spacing 0;
|
|
border-bottom: 1px solid $color-silver;
|
|
|
|
&__link {
|
|
flex: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__title {
|
|
flex: 50%;
|
|
@include heading-4;
|
|
}
|
|
|
|
&__owner {
|
|
flex: 40%;
|
|
}
|
|
}
|
|
</style>
|