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

Fix field configuration view not updating when navigating between different fields in New Field drawer (#17254)

Browse Source 
* Fix field configuration view not updating when navigating between different fields in New Field drawer

* Used Vue toRef instead of computed as per the feedback

* Make type reactive too

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Jay Bharadia
2023-01-23 23:35:25 +05:30
committed by GitHub
parent 61cbb0b7f8
commit b13efb61ef
2 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/composables/use-extension.ts
View File

@@ -4,16 +4,13 @@ import { useExtensions } from '@/extensions';
import { pluralize } from '@directus/shared/utils';
export function useExtension<T extends AppExtensionType | HybridExtensionType>(
type: T,
type: T | Ref<T>,
name: string | Ref<string | null>
): Ref<AppExtensionConfigs[Plural<T>][number] | null> {
const extensions = useExtensions();
return computed(() => {
const nameRaw = unref(name);
if (nameRaw === null) return null;
return (extensions[pluralize(type)].value as any[]).find(({ id }) => id === nameRaw) ?? null;
if (unref(name) === null) return null;
return (extensions[pluralize(unref(type))].value as any[]).find(({ id }) => id === unref(name)) ?? null;
});
}

5
app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
View File

@@ -25,7 +25,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import { defineComponent, PropType, computed, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import { useFieldDetailStore } from '../store';
import { storeToRefs } from 'pinia';
@@ -69,8 +69,9 @@ export default defineComponent({
const fieldDetailStore = useFieldDetailStore();
const { collection, field } = storeToRefs(fieldDetailStore);
const { extension, type } = toRefs(props);
const extensionInfo = useExtension(props.type, props.extension);
const extensionInfo = useExtension(type, extension);
const usesCustomComponent = computed(() => {
if (!extensionInfo.value) return false;