mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
4 changed files with 380 additions and 1 deletions
@ -0,0 +1,142 @@
|
||||
<template> |
||||
<v-menu v-if="connectToExternalDB" offset-y bottom open-on-hover> |
||||
<template #activator="{ on }"> |
||||
<slot :on="on"> |
||||
<div> |
||||
<v-btn |
||||
v-if="_isUIAllowed('projectCreate',true)" |
||||
v-ge="['home', 'project-new']" |
||||
:x-large="$vuetify.breakpoint.lgAndUp" |
||||
:large="$vuetify.breakpoint.mdAndDown" |
||||
data-v-step="1" |
||||
outlined |
||||
rounded |
||||
color="primary" |
||||
class="nc-new-project-menu elevation-3" |
||||
v-on="on" |
||||
> |
||||
<v-icon class="mr-2"> |
||||
mdi-plus |
||||
</v-icon> |
||||
|
||||
<!-- New Project --> |
||||
{{ $t('title.newProj') }} |
||||
<v-icon class="mr-1" small> |
||||
mdi-menu-down |
||||
</v-icon> |
||||
</v-btn> |
||||
</div> |
||||
</slot> |
||||
</template> |
||||
<v-list dense> |
||||
<v-list-item |
||||
class="create-xc-db-project nc-create-xc-db-project" |
||||
@click="onCreateProject('xcdb')" |
||||
> |
||||
<v-list-item-icon class="mr-2"> |
||||
<v-icon small color="blue"> |
||||
mdi-plus |
||||
</v-icon> |
||||
</v-list-item-icon> |
||||
<v-list-item-title> |
||||
<!-- Create --> |
||||
<span>{{ |
||||
$t('general.create') |
||||
}}</span> |
||||
</v-list-item-title> |
||||
<v-spacer /> |
||||
<v-tooltip right> |
||||
<template #activator="{ on }"> |
||||
<v-icon |
||||
x-small |
||||
color="grey" |
||||
class="ml-4" |
||||
v-on="on" |
||||
> |
||||
mdi-information-outline |
||||
</v-icon> |
||||
</template> |
||||
<!-- Create a new project --> |
||||
<span class="caption">{{ |
||||
$t('tooltip.xcDB') |
||||
}}</span> |
||||
</v-tooltip> |
||||
</v-list-item> |
||||
<v-list-item |
||||
title |
||||
class="pt-2 create-external-db-project nc-create-external-db-project" |
||||
@click="onCreateProject()" |
||||
> |
||||
<v-list-item-icon class="mr-2"> |
||||
<v-icon small color="green"> |
||||
mdi-database-outline |
||||
</v-icon> |
||||
</v-list-item-icon> |
||||
<v-list-item-title> |
||||
<!-- Create By Connecting <br>To An External Database --> |
||||
<span |
||||
style="line-height: 1.5em" |
||||
v-html=" |
||||
$t('activity.createProjectExtended.extDB') |
||||
" |
||||
/> |
||||
</v-list-item-title> |
||||
<v-spacer /> |
||||
<v-tooltip right> |
||||
<template #activator="{ on }"> |
||||
<v-icon |
||||
x-small |
||||
color="grey" |
||||
class="ml-4" |
||||
v-on="on" |
||||
> |
||||
mdi-information-outline |
||||
</v-icon> |
||||
</template> |
||||
<!-- Supports MySQL, PostgreSQL, SQL Server & SQLite --> |
||||
<span class="caption">{{ |
||||
$t('tooltip.extDB') |
||||
}}</span> |
||||
</v-tooltip> |
||||
</v-list-item> |
||||
</v-list> |
||||
</v-menu> |
||||
<x-btn |
||||
v-else-if="_isUIAllowed('projectCreate',true)" |
||||
v-ge="['home', 'project-new']" |
||||
outlined |
||||
data-v-step="1" |
||||
color="primary" |
||||
@click="onCreateProject('xcdb')" |
||||
> |
||||
<!-- New Project --> |
||||
{{ $t('title.newProj') }} |
||||
</x-btn> |
||||
<span v-else /> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'CreateNewProjectBtn', |
||||
computed: { |
||||
connectToExternalDB() { |
||||
return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.connectToExternalDB |
||||
} |
||||
}, |
||||
methods: { |
||||
onCreateProject(xcdb) { |
||||
if (xcdb === 'xcdb') { |
||||
this.$router.push('/project/xcdb') |
||||
this.$tele.emit('project:create:xcdb:trigger') |
||||
} else { |
||||
this.$router.push('/project/0') |
||||
this.$tele.emit('project:create:extdb:trigger') |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,229 @@
|
||||
<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.$tele.emit(`project:open:${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: .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> |
||||
Loading…
Reference in new issue