@dataloop-ai/components 0.19.128 → 0.19.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.128",
+  "version": "0.19.130",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -84,6 +84,18 @@
                     :single-selection="true"
                     @change="onDateSelection"
                 />
+                <div class="dl-smart-search-input__date-picker-buttons">
+                    <dl-button
+                        label="Cancel"
+                        outlined
+                        @mousedown="onDateSelectionCancel"
+                    />
+                    <dl-button
+                        label="Apply"
+                        :disabled="!datePickerSelection"
+                        @mousedown="onDateSelectionApply"
+                    />
+                </div>
             </div>
         </dl-menu>
     </div>
@@ -118,6 +130,7 @@ import { DateInterval } from '../../../DlDateTime/types'
 import {
     isEndingWithDateIntervalPattern,
     replaceDateInterval,
+    removeDateInterval,
     updateEditor,
     isEligibleToChange,
     createColorSchema,
@@ -538,8 +551,27 @@ export default defineComponent({
 
         const onDateSelection = (value: DateInterval) => {
             datePickerSelection.value = value
-            searchQuery.value = replaceDateInterval(searchQuery.value, value)
-            input.value.innerHTML = searchQuery.value
+        }
+
+        const onDateSelectionCancel = () => {
+            searchQuery.value = removeDateInterval(searchQuery.value)
+            showDatePicker.value = false
+            showSuggestions.value = true
+            datePickerSelection.value = null
+            setInputValue(searchQuery.value + ' ', { noEmit: true })
+            setCaretAtTheEnd(input.value)
+        }
+
+        const onDateSelectionApply = () => {
+            searchQuery.value = replaceDateInterval(
+                searchQuery.value,
+                datePickerSelection.value
+            )
+            showDatePicker.value = false
+            showSuggestions.value = true
+            datePickerSelection.value = null
+            setInputValue(searchQuery.value + ' ', { noEmit: true })
+            setCaretAtTheEnd(input.value)
         }
 
         const readModelValue = (val: { [key: string]: any }) => {
@@ -628,15 +660,6 @@ export default defineComponent({
                 return
             }
 
-            if (showDatePicker.value) {
-                showDatePicker.value = false
-                showSuggestions.value = true
-                datePickerSelection.value = null
-                setInputValue(searchQuery.value + ' ', { noEmit: true })
-                setCaretAtTheEnd(input.value)
-                return
-            }
-
             if (showSuggestions.value) {
                 showSuggestions.value = false
                 return
@@ -897,6 +920,8 @@ export default defineComponent({
             onKeyPress,
             onInput,
             onDateSelection,
+            onDateSelectionCancel,
+            onDateSelectionApply,
             computedStatus,
             setInputFromSuggestion,
             inputPlaceholder,
@@ -1129,6 +1154,14 @@ export default defineComponent({
     &__date-picker-wrapper {
         width: 562px;
     }
+
+    &__date-picker-buttons {
+        padding: 0 16px 16px;
+        text-align: right;
+        > * {
+            margin-left: 16px;
+        }
+    }
 }
 .focus {
     word-break: break-all;

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -47,6 +47,10 @@ export const replaceDateInterval = (str: string, date: DateInterval) => {
     return replaced
 }
 
+export const removeDateInterval = (str: string) => {
+    return replaceFirstOrLastOccurrence(str, '', datePattern)
+}
+
 const formatDate = (date: Date | string | number): string => {
     return moment(date).format('DD/MM/YYYY')
 }

package/src/utils/parse-smart-query.ts

@@ -85,7 +85,7 @@ export const parseSmartQuery = (
             }
         }
 
-        const andQuery: { [key: string]: any } = {}
+        const andQuery: { [key: string]: any }[] = []
         let queryValue: any
 
         let key: string
@@ -106,42 +106,42 @@ export const parseSmartQuery = (
                     [key, value] = term.split('>=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = { $gte: pureValue }
+                        andQuery.push({ [key]: { $gte: pureValue } })
                     }
                     break
                 case term.includes('<='):
                     [key, value] = term.split('<=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = { $lte: pureValue }
+                        andQuery.push({ [key]: { $lte: pureValue } })
                     }
                     break
                 case term.includes('>'):
                     [key, value] = term.split('>').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = { $gt: pureValue }
+                        andQuery.push({ [key]: { $gt: pureValue } })
                     }
                     break
                 case term.includes('<'):
                     [key, value] = term.split('<').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = { $lt: pureValue }
+                        andQuery.push({ [key]: { $lt: pureValue } })
                     }
                     break
                 case term.includes('!='):
                     [key, value] = term.split('!=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = { $ne: pureValue }
+                        andQuery.push({ [key]: { $ne: pureValue } })
                     }
                     break
                 case term.includes('='):
                     [key, value] = term.split('=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
                     if (pureValue !== null) {
-                        andQuery[key] = pureValue
+                        andQuery.push({ [key]: pureValue })
                     }
                     break
                 case term.includes('IN'):
@@ -159,7 +159,7 @@ export const parseSmartQuery = (
 
                         pureValue = GeneratePureValue(queryValue)
                         if (pureValue !== null && Array.isArray(pureValue)) {
-                            andQuery[key] = { $nin: pureValue }
+                            andQuery.push({ [key]: { $nin: pureValue } })
                         }
                     } else {
                         queryValue = term
@@ -171,14 +171,24 @@ export const parseSmartQuery = (
 
                         pureValue = GeneratePureValue(queryValue)
                         if (pureValue !== null && Array.isArray(pureValue)) {
-                            andQuery[key] = { $in: pureValue }
+                            andQuery.push({ [key]: { $in: pureValue } })
                         }
                     }
                     break
             }
         }
 
-        orTerms.push(andQuery)
+        const simlifiedAndQuery: { [key: string]: any } = {}
+        for (const term of andQuery) {
+            const key = Object.keys(term)[0]
+            simlifiedAndQuery[key] = term[key]
+        }
+
+        orTerms.push(
+            andQuery.length > Object.keys(simlifiedAndQuery).length
+                ? { $and: andQuery }
+                : simlifiedAndQuery
+        )
     }
 
     const builtQuery = orTerms.length > 1 ? { $or: orTerms } : orTerms[0]
@@ -211,14 +221,13 @@ export const stringifySmartQuery = (query: { [key: string]: any }): string => {
 
         if (key === '$and') {
             if (Array.isArray(value)) {
-                const andObject: { [key: string]: any } = {}
-                for (const subQuery of value) {
-                    for (const subKey in subQuery) {
-                        andObject[subKey] = subQuery[subKey]
-                    }
-                }
-                return stringifySmartQuery(andObject)
+                const subQueries = value.map(
+                    (subQuery: { [key: string]: any }) =>
+                        stringifySmartQuery(subQuery)
+                )
+                result += subQueries.join(' AND ')
             }
+            continue
         }
 
         if (result.length) {