From 832362ba7c2120751a424af38214cd2bb9873172 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 17:07:15 +0530
Subject: [PATCH 1/5] feat(gui-v2): add preview as option

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 packages/nc-gui-v2/components/PreviewAs.vue   | 93 +++++++++++++++++++
 .../composables/useApi/interceptors.ts        |  4 +-
 .../nc-gui-v2/composables/useGlobal/state.ts  |  1 +
 .../nc-gui-v2/composables/useGlobal/types.ts  |  1 +
 .../composables/useUIPermission/index.ts      | 15 ++-
 .../nc-gui-v2/pages/nc/[projectId]/index.vue  |  4 +-
 7 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/PreviewAs.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 7fd5ee4556..5b5095a947 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -95,6 +95,7 @@ declare module '@vue/runtime-core' {
     MdiDrag: typeof import('~icons/mdi/drag')['default']
     MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
+    MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
diff --git a/packages/nc-gui-v2/components/PreviewAs.vue b/packages/nc-gui-v2/components/PreviewAs.vue
new file mode 100644
index 0000000000..d151bd948f
--- /dev/null
+++ b/packages/nc-gui-v2/components/PreviewAs.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { useState } from '#app'
+import { useGlobal, watch } from '#imports'
+import MdiAccountStar from '~icons/mdi/account-star'
+import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
+import MdiAccountEdit from '~icons/mdi/account-edit'
+import MdiEyeOutline from '~icons/mdi/eye-outline'
+import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
+
+const { float } = defineProps<{ float?: boolean }>()
+const position = useState('preview-as-position', () => ({
+  y: `${window.innerHeight - 100}px`,
+  x: `${window.innerWidth / 2 - 250}px`,
+}))
+
+const roleList = [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }]
+
+const { previewAs } = useGlobal()
+
+const roleIcon = {
+  owner: MdiAccountStar,
+  creator: MdiAccountHardHat,
+  editor: MdiAccountEdit,
+  viewer: MdiEyeOutline,
+  commenter: MdiCommentAccountOutline,
+}
+
+const divMove = (e: MouseEvent) => {
+  position.value = { y: `${e.clientY - 10}px`, x: `${e.clientX - 18}px` }
+}
+const mouseUp = () => {
+  window.removeEventListener('mousemove', divMove, true)
+}
+
+window.addEventListener('mouseup', mouseUp, false)
+
+const mouseDown = () => {
+  window.addEventListener('mousemove', divMove, true)
+}
+
+/** reload page on previewas change */
+watch(previewAs, () => window.location.reload())
+</script>
+
+<template>
+  <div v-if="float" class="floating-reset-btn nc-floating-preview-btn px-2"
+       :style="{ top: position.y, left: position.x }">
+    <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
+    <div class="divider" />
+
+    <div class="pointer flex items-center gap-2">
+      <span>Preview as :</span>
+
+      <a-radio-group v-model:value="previewAs" name="radioGroup">
+        <a-radio v-for="role in roleList" :key="role.title" class="!text-xs !text-white" :value="role.title">{{ role.title }}
+        </a-radio>
+      </a-radio-group>
+
+      <div class="divider" />
+
+      <div class="flex items-center gap-2 cursor-pointer" @click="previewAs= null"> <MdiExitToApp/> Exit</div>
+
+    </div>
+  </div>
+
+  <template v-else>
+    <template v-for="role of roleList" :key="role.title">
+      <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
+        <div class="p-1 flex gap-2 items-center">
+          <component :is="roleIcon[role.title]" />
+
+          <span class="text-capitalize text-xs" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title
+            }}</span>
+        </div>
+      </a-menu-item>
+    </template>
+  </template>
+</template>
+
+<style scoped>
+.floating-reset-btn {
+  @apply bg-primary z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
+  @apply flex items-center overflow-hidden whitespace-nowrap gap-2
+}
+
+:deep(.ant-radio) {
+  @apply transform scale-80;
+}
+
+.divider{
+  @apply h-5 w-2px bg-white/50
+}
+</style>
diff --git a/packages/nc-gui-v2/composables/useApi/interceptors.ts b/packages/nc-gui-v2/composables/useApi/interceptors.ts
index e5a4882947..c8c6fd1fa6 100644
--- a/packages/nc-gui-v2/composables/useApi/interceptors.ts
+++ b/packages/nc-gui-v2/composables/useApi/interceptors.ts
@@ -13,8 +13,8 @@ export function addAxiosInterceptors(api: Api<any>) {
 
     if (state.token.value) config.headers['xc-auth'] = state.token.value
 
-    if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
-      // config.headers['xc-preview'] = store.state.users.previewAs
+    if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles') && state.previewAs?.value) {
+      config.headers['xc-preview'] = state.previewAs.value
     }
 
     if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index fdc8c4da9a..c61b3829cf 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -57,6 +57,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
       isHidden: false,
     },
     filterAutoSave: true,
