121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<template>
|
||
<v-container fluid>
|
||
<v-row>
|
||
<v-col class="collections-menu">
|
||
<v-card>
|
||
<v-list nav>
|
||
<v-list-item
|
||
v-for="collection in collections"
|
||
:key="collection.id"
|
||
color="primary"
|
||
:value="collection"
|
||
@click="selectedCollection = collection"
|
||
>
|
||
<template #prepend>
|
||
<v-icon :icon="collection.icon" />
|
||
</template>
|
||
|
||
<v-list-item-title>{{ collection.title }}</v-list-item-title>
|
||
</v-list-item>
|
||
</v-list>
|
||
</v-card>
|
||
</v-col>
|
||
<v-col>
|
||
<v-card v-if="selectedCollection">
|
||
<v-card-title />
|
||
<v-card-text>
|
||
<v-row>
|
||
<v-col>
|
||
<h3>Collections > {{ selectedCollection.title }}</h3>
|
||
</v-col>
|
||
<v-col class="text-right">
|
||
<v-btn icon="mdi-cog-outline" @click="onEditCollection" />
|
||
<v-btn icon="mdi-refresh" />
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<div class="mt-3">
|
||
<v-text-field placeholder="Search" />
|
||
</div>
|
||
<div>
|
||
<v-data-table
|
||
:headers="headers"
|
||
hide-default-footer
|
||
item-key="name"
|
||
:items="items"
|
||
/>
|
||
</div>
|
||
<div class="mt-4 text-center">
|
||
<v-btn color="primary" prepend-icon="mdi-plus">Add record</v-btn>
|
||
</div>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
|
||
</v-container>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {onMounted, ref} from 'vue'
|
||
import {useRouter} from "vue-router";
|
||
|
||
const router = useRouter()
|
||
|
||
const collections = ref([
|
||
{ id: 1, title: 'users', icon: 'mdi-account' },
|
||
{ id: 2, title: 'items', icon: 'mdi-folder-outline' },
|
||
{ id: 3, title: 'carts', icon: 'mdi-folder-outline' },
|
||
])
|
||
|
||
const selectedCollection = ref(null)
|
||
|
||
onMounted(() => {
|
||
selectedCollection.value = collections.value[0]
|
||
})
|
||
|
||
const headers = ref([
|
||
{ title: 'Pyramid', value: 'name' },
|
||
{ title: 'Location', value: 'location' },
|
||
{ title: 'Construction Date', value: 'constructionDate' },
|
||
])
|
||
|
||
const items = ref([
|
||
{
|
||
name: 'Great Pyramid of Giza',
|
||
location: 'Egypt',
|
||
constructionDate: 'c. 2580–2560 BC',
|
||
},
|
||
{
|
||
name: 'Pyramid of Khafre',
|
||
location: 'Egypt',
|
||
constructionDate: 'c. 2570 BC',
|
||
},
|
||
{
|
||
name: 'Red Pyramid',
|
||
location: 'Egypt',
|
||
constructionDate: 'c. 2590 BC',
|
||
},
|
||
{
|
||
name: 'Bent Pyramid',
|
||
location: 'Egypt',
|
||
constructionDate: 'c. 2600 BC',
|
||
},
|
||
{
|
||
name: 'Pyramid of the Sun',
|
||
location: 'Mexico',
|
||
constructionDate: 'c. 200 CE',
|
||
},
|
||
])
|
||
|
||
function onEditCollection () {
|
||
router.push(`/collections/${selectedCollection.value.id}/edit`)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.collections-menu {
|
||
max-width: 300px;
|
||
}
|
||
</style>
|