forked from verdnatura/salix-front
feat: refs #4988 add agencyList and searchBar
This commit is contained in:
parent
6c39c7da97
commit
fb6a2c8097
|
|
@ -91,6 +91,7 @@ export default {
|
|||
basicData: 'Basic data',
|
||||
log: 'Logs',
|
||||
parkingList: 'Parkings list',
|
||||
agencyList: 'Agencies list',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ export default {
|
|||
basicData: 'Datos básicos',
|
||||
log: 'Historial',
|
||||
parkingList: 'Listado de parkings',
|
||||
agencyList: 'Listado de agencias',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
|
|
@ -992,7 +993,7 @@ export default {
|
|||
routes: 'Rutas',
|
||||
cmrsList: 'Listado de CMRs externos',
|
||||
agency: 'Agency',
|
||||
RouteList: 'Listado',
|
||||
RouteList: 'Listado de rutas',
|
||||
create: 'Crear',
|
||||
basicData: 'Datos básicos',
|
||||
summary: 'Resumen',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<script setup>
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const router = useRouter();
|
||||
const stateStore = useStateStore();
|
||||
function navigate(id) {
|
||||
router.push({ path: `/agency/${id}` });
|
||||
}
|
||||
function exprBuilder(param, value) {
|
||||
switch (param) {
|
||||
case 'search':
|
||||
return { name: { like: `%${value}%` } };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
:info="t('You can search by name')"
|
||||
:label="t('Search agency')"
|
||||
data-key="AgencyList"
|
||||
url="Agencies"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="AgencyList"
|
||||
url="Agencies"
|
||||
order="name"
|
||||
:expr-builder="exprBuilder"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
:id="row.id"
|
||||
:key="row.id"
|
||||
:title="row.name"
|
||||
@click="navigate(row.id)"
|
||||
v-for="row of rows"
|
||||
>
|
||||
<template #list-items>
|
||||
<QCheckbox
|
||||
:label="t('isOwn')"
|
||||
v-model="row.isOwn"
|
||||
:disable="true"
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('isAnyVolumeAllowed')"
|
||||
v-model="row.isAnyVolumeAllowed"
|
||||
:disable="true"
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id)"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openSummary')"
|
||||
@click.stop="viewSummary(row.id, CustomerSummary)"
|
||||
color="primary"
|
||||
style="margin-top: 15px"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
</template>
|
||||
<i18n>
|
||||
es:
|
||||
isOwn: Tiene propietario
|
||||
isAnyVolumeAllowed: Permite cualquier volumen
|
||||
Search agency: Buscar agencia
|
||||
You can search by name: Puedes buscar por nombre
|
||||
en:
|
||||
isOwn: Has owner
|
||||
isAnyVolumeAllowed: Allows any volume
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useRoute } from 'vue-router';
|
||||
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')"
|
||||
/>
|
||||
</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>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<script setup>
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import CardList from 'src/components/ui/CardList.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const router = useRouter();
|
||||
function navigate(id) {
|
||||
router.push({ path: `/agencies/${id}` });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="AgencyList"
|
||||
url="agencies"
|
||||
limit="20"
|
||||
order-by="name"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
:id="row.id"
|
||||
:key="row.id"
|
||||
:title="row.name"
|
||||
@click="navigate(row.id)"
|
||||
v-for="row of rows"
|
||||
>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
</template>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
export default {
|
||||
path: '/agency',
|
||||
name: 'Agency',
|
||||
meta: {
|
||||
title: 'agency',
|
||||
icon: 'garage_home',
|
||||
moduleName: 'Agency',
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'AgencyCard' },
|
||||
menus: {
|
||||
main: [],
|
||||
card: ['AgencyBasicData', 'AgencyLog'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/agency/:id',
|
||||
name: 'AgencyCard',
|
||||
component: () => import('src/pages/Agency/Card/AgencyCard.vue'),
|
||||
redirect: { name: 'AgencySummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'AgencySummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'view_list',
|
||||
},
|
||||
component: () => import('src/pages/Agency/Card/AgencySummary.vue'),
|
||||
},
|
||||
{
|
||||
name: 'AgencyBasicData',
|
||||
path: 'basic-data',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('pages/Agency/Card/AgencyBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'AgencyLog',
|
||||
path: 'log',
|
||||
meta: {
|
||||
title: 'log',
|
||||
icon: 'history',
|
||||
},
|
||||
component: () => import('src/pages/Agency/Card/AgencyLog.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'RouteMain' },
|
||||
menus: {
|
||||
main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList', 'agencyList'],
|
||||
main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList', 'AgencyList'],
|
||||
card: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -21,15 +21,6 @@ export default {
|
|||
component: () => import('src/pages/Route/RouteMain.vue'),
|
||||
redirect: { name: 'RouteList' },
|
||||
children: [
|
||||
{
|
||||
path: 'agency',
|
||||
name: 'agencyList',
|
||||
meta: {
|
||||
title: 'agencyList',
|
||||
icon: 'package',
|
||||
},
|
||||
component: () => import('src/pages/Route/Agency/AgencyList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
name: 'RouteList',
|
||||
|
|
@ -83,6 +74,21 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Route/Cmr/CmrList.vue'),
|
||||
},
|
||||
{
|
||||
path: '/agency',
|
||||
redirect: { name: 'agencyList' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'AgencyList',
|
||||
meta: {
|
||||
title: 'agencyList',
|
||||
icon: 'view_list',
|
||||
},
|
||||
component: () => import('src/pages/Agency/AgencyList.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue