@ -22,7 +22,7 @@ const uiTypesNotSupportedInFormulas = [UITypes.QrCode, UITypes.Barcode]
const vModel = useVModel ( props , 'value' , emit )
const vModel = useVModel ( props , 'value' , emit )
const { setAdditionalValidations , validateInfos , sqlUi , column } = useColumnCreateStoreOrThrow ( )
const { setAdditionalValidations , validateInfos , sqlUi , column , fromTableExplorer } = useColumnCreateStoreOrThrow ( )
const { t } = useI18n ( )
const { t } = useI18n ( )
@ -48,6 +48,8 @@ const { getMeta } = useMetas()
const suggestionPreviewed = ref < Record < any , string > | undefined > ( )
const suggestionPreviewed = ref < Record < any , string > | undefined > ( )
const showFunctionList = ref < boolean > ( true )
const validators = {
const validators = {
formula _raw : [
formula _raw : [
{
{
@ -84,8 +86,6 @@ const autocomplete = ref(false)
const formulaRef = ref ( )
const formulaRef = ref ( )
const sugListRef = ref ( )
const variableListRef = ref < ( typeof AntListItem ) [ ] > ( [ ] )
const variableListRef = ref < ( typeof AntListItem ) [ ] > ( [ ] )
const sugOptionsRef = ref < ( typeof AntListItem ) [ ] > ( [ ] )
const sugOptionsRef = ref < ( typeof AntListItem ) [ ] > ( [ ] )
@ -124,7 +124,7 @@ const suggestionsList = computed(() => {
. map ( ( c : any ) => ( {
. map ( ( c : any ) => ( {
text : c . title ,
text : c . title ,
type : 'column' ,
type : 'column' ,
icon : getUIDTIcon ( c . uidt ) ,
icon : getUIDTIcon ( c . uidt ) ? markRaw ( getUIDTIcon ( c . uidt ) ! ) : undefined ,
uidt : c . uidt ,
uidt : c . uidt ,
} ) ) ,
} ) ) ,
... availableBinOps . map ( ( op : string ) => ( {
... availableBinOps . map ( ( op : string ) => ( {
@ -218,7 +218,11 @@ function handleInput() {
if ( ! isCurlyBracketBalanced ( ) ) {
if ( ! isCurlyBracketBalanced ( ) ) {
suggestion . value = suggestion . value . filter ( ( v ) => v . type === 'column' )
suggestion . value = suggestion . value . filter ( ( v ) => v . type === 'column' )
showFunctionList . value = false
} else if ( ! showFunctionList . value ) {
showFunctionList . value = true
}
}
autocomplete . value = ! ! suggestion . value . length
autocomplete . value = ! ! suggestion . value . length
}
}
@ -284,27 +288,62 @@ onMounted(() => {
jsep . plugins . register ( jsepCurlyHook )
jsep . plugins . register ( jsepCurlyHook )
} )
} )
const suggestionPreviewLeft = ref ( '-left-85' )
const suggestionPreviewPostion = ref ( {
top : '0px' ,
left : '-344px' ,
} )
watch ( sugListRef , ( ) => {
onMounted ( ( ) => {
nextTick ( ( ) => {
/ / w a i t u n t i l M F E f i e l d m o d a l t r a n s i t i o n c o m p l e t e
setTimeout ( ( ) => {
setTimeout ( ( ) => {
const fieldModal = document . querySelector ( '.nc-dropdown-edit-column.active' ) as HTMLDivElement
const textAreaPosition = formulaRef . value ? . $el ? . getBoundingClientRect ( )
if ( ! textAreaPosition ) return
if ( fieldModal && fieldModal . getBoundingClientRect ( ) . left < 364 ) {
if ( fromTableExplorer ? . value ) {
suggestionPreviewLeft . value = '-right-85'
suggestionPreviewPostion . value . left = ` ${ textAreaPosition . left - 344 } px `
suggestionPreviewPostion . value . top = ` ${ textAreaPosition . top } px `
} else {
suggestionPreviewPostion . value . left = textAreaPosition . left < 352 ? '350px' : '-344px'
suggestionPreviewPostion . value . top = ` 0px `
}
}
} , 500 )
} , 250 )
} )
} )
} )
const handleKeydown = ( e : KeyboardEvent ) => {
e . stopPropagation ( )
switch ( e . key ) {
case 'ArrowUp' : {
e . preventDefault ( )
suggestionListUp ( )
break
}
case 'ArrowDown' : {
e . preventDefault ( )
suggestionListDown ( )
break
}
case 'Enter' : {
e . preventDefault ( )
selectText ( )
break
}
}
}
< / script >
< / script >
< template >
< template >
< div class = "formula-wrapper relative" >
< div class = "formula-wrapper relative" >
< div
< div
v - if = "suggestionPreviewed && !suggestionPreviewed.unsupported && suggestionPreviewed.type === 'function'"
v - if = "suggestionPreviewed && !suggestionPreviewed.unsupported && suggestionPreviewed.type === 'function'"
class = "absolute w-84 top-0 bg-white z-10 pl-3 pt-3 border-1 shadow-md rounded-xl"
class = "w-84 bg-white z-10 pl-3 pt-3 border-1 shadow-md rounded-xl"
: class = "suggestionPreviewLeft"
: class = " {
'fixed' : fromTableExplorer ,
'absolute top-0' : ! fromTableExplorer ,
} "
: style = " {
left : suggestionPreviewPostion . left ,
top : suggestionPreviewPostion . top ,
} "
>
>
< div class = "pr-3" >
< div class = "pr-3" >
< div class = "flex flex-row w-full justify-between pb-2 border-b-1" >
< div class = "flex flex-row w-full justify-between pb-2 border-b-1" >
@ -358,15 +397,13 @@ watch(sugListRef, () => {
ref = "formulaRef"
ref = "formulaRef"
v - model : value = "vModel.formula_raw"
v - model : value = "vModel.formula_raw"
class = "nc-formula-input !rounded-md"
class = "nc-formula-input !rounded-md"
@ keydown . down . prevent = "suggestionListDown"
@ keydown = "handleKeydown"
@ keydown . up . prevent = "suggestionListUp"
@ keydown . enter . prevent = "selectText"
@ change = "handleInputDeb"
@ change = "handleInputDeb"
/ >
/ >
< / a - f o r m - i t e m >
< / a - f o r m - i t e m >
< div ref = "sugListRef" class = "h-[250px] overflow-auto nc-scrollbar-thin border-1 border-gray-200 rounded-lg mt-4" >
< div class = "h-[250px] overflow-auto nc-scrollbar-thin border-1 border-gray-200 rounded-lg mt-4" >
< template v-if ="suggestedFormulas.length > 0 " >
< template v-if ="suggestedFormulas && showFunctionList " >
< div class = "border-b-1 bg-gray-50 px-3 py-1 uppercase text-gray-600 text-xs font-semibold sticky top-0 z-10" >
< div class = "border-b-1 bg-gray-50 px-3 py-1 uppercase text-gray-600 text-xs font-semibold sticky top-0 z-10" >
Formulas
Formulas
< / div >
< / div >
@ -405,13 +442,13 @@ watch(sugListRef, () => {
< / a - l i s t >
< / a - l i s t >
< / template >
< / template >
< template v-if ="variableList.length > 0 " >
< template v-if ="variableList" >
< div class = "border-b-1 bg-gray-50 px-3 py-1 uppercase text-gray-600 text-xs font-semibold sticky top-0 z-10" > Fields < / div >
< div class = "border-b-1 bg-gray-50 px-3 py-1 uppercase text-gray-600 text-xs font-semibold sticky top-0 z-10" > Fields < / div >
< a -list
< a -list
ref = "variableListRef"
ref = "variableListRef"
: data - source = "variableList"
: data - source = "variableList"
: locale = "{ emptyText: $t('msg.formula.noSuggestedFormula Found') }"
: locale = "{ emptyText: $t('msg.formula.noSuggestedField Found') }"
class = "!overflow-hidden"
class = "!overflow-hidden"
>
>
< template # renderItem = "{ item, index }" >
< template # renderItem = "{ item, index }" >
@ -450,9 +487,6 @@ watch(sugListRef, () => {
< / template >
< / template >
< / a - l i s t >
< / a - l i s t >
< / template >
< / template >
< div v-if ="suggestion.length === 0" >
< span class = "text-gray-500" > Empty < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / template >
< / template >