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