github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 13:08:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix unexpected camera update and unavailable clustering option in map (#9615)

Browse Source 
* Fix unexpected camera update and unavailable clustering option in map layout.

* lint warning

* Use defaultSort ref instead of value.

Co-authored-by: Azri Kahar <azrikahar@outlook.com>
This commit is contained in:
Oreille
2021-11-09 17:03:27 +01:00
committed by GitHub
parent b1494e8a22
commit ce97a40271
5 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/layouts/cards/index.ts
View File

@@ -171,7 +171,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
const page = syncRefProperty(layoutQuery, 'page', 1);
const limit = syncRefProperty(layoutQuery, 'limit', 25);
const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
const sort = syncRefProperty(layoutQuery, 'sort', defaultSort.value);
const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
const fields = computed<string[]>(() => {
if (!primaryKeyField.value || !props.collection) return [];

8
app/src/layouts/map/index.ts
View File

@@ -46,9 +46,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
const page = syncRefProperty(layoutQuery, 'page', 1);
const limit = syncRefProperty(layoutQuery, 'limit', 1000);
const sort = syncRefProperty(layoutQuery, 'sort', () =>
primaryKeyField.value ? [primaryKeyField.value?.field] : []
);
const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
const locationFilter = ref<Filter>();
@@ -105,10 +104,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
}
const geometryField = field.field;
const geometryFormat = isGeometryFieldNative.value ? 'native' : field.meta?.options?.geometryFormat;
const geometryType = field.schema?.geometry_type ?? field.meta?.options?.geometryType;
if (!geometryFormat) {
return;
}
return { geometryField, geometryFormat };
return { geometryField, geometryFormat, geometryType };
});
const template = computed(() => {

28
app/src/layouts/map/map.vue
View File

@@ -18,13 +18,15 @@
@updateitempopup="updateItemPopup"
/>
<div
v-if="itemPopup.item"
class="popup"
:style="{ top: itemPopup.position.y + 'px', left: itemPopup.position.x + 'px' }"
>
<render-template :template="template" :item="itemPopup.item" :collection="collection" />
</div>
<transition name="fade">
<div
v-if="itemPopup.item"
class="popup"
:style="{ top: itemPopup.position.y + 'px', left: itemPopup.position.x + 'px' }"
>
<render-template :template="template" :item="itemPopup.item" :collection="collection" />
</div>
</transition>
<transition name="fade">
<v-info v-if="error" type="danger" :title="t('unexpected_error')" icon="error" center>
@@ -200,7 +202,7 @@ export default defineComponent({
default: () => undefined,
},
itemPopup: {
type: [String, Number],
type: Object as PropType<{ item?: any; position?: { x: number; y: number } }>,
default: () => undefined,
},
updateItemPopup: {
@@ -338,4 +340,14 @@ export default defineComponent({
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity var(--medium) var(--transition);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

5
app/src/layouts/tabular/index.ts
View File

@@ -142,9 +142,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
function useItemOptions() {
const page = syncRefProperty(layoutQuery, 'page', 1);
const limit = syncRefProperty(layoutQuery, 'limit', 25);
const sort = syncRefProperty(layoutQuery, 'sort', () =>
primaryKeyField.value ? [primaryKeyField.value?.field] : []
);
const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
const fields = syncRefProperty(layoutQuery, 'fields', () =>
fieldsInCollection.value

11
app/src/utils/sync-ref-property.ts
View File

@@ -1,12 +1,11 @@
import { isFunction } from 'lodash';
import { computed, Ref } from 'vue';
import { computed, Ref, unref } from 'vue';
export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T] | (() => R[T])) {
export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T] | Ref<R[T]>) {
return computed<R[T]>({
get: () => {
return ref.value?.[key] ?? (isFunction(defaultValue) ? defaultValue() : defaultValue);
get() {
return ref.value?.[key] ?? unref(defaultValue);
},
set: (value: R[T]) => {
set(value: R[T]) {
ref.value = Object.assign({}, ref.value, { [key]: value }) as R;
},
});