verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

refactor: refs #6480 use VnCard
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-04-19 13:33:29 +02:00
parent c3db9e17a8
commit da6e121137
22 changed files with 114 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/VnCard.vue
View File

@ -14,10 +14,10 @@ const props = defineProps({
baseUrl: { type: String, required: true },
filter: { type: Object, default: undefined },
descriptor: { type: Object, required: true },
searchbarDataKey: { type: String, required: true },
searchbarUrl: { type: String, required: true },
searchbarLabel: { type: String, required: true },
searchbarInfo: { type: String, required: true },
searchbarDataKey: { type: String, default: undefined },
searchbarUrl: { type: String, default: undefined },
searchbarLabel: { type: String, default: '' },
searchbarInfo: { type: String, default: '' },
});
const { t } = useI18n();
@ -39,7 +39,10 @@ onBeforeRouteUpdate(async (to, from) => {
});
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<Teleport
to="#searchbar"
v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
>
<VnSearchbar
:data-key="props.searchbarDataKey"
:url="props.searchbarUrl"
@ -57,7 +60,7 @@ onBeforeRouteUpdate(async (to, from) => {
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<div :class="[useCardSize(), $attrs.class]">
<RouterView />
</div>
</QPage>

4
src/css/app.scss
View File

@ -172,3 +172,7 @@ input::-webkit-inner-spin-button {
background-color: $primary !important;
color: white !important;
}
.q-scrollarea__content {
max-width: 100%;
}

49
src/pages/Claim/Card/ClaimCard.vue
View File

@ -1,46 +1,15 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import VnCard from 'components/common/VnCard.vue';
import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="ClaimList"
url="Claims/filter"
:label="t('Search claim')"
:info="t('You can search by claim id or customer name')"
<VnCard
data-key="Claim"
base-url="Claims"
:descriptor="ClaimDescriptor"
searchbar-data-key="ClaimList"
searchbar-url="Claims/filter"
searchbar-label="Search claim"
searchbar-info="You can search by claim id or customer name"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<ClaimDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<i18n>
es:
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
Details: Detalles
Notes: Notas
Action: Acción
</i18n>

2
src/pages/Claim/locale/es.yml Normal file
View File

@ -0,0 +1,2 @@
Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente

48
src/pages/Customer/Card/CustomerCard.vue
View File

@ -1,45 +1,15 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import VnCard from 'components/common/VnCard.vue';
import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="CustomerList"
url="Clients/filter"
:label="t('Search customer')"
:info="t('You can search by customer id or name')"
<VnCard
data-key="Client"
base-url="Clients"
:descriptor="CustomerDescriptor"
searchbar-data-key="CustomerList"
searchbar-url="Clients/filter"
searchbar-label="Search customer"
searchbar-info="You can search by customer id or name"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<CustomerDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<i18n>
es:
Search customer: Buscar cliente
You can search by customer id or name: Puedes buscar por id o nombre del cliente
</i18n>

2
src/pages/Customer/locale/es.yml
View File

@ -1,3 +1,5 @@
Search customer: Buscar cliente
You can search by customer id or name: Puedes buscar por id o nombre del cliente
customerFilter:
filter:
name: Nombre

29
src/pages/Department/Card/DepartmentCard.vue
View File

@ -1,26 +1,13 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import VnCard from 'components/common/VnCard.vue';
import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<DepartmentDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md column items-center">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
<VnCard
class="q-pa-md column items-center"
v-bind="{ ...$attrs }"
data-key="Department"
base-url="Departments"
:descriptor="DepartmentDescriptor"
/>
</template>

51
src/pages/Entry/Card/EntryCard.vue
View File

@ -1,48 +1,15 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnCard from 'components/common/VnCard.vue';
import EntryDescriptor from './EntryDescriptor.vue';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
const { t } = useI18n();
const stateStore = useStateStore();
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="EntryList"
url="Entries/filter"
:label="t('Search entries')"
:info="t('You can search by entry reference')"
<VnCard
data-key="Entry"
base-url="Entries"
:descriptor="EntryDescriptor"
searchbar-data-key="EntryList"
searchbar-url="Entries/filter"
searchbar-label="Search entries"
searchbar-info="You can search by entry reference"
/>
</Teleport>
</template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<EntryDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<i18n>
es:
Search entries: Buscar entradas
You can search by entry reference: Puedes buscar por referencia de la entrada
</i18n>

2
src/pages/Entry/locale/es.yml
View File

@ -1,3 +1,5 @@
Search entries: Buscar entradas
You can search by entry reference: Puedes buscar por referencia de la entrada
entryList:
list:
inventoryEntry: Es inventario

25
src/pages/Item/Card/ItemCard.vue
View File

@ -1,28 +1,7 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnCard from 'components/common/VnCard.vue';
import ItemDescriptor from './ItemDescriptor.vue';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<ItemDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
<VnCard data-key="Item" base-url="Items" :descriptor="ItemDescriptor" />
</template>

20
src/pages/Order/Card/OrderCard.vue
View File

@ -1,23 +1,7 @@
<script setup>
import LeftMenu from 'components/LeftMenu.vue';
import { useStateStore } from 'stores/useStateStore';
import VnCard from 'components/common/VnCard.vue';
import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<OrderDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<RouterView></RouterView>
</QPage>
</QPageContainer>
<VnCard data-key="Order" base-url="Orders" :descriptor="OrderDescriptor" />
</template>

54
src/pages/Parking/Card/ParkingCard.vue
View File

@ -1,57 +1,21 @@
<script setup>
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'src/composables/useArrayData';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnCard from 'components/common/VnCard.vue';
import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
const { t } = useI18n();
const route = useRoute();
const stateStore = useStateStore();
const filter = {
fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
};
const arrayData = useArrayData('Parking', {
url: `Parkings/${route.params.id}`,
filter,
});
const { store } = arrayData;
onMounted(async () => await arrayData.fetch({ append: false }));
watch(
() => route.params.id,
async (newId) => {
if (newId) {
store.url = `Parkings/${newId}`;
store.filter = filter;
await arrayData.fetch({ append: false });
}
}
);
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
:info="t('parking.searchBar.info')"
:label="t('parking.searchBar.label')"
<VnCard
data-key="Parking"
base-url="Parkings"
:filter="filter"
:descriptor="ParkingDescriptor"
searchbar-data-key="ParkingList"
searchbar-url="Parkings"
searchbar-label="parking.searchBar.label"
searchbar-info="parking.searchBar.info"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<ParkingDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<RouterView></RouterView>
</QPage>
</QPageContainer>
</template>

19
src/pages/Route/Card/RouteCard.vue
View File

@ -1,22 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import VnCard from 'components/common/VnCard.vue';
import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<RouteDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<RouterView></RouterView>
</QPage>
</QPageContainer>
<VnCard data-key="Route" base-url="Routes" :descriptor="RouteDescriptor" />
</template>

18
src/pages/Shelving/Card/ShelvingCard.vue
View File

@ -1,21 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import VnCard from 'components/common/VnCard.vue';
import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<ShelvingDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<RouterView></RouterView>
</QPage>
</QPageContainer>
<VnCard data-key="Shelving" base-url="Shelvings" :descriptor="ShelvingDescriptor" />
</template>

75
src/pages/Supplier/Card/SupplierCard.vue
View File

@ -1,73 +1,14 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnCard from 'components/common/VnCard.vue';
import SupplierDescriptor from './SupplierDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="SuppliersList"
url="Suppliers/filter"
:limit="20"
:label="t('Search suppliers')"
<VnCard
data-key="Supplier"
base-url="Suppliers"
:descriptor="SupplierDescriptor"
searchbar-data-key="SupplierList"
searchbar-url="Suppliers/filter"
searchbar-label="Search suppliers"
/>
</Teleport>
</template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<SupplierDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<style lang="scss">
.q-scrollarea__content {
max-width: 100%;
}
</style>
<style lang="scss" scoped>
.descriptor {
max-width: 256px;
h5 {
margin: 0 15px;
}
.header {
display: flex;
justify-content: space-between;
}
.q-card__actions {
justify-content: center;
}
#descriptor-skeleton .q-card__actions {
justify-content: space-between;
}
}
</style>
<i18n>
es:
Search suppliers: Buscar proveedores
</i18n>

1
src/pages/Supplier/locale/es.yml Normal file
View File

@ -0,0 +1 @@
Search suppliers: Buscar proveedores

76
src/pages/Ticket/Card/TicketCard.vue
View File

@ -1,73 +1,15 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import VnCard from 'components/common/VnCard.vue';
import TicketDescriptor from './TicketDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="TicketList"
url="Tickets/filter"
:label="t('Search ticket')"
:info="t('You can search by ticket id or alias')"
<VnCard
data-key="Ticket"
base-url="Tickets"
:descriptor="TicketDescriptor"
searchbar-data-key="TicketList"
searchbar-url="Tickets/filter"
searchbar-label="Search ticket"
searchbar-info="You can search by ticket id or alias"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<TicketDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<style lang="scss">
.q-scrollarea__content {
max-width: 100%;
}
</style>
<style lang="scss" scoped>
.descriptor {
max-width: 256px;
h5 {
margin: 0 15px;
}
.header {
display: flex;
justify-content: space-between;
}
.q-card__actions {
justify-content: center;
}
#descriptor-skeleton .q-card__actions {
justify-content: space-between;
}
}
</style>
<i18n>
es:
Search ticket: Buscar ticket
You can search by ticket id or alias: Puedes buscar por id o alias del ticket
</i18n>

