diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index e214770d2..b21a622ca 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -19,6 +19,7 @@ import { useQuasar, date } from 'quasar'; import { useStateStore } from 'stores/useStateStore'; import { useFilterParams } from 'src/composables/useFilterParams'; import { dashIfEmpty, toDate } from 'src/filters'; +import { useTableHeight } from './filters/useTableHeight'; import CrudModel from 'src/components/CrudModel.vue'; import FormModelPopup from 'components/FormModelPopup.vue'; @@ -117,7 +118,7 @@ const $props = defineProps({ }, tableHeight: { type: String, - default: '90vh', + default: undefined, }, footer: { type: Boolean, @@ -166,6 +167,7 @@ const tableRef = ref(); const params = ref(useFilterParams($attrs['data-key']).params); const orders = ref(useFilterParams($attrs['data-key']).orders); const app = inject('app'); +const tableHeight = useTableHeight(); const editingRow = ref(null); const editingField = ref(null); @@ -678,7 +680,7 @@ const rowCtrlClickFunction = computed(() => { table-header-class="bg-header" card-container-class="grid-three" flat - :style="isTableMode && `max-height: ${tableHeight}`" + :style="isTableMode && `max-height: ${$props.tableHeight || tableHeight}`" :virtual-scroll="isTableMode" @virtual-scroll="handleScroll" @row-click="(event, row) => handleRowClick(event, row)" diff --git a/src/components/VnTable/filters/useTableHeight.js b/src/components/VnTable/filters/useTableHeight.js new file mode 100644 index 000000000..2397ce16f --- /dev/null +++ b/src/components/VnTable/filters/useTableHeight.js @@ -0,0 +1,18 @@ +import { onMounted, nextTick, ref } from 'vue'; + +export function useTableHeight() { + const tableHeight = ref('90vh'); + + onMounted(async () => { + await nextTick(); + let height = 100; + Array.from(document.querySelectorAll('[role="toolbar"]')) + .filter((element) => window.getComputedStyle(element).display !== 'none') + .forEach(() => { + height -= 10; + }); + tableHeight.value = `${height}vh`; + }); + + return tableHeight; +} diff --git a/src/css/app.scss b/src/css/app.scss index b299973d1..dd5dbe247 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -340,3 +340,6 @@ input::-webkit-inner-spin-button { .containerShrinked { width: 70%; } +.q-item__section--main ~ .q-item__section--side { + padding-inline: 0; +} diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue index f4500d5fa..ab9b91d06 100644 --- a/src/pages/Item/ItemListFilter.vue +++ b/src/pages/Item/ItemListFilter.vue @@ -7,7 +7,7 @@ import FetchData from 'components/FetchData.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnSelect from 'src/components/common/VnSelect.vue'; import VnInput from 'src/components/common/VnInput.vue'; -import { QCheckbox } from 'quasar'; +import VnCheckbox from 'src/components/common/VnCheckbox.vue'; import { useArrayData } from 'composables/useArrayData'; import { useValidator } from 'src/composables/useValidator'; @@ -250,10 +250,9 @@ onMounted(async () => { - - - {{ t('params.tags') }} - + + {{ t('params.tags') }} + { color="primary" @click="tagValues.push({})" /> - + { > { /> - - - {{ t('More fields') }} - + {{ t('More fields') }} - - + /> + { /> - { @keydown.enter="applyFieldFilters(params, searchFn)" /> - + diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue index a613f905a..e721e2d1c 100644 --- a/src/pages/Ticket/Card/TicketSale.vue +++ b/src/pages/Ticket/Card/TicketSale.vue @@ -99,6 +99,7 @@ const columns = computed(() => [ align: 'left', label: t('globals.quantity'), name: 'quantity', + class: 'shrink', format: (row) => toCurrency(row.quantity), }, { @@ -791,7 +792,7 @@ watch( {{ row?.item?.subName.toUpperCase() }} - +