From 23fdfbbc7299d0a70acac8c0c3458d6e6e01a134 Mon Sep 17 00:00:00 2001
From: musharaf-nocodb <musharaf@nocodb.com>
Date: Thu, 7 Dec 2023 14:13:52 +0530
Subject: [PATCH] fix : fixed dropdown ui in invite-user

---
 packages/nc-gui/assets/style.scss             | 12 ++++++----
 .../nc-gui/components/account/UserList.vue    | 21 +++++++++++++++--
 .../nc-gui/components/account/UsersModal.vue  | 23 ++++++++++++++++---
 .../nc-gui/components/nc/SelectOption.vue     | 23 +++++++++++++++++++
 .../components/smartsheet/grid/Table.vue      | 20 ++++++++--------
 .../smartsheet/toolbar/ColumnFilter.vue       |  8 +++----
 .../toolbar/FieldListAutoCompleteDropdown.vue |  2 +-
 .../smartsheet/toolbar/GroupByMenu.vue        |  2 +-
 .../smartsheet/toolbar/SearchData.vue         |  2 +-
 .../smartsheet/toolbar/SortListMenu.vue       |  2 +-
 10 files changed, 88 insertions(+), 27 deletions(-)
 create mode 100644 packages/nc-gui/components/nc/SelectOption.vue

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 70cc3a4e1a..41200b582f 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -207,7 +207,7 @@ main {
 }
 
 a {
-  @apply !text-primary !underline hover:!text-accent;
+  @apply !text-primary !underline hover: !text-accent;
 }
 
 .nc-icon {
@@ -429,6 +429,7 @@ a {
   &.ant-dropdown-menu-submenu-popup {
     @apply border-1 border-gray-200;
   }
+
   .ant-dropdown-menu,
   .ant-menu {
     @apply m-0 p-0;
@@ -481,6 +482,7 @@ a {
 .nc-toolbar-btn {
   @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
 }
+
 .nc-toolbar-btn[disabled] {
   @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
 }
@@ -505,8 +507,8 @@ a {
   @apply bg-gray-300 bg-opacity-20;
 }
 
-/* Hide the element with id selected-item-icon inside NcSelect */
-.ant-select-selection-item #selected-item-icon {
+/* Hide the element with id nc-selected-item-icon */
+.ant-select-selection-item #nc-selected-item-icon {
   display: none;
 }
 
@@ -553,9 +555,11 @@ a {
   0% {
     opacity: 0.2;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: 0.2;
   }
@@ -638,7 +642,7 @@ input[type='number'] {
 }
 
 .ant-pagination .ant-pagination-next {
-  @apply !border-1  !rounded-md !border-gray-200 scale-95;
+  @apply !border-1 !rounded-md !border-gray-200 scale-95;
 }
 
 .ant-pagination .ant-pagination-item-active {
diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index da04844a0a..948383a383 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -215,6 +215,7 @@ const openDeleteModal = (user: UserType) => {
                 v-model:value="el.roles"
                 class="w-55 nc-user-roles"
                 :dropdown-match-select-width="false"
+                dropdown-class-name="max-w-64"
                 @change="updateRole(el.id, el.roles as string)"
               >
                 <a-select-option
@@ -222,7 +223,15 @@ const openDeleteModal = (user: UserType) => {
                   :value="OrgUserRoles.CREATOR"
                   :label="$t(`objects.roleType.orgLevelCreator`)"
                 >
-                  <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                  <div class="flex items-center gap-1 justify-between">
+                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                    <GeneralIcon
+                      v-if="el?.roles === OrgUserRoles.CREATOR"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                      id="nc-selected-item-icon"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgCreator') }}
                   </span>
@@ -233,7 +242,15 @@ const openDeleteModal = (user: UserType) => {
                   :value="OrgUserRoles.VIEWER"
                   :label="$t(`objects.roleType.orgLevelViewer`)"
                 >
-                  <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                  <div class="flex items-center gap-1 justify-between">
+                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                    <GeneralIcon
+                      v-if="el.roles === OrgUserRoles.VIEWER"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                      id="nc-selected-item-icon"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgViewer') }}
                   </span>
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index 0afba4bae9..1433785fb5 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -193,13 +193,22 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role !px-2">
                       <a-select-option
                         class="nc-role-option"
                         :value="OrgUserRoles.CREATOR"
                         :label="$t(`objects.roleType.orgLevelCreator`)"
                       >
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                        <div class="flex items-center gap-1 justify-between">
+                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.CREATOR"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                            id="nc-selected-item-icon"
+                          />
+                        </div>
+
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgCreator') }}
                         </span>
@@ -210,7 +219,15 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                         :value="OrgUserRoles.VIEWER"
                         :label="$t(`objects.roleType.orgLevelViewer`)"
                       >
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                        <div class="flex items-center gap-1 justify-between">
+                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.VIEWER"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                            id="nc-selected-item-icon"
+                          />
+                        </div>
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgViewer') }}
                         </span>
diff --git a/packages/nc-gui/components/nc/SelectOption.vue b/packages/nc-gui/components/nc/SelectOption.vue
new file mode 100644
index 0000000000..7ff2310498
--- /dev/null
+++ b/packages/nc-gui/components/nc/SelectOption.vue
@@ -0,0 +1,23 @@
+<template>
+  <a-select-option :value="value">
+    <div class="flex items-center w-full justify-between w-full gap-2">
+      <div class="truncate flex-1">
+        <slot />
+      </div>
+      <component v-if="isSelected" id="nc-selected-item-icon" class="text-primary w-6 h-6" :is="iconMap.check" />
+    </div>
+  </a-select-option>
+</template>
+<script lang="ts" setup>
+interface Props {
+  isSelected?: boolean
+  value?: string
+}
+
+const props = defineProps<Props>()
+const isSelected = computed(() => props.isSelected)
+const value = computed(() => props.value)
+console.log(props.isSelected, isSelected)
+</script>
+
+
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index e610b85f44..3cb6ad1a42 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1247,10 +1247,10 @@ onKeyStroke('ArrowDown', onDown)
       <div
         v-if="draggedCol"
         :style="{
-                'min-width': gridViewCols[draggedCol.id!]?.width || '200px',
-                'max-width': gridViewCols[draggedCol.id!]?.width || '200px',
-                'width': gridViewCols[draggedCol.id!]?.width || '200px',
-              }"
+        'min-width': gridViewCols[draggedCol.id!]?.width || '200px',
+        'max-width': gridViewCols[draggedCol.id!]?.width || '200px',
+        'width': gridViewCols[draggedCol.id!]?.width || '200px',
+      }"
         class="border-r-1 border-l-1 border-gray-200 h-full"
       ></div>
     </div>
@@ -1821,9 +1821,8 @@ onKeyStroke('ArrowDown', onDown)
                         <component :is="viewIcons[ViewTypes.GRID]?.icon" class="nc-view-icon text-inherit" />
                         {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }}
                       </div>
-                      <div class="h-4 w-4 flex flex-row items-center justify-center">
-                        <GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
-                      </div>
+
+                      <GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                     </div>
                     <div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
                   </div>
@@ -1837,9 +1836,8 @@ onKeyStroke('ArrowDown', onDown)
                         <GeneralIcon class="h-4.5 w-4.5" icon="article" />
                         {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
                       </div>
-                      <div class="h-4 w-4 flex flex-row items-center justify-center">
-                        <GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
-                      </div>
+
+                      <GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                     </div>
                     <div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div>
                   </div>
@@ -1879,6 +1877,7 @@ onKeyStroke('ArrowDown', onDown)
   .nc-grid-add-edit-column {
     @apply bg-gray-50;
   }
+
   .nc-grid-add-new-cell:hover td {
     @apply text-black !bg-gray-50;
   }
@@ -1999,6 +1998,7 @@ onKeyStroke('ArrowDown', onDown)
     thead th:nth-child(2) {
       @apply border-r-1 !border-r-gray-50;
     }
+
     tbody td:nth-child(2) {
       @apply border-r-1 !border-r-gray-50;
     }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index b3c4f7737e..99a6b15828 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -357,7 +357,7 @@ onBeforeUnmount(() => {
                         <component
                           :is="iconMap.check"
                           v-if="filter.logical_op === op.value"
-                          id="selected-item-icon"
+                          id="nc-selected-item-icon"
                           class="text-primary w-4 h-4"
                         />
                       </div>
@@ -411,7 +411,7 @@ onBeforeUnmount(() => {
                   <component
                     :is="iconMap.check"
                     v-if="filter.logical_op === op.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>
@@ -446,7 +446,7 @@ onBeforeUnmount(() => {
                     <component
                       :is="iconMap.check"
                       v-if="filter.comparison_op === compOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                       class="text-primary w-4 h-4"
                     />
                   </div>
@@ -480,7 +480,7 @@ onBeforeUnmount(() => {
                     <component
                       :is="iconMap.check"
                       v-if="filter.comparison_sub_op === compSubOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                       class="text-primary w-4 h-4"
                     />
                   </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index abf935e49e..7b99fa0cc0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -94,7 +94,7 @@ if (!localValue.value && allowEmpty !== true) {
             </span>
           </NcTooltip>
         </div>
-        <component :is="iconMap.check" v-if="localValue === option.value" id="selected-item-icon" class="text-primary w-4 h-4" />
+        <component :is="iconMap.check" v-if="localValue === option.value" id="nc-selected-item-icon" class="text-primary w-4 h-4" />
       </div>
     </a-select-option>
   </NcSelect>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 771148a058..84935dc4bb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -253,7 +253,7 @@ watch(meta, async () => {
                   <component
                     :is="iconMap.check"
                     v-if="group.sort === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 93a0f847d2..68f2dbe977 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -121,7 +121,7 @@ watch(columns, () => {
             <component
               :is="iconMap.check"
               v-if="search.field === op.value"
-              id="selected-item-icon"
+              id="nc-selected-item-icon"
               class="text-primary w-4 h-4"
             />
           </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 4777fcd190..a96d6bc6ac 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -164,7 +164,7 @@ onMounted(() => {
                   <component
                     :is="iconMap.check"
                     v-if="sort.direction === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>