Improved category selection for recipes

[seyfeb]

Current state

In recipe-editing mode the complete category needs to be typed in by hand. Typos result in newly created categories requiring manual fixing of recipes.

Proposed state

When typing in the categories field the typed string is compared to all existing categories. Initially the comparison could be done character by character, later maybe with some fuzzy search. The detected category or a list of best results should be presented to the user who can select the correct one by clicking with the mouse or selecting with the arrow keys + return.

Alternative

An alternative for the selection would be a dropdown list in which all existing categories are presented. The user can select from the list to fill the category field of the recipe.

Additional Considerations

This suggestion could also be relevant for selecting ingredients, keywords, and tools. Maybe a generic approach which is reusable for those cases might be a good thing.

[christianlupus]

@sam-19, as you managed to do quite some work on the frontend: Do you see a chance to implement the frontend part when you have a API interface to fetch all or some of the recipe categories? If yes, I could try to create such an API endpoint in the backend.

[sam-19]

The Nextcloud-vue library has a component called MultiselectTags. I think it could be used to serve this purpose. There is already an API call to return a list of recipe categories, even if it does return a bit more information than is necessary. Now I would need to do some testing to see how the component works, but I suspect we may not need anything other than what already exists. I'm afraid using a pre-existing component doesn't leave much room to create fancy input matching schemes, but I imagine a basic string compare should be enough unless someone has hundreds or thousands of categories (unlikely?). I'll get back to you once I've had a change to try it out.

[seyfeb]

@sam-19
I wanted to have a look at this, but I’m not too familiar with these vue component imports. I tried to import them as

import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'

but when making the app I got some error messages like

ERROR in ./node_modules/@nextcloud/event-bus/dist/ProxyBus.js
Module not found: Error: Can't resolve 'semver/functions/major' in '/Users/sebastian/Projects/Nextcloud/Cookbook/nextcloud-docker-debug/volumes/custom_apps/cookbook/node_modules/@nextcloud/event-bus/dist'
 @ ./node_modules/@nextcloud/event-bus/dist/ProxyBus.js 10:36-69
 @ ./node_modules/@nextcloud/event-bus/dist/index.js
...

Do I need to register the components somewhere? Could you help me out here? :)

[christianlupus]

@seyfeb Maybe it would help if your non-working code would be visible somewhere. That might simplyfy the setup time for @sam-19.

[seyfeb]

You’re right. I’m using @christianlupus nextcloud docker dev setup. The error appears when checking out the master branch and inserting above line

<script>
import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
import EditImageField from './EditImageField'
...

and

components: {
        Multiselect,
        EditImageField,
        ...
}

e.g., in RecipeEdit.vue. and running npm install && make.

[christianlupus]

I cannot confirm this behavior. I created this branch and I am capable of calling make and make npm to build the app. Only the usual messages regarding asset size limit.
Maybe a caching issue?
Can you individually run npm install and make npm to distinguish where the problem lies?

[seyfeb]

That is good news! It happens in the make npm step.

What I tried was reinstalling node, the distclean make target, resetting the repository (git reset --hard, git clean -f -d). I try to check out the repositories again, maybe this helps.

As this problem doesn’t seem to be related to this issue, we shouldn’t spam this thread anymore. I edit this post if above helped.

Edit: It turned out that this problem was related to the node/npm installation on my macOS system. The version installed via homebrew seems to have been broken. npm installed the semver module only partially, resulting in missing files. Deleting the whole node installation and installing it via the official installer on the node homepage solved the problem.