feat(vnrow): create component vnrow refs #6118

src/components/ui/CardDescriptor.vue

@@ -41,7 +41,9 @@ async function fetch() {
     if ($props.filter) params.filter = JSON.stringify($props.filter);
 
     const { data } = await axios.get($props.url, { params });
+    console.log(data);
     entity.value = data;
+    console.log('entity.value: ', entity.value);
 
     emit('onFetch', data);
 }

src/components/ui/VnRow.vue

@@ -0,0 +1,14 @@
+<script></script>
+<template>
+    <div id="row">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss">
+@media screen and (max-width: 800px) {
+    #row {
+        flex-direction: column;
+        background-color: blue;
+    }
+}
+</style>

src/pages/Claim/Card/ClaimBasicData.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -44,6 +45,7 @@ function setWorkers(data) {
 }
 
 function setClaimStates(data) {
+    console.log(data);
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
@@ -51,6 +53,7 @@ function setClaimStates(data) {
 const workerFilter = {
     options: workers,
     filterFn: (options, value) => {
+        console.log('Filtering workers with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return workersCopy.value;
@@ -70,6 +73,7 @@ const workerFilter = {
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
+        console.log('Filtering claim states with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return claimStatesCopy.value;
@@ -99,7 +103,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <div class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -136,7 +140,7 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </div>
+                </VnRow>
                 <div class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -17,6 +17,8 @@ const $props = defineProps({
         default: null,
     },
 });
+console.log('Component id:', $props.id);
+if ($props.id === undefined) console.log('$props.id: ', $props.id);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -109,6 +111,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
+                        {{ console.log('Worker userFk:', entity.worker.userFk) }}
                         <WorkerDescriptorProxy :id="entity.worker.userFk" />
                     </span>
                 </template>