-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
152 additions
and
45 deletions.
There are no files selected for viewing
76 changes: 76 additions & 0 deletions
76
packages/ui/src/components/MagnetarFiltersCodeRepresentation.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <script setup lang="ts"> | ||
| import { arrStr } from '@magnetarjs/utils' | ||
| import { isArray } from 'is-what' | ||
| import { computed } from 'vue' | ||
| import { FilterState, FiltersState, MUIFilter, OPaths, OrderByState } from '../types' | ||
| import { filterStateToClauses, orderByStateToClauses } from '../utils/tableHelpers' | ||
| const props = defineProps<{ | ||
| labels: { | ||
| 'magnetar table no active filters': string | ||
| } | ||
| hasSomeFilterOrOrderby: boolean | ||
| filters?: MUIFilter<any, any>[] | ||
| filtersState: FiltersState | ||
| orderByState: OrderByState | ||
| }>() | ||
| const emit = defineEmits<{ | ||
| ( | ||
| e: 'setFilter', | ||
| payload: { | ||
| filterIndex: number | ||
| payload: null | FilterState | ||
| } | ||
| ): void | ||
| ( | ||
| e: 'setOrderBy', | ||
| payload: { | ||
| fieldPath: OPaths<any> | ||
| direction: 'asc' | 'desc' | null | ||
| clearOtherOrderBy?: boolean | ||
| } | ||
| ): void | ||
| }>() | ||
| const currentFilters = computed(() => filterStateToClauses(props.filtersState, props.filters ?? [])) | ||
| const currentOrderBy = computed(() => orderByStateToClauses(props.orderByState)) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="magnetar-row magnetar-gap-sm"> | ||
| <div v-if="!hasSomeFilterOrOrderby">{{ labels['magnetar table no active filters'] }}</div> | ||
| <div v-for="info in currentFilters" :key="info.filterIndex" class="magnetar-filter-code"> | ||
| {{ | ||
| isArray(info.result) | ||
| ? info.result.map((where) => `.where(${arrStr(where)})`).join('') | ||
| : `.query(${JSON.stringify(info.result)})` | ||
| }} | ||
| <button @click="() => emit('setFilter', { filterIndex: info.filterIndex, payload: null })"> | ||
| ✕ | ||
| </button> | ||
| </div> | ||
| <div | ||
| v-for="_orderBy in currentOrderBy" | ||
| :key="JSON.stringify(_orderBy)" | ||
| class="magnetar-filter-code" | ||
| > | ||
| .orderBy({{ arrStr(_orderBy) }}) | ||
| <button @click="() => emit('setOrderBy', { fieldPath: _orderBy[0], direction: null })"> | ||
| ✕ | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="sass" src="./styles.sass" /> | ||
| <style lang="sass" scoped> | ||
| .magnetar-filter-code | ||
| background: var(--c-primary-extra-light, whitesmoke) | ||
| border-radius: 0.25rem | ||
| padding: 0.25rem 0.5rem | ||
| display: flex | ||
| align-items: center | ||
| gap: 0.25rem | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <script setup lang="ts"> | ||
| import LoadingSpinner from './LoadingSpinner.vue' | ||
| import type { CollectionInstance } from '@magnetarjs/types' | ||
| const props = defineProps<{ | ||
| labels: { | ||
| 'magnetar table record counts': string | ||
| 'magnetar table info counts total': string | ||
| 'magnetar table info counts filtered': string | ||
| 'magnetar table info counts fetched': string | ||
| 'magnetar table info counts showing': string | ||
| } | ||
| fetchState: 'ok' | 'end' | 'fetching' | { error: string } | ||
| collection: CollectionInstance<any> | ||
| collectionInstance: CollectionInstance<any> | ||
| rows: any[] | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <section class="magnetar-column magnetar-gap-sm magnetar-items-end"> | ||
| <h6>{{ labels['magnetar table record counts'] }}</h6> | ||
| <div class="magnetar-row magnetar-gap-md"> | ||
| <LoadingSpinner v-if="fetchState === 'fetching'" /> | ||
| {{ `${collection.count} ${labels['magnetar table info counts total']} / ` }} | ||
| {{ `${collectionInstance.count} ${labels['magnetar table info counts filtered']} / ` }} | ||
| <template v-if="collectionInstance.data.size !== rows.length">{{ | ||
| `${collectionInstance.data.size} ${labels['magnetar table info counts fetched']} / ` | ||
| }}</template> | ||
| {{ `${rows.length} ${labels['magnetar table info counts showing']}` }} | ||
| </div> | ||
| </section> | ||
| </template> | ||
|
|
||
| <style lang="sass" src="./styles.sass" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters