mirror
/
mobilizon
mirror of https://framagit.org/framasoft/mobilizon.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(front): fix adding tags to an event 

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