+    previewAs: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 7f9e54f94e..82ab8b8ed5 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -22,6 +22,7 @@ export interface StoredState {
   darkMode: boolean
   feedbackForm: FeedbackForm
   filterAutoSave: boolean
+  previewAs: string | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 460664e998..62ff91f05e 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -7,7 +7,7 @@ export function useUIPermission() {
   const { $state } = useNuxtApp()
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: Permission, _skipPreviewAs = false) => {
+  const isUIAllowed = (permission: Permission, skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
     // if string populate key-value paired object
@@ -19,17 +19,16 @@ export function useUIPermission() {
     }
 
     // merge user role and project specific user roles
-    const roles = {
+    let roles = {
       ...userRoles,
       ...(projectRoles?.value || {}),
     }
 
-    // todo: handle preview as
-    // if (state.previewAs && !skipPreviewAs) {
-    //   roles = {
-    //     [state.previewAs]: true
-    //   };
-    // }
+    if ($state.previewAs.value && !skipPreviewAs) {
+      roles = {
+        [$state.previewAs.value]: true,
+      }
+    }
 
     return Object.entries<boolean>(roles).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index aed18c85ed..a7104621fd 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -177,7 +177,7 @@ await loadTables()
 
                     <template #expandIcon></template>
 
-                    <a-menu-item> Foo </a-menu-item>
+                    <PreviewAs />
                   </a-sub-menu>
                 </a-menu-item-group>
               </a-menu>
@@ -212,6 +212,8 @@ await loadTables()
     <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
 
     <NuxtPage />
+
+    <PreviewAs float />
   </NuxtLayout>
 </template>
 

From e6b5400b20e425a90a21f6f62e04dc7da93aea66 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 17:24:09 +0530
Subject: [PATCH 2/5] feat(gui-v2): add reset option in preview as menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts          |  1 +
 packages/nc-gui-v2/components/PreviewAs.vue | 42 ++++++++++++++-------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 5b5095a947..30099a9572 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -84,6 +84,7 @@ declare module '@vue/runtime-core' {
     MdiChat: typeof import('~icons/mdi/chat')['default']
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
diff --git a/packages/nc-gui-v2/components/PreviewAs.vue b/packages/nc-gui-v2/components/PreviewAs.vue
index d151bd948f..2fd51d7048 100644
--- a/packages/nc-gui-v2/components/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/PreviewAs.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import { onUnmounted } from '@vue/runtime-core'
 import { useState } from '#app'
-import { useGlobal, watch } from '#imports'
+import { useEventListener, useGlobal, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
@@ -32,19 +33,22 @@ const mouseUp = () => {
   window.removeEventListener('mousemove', divMove, true)
 }
 
-window.addEventListener('mouseup', mouseUp, false)
+useEventListener(window, 'mouseup', mouseUp, false)
 
 const mouseDown = () => {
   window.addEventListener('mousemove', divMove, true)
 }
 
+onUnmounted(() => {
+  window.removeEventListener('mousemove', divMove, true)
+})
+
 /** reload page on previewas change */
 watch(previewAs, () => window.location.reload())
 </script>
 
 <template>
-  <div v-if="float" class="floating-reset-btn nc-floating-preview-btn px-2"
-       :style="{ top: position.y, left: position.x }">
+  <div v-if="float" class="floating-reset-btn nc-floating-preview-btn px-2" :style="{ top: position.y, left: position.x }">
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
     <div class="divider" />
 
@@ -52,14 +56,17 @@ watch(previewAs, () => window.location.reload())
       <span>Preview as :</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
-        <a-radio v-for="role in roleList" :key="role.title" class="!text-xs !text-white" :value="role.title">{{ role.title }}
+        <a-radio v-for="role in roleList" :key="role.title" class="!text-xs !text-white" :value="role.title"
+          >{{ role.title }}
         </a-radio>
       </a-radio-group>
 
       <div class="divider" />
 
-      <div class="flex items-center gap-2 cursor-pointer" @click="previewAs= null"> <MdiExitToApp/> Exit</div>
-
+      <div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null">
+        <MdiExitToApp />
+        Exit
+      </div>
     </div>
   </div>
 
@@ -69,8 +76,17 @@ watch(previewAs, () => window.location.reload())
         <div class="p-1 flex gap-2 items-center">
           <component :is="roleIcon[role.title]" />
 
-          <span class="text-capitalize text-xs" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title
-            }}</span>
+          <span class="text-capitalize text-xs" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
+        </div>
+      </a-menu-item>
+    </template>
+
+    <template v-if="previewAs">
+      <a-menu-item @click="previewAs = null">
+        <div class="p-1 flex gap-2 items-center">
+          <mdi-close />
+          <!-- Reset Preview -->
+          <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
         </div>
       </a-menu-item>
     </template>
@@ -79,15 +95,15 @@ watch(previewAs, () => window.location.reload())
 
 <style scoped>
 .floating-reset-btn {
-  @apply bg-primary z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
-  @apply flex items-center overflow-hidden whitespace-nowrap gap-2
+  @apply bg-primary/80 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
+  @apply flex items-center overflow-hidden whitespace-nowrap gap-2 rounded shadow-md;
 }
 
 :deep(.ant-radio) {
   @apply transform scale-80;
 }
 
-.divider{
-  @apply h-5 w-2px bg-white/50
+.divider {
+  @apply h-5 w-2px bg-white/50;
 }
 </style>

From f0a345a80739898632976c0c0a9a621be7cdbeb8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 17:28:29 +0530
Subject: [PATCH 3/5] fix(gui-v2): show preview as only if it is not-null

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/{ => general}/PreviewAs.vue     | 9 +++++++--
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue        | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)
 rename packages/nc-gui-v2/components/{ => general}/PreviewAs.vue (93%)

diff --git a/packages/nc-gui-v2/components/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
similarity index 93%
rename from packages/nc-gui-v2/components/PreviewAs.vue
rename to packages/nc-gui-v2/components/general/PreviewAs.vue
index 2fd51d7048..9947902841 100644
--- a/packages/nc-gui-v2/components/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -48,7 +48,12 @@ watch(previewAs, () => window.location.reload())
 </script>
 
 <template>
-  <div v-if="float" class="floating-reset-btn nc-floating-preview-btn px-2" :style="{ top: position.y, left: position.x }">
+  <div
+    v-if="float"
+    v-show="previewAs"
+    class="floating-reset-btn nc-floating-preview-btn px-2"
+    :style="{ top: position.y, left: position.x }"
+  >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
     <div class="divider" />
 
@@ -95,7 +100,7 @@ watch(previewAs, () => window.location.reload())
 
 <style scoped>
 .floating-reset-btn {
-  @apply bg-primary/80 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
+  @apply bg-primary/90 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
   @apply flex items-center overflow-hidden whitespace-nowrap gap-2 rounded shadow-md;
 }
 
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index a7104621fd..23b56546b5 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
+import PreviewAs from '~/components/general/PreviewAs.vue'
 import { TabType } from '~/composables'
 import { openLink } from '~/utils'
 

From c3badd4dcbb6a77461da259f04b4878b42e49c41 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 17:48:44 +0530
Subject: [PATCH 4/5] refactor(gui-v2): ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/general/PreviewAs.vue    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 9947902841..9eaa3cccc8 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -51,22 +51,22 @@ watch(previewAs, () => window.location.reload())
   <div
     v-if="float"
     v-show="previewAs"
-    class="floating-reset-btn nc-floating-preview-btn px-2"
+    class="floating-reset-btn nc-floating-preview-btn p-4"
     :style="{ top: position.y, left: position.x }"
   >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
     <div class="divider" />
 
-    <div class="pointer flex items-center gap-2">
+    <div class="pointer flex items-center gap-4">
       <span>Preview as :</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
-        <a-radio v-for="role in roleList" :key="role.title" class="!text-xs !text-white" :value="role.title"
+        <a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
           >{{ role.title }}
         </a-radio>
       </a-radio-group>
 
-      <div class="divider" />
+      <div class="divider -ml-4" />
 
       <div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null">
         <MdiExitToApp />
@@ -81,7 +81,7 @@ watch(previewAs, () => window.location.reload())
         <div class="p-1 flex gap-2 items-center">
           <component :is="roleIcon[role.title]" />
 
-          <span class="text-capitalize text-xs" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
+          <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
         </div>
       </a-menu-item>
     </template>
@@ -100,8 +100,9 @@ watch(previewAs, () => window.location.reload())
 
 <style scoped>
 .floating-reset-btn {
-  @apply bg-primary/90 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
-  @apply flex items-center overflow-hidden whitespace-nowrap gap-2 rounded shadow-md;
+  @apply z-1000 index-100 fixed text-white
+  @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;
+  background-color: #4351e7;
 }
 
 :deep(.ant-radio) {

From d2e24be878cbcdd50b3a14f49b6bee1d0d9e8c81 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 20:02:59 +0530
Subject: [PATCH 5/5] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/general/PreviewAs.vue | 3 +--
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue   | 5 ++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index 9eaa3cccc8..e7d2e1cc88 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { onUnmounted } from '@vue/runtime-core'
+import { onUnmounted, useEventListener, useGlobal, watch } from '#imports'
 import { useState } from '#app'
-import { useEventListener, useGlobal, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 23b56546b5..0e2762563a 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
-import PreviewAs from '~/components/general/PreviewAs.vue'
 import { TabType } from '~/composables'
 import { openLink } from '~/utils'
 
@@ -178,7 +177,7 @@ await loadTables()
 
                     <template #expandIcon></template>
 
-                    <PreviewAs />
+                    <GeneralPreviewAs />
                   </a-sub-menu>
                 </a-menu-item-group>
               </a-menu>
@@ -214,7 +213,7 @@ await loadTables()
 
     <NuxtPage />
 
-    <PreviewAs float />
+    <GeneralPreviewAs float />
   </NuxtLayout>
 </template>