web/satellite: name hint (#3515)

This commit is contained in:
Nikolay Yurchenko 2019-11-08 19:23:01 +02:00 committed by GitHub
parent 9ce6dad317
commit 06a52e75b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 50 deletions

View File

@ -10,9 +10,11 @@
<div class="avatar">
<AvatarIcon class="avatar__image"/>
</div>
<p class="name">{{getItemName}}</p>
<div :title="itemData.name">
<p class="name">{{ itemData.formattedName() }}</p>
</div>
</div>
<p class="date">{{getItemDate}}</p>
<p class="date">{{ itemData.getDate() }}</p>
</div>
</template>
@ -33,14 +35,6 @@ import { ApiKey } from '@/types/apiKeys';
export default class ApiKeysItem extends Vue {
@Prop({default: () => new ApiKey('', '', '', '')})
private readonly itemData: ApiKey;
public get getItemName(): string {
return this.itemData.formattedName();
}
public get getItemDate(): string {
return this.itemData.getDate();
}
}
</script>

View File

@ -3,10 +3,10 @@
<template>
<div class="container">
<div class="container__item">{{ name }}</div>
<div class="container__item">{{ storage }}</div>
<div class="container__item">{{ egress }}</div>
<div class="container__item">{{ objectCount }}</div>
<div class="container__item" :title="itemData.bucketName">{{ itemData.formattedBucketName() }}</div>
<div class="container__item">{{ itemData.storage.toFixed(4) }}</div>
<div class="container__item">{{ itemData.egress.toFixed(4) }}</div>
<div class="container__item">{{ itemData.objectCount.toString() }}</div>
</div>
</template>
@ -15,27 +15,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import { Bucket } from '@/types/buckets';
// TODO: should it be functional?
@Component
export default class BucketItem extends Vue {
@Prop({default: () => new Bucket('', 0, 0, 0, new Date(), new Date())})
private readonly itemData: Bucket;
public get name(): string {
return this.itemData.formattedBucketName();
}
public get storage(): string {
return this.itemData.storage.toFixed(4);
}
public get egress(): string {
return this.itemData.egress.toFixed(4);
}
public get objectCount(): string {
return this.itemData.objectCount.toString();
}
}
</script>

View File

@ -8,13 +8,13 @@
<div class="user-container__base-info__avatar" :class="{ 'extra-margin': isProjectOwner }" :style="avatarData.style">
<h1 class="user-container__base-info__avatar__letter">{{avatarData.letter}}</h1>
</div>
<div class="user-container__base-info__name-area">
<p class="user-container__base-info__name-area__user-name">{{itemName}}</p>
<div class="user-container__base-info__name-area" :title="itemData.name">
<p class="user-container__base-info__name-area__user-name">{{ itemData.formattedFullName() }}</p>
<p v-if="isProjectOwner" class="user-container__base-info__name-area__owner-status">Project Owner</p>
</div>
</div>
<p class="user-container__date">{{itemDate}}</p>
<p class="user-container__user-email">{{itemEmail}}</p>
<p class="user-container__date">{{ itemData.joinedAtLocal() }}</p>
<p class="user-container__user-email">{{ itemData.formattedEmail() }}</p>
</div>
</template>
@ -44,18 +44,6 @@ export default class ProjectMemberListItem extends Vue {
};
}
public get itemName(): string {
return this.itemData.formattedFullName();
}
public get itemDate(): string {
return this.itemData.joinedAtLocal();
}
public get itemEmail(): string {
return this.itemData.formattedEmail();
}
public get isProjectOwner(): boolean {
return this.itemData.user.id === this.$store.getters.selectedProject.ownerId;
}

View File

@ -99,6 +99,10 @@ export class ProjectMember {
this.isSelected = false;
}
public get name(): string {
return this.user.getFullName();
}
public formattedFullName(): string {
let fullName: string = this.user.getFullName();

View File

@ -12,7 +12,9 @@ exports[`ApiKeysItem.vue renders correctly 1`] = `
<path d="M10.7754 13.666C11.4928 13.666 12.0815 14.2669 12.0815 14.9993C12.0815 15.7318 11.4928 16.3327 10.7754 16.3327C10.0579 16.3327 9.46924 15.7318 9.46924 14.9993C9.46924 14.2669 10.0579 13.666 10.7754 13.666Z" fill="#2683FF"></path>
<path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"></path>
</svg></div>
<p class="name"></p>
<div title="">
<p class="name"></p>
</div>
</div>
<p class="date"></p>
</div>

View File

@ -7,7 +7,7 @@ exports[`should render correctly 1`] = `
<div class="user-container__base-info__avatar extra-margin" style="background: rgb(88, 185, 255);">
<h1 class="user-container__base-info__avatar__letter">T</h1>
</div>
<div class="user-container__base-info__name-area">
<div title="testShortName" class="user-container__base-info__name-area">
<p class="user-container__base-info__name-area__user-name">testShortName</p>
<p class="user-container__base-info__name-area__owner-status">Project Owner</p>
</div>
@ -24,7 +24,7 @@ exports[`should render correctly with item row highlighted 1`] = `
<div class="user-container__base-info__avatar extra-margin" style="background: rgb(88, 185, 255);">
<h1 class="user-container__base-info__avatar__letter">T</h1>
</div>
<div class="user-container__base-info__name-area">
<div title="testShortName" class="user-container__base-info__name-area">
<p class="user-container__base-info__name-area__user-name">testShortName</p>
<p class="user-container__base-info__name-area__owner-status">Project Owner</p>
</div>