mirror of https://github.com/nocodb/nocodb
Ramesh Mane
4 days ago
committed by
GitHub
28 changed files with 1020 additions and 102 deletions
@ -0,0 +1,523 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import type { UploadChangeParam, UploadFile } from 'ant-design-vue' |
||||||
|
import { Upload } from 'ant-design-vue' |
||||||
|
import data from 'emoji-mart-vue-fast/data/apple.json' |
||||||
|
import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src' |
||||||
|
import { WorkspaceIconType } from '#imports' |
||||||
|
import 'emoji-mart-vue-fast/css/emoji-mart.css' |
||||||
|
import { PublicAttachmentScope } from 'nocodb-sdk' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
icon: string | Record<string, any> |
||||||
|
iconType: WorkspaceIconType | string |
||||||
|
currentWorkspace: any |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {}) |
||||||
|
|
||||||
|
const emits = defineEmits(['update:icon', 'update:iconType', 'submit']) |
||||||
|
|
||||||
|
const { currentWorkspace } = toRefs(props) |
||||||
|
|
||||||
|
const vIcon = useVModel(props, 'icon', emits) |
||||||
|
|
||||||
|
const vIconType = useVModel(props, 'iconType', emits) |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const { getPossibleAttachmentSrc } = useAttachment() |
||||||
|
|
||||||
|
const isOpen = ref<boolean>(false) |
||||||
|
|
||||||
|
const isLoading = ref<boolean>(false) |
||||||
|
|
||||||
|
const inputRef = ref<HTMLInputElement>() |
||||||
|
|
||||||
|
const searchQuery = ref<string>('') |
||||||
|
|
||||||
|
const activeTabLocal = ref<WorkspaceIconType>(WorkspaceIconType.ICON) |
||||||
|
|
||||||
|
const activeTab = computed({ |
||||||
|
get: () => activeTabLocal.value, |
||||||
|
set: (value: WorkspaceIconType) => { |
||||||
|
searchQuery.value = '' |
||||||
|
|
||||||
|
activeTabLocal.value = value |
||||||
|
|
||||||
|
nextTick(() => { |
||||||
|
focusInput() |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const icons = computed(() => { |
||||||
|
return searchIcons(searchQuery.value) |
||||||
|
}) |
||||||
|
|
||||||
|
const selectIcon = (icon: string) => { |
||||||
|
vIcon.value = icon |
||||||
|
vIconType.value = WorkspaceIconType.ICON |
||||||
|
|
||||||
|
emits('submit') |
||||||
|
|
||||||
|
isOpen.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const handleRemoveIcon = (closeDropdown = true) => { |
||||||
|
vIcon.value = '' |
||||||
|
vIconType.value = '' |
||||||
|
|
||||||
|
if (closeDropdown) { |
||||||
|
isOpen.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const emojiIndex = new EmojiIndex(data, { |
||||||
|
emojisToShowFilter: (emoji: any) => { |
||||||
|
if (Number(emoji.added_in) >= 14) { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
function selectEmoji(_emoji: any) { |
||||||
|
vIcon.value = _emoji.native |
||||||
|
vIconType.value = WorkspaceIconType.EMOJI |
||||||
|
|
||||||
|
emits('submit') |
||||||
|
|
||||||
|
isOpen.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const fileList = ref<UploadFile[]>([]) |
||||||
|
|
||||||
|
const imageCropperData = ref({ |
||||||
|
cropperConfig: { |
||||||
|
stencilProps: { |
||||||
|
aspectRatio: 1, |
||||||
|
fillDefault: true, |
||||||
|
}, |
||||||
|
minHeight: 150, |
||||||
|
minWidth: 150, |
||||||
|
}, |
||||||
|
imageConfig: { |
||||||
|
src: '', |
||||||
|
type: 'image', |
||||||
|
name: 'icon', |
||||||
|
}, |
||||||
|
uploadConfig: { |
||||||
|
path: [NOCO, 'workspace', currentWorkspace.value?.id, 'icon'].join('/'), |
||||||
|
scope: PublicAttachmentScope.WORKSPACEPICS, |
||||||
|
maxFileSize: 2 * 1024 * 1024, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const handleOnUploadImage = async (data: any) => { |
||||||
|
vIcon.value = data |
||||||
|
vIconType.value = WorkspaceIconType.IMAGE |
||||||
|
|
||||||
|
emits('submit') |
||||||
|
|
||||||
|
isOpen.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const showImageCropperLocal = ref(false) |
||||||
|
|
||||||
|
const showImageCropper = ref(false) |
||||||
|
|
||||||
|
const getWorkspaceLogoSrc = computed(() => { |
||||||
|
if (vIcon.value && vIconType.value === WorkspaceIconType.IMAGE) { |
||||||
|
return getPossibleAttachmentSrc(vIcon.value) |
||||||
|
} |
||||||
|
|
||||||
|
return [] |
||||||
|
}) |
||||||
|
|
||||||
|
const isUploadingImage = ref(false) |
||||||
|
|
||||||
|
function rejectDrop(fileList: UploadFile[]) { |
||||||
|
fileList.map((file) => { |
||||||
|
return message.error(`${t('msg.error.fileUploadFailed')} ${file.name}`) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const handleChange = (info: UploadChangeParam) => { |
||||||
|
const status = info.file.status |
||||||
|
|
||||||
|
if (status === 'uploading') { |
||||||
|
isUploadingImage.value = true |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (status === 'done' && info.file.originFileObj instanceof File) { |
||||||
|
// 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file |
||||||
|
if (imageCropperData.value.imageConfig.src) { |
||||||
|
URL.revokeObjectURL(imageCropperData.value.imageConfig.src) |
||||||
|
} |
||||||
|
// 2. Create the blob link to the file to optimize performance: |
||||||
|
const blob = URL.createObjectURL(info.file.originFileObj) |
||||||
|
|
||||||
|
// 3. Update the image. The type will be derived from the extension |
||||||
|
imageCropperData.value.imageConfig = { |
||||||
|
src: blob, |
||||||
|
type: info.file.originFileObj.type, |
||||||
|
name: info.file.originFileObj.name, |
||||||
|
} |
||||||
|
|
||||||
|
isUploadingImage.value = false |
||||||
|
showImageCropper.value = true |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (status === 'error') { |
||||||
|
isUploadingImage.value = false |
||||||
|
message.error(`${t('msg.error.fileUploadFailed')} ${info.file.name}`) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** a workaround to override default antd upload api call */ |
||||||
|
const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => { |
||||||
|
fileList.value.forEach((f) => { |
||||||
|
if (f.uid === customReqArgs.file.uid) { |
||||||
|
f.status = 'done' |
||||||
|
handleChange({ file: f, fileList: fileList.value }) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
customReqArgs.onSuccess() |
||||||
|
} |
||||||
|
|
||||||
|
/** check if the file size exceeds the limit */ |
||||||
|
const beforeUpload = (file: UploadFile) => { |
||||||
|
const exceedLimit = file.size! / 1024 / 1024 > 2 |
||||||
|
if (exceedLimit) { |
||||||
|
message.error(`File ${file.name} is too big. The accepted file size is less than 2MB.`) |
||||||
|
} |
||||||
|
return !exceedLimit || Upload.LIST_IGNORE |
||||||
|
} |
||||||
|
|
||||||
|
const onVisibilityChange = (value: boolean) => { |
||||||
|
if (!value && showImageCropperLocal.value) { |
||||||
|
isOpen.value = true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function focusInput() { |
||||||
|
if (activeTab.value === WorkspaceIconType.EMOJI) { |
||||||
|
setTimeout(() => { |
||||||
|
const emojiInput = document.querySelector('.emoji-mart-search input') as HTMLInputElement |
||||||
|
|
||||||
|
if (!emojiInput) return |
||||||
|
|
||||||
|
emojiInput.focus() |
||||||
|
emojiInput.select() |
||||||
|
}) |
||||||
|
} else if (activeTab.value === WorkspaceIconType.ICON) { |
||||||
|
setTimeout(() => { |
||||||
|
inputRef.value?.focus() |
||||||
|
inputRef.value?.select() |
||||||
|
}, 250) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
watch(showImageCropper, (newValue) => { |
||||||
|
if (newValue) { |
||||||
|
showImageCropperLocal.value = true |
||||||
|
} else { |
||||||
|
setTimeout(() => { |
||||||
|
showImageCropperLocal.value = false |
||||||
|
}, 500) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch(isOpen, (newValue) => { |
||||||
|
if (newValue) { |
||||||
|
nextTick(() => { |
||||||
|
focusInput() |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<NcDropdown v-model:visible="isOpen" overlay-class-name="w-[432px]" @visible-change="onVisibilityChange"> |
||||||
|
<div |
||||||
|
class="rounded-lg border-1 flex-none w-17 h-17 overflow-hidden transition-all duration-300 cursor-pointer" |
||||||
|
:class="{ |
||||||
|
'border-transparent': !isOpen && vIconType === WorkspaceIconType.IMAGE, |
||||||
|
'border-nc-gray-medium': !isOpen && vIconType !== WorkspaceIconType.IMAGE, |
||||||
|
'border-primary shadow-selected': isOpen, |
||||||
|
}" |
||||||
|
> |
||||||
|
<GeneralWorkspaceIcon |
||||||
|
:workspace="currentWorkspace" |
||||||
|
:workspace-icon="{ |
||||||
|
icon: vIcon, |
||||||
|
iconType: vIconType, |
||||||
|
}" |
||||||
|
size="xlarge" |
||||||
|
class="!w-full !h-full !min-w-full rounded-none select-none cursor-pointer" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<template #overlay> |
||||||
|
<div class="pt-2 h-[320px]"> |
||||||
|
<NcTabs v-model:activeKey="activeTab" class="nc-workspace-icon-dropdown-tabs h-full"> |
||||||
|
<template #leftExtra> |
||||||
|
<div class="w-0"></div> |
||||||
|
</template> |
||||||
|
<template #rightExtra> |
||||||
|
<div> |
||||||
|
<NcButton size="xs" type="text" :disabled="!vIcon" @click.stop="handleRemoveIcon"> Remove </NcButton> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<a-tab-pane :key="WorkspaceIconType.ICON" class="w-full" :disabled="isLoading"> |
||||||
|
<template #tab> |
||||||
|
<div class="tab-title"> |
||||||
|
<GeneralIcon icon="ncPlaceholderIcon" class="flex-none" /> |
||||||
|
Icon |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<div class="h-full overflow-auto nc-scrollbar-thin flex flex-col"> |
||||||
|
<div class="!sticky top-0 flex gap-2 bg-white px-2 py-2"> |
||||||
|
<a-input |
||||||
|
ref="inputRef" |
||||||
|
v-model:value="searchQuery" |
||||||
|
:placeholder="$t('placeholder.searchIcons')" |
||||||
|
class="nc-dropdown-search-unified-input z-10" |
||||||
|
> |
||||||
|
</a-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-if="icons.length" class="grid px-3 auto-rows-max pb-2 gap-3 grid-cols-10"> |
||||||
|
<component |
||||||
|
:is="i" |
||||||
|
v-for="({ icon: i, name }, idx) in icons" |
||||||
|
:key="idx" |
||||||
|
:icon="i" |
||||||
|
class="w-6 hover:bg-gray-100 cursor-pointer rounded p-1 text-gray-700 h-6" |
||||||
|
@click="selectIcon(name)" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div v-else class="flex-1 grid place-items-center"> |
||||||
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane :key="WorkspaceIconType.IMAGE" class="w-full" :disabled="isLoading"> |
||||||
|
<template #tab> |
||||||
|
<div |
||||||
|
class="tab-title" |
||||||
|
:class="{ |
||||||
|
'!cursor-wait': isLoading, |
||||||
|
}" |
||||||
|
> |
||||||
|
<GeneralIcon icon="ncUpload" class="flex-none" /> |
||||||
|
Upload |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="p-2 flex flex-col gap-2.5 h-full"> |
||||||
|
<div v-if="getWorkspaceLogoSrc.length" class="flex items-center gap-4"> |
||||||
|
<div class="h-12 w-12 p-2"> |
||||||
|
<CellAttachmentPreviewImage |
||||||
|
:srcs="getWorkspaceLogoSrc" |
||||||
|
class="flex-none !object-contain max-h-full max-w-full !m-0 rounded-lg" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="flex-1 w-[calc(100%_-_108px)]"> |
||||||
|
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
||||||
|
<template #title> {{ vIcon?.title || 'Workspace logo' }}</template> |
||||||
|
{{ vIcon?.title || 'Workspace logo' }} |
||||||
|
</NcTooltip> |
||||||
|
<div class="text-nc-content-gray-muted text-sm"> |
||||||
|
{{ vIcon?.size ? `${(vIcon?.size / 1048576).toFixed(2)} MB` : '0 MB' }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<NcButton icon-only type="text" size="xs" class="!px-1" @click="handleRemoveIcon(false)"> |
||||||
|
<template #icon> |
||||||
|
<GeneralIcon icon="deleteListItem" /> |
||||||
|
</template> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex-1"> |
||||||
|
<a-upload-dragger |
||||||
|
v-model:fileList="fileList" |
||||||
|
name="file" |
||||||
|
accept="image/*" |
||||||
|
:disabled="isUploadingImage" |
||||||
|
:multiple="false" |
||||||
|
:show-upload-list="false" |
||||||
|
class="nc-workspace-image-uploader" |
||||||
|
:custom-request="customReqCbk" |
||||||
|
:before-upload="beforeUpload" |
||||||
|
@change="handleChange" |
||||||
|
@reject="rejectDrop" |
||||||
|
> |
||||||
|
<div class="ant-upload-drag-icon !text-nc-content-gray-muted !mb-2 text-center"> |
||||||
|
<div v-if="isUploadingImage" class="h-6 grid place-items-center"> |
||||||
|
<GeneralLoader size="regular" /> |
||||||
|
</div> |
||||||
|
<GeneralIcon v-else icon="upload" class="h-6 w-6" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ant-upload-text !text-nc-content-gray-muted !text-sm"> |
||||||
|
Drop your icon here or <span class="text-nc-content-brand hover:underline">browse file</span> |
||||||
|
<div class="mt-1">Supported: image/*</div> |
||||||
|
</div> |
||||||
|
</a-upload-dragger> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane :key="WorkspaceIconType.EMOJI" class="w-full" :disabled="isLoading"> |
||||||
|
<template #tab> |
||||||
|
<div class="tab-title"> |
||||||
|
<GeneralIcon icon="ncSmile" class="flex-none" /> |
||||||
|
Emoji |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="h-full"> |
||||||
|
<Picker |
||||||
|
:data="emojiIndex" |
||||||
|
:native="true" |
||||||
|
:show-preview="false" |
||||||
|
color="#40444D" |
||||||
|
:auto-focus="true" |
||||||
|
:show-categories="false" |
||||||
|
:i18n="{ |
||||||
|
search: 'Search emoji', |
||||||
|
}" |
||||||
|
class="nc-workspace-emoji-picker" |
||||||
|
@select="selectEmoji" |
||||||
|
@click.stop="() => {}" |
||||||
|
></Picker> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
</NcTabs> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
|
||||||
|
<GeneralImageCropper |
||||||
|
v-model:show-cropper="showImageCropper" |
||||||
|
:cropper-config="imageCropperData.cropperConfig" |
||||||
|
:image-config="imageCropperData.imageConfig" |
||||||
|
:upload-config="imageCropperData.uploadConfig" |
||||||
|
@submit="handleOnUploadImage" |
||||||
|
></GeneralImageCropper> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-workspace-icon-dropdown-tabs { |
||||||
|
:deep(.ant-tabs-nav) { |
||||||
|
@apply px-3; |
||||||
|
|
||||||
|
.ant-tabs-extra-content { |
||||||
|
@apply self-start; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-tabs-tab { |
||||||
|
@apply px-0 pt-1 pb-2; |
||||||
|
|
||||||
|
&.ant-tabs-tab-active { |
||||||
|
@apply font-medium; |
||||||
|
} |
||||||
|
|
||||||
|
& + .ant-tabs-tab { |
||||||
|
@apply ml-4; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-title { |
||||||
|
@apply text-xs leading-[24px] px-2 rounded hover:bg-gray-100 transition-colors flex items-center gap-2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-tabs-content) { |
||||||
|
@apply h-full; |
||||||
|
} |
||||||
|
|
||||||
|
&.nc-ai-loading { |
||||||
|
:deep(.ant-tabs-tab) { |
||||||
|
@apply !cursor-wait; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-tabs-tab-disabled) { |
||||||
|
.tab-title { |
||||||
|
@apply text-nc-content-gray-muted hover:bg-transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-input::placeholder) { |
||||||
|
@apply text-gray-500; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.nc-workspace-avatar img) { |
||||||
|
@apply !cursor-pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style> |
||||||
|
.nc-workspace-image-uploader { |
||||||
|
&.ant-upload.ant-upload-drag { |
||||||
|
@apply !rounded-lg !bg-white !hover:bg-nc-bg-gray-light !transition-colors duration-300; |
||||||
|
} |
||||||
|
.ant-upload-btn { |
||||||
|
@apply !flex flex-col items-center justify-center !min-h-[176px]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nc-workspace-emoji-picker.emoji-mart { |
||||||
|
@apply !w-108 !h-full !border-none bg-transparent rounded-t-none rounded-b-lg; |
||||||
|
|
||||||
|
span.emoji-type-native { |
||||||
|
@apply cursor-pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.emoji-mart-anchor { |
||||||
|
@apply h-8 py-1.5; |
||||||
|
svg { |
||||||
|
@apply h-3.5 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.emoji-mart-search { |
||||||
|
@apply px-2 mt-2; |
||||||
|
input { |
||||||
|
@apply text-sm pl-[11px] rounded-lg !py-5px transition-all duration-300 !outline-none ring-0; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
@apply !outline-none ring-0 shadow-selected border-primary; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.emoji-mart-scroll { |
||||||
|
@apply mt-1 px-1 overflow-x-hidden; |
||||||
|
|
||||||
|
h3.emoji-mart-category-label { |
||||||
|
@apply text-xs text-gray-500 mb-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.emoji-mart-scroll { |
||||||
|
@apply nc-scrollbar-thin; |
||||||
|
overflow-y: overlay; |
||||||
|
} |
||||||
|
|
||||||
|
.emoji-mart-emoji { |
||||||
|
@apply !px-1 !py-0.75 !m-0.5; |
||||||
|
} |
||||||
|
.emoji-mart-emoji:hover:before { |
||||||
|
@apply !rounded-md; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue