github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-31 11:58:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Persist current page in layout query

Browse Source 
Fixes #3644
This commit is contained in:
rijkvanzanten
2021-01-13 15:32:08 -05:00
parent c2606d101a
commit d4b4e673a9
2 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/src/layouts/cards/cards.vue
View File

@@ -160,6 +160,7 @@ type layoutQuery = {
fields?: string[];
sort?: string;
limit?: number;
page?: number;
};
export default defineComponent({
@@ -349,10 +350,43 @@ export default defineComponent({
}
function uselayoutQuery() {
const page = ref(1);
const page = computed({
get() {
return _layoutQuery.value?.page || 1;
},
set(newPage: number) {
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: newPage,
};
},
});
const sort = createlayoutQueryOption<string>('sort', fieldsInCollection.value[0].field);
const limit = createlayoutQueryOption<number>('limit', 25);
const sort = computed({
get() {
return _layoutQuery.value?.sort || fieldsInCollection.value[0].field;
},
set(newSort: string) {
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: 1,
sort: newSort,
};
},
});
const limit = computed({
get() {
return _layoutQuery.value?.limit || 25;
},
set(newLimit: number) {
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: 1,
limit: newLimit,
};
},
});
const fields = computed<string[]>(() => {
if (!primaryKeyField.value) return [];
@@ -393,21 +427,6 @@ export default defineComponent({
});
return { sort, limit, page, fields };
function createlayoutQueryOption<T>(key: keyof layoutQuery, defaultValue: any) {
return computed<T>({
get() {
return _layoutQuery.value?.[key] || defaultValue;
},
set(newValue: T) {
page.value = 1;
_layoutQuery.value = {
..._layoutQuery.value,
[key]: newValue,
};
},
});
}
}
function getLinkForItem(item: Record<string, any>) {

42
app/src/layouts/tabular/tabular.vue
View File

@@ -113,12 +113,7 @@
<div v-if="loading === false && items.length >= 25" class="per-page">
<span>{{ $t('per_page') }}</span>
<v-select
@input="limit = +$event"
:value="`${limit}`"
:items="['25', '50', '100', '250']"
inline
/>
<v-select @input="limit = +$event" :value="`${limit}`" :items="['25', '50', '100', '250']" inline />
</div>
</div>
</template>
@@ -324,22 +319,26 @@ export default defineComponent({
}
function useItemOptions() {
const page = ref(1);
watch(
() => props.collection,
() => (page.value = 1),
{ immediate: true }
);
const page = computed({
get() {
return _layoutQuery.value?.page || 1;
},
set(newPage: number) {
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: newPage,
};
},
});
const sort = computed({
get() {
return _layoutQuery.value?.sort || primaryKeyField.value?.field;
},
set(newSort: string) {
page.value = 1;
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: 1,
sort: newSort,
};
},
@@ -347,12 +346,12 @@ export default defineComponent({
const limit = computed({
get() {
return _layoutOptions.value?.limit || 25;
return _layoutQuery.value?.limit || 25;
},
set(newLimit: number) {
page.value = 1;
_layoutOptions.value = {
...(_layoutOptions.value || {}),
_layoutQuery.value = {
...(_layoutQuery.value || {}),
page: 1,
limit: newLimit,
};
},
@@ -370,8 +369,7 @@ export default defineComponent({
if (Array.isArray(_layoutQuery.value.fields)) return _layoutQuery.value.fields;
}
const fields =
_layoutQuery.value?.fields || fieldsInCollection.value.slice(0, 4).map(({ field }) => field);
const fields = _layoutQuery.value?.fields || fieldsInCollection.value.slice(0, 4).map(({ field }) => field);
return fields;
},
@@ -438,9 +436,7 @@ export default defineComponent({
type: field.type,
field: field.field,
},
sortable:
['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) ===
false,
sortable: ['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) === false,
}));
},
set(val) {