2
src/pages/Ticket/locale/es.yml Normal file
View File

@ -0,0 +1,2 @@
Search ticket: Buscar ticket
You can search by ticket id or alias: Puedes buscar por id o alias del ticket

52
src/pages/Travel/Card/TravelCard.vue
View File

@ -1,55 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import VnCard from 'components/common/VnCard.vue';
import TravelDescriptor from './TravelDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<TravelDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
<VnCard data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
</template>
<style lang="scss">
.q-scrollarea__content {
max-width: 100%;
}
</style>
<style lang="scss" scoped>
.descriptor {
max-width: 256px;
h5 {
margin: 0 15px;
}
.header {
display: flex;
justify-content: space-between;
}
.q-card__actions {
justify-content: center;
}
#descriptor-skeleton .q-card__actions {
justify-content: space-between;
}
}
</style>

30
src/pages/Wagon/Card/WagonCard.vue
View File

@ -1,32 +1,6 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import LeftMenu from 'components/LeftMenu.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
import VnCard from 'components/common/VnCard.vue';
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
<VnCard data-key="Wagon" base-url="Wagons" />
</template>
<i18n>
es:
Search customer: Buscar cliente
You can search by customer id or name: Puedes buscar por id o nombre del cliente
</i18n>

47
src/pages/Worker/Card/WorkerCard.vue
View File

@ -1,44 +1,15 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import VnCard from 'components/common/VnCard.vue';
import WorkerDescriptor from './WorkerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
</script>
<template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="WorkerList"
url="Workers/filter"
:label="t('Search worker')"
:info="t('You can search by worker id or name')"
<VnCard
data-key="Worker"
base-url="Workers"
:descriptor="WorkerDescriptor"
searchbar-data-key="WorkerList"
searchbar-url="Workers/filter"
searchbar-label="Search worker"
searchbar-info="You can search by worker id or name"
/>
</Teleport>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<WorkerDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>
<i18n>
es:
Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador
</i18n>

2
src/pages/Worker/locale/es.yml Normal file
View File

@ -0,0 +1,2 @@
Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador