Browse Source

Merge pull request #7413 from nocodb/nc-fix/ui-bug-fixes

UI bug fixes ( Sync EE to OSS )
pull/7443/head
Raju Udava 10 months ago committed by GitHub
parent
commit
b4ab7316a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 14
      packages/nc-gui/components/account/UserList.vue
  2. 2
      packages/nc-gui/components/cell/Text.vue
  3. 15
      packages/nc-gui/components/project/AccessSettings.vue
  4. 45
      packages/nc-gui/components/smartsheet/header/Cell.vue
  5. 20
      packages/nc-gui/components/smartsheet/header/VirtualCell.vue
  6. 14
      packages/nc-gui/components/workspace/CollaboratorsList.vue
  7. 45
      packages/nocodb-sdk/src/lib/UITypes.ts
  8. 1
      packages/nocodb-sdk/src/lib/index.ts
  9. 15
      packages/nocodb/src/models/User.ts

14
packages/nc-gui/components/account/UserList.vue

@ -203,13 +203,13 @@ const openDeleteModal = (user: UserType) => {
data-rec="true"
>
<span>
{{ $t('labels.email') }}
{{ $t('objects.users') }}
</span>
<LazyAccountUserMenu :direction="sortDirection.email" field="email" :handle-user-sort="saveOrUpdate" />
</div>
<div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start flex items-center space-x-2" data-rec="true">
<span>
{{ $t('objects.role') }}
{{ $t('general.access') }}
</span>
<LazyAccountUserMenu :direction="sortDirection.roles" field="roles" :handle-user-sort="saveOrUpdate" />
</div>
@ -235,7 +235,15 @@ const openDeleteModal = (user: UserType) => {
}"
>
<div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
<GeneralTruncateText length="29">
<NcTooltip v-if="el.display_name">
<template #title>
{{ el.email }}
</template>
<GeneralTruncateText length="29">
{{ el.display_name }}
</GeneralTruncateText>
</NcTooltip>
<GeneralTruncateText v-else length="29">
{{ el.email }}
</GeneralTruncateText>
</div>

2
packages/nc-gui/components/cell/Text.vue

@ -60,5 +60,5 @@ const focus: VNodeRef = (el) =>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :style="{ 'word-break': 'break-word' }" />
</template>

15
packages/nc-gui/components/project/AccessSettings.vue

@ -30,6 +30,7 @@ interface Collaborators {
base_roles: Roles
workspace_roles: WorkspaceUserRoles
created_at: string
display_name: string | null
}
const collaborators = ref<Collaborators[]>([])
const totalCollaborators = ref(0)
@ -40,7 +41,9 @@ const isSearching = ref(false)
const accessibleRoles = ref<(typeof ProjectRoles)[keyof typeof ProjectRoles][]>([])
const filteredCollaborators = computed(() =>
collaborators.value.filter((collab) => collab.email.toLowerCase().includes(userSearchText.value.toLowerCase())),
collaborators.value.filter((collab) =>
(collab.display_name || collab.email).toLowerCase().includes(userSearchText.value.toLowerCase()),
),
)
const sortedCollaborators = computed(() => {
@ -182,7 +185,15 @@ onMounted(async () => {
>
<div class="flex gap-3 items-center users-email-grid">
<GeneralUserIcon size="base" :email="collab.email" />
<span class="truncate">
<NcTooltip v-if="collab.display_name">
<template #title>
{{ collab.email }}
</template>
<span class="truncate">
{{ collab.display_name }}
</span>
</NcTooltip>
<span v-else class="truncate">
{{ collab.email }}
</span>
</div>

45
packages/nc-gui/components/smartsheet/header/Cell.vue

@ -1,6 +1,18 @@
<script setup lang="ts">
import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
import { ColumnInj, IsExpandedFormOpenInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useRoles } from '#imports'
import { UITypes, UITypesName } from 'nocodb-sdk'
import {
ColumnInj,
IsExpandedFormOpenInj,
IsFormInj,
IsKanbanInj,
inject,
parseProp,
provide,
ref,
toRef,
useRoles,
} from '#imports'
interface Props {
column: ColumnType
@ -15,6 +27,8 @@ const { isMobileMode } = useGlobal()
const hideMenu = toRef(props, 'hideMenu')
const isGrid = inject(IsGridInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const isLocked = inject(IsLockedInj, ref(false))
@ -37,6 +51,13 @@ const editColumnDropdown = ref(false)
const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
const columnTypeName = computed(() => {
if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
return UITypesName.RichText
}
return column.value.uidt ? UITypesName[column.value.uidt] : ''
})
const addField = async (payload: any) => {
columnOrder.value = payload
editColumnDropdown.value = true
@ -84,12 +105,22 @@ const onClick = (e: Event) => {
@click.right="openDropDown"
@click="onClick"
>
<SmartsheetHeaderCellIcon
v-if="column && !props.hideIcon"
:class="{
'self-start': isForm || isSurveyForm,
}"
/>
<template v-if="column && !props.hideIcon">
<NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
<template #title> {{ columnTypeName }} </template>
<SmartsheetHeaderCellIcon
:class="{
'self-start': isForm || isSurveyForm,
}"
/>
</NcTooltip>
<SmartsheetHeaderCellIcon
v-else
:class="{
'self-start': isForm || isSurveyForm,
}"
/>
</template>
<NcTooltip
v-if="column"
:class="{

20
packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { ColumnReqType, ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
import { UITypes, UITypesName, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
import {
ColumnInj,
IsFormInj,
@ -46,6 +46,8 @@ const { isUIAllowed } = useRoles()
const meta = inject(MetaInj, ref())
const isGrid = inject(IsGridInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
@ -116,6 +118,13 @@ const tooltipMsg = computed(() => {
const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
const columnTypeName = computed(() => {
if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
return UITypesName.RichText
}
return column.value.uidt ? UITypesName[column.value.uidt] : ''
})
const addField = async (payload: any) => {
columnOrder.value = payload
editColumnDropdown.value = true
@ -152,8 +161,13 @@ const openDropDown = (e: Event) => {
@dblclick="openHeaderMenu"
@click.right="openDropDown"
>
<LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
<template v-if="column && !props.hideIcon">
<NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
<template #title> {{ columnTypeName }} </template>
<LazySmartsheetHeaderVirtualCellIcon />
</NcTooltip>
<LazySmartsheetHeaderVirtualCellIcon v-else />
</template>
<NcTooltip placement="bottom" class="truncate name pl-1" show-on-truncate-only>
<template #title>
{{ tooltipMsg }}

14
packages/nc-gui/components/workspace/CollaboratorsList.vue

@ -19,7 +19,9 @@ const filterCollaborators = computed(() => {
if (!collaborators.value) return []
return collaborators.value.filter((collab) => collab.email!.includes(userSearchText.value))
return collaborators.value.filter((collab) =>
(collab.display_name || collab.email).toLowerCase().includes(userSearchText.value.toLowerCase()),
)
})
const sortedCollaborators = computed(() => {
@ -96,7 +98,15 @@ onMounted(async () => {
>
<div class="flex gap-3 items-center users-email-grid w-3/8 ml-10">
<GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
<span class="truncate">
<NcTooltip v-if="collab.display_name">
<template #title>
{{ collab.email }}
</template>
<span class="truncate">
{{ collab.display_name }}
</span>
</NcTooltip>
<span v-else class="truncate">
{{ collab.email }}
</span>
</div>

45
packages/nocodb-sdk/src/lib/UITypes.ts

@ -44,6 +44,51 @@ enum UITypes {
LastModifiedBy = 'LastModifiedBy',
}
export const UITypesName = {
[UITypes.ID]: 'ID',
[UITypes.LinkToAnotherRecord]: 'Link to another record',
[UITypes.ForeignKey]: 'Foreign key',
[UITypes.Lookup]: 'Lookup',
[UITypes.SingleLineText]: 'Single line text',
[UITypes.LongText]: 'Long text',
RichText: 'Rich text',
[UITypes.Attachment]: 'Attachment',
[UITypes.Checkbox]: 'Checkbox',
[UITypes.MultiSelect]: 'Multi select',
[UITypes.SingleSelect]: 'Single select',
[UITypes.Collaborator]: 'Collaborator',
[UITypes.Date]: 'Date',
[UITypes.Year]: 'Year',
[UITypes.Time]: 'Time',
[UITypes.PhoneNumber]: 'Phone number',
[UITypes.GeoData]: 'Geo data',
[UITypes.Email]: 'Email',
[UITypes.URL]: 'URL',
[UITypes.Number]: 'Number',
[UITypes.Decimal]: 'Decimal',
[UITypes.Currency]: 'Currency',
[UITypes.Percent]: 'Percent',
[UITypes.Duration]: 'Duration',
[UITypes.Rating]: 'Rating',
[UITypes.Formula]: 'Formula',
[UITypes.Rollup]: 'Rollup',
[UITypes.Count]: 'Count',
[UITypes.DateTime]: 'Date time',
[UITypes.CreatedTime]: 'Created time',
[UITypes.LastModifiedTime]: 'Last modified time',
[UITypes.AutoNumber]: 'Auto number',
[UITypes.Geometry]: 'Geometry',
[UITypes.JSON]: 'JSON',
[UITypes.SpecificDBType]: 'Specific DB type',
[UITypes.Barcode]: 'Barcode',
[UITypes.QrCode]: 'Qr code',
[UITypes.Button]: 'Button',
[UITypes.Links]: 'Links',
[UITypes.User]: 'User',
[UITypes.CreatedBy]: 'Created by',
[UITypes.LastModifiedBy]: 'Last modified by',
};
export const numericUITypes = [
UITypes.Duration,
UITypes.Currency,

1
packages/nocodb-sdk/src/lib/index.ts

@ -9,6 +9,7 @@ export * from '~/lib/enums';
export * from '~/lib/formulaHelpers';
export {
default as UITypes,
UITypesName,
numericUITypes,
isNumericCol,
isVirtualCol,

15
packages/nocodb/src/models/User.ts

@ -194,7 +194,7 @@ export default class User implements UserType {
{
limit,
offset,
query,
query = '',
}: {
limit?: number | undefined;
offset?: number | undefined;
@ -217,6 +217,7 @@ export default class User implements UserType {
`${MetaTable.USERS}.created_at`,
`${MetaTable.USERS}.updated_at`,
`${MetaTable.USERS}.roles`,
`${MetaTable.USERS}.display_name`,
)
.select(
ncMeta
@ -228,7 +229,17 @@ export default class User implements UserType {
.as('projectsCount'),
);
if (query) {
queryBuilder.where('email', 'like', `%${query.toLowerCase?.()}%`);
queryBuilder.where(function () {
this.where(function () {
this.whereNotNull('display_name')
.andWhereNot('display_name', '')
.andWhere('display_name', 'like', `%${query.toLowerCase()}%`);
}).orWhere(function () {
this.where(function () {
this.whereNull('display_name').orWhere('display_name', '');
}).andWhere('email', 'like', `%${query.toLowerCase()}%`);
});
});
}
return queryBuilder;

Loading…
Cancel
Save