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

closes #4834 create-worker-module #28

Merged
joan merged 27 commits from 4834-create-worker-module into dev 2023-03-08 09:54:59 +00:00
Conversation 0 Commits 27 Files Changed 33 +411 -171
12 changed files with 411 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 770d699304 - Show all commits

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

@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import ClaimDescriptor from './ClaimDescriptor.vue'; import ClaimDescriptor from './ClaimDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar <VnSearchbar
data-key="ClaimList" data-key="ClaimList"
:label="t('Search claim')" :label="t('Search claim')"
:info="t('You can search by claim id or customer name')" :info="t('You can search by claim id or customer name')"
/> />
</teleport-slot> </Teleport>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<claim-descriptor /> <claim-descriptor />

50
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -1,22 +1,20 @@
<script setup> <script setup>
import { ref, computed } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { ref, computed } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'composables/useSession';
import VnConfirm from 'components/ui/VnConfirm.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
const router = useRouter(); const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore();
const session = useSession(); const session = useSession();
const token = session.getToken(); const token = session.getToken();
const quasar = useQuasar();
const claimId = computed(() => router.currentRoute.value.params.id); const claimId = computed(() => router.currentRoute.value.params.id);
@ -239,7 +237,11 @@ function onDrag() {
</div> </div>
</div> </div>
<teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend"> <Teleport
to="#actions-prepend"
v-if="stateStore.isHeaderMounted()"
:disabled="quasar.platform.is.mobile"
>
<div class="row q-gutter-x-sm"> <div class="row q-gutter-x-sm">
<label for="fileInput"> <label for="fileInput">
<q-btn <q-btn
@ -262,9 +264,9 @@ function onDrag() {
</label> </label>
<q-separator vertical /> <q-separator vertical />
</div> </div>
</teleport-slot> </Teleport>
<teleport-slot to=".q-footer"> <q-page-sticky expand position="bottom" :offset="[0, 0]">
<q-tabs align="justify" inline-label narrow-indicator> <q-tabs align="justify" inline-label narrow-indicator>
<q-tab <q-tab
@click="inputFile.nativeEl.click()" @click="inputFile.nativeEl.click()"
@ -282,7 +284,31 @@ function onDrag() {
<q-tooltip bottom> {{ t('globals.add') }} </q-tooltip> <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
</q-tab> </q-tab>
</q-tabs> </q-tabs>
</teleport-slot> </q-page-sticky>
<!-- <Teleport
v-if="stateStore.isHeaderMounted()"
to=".q-footer"
:disabled="!quasar.platform.is.mobile"
>
<q-tabs align="justify" inline-label narrow-indicator>
<q-tab
@click="inputFile.nativeEl.click()"
icon="add_circle"
:label="t('globals.add')"
>
<q-input
ref="inputFile"
type="file"
style="display: none"
multiple
v-model="files"
@update:model-value="create()"
/>
<q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
</q-tab>
</q-tabs>
</Teleport> -->
<!-- MULTIMEDIA DIALOG START--> <!-- MULTIMEDIA DIALOG START-->
<q-dialog <q-dialog

49
src/pages/Claim/ClaimList.vue
View File

@ -3,12 +3,11 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index'; import { toDate } from 'filters/index';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'components/PaginateData.vue';
import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue'; import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue'; import CustomerDescriptorPopover from 'pages/Customer/Card/CustomerDescriptorPopover.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import ClaimFilter from './ClaimFilter.vue'; import ClaimFilter from './ClaimFilter.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -37,22 +36,30 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <template v-if="stateStore.isHeaderMounted()">
<VnSearchbar <Teleport to="#searchbar">
data-key="ClaimList" <VnSearchbar
:label="t('Search claim')" data-key="ClaimList"
:info="t('You can search by claim id or customer name')" :label="t('Search claim')"
/> :info="t('You can search by claim id or customer name')"
</teleport-slot> />
<teleport-slot to="#actions-append"> </Teleport>
<div class="row q-gutter-x-sm"> <Teleport to="#actions-append">
<q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> <div class="row q-gutter-x-sm">
<q-tooltip bottom anchor="bottom right"> <q-btn
{{ t('globals.collapseMenu') }} flat
</q-tooltip> @click="stateStore.toggleRightDrawer()"
</q-btn> round
</div> dense
</teleport-slot> icon="menu"
>
<q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</q-tooltip>
</q-btn>
</div>
</Teleport>
</template>
<q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<ClaimFilter data-key="ClaimList" /> <ClaimFilter data-key="ClaimList" />

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

@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import CustomerDescriptor from './CustomerDescriptor.vue'; import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar <VnSearchbar
data-key="CustomerList" data-key="CustomerList"
:label="t('Search customer')" :label="t('Search customer')"
:info="t('You can search by customer id or name')" :info="t('You can search by customer id or name')"
/> />
</teleport-slot> </Teleport>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<CustomerDescriptor /> <CustomerDescriptor />

41
src/pages/Customer/CustomerList.vue
View File

@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue'; import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import CustomerFilter from './CustomerFilter.vue'; import CustomerFilter from './CustomerFilter.vue';
@ -29,22 +28,30 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <template v-if="stateStore.isHeaderMounted()">
<VnSearchbar <Teleport to="#searchbar">
data-key="CustomerList" <VnSearchbar
:label="t('Search customer')" data-key="CustomerList"
:info="t('You can search by customer id or name')" :label="t('Search customer')"
/> :info="t('You can search by customer id or name')"
</teleport-slot> />
<teleport-slot to="#actions-append"> </Teleport>
<div class="row q-gutter-x-sm"> <Teleport to="#actions-append">
<q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> <div class="row q-gutter-x-sm">
<q-tooltip bottom anchor="bottom right"> <q-btn
{{ t('globals.collapseMenu') }} flat
</q-tooltip> @click="stateStore.toggleRightDrawer()"
</q-btn> round
</div> dense
</teleport-slot> icon="menu"
>
<q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</q-tooltip>
</q-btn>
</div>
</Teleport>
</template>
<q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<CustomerFilter data-key="CustomerList" /> <CustomerFilter data-key="CustomerList" />

5
src/pages/InvoiceOut/Card/InvoiceOutCard.vue
View File

@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue'; import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar <VnSearchbar
data-key="InvoiceOutList" data-key="InvoiceOutList"
:label="t('Search invoice')" :label="t('Search invoice')"
:info="t('You can search by invoice reference')" :info="t('You can search by invoice reference')"
/> />
</teleport-slot> </Teleport>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<InvoiceOutDescriptor /> <InvoiceOutDescriptor />

41
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -7,7 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue'; import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
import { toDate, toCurrency } from 'src/filters/index'; import { toDate, toCurrency } from 'src/filters/index';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue'; import InvoiceOutFilter from './InvoiceOutFilter.vue';
@ -34,22 +33,30 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <template v-if="stateStore.isHeaderMounted()">
<VnSearchbar <Teleport to="#searchbar">
data-key="InvoiceOutList" <VnSearchbar
:label="t('Search invoice')" data-key="InvoiceOutList"
:info="t('You can search by invoice reference')" :label="t('Search invoice')"
/> :info="t('You can search by invoice reference')"
</teleport-slot> />
<teleport-slot to="#actions-append"> </Teleport>
<div class="row q-gutter-x-sm"> <Teleport to="#actions-append">
<q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> <div class="row q-gutter-x-sm">
<q-tooltip bottom anchor="bottom right"> <q-btn
{{ t('globals.collapseMenu') }} flat
</q-tooltip> @click="stateStore.toggleRightDrawer()"
</q-btn> round
</div> dense
</teleport-slot> icon="menu"
>
<q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</q-tooltip>
</q-btn>
</div>
</Teleport>
</template>
<q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<InvoiceOutFilter data-key="InvoiceOutList" /> <InvoiceOutFilter data-key="InvoiceOutList" />

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

@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import TicketDescriptor from './TicketDescriptor.vue'; import TicketDescriptor from './TicketDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar <VnSearchbar
data-key="TicketList" data-key="TicketList"
:label="t('Search ticket')" :label="t('Search ticket')"
:info="t('You can search by ticket id or alias')" :info="t('You can search by ticket id or alias')"
/> />
</teleport-slot> </Teleport>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<TicketDescriptor /> <TicketDescriptor />

42
src/pages/Ticket/TicketList.vue
View File

@ -7,8 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import { toDate, toCurrency } from 'src/filters/index'; import { toDate, toCurrency } from 'src/filters/index';
import TicketSummaryDialog from './Card/TicketSummaryDialog.vue'; import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import TicketFilter from './TicketFilter.vue'; import TicketFilter from './TicketFilter.vue';
@ -71,22 +69,30 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <template v-if="stateStore.isHeaderMounted()">
<VnSearchbar <Teleport to="#searchbar">
data-key="TicketList" <VnSearchbar
:label="t('Search ticket')" data-key="TicketList"
:info="t('You can search by ticket id or alias')" :label="t('Search ticket')"
/> :info="t('You can search by ticket id or alias')"
</teleport-slot> />
<teleport-slot to="#actions-append"> </Teleport>
<div class="row q-gutter-x-sm"> <Teleport to="#actions-append">
<q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> <div class="row q-gutter-x-sm">
<q-tooltip bottom anchor="bottom right"> <q-btn
{{ t('globals.collapseMenu') }} flat
</q-tooltip> @click="stateStore.toggleRightDrawer()"
</q-btn> round
</div> dense
</teleport-slot> icon="menu"
>
<q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</q-tooltip>
</q-btn>
</div>
</Teleport>
</template>
<q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<TicketFilter data-key="TicketList" /> <TicketFilter data-key="TicketList" />

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

@ -1,13 +1,21 @@
<script setup> <script setup>
// import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import WorkerDescriptor from './WorkerDescriptor.vue'; import WorkerDescriptor from './WorkerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
// const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<VnSearchbar
data-key="WorkerList"
:label="t('Search worker')"
:info="t('You can search by worker id or name')"
/>
</Teleport>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256"> <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<WorkerDescriptor /> <WorkerDescriptor />
@ -21,3 +29,9 @@ const stateStore = useStateStore();
</q-page> </q-page>
</q-page-container> </q-page-container>
</template> </template>
<i18n>
es:
Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador
</i18n>

121
src/pages/Worker/WorkerFilter.vue Normal file
View File

@ -0,0 +1,121 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const departments = ref();
</script>
<template>
<fetch-data url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<q-list dense>
<q-item>
<q-item-section>
<q-input :label="t('FI')" v-model="params.fi" lazy-rules>
<template #prepend>
<q-icon name="badge" size="sm"></q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
:label="t('First Name')"
v-model="params.firstName"
lazy-rules
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
:label="t('Last Name')"
v-model="params.lastName"
lazy-rules
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
:label="t('User Name')"
v-model="params.userName"
lazy-rules
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section v-if="!departments">
<q-skeleton type="QInput" class="full-width" />
</q-item-section>
<q-item-section v-if="departments">
<q-select
:label="t('Department')"
v-model="params.departmentFk"
@update:model-value="searchFn()"
:options="departments"
option-value="id"
option-label="name"
emit-value
map-options
use-input
:input-debounce="0"
/>
</q-item-section>
</q-item>
<q-item class="q-mb-md">
<q-item-section>
<q-input
:label="t('Extension')"
v-model="params.extension"
lazy-rules
/>
</q-item-section>
</q-item>
</q-list>
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
search: Contains
fi: FI
firstName: First name
lastName: Last name
userName: User
extension: Extension
es:
params:
search: Contiene
fi: NIF
firstName: Nombre
lastName: Apellidos
userName: Usuario
extension: Extensión
FI: NIF
First Name: Nombre
Last Name: Apellidos
User Name: Usuario
Department: Departamento
Extension: Extensión
</i18n>

200
src/pages/Worker/WorkerList.vue
View File

@ -2,9 +2,14 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue'; import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import WorkerFilter from './WorkerFilter.vue';
const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
@ -24,77 +29,128 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<q-page class="q-pa-md"> <template v-if="stateStore.isHeaderMounted()">
<paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load> <Teleport to="#searchbar">
<template #body="{ rows }"> <VnSearchbar
<q-card class="card" v-for="row of rows" :key="row.id"> data-key="WorkerList"
<q-item :label="t('Search worker')"
class="q-pa-none items-start cursor-pointer q-hoverable" :info="t('You can search by worker id or name')"
v-ripple />
clickable </Teleport>
> <Teleport to="#actions-append">
<q-item-section class="q-pa-md" @click="navigate(row.id)"> <div class="row q-gutter-x-sm">
<q-item-label class="text-h6"> <q-btn
{{ row.nickname }} flat
</q-item-label> @click="stateStore.toggleRightDrawer()"
<q-item-label caption>#{{ row.id }}</q-item-label> round
<q-list> dense
<q-item class="q-pa-none"> icon="menu"
<q-item-section> >
<q-item-label caption> <q-tooltip bottom anchor="bottom right">
{{ t('worker.list.name') }} {{ t('globals.collapseMenu') }}
</q-item-label> </q-tooltip>
<q-item-label>{{ row.userName }}</q-item-label> </q-btn>
</q-item-section> </div>
</q-item> </Teleport>
<q-item class="q-pa-none"> </template>
<q-item-section> <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<q-item-label caption> <q-scroll-area class="fit text-grey-8">
{{ t('worker.list.email') }} <WorkerFilter data-key="WorkerList" />
</q-item-label> </q-scroll-area>
<q-item-label>{{ row.email }}</q-item-label> </q-drawer>
</q-item-section> <q-page class="column items-center q-pa-md">
</q-item> <div class="card-list">
<q-item class="q-pa-none"> <paginate
<q-item-section> data-key="WorkerList"
<q-item-label caption>{{ url="Workers/filter"
t('worker.list.department') order="id DESC"
}}</q-item-label> auto-load
<q-item-label> >
{{ row.department }} <template #body="{ rows }">
</q-item-label> <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
</q-item-section> <q-item
</q-item> class="q-pa-none items-start cursor-pointer q-hoverable"
</q-list> v-ripple
</q-item-section> clickable
<q-separator vertical /> >
<q-card-actions vertical class="justify-between"> <q-item-section class="q-pa-md" @click="navigate(row.id)">
<q-btn <q-item-label class="text-h6">
flat {{ row.nickname }}
round </q-item-label>
color="primary" <q-item-label caption>#{{ row.id }}</q-item-label>
icon="arrow_circle_right" <q-list>
@click="navigate(row.id)" <q-item class="q-pa-none">
> <q-item-section>
<q-tooltip> <q-item-label caption>
{{ t('components.smartCard.openCard') }} {{ t('worker.list.name') }}
</q-tooltip> </q-item-label>
</q-btn> <q-item-label>{{
<q-btn row.userName
flat }}</q-item-label>
round </q-item-section>
color="grey-7" </q-item>
icon="preview" <q-item class="q-pa-none">
@click="viewSummary(row.id)" <q-item-section>
> <q-item-label caption>
<q-tooltip>{{ {{ t('worker.list.email') }}
t('components.smartCard.openSummary') </q-item-label>
}}</q-tooltip> <q-item-label>{{ row.email }}</q-item-label>
</q-btn> </q-item-section>
</q-card-actions> </q-item>
</q-item> <q-item class="q-pa-none">
</q-card> <q-item-section>
</template> <q-item-label caption>{{
</paginate> t('worker.list.department')
}}</q-item-label>
<q-item-label>
{{ row.department }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<q-btn
flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<q-tooltip>
{{ t('components.smartCard.openCard') }}
</q-tooltip>
</q-btn>
<q-btn
flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<q-tooltip>{{
t('components.smartCard.openSummary')
}}</q-tooltip>
</q-btn>
</q-card-actions>
</q-item>
</q-card>
</template>
</paginate>
</div>
</q-page> </q-page>
</template> </template>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
</style>
<i18n>
es:
Search worker: Buscar trabajador
You can search by worker id or name: Puedes buscar por id o nombre del trabajador
</i18n>