web/satellite: common table component applied to bucket page
Change-Id: I579ee22ea441e3084f0d56462676d48870087624
This commit is contained in:
NickolaiYurchenko
Jeff Wendling
parent
6e8e86a0b7
commit
b4e486f3fc
@ -2,13 +2,11 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="bucket-item">
|
||||
<div class="bucket-item__name">
|
||||
<bucket-icon />
|
||||
<p class="bucket-item__name__value">{{ itemData.name }}</p>
|
||||
</div>
|
||||
<p class="bucket-item__date">{{ formattedDate }}</p>
|
||||
<div v-click-outside="closeDropdown" class="bucket-item__functional" @click.stop="openDropdown(dropdownKey)">
|
||||
<table-item
|
||||
:item="{ name: itemData.name, date: formattedDate }"
|
||||
@setSelected="(value) => $parent.$emit('checkItem', value)"
|
||||
>
|
||||
<th slot="options" v-click-outside="closeDropdown" class="bucket-item__functional options overflow-visible" @click.stop="openDropdown(dropdownKey)">
|
||||
<dots-icon />
|
||||
<div v-if="isDropdownOpen" class="bucket-item__functional__dropdown">
|
||||
<div class="bucket-item__functional__dropdown__item" @click.stop="onDetailsClick">
|
||||
@ -20,24 +18,24 @@
|
||||
<p class="bucket-item__functional__dropdown__item__label">Delete Bucket</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</table-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
import BucketIcon from '@/../static/images/objects/bucketItem.svg';
|
||||
import DeleteIcon from '@/../static/images/objects/delete.svg';
|
||||
import DetailsIcon from '@/../static/images/objects/details.svg';
|
||||
import DotsIcon from '@/../static/images/objects/dots.svg';
|
||||
import {RouteConfig} from "@/router";
|
||||
import {Bucket} from "@/types/buckets";
|
||||
import TableItem from "@/components/common/TableItem.vue";
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
BucketIcon,
|
||||
TableItem,
|
||||
DotsIcon,
|
||||
DeleteIcon,
|
||||
DetailsIcon,
|
||||
@ -94,32 +92,6 @@ export default class BucketItem extends Vue {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bucket-item {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25px 20px;
|
||||
width: calc(100% - 40px);
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #1b2533;
|
||||
cursor: pointer;
|
||||
|
||||
&__name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
|
||||
&__value {
|
||||
margin: 0 0 0 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
width: 30%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__functional {
|
||||
padding: 0 10px;
|
||||
|
||||
@ -17,23 +17,35 @@
|
||||
class="buckets-view__loader"
|
||||
/>
|
||||
<p v-if="!(isLoading || bucketsPage.buckets.length)" class="buckets-view__no-buckets">No Buckets</p>
|
||||
<div v-if="!isLoading && bucketsPage.buckets.length" class="buckets-view__list">
|
||||
<div class="buckets-view__list__sorting-header">
|
||||
<p class="buckets-view__list__sorting-header__name">Name</p>
|
||||
<p class="buckets-view__list__sorting-header__date">Date Added</p>
|
||||
<p class="buckets-view__list__sorting-header__empty" />
|
||||
</div>
|
||||
<div v-for="(bucket, key) in bucketsPage.buckets" :key="key" class="buckets-view__list__item" @click.stop="openBucket(bucket.name)">
|
||||
<v-table
|
||||
v-if="!isLoading && bucketsPage.buckets.length"
|
||||
class="buckets-view__list"
|
||||
:limit="bucketsPage.limit"
|
||||
:total-page-count="bucketsPage.pageCount"
|
||||
:items="bucketsPage.buckets"
|
||||
items-label="buckets"
|
||||
:on-page-click-callback="fetchBuckets"
|
||||
:total-items-count="bucketsPage.totalCount"
|
||||
>
|
||||
<template slot="head">
|
||||
<th class="buckets-view__list__sorting-header__name align-left">Name</th>
|
||||
<th class="buckets-view__list__sorting-header__date align-left">Date Added</th>
|
||||
<th class="buckets-view__list__sorting-header__empty" />
|
||||
</template>
|
||||
<template slot="body">
|
||||
<BucketItem
|
||||
v-for="(bucket, key) in bucketsPage.buckets"
|
||||
:key="key"
|
||||
:item-data="bucket"
|
||||
:show-delete-bucket-popup="showDeleteBucketPopup"
|
||||
:dropdown-key="key"
|
||||
:open-dropdown="openDropdown"
|
||||
:is-dropdown-open="activeDropdown === key"
|
||||
@click.stop="openBucket(bucket.name)"
|
||||
@checkItem="(value) => $parent.$emit('checkItem', { value, key })"
|
||||
/>
|
||||
</div>
|
||||
<v-pagination v-if="bucketsPage.pageCount > 1" :total-page-count="bucketsPage.pageCount" :on-page-click-callback="fetchBuckets" />
|
||||
</div>
|
||||
</template>
|
||||
</v-table>
|
||||
<ObjectsPopup
|
||||
v-if="isCreatePopupVisible"
|
||||
:on-click="onCreateBucketClick"
|
||||
@ -60,7 +72,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator';
|
||||
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from '@/router';
|
||||
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
|
||||
@ -69,9 +81,8 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
|
||||
import { MetaUtils } from '@/utils/meta';
|
||||
import { Validator } from '@/utils/validation';
|
||||
import { LocalData } from "@/utils/localData";
|
||||
import VPagination from "@/components/common/VPagination.vue";
|
||||
import { BUCKET_ACTIONS } from "@/store/modules/buckets";
|
||||
import { BucketPage } from "@/types/buckets";
|
||||
import {Bucket, BucketPage} from "@/types/buckets";
|
||||
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
|
||||
|
||||
import VLoader from '@/components/common/VLoader.vue';
|
||||
@ -81,12 +92,13 @@ import ObjectsPopup from '@/components/objects/ObjectsPopup.vue';
|
||||
import BucketIcon from '@/../static/images/objects/bucket.svg';
|
||||
|
||||
import { AnalyticsHttpApi } from '@/api/analytics';
|
||||
import VTable, { SelectableItem } from "@/components/common/VTable.vue";
|
||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
VPagination,
|
||||
VTable,
|
||||
BucketIcon,
|
||||
ObjectsPopup,
|
||||
BucketItem,
|
||||
@ -94,6 +106,8 @@ import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||
},
|
||||
})
|
||||
export default class BucketsView extends Vue {
|
||||
@Prop({ default: () => [] })
|
||||
public readonly selectableItems: SelectableItem<Bucket>[];
|
||||
private readonly FILE_BROWSER_AG_NAME: string = 'Web file browser API key';
|
||||
private worker: Worker;
|
||||
private grantWithPermissions = '';
|
||||
@ -519,36 +533,6 @@ export default class BucketsView extends Vue {
|
||||
&__list {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding-bottom: 170px;
|
||||
|
||||
&__sorting-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px 5px;
|
||||
width: calc(100% - 40px);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #768394;
|
||||
border-bottom: 1px solid rgb(169 181 193 / 40%);
|
||||
|
||||
&__name {
|
||||
width: calc(70% - 16px);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__date {
|
||||
width: 30%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user