mirror of https://github.com/nocodb/nocodb
Raju Udava
7 months ago
committed by
GitHub
52 changed files with 1147 additions and 417 deletions
@ -0,0 +1,104 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import tinycolor from 'tinycolor2' |
||||||
|
|
||||||
|
import { NcProjectType, baseIconColors } from '#imports' |
||||||
|
|
||||||
|
const props = withDefaults( |
||||||
|
defineProps<{ |
||||||
|
type?: NcProjectType | string |
||||||
|
modelValue?: string |
||||||
|
size?: 'small' | 'medium' | 'large' | 'xlarge' |
||||||
|
readonly?: boolean |
||||||
|
iconClass?: string |
||||||
|
}>(), |
||||||
|
{ |
||||||
|
type: NcProjectType.DB, |
||||||
|
size: 'small', |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const { modelValue } = toRefs(props) |
||||||
|
const { size, readonly } = props |
||||||
|
|
||||||
|
const isOpen = ref(false) |
||||||
|
|
||||||
|
const colorRef = ref(tinycolor(modelValue.value).isValid() ? modelValue.value : baseIconColors[0]) |
||||||
|
|
||||||
|
const updateIconColor = (color: string) => { |
||||||
|
const tcolor = tinycolor(color) |
||||||
|
if (tcolor.isValid()) { |
||||||
|
colorRef.value = color |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onClick = (e: Event) => { |
||||||
|
if (readonly) return |
||||||
|
|
||||||
|
e.stopPropagation() |
||||||
|
|
||||||
|
isOpen.value = !isOpen.value |
||||||
|
} |
||||||
|
|
||||||
|
watch( |
||||||
|
isOpen, |
||||||
|
(value) => { |
||||||
|
if (!value && colorRef.value !== modelValue.value) { |
||||||
|
emit('update:modelValue', colorRef.value) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true, |
||||||
|
}, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly"> |
||||||
|
<div |
||||||
|
class="flex flex-row justify-center items-center select-none rounded-md nc-base-icon-picker-trigger" |
||||||
|
:class="{ |
||||||
|
'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly, |
||||||
|
'bg-gray-500 bg-opacity-15': isOpen, |
||||||
|
'h-6 w-6 text-lg': size === 'small', |
||||||
|
'h-8 w-8 text-xl': size === 'medium', |
||||||
|
'h-10 w-10 text-2xl': size === 'large', |
||||||
|
'h-14 w-16 text-5xl': size === 'xlarge', |
||||||
|
}" |
||||||
|
@click="onClick" |
||||||
|
> |
||||||
|
<NcTooltip placement="topLeft" :disabled="readonly"> |
||||||
|
<template #title> {{ $t('tooltip.changeIconColour') }} </template> |
||||||
|
|
||||||
|
<div> |
||||||
|
<GeneralProjectIcon :color="colorRef" :type="type" /> |
||||||
|
</div> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
|
||||||
|
<template #overlay> |
||||||
|
<div |
||||||
|
class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200 overflow-hidden max-w-[342px]" |
||||||
|
> |
||||||
|
<div class="flex justify-start"> |
||||||
|
<GeneralColorPicker |
||||||
|
:model-value="colorRef" |
||||||
|
:colors="baseIconColors" |
||||||
|
:is-new-design="true" |
||||||
|
class="nc-base-icon-color-picker" |
||||||
|
@input="updateIconColor" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</a-dropdown> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-base-icon-color-picker-dropdown { |
||||||
|
box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Slider } from '@ckpack/vue-color' |
||||||
|
import tinycolor from 'tinycolor2' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
modelValue?: any |
||||||
|
mode?: 'hsl' | 'hsv' |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
modelValue: '#3069FE', |
||||||
|
mode: 'hsv', |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'input']) |
||||||
|
|
||||||
|
const picked = computed({ |
||||||
|
get: () => tinycolor(props.modelValue || '#3069FE').toHsv() as any, |
||||||
|
set: (val) => { |
||||||
|
if (val) { |
||||||
|
emit('update:modelValue', val[props.mode] || null) |
||||||
|
emit('input', val[props.mode] || null) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<Slider |
||||||
|
v-model="picked" |
||||||
|
class="nc-color-slider-wrapper min-w-[200px]" |
||||||
|
:style="{ |
||||||
|
'--nc-color-slider-pointer': tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(), |
||||||
|
}" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-color-slider-wrapper { |
||||||
|
&.vc-slider { |
||||||
|
@apply !w-full; |
||||||
|
} |
||||||
|
:deep(.vc-slider-swatches) { |
||||||
|
@apply hidden; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.vc-slider-hue-warp) { |
||||||
|
@apply h-1.5; |
||||||
|
.vc-hue { |
||||||
|
@apply rounded-lg; |
||||||
|
} |
||||||
|
.vc-hue-pointer { |
||||||
|
top: -3px !important; |
||||||
|
} |
||||||
|
.vc-hue-picker { |
||||||
|
background-color: white; |
||||||
|
box-shadow: 0 0 0 3px var(--nc-color-slider-pointer) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,296 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk' |
||||||
|
import type { User } from '#imports' |
||||||
|
const props = defineProps<{ |
||||||
|
modelValue: boolean |
||||||
|
baseId: string |
||||||
|
}>() |
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const dialogShow = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const inviteData = reactive({ |
||||||
|
email: '', |
||||||
|
roles: ProjectRoles.NO_ACCESS, |
||||||
|
}) |
||||||
|
|
||||||
|
const { baseRoles } = useRoles() |
||||||
|
|
||||||
|
const basesStore = useBases() |
||||||
|
|
||||||
|
const { activeProjectId } = storeToRefs(basesStore) |
||||||
|
|
||||||
|
const { createProjectUser } = basesStore |
||||||
|
|
||||||
|
const divRef = ref<HTMLDivElement>() |
||||||
|
|
||||||
|
const focusRef = ref<HTMLInputElement>() |
||||||
|
const isDivFocused = ref(false) |
||||||
|
|
||||||
|
const emailValidation = reactive({ |
||||||
|
isError: true, |
||||||
|
message: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const allowedRoles = ref<ProjectRoles[]>([]) |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
try { |
||||||
|
const currentRoleIndex = OrderedProjectRoles.findIndex( |
||||||
|
(role) => baseRoles.value && Object.keys(baseRoles.value).includes(role), |
||||||
|
) |
||||||
|
if (currentRoleIndex !== -1) { |
||||||
|
allowedRoles.value = OrderedProjectRoles.slice(currentRoleIndex + 1).filter((r) => r) |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
}) |
||||||
|
const singleEmailValue = ref('') |
||||||
|
|
||||||
|
const emailBadges = ref<Array<string>>([]) |
||||||
|
|
||||||
|
const insertOrUpdateString = (str: string) => { |
||||||
|
// Check if the string already exists in the array |
||||||
|
const index = emailBadges.value.indexOf(str) |
||||||
|
|
||||||
|
if (index !== -1) { |
||||||
|
// If the string exists, remove it |
||||||
|
emailBadges.value.splice(index, 1) |
||||||
|
} |
||||||
|
|
||||||
|
// Add the new string to the array |
||||||
|
emailBadges.value.push(str) |
||||||
|
} |
||||||
|
|
||||||
|
const emailInputValidation = (input: string): boolean => { |
||||||
|
if (!input.length) { |
||||||
|
emailValidation.isError = true |
||||||
|
emailValidation.message = 'Email should not be empty' |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!validateEmail(input.trim())) { |
||||||
|
emailValidation.isError = true |
||||||
|
emailValidation.message = 'Invalid Email' |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
const isInvitButtonDiabled = computed(() => { |
||||||
|
if (!emailBadges.value.length && !singleEmailValue.value.length) { |
||||||
|
return true |
||||||
|
} |
||||||
|
if (emailBadges.value.length && inviteData.email) { |
||||||
|
return true |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch(inviteData, (newVal) => { |
||||||
|
// when user only want to enter a single email |
||||||
|
// we dont convert that as badge |
||||||
|
|
||||||
|
const isSingleEmailValid = validateEmail(newVal.email) |
||||||
|
if (isSingleEmailValid && !emailBadges.value.length) { |
||||||
|
singleEmailValue.value = newVal.email |
||||||
|
emailValidation.isError = false |
||||||
|
return |
||||||
|
} |
||||||
|
singleEmailValue.value = '' |
||||||
|
|
||||||
|
// when user enters multiple emails comma sepearted or space sepearted |
||||||
|
const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' ' |
||||||
|
if (isNewEmail && newVal.email.trim().length) { |
||||||
|
const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim() |
||||||
|
if (!validateEmail(emailToAdd)) { |
||||||
|
emailValidation.isError = true |
||||||
|
emailValidation.message = 'Invalid Email' |
||||||
|
return |
||||||
|
} |
||||||
|
/** |
||||||
|
if email is already enterd we delete the already |
||||||
|
existing email and add new one |
||||||
|
**/ |
||||||
|
if (emailBadges.value.includes(emailToAdd)) { |
||||||
|
insertOrUpdateString(emailToAdd) |
||||||
|
inviteData.email = '' |
||||||
|
return |
||||||
|
} |
||||||
|
emailBadges.value.push(emailToAdd) |
||||||
|
inviteData.email = '' |
||||||
|
singleEmailValue.value = '' |
||||||
|
} |
||||||
|
if (!newVal.email.length && emailValidation.isError) { |
||||||
|
emailValidation.isError = false |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const handleEnter = () => { |
||||||
|
const isEmailIsValid = emailInputValidation(inviteData.email) |
||||||
|
if (!isEmailIsValid) return |
||||||
|
|
||||||
|
inviteData.email += ' ' |
||||||
|
emailValidation.isError = false |
||||||
|
emailValidation.message = '' |
||||||
|
} |
||||||
|
|
||||||
|
const focusOnDiv = () => { |
||||||
|
focusRef.value?.focus() |
||||||
|
isDivFocused.value = true |
||||||
|
} |
||||||
|
|
||||||
|
// remove one email per backspace |
||||||
|
onKeyStroke('Backspace', () => { |
||||||
|
if (isDivFocused.value && inviteData.email.length < 1) { |
||||||
|
emailBadges.value.pop() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch(dialogShow, (newVal) => { |
||||||
|
if (newVal) { |
||||||
|
setTimeout(() => { |
||||||
|
focusOnDiv() |
||||||
|
}, 100) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// when bulk email is pasted |
||||||
|
const onPaste = (e: ClipboardEvent) => { |
||||||
|
const pastedText = e.clipboardData?.getData('text') |
||||||
|
|
||||||
|
const inputArray = pastedText?.split(',') || pastedText?.split(' ') |
||||||
|
|
||||||
|
// if data is pasted to a already existing text in input |
||||||
|
// we add existingInput + pasted data |
||||||
|
if (inputArray?.length === 1 && inviteData.email.length) { |
||||||
|
inputArray[0] = inviteData.email += inputArray[0] |
||||||
|
} |
||||||
|
|
||||||
|
inputArray?.forEach((el) => { |
||||||
|
const isEmailIsValid = emailInputValidation(el) |
||||||
|
|
||||||
|
if (!isEmailIsValid) return |
||||||
|
|
||||||
|
/** |
||||||
|
if email is already enterd we delete the already |
||||||
|
existing email and add new one |
||||||
|
**/ |
||||||
|
if (emailBadges.value.includes(el)) { |
||||||
|
insertOrUpdateString(el) |
||||||
|
return |
||||||
|
} |
||||||
|
emailBadges.value.push(el) |
||||||
|
|
||||||
|
inviteData.email = '' |
||||||
|
}) |
||||||
|
inviteData.email = '' |
||||||
|
} |
||||||
|
|
||||||
|
const inviteProjectCollaborator = async () => { |
||||||
|
try { |
||||||
|
const payloadData = singleEmailValue.value || emailBadges.value.join(',') |
||||||
|
if (!payloadData.includes(',')) { |
||||||
|
const validationStatus = validateEmail(payloadData) |
||||||
|
if (!validationStatus) { |
||||||
|
emailValidation.isError = true |
||||||
|
emailValidation.message = 'invalid email' |
||||||
|
} |
||||||
|
} |
||||||
|
await createProjectUser(activeProjectId.value!, { |
||||||
|
email: payloadData, |
||||||
|
roles: inviteData.roles, |
||||||
|
} as unknown as User) |
||||||
|
|
||||||
|
message.success('Invitation sent successfully') |
||||||
|
inviteData.email = '' |
||||||
|
emailBadges.value = [] |
||||||
|
dialogShow.value = false |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} finally { |
||||||
|
singleEmailValue.value = '' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcModal |
||||||
|
v-model:visible="dialogShow" |
||||||
|
:show-separator="false" |
||||||
|
:header="$t('activity.createTable')" |
||||||
|
size="medium" |
||||||
|
@keydown.esc="dialogShow = false" |
||||||
|
> |
||||||
|
<template #header> |
||||||
|
<div class="flex flex-row items-center gap-x-2"> |
||||||
|
{{ $t('activity.addMember') }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="flex items-center justify-between gap-3 mt-2"> |
||||||
|
<div class="flex w-full flex-col"> |
||||||
|
<div class="flex justify-between gap-3 w-full"> |
||||||
|
<div |
||||||
|
ref="divRef" |
||||||
|
class="flex items-center border-1 gap-1 w-full overflow-x-scroll nc-scrollbar-x-md items-center h-10 rounded-lg !min-w-96" |
||||||
|
tabindex="0" |
||||||
|
:class="{ |
||||||
|
'border-primary/100': isDivFocused, |
||||||
|
'p-1': emailBadges?.length > 1, |
||||||
|
}" |
||||||
|
@click="focusOnDiv" |
||||||
|
@blur="isDivFocused = false" |
||||||
|
> |
||||||
|
<span |
||||||
|
v-for="(email, index) in emailBadges" |
||||||
|
:key="email" |
||||||
|
class="border-1 text-gray-800 bg-gray-100 rounded-md flex items-center px-2 py-1" |
||||||
|
> |
||||||
|
{{ email }} |
||||||
|
<component |
||||||
|
:is="iconMap.close" |
||||||
|
class="ml-0.5 hover:cursor-pointer mt-0.5 w-4 h-4" |
||||||
|
@click="emailBadges.splice(index, 1)" |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<input |
||||||
|
id="email" |
||||||
|
ref="focusRef" |
||||||
|
v-model="inviteData.email" |
||||||
|
:placeholder="$t('activity.enterEmail')" |
||||||
|
class="w-full min-w-36 outline-none px-2" |
||||||
|
data-testid="email-input" |
||||||
|
@keyup.enter="handleEnter" |
||||||
|
@blur="isDivFocused = false" |
||||||
|
@paste.prevent="onPaste" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<RolesSelector |
||||||
|
size="lg" |
||||||
|
class="nc-invite-role-selector" |
||||||
|
:role="inviteData.roles" |
||||||
|
:roles="allowedRoles" |
||||||
|
:on-role-change="(role: ProjectRoles) => (inviteData.roles = role)" |
||||||
|
:description="false" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<span v-if="emailValidation.isError && emailValidation.message" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ |
||||||
|
emailValidation.message |
||||||
|
}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex mt-8 justify-end"> |
||||||
|
<div class="flex gap-2"> |
||||||
|
<NcButton type="secondary" @click="dialogShow = false"> {{ $t('labels.cancel') }} </NcButton> |
||||||
|
<NcButton |
||||||
|
type="primary" |
||||||
|
size="medium" |
||||||
|
:disabled="isInvitButtonDiabled || emailValidation.isError" |
||||||
|
@click="inviteProjectCollaborator" |
||||||
|
> |
||||||
|
{{ $t('activity.inviteToBase') }} |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</NcModal> |
||||||
|
</template> |
||||||
Loading…
Reference in new issue