@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -9,6 +9,7 @@
             class="dl-smart-search__input-wrapper"
         >
             <dl-smart-search-input
+                ref="smartSearchInput"
                 :status="computedStatus"
                 :style-model="defineStyleModel"
                 :with-save-button="true"
@@ -22,55 +23,124 @@
                 :default-width="width"
                 @save="saveQueryDialogBoxModel = true"
                 @focus="setFocused"
-                @update:modelValue="handleInputModel"
+                @update:modelValue="debouncedInputModel"
                 @dql-edit="jsonEditorModel = !jsonEditorModel"
             />
         </div>
         <div class="dl-smart-search__buttons">
-            <div
-                style="height: 28px"
-                class="dl-smart-search__search-btn-wrapper"
-            >
-                <dl-button
-                    icon="icon-dl-search"
-                    :styles="{
-                        height: '28px'
-                    }"
-                    :disabled="disabled"
-                    @click="emitSearchQuery"
-                />
-            </div>
-
-            <dl-button
-                class="dl-smart-search__buttons--filters"
-                shaded
-                size="s"
-            >
-                Saved Filters
-                <dl-menu
-                    v-model="filtersModel"
-                    :offset="[0, 5]"
-                    anchor="bottom middle"
-                    self="top middle"
-                >
-                    <dl-smart-search-filters
-                        :filters="filters"
-                        @filters-select="handleFiltersSelect"
-                        @filters-delete="handleFiltersDelete"
-                    />
-                </dl-menu>
-            </dl-button>
+            <slot name="buttons">
+                <div style="display: flex; align-items: center">
+                    <div
+                        style="height: 28px"
+                        class="dl-smart-search__search-btn-wrapper"
+                    >
+                        <dl-button
+                            icon="icon-dl-search"
+                            :styles="{
+                                height: '28px'
+                            }"
+                            :disabled="disabled"
+                            @click="emitSearchQuery"
+                        />
+                    </div>
+
+                    <slot name="extra-actions" />
+
+                    <dl-button
+                        class="dl-smart-search__buttons--filters"
+                        shaded
+                        outlined
+                        size="s"
+                    >
+                        Saved Filters
+                        <dl-menu
+                            v-model="filtersModel"
+                            :offset="[0, 5]"
+                            anchor="bottom middle"
+                            self="top middle"
+                        >
+                            <dl-smart-search-filters
+                                :filters="filters"
+                                @filters-select="handleFiltersSelect"
+                                @filters-delete="handleFiltersDelete"
+                            />
+                        </dl-menu>
+                    </dl-button>
+                </div>
+            </slot>
         </div>
-        <dl-json-editor
-            :model-value="jsonEditorModel"
-            :query="activeQuery"
-            :queries="filters.saved"
-            @update:modelValue="jsonEditorModel = $event"
-            @save="saveQueryDialogBoxModel = true"
-            @remove="handleQueryRemove"
-            @search="handleQuerySearchEditor"
-            @update-query="handleEditorQueryUpdate"
-        />
+        <dl-dialog-box
+            v-model="jsonEditorModel"
+            :height="500"
+            :width="800"
+            style="--dl-dialog-box-footer-padding: 10px 16px"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="DQL Search"
+                    :close-button="true"
+                    style="font-weight: 200"
+                    @onClose="handleJsonEditorClose"
+                />
+            </template>
+            <template #body>
+                <div class="json-editor-layout">
+                    <div class="json-query">
+                        <div class="json-query-menu">
+                            <dl-select
+                                :model-value="selectedOption"
+                                width="200px"
+                                :options="selectOptions"
+                                placeholder="New Query"
+                                @update:model-value="updateActiveQuery"
+                            />
+                            <dl-button
+                                icon="icon-dl-align-left"
+                                label="Align Left"
+                                flat
+                                color="secondary"
+                                padding="0px 3px"
+                                @click="alignJsonText"
+                            />
+                        </div>
+                        <dl-json-editor
+                            v-model="jsonEditorQuery"
+                            :prevent-update="preventUpdate"
+                            @update-prevent="(val) => (preventUpdate = val)"
+                            @align-text="alignJsonText"
+                        />
+                    </div>
+                </div>
+            </template>
+            <template #footer>
+                <div class="json-editor__footer-menu">
+                    <div class="json-editor__footer-delete">
+                        <dl-button
+                            :disabled="deleteButtonState"
+                            icon="icon-dl-delete"
+                            label="Delete Query"
+                            flat
+                            color="secondary"
+                            padding="0"
+                            @click="handleQueryRemove"
+                        />
+                    </div>
+                    <div class="json-editor__footer-save">
+                        <dl-button
+                            style="margin-right: 14px"
+                            outlined
+                            label="Save As"
+                            @click="saveQueryDialogBoxModel = true"
+                        />
+                        <dl-button
+                            label="Search"
+                            @click="handleJsonSearchButton"
+                        />
+                    </div>
+                </div>
+            </template>
+        </dl-dialog-box>
+
         <dl-dialog-box v-model="removeQueryDialogBoxModel">
             <template #header>
                 <dl-dialog-box-header
