feat: dense rows

src/pages/Item/ItemFixedPrice.vue

@@ -108,8 +108,10 @@ const defaultColumnAttrs = {
     sortable: true,
 };
 
-const columns = computed(() => [
+const columns = ref([
     {
+        sortable: true,
+        align: 'left',
         label: t('item.fixedPrice.itemId'),
         name: 'itemId',
         field: 'itemFk',
@@ -380,6 +382,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
+            dense
             :rows="fixedPrices"
             :columns="columns"
             row-key="id"
@@ -408,10 +411,33 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </QTd>
                 </QTr>
             </template>
-
+            <template #header="props">
+                <QTr :props="props" class="bg">
+                    <QTh />
+                    <QTh
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        style="text-wrap: balance"
+                    >
+                        {{ col.label }}
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body-selection="scope">
+                <QCheckbox
+                    flat
+                    style="width: 10px; margin-left: -20px"
+                    v-model="scope.selected"
+                />
+            </template>
+            <template #header-selection="scope">
+                <QCheckbox style="margin-left: -15px" v-model="scope.selected" />
+            </template>
             <template #body-cell-itemId="props">
                 <QTd>
                     <VnSelect
+                        style="width: 115px"
                         url="Items/withName"
                         hide-selected
                         option-label="id"
@@ -436,12 +462,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         {{ row.name }}
                     </span>
                     <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags :item="row" :max-length="6" />
+                    <FetchedTags style="width: 200px" :item="row" :max-length="6" />
                 </QTd>
             </template>
             <template #body-cell-groupingPrice="props">
                 <QTd class="col">
                     <VnInput
+                        style="width: 80px"
+                        mask="###.##"
                         v-model.number="props.row.rate2"
                         v-on="getRowUpdateInputEvents(props)"
                     >
@@ -452,6 +480,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #body-cell-packingPrice="props">
                 <QTd class="col">
                     <VnInput
+                        mask="###.##"
+                        style="width: 80px"
                         v-model.number="props.row.rate3"
                         v-on="getRowUpdateInputEvents(props)"
                     >
@@ -463,7 +493,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QTd class="col">
                     <div class="row">
                         <QCheckbox
-                            class="col"
                             :model-value="props.row.hasMinPrice"
                             @update:model-value="updateMinPrice($event, props)"
                             :false-value="0"
@@ -471,8 +500,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                             :toggle-indeterminate="false"
                         />
                         <VnInput
+                            style="padding-left: -20px; width: 80px"
                             class="col"
-                            :disable="!props.row.hasMinPrice"
+                            :disable="props.row.hasMinPrice === 'false'"
                             v-model.number="props.row.minPrice"
                             v-on="getRowUpdateInputEvents(props)"
                             type="number"
@@ -481,33 +511,43 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
             <template #body-cell-started="props">
-                <QTd class="col" style="min-width: 160px">
+                <QTd class="col">
                     <VnInputDate
+                        style="max-width: 125px"
+                        :show-event="false"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
                             isBigger(props.row.started)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
                                 : {}
                         "
                     />
                 </QTd>
             </template>
             <template #body-cell-ended="props">
-                <QTd class="col" style="min-width: 150px">
+                <QTd class="col">
                     <VnInputDate
+                        style="max-width: 125px"
+                        :show-event="false"
                         v-model="props.row.ended"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
-                            isLower(props.row.ended)
+                            isLower(props.row.started)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
+                                ? {
+                                      'bg-color': 'warning',
+                                      'is-outlined': true,
+                                  }
                                 : {}
                         "
                     />
                 </QTd>
             </template>
             <template #body-cell-warehouse="props">
-                <QTd class="col">
+                <QTd class="col" style="max-width: 180px">
                     <VnSelect
                         :options="warehousesOptions"
                         hide-selected
@@ -571,7 +611,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </QDialog>
     </QPage>
 </template>
-
+<style lang="scss" scoped>
+.q-table th,
+.q-table td {
+    padding-inline: 5px !important;
+}
+.q-field__after,
+.q-field__append {
+    padding: 0;
+}
+</style>
 <i18n>
 es:
     Add fixed price: Añadir precio fijado