wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Searchbar

This commit is contained in:
Joan Sanchez 2023-01-14 13:48:57 +01:00
parent 20051d7246
commit a89856c5e0
6 changed files with 139 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/PaginateData.vue
View File

@ -26,15 +26,11 @@ const $props = defineProps({
type: Object,
default: null,
},
sortBy: {
order: {
type: String,
default: '',
},
limit: {
type: String,
default: '',
},
rowsPerPage: {
type: Number,
default: 10,
},
@ -47,8 +43,8 @@ const $props = defineProps({
const emit = defineEmits(['onFetch', 'onPaginate']);
const isLoading = ref(false);
const pagination = ref({
sortBy: $props.sortBy,
rowsPerPage: $props.rowsPerPage,
sortBy: $props.order,
rowsPerPage: $props.limit,
page: 1,
});
@ -56,8 +52,8 @@ const arrayData = useArrayData('customers', {
url: $props.url,
filter: $props.filter,
where: $props.where,
limit: $props.rowsPerPage,
order: $props.sortBy,
limit: $props.limit,
order: $props.order,
});
const store = arrayData.store;
@ -136,7 +132,7 @@ async function onLoad(...params) {
</div>
</div>
<div v-if="!store" class="card-list q-gutter-y-md">
<q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
<q-card class="card" v-for="$index in $props.limit" :key="$index">
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
<q-item-section class="q-pa-md">
<q-skeleton type="rect" class="q-mb-md" square />

78
src/composables/useArrayData.js
View File

@ -1,4 +1,5 @@
import { ref, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { useArrayDataStore } from 'stores/useArrayDataStore';
@ -12,18 +13,18 @@ export function useArrayData(key, userOptions) {
}
const store = arrayDataStore.get(key);
const filter = ref({});
const userFilter = ref({});
const userParams = ref({});
const hasMoreData = ref(true);
const options = ref({
limit: 10,
skip: 0,
});
const router = useRouter();
const route = useRoute();
const page = ref(1);
if (typeof userOptions === 'object') {
Object.assign(options.value, userOptions);
if (userOptions.url) store.url = userOptions.url;
if (userOptions.limit) store.limit = userOptions.limit;
if (userOptions.order) store.order = userOptions.order;
//Object.assign(store.value, userOptions);
//console.log(options.value);
}
// if (typeof userOptions === 'object' && userOptions.filter) {
@ -36,21 +37,22 @@ export function useArrayData(key, userOptions) {
});
async function fetch({ append = false }) {
if (!options.value.url) return;
if (!store.url) return;
const fetchFilter = {
order: options.value.order,
limit: options.value.limit,
skip: options.value.skip,
const filter = {
order: store.order,
limit: store.limit,
skip: store.skip,
};
Object.assign(fetchFilter, userFilter.value);
filter.value = fetchFilter;
Object.assign(filter, store.userFilter);
const requestOptions = { params: { filter: filter.value } };
const response = await axios.get(options.value.url, requestOptions);
store.filter = filter;
const { limit } = filter.value;
const requestOptions = { params: { filter: filter } };
const response = await axios.get(store.url, requestOptions);
const { limit } = filter;
hasMoreData.value = response.data.length === limit;
@ -61,11 +63,30 @@ export function useArrayData(key, userOptions) {
if (append === false) {
store.data = response.data;
}
updateStateParams();
}
async function request({ userFilter }) {
if (!store.url) return;
const filter = {
order: store.order,
limit: store.limit,
skip: store.skip,
};
Object.assign(filter, userFilter);
const requestOptions = { params: { filter: filter } };
const response = await axios.get(store.url, requestOptions);
return response.data;
}
async function apply({ filter, params }) {
if (filter) userFilter.value = filter;
if (params) userParams.value = params;
if (filter) store.userFilter = filter;
if (params) store.userParams = params;
await fetch({ append: false });
}
@ -73,22 +94,35 @@ export function useArrayData(key, userOptions) {
async function loadMore() {
if (!hasMoreData.value) return;
options.value.skip = options.value.limit * (page.value - 1);
store.skip = store.limit * (page.value - 1);
page.value += 1;
await fetch({ append: true });
}
async function refresh() {
// TODO
// TODO: Refresh
}
function updateStateParams() {
router.replace({
path: route.path,
query: {
order: store.order,
limit: store.limit,
skip: store.skip,
},
});
}
return {
fetch,
apply,
refresh,
request,
loadMore,
store,
hasMoreData,
updateStateParams,
};
}

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

@ -1,22 +1,14 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
import Paginate from 'src/components/PaginateData.vue';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import { useArrayData } from 'composables/useArrayData';
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const arrayData = useArrayData('customers', {
url: 'Clients',
});
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
@ -29,29 +21,11 @@ function viewSummary(id) {
},
});
}
const search = ref('');
async function doSearch() {
let filter = {};
if (search.value != '') {
filter = {
where: {
id: search,
},
};
}
await arrayData.apply({ filter });
}
</script>
<template>
<teleport-slot to="#searchbar">
<q-form @submit="doSearch">
<q-input v-model="search" label="Search" dense />
</q-form>
</teleport-slot>
<q-page class="q-pa-md">
<paginate url="/Clients" sort-by="id DESC" auto-load>
<paginate url="/Clients" order="id DESC" auto-load>
<template #body="{ rows }">
<q-card class="card" v-for="row of rows" :key="row.id">
<q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>

70
src/pages/Customer/CustomerMain.vue
View File

@ -1,12 +1,67 @@
<script setup>
import { useState } from 'src/composables/useState';
import { ref } from 'vue';
import { useState } from 'composables/useState';
import { useArrayData } from 'composables/useArrayData';
import LeftMenu from 'components/LeftMenu.vue';
// import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
const state = useState();
const arrayData = useArrayData('customers');
const search = ref('');
async function doSearch() {
let filter = {};
if (search.value != '') {
filter = {
where: {
id: search.value,
},
};
}
await arrayData.apply({ filter });
}
const searchRows = ref([])
async function pre(value) {
let filter = {};
if (value != '') {
filter = {
where: {
id: value,
},
};
}
console.log(filter)
const rows = await arrayData.request({ userFilter: filter });
searchRows.value = rows
}
</script>
<template>
<teleport-slot to="#searchbar">
<q-form @submit="doSearch">
<q-input id="searchbar" v-model="search" label="Search" @update:model-value="pre" dark dense standout>
<template #prepend>
<q-icon name="search" />
</template>
<template #append>
<q-btn icon="filter_alt" flat dense />
</template>
<q-popup-proxy v-if="searchRows.length === 1">
<q-list>
<q-item v-for="row of searchRows" :key="row.id" v-ripple clickable>
<q-item-section avatar>
<q-img src="http://localhost:9000/api/Images/user/160x160/9/download?access_token=qBo7qT6T24FasiG74QTfFZfXstxTVLZdmvHz7uqvhxpAG1G0dIF6RRGVeoS3NGiA" />
</q-item-section>
<q-item-section>
<q-item-label>{{ row.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-input>
</q-form>
</teleport-slot>
<!-- <teleport-slot to="#searchbar">
<q-select
ref="search"
@ -18,9 +73,8 @@ const state = useState();
color="black"
:stack-label="false"
label="Search or jump to..."
v-model="text"
:options="filteredOptions"
@filter="filter"
v-model="search"
@input-value="doSearch"
style="width: 400px"
>
<template #append>
@ -64,3 +118,9 @@ const state = useState();
<router-view></router-view>
</q-page-container>
</template>
<style lang="scss">
#searchbar {
width: 400px;
}
</style>

2
src/router/modules/customer.js
View File

@ -27,7 +27,7 @@ export default {
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/Customer/CustomerList.vue'),
component: () => import('src/pages/Customer/CustomerList.vue')
},
{
path: 'create',

11
src/stores/useArrayDataStore.js
View File

@ -9,7 +9,16 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
}
function set(key) {
state.value[key] = { data: ref([]) };
state.value[key] = {
filter: {},
userFilter: {},
userParams: {},
url: '',
limit: 10,
skip: 0,
order: '',
data: ref([])
};
}
function clear(key) {