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. 116
      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>
</v-treeview>
<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">
<!-- v-if="item.children && item.children.length"-->
<v-list-group

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<template>
<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">
<v-menu bottom offset-y>
<template #activator="{on}">
@ -74,33 +74,50 @@
</v-tooltip>
<lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
<x-btn
<!-- <x-btn
tooltip="Reload view data"
outlined
small
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"
>
<v-icon small class="mr-1" color="grey darken-3">
mdi-reload
</x-icon>
<v-icon small class="mx-n1" color="grey lighten-1">
mdi-circle-small
</v-icon>
</x-btn>
<x-btn
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"
:disabled="isLocked"
outlined
small
text
btn.class="nc-add-new-row-btn"
:color="['success','']"
@click="insertNewRow(true,true)"
>
<v-icon small class="mr-1" color="grey darken-3">
mdi-plus
</v-icon>
</x-btn>
<x-btn
mdi-plus-outline
</x-icon>
<!-- </x-btn>-->
<!-- <x-btn
small
text
btn.class="nc-save-new-row-btn"
@ -113,8 +130,44 @@
save
</v-icon>
Save
</x-btn>
</x-btn>-->
<!-- <v-tooltip-->
<!-- bottom-->
<!-- >-->
<!-- <template #activator="{on}">-->
<!-- <v-btn
v-show="_isUIAllowed('table-delete')"
class="nc-table-delete-btn"
:disabled="isLocked"
small
outlined
text
v-on="on"
@click="checkAndDeleteTable"
>-->
<v-icon small class="mx-n1" color="grey lighten-1">
mdi-circle-small
</v-icon>
<x-icon
v-if="_isUIAllowed('table-delete')"
icon.class="nc-table-delete-btn mx-1 mr-1"
: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>
<fields
v-model="showFields"
:field-list="fieldList"
@ -150,32 +203,8 @@
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')"
class="nc-table-delete-btn"
:disabled="isLocked"
small
outlined
text
v-on="on"
@click="checkAndDeleteTable"
>
<x-icon small color="red grey">
mdi-delete-outline
</x-icon>
</v-btn>
</template>
<span class="">Delete table</span>
</v-tooltip>
</template>
<!-- Cell height -->
<!-- <v-menu>
<template v-slot:activator="{ on, attrs }">
@ -212,7 +241,7 @@
>
<v-icon
small
class="mx-2"
class="mx-0"
color="grey darken-3"
>
{{ toggleDrawer ? 'mdi-door-closed' : 'mdi-door-open' }}
@ -1291,6 +1320,9 @@ export default {
/deep/ .v-input__control label {
font-size: inherit;
}
/deep/ .nc-table-toolbar > .v-toolbar__content{
padding: 0;
}
</style>
<!--

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

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

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

@ -32,7 +32,7 @@ menuTitle: 'REST APIs'
| **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 |
| **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 |
@ -67,6 +67,12 @@ menuTitle: 'REST APIs'
| 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 |
| 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
@ -633,6 +639,211 @@ GET /api/v1/country/count
[](#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)
### 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
<code-group>

Loading…
Cancel
Save