feat: view list styling

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue

@@ -5,10 +5,10 @@
         <thead>
           <tr>
             <th class="caption">
-              View Link
+              View name
             </th>
             <th class="caption">
-              View name
+              View Link
             </th>
             <th class="caption">
               Password
@@ -19,29 +19,74 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="link of viewsList" :key="link.id">
+          <tr v-if="currentView">
-            <td class="caption">
+            <td class="font-weight-bold caption text-left">
-              <nuxt-link :to="`/nc/${link.view_type === 'form' ? 'form' : 'view'}/${link.view_id}`">
+              <v-icon v-if="viewIcons[currentView.view_type]" small :color="viewIcons[currentView.view_type].color">
-                {{ `${dashboardUrl}#/nc/${link.view_type === 'form' ? 'form' : 'view'}/${link.view_id}` }}
+                {{ viewIcons[currentView.view_type].icon }}
-              </nuxt-link>
+              </v-icon>
+
+              {{ currentView.view_name }}
             </td>
-            <td class="caption">
+            <td class="caption text-left">
-              {{ link.view_name }}
+              <nuxt-link :to="`/nc/${currentView.view_type === 'form' ? 'form' : 'view'}/${currentView.view_id}`">
+                {{ `${dashboardUrl}#/nc/${currentView.view_type === 'form' ? 'form' : 'view'}/${currentView.view_id}` }}
+              </nuxt-link>
             </td>
             <td class="caption">
-              <template v-if="link.password">
+              <template v-if="currentView.password">
-                <span>{{ link.showPassword ? link.password : '***************************' }}</span>
+                <span>{{ currentView.showPassword ? link.password : '***************************' }}</span>
-                <v-icon small @click="$set(link, 'showPassword' , !link.showPassword)">
+                <v-icon small @click="$set(currentView, 'showPassword' , !currentView.showPassword)">
-                  {{ link.showPassword ? 'visibility_off' : 'visibility' }}
+                  {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
                 </v-icon>
               </template>
             </td>
             <td class="caption">
-              <v-icon small @click="deleteLink(link.id)">
+              <v-icon small @click="copyLink(currentView)">
+                mdi-content-copy
+              </v-icon>
+              <v-icon small @click="deleteLink(currentView.id)">
                 mdi-delete-outline
               </v-icon>
             </td>
           </tr>
+
+          <tr>
+            <td colspan="4" class="text-center caption text--grey">
+              Other views
+            </td>
+          </tr>
+          <template>
+            <tr v-for="link of viewsList" :key="link.id">
+              <td class="caption text-left">
+                <v-icon v-if="viewIcons[link.view_type]" small :color="viewIcons[link.view_type].color">
+                  {{ viewIcons[link.view_type].icon }}
+                </v-icon>
+
+                {{ link.view_name }}
+              </td>
+              <td class="caption text-left">
+                <nuxt-link :to="`/nc/${link.view_type === 'form' ? 'form' : 'view'}/${link.view_id}`">
+                  {{ `${dashboardUrl}#/nc/${link.view_type === 'form' ? 'form' : 'view'}/${link.view_id}` }}
+                </nuxt-link>
+              </td>
+              <td class="caption">
+                <template v-if="link.password">
+                  <span>{{ link.showPassword ? link.password : '***************************' }}</span>
+                  <v-icon small @click="$set(link, 'showPassword' , !link.showPassword)">
+                    {{ link.showPassword ? 'visibility_off' : 'visibility' }}
+                  </v-icon>
+                </template>
+              </td>
+              <td class="caption">
+                <v-icon small @click="copyLink(link)">
+                  mdi-content-copy
+                </v-icon>
+                <v-icon small @click="deleteLink(link.id)">
+                  mdi-delete-outline
+                </v-icon>
+              </td>
+            </tr>
+          </template>
         </tbody>
       </v-simple-tables>
     </v-container>
@@ -49,11 +94,15 @@
 </template>
 
 <script>
+import viewIcons from '~/helpers/viewIcons'
+
 export default {
   name: 'SharedViewsList',
   props: ['modelName', 'nodes'],
   data: () => ({
-    viewsList: null
+    viewsList: null,
+    currentView: null,
+    viewIcons
   }),
   computed: {
     origin() {
@@ -64,6 +113,12 @@ export default {
     this.loadSharedViewsList()
   },
   methods: {
+
+    copyLink(view) {
+      this.$clipboard(`${this.dashboardUrl}#/nc/${view.view_type === 'form' ? 'form' : 'view'}/${view.view_id}`)
+      this.$toast.info('Copied to clipboard').goAway(1000)
+    },
+
     async loadSharedViewsList() {
       const viewsList = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: this.nodes.dbAlias }, 'listSharedViewLinks', {
         model_name: this.modelName
@@ -71,7 +126,7 @@ export default {
 
       const index = viewsList.findIndex(v => (v.view_name || '').toLowerCase() === (this.$route.query.view || '').toLowerCase())
       if (index > -1) {
-        viewsList.unshift(...viewsList.splice(index, 1))
+        this.currentView = viewsList.splice(index, 1)[0]
       }
 
       this.viewsList = viewsList

packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@@ -499,6 +499,7 @@
 <script>
 import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog'
 import Extras from '~/components/project/spreadsheet/components/extras'
+import viewIcons from '~/helpers/viewIcons'
 
 export default {
   name: 'SpreadsheetNavDrawer',
@@ -544,13 +545,7 @@ export default {
     overAdvShieldIcon: false,
     overShieldIcon: false,
     viewsList: [],
-    viewIcons: {
+    viewIcons,
-      grid: { icon: 'mdi-grid-large', color: 'blue' },
-      form: { icon: 'mdi-form-select', color: 'pink' },
-      calendar: { icon: 'mdi-calendar', color: 'purple' },
-      gallery: { icon: 'mdi-camera-image', color: 'orange' },
-      kanban: { icon: 'mdi-tablet-dashboard', color: 'green' }
-    },
     copyViewRef: null,
     shareLink: {},
     showShareModel: false,

packages/nc-gui/components/project/spreadsheet/components/virtualCell/lookupCell.vue

@@ -39,6 +39,7 @@
       :password="password"
       :read-only="true"
       :query-params="queryParams"
+      :metas="metas"
     />
   </div>
 </template>

packages/nc-gui/helpers/viewIcons.js

@@ -0,0 +1,8 @@
+export default {
+  grid: { icon: 'mdi-grid-large', color: 'blue' },
+  table: { icon: 'mdi-grid-large', color: 'blue' },
+  form: { icon: 'mdi-form-select', color: 'pink' },
+  calendar: { icon: 'mdi-calendar', color: 'purple' },
+  gallery: { icon: 'mdi-camera-image', color: 'orange' },
+  kanban: { icon: 'mdi-tablet-dashboard', color: 'green' }
+}