|
|
@ -12,7 +12,7 @@ |
|
|
|
<!-- <p v-if="screenSize" class="caption">Screen resolution : {{screenSize}}</p>--> |
|
|
|
<!-- <p v-if="screenSize" class="caption">Screen resolution : {{screenSize}}</p>--> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <v-icon large>mdi-folder-multiple-outline</v-icon> --> |
|
|
|
<!-- <v-icon large>mdi-folder-multiple-outline</v-icon> --> |
|
|
|
<b>My Projects</b> |
|
|
|
<b>{{ $t('home.my_projects') }}</b> <!-- My Projects --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <x-btn--> |
|
|
|
<!-- <x-btn--> |
|
|
|
<!-- large--> |
|
|
|
<!-- large--> |
|
|
@ -22,7 +22,7 @@ |
|
|
|
small |
|
|
|
small |
|
|
|
color="primary grey" |
|
|
|
color="primary grey" |
|
|
|
@click="projectsLoad" |
|
|
|
@click="projectsLoad" |
|
|
|
tooltip="Refresh projects"> |
|
|
|
v-bind:tooltip="$t('home.reload_projects_tooltip')"> <!-- Refresh projects --> |
|
|
|
mdi-refresh |
|
|
|
mdi-refresh |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
|
<!-- </x-btn>--> |
|
|
|
<!-- </x-btn>--> |
|
|
@ -34,20 +34,20 @@ |
|
|
|
ref="search1" |
|
|
|
ref="search1" |
|
|
|
v-model="search" |
|
|
|
v-model="search" |
|
|
|
class="caption pt-0 mt-0" |
|
|
|
class="caption pt-0 mt-0" |
|
|
|
placeholder="Search Project" |
|
|
|
v-bind:placeholder="$t('home.search_project')" |
|
|
|
single-line |
|
|
|
single-line |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
|
v-ge="['home','project-search']" |
|
|
|
v-ge="['home','project-search']" |
|
|
|
style="max-width:200px" |
|
|
|
style="max-width:200px" |
|
|
|
> |
|
|
|
> <!-- Search Project --> |
|
|
|
<template v-slot:prepend-inner> |
|
|
|
<template v-slot:prepend-inner> |
|
|
|
<v-icon color="grey" class="mt-1" small>search</v-icon> |
|
|
|
<v-icon color="grey" class="mt-1" small>search</v-icon> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</v-text-field> |
|
|
|
</v-text-field> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
|
|
|
|
<!-- Import NocoDB Project by uploading metadata zip file --> |
|
|
|
<x-btn |
|
|
|
<x-btn |
|
|
|
tooltip="Import NocoDB Project by uploading metadata zip file." |
|
|
|
vbind:tooltip="$t('home.import_button.text')" |
|
|
|
outlined |
|
|
|
outlined |
|
|
|
color="grey" |
|
|
|
color="grey" |
|
|
|
@click="$refs.importFile.click();project_id = null"> |
|
|
|
@click="$refs.importFile.click();project_id = null"> |
|
|
@ -74,7 +74,7 @@ |
|
|
|
v-ge="['home','project-new']" |
|
|
|
v-ge="['home','project-new']" |
|
|
|
@click="onCreateProject()"> |
|
|
|
@click="onCreateProject()"> |
|
|
|
<v-icon class="mr-1" small>mdi-plus</v-icon> |
|
|
|
<v-icon class="mr-1" small>mdi-plus</v-icon> |
|
|
|
{{ $t('create-new-project') }} |
|
|
|
{{ $t('home.create_new_project_button.text') }} |
|
|
|
</x-btn>--> |
|
|
|
</x-btn>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -91,7 +91,7 @@ |
|
|
|
v-ge="['home','project-new']" |
|
|
|
v-ge="['home','project-new']" |
|
|
|
v-on="on" |
|
|
|
v-on="on" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ $t('create-new-project') }} |
|
|
|
{{ $t('home.create_new_project_button.text') }} <!-- New Project --> |
|
|
|
<v-icon class="mr-1" small>mdi-menu-down</v-icon> |
|
|
|
<v-icon class="mr-1" small>mdi-menu-down</v-icon> |
|
|
|
</x-btn> |
|
|
|
</x-btn> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -103,14 +103,14 @@ |
|
|
|
<v-icon small>mdi-plus</v-icon> |
|
|
|
<v-icon small>mdi-plus</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title> |
|
|
|
<v-list-item-title> |
|
|
|
<span class="caption font-weight-regular">Create</span> |
|
|
|
<span class="caption font-weight-regular">{{ $t('home.create_new_project_button.subtext_1') }}</span> <!-- Create --> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
<v-tooltip right> |
|
|
|
<v-tooltip right> |
|
|
|
<template v-slot:activator="{on}"> |
|
|
|
<template v-slot:activator="{on}"> |
|
|
|
<v-icon v-on="on" x-small color="grey" class="ml-4">mdi-information-outline</v-icon> |
|
|
|
<v-icon v-on="on" x-small color="grey" class="ml-4">mdi-information-outline</v-icon> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<span class="caption">Create a new project</span> |
|
|
|
<span class="caption">{{ $t('home.create_new_project_button.subtext_1_tooltip') }}</span> <!-- Create a new project --> |
|
|
|
</v-tooltip> |
|
|
|
</v-tooltip> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-divider></v-divider> |
|
|
@ -119,7 +119,7 @@ |
|
|
|
<v-icon small class="">mdi-power-plug-outline</v-icon> |
|
|
|
<v-icon small class="">mdi-power-plug-outline</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title><span |
|
|
|
<v-list-item-title><span |
|
|
|
class="caption font-weight-regular">Create By Connecting <br>To An External Database</span> |
|
|
|
class="caption font-weight-regular" v-html="$t('home.create_new_project_button.subtext_2')"></span> <!-- Create By Connecting <br>To An External Database --> |
|
|
|
|
|
|
|
|
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
<v-spacer></v-spacer> |
|
|
@ -127,7 +127,7 @@ |
|
|
|
<template v-slot:activator="{on}"> |
|
|
|
<template v-slot:activator="{on}"> |
|
|
|
<v-icon v-on="on" x-small color="grey" class="ml-4">mdi-information-outline</v-icon> |
|
|
|
<v-icon v-on="on" x-small color="grey" class="ml-4">mdi-information-outline</v-icon> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<span class="caption">Supports MySQL, PostgreSQL, SQL Server & SQLite</span> |
|
|
|
<span class="caption">{{ $t('home.create_new_project_button.subtext_2_tooltip') }}</span> <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite --> |
|
|
|
</v-tooltip> |
|
|
|
</v-tooltip> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
</v-list> |
|
|
|
</v-list> |
|
|
@ -141,7 +141,7 @@ |
|
|
|
color="primary" |
|
|
|
color="primary" |
|
|
|
v-ge="['home','project-new']" |
|
|
|
v-ge="['home','project-new']" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ $t('create-new-project') }} |
|
|
|
{{ $t('home.create_new_project_button.text') }} <!-- New Project --> |
|
|
|
</x-btn> |
|
|
|
</x-btn> |
|
|
|
</v-row> |
|
|
|
</v-row> |
|
|
|
|
|
|
|
|
|
|
@ -170,9 +170,9 @@ |
|
|
|
:color="props.item.status === 'started' ? 'green' : (props.item.status === 'stopped' ? 'orange' : 'orange') "> |
|
|
|
:color="props.item.status === 'started' ? 'green' : (props.item.status === 'stopped' ? 'orange' : 'orange') "> |
|
|
|
mdi-moon-full |
|
|
|
mdi-moon-full |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
|
|
|
|
|
<!-- Accessible via GraphQL APIs / Accessible via REST APIs --> |
|
|
|
<x-icon small |
|
|
|
<x-icon small |
|
|
|
:tooltip="props.item.projectType === 'graphql' ? 'Accessible via GraphQL APIs' : 'Accessible via REST APIs'" |
|
|
|
:tooltip="props.item.projectType === 'graphql' ? $t('home.project_api_type_tooltip_graphql') : $t('home.project_api_type_tooltip_rest')" |
|
|
|
icon.class="mr-2" |
|
|
|
icon.class="mr-2" |
|
|
|
:color="props.item.projectType === 'graphql' ? 'pink' : 'green'" |
|
|
|
:color="props.item.projectType === 'graphql' ? 'pink' : 'green'" |
|
|
|
> |
|
|
|
> |
|
|
@ -186,32 +186,32 @@ |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="_isUIAllowed('project.actions')" |
|
|
|
v-if="_isUIAllowed('project.actions')" |
|
|
|
:class="{'action-icons' : !(projectStatusUpdating && props.item.id === statusUpdatingProjectId) }"> |
|
|
|
:class="{'action-icons' : !(projectStatusUpdating && props.item.id === statusUpdatingProjectId) }"> |
|
|
|
|
|
|
|
<!-- Stop Project --> |
|
|
|
<x-icon |
|
|
|
<x-icon |
|
|
|
tooltip="Stop project" |
|
|
|
v-bind:tooltip="$t('home.project_horizontal_option_1')" |
|
|
|
class="pointer mr-2" color="orange grey" v-if="props.item.status === 'started'" |
|
|
|
class="pointer mr-2" color="orange grey" v-if="props.item.status === 'started'" |
|
|
|
@click.stop="stopProject(props.item)">mdi-stop-circle-outline |
|
|
|
@click.stop="stopProject(props.item)">mdi-stop-circle-outline |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
|
|
|
|
|
<!-- Start Project --> |
|
|
|
<x-icon |
|
|
|
<x-icon |
|
|
|
tooltip="Start project" |
|
|
|
v-bind:tooltip="$t('home.project_horizontal_option_2')" |
|
|
|
class="pointer mr-2" color="green grey" v-else-if=" props.item.status === 'stopped'" |
|
|
|
class="pointer mr-2" color="green grey" v-else-if=" props.item.status === 'stopped'" |
|
|
|
@click.stop="startProject(props.item)"> |
|
|
|
@click.stop="startProject(props.item)"> |
|
|
|
mdi-play-circle-outline |
|
|
|
mdi-play-circle-outline |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<x-icon class="mr-1" |
|
|
|
<x-icon class="mr-1" |
|
|
|
v-if="projectStatusUpdating && props.item.id === statusUpdatingProjectId">mdi-loading |
|
|
|
v-if="projectStatusUpdating && props.item.id === statusUpdatingProjectId">mdi-loading |
|
|
|
mdi-spin |
|
|
|
mdi-spin |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
|
|
|
|
|
<!-- Restart Project --> |
|
|
|
<x-icon |
|
|
|
<x-icon |
|
|
|
tooltip="Restart project" class="pointer mr-2" color="primary grey" |
|
|
|
v-bind:tooltip="$t('home.project_horizontal_option_3')" class="pointer mr-2" color="primary grey" |
|
|
|
@click.stop="restartProject(props.item)"> |
|
|
|
@click.stop="restartProject(props.item)"> |
|
|
|
mdi-restart |
|
|
|
mdi-restart |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
|
|
|
|
|
<!-- Delete Project --> |
|
|
|
<x-icon |
|
|
|
<x-icon |
|
|
|
tooltip="Delete project" class="pointer mr-2" color="red grey" |
|
|
|
v-bind:tooltip="$t('home.project_horizontal_option_4')" class="pointer mr-2" color="red grey" |
|
|
|
@click.stop="deleteProject(props.item)"> |
|
|
|
@click.stop="deleteProject(props.item)"> |
|
|
|
mdi-delete-circle-outline |
|
|
|
mdi-delete-circle-outline |
|
|
|
</x-icon> |
|
|
|
</x-icon> |
|
|
@ -225,21 +225,21 @@ |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-icon small>mdi-import</v-icon> |
|
|
|
<v-icon small>mdi-import</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">Import Metadata</span> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">{{ $t('home.project_verticial_option_1') }}</span> <!-- Import Metadata --> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-list-item dense @click="exportMetaZip(props.item.id)"> |
|
|
|
<v-list-item dense @click="exportMetaZip(props.item.id)"> |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-icon small>mdi-export</v-icon> |
|
|
|
<v-icon small>mdi-export</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">Export Metadata</span> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">{{ $t('home.project_verticial_option_2') }}</span> <!-- Export Metadata --> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-list-item dense @click="resetMeta(props.item.id)"> |
|
|
|
<v-list-item dense @click="resetMeta(props.item.id)"> |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-list-item-icon class="mr-1"> |
|
|
|
<v-icon small>mdi-delete-variant</v-icon> |
|
|
|
<v-icon small>mdi-delete-variant</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">Clear Metadata</span> |
|
|
|
<v-list-item-title><span class="caption font-weight-regular">{{ $t('home.project_verticial_option_3') }}</span> <!-- Clear Metadata --> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
</v-list> |
|
|
|
</v-list> |
|
|
@ -255,7 +255,7 @@ |
|
|
|
:value="true" |
|
|
|
:value="true" |
|
|
|
color="error" |
|
|
|
color="error" |
|
|
|
icon="warning" |
|
|
|
icon="warning" |
|
|
|
>Your search for "{{ search }}" found no results. |
|
|
|
>{{ $t('home.search.no_result', { search }) }} <!-- Your search for "{{ search }}" found no results. --> |
|
|
|
</v-alert> |
|
|
|
</v-alert> |
|
|
|
<!-- <template v-slot:no-data>--> |
|
|
|
<!-- <template v-slot:no-data>--> |
|
|
|
<!-- <v-alert :value="true" outlined color="success" icon="mdi-information-outline">Create a new project--> |
|
|
|
<!-- <v-alert :value="true" outlined color="success" icon="mdi-information-outline">Create a new project--> |
|
|
@ -264,7 +264,8 @@ |
|
|
|
</v-data-table> |
|
|
|
</v-data-table> |
|
|
|
<v-col style="height:500px" v-else-if="!loadingProjects" class="d-flex align-center justify-center"> |
|
|
|
<v-col style="height:500px" v-else-if="!loadingProjects" class="d-flex align-center justify-center"> |
|
|
|
<v-alert border="left" dense text :value="true" outlined color="success" icon="mdi-information-outline"> |
|
|
|
<v-alert border="left" dense text :value="true" outlined color="success" icon="mdi-information-outline"> |
|
|
|
Get started by creating a new project. |
|
|
|
<!-- Get started by creating a new project --> |
|
|
|
|
|
|
|
{{ $t('home.project_empty_message') }} |
|
|
|
</v-alert> |
|
|
|
</v-alert> |
|
|
|
</v-col> |
|
|
|
</v-col> |
|
|
|
</v-row> |
|
|
|
</v-row> |
|
|
@ -281,8 +282,8 @@ |
|
|
|
<v-col cols="" class="d-flex justify-center"> |
|
|
|
<v-col cols="" class="d-flex justify-center"> |
|
|
|
<v-card height="500px" width="500px" class="elevation-20 pt-4 mt-4 d-flex flex-column"> |
|
|
|
<v-card height="500px" width="500px" class="elevation-20 pt-4 mt-4 d-flex flex-column"> |
|
|
|
<p class="display-1 flex-grow-1 pt-5 d-flex align-center justify-center"> |
|
|
|
<p class="display-1 flex-grow-1 pt-5 d-flex align-center justify-center"> |
|
|
|
<span> |
|
|
|
<span v-html="$t('home.create_new_project_button.subtext_2')"> |
|
|
|
Create new project <br> by connecting to your<br> existing or new database</span> |
|
|
|
</span> <!-- Create By Connecting <br>To An External Database --> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<v-card-actions class="justify-center pb-10"> |
|
|
|
<v-card-actions class="justify-center pb-10"> |
|
|
|
<x-btn tooltip="Create New Project" |
|
|
|
<x-btn tooltip="Create New Project" |
|
|
@ -293,7 +294,8 @@ |
|
|
|
<v-icon color="white" class="blink_me"> |
|
|
|
<v-icon color="white" class="blink_me"> |
|
|
|
mdi-lightbulb-on |
|
|
|
mdi-lightbulb-on |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
|
New Project |
|
|
|
<!-- New Project --> |
|
|
|
|
|
|
|
{{ $t('home.create_new_project_button.text') }} |
|
|
|
</x-btn> |
|
|
|
</x-btn> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -330,9 +332,11 @@ |
|
|
|
<v-list-item-icon> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-icon class="ml-2 mt-n2">mdi-github</v-icon> |
|
|
|
<v-icon class="ml-2 mt-n2">mdi-github</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title>Star |
|
|
|
<!-- Star --> |
|
|
|
|
|
|
|
<v-list-item-title>{{ $t('home.show_community_message_1_1') }} |
|
|
|
<v-icon small>mdi-star-outline</v-icon> |
|
|
|
<v-icon small>mdi-star-outline</v-icon> |
|
|
|
us on Github |
|
|
|
<!-- us on Github --> |
|
|
|
|
|
|
|
{{ $t('home.show_community_message_1_2') }} |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-divider></v-divider> |
|
|
@ -340,21 +344,24 @@ |
|
|
|
<v-list-item-icon> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[3]">mdi-calendar-month</v-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[3]">mdi-calendar-month</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title>Book a Free DEMO</v-list-item-title> |
|
|
|
<!-- Book a Free DEMO --> |
|
|
|
|
|
|
|
<v-list-item-title>{{ $t('home.show_community_message_2') }}</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank"> |
|
|
|
<v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank"> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[0]">mdi-discord</v-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[0]">mdi-discord</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title>Get your questions answered</v-list-item-title> |
|
|
|
<!-- Get your questions answered --> |
|
|
|
|
|
|
|
<v-list-item-title>{{ $t('home.show_community_message_3') }}</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-divider></v-divider> |
|
|
|
<v-list-item dense href="https://twitter.com/NocoDB" target="_blank"> |
|
|
|
<v-list-item dense href="https://twitter.com/NocoDB" target="_blank"> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-list-item-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[1]">mdi-twitter</v-icon> |
|
|
|
<v-icon class="ml-2" :color="textColors[1]">mdi-twitter</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title>Follow NocoDB</v-list-item-title> |
|
|
|
<!-- Follow NocoDB --> |
|
|
|
|
|
|
|
<v-list-item-title>{{ $t('home.show_community_message_4') }}</v-list-item-title> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
|
|
|
|
|
|
|
|
</v-list> |
|
|
|
</v-list> |
|
|
|