Skip to content

Commit

Permalink
web/satellite: update projects table component
Browse files Browse the repository at this point in the history 
This changes project management page to match the new table designs.

Change-Id: I7d24f130d4703b7d273cfc0336cf679c2e6f3fd6
  • Loading branch information
Malcolm Bouzi committed Aug 8, 2022
1 parent 9e64a87 commit 4c5466a
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 76 deletions.
67 changes: 35 additions & 32 deletions web/satellite/src/components/projectsList/ProjectsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,46 @@
:is-disabled="areProjectsFetching"
/>
</div>
<VLoader v-if="areProjectsFetching" width="100px" height="100px" class="projects-loader" />
<div v-if="projectsPage.projects.length && !areProjectsFetching" class="projects-list-items">
<SortProjectsListHeader />
<div class="projects-list-items__content">
<VList
:data-set="projectsPage.projects"
:item-component="itemComponent"
:on-item-click="onProjectSelected"
<VLoader
v-if="areProjectsFetching"
width="100px"
height="100px"
class="projects-loader"
/>
<v-table
v-if="projectsPage.projects.length && !areProjectsFetching"
class="projects-list-items"
:limit="projectsPage.limit"
:total-page-count="projectsPage.pageCount"
:items="projectsPage.projects"
items-label="projects"
:on-page-click-callback="onPageClick"
:total-items-count="projectsPage.totalCount"
>
<template #head>
<th class="sort-header-container__name-item align-left">Name</th>
<th class="ort-header-container__users-item align-left"># Users</th>
<th class="sort-header-container__date-item align-left">Date Added</th>
</template>
<template #body>
<ProjectsListItem
v-for="(project, key) in projectsPage.projects"
:key="key"
:item-data="project"
:on-click="onProjectSelected"
/>
</div>
<div v-if="projectsPage.pageCount > 1" class="projects-list-items__pagination-area">
<VPagination
:total-page-count="projectsPage.pageCount"
:on-page-click-callback="onPageClick"
/>
</div>
</div>
</template>
</v-table>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import VList from '@/components/common/VList.vue';
import VLoader from '@/components/common/VLoader.vue';
import VPagination from '@/components/common/VPagination.vue';
import VTable from "@/components/common/VTable.vue";
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import SortProjectsListHeader from '@/components/projectsList/SortProjectsListHeader.vue';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
Expand All @@ -64,11 +75,10 @@ const {
// @vue/component
@Component({
components: {
SortProjectsListHeader,
ProjectsListItem,
VButton,
VList,
VPagination,
VLoader,
VTable
},
})
export default class Projects extends Vue {
Expand Down Expand Up @@ -166,6 +176,8 @@ export default class Projects extends Vue {
public get projectsPage(): ProjectsPage {
return this.$store.state.projectsModule.page;
}
}
</script>

Expand All @@ -191,16 +203,7 @@ export default class Projects extends Vue {
}
.projects-list-items {
&__content {
background-color: #fff;
display: flex;
flex-direction: column;
width: calc(100% - 32px);
justify-content: flex-start;
padding: 16px;
border-radius: 0 0 8px 8px;
}
margin-top: 40px;
}
}
Expand Down
57 changes: 13 additions & 44 deletions web/satellite/src/components/projectsList/ProjectsListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,42 @@
// See LICENSE for copying information.

<template>
<div class="container">
<p class="container__item name" :title="itemData.name">{{ itemData.name }}</p>
<p class="container__item member-count">{{ itemData.memberCount }}</p>
<p class="container__item date">{{ itemData.createdDate() }}</p>
</div>
<table-item
:item="{ name: itemData.name, memberCount: itemData.memberCount, date: itemData.createdDate() }"
:on-click="onClick"
class="container__item"
/>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Project } from '@/types/projects';
import TableItem from "@/components/common/TableItem.vue";
// @vue/component
@Component
@Component({
components: {
TableItem,
},
})
export default class ProjectsListItem extends Vue {
@Prop({default: () => new Project('123', 'name', 'desc')})
private readonly itemData: Project;
@Prop({ default: () => (_: string) => {} })
public readonly onClick: (project: string) => void;
}
</script>

<style scoped lang="scss">
.container {
padding: 20px 40px;
outline: none;
display: flex;
background: #fff;
margin-bottom: 1px;
width: calc(100% - 80px);
cursor: pointer;
&__item {
width: 33%;
font-family: 'font_regular', sans-serif;
font-size: 16px;
margin: 0;
}
.name {
width: 33%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'font_bold', sans-serif;
}
.description {
margin-left: 14px;
}
.member-count {
position: relative;
left: 12px;
}
.date {
position: relative;
left: 14px;
text-transform: uppercase;
}
&:hover {
background-color: rgb(242 244 247 / 60%);
.name {
text-decoration: underline;
}
}
}
</style>

1 comment on commit 4c5466a

@storjrobot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Storj Community Forum (official). There might be relevant details there:

https://forum.storj.io/t/release-preparation-v1-62/19444/1

Please sign in to comment.