web/satellite: name hint (#3515)
This commit is contained in:
parent
9ce6dad317
commit
06a52e75b8
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user