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

View file

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

View file

@ -1,24 +1,7 @@
import { FILTER_TAGS } from "@/graphql/tags"; import { FILTER_TAGS } from "@/graphql/tags";
import { ITag } from "@/types/tag.model"; import { ITag } from "@/types/tag.model";
import { apolloClient } from "@/vue-apollo"; import { useLazyQuery } from "@vue/apollo-composable";
import { provideApolloClient, useLazyQuery } from "@vue/apollo-composable";
export async function fetchTags(text: string): Promise<ITag[]> { export function useFetchTags() {
try { return useLazyQuery<{ tags: ITag[] }, { filter: string }>(FILTER_TAGS);
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 [];
}
} }

View file

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

View file

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