mirror of https://github.com/nocodb/nocodb
217 lines
6.1 KiB
217 lines
6.1 KiB
<template> |
|
<div class="d-flex" style="height: calc(100vh - 52px)"> |
|
<v-navigation-drawer left permanent width="max(300px,20%)" class="h-100"> |
|
<div class="d-flex flex-column h-100"> |
|
<div class="advance-menu flex-grow-1 pt-8"> |
|
<v-list |
|
v-if="_isUIAllowed('treeViewProjectSettings')" |
|
shaped |
|
dense |
|
:class="{ 'advanced-border': overShieldIcon }" |
|
> |
|
<v-list-item-group v-model="activePage" color="x-active" mandatory> |
|
<v-list-item v-for="item in navDrawerOptions" :key="item.title" :value="item.title" dense class="body-2"> |
|
<v-list-item-title> |
|
<v-icon small class="ml-5"> |
|
{{ item.icon }} |
|
</v-icon> |
|
<span |
|
class="font-weight-medium ml-3" |
|
:class="{ |
|
'textColor--text text--lighten-2': item.title !== activePage, |
|
}" |
|
> |
|
{{ item.title }} |
|
</span> |
|
</v-list-item-title> |
|
</v-list-item> |
|
</v-list-item-group> |
|
</v-list> |
|
</div> |
|
<v-divider /> |
|
<extras class="pl-6" /> |
|
<div class="sponsor ml-2 mb-2 mr-2"> |
|
<sponsor-mini nav /> |
|
</div> |
|
</div> |
|
</v-navigation-drawer> |
|
<v-container class="flex-grow-1 py-9 px-15 h-100" style="overflow-y: auto"> |
|
<div class="d-flex"> |
|
<h2 class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1"> |
|
{{ activePage }} |
|
</h2> |
|
|
|
<div class=""> |
|
<create-new-project-btn /> |
|
</div> |
|
</div> |
|
<v-divider class="mb-3" /> |
|
<div v-if="projectList && projectList.length" class="nc-project-item-container d-flex d-100"> |
|
<div |
|
v-for="(project, i) in projectList" |
|
:key="project.id" |
|
class="nc-project-item elevation-0 d-flex align-center justify-center flex-column py-5" |
|
> |
|
<div |
|
class="nc-project-thumbnail pointer text-uppercase d-flex align-center justify-center" |
|
:style="{ backgroundColor: getTextColor(i) }" |
|
@click="openProject(project)" |
|
> |
|
{{ |
|
project.title |
|
.split(' ') |
|
.map(w => w[0]) |
|
.slice(0, 2) |
|
.join('') |
|
}} |
|
|
|
<v-icon class="nc-project-star-icon" small color="white" v-on="on" @click.stop> mdi-star-outline </v-icon> |
|
|
|
<v-menu bottom offset-y> |
|
<template #activator="{ on }"> |
|
<v-icon class="nc-project-option-menu-icon" color="white" v-on="on" @click.stop> mdi-menu-down </v-icon> |
|
</template> |
|
<v-list dense> |
|
<v-list-item> |
|
<v-list-item-title> |
|
<v-icon small color="red"> mdi-delete-outline </v-icon> |
|
Delete |
|
</v-list-item-title> |
|
</v-list-item> |
|
</v-list> |
|
</v-menu> |
|
</div> |
|
|
|
<div class="text-center pa-2 nc-project-title body-2 font-weight-medium"> |
|
{{ project.title }} |
|
</div> |
|
</div> |
|
|
|
<div class="pointer nc-project-item nc-project-item elevation-0 d-flex align-center justify-center flex-column"> |
|
<create-new-project-btn> |
|
<template #default="{ on }"> |
|
<div |
|
class="nc-project-thumbnail nc-add-project text-uppercase d-flex align-center justify-center grey lighten-2" |
|
v-on="on" |
|
> |
|
+ |
|
</div> |
|
</template> |
|
</create-new-project-btn> |
|
<div class="text-center pa-2 nc-project-title body-2 font-weight-medium">Add project</div> |
|
</div> |
|
</div> |
|
<div v-else class="px-4 py-10 text-center textColor--text text--lighten-3 caption backgroundColor"> |
|
Please create a project |
|
</div> |
|
</v-container> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import colors from '~/mixins/colors'; |
|
import CreateNewProjectBtn from '~/components/projectList/CreateNewProjectBtn'; |
|
import Extras from '~/components/project/spreadsheet/components/Extras'; |
|
import SponsorMini from '~/components/SponsorMini'; |
|
|
|
export default { |
|
name: 'List', |
|
components: { SponsorMini, Extras, CreateNewProjectBtn }, |
|
mixins: [colors], |
|
data: () => ({ |
|
projectList: null, |
|
activePage: null, |
|
navDrawerOptions: [ |
|
{ |
|
title: 'My NocoDB', |
|
icon: 'mdi-folder-outline', |
|
}, |
|
{ |
|
title: 'Shared With Me', |
|
icon: 'mdi-account-group', |
|
}, |
|
{ |
|
title: 'Recent', |
|
icon: 'mdi-clock-outline', |
|
}, |
|
{ |
|
title: 'Starred', |
|
icon: 'mdi-star', |
|
}, |
|
], |
|
}), |
|
mounted() { |
|
this.loadProjectList(); |
|
}, |
|
methods: { |
|
async loadProjectList() { |
|
const { list, pageInfo } = await this.$api.project.list(); |
|
this.projectList = list; |
|
}, |
|
async openProject(project) { |
|
await this.$router.push({ |
|
path: `/nc/${project.id}`, |
|
}); |
|
this.$e('a:project:open', { count: this.projects.length }); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.nc-project-item-container { |
|
flex-wrap: wrap; |
|
position: relative; |
|
} |
|
|
|
.nc-project-item { |
|
width: 150px; |
|
align-items: center; |
|
} |
|
|
|
.nc-project-thumbnail { |
|
height: 100px; |
|
width: 100px; |
|
font-size: 50px; |
|
color: white; |
|
font-weight: bold; |
|
border-radius: 4px; |
|
margin-inside: auto; |
|
position: relative; |
|
} |
|
|
|
.nc-project-option-menu-icon, |
|
.nc-project-star-icon { |
|
position: absolute; |
|
opacity: 0; |
|
transition: 0.3s opacity; |
|
} |
|
.nc-project-star-icon { |
|
top: 8px; |
|
right: 10px; |
|
} |
|
.nc-project-option-menu-icon { |
|
bottom: 5px; |
|
right: 5px; |
|
} |
|
.nc-project-thumbnail:hover .nc-project-option-menu-icon, |
|
.nc-project-thumbnail:hover .nc-project-star-icon { |
|
opacity: 1; |
|
} |
|
.nc-project-title { |
|
text-transform: capitalize; |
|
text-align: center; |
|
} |
|
|
|
.nc-project-title.nc-add-project { |
|
font-size: 60px; |
|
} |
|
|
|
/deep/ .v-navigation-drawer__border { |
|
background-color: transparent !important; |
|
} |
|
|
|
.nc-project-thumbnail:hover { |
|
background-image: linear-gradient(#0002, #0002); |
|
} |
|
</style>
|
|
|