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

refs #5673 feat: create VnSelectFilter
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Alex Moreno 2023-08-02 15:15:23 +02:00
parent 92e914adad
commit 0cb925abc3
3 changed files with 74 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/common/VnSelectFilter.vue Normal file
View File

@ -0,0 +1,58 @@
<script setup>
import { ref, watch, toRefs } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({
modelValue: {
type: [String, Number],
default: null,
},
options: {
type: Array,
default: () => [],
},
optionLabel: {
type: String,
default: '',
},
});
const updateValue = (newValue) => emit('update:modelValue', newValue);
const updateOptions = (newValue) => emit('update:options', newValue);
const { modelValue } = toRefs($props);
function filterFn(val, update) {
update(
() => {
const needle = val.toLowerCase();
console.log($props.options);
// $props.options.value = options.value.filter(
// (v) => v[$props.optionLabel.value].toLowerCase().indexOf(needle) > -1
// );
updateOptions(
$props.options.filter(
(v) => v[$props.optionLabel].toLowerCase().indexOf(needle) > -1
)
);
},
(ref) => {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
);
}
</script>
<template>
<QSelect
v-model="modelValue"
@update:model-value="updateValue"
:options="options"
:option-label="optionLabel"
v-bind="$attrs"
emit-value
map-options
use-input
@filter="(value, update) => filterFn(value, update)"
/>
</template>

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

@ -64,6 +64,7 @@ onMounted(async () => {
</QScrollArea>
</QDrawer>
<QPageContainer>
<div id="sub-toolbar"></div>
<QPage class="q-pa-md">
<RouterView></RouterView>
</QPage>

111
src/pages/Claim/Card/ClaimDevelopment.vue
View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
const route = useRoute();
const { t } = useI18n();
@ -87,66 +88,6 @@ const columns = computed(() => [
optionLabel: 'description',
},
]);
// function filterFn(val, update) {
// if (val === '') {
// update(() => {
// options.value = stringOptions;
// });
// return;
// }
// update(() => {
// const needle = val.toLowerCase();
// options.value = stringOptions.filter((v) => v.toLowerCase().indexOf(needle) > -1);
// });
// }
// const basicFilter = () => {
// return {
// options: claimReasons,
// filterFn: (options, value) => {
// console.log('ENTRY', value);
// const search = value.toLowerCase();
// if (value === '') return claimReasons.value;
// const arr = options.value.filter((row) => {
// const id = row.id;
// const name = row.description.toLowerCase();
// console.log('SEARCH', search, id);
// const idMatches = id == search;
// const nameMatches = name.indexOf(search) > -1;
// return idMatches || nameMatches;
// });
// console.log(arr);
// return arr;
// },
// };
// };
const basicFilter = (options, field) => {
console.log(options, field);
return {
options,
field,
filterFn: (options, value, field) => {
const search = value.toLowerCase();
if (value === '') return options;
return options.value.filter((row) => {
console.log(row);
const id = row.id;
const name = row[field ?? 'name'].toLowerCase();
const idMatches = id == search;
const nameMatches = name.indexOf(search) > -1;
return idMatches || nameMatches;
});
},
};
};
</script>
<template>
<FetchData
@ -189,7 +130,7 @@ const basicFilter = (options, field) => {
ref="claimDevelopmentForm"
:data-required="{ claimFk: route.params.id }"
>
<template #form="{ data, filter }">
<template #form="{ data }">
<QTable
:columns="columns"
:rows="data"
@ -202,23 +143,12 @@ const basicFilter = (options, field) => {
>
<template #body-cell="{ row, col }">
<QTd auto-width>
<QSelect
<VnSelectFilter
:label="col.label"
v-model="row[col.model]"
:options="col.options"
:option-value="col.optionValue"
:option-label="col.optionLabel"
emit-value
map-options
use-input
@filter="
(value, update) =>
filter(
value,
update,
basicFilter(col.options, col.optionLabel)
)
"
/>
</QTd>
</template>
@ -232,27 +162,13 @@ const basicFilter = (options, field) => {
<QList dense>
<QItem v-for="col in props.cols" :key="col.name">
<QItemSection>
<QSelect
<VnSelectFilter
:label="col.label"
v-model="props.row[col.model]"
:options="col.options"
:option-value="col.optionValue"
:option-label="col.optionLabel"
emit-value
map-options
use-input
dense
@filter="
(value, update) =>
filter(
value,
update,
basicFilter(
col.options,
col.optionLabel
)
)
"
/>
</QItemSection>
</QItem>
@ -265,14 +181,17 @@ const basicFilter = (options, field) => {
</FormModel>
</div>
</div>
<QPageSticky position="bottom-right" :offset="[25, 100]">
<QBtn
fab
color="primary"
icon="delete"
@click="claimDevelopmentForm.remove(selected)"
/>
</QPageSticky>
<Teleport to="#sub-toolbar">
<QToolbar class="bg-dark text-white justify-end">
<div class="row q-gutter-x-sm">
<QBtn
color="primary"
icon="delete"
@click="claimDevelopmentForm.remove(selected)"
/>
</div>
</QToolbar>
</Teleport>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
</QPageSticky>