web/satellite: migrate BucketDetailsOverview component to use SFC composition api

Change-Id: I913832792c7c87d4ae81d598eb42ad0c0028f4a1
This commit is contained in:
Vitalii 2023-04-04 13:38:29 +03:00 committed by Storj Robot
parent 0351bd9b92
commit 1ba5ee787c

View File

@ -10,28 +10,27 @@
</table>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { computed } from 'vue';
import { Bucket } from '@/types/buckets';
type TableData = { label: string, value: string }[];
// @vue/component
@Component
export default class BucketDetailsOverview extends Vue {
@Prop({ default: null })
public readonly bucket: Bucket;
const props = withDefaults(defineProps<{
bucket: Bucket;
}>(), {
bucket: () => new Bucket(),
});
public get tableData(): TableData {
return [
{ label: 'Name', value: this.bucket.name },
{ label: 'Date Created', value: this.bucket.since.toUTCString() },
{ label: 'Last Updated', value: this.bucket.before.toUTCString() },
{ label: 'Object Count', value: `${this.bucket.objectCount}` },
];
}
}
const tableData = computed((): TableData => {
return [
{ label: 'Name', value: props.bucket.name },
{ label: 'Date Created', value: props.bucket.since.toUTCString() },
{ label: 'Last Updated', value: props.bucket.before.toUTCString() },
{ label: 'Object Count', value: `${props.bucket.objectCount}` },
];
});
</script>
<style lang="scss" scoped>