JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrate ProjectsListItem to use SFC composition api

Browse Source 
Migrated component to use SFC composition api

Change-Id: I6bb84ba8f64c84efdba1a5a3ee8723563c163a87
This commit is contained in:
Vitalii 2023-03-22 13:10:45 +02:00 committed by Storj Robot
parent 0fd43caffe
commit 8668e0c716
2 changed files with 21 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/satellite/src/components/projectsList/ProjectsListItem.vue
View File

@ -9,32 +9,35 @@
/>
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
<script setup lang="ts">
import { computed } from 'vue';
import { Project } from '@/types/projects';
import { useResize } from '@/composables/resize';
import TableItem from '@/components/common/TableItem.vue';
import Resizable from '@/components/common/Resizable.vue';
// @vue/component
@Component({
components: {
TableItem,
},
})
export default class ProjectsListItem extends Resizable {
@Prop({ default: () => new Project('123', 'name', 'desc') })
private readonly itemData: Project;
@Prop({ default: () => (_: string) => {} })
public readonly onClick: (project: string) => void;
const props = withDefaults(defineProps<{
itemData: Project,
onClick: (project: string) => void,
}>(), {
itemData: () => new Project('default', 'name', 'desc'),
onClick: (_: string) => {},
});
public get itemToRender(): { [key: string]: string | string[] } {
if (!this.isMobile) return { name: this.itemData.name, memberCount: this.itemData.memberCount.toString(), date: this.itemData.createdDate() };
const { isMobile } = useResize();
return { info: [ this.itemData.name, `Created ${this.itemData.createdDate()}` ] };
const itemToRender = computed((): { [key: string]: string | string[] } => {
if (!isMobile.value) {
return {
name: props.itemData.name,
memberCount: props.itemData.memberCount.toString(),
date: props.itemData.createdDate(),
};
}
}
return { info: [ props.itemData.name, `Created ${props.itemData.createdDate()}` ] };
});
</script>
<style scoped lang="scss">
@ -47,5 +50,4 @@ export default class ProjectsListItem extends Resizable {
margin: 0;
}
}
</style>

71
web/satellite/src/components/projectsList/SortProjectsListHeader.vue
View File

@ -1,71 +0,0 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="sort-header-container">
<div class="sort-header-container__name-item">
<p class="sort-header-container__name-item__title">NAME</p>
</div>
<div class="sort-header-container__users-item">
<p class="sort-header-container__users-item__title"># USERS</p>
</div>
<div class="sort-header-container__date-item">
<p class="sort-header-container__date-item__title">DATE ADDED</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class SortProjectsListHeader extends Vue {}
</script>
<style scoped lang="scss">
.sort-header-container {
display: flex;
width: calc(100% - 32px);
height: 40px;
background-color: #fff;
margin-top: 31px;
padding: 16px 16px 0;
border-radius: 8px 8px 0 0;
&__name-item,
&__data-item,
&__users-item,
&__date-item {
width: 33%;
display: flex;
align-items: center;
margin: 0;
&__title {
font-family: 'font_medium', sans-serif;
font-size: 16px;
margin: 0 0 0 23px;
color: #2a2a32;
}
.creation-date {
margin-left: 0;
}
}
&__date-item {
&__title {
margin: 0;
}
}
&__name-item {
&__title {
margin: 0 0 0 40px;
}
}
}
</style>