fix(front): fix tag loading

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-12-05 08:28:11 +01:00
parent c4d2ec69ad
commit f81472e081
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 14 additions and 36 deletions

View file

@ -1,7 +1,7 @@
<template>
<Story>
<Variant title="new">
<TagInput v-model="tags" :fetch-tags="fetchTags" />
<TagInput v-model="tags" />
</Variant>
<!-- <Variant title="small">
<TagInput v-model="tags" />
@ -15,9 +15,4 @@ import { reactive } from "vue";
import TagInput from "./TagInput.vue";
const tags = reactive<ITag[]>([{ title: "Hello", slug: "hello" }]);
const fetchTags = async () =>
new Promise<ITag[]>((resolve) => {
resolve([{ title: "Welcome", slug: "welcome" }]);
});
</script>

View file

@ -34,10 +34,11 @@ import { ITag } from "../../types/tag.model";
import debounce from "lodash/debounce";
import { computed, onBeforeMount, ref } from "vue";
import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
import { useFetchTags } from "@/composition/apollo/tags";
import { FILTER_TAGS } from "@/graphql/tags";
const props = defineProps<{
modelValue: ITag[];
fetchTags: (text: string) => Promise<ITag[]>;
}>();
const emit = defineEmits(["update:modelValue"]);
@ -56,9 +57,14 @@ const id = computed((): string => {
return `tag-input-${componentId}`;
});
const { load: fetchTags } = useFetchTags();
const getFilteredTags = async (newText: string): Promise<void> => {
text.value = newText;
tags.value = await props.fetchTags(newText);
const res = await fetchTags(FILTER_TAGS, { filter: newText });
if (res) {
tags.value = res.tags;
}
};
const debouncedGetFilteredTags = debounce(getFilteredTags, 200);

View file

@ -1,24 +1,7 @@
import { FILTER_TAGS } from "@/graphql/tags";
import { ITag } from "@/types/tag.model";
import { apolloClient } from "@/vue-apollo";
import { provideApolloClient, useLazyQuery } from "@vue/apollo-composable";
import { useLazyQuery } from "@vue/apollo-composable";
export async function fetchTags(text: string): Promise<ITag[]> {
try {
const { load: loadFetchTagsQuery } = useLazyQuery<
{ tags: ITag[] },
{ filter: string }
>(FILTER_TAGS);
const res = await provideApolloClient(apolloClient)(() =>
loadFetchTagsQuery(FILTER_TAGS, {
filter: text,
})
);
if (!res) return [];
return res.tags;
} catch (e) {
console.error(e);
return [];
}
export function useFetchTags() {
return useLazyQuery<{ tags: ITag[] }, { filter: string }>(FILTER_TAGS);
}

View file

@ -56,11 +56,7 @@
</option>
</o-select>
</o-field>
<tag-input
v-model="event.tags"
class="flex-1"
:fetch-tags="fetchTags"
/>
<tag-input v-model="event.tags" class="flex-1" />
</div>
<o-field
@ -626,7 +622,6 @@ import {
useTimezones,
} from "@/composition/apollo/config";
import { useMutation } from "@vue/apollo-composable";
import { fetchTags } from "@/composition/apollo/tags";
import { Dialog } from "@/plugins/dialog";
import { Notifier } from "@/plugins/notifier";
import { useHead } from "@unhead/vue";

View file

@ -32,7 +32,7 @@
/>
</o-field>
<tag-input v-model="editablePost.tags" :fetch-tags="fetchTags" />
<tag-input v-model="editablePost.tags" />
<o-field :label="t('Post')">
<p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
@ -158,7 +158,6 @@ import { useI18n } from "vue-i18n";
import { computed, inject, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useMutation, useQuery } from "@vue/apollo-composable";
import { fetchTags } from "@/composition/apollo/tags";
import { Dialog } from "@/plugins/dialog";
const props = withDefaults(