@@ -94,7 +164,10 @@
                 </div>
             </template>
         </dl-dialog-box>
-        <dl-dialog-box v-model="saveQueryDialogBoxModel">
+        <dl-dialog-box
+            v-model="saveQueryDialogBoxModel"
+            style="--dl-dialog-box-footer-padding: 14px 17px"
+        >
             <template #header>
                 <dl-dialog-box-header
                     title="Save Query"
@@ -104,17 +177,22 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
+                    title="Query name"
                     style="text-align: center"
                     placeholder="Type query name"
                 />
             </template>
             <template #footer>
                 <div class="dl-smart-search__buttons--save">
-                    <dl-button @click="handleSaveQuery">
+                    <dl-button
+                        :disabled="!newQueryName"
+                        outlined
+                        @click="handleSaveQuery"
+                    >
                         Save
                     </dl-button>
                     <dl-button
-                        padding="10px"
+                        :disabled="!newQueryName"
                         @click="handleSaveQuery(true)"
                     >
                         Save and Search
@@ -125,28 +203,49 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue-demi'
-import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
-import DlSmartSearchFilters from './components/DlSmartSearchFilters.vue'
-import { DlJsonEditor } from '../../DlJsonEditor'
-import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
-import { DlInput } from '../../DlInput'
+import {
+    defineComponent,
+    PropType,
+    ref,
+    nextTick,
+    toRef,
+    onMounted,
+    watch,
+    computed
+} from 'vue-demi'
 import { DlTypography, DlMenu } from '../../../essential'
 import { DlButton } from '../../../basic'
+import { DlSelect } from '../../DlSelect'
+import { DlInput } from '../../DlInput'
+import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
+import { DlJsonEditor } from '../../DlJsonEditor'
+
+import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
+import DlSmartSearchFilters from './components/DlSmartSearchFilters.vue'
+
 import {
     useSuggestions,
     Schema,
     Alias,
     removeBrackets
 } from '../../../../hooks/use-suggestions'
-import { Filters, Query, ColorSchema, SearchStatus } from './types'
 import {
-    replaceAliases,
-    replaceWithJsDates,
-    createColorSchema
-} from './utils/utils'
+    Filters,
+    Query,
+    ColorSchema,
+    SearchStatus,
+    SyntaxColorSchema
+} from './types'
+import {
+    revertAliases,
+    setAliases,
+    replaceStringifiedDatesWithJSDates,
+    createColorSchema,
+    replaceJSDatesWithStringifiedDates
+} from './utils'
 import { v4 } from 'uuid'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../utils'
+import { debounce, isEqual } from 'lodash'
 
 export default defineComponent({
     components: {
@@ -158,16 +257,25 @@ export default defineComponent({
         DlTypography,
         DlInput,
         DlSmartSearchFilters,
-        DlMenu
+        DlMenu,
+        DlSelect
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
     },
     props: {
+        modelValue: {
+            type: Object as PropType<Record<string, any>>,
+            default: () => ({})
+        },
         status: {
             type: Object as PropType<SearchStatus>,
             default: () => ({ type: 'info', message: '' })
         },
         schema: {
             type: Object as PropType<Schema>,
-            default: () => {}
+            default: () => ({})
         },
         aliases: {
             type: Array as PropType<Alias[]>,
@@ -176,9 +284,9 @@ export default defineComponent({
         colorSchema: {
             type: Object as PropType<ColorSchema>,
             default: () => ({
-                fields: 'blue',
-                operators: 'darkgreen',
-                keywords: 'bold'
+                fields: 'var(--dl-color-secondary)',
+                operators: 'var(--dl-color-positive)',
+                keywords: 'var(--dl-color-medium)'
             })
         },
         isLoading: {
@@ -204,10 +312,17 @@ export default defineComponent({
         width: {
             type: String,
             default: '450px'
+        },
+        /**
+         * If true, the validation will be a closed set based on the schema provided
+         */
+        strict: {
+            type: Boolean,
+            default: false
         }
     },
-    emits: ['save-query', 'remove-query', 'search-query'],
-    setup(props) {
+    emits: ['save-query', 'remove-query', 'search-query', 'update:modelValue'],
+    setup(props, { emit }) {
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
         const searchBarWidth = ref('100%')
@@ -224,25 +339,77 @@ export default defineComponent({
         const isQuerying = ref(false)
         const currentTab = ref('saved')
         const oldInputQuery = ref('')
+        const jsonEditorQuery = ref('{}')
+        const newQuery = ref('')
+        const preventUpdate = ref(false)
+        const selectedOption = ref({
+            label: 'New Query',
+            value: ''
+        })
+
+        const strictRef = toRef(props, 'strict')
 
         const { suggestions, error, findSuggestions } = useSuggestions(
             props.schema,
-            props.aliases
+            props.aliases,
+            { strict: strictRef }
         )
 
         const handleInputModel = (value: string) => {
-            inputModel.value = value
-            const json = JSON.stringify(toJSON(removeBrackets(value)))
-            activeQuery.value.query = replaceAliases(json, props.aliases)
-            findSuggestions(value)
+            const aliased = setAliases(value, props.aliases)
+            inputModel.value = aliased
+            const bracketless = removeBrackets(value)
+            const cleanedAliases = revertAliases(bracketless, props.aliases)
+            const json = toJSON(cleanedAliases)
+            if (!isEqual(json, props.modelValue)) {
+                emit('update:modelValue', json)
+            }
+            const stringified = JSON.stringify(json)
+            activeQuery.value.query = stringified
+            nextTick(() => {
+                findSuggestions(aliased)
+            })
             isQuerying.value = false
-            oldInputQuery.value = value
+            oldInputQuery.value = aliased
+        }
+
+        const debouncedInputModel = debounce(handleInputModel, 300)
+
+        const isValidJSON = (item: string | Object): boolean => {
+            let value = typeof item !== 'string' ? JSON.stringify(item) : item
+            try {
+                value = JSON.parse(value)
+            } catch (e) {
+                return false
+            }
+
+            return typeof value === 'object' && value !== null
         }
 
         const toJSON = (value: string) => {
-            return parseSmartQuery(
-                replaceWithJsDates(value) ?? inputModel.value
+            const json = parseSmartQuery(
+                replaceStringifiedDatesWithJSDates(value) ?? inputModel.value
             )
+
+            return isValidJSON(json) ? json : inputModel.value
+        }
+
+        const schemaRef = toRef(props, 'schema')
+        const dateKeys = computed(() => {
+            return Object.keys(schemaRef.value).filter(
+                (key) => schemaRef.value[key] === 'date'
+            )
+        })
+
+        const fromJSON = (value: { [key: string]: any }) => {
+            const replacedDate = replaceJSDatesWithStringifiedDates(
+                value,
+                dateKeys.value
+            )
+
+            const stringQuery = stringifySmartQuery(replacedDate)
+            const aliased = setAliases(stringQuery, props.aliases)
+            return aliased
         }
 
         const setFocused = (value: boolean) => {
@@ -258,6 +425,38 @@ export default defineComponent({
             }
         }
 
+        const readModelValue = (val: { [key: string]: any }) => {
+            if (val) {
+                const currModel = JSON.parse(
+                    activeQuery.value.query && activeQuery.value.query.length
+                        ? activeQuery.value.query
+                        : '{}'
+                )
+
+                if (isEqual(val, currModel)) {
+                    return
+                }
+
+                const aliased = fromJSON(val)
+
+                if (aliased !== inputModel.value.trim()) {
+                    debouncedInputModel(aliased)
+                }
+            }
+        }
+
+        const modelRef = toRef(props, 'modelValue')
+
+        watch(modelRef, (val: any) => {
+            readModelValue(val)
+        })
+
+        onMounted(() => {
+            if (props.modelValue) {
+                readModelValue(props.modelValue)
+            }
+        })
+
         return {
             uuid: `dl-smart-search-${v4()}`,
             inputModel,
@@ -274,10 +473,16 @@ export default defineComponent({
             currentTab,
             searchBarWidth,
             oldInputQuery,
+            jsonEditorQuery,
+            newQuery,
+            preventUpdate,
+            selectedOption,
             handleInputModel,
+            debouncedInputModel,
             setFocused,
             findSuggestions,
-            toJSON
+            toJSON,
+            fromJSON
         }
     },
     computed: {
@@ -289,11 +494,8 @@ export default defineComponent({
                 '--dl-search-max-width': this.isFocused ? '100%' : this.width
             }
         },
-        defineStyleModel(): Record<string, string> {
-            return createColorSchema(
-                this.colorSchema,
-                this.aliases
-            ) as any as Record<string, string>
+        defineStyleModel(): SyntaxColorSchema {
+            return createColorSchema(this.colorSchema, this.aliases)
         },
         computedStatus(): SearchStatus {
             if (this.isQuerying) return
@@ -319,6 +521,49 @@ export default defineComponent({
             return this.isQuerying || this.inputModel === ''
                 ? this.activeQuery.name
                 : this.inputModel
+        },
+        deleteButtonState(): boolean {
+            return !this.filters?.saved?.filter(
+                (q: Query) => q.name === this.activeQuery?.name
+            ).length
+        },
+        selectOptions(): Record<string, string>[] {
+            const options: Record<string, string>[] = [
+                {
+                    label: 'New Query',
+                    value: '{}'
+                }
+            ]
+
+            const filters = this.filters?.saved ?? []
+            for (const filter of filters) {
+                options.push({
+                    label: filter.name,
+                    value: filter.query
+                })
+            }
+
+            return options
+        }
+    },
+    watch: {
+        jsonEditorModel() {
+            const json = JSON.stringify(
+                this.toJSON(removeBrackets(this.inputModel))
+            )
+            const newQuery = revertAliases(json, this.aliases)
+            if (newQuery && newQuery !== '{}') {
+                this.jsonEditorQuery = newQuery
+            }
+            this.alignJsonText()
+        },
+        jsonEditorQuery(val) {
+            if (
+                this.activeQuery.name === 'New Query' ||
+                this.activeQuery.name === ''
+            ) {
+                this.newQuery = this.fromJSON(JSON.parse(val))
+            }
         }
     },
     mounted() {
@@ -328,35 +573,36 @@ export default defineComponent({
         observer.observe(this.$refs.inputWrapper as HTMLElement)
     },
     methods: {
-        handleQueryRemove(query: Query) {
+        handleQueryRemove() {
             this.filtersModel = false
-            this.activeQuery = query
             this.removeQueryDialogBoxModel = true
         },
-        handleQuerySearchEditor(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.oldInputQuery = query.query
-            this.$emit('search-query', this.activeQuery, this.stringQuery)
-        },
         handleSaveQuery(performSearch: boolean) {
+            this.activeQuery = {
+                name: this.newQueryName || this.activeQuery.name,
+                query: this.jsonEditorQuery
+            }
             if (performSearch === true) {
                 this.emitSaveQuery()
                 this.emitSearchQuery()
+                const newQuery = setAliases(
+                    stringifySmartQuery(JSON.parse(this.activeQuery.query)),
+                    this.aliases
+                )
+                this.inputModel = newQuery
+                this.oldInputQuery = newQuery
                 this.jsonEditorModel = false
             } else {
                 this.emitSaveQuery()
             }
         },
-        handleEditorQueryUpdate(query: Query) {
-            this.activeQuery = query
-            try {
-                const stringQuery = stringifySmartQuery(JSON.parse(query.query))
-                this.inputModel = stringQuery
-                this.oldInputQuery = stringQuery
-            } catch (error) {
-                console.log(error)
-            }
+        handleJsonSearchButton() {
+            this.jsonEditorModel = false
+            this.activeQuery.query = this.jsonEditorQuery
+            nextTick(() => {
+                this.setQueryInput()
+                this.$emit('search-query', this.activeQuery, this.stringQuery)
+            })
         },
         handleFiltersDelete(currentTab: string, query: Query) {
             this.activeQuery = query
@@ -366,12 +612,19 @@ export default defineComponent({
         },
         handleFiltersSelect(currentTab: string, query: Query) {
             this.activeQuery = { ...query }
-            const stringQuery = stringifySmartQuery(JSON.parse(query.query))
+            const stringQuery = setAliases(
+                stringifySmartQuery(JSON.parse(query.query)),
+                this.aliases
+            )
             this.oldInputQuery = stringQuery
             this.inputModel = stringQuery
             this.currentTab = currentTab
             this.filtersModel = false
         },
+        handleJsonEditorClose() {
+            this.jsonEditorModel = false
+            this.newQuery = ''
+        },
         emitSearchQuery() {
             this.$emit('search-query', this.activeQuery, this.stringQuery)
         },
@@ -383,6 +636,12 @@ export default defineComponent({
                 this.currentTab,
                 this.inputModel
             )
+            this.selectedOption = {
+                label: 'New Query',
+                value: '{}'
+            }
+            this.activeQuery.query = this.newQuery
+            this.jsonEditorQuery = this.newQuery || '{}'
             this.removeQueryDialogBoxModel = false
         },
         emitSaveQuery() {
@@ -392,6 +651,37 @@ export default defineComponent({
             this.$emit('save-query', { ...this.activeQuery }, this.currentTab)
             this.saveQueryDialogBoxModel = false
             this.newQueryName = ''
+        },
+        setQueryInput(query?: string) {
+            const stringQuery = this.fromJSON(
+                JSON.parse(query || this.activeQuery.query)
+            )
+            this.inputModel = stringQuery
+            this.oldInputQuery = stringQuery
+        },
+        updateActiveQuery(option: Record<string, string>) {
+            this.preventUpdate = true
+            const isNewQuery =
+                option.label === 'New Query' || option.label === ''
+            this.activeQuery = {
+                name: option.label,
+                query: isNewQuery ? this.newQuery : this.activeQuery.query
+            }
+            this.preventUpdate = false
+            this.jsonEditorQuery = isNewQuery
+                ? this.newQuery || '{}'
+                : option.value
+            this.alignJsonText()
+        },
+        alignJsonText() {
+            try {
+                this.preventUpdate = false
+                this.jsonEditorQuery = JSON.stringify(
+                    JSON.parse(this.jsonEditorQuery),
+                    null,
+                    2
+                )
+            } catch (err) {}
         }
     }
 })
@@ -465,4 +755,30 @@ export default defineComponent({
         word-break: break-all;
     }
 }
+.json-editor__footer {
+    &-menu {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+    &-delete {
+        align-items: center;
+        display: flex;
+        & > * {
+            margin-bottom: 6px;
+        }
+    }
+}
+.json-query {
+    height: 100%;
+}
+.json-editor-layout {
+    height: 90%;
+}
+.json-query-menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
 </style>