Se crean las tarjetas de greuges, recobros y acceso web

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,22 +1,24 @@
 <script setup>
-import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { date, QBtn } from 'quasar';
 
-import { toCurrency, toDate } from 'src/filters';
+import { toCurrency } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const stateStore = useStateStore();
 
 const arrayData = ref(null);
 const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
 
 onBeforeMount(async () => {
     const filter = {
@@ -29,7 +31,7 @@ onBeforeMount(async () => {
                 },
             },
         ],
-        where: { clientFk: '1' },
+        where: { clientFk: `${route.params.id}` },
         order: ['created DESC'],
         limit: 20,
     };
@@ -41,16 +43,6 @@ onBeforeMount(async () => {
     stateStore.rightDrawer = true;
 });
 
-onMounted(() => {
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-const rows = computed(() => arrayData.value.store.data);
-const allColumnNames = ref([]);
-
 const tableColumnComponents = {
     created: {
         component: 'span',

src/pages/Customer/Card/CustomerGreuges.vue

@@ -1,3 +1,202 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const totalAmount = ref(0);
+const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        include: [
+            {
+                relation: 'greugeType',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+            {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+        ],
+        order: 'shipped DESC, amount',
+        where: {
+            clientFk: `${route.params.id}`,
+        },
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerGreugesCard', {
+        url: 'greuges',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    totalAmount.value = arrayData.value.store.data.reduce((acumulador, objetoActual) => {
+        return acumulador + objetoActual.amount;
+    }, 0);
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    createdBy: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    comment: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    type: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'shipped',
+        label: t('Date'),
+        name: 'date',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.user.name,
+        label: t('Created by'),
+        name: 'createdBy',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Comment'),
+        name: 'comment',
+    },
+    {
+        align: 'left',
+        field: (value) => value.greugeType.name,
+        label: t('Type'),
+        name: 'type',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerGreugeCreate = () => {
+    router.push({ name: 'CustomerGreugeCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Greuges</div>
+    <QPage class="column items-center q-pa-md">
+        <QCard class="full-width" v-if="totalAmount">
+            <h6 class="flex justify-end q-my-lg q-pr-lg">
+                <span class="label-color q-mr-md">{{ t('Total') }}:</span>
+                {{ toCurrency(totalAmount) }}
+            </h6>
+        </QCard>
+
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerGreugeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New greuge') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Total: Total
+    Date: Fecha
+    Created by: Creado por
+    Comment: Comentario
+    Type: Tipo
+    Amount: Importe
+    New greuge: Nuevo greuge
+</i18n>

src/pages/Customer/Card/CustomerRecoveries.vue

@@ -1,3 +1,157 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        where: { clientFk: `${route.params.id}` },
+        order: ['started DESC'],
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerRecoveriesCard', {
+        url: 'Recoveries',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    since: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    to: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    period: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'started',
+        label: t('Since'),
+        name: 'since',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'finished',
+        label: t('To'),
+        name: 'to',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+    {
+        align: 'left',
+        field: 'period',
+        label: t('Period'),
+        name: 'period',
+    },
+]);
+
+const toCustomerRecoverieCreate = () => {
+    router.push({ name: 'CustomerRecoverieCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Recoveries</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New recoverie') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Since: Desde
+    To: Hasta
+    Amount: Importe
+    Period: Periodo
+    New recoverie: Nuevo recobro
+</i18n>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -1,3 +1,69 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const filter = { where: { id: `${route.params.id}` } };
+</script>
+
 <template>
-    <div class="flex justify-center">Web access</div>
+    <FormModel
+        :filter="filter"
+        :observe-form-changes="false"
+        :url-update="`Clients/${route.params.id}/updateUser`"
+        :url="'VnUsers/preview'"
+        model="client"
+    >
+        <template #form="{ data }">
+            <div
+                v-for="(item, index) in data"
+                :key="index"
+                :class="{
+                    'q-mb-md': index < data.length - 1,
+                }"
+            >
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            :label="t('Enable web access')"
+                            v-model="item.active"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput :label="t('User')" v-model="item.name" />
+                    </div>
+                    <div class="col">
+                        <VnInput :label="t('Recovery email')" v-model="item.email">
+                            <template #append>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t(
+                                            'This email is used for user to regain access their account'
+                                        )
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
+                    </div>
+                </VnRow>
+            </div>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Enable web access: Habilitar acceso web
+    User: Usuario
+    Recovery email: Correo de recuperacion
+    This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
+</i18n>

src/pages/Customer/components/CustomerGreugeCreate.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    amount: null,
+    description: null,
+    greugeTypeFk: null,
+    shipped: '2001-01-01T11:00:00.000Z',
+});
+
+const greugeTypes = ref([]);
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerGreuges = () => {
+    router.push({
+        name: 'CustomerGreuges',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <fetch-data @on-fetch="(data) => (greugeTypes = data)" auto-load url="greugeTypes" />
+
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        @on-data-saved="toCustomerGreuges()"
+        model="client"
+        url-create="Greuges"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                </div>
+                <div class="col">
+                    <VnInputDate :label="t('Date')" v-model="data.shipped" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Comment')" v-model="data.description" />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Type')"
+                        :options="greugeTypes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.greugeTypeFk"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Amount: Importe
+    Date: Fecha
+    Comment: Comentario
+    Type: Tipo
+</i18n>

src/pages/Customer/components/CustomerNoteCreate.vue

@@ -32,8 +32,8 @@ const toCustomerNotes = () => {
     <FormModel
         :form-initial-data="initialData"
         :observe-form-changes="false"
-        url-create="ClientObservations"
         @on-data-saved="toCustomerNotes()"
+        url-create="ClientObservations"
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Customer/components/CustomerRecoverieCreate.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    started: '2001-01-01T11:00:00.000Z',
+    finished: null,
+    amount: null,
+    period: null,
+});
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerRecoveries = () => {
+    router.push({
+        name: 'CustomerRecoveries',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        @on-data-saved="toCustomerRecoveries()"
+        model="client"
+        url-create="Recoveries"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInputDate :label="t('Since')" v-model="data.started" />
+                </div>
+                <div class="col">
+                    <VnInputDate :label="t('To')" v-model="data.finished" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Period')" type="number" v-model="data.period" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Since: Desde
+    To: Hasta
+    Amount: Importe
+    Period: Periodo
+</i18n>

src/router/modules/customer.js

@@ -254,13 +254,31 @@ export default {
                 },
                 {
                     path: 'greuges',
-                    name: 'CustomerGreuges',
+                    name: 'GreugesCard',
-                    meta: {
+                    redirect: { name: 'CustomerGreuges' },
-                        title: 'greuges',
+                    children: [
-                        icon: 'vn:greuge',
+                        {
-                    },
+                            path: '',
-                    component: () =>
+                            name: 'CustomerGreuges',
-                        import('src/pages/Customer/Card/CustomerGreuges.vue'),
+                            meta: {
+                                title: 'greuges',
+                                icon: 'vn:greuge',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerGreuges.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerGreugeCreate',
+                            meta: {
+                                title: 'greuge-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerGreugeCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'balance',
@@ -274,13 +292,31 @@ export default {
                 },
                 {
                     path: 'recoveries',
-                    name: 'CustomerRecoveries',
+                    name: 'RecoveriesCard',
-                    meta: {
+                    redirect: { name: 'CustomerRecoveries' },
-                        title: 'recoveries',
+                    children: [
-                        icon: 'vn:recovery',
+                        {
-                    },
+                            path: '',
-                    component: () =>
+                            name: 'CustomerRecoveries',
-                        import('src/pages/Customer/Card/CustomerRecoveries.vue'),
+                            meta: {
+                                title: 'recoveries',
+                                icon: 'vn:recovery',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerRecoveries.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerRecoverieCreate',
+                            meta: {
+                                title: 'recoverie-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/components/CustomerRecoverieCreate.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'web-access',