From 4fa9f34aed442b474a3efe75e7371a6bd0f85bf9 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Thu, 19 Nov 2020 12:17:02 +0100 Subject: [PATCH 1/7] Added multiselect edit component. Signed-off-by: Sebastian Fey --- src/components/EditMultiselect.vue | 83 ++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/components/EditMultiselect.vue diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue new file mode 100644 index 000000000..aef11c36b --- /dev/null +++ b/src/components/EditMultiselect.vue @@ -0,0 +1,83 @@ + + + + + From 53fc02b36846537d3c69c3e78d9acda423b89d23 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Thu, 19 Nov 2020 12:20:24 +0100 Subject: [PATCH 2/7] Added multiselect element for category selection to recipe-edit view Signed-off-by: Sebastian Fey --- src/components/RecipeEdit.vue | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue index 1991de642..d83544add 100644 --- a/src/components/RecipeEdit.vue +++ b/src/components/RecipeEdit.vue @@ -7,7 +7,7 @@ - + @@ -20,6 +20,7 @@ import EditImageField from './EditImageField' import EditInputField from './EditInputField' import EditInputGroup from './EditInputGroup' +import EditMultiselect from './EditMultiselect' import EditTimeField from './EditTimeField' export default { @@ -28,6 +29,7 @@ export default { EditImageField, EditInputField, EditInputGroup, + EditMultiselect, EditTimeField, }, props: ['id'], @@ -57,6 +59,7 @@ export default { prepTime: [0, 0], cookTime: [0, 0], totalTime: [0, 0], + categories: [], } }, watch: { @@ -77,12 +80,41 @@ export default { }, }, methods: { + /** + * Add newly created category and set as selected. + */ + addCategory (newCategory) { + this.categories.push(newCategory) + this.recipe['recipeCategory'] = newCategory + }, addEntry: function(field, index, content='') { this.recipe[field].splice(index, 0, content) }, deleteEntry: function(field, index) { this.recipe[field].splice(index, 1) }, + /** + * Fetch and display recipe categories + */ + fetchCategories: function() { + $.get(this.$window.baseUrl + '/categories').done((json) => { + json = json || [] + this.categories = [] + for (let i=0; i { + alert(t('cookbook', 'Failed to fetch categories')) + if (e && e instanceof Error) { + throw e + } + }) + }, loadRecipeData: function() { if (!this.$store.state.recipe) { // Make the control row show that a recipe is loading @@ -171,6 +203,7 @@ export default { } }, setup: function() { + this.fetchCategories() if (this.$route.params.id) { // Load the recipe from store and make edits to a local copy first this.recipe = { ...this.$store.state.recipe } From ded9b0d5549e34cfb69a93112855fd0025cf8f74 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Thu, 19 Nov 2020 19:31:50 +0100 Subject: [PATCH 3/7] Added multiselect element for keyword selection to recipe-edit view Signed-off-by: Sebastian Fey --- src/components/RecipeEdit.vue | 56 ++++++++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 7 deletions(-) diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue index d83544add..0a12a2970 100644 --- a/src/components/RecipeEdit.vue +++ b/src/components/RecipeEdit.vue @@ -7,8 +7,8 @@ - - + + @@ -59,7 +59,9 @@ export default { prepTime: [0, 0], cookTime: [0, 0], totalTime: [0, 0], - categories: [], + allCategories: [], + allKeywords: [], + selectedKeywords: [], } }, watch: { @@ -78,15 +80,29 @@ export default { let mins = this.totalTime[1].toString().padStart(2, '0') this.recipe.totalTime = 'PT' + hours + 'H' + mins + 'M' }, + selectedKeywords: { + deep: true, + handler() { + // convert keyword array to comma-separated string + this.recipe['keywords'] = this.selectedKeywords.join() + } + } }, methods: { /** * Add newly created category and set as selected. */ - addCategory (newCategory) { - this.categories.push(newCategory) + addCategory (newCategory) { + this.allCategories.push(newCategory) this.recipe['recipeCategory'] = newCategory }, + /** + * Add newly created keyword. + */ + addKeyword (newKeyword) { + this.allKeywords.push(newKeyword) + this.selectedKeywords.push(newKeyword) + }, addEntry: function(field, index, content='') { this.recipe[field].splice(index, 0, content) }, @@ -99,10 +115,10 @@ export default { fetchCategories: function() { $.get(this.$window.baseUrl + '/categories').done((json) => { json = json || [] - this.categories = [] + this.allCategories = [] for (let i=0; i { + json = json || [] + if (json) { + this.allKeywords = [] + for (let i=0; i { + alert(t('cookbook', 'Failed to fetch keywords')) + if (e && e instanceof Error) { + throw e + } + }) + }, loadRecipeData: function() { if (!this.$store.state.recipe) { // Make the control row show that a recipe is loading @@ -204,6 +244,7 @@ export default { }, setup: function() { this.fetchCategories() + this.fetchKeywords() if (this.$route.params.id) { // Load the recipe from store and make edits to a local copy first this.recipe = { ...this.$store.state.recipe } @@ -220,6 +261,7 @@ export default { if (timeComps) { this.totalTime = [timeComps[1], timeComps[2]] } + this.selectedKeywords = this.recipe['keywords'].split(',') // Always set the active page last! this.$store.dispatch('setPage', { page: 'edit' }) } else { From 088a74d1a1e070500b46d22b5e5bd9c8702a67c2 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Thu, 19 Nov 2020 19:46:43 +0100 Subject: [PATCH 4/7] Added loading indicator for fetching existing categories and keyword. Added fallback in case loading kws or categories fails Signed-off-by: Sebastian Fey --- src/components/RecipeEdit.vue | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue index 0a12a2970..54997bfb4 100644 --- a/src/components/RecipeEdit.vue +++ b/src/components/RecipeEdit.vue @@ -7,8 +7,8 @@ - - + + @@ -60,6 +60,8 @@ export default { cookTime: [0, 0], totalTime: [0, 0], allCategories: [], + isFetchingCategories: true, + isFetchingKeywords: true, allKeywords: [], selectedKeywords: [], } @@ -112,7 +114,7 @@ export default { /** * Fetch and display recipe categories */ - fetchCategories: function() { + fetchCategories: function() { $.get(this.$window.baseUrl + '/categories').done((json) => { json = json || [] this.allCategories = [] @@ -123,6 +125,7 @@ export default { ) } } + this.isFetchingCategories = false }) .fail((e) => { alert(t('cookbook', 'Failed to fetch categories')) @@ -147,6 +150,7 @@ export default { } } } + this.isFetchingKeywords = false }) .fail((e) => { alert(t('cookbook', 'Failed to fetch keywords')) @@ -262,6 +266,19 @@ export default { this.totalTime = [timeComps[1], timeComps[2]] } this.selectedKeywords = this.recipe['keywords'].split(',') + + // fallback if fetching all keywords fails + this.selectedKeywords.forEach(kw => { + if (!this.allKeywords.includes(kw)) { + this.allKeywords.push(kw) + } + }) + + // fallback if fetching all categories fails + if (!this.allCategories.includes(this.recipe['recipeCategory'])) { + this.allCategories.push(this.recipe['recipeCategory']) + } + // Always set the active page last! this.$store.dispatch('setPage', { page: 'edit' }) } else { From 70c03823d9bc4cef16a76fb87710bb319566c6f0 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Thu, 19 Nov 2020 19:48:23 +0100 Subject: [PATCH 5/7] Updated CHANGELOG Signed-off-by: Sebastian Fey --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8098484a9..bf675a7a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,8 @@ [#390](https://github.com/nextcloud/cookbook/pull/390) @christianlupus - Automatic deployment of new releases to the nextcloud app store [#433](https://github.com/nextcloud/cookbook/pull/433) @christianlupus +- Category and keyword selection from list of existing ones in recipe editor + [#402](https://github.com/nextcloud/cookbook/pull/402/) @seyfeb ### Changed - Switch of project ownership to neextcloud organization in GitHub From 643eae61940f9fd2fc0dd67409dc78d623ba81c2 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Sat, 12 Dec 2020 15:13:04 +0100 Subject: [PATCH 6/7] Removed unnecessary local stored value for multiselect Signed-off-by: Sebastian Fey --- src/components/EditMultiselect.vue | 26 ++------------------------ 1 file changed, 2 insertions(+), 24 deletions(-) diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue index aef11c36b..a0aa563e3 100644 --- a/src/components/EditMultiselect.vue +++ b/src/components/EditMultiselect.vue @@ -3,7 +3,6 @@ @@ -16,35 +15,14 @@ export default { name: "EditMultiselect", components: { Multiselect - }, + }, props: { - value: { - default() { - return [] - }, - }, fieldLabel: String, }, data () { return { } - }, - computed: { - localValue: { - get() { - if (this.trackBy && this.options - && typeof this.value !== 'object' - && this.options[this.value]) { - return this.options[this.value] - } - return this.value - }, - set(value) { - this.$emit('update:value', value) - this.$emit('change', value) - }, - }, - }, + } } From 9934bc2264ff885cd759870169b0821cc81ba376 Mon Sep 17 00:00:00 2001 From: Sebastian Fey Date: Sat, 12 Dec 2020 15:13:30 +0100 Subject: [PATCH 7/7] Updated multiselect css Signed-off-by: Sebastian Fey --- src/components/EditMultiselect.vue | 32 +++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue index a0aa563e3..9933cab29 100644 --- a/src/components/EditMultiselect.vue +++ b/src/components/EditMultiselect.vue @@ -2,7 +2,7 @@
@@ -50,12 +50,38 @@ fieldset > label { vertical-align: top; } -.edit_ms { +.edit-multiselect { width: calc(100% - 11em + 10px); } - @media(max-width:1199px) { .edit_ms { + @media(max-width:1199px) { .edit-multiselect { width: 100%; }} + + +