From 0128f2be0e976ad31367d300d1a9f6feb5689654 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:45:49 +0200
Subject: [PATCH] refactor(nc-gui): use color picker in share view

---
 .../smartsheet/toolbar/ShareView.vue          | 35 +++++++++++++++----
 packages/nc-gui/lib/types.ts                  |  1 +
 .../[projectType]/form/[viewId]/index.vue     |  6 ++--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index d5c0cb367a..758259c0ae 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
+import tinycolor from 'tinycolor2'
 import {
   computed,
   extractSdkResponseErrorMsg,
   message,
+  projectThemeColors,
   ref,
   useCopy,
   useDashboard,
@@ -12,14 +14,11 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
-  useTheme,
   useUIPermission,
   watch,
 } from '#imports'
 import type { SharedView } from '~/lib'
 
-const { theme } = useTheme()
-
 const { t } = useI18n()
 
 const { view, $api } = useSmartsheetStoreOrThrow()
@@ -57,11 +56,11 @@ const surveyMode = computed({
 })
 
 const viewTheme = computed({
-  get: () => !!shared.value.meta.theme,
-  set: (hasTheme) => {
+  get: () => !!shared.value.meta.withTheme,
+  set: (withTheme) => {
     shared.value.meta = {
       ...shared.value.meta,
-      theme: hasTheme ? { ...theme.value } : undefined,
+      withTheme,
     }
     saveTheme()
   },
@@ -143,6 +142,20 @@ const saveShareLinkPassword = async () => {
   $e('a:view:share:enable-pwd')
 }
 
+function onChangeTheme(color: string) {
+  const tcolor = tinycolor(color)
+
+  if (tcolor.isValid()) {
+    const complement = tcolor.complement()
+    shared.value.meta.theme = {
+      primaryColor: color,
+      accentColor: complement.toHex8String(),
+    }
+
+    saveTheme()
+  }
+}
+
 const copyLink = async () => {
   if (sharedViewUrl.value) {
     await copy(sharedViewUrl.value)
@@ -210,6 +223,16 @@ watch(passwordProtected, (value) => {
           <div>
             <!-- todo: i18n -->
             <a-checkbox v-model:checked="viewTheme" class="!text-xs"> Use Theme </a-checkbox>
+
+            <div v-if="viewTheme" class="flex pl-2">
+              <LazyGeneralColorPicker
+                :model-value="shared.meta.theme?.primaryColor"
+                :colors="projectThemeColors"
+                :row-size="9"
+                :advanced="false"
+                @input="onChangeTheme"
+              />
+            </div>
           </div>
 
           <div>
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 7635873cb8..ba30800491 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -73,6 +73,7 @@ export interface TabItem {
 
 export interface SharedViewMeta extends Record<string, any> {
   surveyMode?: boolean
+  withTheme?: boolean
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
 }
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 7b806b219c..4d13318325 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -12,9 +12,9 @@ const route = useRoute()
 const router = useRouter()
 
 watch(
-  () => sharedViewMeta.value.theme,
-  (nextTheme) => {
-    if (nextTheme) setTheme(nextTheme)
+  () => sharedViewMeta.value.withTheme,
+  (hasTheme) => {
+    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme)
   },
   { immediate: true },
 )