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

web/satellite buckets empty state and search bugs fixed (#2597)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-07-19 16:40:42 +03:00 committed by GitHub
parent af93366fb0
commit 17a2e81af6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/satellite/src/components/buckets/BucketArea.vue
View File

@ -3,12 +3,13 @@
<template>
<div>
<div class="buckets-overflow" v-if="pages >= 0">
<NoBucketArea v-if="!totalCountOfBuckets && !search" />
<div class="buckets-overflow" v-else>
<div class="buckets-header">
<p>Buckets</p>
<SearchArea/>
</div>
<div v-if="buckets.length >= 0" class="buckets-container">
<div v-if="buckets.length" class="buckets-container">
<table>
<SortingHeader />
<BucketItem v-for="(bucket, index) in buckets" v-bind:bucket="bucket" v-bind:key="index" />
@ -17,11 +18,10 @@
</div>
<EmptyState
class="empty-container"
v-if="pages === 0 && search && search.length > 0"
v-if="!pages && search"
mainTitle="Nothing found :("
:imageSource="emptyImage" />
</div>
<NoBucketArea v-if="pages === 0 && !search" />
</div>
</template>
@ -53,6 +53,10 @@
this.$store.dispatch(BUCKET_USAGE_ACTIONS.FETCH, 1);
}
public get totalCountOfBuckets(): number {
return this.$store.state.bucketUsageModule.totalCount;
}
public get buckets(): BucketUsage[] {
return this.$store.state.bucketUsageModule.page.bucketUsages;
}
@ -104,10 +108,6 @@
margin-top:20px;
}
}
.empty-container {
margin-top: 0;
}
@media screen and (max-height: 880px) {
.buckets-overflow {

14
web/satellite/src/components/buckets/NoBucketsArea.vue
View File

@ -4,7 +4,17 @@
<template>
<div class="no-buckets-area">
<div class="no-buckets-header">
<img src="../../../static/images/buckets/foldericon.svg">
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39 74C58.335 74 74 58.3243 74 38.9877C74 19.6511 58.335 4 39 4C19.665 4 4 19.6757 4 39.0123C4 58.3489 19.665 74 39 74Z" fill="#E8EAF2"/>
<path d="M38.842 25.8065V25.2764C38.842 24.4101 38.1258 23.7119 37.2438 23.7119H20.5455C19.6635 23.7119 18.9473 24.4101 18.9473 25.2699V53.4107H58.7367V27.358C58.7367 26.4982 58.0205 25.8 57.1385 25.8H38.842V25.8065Z" fill="#B0B6C9"/>
<path d="M57.3376 28.0498H20.7114V53.6952H57.3376V28.0498Z" fill="white"/>
<path d="M38.2717 31.2568L37.6815 32.8536H20.5455C19.6635 32.8536 18.9473 33.5518 18.9473 34.4181V54.2906C18.9473 55.1504 19.6635 55.8486 20.5455 55.8486H57.1319C58.0139 55.8486 58.7301 55.1504 58.7301 54.2906V31.7934C58.7301 30.9336 58.0139 30.2354 57.1319 30.2354H39.7837C39.1073 30.229 38.5038 30.6427 38.2717 31.2568Z" fill="#B0B6C9"/>
<path d="M58.7367 54.2834V41.3281C47.6819 51.8139 28.5167 54.6131 19.3916 55.363C19.6834 55.6604 20.0945 55.8478 20.5455 55.8478H57.1319C58.0205 55.8478 58.7367 55.1496 58.7367 54.2834Z" fill="#8F96AD"/>
<path d="M35.1082 34.1133H21.5798C20.8636 34.1133 20.2866 34.6757 20.2866 35.3739V38.1666C22.5613 36.641 27.6941 34.7274 35.1082 34.1133Z" fill="#B0B6C9"/>
<defs>
<rect width="39.7895" height="32.136" fill="white" transform="translate(18.9473 23.7119)"/>
</defs>
</svg>
<h1 class="no-buckets-header__title">Buckets</h1>
</div>
<h3 class="no-buckets-header-info">To create a bucket, please use the following CLI documentation. We will soon enable client-side encryption through the browser, at which time you will be able to create buckets and upload objects directly from this dashboard.</h3>
@ -103,7 +113,7 @@
justify-content: flex-start;
align-items: center;
img {
svg {
margin-right: 22px;
}
}

5
web/satellite/src/components/buckets/PaginationArea.vue
View File

@ -28,7 +28,10 @@
// TODO: use svg loader
public readonly arrowLeft: string = EMPTY_STATE_IMAGES.ARROW_LEFT;
public readonly arrowRight: string = EMPTY_STATE_IMAGES.ARROW_RIGHT;
public readonly totalCount: number = this.$store.state.bucketUsageModule.page.totalCount;
public get totalCount(): number {
return this.$store.state.bucketUsageModule.page.totalCount;
}
public get pages(): number[] {
return new Array(this.$store.state.bucketUsageModule.page.pageCount);

11
web/satellite/src/components/header/AccountDropdown.vue
View File

@ -30,7 +30,15 @@
import { Component, Vue } from 'vue-property-decorator';
import { removeToken } from '@/utils/tokenManager';
import ROUTES from '@/utils/constants/routerConstants';
import { APP_STATE_ACTIONS, PROJETS_ACTIONS, PM_ACTIONS, USER_ACTIONS, API_KEYS_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import {
APP_STATE_ACTIONS,
PROJETS_ACTIONS,
PM_ACTIONS,
USER_ACTIONS,
API_KEYS_ACTIONS,
NOTIFICATION_ACTIONS,
BUCKET_USAGE_ACTIONS,
} from '@/utils/constants/actionNames';
@Component
export default class ProjectSelectionDropdown extends Vue {
@ -52,6 +60,7 @@
this.$store.dispatch(USER_ACTIONS.CLEAR);
this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR);
this.$store.dispatch(BUCKET_USAGE_ACTIONS.CLEAR);
}
}
</script>

2
web/satellite/src/router/index.ts
View File

@ -163,7 +163,7 @@ router.beforeEach((to, from, next) => {
// isUnavailablePageWithoutProject checks if we are able to navigate to page without existing project
function isUnavailablePageWithoutProject(pageName: string): boolean {
let unavailablePages: string[] = [ROUTES.TEAM.name, ROUTES.API_KEYS.name];
let unavailablePages: string[] = [ROUTES.TEAM.name, ROUTES.API_KEYS.name, ROUTES.BUCKETS.name];
const state = store.state as any;
let isProjectSelected = state.projectsModule.selectedProject.id !== '';

6
web/satellite/src/store/modules/usage.ts
View File

@ -84,10 +84,15 @@ export const bucketUsageModule = {
state: {
cursor: { limit: bucketPageLimit, search: '', page: firstPage } as BucketUsageCursor,
page: { bucketUsages: [] as BucketUsage[] } as BucketUsagePage,
totalCount: 0,
},
mutations: {
[BUCKET_USAGE_MUTATIONS.FETCH](state: any, page: BucketUsagePage) {
state.page = page;
if (page.totalCount > 0) {
state.totalCount = page.totalCount;
}
},
[BUCKET_USAGE_MUTATIONS.SET_PAGE](state: any, page: number) {
state.cursor.page = page;
@ -98,6 +103,7 @@ export const bucketUsageModule = {
[BUCKET_USAGE_MUTATIONS.CLEAR](state: any) {
state.cursor = { limit: bucketPageLimit, search: '', page: firstPage } as BucketUsageCursor;
state.page = { bucketUsages: [] as BucketUsage[] } as BucketUsagePage;
state.totalCount = 0;
}
},
actions: {

15
web/satellite/static/images/buckets/foldericon.svg
View File

@ -1,15 +0,0 @@
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39 74C58.335 74 74 58.3243 74 38.9877C74 19.6511 58.335 4 39 4C19.665 4 4 19.6757 4 39.0123C4 58.3489 19.665 74 39 74Z" fill="#E8EAF2"/>
<g clip-path="url(#clip0)">
<path d="M38.842 25.8065V25.2764C38.842 24.4101 38.1258 23.7119 37.2438 23.7119H20.5455C19.6635 23.7119 18.9473 24.4101 18.9473 25.2699V53.4107H58.7367V27.358C58.7367 26.4982 58.0205 25.8 57.1385 25.8H38.842V25.8065Z" fill="#B0B6C9"/>
<path d="M57.3376 28.0498H20.7114V53.6952H57.3376V28.0498Z" fill="white"/>
<path d="M38.2717 31.2568L37.6815 32.8536H20.5455C19.6635 32.8536 18.9473 33.5518 18.9473 34.4181V54.2906C18.9473 55.1504 19.6635 55.8486 20.5455 55.8486H57.1319C58.0139 55.8486 58.7301 55.1504 58.7301 54.2906V31.7934C58.7301 30.9336 58.0139 30.2354 57.1319 30.2354H39.7837C39.1073 30.229 38.5038 30.6427 38.2717 31.2568Z" fill="#B0B6C9"/>
<path d="M58.7367 54.2834V41.3281C47.6819 51.8139 28.5167 54.6131 19.3916 55.363C19.6834 55.6604 20.0945 55.8478 20.5455 55.8478H57.1319C58.0205 55.8478 58.7367 55.1496 58.7367 54.2834Z" fill="#8F96AD"/>
<path d="M35.1082 34.1133H21.5798C20.8636 34.1133 20.2866 34.6757 20.2866 35.3739V38.1666C22.5613 36.641 27.6941 34.7274 35.1082 34.1133Z" fill="#B0B6C9"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="39.7895" height="32.136" fill="white" transform="translate(18.9473 23.7119)"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB