@dataloop-ai/components 0.16.45 → 0.16.47

package/src/components/compound/DlPagination/DlPagination.vue

@@ -5,13 +5,16 @@
     >
         <div class="dl-pagination--container">
             <rows-selector
-                v-if="withRowsPerPage"
+                v-if="withRowsPerPage && rowsPerPageState"
                 v-model="rowsPerPageState"
                 :options="rowsPerPageOptions"
                 :items-name="itemsName"
                 :disabled="disabled"
             />
-            <div class="dl-pagination--navigation">
+            <div
+                v-if="rowsPerPageState"
+                class="dl-pagination--navigation"
+            >
                 <page-navigation
                     :model-value="value"
                     :min="min"
@@ -95,7 +98,7 @@ export default defineComponent({
         directionLinks: Boolean,
         color: {
             type: String,
-            default: 'dl-color-bg'
+            default: 'dl-color-transparent'
         },
         textColor: {
             type: String,
@@ -135,10 +138,17 @@ export default defineComponent({
         },
         rowTo(): number {
             const to = this.rowsPerPageState * this.value
+
+            if (to === 0) {
+                return this.totalItems
+            }
+
             return to > this.totalItems ? this.totalItems : to
         },
         max(): number {
-            return Math.ceil(this.totalItems / this.rowsPerPageState)
+            return this.rowsPerPageState === 0
+                ? 1
+                : Math.ceil(this.totalItems / this.rowsPerPageState)
         }
     },
     watch: {

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -1,10 +1,12 @@
 <template>
-    <div class="dl-pagination--page_navigation">
+    <div
+        class="dl-pagination--page_navigation"
+        :style="cssVars"
+    >
         <button
             v-if="boundaryLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isFirstPage"
-            :style="cssVars"
             @click="setPage(min)"
         >
             <dl-icon
@@ -16,7 +18,6 @@
             v-if="directionLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isFirstPage"
-            :style="cssVars"
             @click="setPage(value - 1)"
         >
             <dl-icon
@@ -28,7 +29,7 @@
             <button
                 v-if="boundaryNumbers"
                 class="dl-pagination--page_btn"
-                :style="isActivePage(min) ? activePageCssVars : cssVars"
+                :class="{ 'dl-pagination--active': isActivePage(min) }"
                 :disabled="disabled"
                 @click="setPage(min)"
             >
@@ -37,7 +38,6 @@
             <button
                 v-if="ellipsesStart"
                 class="dl-pagination--page_btn"
-                :style="cssVars"
                 :disabled="disabled"
                 @click="setPage(pgFrom - 1)"
             >
@@ -48,8 +48,10 @@
                     v-for="page in pages"
                     :key="page"
                     class="dl-pagination--page_btn"
-                    :class="{ active: isActivePage(page) }"
-                    :style="isActivePage(page) ? activePageCssVars : cssVars"
+                    :class="{
+                        'dl-pagination--active': isActivePage(page),
+                        active: isActivePage(page)
+                    }"
                     :disabled="disabled"
                     @click="setPage(page)"
                 >
@@ -59,7 +61,6 @@
             <button
                 v-if="ellipsesEnd"
                 class="dl-pagination--page_btn"
-                :style="cssVars"
                 :disabled="disabled"
                 @click="setPage(pgTo + 1)"
             >
@@ -68,7 +69,7 @@
             <button
                 v-if="boundaryNumbers && min !== max"
                 class="dl-pagination--page_btn"
-                :style="isActivePage(max) ? activePageCssVars : cssVars"
+                :class="{ 'dl-pagination--active': isActivePage(max) }"
                 :disabled="disabled"
                 @click="setPage(max)"
             >
@@ -79,7 +80,6 @@
             v-if="directionLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isLastPage"
-            :style="cssVars"
             @click="setPage(value + 1)"
         >
             <dl-icon
@@ -91,7 +91,6 @@
             v-if="boundaryLinks"
             class="dl-pagination--nav_btn"
             :disabled="disabled || isLastPage"
-            :style="cssVars"
             @click="setPage(max)"
         >
             <dl-icon
@@ -141,7 +140,7 @@ export default defineComponent({
         directionLinks: Boolean,
         color: {
             type: String,
-            default: 'dl-color-bg'
+            default: 'dl-color-transparent'
         },
         textColor: {
             type: String,
@@ -178,21 +177,16 @@ export default defineComponent({
         },
         cssVars(): Record<string, any> {
             return {
-                '--dl-page-bg-color': getColor(this.color, 'dl-color-bg'),
-                '--dl-page-text-color': getColor(
-                    this.textColor,
-                    'dl-color-darker'
+                '--dl-btn-bg-color': getColor(
+                    this.color,
+                    'dl-color-transparent'
                 ),
-                '--dl-btn-min-width': this.btnMinWidth
-            }
-        },
-        activePageCssVars(): Record<string, any> {
-            return {
-                '--dl-page-bg-color': getColor(
+                '--dl-active-btn-bg-color': getColor(
                     this.activeColor,
                     'dl-color-secondary'
                 ),
-                '--dl-page-text-color': getColor(
+                '--dl-text-color': getColor(this.textColor, 'dl-color-darker'),
+                '--dl-active-text-color': getColor(
                     this.activeTextColor,
                     'dl-color-text-buttons'
                 ),
@@ -309,6 +303,11 @@ export default defineComponent({
         text-overflow: ellipsis;
     }
 
+    &--active {
+        color: var(--dl-active-text-color) !important;
+        background-color: var(--dl-active-btn-bg-color) !important;
+    }
+
     &--page_btn,
     &--nav_btn {
         min-width: var(--dl-btn-min-width);
@@ -316,8 +315,8 @@ export default defineComponent({
         cursor: pointer;
         border: none;
         border-radius: 2px;
-        color: var(--dl-page-text-color);
-        background-color: var(--dl-page-bg-color);
+        color: var(--dl-text-color);
+        background-color: var(--dl-btn-bg-color);
 
         &:active:not(:disabled) {
             background-color: var(--dl-color-secondary);

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -36,6 +36,7 @@ export default defineComponent({
     justify-content: flex-end;
     display: flex;
     color: var(--dl-color-lighter);
-    margin-left: 16px;
+    padding-left: 16px;
+    margin-left: auto;
 }
 </style>

package/src/components/compound/DlPagination/components/QuickNavigation.vue

@@ -14,6 +14,7 @@
         <dl-button
             size="s"
             flat
+            margin="0"
             class="dl-pagination--quick_nav_button"
             :disabled="disabled"
             @click="handleNavigation"

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

@@ -15,7 +15,7 @@
                 :model-value="inputModel"
                 :expanded-input-height="expandedInputHeight"
                 :suggestions="suggestions"
-                @save="handleQueryEdit"
+                @save="saveQueryDialogBoxModel = true"
                 @focus="setFocused"
                 @update:modelValue="handleInputModel"
                 @dql-edit="jsonEditorModel = !jsonEditorModel"
@@ -30,23 +30,13 @@
                     @click="emitSearchQuery"
                 />
             </div>
-            <!-- <div class="dl-smart-search__filters-btn-wrapper">
-                <dl-filters
-                    v-model="filtersModel"
-                    :filters="filters"
-                    :disabled="disabled"
-                    @save="handleQueryEdit"
-                    @remove="handleQueryRemove"
-                    @setActive="handleSetActiveQuery"
-                />
-            </div> -->
         </div>
         <dl-json-editor
             :model-value="jsonEditorModel"
             :query="activeQuery"
             :queries="savedQueries"
             @update:modelValue="jsonEditorModel = $event"
-            @save="handleQuerySaveEditor"
+            @save="saveQueryDialogBoxModel = true"
             @remove="handleQueryRemove"
             @search="handleQuerySearchEditor"
         />
@@ -88,15 +78,23 @@
                 />
             </template>
             <template #footer>
-                <dl-button @click="emitSaveQuery">
-                    Save
-                </dl-button>
+                <div class="dl-smart-search__buttons--save">
+                    <dl-button @click="handleSaveQuery">
+                        Save
+                    </dl-button>
+                    <dl-button
+                        padding="10px"
+                        @click="handleSaveQuery(true)"
+                    >
+                        Save and Search
+                    </dl-button>
+                </div>
             </template>
         </dl-dialog-box>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
 import { DlJsonEditor } from '../../DlJsonEditor'
 import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
@@ -106,11 +104,17 @@ import { DlButton } from '../../../basic'
 import {
     useSuggestions,
     Schema,
-    Alias
+    Alias,
+    removeBrackets
 } from '../../../../hooks/use-suggestions'
 import { Filter, Query, ColorSchema, SearchStatus } from './types'
-import { createColorSchema } from './utils/highlightSyntax'
+import {
+    replaceAliases,
+    replaceWithJsDates,
+    createColorSchema
+} from './utils/utils'
 import { v4 } from 'uuid'
+import { parseSmartQuery } from '../../../../utils'
 
 export default defineComponent({
     components: {
@@ -165,19 +169,22 @@ export default defineComponent({
         }
     },
     emits: ['save-query', 'remove-query', 'search-query'],
-    setup(props, { emit }) {
-        const vm = getCurrentInstance()
-        const proxy = vm!.proxy!
-
+    setup(props) {
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
 
-        const activeQuery = ref(null)
+        const activeQuery = ref({
+            name: 'New Query',
+            query: ''
+        })
         const filtersModel = ref(false)
         const removeQueryDialogBoxModel = ref(false)
         const saveQueryDialogBoxModel = ref(false)
         const newQueryName = ref('')
         const isFocused = ref(false)
+        const isQuerying = ref(false)
+
+        let oldInputQuery = ''
 
         const { suggestions, error, findSuggestions } = useSuggestions(
             props.schema,
@@ -186,11 +193,30 @@ export default defineComponent({
 
         const handleInputModel = (value: string) => {
             inputModel.value = value
+            const json = JSON.stringify(toJSON(removeBrackets(value)))
+            activeQuery.value.query = replaceAliases(json, props.aliases)
+            findSuggestions(value)
+            isQuerying.value = false
+            oldInputQuery = value
+        }
+
+        const toJSON = (value: string) => {
+            return parseSmartQuery(
+                replaceWithJsDates(value) ?? inputModel.value
+            )
         }
 
         const setFocused = (value: boolean) => {
             isFocused.value = value
             findSuggestions(inputModel.value)
+
+            if (value) {
+                inputModel.value = oldInputQuery
+                isQuerying.value = false
+            }
+            if (!value && !error) {
+                toJSON(inputModel.value)
+            }
         }
 
         return {
@@ -205,9 +231,11 @@ export default defineComponent({
             error,
             newQueryName,
             isFocused,
+            isQuerying,
             handleInputModel,
             setFocused,
-            findSuggestions
+            findSuggestions,
+            toJSON
         }
     },
     computed: {
@@ -232,10 +260,21 @@ export default defineComponent({
             return createColorSchema(this.colorSchema, this.aliases)
         },
         computedStatus(): SearchStatus {
-            if (!this.error) {
+            if (this.isFocused) return
+            if (this.isQuerying) return
+            if (!this.error && this.inputModel !== '') {
+                return {
+                    type: 'success',
+                    message: ''
+                }
+            } else if (this.error === 'warning') {
+                return {
+                    type: 'warning',
+                    message: 'The query is not supported technically.'
+                }
+            } else if (this.inputModel === '') {
                 return this.status
             }
-
             return {
                 type: 'error',
                 message: this.error
@@ -247,22 +286,10 @@ export default defineComponent({
             this.inputModel = `Query "${this.activeQuery.name}" ${
                 val ? 'is running' : ''
             }`
-        },
-        inputModel(val) {
-            this.findSuggestions(val)
+            this.isQuerying = true
         }
     },
     methods: {
-        handleQueryEdit(query: Query) {
-            this.activeQuery = query
-            this.jsonEditorModel = true
-        },
-        handleQuerySaveEditor(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.newQueryName = query.name
-            this.saveQueryDialogBoxModel = true
-        },
         handleQueryRemove(query: Query) {
             this.filtersModel = false
             this.activeQuery = query
@@ -273,11 +300,16 @@ export default defineComponent({
             this.activeQuery = query
             this.$emit('search-query', this.activeQuery)
         },
-        emitSearchQuery() {
-            this.activeQuery = {
-                name: '',
-                query: this.inputModel
+        handleSaveQuery(performSearch: boolean) {
+            if (performSearch) {
+                this.emitSaveQuery()
+                this.emitSearchQuery()
+                this.jsonEditorModel = false
+            } else {
+                this.emitSaveQuery()
             }
+        },
+        emitSearchQuery() {
             this.$emit('search-query', this.activeQuery)
         },
         emitRemoveQuery() {
@@ -289,14 +321,9 @@ export default defineComponent({
             if (!this.activeQuery) return
             if (this.newQueryName !== '')
                 this.activeQuery.name = this.newQueryName
-            this.$emit('save-query', this.activeQuery)
+            this.$emit('save-query', { ...this.activeQuery })
             this.saveQueryDialogBoxModel = false
             this.newQueryName = ''
-        },
-        handleSetActiveQuery(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.inputModel = `Query "${query.name}"`
         }
     }
 })
@@ -316,6 +343,16 @@ export default defineComponent({
         display: flex;
         margin: 0px 5px;
         align-items: flex-start;
+
+        &--save {
+            display: flex;
+            width: 100%;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        &--save > * {
+            margin: 0px 10px;
+        }
     }
 
     &__search-btn-wrapper {