feat: refs #6238 add percentage & summary btn

src/components/ui/CardDescriptor.vue

@@ -115,13 +115,13 @@ const emit = defineEmits(['onFetch']);
                     </QBtn>
                 </RouterLink>
                 <QBtn
+                    v-if="$slots.menu"
                     color="white"
                     dense
                     flat
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -17,6 +17,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -106,6 +110,7 @@ const getEntryQueryParams = (supplier) => {
         :filter="filter"
         @on-fetch="setData"
         data-key="supplier"
+        :summary="$props.summary"
     >
         <template #header-extra-action>
             <QBtn

src/pages/Supplier/Card/SupplierDescriptorProxy.vue

@@ -1,5 +1,6 @@
 <script setup>
 import SupplierDescriptor from './SupplierDescriptor.vue';
+import SupplierSummary from './SupplierSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -11,6 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <SupplierDescriptor v-if="$props.id" :id="$props.id" />
+        <SupplierDescriptor v-if="$props.id" :id="$props.id" :summary="SupplierSummary" />
     </QPopupProxy>
 </template>

src/pages/Travel/ExtraCommunity.vue

@@ -78,7 +78,7 @@ const tableColumnComponents = {
     },
     ref: {
         component: VnInput,
-        attrs: { dense: true },
+        attrs: { dense: true, class: 'bold' },
         event: (val, field, rowIndex) => ({
             'keyup.enter': () => saveFieldValue(val, field, rowIndex),
             blur: () => saveFieldValue(val, field, rowIndex),
@@ -88,9 +88,13 @@ const tableColumnComponents = {
         component: 'span',
         attrs: {},
     },
+    percentage: {
+        component: 'span',
+        attrs: {},
+    },
     kg: {
         component: VnInput,
-        attrs: { dense: true, type: 'number', min: 0, class: 'input-number' },
+        attrs: { dense: true, type: 'number', min: 0, class: 'input-number bold' },
         event: (val, field, rowIndex) => ({
             'keyup.enter': () => saveFieldValue(val, field, rowIndex),
             blur: () => saveFieldValue(val, field, rowIndex),
@@ -179,6 +183,14 @@ const columns = computed(() => [
         showValue: true,
         sortable: true,
     },
+    {
+        label: '%',
+        field: '',
+        name: 'percentage',
+        align: 'center',
+        showValue: false,
+        sortable: true,
+    },
     {
         label: t('kg'),
         field: 'kg',
@@ -419,6 +431,10 @@ const handleDragScroll = (event) => {
         stopScroll();
     }
 };
+
+const getKgPercentage = ({ kg, loadedKg, volumeKg }) => {
+    return Math.round((Math.max(loadedKg || 0, volumeKg || 0) / kg) * 100);
+};
 </script>
 
 <template>
@@ -494,8 +510,19 @@ const handleDragScroll = (event) => {
                                     : {}
                             "
                         >
-                            <template v-if="col.showValue">
+                            <QChip
+                                v-if="col.name === 'percentage'"
+                                :label="getKgPercentage(props.row) + '%'"
+                                class="text-left q-py-xs q-px-sm"
+                                :class="{
+                                    'bg-red-10': getKgPercentage(props.row) >= 100,
+                                    'bg-deep-orange-10':
+                                        getKgPercentage(props.row) >= 80 &&
+                                        getKgPercentage(props.row) < 100,
+                                }"
+                            />
                             <span
+                                v-else-if="col.showValue"
                                 :class="[
                                     'text-left',
                                     {
@@ -503,9 +530,8 @@ const handleDragScroll = (event) => {
                                             col.name === 'cargoSupplierNickname',
                                     },
                                 ]"
-                                    >{{ col.value }}</span
+                                v-text="col.value"
-                                >
+                            />
-                            </template>
                             <!-- Main Row Descriptors -->
                             <TravelDescriptorProxy
                                 v-if="col.name === 'id'"
@@ -556,6 +582,7 @@ const handleDragScroll = (event) => {
                     <QTd>
                         <span>{{ entry.stickers }}</span>
                     </QTd>
+                    <QTd />
                     <QTd></QTd>
                     <QTd>
                         <span>{{ entry.loadedkg }}</span>
@@ -572,8 +599,16 @@ const handleDragScroll = (event) => {
         </QTable>
     </QPage>
 </template>
-
+<style lang="scss">
+.bold input {
+    font-weight: bold;
+}
+</style>
 <style scoped lang="scss">
+.q-chip {
+    color: var(--vn-text-color);
+}
+
 :deep(.q-table) {
     border-collapse: collapse;
 }