From f365c1ef948037a47766491ebc4caafcb1188b4a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 14 Nov 2022 15:23:15 +0100
Subject: [PATCH] feat(nc-gui): add option to set RTL on forms

---
 .../smartsheet/toolbar/ShareView.vue          | 23 ++++++++++++++++++-
 packages/nc-gui/lib/types.ts                  |  1 +
 .../pages/[projectType]/form/[viewId].vue     |  8 ++++---
 packages/nc-gui/plugins/a.i18n.ts             |  4 ++--
 packages/nc-gui/utils/viewUtils.ts            | 15 ++++++------
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 883d9532f7..fc849ab307 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -40,6 +40,14 @@ const passwordProtected = ref(false)
 
 const shared = ref<SharedView>({ id: '', meta: {}, password: undefined })
 
+const withRTL = computed({
+  get: () => !!shared.value.meta.locale,
+  set: (rtl) => {
+    shared.value.meta = { ...shared.value.meta, rtl }
+    updateSharedViewMeta()
+  },
+})
+
 const transitionDuration = computed({
   get: () => shared.value.meta.transitionDuration || 250,
   set: (duration) => {
@@ -105,7 +113,7 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+  return encodeURI(`${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`)
 })
 
 async function saveAllowCSVDownload() {
@@ -285,6 +293,19 @@ watch(passwordProtected, (value) => {
             </Transition>
           </div>
 
+          <div>
+            <!-- use RTL orientation in form - todo: i18n -->
+            <a-checkbox
+              v-if="shared.type === ViewTypes.FORM"
+              v-model:checked="withRTL"
+              data-testid="nc-modal-share-view__locale"
+              class="!text-sm"
+            >
+              <!-- todo i18n -->
+              RTL Orientation
+            </a-checkbox>
+          </div>
+
           <div>
             <!-- Password Protection -->
             <a-checkbox
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 44adc68d73..9807981404 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -86,6 +86,7 @@ export interface SharedViewMeta extends Record<string, any> {
   withTheme?: boolean
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
+  rtl?: boolean
 }
 
 export interface SharedView {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 2e61ec8255..b94c7df761 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -4,6 +4,7 @@ import {
   IsPublicInj,
   MetaInj,
   ReloadViewDataHookInj,
+  applyLanguageDirection,
   createError,
   createEventHook,
   definePageMeta,
@@ -26,9 +27,8 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { loadSharedView, sharedView, meta, notFound, password, passwordDlg, passwordError } = useProvideSharedFormStore(
-  route.params.viewId as string,
-)
+const { loadSharedView, sharedView, sharedViewMeta, meta, notFound, password, passwordDlg, passwordError } =
+  useProvideSharedFormStore(route.params.viewId as string)
 
 await loadSharedView()
 
@@ -39,6 +39,8 @@ if (!notFound.value) {
   provide(IsFormInj, ref(true))
 
   useProvideSmartsheetStore(sharedView, meta, true)
+
+  applyLanguageDirection(sharedViewMeta.value.rtl ? 'rtl' : 'ltr')
 } else {
   navigateTo('/error/404')
   throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
diff --git a/packages/nc-gui/plugins/a.i18n.ts b/packages/nc-gui/plugins/a.i18n.ts
index 88f7ea2ef1..3519f94937 100644
--- a/packages/nc-gui/plugins/a.i18n.ts
+++ b/packages/nc-gui/plugins/a.i18n.ts
@@ -1,6 +1,6 @@
 import { createI18n } from 'vue-i18n'
 import { isClient } from '@vueuse/core'
-import { applyLanguageDirection, defineNuxtPlugin, nextTick } from '#imports'
+import { applyLanguageDirection, defineNuxtPlugin, isRtlLang, nextTick } from '#imports'
 import type { Language, NocoI18n } from '~/lib'
 import { LanguageAlias } from '~/lib'
 
@@ -26,7 +26,7 @@ export async function setI18nLanguage(locale: keyof typeof Language, i18n = glob
 
   i18n.global.locale.value = locale
 
-  if (isClient) applyLanguageDirection(locale)
+  if (isClient) applyLanguageDirection(isRtlLang(locale) ? 'rtl' : 'ltr')
 }
 
 export async function loadLocaleMessages(
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index 30fbe3978d..2be0cb34b0 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -25,16 +25,15 @@ export const viewTypeAlias: Record<number, string> = {
   [ViewTypes.KANBAN]: 'kanban',
 }
 
-const isRtlLang = (lang: keyof typeof Language) => ['fa', 'ar'].includes(lang)
+export const isRtlLang = (lang: keyof typeof Language) => ['fa', 'ar'].includes(lang)
 
-const rtl = 'rtl'
-const ltr = 'ltr'
+const rtl = 'rtl' as const
+const ltr = 'ltr' as const
 
-export function applyLanguageDirection(lang: keyof typeof Language) {
-  const targetDirection = isRtlLang(lang) ? rtl : ltr
-  const oppositeDirection = targetDirection === ltr ? rtl : ltr
+export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
+  const oppositeDirection = dir === ltr ? rtl : ltr
 
   document.body.classList.remove(oppositeDirection)
-  document.body.classList.add(targetDirection)
-  document.body.style.direction = targetDirection
+  document.body.classList.add(dir)
+  document.body.style.direction = dir
 }