From a931ae7b97ad40b02c06592caf3a143f409584e3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 17 Jan 2022 20:07:04 +0530
Subject: [PATCH] refactor(gui): share view list size correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/sharedViewsList.vue            | 168 +++++++++---------
 1 file changed, 86 insertions(+), 82 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue b/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue
index 731864ea9e..c590bf338c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue
@@ -1,105 +1,109 @@
 <template>
   <div class="d-100">
-    <v-container>
-      <v-simple-table dense style="min-width: 600px;">
-        <thead>
-          <tr class="">
-            <th class="caption grey--text">
-              View name
-            </th>
-            <th class="caption grey--text">
-              View Link
-            </th>
-            <th class="caption grey--text">
-              Password
-            </th>
-            <th class="caption grey--text">
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="currentView">
-            <td class="font-weight-bold caption text-left">
-              <v-icon v-if="viewIcons[currentView.view_type]" small :color="viewIcons[currentView.view_type].color">
-                {{ viewIcons[currentView.view_type].icon }}
-              </v-icon>
-
-              {{ currentView.view_name }}
-            </td>
-            <td class="caption text-left">
-              <nuxt-link :to="sharedViewUrl(currentView)">
-                {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
-              </nuxt-link>
-            </td>
-            <td class="caption">
-              <template v-if="currentView.password">
-                <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
-                <v-icon small @click="$set(currentView, 'showPassword' , !currentView.showPassword)">
-                  {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
-                </v-icon>
-              </template>
-            </td>
-            <td class="caption">
-              <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 v-else>
-            <td colspan="4" class="text-center caption info--text">
-              Current view is not shared!
-            </td>
-          </tr>
-          <template v-if="allSharedLinks">
-            <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-container class="d-flex">
+      <v-spacer />
+      <div>
+        <v-simple-table dense style="min-width: 600px; width:auto; margin:0 auto">
+          <thead>
+            <tr class="">
+              <th class="caption grey--text">
+                View name
+              </th>
+              <th class="caption grey--text">
+                View Link
+              </th>
+              <th class="caption grey--text">
+                Password
+              </th>
+              <th class="caption grey--text">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="currentView">
+              <td class="font-weight-bold caption text-left">
+                <v-icon v-if="viewIcons[currentView.view_type]" small :color="viewIcons[currentView.view_type].color">
+                  {{ viewIcons[currentView.view_type].icon }}
                 </v-icon>
 
-                {{ link.view_name }}
+                {{ currentView.view_name }}
               </td>
               <td class="caption text-left">
-                <nuxt-link :to="sharedViewUrl(link)">
-                  {{ `${dashboardUrl}#${sharedViewUrl(link)}` }}
+                <nuxt-link :to="sharedViewUrl(currentView)">
+                  {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
                 </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' }}
+                <template v-if="currentView.password">
+                  <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
+                  <v-icon small @click="$set(currentView, 'showPassword' , !currentView.showPassword)">
+                    {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
                   </v-icon>
                 </template>
               </td>
               <td class="caption">
-                <v-icon small @click="copyLink(link)">
+                <v-icon small @click="copyLink(currentView)">
                   mdi-content-copy
                 </v-icon>
-                <v-icon small @click="deleteLink(link.id)">
+                <v-icon small @click="deleteLink(currentView.id)">
                   mdi-delete-outline
                 </v-icon>
               </td>
             </tr>
-          </template>
-        </tbody>
-      </v-simple-table>
-      <div class="mt-1 pl-2">
-        <v-switch
-          v-model="allSharedLinks"
-          class="nc-switch-show-all"
-          hide-details
-        >
-          <template #label>
-            <span class="caption"> Show all shared views of this table</span>
-          </template>
-        </v-switch>
+
+            <tr v-else>
+              <td colspan="4" class="text-center caption info--text">
+                Current view is not shared!
+              </td>
+            </tr>
+            <template v-if="allSharedLinks">
+              <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="sharedViewUrl(link)">
+                    {{ `${dashboardUrl}#${sharedViewUrl(link)}` }}
+                  </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-table>
+        <div class="mt-1 pl-2">
+          <v-switch
+            v-model="allSharedLinks"
+            class="nc-switch-show-all"
+            hide-details
+          >
+            <template #label>
+              <span class="caption"> Show all shared views of this table</span>
+            </template>
+          </v-switch>
+        </div>
       </div>
+      <v-spacer />
     </v-container>
   </div>
 </template>