Browse Source

refactor: gui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/812/head
Pranav C 3 years ago
parent
commit
e9b79bfb88
  1. 2
      packages/nc-gui/components/ProjectTreeView.vue
  2. 2
      packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
  3. 2
      packages/nc-gui/components/project/spreadsheet/components/exportImport.vue
  4. 2
      packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
  5. 10
      packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
  6. 2
      packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
  7. 178
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  8. 4
      packages/nc-gui/components/projectTabs.vue
  9. 213
      packages/noco-docs/content/en/developer-resources/rest-apis.md

2
packages/nc-gui/components/ProjectTreeView.vue

@ -118,7 +118,7 @@
</template> </template>
</v-treeview> </v-treeview>
<v-container v-else fluid class="px-1 pt-0"> <v-container v-else fluid class="px-1 pt-0">
<v-list dense expand class="nc-project-tree nc-single-env-project-tree"> <v-list height="30" dense expand class="nc-project-tree nc-single-env-project-tree pt-1">
<template v-for="item in listViewArr"> <template v-for="item in listViewArr">
<!-- v-if="item.children && item.children.length"--> <!-- v-if="item.children && item.children.length"-->
<v-list-group <v-list-group

2
packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-filter-menu-btn" class="nc-filter-menu-btn px-2"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small small

2
packages/nc-gui/components/project/spreadsheet/components/exportImport.vue

@ -8,7 +8,7 @@
<template #activator="{on}"> <template #activator="{on}">
<v-btn <v-btn
outlined outlined
class="nc-actions-menu-btn caption" class="nc-actions-menu-btn caption px-2"
small small
text text
v-on="on" v-on="on"

2
packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-fields-menu-btn" class="nc-fields-menu-btn px-2"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small small

10
packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue

@ -1,14 +1,14 @@
<template> <template>
<v-menu offset-y max-width="350"> <v-menu offset-y max-width="350">
<template #activator="{on}"> <template #activator="{on}">
<v-icon v-if="value === 'locked'" small class="mr-5 nc-view-lock-menu" v-on="on"> <v-icon v-if="value === 'locked'" small class="mx-1 nc-view-lock-menu" v-on="on">
mdi-lock mdi-lock-outline
</v-icon> </v-icon>
<v-icon v-else-if="value === 'personal'" small class="mr-5 nc-view-lock-menu" v-on="on"> <v-icon v-else-if="value === 'personal'" small class="mx-1 nc-view-lock-menu" v-on="on">
mdi-account mdi-account
</v-icon> </v-icon>
<v-icon v-else small class="mr-5 nc-view-lock-menu" v-on="on"> <v-icon v-else small class="mx-1 nc-view-lock-menu" v-on="on">
mdi-account-group mdi-account-group-outline
</v-icon> </v-icon>
</template> </template>
<v-list maxc-width="350"> <v-list maxc-width="350">

2
packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-sort-menu-btn" class="nc-sort-menu-btn px-2"
:disabled="isLocked" :disabled="isLocked"
small small
text text

