From e9b79bfb88651d04d2988b2a3c3e052811bb489e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 25 Nov 2021 20:34:51 +0530
Subject: [PATCH] refactor: gui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/ProjectTreeView.vue     |   2 +-
 .../components/columnFilterMenu.vue           |   2 +-
 .../spreadsheet/components/exportImport.vue   |   2 +-
 .../spreadsheet/components/fieldsMenu.vue     |   2 +-
 .../spreadsheet/components/lockMenu.vue       |  10 +-
 .../spreadsheet/components/sortListMenu.vue   |   2 +-
 .../project/spreadsheet/rowsXcDataTable.vue   | 178 +++++++++------
 packages/nc-gui/components/projectTabs.vue    |   4 +
 .../en/developer-resources/rest-apis.md       | 213 +++++++++++++++++-
 9 files changed, 331 insertions(+), 84 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 60ff5333b2..1737a41103 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/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
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
index 293b4f87f8..462c8523fc 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
+++ b/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
diff --git a/packages/nc-gui/components/project/spreadsheet/components/exportImport.vue b/packages/nc-gui/components/project/spreadsheet/components/exportImport.vue
index 530b2e5090..da3e86896a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/exportImport.vue
+++ b/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"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
index 24d2d15da0..16c00bbeb5 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
+++ b/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
diff --git a/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
index 8a22f7c311..f2272d3f9f 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
+++ b/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">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
index b0e48e238b..0708f6386a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
+++ b/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
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 78952a3fcc..9bfdb732ae 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/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
-          </v-icon>
-        </x-btn>
-        <x-btn
-          v-if="isEditable && relationType !== 'bt'"
+          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'"-->
+        <!--          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,52 +130,12 @@
             save
           </v-icon>
           Save
-        </x-btn>
-
-        <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"
-          class="mr-1"
-        />
-
-        <v-tooltip
-          v-if="_isUIAllowed('table-delete')"
-          bottom
-        >
-          <template #activator="{on}">
-            <v-btn
+        </x-btn>-->
+        <!--        <v-tooltip-->
+        <!--          bottom-->
+        <!--        >-->
+        <!--          <template #activator="{on}">-->
+        <!--            <v-btn
               v-show="_isUIAllowed('table-delete')"
               class="nc-table-delete-btn"
               :disabled="isLocked"
@@ -167,15 +144,67 @@
               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>
+            >-->
+        <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"
+        :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 -->
       <!--      <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>
 
 <!--
diff --git a/packages/nc-gui/components/projectTabs.vue b/packages/nc-gui/components/projectTabs.vue
index bab9ad1370..abb00fad0c 100644
--- a/packages/nc-gui/components/projectTabs.vue
+++ b/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>
 <!--
 /**
diff --git a/packages/noco-docs/content/en/developer-resources/rest-apis.md b/packages/noco-docs/content/en/developer-resources/rest-apis.md
index f483b4a35f..065d77ea45 100644
--- a/packages/noco-docs/content/en/developer-resources/rest-apis.md
+++ b/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
@@ -631,7 +637,212 @@ GET  /api/v1/country/count
   </code-block>
 </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)
+
+### 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