potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix(front): fix adding tags to an event

Browse source 
Closes #1419

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2024-02-27 17:07:19 +01:00
parent ba9299c632
commit d75d464135
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
1 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/Event/TagInput.vue
View file

@ -14,7 +14,8 @@
</p>
</template>
<o-taginput
v-model="tagsStrings"
:modelValue="tagsStrings"
@update:modelValue="updateTags"
:data="filteredTags"
:allow-autocomplete="true"
:allow-new="true"
@ -34,7 +35,7 @@
<script lang="ts" setup>
import differenceBy from "lodash/differenceBy";
import { ITag } from "../../types/tag.model";
import { computed, onBeforeMount, ref } from "vue";
import { computed, onBeforeMount, ref, watch } from "vue";
import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
import { useFetchTags } from "@/composition/apollo/tags";
import { FILTER_TAGS } from "@/graphql/tags";
@ -44,6 +45,10 @@ const props = defineProps<{
modelValue: ITag[];
}>();
const propsValue = computed(() => props.modelValue);
const tagsStrings = ref<string[]>([]);
const emit = defineEmits(["update:modelValue"]);
const text = ref("");
@ -77,7 +82,7 @@ const getFilteredTags = async (newText: string): Promise<void> => {
};
const filteredTags = computed((): ITag[] => {
return differenceBy(tags.value, props.modelValue, "id").filter(
return differenceBy(tags.value, propsValue.value, "id").filter(
(option) =>
option.title.toString().toLowerCase().indexOf(text.value.toLowerCase()) >=
0 ||
@ -86,19 +91,19 @@ const filteredTags = computed((): ITag[] => {
);
});
const tagsStrings = computed({
get(): string[] {
return props.modelValue.map((tag: ITag) => tag.title);
},
set(newTagsStrings: string[]) {
console.debug("tagsStrings", newTagsStrings);
const tagEntities = newTagsStrings.map((tag: string | ITag) => {
if (typeof tag !== "string") {
return tag;
}
return { title: tag, slug: tag } as ITag;
});
emit("update:modelValue", tagEntities);
},
watch(props.modelValue, (newValue, oldValue) => {
if (newValue != oldValue) {
tagsStrings.value = propsValue.value.map((tag: ITag) => tag.title);
}
});
const updateTags = (newTagsStrings: string[]) => {
const tagEntities = newTagsStrings.map((tag: string | ITag) => {
if (typeof tag !== "string") {
return tag;
}
return { title: tag, slug: tag } as ITag;
});
emit("update:modelValue", tagEntities);
};
</script>