This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 953d790d9cb8fac60989b4229de348a9e3d7290a Author: Benjamin <poussin@codelutin.com> Date: Tue May 19 23:11:06 2020 +0200 creation d'un composant pour encapsuler l'input des tags --- web/src/components/common/TagsInput.vue | 84 ++++++++++++++++++++++++++ web/src/components/preferences/TagsEditor.vue | 85 +++------------------------ web/src/views/BookmarkEdit.vue | 5 +- 3 files changed, 96 insertions(+), 78 deletions(-) diff --git a/web/src/components/common/TagsInput.vue b/web/src/components/common/TagsInput.vue new file mode 100644 index 0000000..a904468 --- /dev/null +++ b/web/src/components/common/TagsInput.vue @@ -0,0 +1,84 @@ +/* +props: + noCreation: n'autorise pas la création de nouveau élément (default: false; création autorisée) + limit: le nombre maximum délément autorisé (default: pas de limite) + displayCount: affiche on non le nombre d'occurence du tag (default: false; par d'affichage) + selected: le tableau contenant le résultat de l'édition (contient les tags) +*/ +<template> + <vue-tags-input + id="oldTags" + v-model="currentTag" + :tags="selectedTags" + @tags-changed="onChange" + :add-only-from-autocomplete="noCreation" + :max-tags="limit" + :autocomplete-items="filteredTags" + :add-on-key="key" + :save-on-key="key" + > + <template v-if="displayCount" #tag-right="{ tag }"> ({{ tag.count }}) </template> + </vue-tags-input> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' +import VueTagsInput from '@johmun/vue-tags-input' + +@Component({ + name: 'TagsInput', + props: ['noCreation', 'limit', 'displayCount', 'selected'], + components: { VueTagsInput } +}) +class TagsInput extends Vue { + @Prop noCreation + @Prop limit + @Prop displayCount + @Prop selected + + key = [13, ',', ';', ' ', '\t'] + + allTags = [] + + currentTag = '' + get selectedTags() { + return this.selected.map(text => {return {text}}) + } + + onChange(tags) { + // on remplace tous les elements par les nouveaux, pour que le tabeau original venant du parent soit aussi modifié + this.selected.splice.apply(this.selected, [0, Number.MAX_VALUE].concat(tags.map((t) => t.text))) + } + + get filteredTags() { + let lowerCased = this.currentTag.toLowerCase() + return this.allTags.filter((a) => { + return a.text.toLowerCase().indexOf(lowerCased) !== -1 + }) + } + + load() { + this.$fetch.get('/bookmarks/tags?with-count=true').then( + (tags) => { + console.log('ok', tags) + this.allTags = tags[0].map((text, i) => { + return { text, count: tags[1][i] } + }) + }, + (err) => { + console.log('ko', err) + this.errorMsg = err.cause + } + ) + } + + beforeMount() { + this.load() + console.log('xxxx', this.canCreate, this.limit, this.displayCount, this.selected) + } +} + +export default TagsInput +</script> + +<style scoped lang="less"></style> diff --git a/web/src/components/preferences/TagsEditor.vue b/web/src/components/preferences/TagsEditor.vue index 3199a4f..4a98184 100644 --- a/web/src/components/preferences/TagsEditor.vue +++ b/web/src/components/preferences/TagsEditor.vue @@ -1,32 +1,9 @@ <template> <div class="tags-editor"> - <label for="oldTags">Replace</label - ><vue-tags-input - id="oldTags" - v-model="oldName" - :tags="oldTags" - @tags-changed="(t) => (oldTags = t)" - :add-only-from-autocomplete="true" - :max-tags="1" - :autocomplete-items="filteredOldTags" - :add-on-key="key" - :save-on-key="key" - > - <template #tag-right="{ tag }"> - ({{ tag.count }}) - </template> - </vue-tags-input> - <label for="newTags">with</label - ><vue-tags-input - id="newTags" - v-model="newName" - :tags="newTags" - @tags-changed="(t) => (newTags = t)" - :max-tags="1" - :autocomplete-items="filteredNewTags" - :add-on-key="key" - :save-on-key="key" - /> + <label for="oldTags">Replace</label> + <TagsInput id="oldTags" :selected="oldTags" :noCreation="true" :limit="1" :displayCount="true"></TagsInput> + <label for="newTags">with</label> + <TagsInput id="oldTags" :selected="newTags" :limit="1"></TagsInput> <button class="replace" @click.prevent="doAction">replace</button> <span class="errorMsg">{{ errorMsg }}</span> </div> @@ -34,40 +11,18 @@ <script> import { Component, Vue } from 'vue-property-decorator' -import VueTagsInput from '@johmun/vue-tags-input' +import TagsInput from '@/components/common/TagsInput' @Component({ name: 'TagsEditor', - components: { VueTagsInput } + components: { TagsInput } }) class TagsEditor extends Vue { errorMsg = '' - key = [13, ',', ';', ' ', '\t'] - - tags = [] - - oldName = '' oldTags = [] - newName = '' newTags = [] - get filteredOldTags() { - return this.filteredTags(this.oldName) - } - - get filteredNewTags() { - return this.filteredTags(this.newName) - } - - filteredTags(tag) { - let lowerCased = tag.toLowerCase() - console.log('XXXXX', tag, lowerCased) - return this.tags.filter((a) => { - return a.text.toLowerCase().indexOf(lowerCased) !== -1 - }) - } - doAction() { if (this.newTags[0]) { this.doReplace() @@ -77,13 +32,11 @@ class TagsEditor extends Vue { } doReplace() { - let oldName = this.oldTags[0].text - let newName = this.newTags[0].text + let oldName = this.oldTags[0] + let newName = this.newTags[0] this.$fetch.put(`/bookmarks/tags/${oldName}/${newName}`).then( (data) => { this.errorMsg = `renamed ${oldName}(${data.count}) -> ${newName}` - this.oldName = '' - this.newName = '' this.oldTags = [] this.newTags = [] // on recharge pour avoir le nouveau tag et le bon count @@ -97,12 +50,10 @@ class TagsEditor extends Vue { } doDelete() { - let oldName = this.oldTags[0].text + let oldName = this.oldTags[0] this.$fetch.delete(`/bookmarks/tags/${oldName}`).then( (data) => { this.errorMsg = `deleted ${oldName}(${data.count})` - this.oldName = '' - this.newName = '' this.oldTags = [] this.newTags = [] // on recharge pour avoir le bon count @@ -115,24 +66,6 @@ class TagsEditor extends Vue { ) } - load() { - this.$fetch.get('/bookmarks/tags?with-count=true').then( - (tags) => { - console.log('ok', tags) - this.tags = tags[0].map((text, i) => { - return {text, count: tags[1][i]} - }) - }, - (err) => { - console.log('ko', err) - this.errorMsg = err.cause - } - ) - } - - beforeMount() { - this.load() - } } export default TagsEditor diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index cfdca4e..f1271ba 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -6,7 +6,7 @@ <input type="text" v-model.trim="bookmark.uri" /> <br /> <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> <textarea v-model.trim="bookmark.description"></textarea> - tags: <input type="text" v-model.trim="bookmark.tags" /> <br /> + tags: <TagsInput :selected="bookmark.tags"></TagsInput> <!-- <input type="text" v-model.trim="bookmark.tags" /> <br /> --> <!-- <span>{{ bookmark.lang }}</span> --> <!-- <span>{{ bookmark.owner }}</span> si mon id n'est pas le meme alors c'est le bookmark d'un autre partage par un group --> private alias: <input type="text" v-model.trim="bookmark.privatealias" /> @@ -21,6 +21,7 @@ <script> import { Component, Prop, Vue } from 'vue-property-decorator' +import TagsInput from '@/components/common/TagsInput' @Component({ name: 'BookmarkEdit', @@ -33,7 +34,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator' 'publicalias', 'lang' ], - components: {} + components: {TagsInput} }) class BookmarkEdit extends Vue { @Prop id -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.