forked from verdnatura/salix-front
Changes
This commit is contained in:
parent
97a5600841
commit
1b998d453d
|
|
@ -1,6 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { useArrayData } from 'composables/useArrayData';
|
||||||
|
|
||||||
// const props = defineProps({
|
// const props = defineProps({
|
||||||
// id: {
|
// id: {
|
||||||
// type: String,
|
// type: String,
|
||||||
|
|
@ -8,33 +10,103 @@ import { useArrayData } from 'composables/useArrayData';
|
||||||
// },
|
// },
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
const arrayData = useArrayData('customers');
|
const arrayData = useArrayData('customers');
|
||||||
const searchText = ref('');
|
|
||||||
|
const searchPanel = ref();
|
||||||
|
const searchParams = ref({});
|
||||||
const searchBackdrop = ref(false);
|
const searchBackdrop = ref(false);
|
||||||
|
|
||||||
async function search({ userParams }) {
|
async function search({ userParams }) {
|
||||||
//const params = userParams;
|
if (userParams) Object.assign(searchParams.value, userParams.value);
|
||||||
const params = userParams.value;
|
|
||||||
await arrayData.apply({ params });
|
await arrayData.apply({ params: searchParams });
|
||||||
// searchPanel.value.hide();
|
|
||||||
|
searchPanel.value.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function remove(param) {
|
||||||
|
delete searchParams.value[param];
|
||||||
|
|
||||||
|
await search({ userParams: {} });
|
||||||
|
}
|
||||||
|
|
||||||
|
const tags = computed(() => {
|
||||||
|
const params = [];
|
||||||
|
|
||||||
|
for (const param in searchParams.value) {
|
||||||
|
params.push({
|
||||||
|
property: param,
|
||||||
|
label: param,
|
||||||
|
value: searchParams.value[param],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return params;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-form @submit="search">
|
<q-form @submit="search">
|
||||||
<q-input id="searchbar" v-model="searchText" label="Search" dark dense standout autofocus>
|
<q-input id="searchbar" v-model="searchParams.search" label="Search" dark dense standout autofocus>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<q-icon name="search" />
|
<q-icon name="search" />
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
|
<q-btn icon="label" flat dense>
|
||||||
|
<q-popup-proxy>
|
||||||
|
<q-card class="q-pa-md" style="max-width: 300px">
|
||||||
|
<div class="truncate-chip-labels">
|
||||||
|
<q-chip
|
||||||
|
v-for="chip of tags"
|
||||||
|
:key="chip.label"
|
||||||
|
@remove="remove(chip.property)"
|
||||||
|
icon="label"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
removable
|
||||||
|
>
|
||||||
|
<strong>{{ t(chip.label) }}: </strong>
|
||||||
|
<span>"{{ chip.value }}"</span>
|
||||||
|
</q-chip>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-btn>
|
||||||
<q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
|
<q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
|
||||||
<q-tooltip>Apply search filters</q-tooltip>
|
<q-tooltip>Apply search filters</q-tooltip>
|
||||||
<div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
|
<div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
|
||||||
<q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit>
|
<q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit>
|
||||||
<slot name="panel" :scope="{ search }" />
|
<q-card class="q-pa-md">
|
||||||
|
<div class="row truncate-chip-labels">
|
||||||
|
<q-chip
|
||||||
|
v-for="chip of tags"
|
||||||
|
:key="chip.label"
|
||||||
|
@remove="remove(chip.property)"
|
||||||
|
icon="label"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
removable
|
||||||
|
>
|
||||||
|
<strong>{{ t(chip.label) }}: </strong>
|
||||||
|
<span>"{{ chip.value }}"</span>
|
||||||
|
</q-chip>
|
||||||
|
</div>
|
||||||
|
<slot name="panel" :scope="{ search }" />
|
||||||
|
</q-card>
|
||||||
</q-popup-proxy>
|
</q-popup-proxy>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</q-form>
|
</q-form>
|
||||||
</template>
|
</template>
|
||||||
|
<i18n>
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"phone": "Phone"
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"phone": "Teléfono"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -67,9 +67,9 @@ export function useArrayData(key, userOptions) {
|
||||||
|
|
||||||
if (append === false) {
|
if (append === false) {
|
||||||
store.data = response.data;
|
store.data = response.data;
|
||||||
}
|
|
||||||
|
|
||||||
updateStateParams();
|
updateStateParams();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function request({ userFilter }) {
|
async function request({ userFilter }) {
|
||||||
|
|
@ -116,6 +116,9 @@ export function useArrayData(key, userOptions) {
|
||||||
order: store.order,
|
order: store.order,
|
||||||
limit: store.limit,
|
limit: store.limit,
|
||||||
skip: store.skip,
|
skip: store.skip,
|
||||||
|
params: [
|
||||||
|
'a'
|
||||||
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { useSession } from 'composables/useSession';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
|
||||||
|
const session = useSession();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
scope: {
|
scope: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -9,7 +12,9 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const token = session.getToken();
|
||||||
const userParams = ref({});
|
const userParams = ref({});
|
||||||
|
|
||||||
async function search() {
|
async function search() {
|
||||||
const searchFn = props.scope.search;
|
const searchFn = props.scope.search;
|
||||||
|
|
||||||
|
|
@ -35,124 +40,114 @@ function setWorkers(data) {
|
||||||
@on-fetch="setWorkers"
|
@on-fetch="setWorkers"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<q-card class="q-pa-md">
|
|
||||||
<q-form @submit="search" class="q-gutter-y-md">
|
<q-form @submit="search" class="q-gutter-y-md">
|
||||||
<!-- <div class="row truncate-chip-labels">
|
<div class="row q-gutter-x-md">
|
||||||
<q-chip
|
<div class="col">
|
||||||
v-for="chip of tags"
|
<q-input v-model="userParams.search" label="Search" hint="Search by id or name" lazy-rules autofocus />
|
||||||
:key="chip.label"
|
</div>
|
||||||
@remove="log('Icecream')"
|
</div>
|
||||||
icon="label"
|
<div class="row q-gutter-x-md">
|
||||||
color="primary"
|
<div class="col">
|
||||||
size="sm"
|
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
|
||||||
removable
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input label="Name" v-model="userParams.name" lazy-rules />
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input label="Social name" v-model="userParams.socialName" lazy-rules />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row q-gutter-x-md">
|
||||||
|
<div class="col">
|
||||||
|
<q-select
|
||||||
|
v-model="userParams.salesPersonFk"
|
||||||
|
:options="workers"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
label="Salesperson"
|
||||||
|
map-options
|
||||||
|
use-input
|
||||||
|
:input-debounce="0"
|
||||||
>
|
>
|
||||||
<strong>{{ chip.label }}: </strong>
|
<template #before>
|
||||||
<span>"{{ chip.value }}"</span>
|
<q-avatar color="orange">
|
||||||
</q-chip>
|
<q-img
|
||||||
</div> -->
|
v-if="userParams.salesPersonFk"
|
||||||
<div class="row q-gutter-x-md">
|
:src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
|
||||||
<div class="col">
|
spinner-color="white"
|
||||||
<q-input
|
/>
|
||||||
v-model="userParams.search"
|
</q-avatar>
|
||||||
label="Search"
|
</template>
|
||||||
hint="Search by id or name"
|
</q-select>
|
||||||
lazy-rules
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row q-gutter-x-md">
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="Name" v-model="userParams.name" lazy-rules />
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="Social name" v-model="userParams.socialName" lazy-rules />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row q-gutter-x-md">
|
<div class="row q-gutter-x-md">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-select
|
<q-input label="Phone" v-model="userParams.phone" lazy-rules />
|
||||||
v-model="userParams.salesPersonFk"
|
|
||||||
:options="workers"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
emit-value
|
|
||||||
label="Salesperson"
|
|
||||||
map-options
|
|
||||||
use-input
|
|
||||||
:input-debounce="0"
|
|
||||||
>
|
|
||||||
<template #before>
|
|
||||||
<q-avatar color="orange">
|
|
||||||
<q-img
|
|
||||||
v-if="userParams.salesPersonFk"
|
|
||||||
:src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
|
|
||||||
spinner-color="white"
|
|
||||||
/>
|
|
||||||
</q-avatar>
|
|
||||||
</template>
|
|
||||||
</q-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col">
|
||||||
<div class="row q-gutter-x-md">
|
<q-input label="Email" v-model="userParams.email" lazy-rules />
|
||||||
<div class="col">
|
|
||||||
<q-input label="Phone" v-model="userParams.phone" lazy-rules />
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="Email" v-model="userParams.email" lazy-rules />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row q-gutter-x-md">
|
<div class="row q-gutter-x-md">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-select
|
<q-select
|
||||||
label="Province"
|
label="Province"
|
||||||
v-model="userParams.provinceFk"
|
v-model="userParams.provinceFk"
|
||||||
:options="provinces"
|
:options="provinces"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
option-label="name"
|
option-label="name"
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="City" v-model="userParams.city" lazy-rules />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col">
|
||||||
<div class="row q-gutter-x-md">
|
<q-input label="City" v-model="userParams.city" lazy-rules />
|
||||||
<div class="col">
|
|
||||||
<q-select
|
|
||||||
label="Zone"
|
|
||||||
v-model="userParams.zoneFk"
|
|
||||||
:options="zones"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <q-input
|
<div class="row q-gutter-x-md">
|
||||||
|
<div class="col">
|
||||||
|
<q-select
|
||||||
|
label="Zone"
|
||||||
|
v-model="userParams.zoneFk"
|
||||||
|
:options="zones"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <q-input
|
||||||
label="Phone"
|
label="Phone"
|
||||||
hint="The customer phone"
|
hint="The customer phone"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[(val) => (val && val.length > 0) || 'Please type something']"
|
:rules="[(val) => (val && val.length > 0) || 'Please type something']"
|
||||||
/> -->
|
/> -->
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
|
<q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
|
||||||
</div>
|
</div>
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
<i18n>
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"phone": "Phone"
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"phone": "Teléfono"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
|
|
||||||
Loading…
Reference in New Issue