diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 801f42a38..b8494a875 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() }}
-
+