178
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@ -1,6 +1,6 @@
<template> <template>
<v-container class="h-100 j-excel-container pa-0 ma-0" fluid> <v-container class="h-100 j-excel-container pa-0 ma-0" fluid>
<v-toolbar height="32" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7"> <v-toolbar height="32" dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7">
<div v-if="!isForm" class="d-flex xc-border align-center search-box" style="min-width:156px"> <div v-if="!isForm" class="d-flex xc-border align-center search-box" style="min-width:156px">
<v-menu bottom offset-y> <v-menu bottom offset-y>
<template #activator="{on}"> <template #activator="{on}">
@ -74,33 +74,50 @@
</v-tooltip> </v-tooltip>
<lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" /> <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
<x-btn <!-- <x-btn
tooltip="Reload view data" tooltip="Reload view data"
outlined outlined
small small
text text
btn.class="nc-table-reload-btn" btn.class="nc-table-reload-btn px-0"
@click="reload"
>-->
<v-icon small class="mx-n1" color="grey lighten-1">
mdi-circle-small
</v-icon>
<x-icon
tooltip="Reload view data"
icon.class="nc-table-reload-btn mx-1"
small
@click="reload" @click="reload"
> >
<v-icon small class="mr-1" color="grey darken-3"> mdi-reload
mdi-reload </x-icon>
</v-icon> <v-icon small class="mx-n1" color="grey lighten-1">
</x-btn> mdi-circle-small
<x-btn </v-icon>
v-if="isEditable && relationType !== 'bt'" <!-- </x-btn>-->
<!-- <x-btn-->
<!-- v-if="isEditable && relationType !== 'bt'"-->
<!-- tooltip="Add new row"-->
<!-- :disabled="isLocked"-->
<!-- outlined-->
<!-- small-->
<!-- text-->
<!-- btn.class="nc-add-new-row-btn"-->
<!-- @click="insertNewRow(true,true)"-->
<!-- >-->
<x-icon
icon.class="nc-add-new-row-btn mx-1"
tooltip="Add new row" tooltip="Add new row"
:disabled="isLocked"
outlined
small small
text :color="['success','']"
btn.class="nc-add-new-row-btn"
@click="insertNewRow(true,true)" @click="insertNewRow(true,true)"
> >
<v-icon small class="mr-1" color="grey darken-3"> mdi-plus-outline
mdi-plus </x-icon>
</v-icon> <!-- </x-btn>-->
</x-btn> <!-- <x-btn
<x-btn
small small
text text
btn.class="nc-save-new-row-btn" btn.class="nc-save-new-row-btn"
@ -113,52 +130,12 @@
save save
</v-icon> </v-icon>
Save Save
</x-btn> </x-btn>-->
<!-- <v-tooltip-->
<fields <!-- bottom-->
v-model="showFields" <!-- >-->
:field-list="fieldList" <!-- <template #activator="{on}">-->
:meta="meta" <!-- <v-btn
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:sql-ui="sqlUi"
:show-system-fields.sync="showSystemFields"
:cover-image-field.sync="coverImageField"
:is-gallery="isGallery"
/>
<sort-list
v-model="sortList"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
/>
<column-filter
v-model="filters"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
dense
/>
<csv-export-import
ref="csvExportImport"
:meta="meta"
:nodes="nodes"
:query-params="{
fieldsOrder,
fieldFilter,
sortList,
showFields
}"
:selected-view="selectedView"
class="mr-1"
/>
<v-tooltip
v-if="_isUIAllowed('table-delete')"
bottom
>
<template #activator="{on}">
<v-btn
v-show="_isUIAllowed('table-delete')" v-show="_isUIAllowed('table-delete')"
class="nc-table-delete-btn" class="nc-table-delete-btn"
:disabled="isLocked" :disabled="isLocked"
@ -167,15 +144,67 @@
text text
v-on="on" v-on="on"
@click="checkAndDeleteTable" @click="checkAndDeleteTable"
> >-->
<x-icon small color="red grey"> <v-icon small class="mx-n1" color="grey lighten-1">
mdi-delete-outline mdi-circle-small
</x-icon> </v-icon>
</v-btn> <x-icon
</template> v-if="_isUIAllowed('table-delete')"
<span class="">Delete table</span> icon.class="nc-table-delete-btn mx-1 mr-1"
</v-tooltip> :disabled="isLocked"
small
:color="['red',''] "
tooltip="Delete table"
@click="checkAndDeleteTable"
>
mdi-delete-outline
</x-icon>
<v-icon small class="ml-n2" color="grey lighten-1">
mdi-circle-small
</v-icon>
<!-- </v-btn>-->
<!-- </template>-->
<!-- <span class="">Delete table</span>-->
<!-- </v-tooltip>-->
</template> </template>
<fields
v-model="showFields"
:field-list="fieldList"
:meta="meta"
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:sql-ui="sqlUi"
:show-system-fields.sync="showSystemFields"
:cover-image-field.sync="coverImageField"
:is-gallery="isGallery"
/>
<sort-list
v-model="sortList"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
/>
<column-filter
v-model="filters"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
dense
/>
<csv-export-import
ref="csvExportImport"
:meta="meta"
:nodes="nodes"
:query-params="{
fieldsOrder,
fieldFilter,
sortList,
showFields
}"
:selected-view="selectedView"
/>
<!-- Cell height --> <!-- Cell height -->
<!-- <v-menu> <!-- <v-menu>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
@ -212,7 +241,7 @@
> >
<v-icon <v-icon
small small
class="mx-2" class="mx-0"
color="grey darken-3" color="grey darken-3"
> >
{{ toggleDrawer ? 'mdi-door-closed' : 'mdi-door-open' }} {{ toggleDrawer ? 'mdi-door-closed' : 'mdi-door-open' }}
@ -1291,6 +1320,9 @@ export default {
/deep/ .v-input__control label { /deep/ .v-input__control label {
font-size: inherit; font-size: inherit;
} }
/deep/ .nc-table-toolbar > .v-toolbar__content{
padding: 0;
}
</style> </style>
<!-- <!--

4
packages/nc-gui/components/projectTabs.vue

@ -574,6 +574,10 @@ export default {
position: absolute; position: absolute;
} }
/deep/ .project-tab:first-of-type{
margin-left: 0 !important;
}
</style> </style>
<!-- <!--
/** /**

213
packages/noco-docs/content/en/developer-resources/rest-apis.md

@ -32,7 +32,7 @@ menuTitle: 'REST APIs'
| **Method** | **Path** | **Query Params** | **Description** | | **Method** | **Path** | **Query Params** | **Description** |
|---|---|---|---| |---|---|---|---|
| **GET** | [/api/v1/tableName](#list) | [where, limit, offset, sort, fields](#query-params) | List rows of the table | | **GET** | [/api/v1/tableName](#list) | [where, limit, offset, sort, fields, mm, bt, hm](#query-params) | List rows of the table |
| **POST** | [/api/v1/tableName](#create) | | Insert row into table | | **POST** | [/api/v1/tableName](#create) | | Insert row into table |
| **PUT** | [/api/v1/tableName/:id](#update) | | Update existing row in table | | **PUT** | [/api/v1/tableName/:id](#update) | | Update existing row in table |
| **GET** | [/api/v1/tableName/:id](#get-by-primary-key) | | Get row by primary key | | **GET** | [/api/v1/tableName/:id](#get-by-primary-key) | | Get row by primary key |
@ -67,6 +67,12 @@ menuTitle: 'REST APIs'
| sort | s | Sort by column name, Use `-` as prefix for descending sort | | column_name | | sort | s | Sort by column name, Use `-` as prefix for descending sort | | column_name |
| fields | f | Required column names in result | * | column_name1,column_name2 | | fields | f | Required column names in result | * | column_name1,column_name2 |
| fields1 | f1 | Required column names in child result | * | column_name1,column_name2 | | fields1 | f1 | Required column names in child result | * | column_name1,column_name2 |
| bt | | Comma-separated belongs to tables | `All belongs to tables` | [click here for example](#nested-parentbelongs-to) |
| bfields`<p>` | bf`<p>` | Required belongs to table column names in result. Where `<p>` refers to position of table name in `bt` parameter(starts from `1`) | primary key and primary value | [click here for example](#nested-parentbelongs-to) |
| hm | | Comma-separated has many tables | `All hasmany tables` | [click here for example](#nested-childrenhas-many) |
| hfields`<p>` | hf`<p>` | Required has many table column names in result. Where `<p>` refers to position of table name in `hm` parameter(starts from `1`) | primary key and primary value | [click here for example](#nested-childrenhas-many) |
| mm | | Comma-separated many to many tables | `All many to many tables` | [click here for example](#nested-childrenmany-to-many) |
| mfields`<p>` | mf`<p>` | Required many to many table column names in result. Where `<p>` refers to position of table name in `mm` parameter(starts from `1`) | primary key and primary value | [click here for example](#nested-childrenmany-to-many) |
## HasMany APIs ## HasMany APIs
@ -631,7 +637,212 @@ GET /api/v1/country/count
</code-block> </code-block>
</code-group> </code-group>
[](#api-overview)
### Nested Parent(Belongs To)
<code-group>
<code-block label="Request" active>
```
GET /api/v1/City?bt=country&bfields1=Country,CountryId
```
</code-block>
<code-block label="Response">
```json
[
{
"CityId": 1,
"City": "A Corua (La Corua)",
"CountryId": 87,
"LastUpdate": "2006-02-14T23:15:25.000Z",
"CountryRead": {
"CountryId": 87,
"Country": "Spain"
}
},
{
"CityId": 2,
"City": "Abha",
"CountryId": 82,
"LastUpdate": "2006-02-14T23:15:25.000Z",
"CountryRead": {
"CountryId": 82,
"Country": "Saudi Arabia"
}
},
{
"CityId": 3,
"City": "Abu Dhabi",
"CountryId": 101,
"LastUpdate": "2006-02-14T23:15:25.000Z",
"CountryRead": {
"CountryId": 101,
"Country": "United Arab Emirates"
}
}
]
```
</code-block>
</code-group>
[](#api-overview) [](#api-overview)
### Nested Children(Has Many)
<code-group>
<code-block label="Request" active>
```
GET /api/v1/Country?hm=city&hfields1=City,CityId
```
</code-block>
<code-block label="Response">
```json
[
{
"CountryId": 1,
"Country": "Afghanistan",
"LastUpdate": "2021-11-15T14:11:37.000Z",
"CityList": [
{
"CityId": 251,
"City": "Kabul",
"CountryId": 1
}
]
},
{
"CountryId": 2,
"Country": "Algeria",
"LastUpdate": "2021-11-15T14:11:42.000Z",
"CityList": [
{
"CityId": 59,
"City": "Batna",
"CountryId": 2
},
{
"CityId": 63,
"City": "Bchar",
"CountryId": 2
},
{
"CityId": 483,
"City": "Skikda",
"CountryId": 2
}
]
},
{
"CountryId": 3,
"Country": "American Samoa",
"LastUpdate": "2006-02-14T23:14:00.000Z",
"CityList": [
{
"CityId": 516,
"City": "Tafuna",
"CountryId": 3
}
]
}
]
```
</code-block>
</code-group>
[](#api-overview)
### Nested Children(Many To Many)
<code-group>
<code-block label="Request" active>
```
GET /api/v1/Actor?l=3&mm=film&mfields1=ReleaseYear
```
</code-block>
<code-block label="Response">
```json
[
{
"ActorId": 1,
"FirstName": "PENELOPE",
"LastName": "GUINESS",
"LastUpdate": "2021-11-24T14:43:23.000Z",
"FilmMMList": [
{
"actor_actor_id": 1,
"FilmId": 1,
"Title": "Test Movie 1",
"ReleaseYear": 2001
}
]
},
{
"ActorId": 2,
"FirstName": "NICK",
"LastName": "WAHLBERG",
"LastUpdate": "2006-02-14T23:04:33.000Z",
"FilmMMList": [
{
"actor_actor_id": 2,
"FilmId": 1,
"Title": "Test Movie 2",
"ReleaseYear": 2002
}
]
},
{
"ActorId": 3,
"FirstName": "ED",
"LastName": "CHASE",
"LastUpdate": "2006-02-14T23:04:33.000Z",
"FilmMMList": [
{
"actor_actor_id": 3,
"FilmId": 1,
"Title": "Test Movie 3",
"ReleaseYear": 2000
}
]
}
]
```
</code-block>
</code-group>
[](#api-overview)
### Bulk Insert ### Bulk Insert

Loading…
Cancel
Save