From 768eaff09ecfb1a63672ad17118bf23e5abc7a0d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 7 Nov 2023 07:17:37 +0000
Subject: [PATCH 1/4] fix: Added column id copy in Field manager and added
 option to display column

---
 .../components/smartsheet/details/Fields.vue  | 108 +++++++++++++++++-
 1 file changed, 106 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index e90ba5c065..59454c899d 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -48,6 +48,8 @@ const visibilityOps = ref<fieldsVisibilityOps[]>([])
 
 const fieldsListWrapperDomRef = ref<HTMLElement>()
 
+const { copy } = useClipboard()
+
 const { fields: viewFields, toggleFieldVisibility, loadViewColumns, isViewColumnsLoading } = useViewColumnsOrThrow()
 
 const loading = ref(false)
@@ -56,6 +58,8 @@ const columnsHash = ref<string>()
 
 const newFields = ref<TableExplorerColumn[]>([])
 
+const isFieldIdCopied = ref(false)
+
 const compareCols = (a?: TableExplorerColumn, b?: TableExplorerColumn) => {
   if (a?.id && b?.id) {
     return a.id === b.id
@@ -646,6 +650,12 @@ onKeyDown('ArrowRight', () => {
   }
 })
 
+const onClickCopyFieldUrl = async (field: ColumnType) => {
+  await copy(field.id!)
+
+  isFieldIdCopied.value = true
+}
+
 const keys = useMagicKeys()
 
 whenever(keys.meta_s, () => {
@@ -819,10 +829,39 @@ onMounted(async () => {
                       </div>
                     </NcButton>
                     <NcDropdown v-else :trigger="['click']" overlay-class-name="nc-dropdown-table-explorer" @click.stop>
-                      <GeneralIcon icon="threeDotVertical" class="no-action opacity-0 group-hover:(opacity-100) text-gray-500" />
+                      <NcButton
+                        size="xsmall"
+                        type="text"
+                        class="!opacity-0 !group-hover:(opacity-100)"
+                        :class="{
+                          '!hover:(text-brand-700 bg-brand-100) !group-hover:(text-brand-500)': compareCols(field, activeField),
+                          '!hover:(text-gray-700 bg-gray-200) !group-hover:(text-gray-500)': !compareCols(field, activeField),
+                        }"
+                      >
+                        <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
+                      </NcButton>
 
                       <template #overlay>
                         <NcMenu>
+                          <NcTooltip placement="top">
+                            <template #title>Click to copy Field Id</template>
+
+                            <div
+                              class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
+                              @click="onClickCopyFieldUrl(field)"
+                            >
+                              <div class="flex flex-col gap-y-1">
+                                <div class="text-gray-700">Field Id:</div>
+                                <div class="flex flex-row text-gray-500 text-xs">
+                                  {{ field.id }}
+                                </div>
+                              </div>
+                              <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
+                              <GeneralIcon v-else icon="copy" class="mt-0.75" />
+                            </div>
+                          </NcTooltip>
+                          <a-menu-divider class="mb-1" />
+
                           <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
                             <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
                           </NcMenuItem>
@@ -837,7 +876,7 @@ onMounted(async () => {
 
                           <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
                             <div class="text-red-500">
-                              <GeneralIcon icon="delete" class="group-hover:text-accent" />
+                              <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
                               Delete
                             </div>
                           </NcMenuItem>
@@ -915,6 +954,52 @@ onMounted(async () => {
                         Restore
                       </div>
                     </NcButton>
+                    <NcDropdown
+                      v-else
+                      :trigger="['click']"
+                      overlay-class-name="nc-dropdown-table-explorer-display-column"
+                      @click.stop
+                    >
+                      <NcButton
+                        size="xsmall"
+                        type="text"
+                        class="!opacity-0 !group-hover:(opacity-100)"
+                        :class="{
+                          '!hover:(text-brand-700 bg-brand-100) !group-hover:(text-brand-500)': compareCols(
+                            displayColumn,
+                            activeField,
+                          ),
+                          '!hover:(text-gray-700 bg-gray-200) !group-hover:(text-gray-500)': !compareCols(
+                            displayColumn,
+                            activeField,
+                          ),
+                        }"
+                      >
+                        <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
+                      </NcButton>
+
+                      <template #overlay>
+                        <NcMenu>
+                          <NcTooltip placement="top">
+                            <template #title>Click to copy Field Id</template>
+
+                            <div
+                              class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
+                              @click="onClickCopyFieldUrl(displayColumn)"
+                            >
+                              <div class="flex flex-col gap-y-1">
+                                <div class="text-gray-700">Field Id:</div>
+                                <div class="flex flex-row text-xs text-gray-500">
+                                  {{ displayColumn.id }}
+                                </div>
+                              </div>
+                              <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
+                              <GeneralIcon v-else icon="copy" class="mt-0.75" />
+                            </div>
+                          </NcTooltip>
+                        </NcMenu>
+                      </template>
+                    </NcDropdown>
                     <MdiChevronRight
                       class="text-brand-500 opacity-0"
                       :class="{
@@ -954,7 +1039,26 @@ onMounted(async () => {
   </div>
 </template>
 
+<style lang="scss">
+.nc-dropdown-table-explorer {
+  @apply !overflow-hidden;
+}
+.nc-dropdown-table-explorer > div > ul.ant-dropdown-menu.nc-menu {
+  @apply !pt-0;
+}
+
+.nc-dropdown-table-explorer-display-column {
+  @apply !overflow-hidden;
+}
+.nc-dropdown-table-explorer-display-column > div > ul.ant-dropdown-menu.nc-menu {
+  @apply !py-1.5;
+}
+</style>
+
 <style lang="scss" scoped>
+:deep(ul.ant-dropdown-menu.nc-menu) {
+  @apply !pt-0;
+}
 .add {
   background-color: #e6ffed !important;
   border-color: #b7eb8f;

From c45feb1431f2d01db294099e8b435655e849bb78 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 7 Nov 2023 07:17:38 +0000
Subject: [PATCH 2/4] fix: Fixed issue with link copy state and small UI issues

---
 .../components/smartsheet/details/Fields.vue  | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 59454c899d..14f7e6084f 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -60,6 +60,8 @@ const newFields = ref<TableExplorerColumn[]>([])
 
 const isFieldIdCopied = ref(false)
 
+const isColOptionDropdownOpen = ref(false)
+
 const compareCols = (a?: TableExplorerColumn, b?: TableExplorerColumn) => {
   if (a?.id && b?.id) {
     return a.id === b.id
@@ -683,6 +685,14 @@ onMounted(async () => {
     columnsHash.value = (await $api.dbTableColumn.hash(meta.value.id)).hash
   }
 })
+
+watch(isColOptionDropdownOpen, () => {
+  if (isColOptionDropdownOpen.value === true) return
+
+  setTimeout(() => {
+    isFieldIdCopied.value = false
+  }, 200)
+})
 </script>
 
 <template>
@@ -828,7 +838,13 @@ onMounted(async () => {
                         Restore
                       </div>
                     </NcButton>
-                    <NcDropdown v-else :trigger="['click']" overlay-class-name="nc-dropdown-table-explorer" @click.stop>
+                    <NcDropdown
+                      v-else
+                      v-model:visible="isColOptionDropdownOpen"
+                      :trigger="['click']"
+                      overlay-class-name="nc-dropdown-table-explorer"
+                      @click.stop
+                    >
                       <NcButton
                         size="xsmall"
                         type="text"
@@ -842,25 +858,27 @@ onMounted(async () => {
                       </NcButton>
 
                       <template #overlay>
-                        <NcMenu>
-                          <NcTooltip placement="top">
-                            <template #title>Click to copy Field Id</template>
-
-                            <div
-                              class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
-                              @click="onClickCopyFieldUrl(field)"
-                            >
-                              <div class="flex flex-col gap-y-1">
-                                <div class="text-gray-700">Field Id:</div>
-                                <div class="flex flex-row text-gray-500 text-xs">
-                                  {{ field.id }}
+                        <NcMenu style="padding-top: 0.45rem !important">
+                          <template v-if="fieldStatus(field) !== 'add'">
+                            <NcTooltip placement="top">
+                              <template #title>Click to copy Field Id</template>
+
+                              <div
+                                class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
+                                @click="onClickCopyFieldUrl(field)"
+                              >
+                                <div class="flex flex-col gap-y-1">
+                                  <div class="text-gray-700">Field Id:</div>
+                                  <div class="flex flex-row text-gray-500 text-xs">
+                                    {{ field.id }}
+                                  </div>
                                 </div>
+                                <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
+                                <GeneralIcon v-else icon="copy" class="mt-0.75" />
                               </div>
-                              <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
-                              <GeneralIcon v-else icon="copy" class="mt-0.75" />
-                            </div>
-                          </NcTooltip>
-                          <a-menu-divider class="mb-1" />
+                            </NcTooltip>
+                            <a-menu-divider class="mb-1.5" />
+                          </template>
 
                           <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
                             <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
@@ -872,7 +890,7 @@ onMounted(async () => {
                             <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
                           </NcMenuItem>
 
-                          <a-menu-divider class="my-1" />
+                          <a-menu-divider class="my-1.5" />
 
                           <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
                             <div class="text-red-500">

From e79adce2fe48344e04bc68ca14ef6187e4dcff0c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 7 Nov 2023 07:17:38 +0000
Subject: [PATCH 3/4] fix: Fixed issue with field dropdown

---
 packages/nc-gui/components/nc/Dropdown.vue             | 10 +++++++++-
 .../nc-gui/components/smartsheet/details/Fields.vue    |  9 ++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/nc/Dropdown.vue b/packages/nc-gui/components/nc/Dropdown.vue
index e1909ee982..7118f0b53b 100644
--- a/packages/nc-gui/components/nc/Dropdown.vue
+++ b/packages/nc-gui/components/nc/Dropdown.vue
@@ -47,6 +47,14 @@ onClickOutside(overlayWrapperDomRef, () => {
 
   visible.value = false
 })
+
+const onVisibleUpdate = (event: any) => {
+  if (visible !== undefined) {
+    visible.value = event
+  } else {
+    emits('update:visible', event)
+  }
+}
 </script>
 
 <template>
@@ -54,7 +62,7 @@ onClickOutside(overlayWrapperDomRef, () => {
     :visible="visible"
     :trigger="trigger"
     :overlay-class-name="overlayClassNameComputed"
-    @update:visible="visible !== undefined ? (visible = $event) : undefined"
+    @update:visible="onVisibleUpdate"
   >
     <slot />
 
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 14f7e6084f..6a4f2e2bf8 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -686,13 +686,11 @@ onMounted(async () => {
   }
 })
 
-watch(isColOptionDropdownOpen, () => {
-  if (isColOptionDropdownOpen.value === true) return
-
+const onFieldOptionUpdate = () => {
   setTimeout(() => {
     isFieldIdCopied.value = false
   }, 200)
-})
+}
 </script>
 
 <template>
@@ -840,9 +838,9 @@ watch(isColOptionDropdownOpen, () => {
                     </NcButton>
                     <NcDropdown
                       v-else
-                      v-model:visible="isColOptionDropdownOpen"
                       :trigger="['click']"
                       overlay-class-name="nc-dropdown-table-explorer"
+                      @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
                       <NcButton
@@ -976,6 +974,7 @@ watch(isColOptionDropdownOpen, () => {
                       v-else
                       :trigger="['click']"
                       overlay-class-name="nc-dropdown-table-explorer-display-column"
+                      @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
                       <NcButton

From c9cbf63df3fd210be995563fff40c9ec41e3ec60 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 7 Nov 2023 07:17:38 +0000
Subject: [PATCH 4/4] fix: Fixed UI for field option in fields page

---
 .../components/smartsheet/details/Fields.vue  | 34 +++++++++++--------
 packages/nc-gui/lang/en.json                  |  2 ++
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 6a4f2e2bf8..677c015c29 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -859,23 +859,25 @@ const onFieldOptionUpdate = () => {
                         <NcMenu style="padding-top: 0.45rem !important">
                           <template v-if="fieldStatus(field) !== 'add'">
                             <NcTooltip placement="top">
-                              <template #title>Click to copy Field Id</template>
+                              <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
 
                               <div
-                                class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
+                                class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                                 @click="onClickCopyFieldUrl(field)"
                               >
-                                <div class="flex flex-col gap-y-1">
-                                  <div class="text-gray-700">Field Id:</div>
-                                  <div class="flex flex-row text-gray-500 text-xs">
+                                <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
+                                  <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
+                                  <div class="flex flex-row text-gray-600 text-xs">
                                     {{ field.id }}
                                   </div>
                                 </div>
-                                <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
-                                <GeneralIcon v-else icon="copy" class="mt-0.75" />
+                                <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
+                                  <GeneralIcon v-if="isFieldIdCopied" icon="check" />
+                                  <GeneralIcon v-else icon="copy" />
+                                </NcButton>
                               </div>
                             </NcTooltip>
-                            <a-menu-divider class="mb-1.5" />
+                            <a-menu-divider class="my-1.5" />
                           </template>
 
                           <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
@@ -998,20 +1000,22 @@ const onFieldOptionUpdate = () => {
                       <template #overlay>
                         <NcMenu>
                           <NcTooltip placement="top">
-                            <template #title>Click to copy Field Id</template>
+                            <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
 
                             <div
-                              class="flex flex-row px-3 py-2 w-42 justify-between items-start hover:bg-gray-100 cursor-pointer"
+                              class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                               @click="onClickCopyFieldUrl(displayColumn)"
                             >
-                              <div class="flex flex-col gap-y-1">
-                                <div class="text-gray-700">Field Id:</div>
-                                <div class="flex flex-row text-xs text-gray-500">
+                              <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
+                                <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
+                                <div class="flex flex-row text-gray-600 text-xs">
                                   {{ displayColumn.id }}
                                 </div>
                               </div>
-                              <GeneralIcon v-if="isFieldIdCopied" icon="check" class="mt-0.75" />
-                              <GeneralIcon v-else icon="copy" class="mt-0.75" />
+                              <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
+                                <GeneralIcon v-if="isFieldIdCopied" icon="check" />
+                                <GeneralIcon v-else icon="copy" />
+                              </NcButton>
                             </div>
                           </NcTooltip>
                         </NcMenu>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index d21206d79b..3eb2933c86 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -419,6 +419,7 @@
     "headerName": "Header Name",
     "icon": "Icon",
     "max": "Max",
+    "idColon": "Id:",
     "copiedRecordURL": "Copied Record URL",
     "copyRecordURL": "Copy Record URL",
     "duplicateRecord": "Duplicate record",
@@ -901,6 +902,7 @@
     "key": "Key"
   },
   "msg": {
+    "clickToCopyFieldId": "Click to copy Field Id",
     "enterPassword": "Enter password",
     "bySigningUp": "By signing up, you agree to the",
     "subscribeToOurWeeklyNewsletter": "Subscribe to our weekly newsletter",