/
AccessTableComponent.vue
95 lines (90 loc) · 2.47 KB
/
AccessTableComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
/>
<v-data-table
v-model="selected"
:sort-by="sortBy"
:headers="headers"
:items="accesses"
:search="search"
class="elevation-1"
show-select
hover
>
<template #item.name="{ item }">
<v-list-item class="font-weight-bold pl-0">
{{ item.columns.name }}
</v-list-item>
</template>
<template #item.status="{ item }">
<v-chip :color="item.raw.status == 'Active' ? 'success' : 'warning'" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
{{ item.raw.status }}
</v-chip>
</template>
</v-data-table>
</v-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VListItem, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
const search = ref<string>('');
const selected = ref([]);
const sortBy = [{ key: 'date', order: 'asc' }];
const headers = [
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Type', key: 'type' },
{ title: 'Status', key: 'status' },
{ title: 'Permissions', key: 'permissions' },
{ title: 'Date Created', key: 'date' },
];
const accesses = [
{
name: 'Backup',
date: '02 Mar 2023',
type: 'Access Grant',
permissions: 'All',
status: 'Active',
},
{
name: 'S3 Test',
date: '03 Mar 2023',
type: 'S3 Credentials',
permissions: 'Read, Write',
status: 'Expired',
},
{
name: 'CLI Demo',
date: '04 Mar 2023',
type: 'CLI Access',
permissions: 'Read, Write, List',
status: 'Active',
},
{
name: 'Sharing',
date: '08 Mar 2023',
type: 'Access Grant',
permissions: 'Read, Delete',
status: 'Active',
},
{
name: 'Sync Int',
date: '12 Mar 2023',
type: 'S3 Credentials',
permissions: 'All',
status: 'Expired',
},
];
</script>