Add "starts with" search filter

[whyboris]

Simple and easy. May be useful when you remember the beginning of the word, but don't want the app to find the substring match in the middle of other words in the file name.

Example:
abc def.mp4 will be matched with a search for de but not ef ✅

[kanwal019]

Can I give it a try ?

[whyboris]

Awesome! Let me know if you have any questions or would like any help (whether vague or detailed) 🤝

[kanwal019]

@whyboris Should we expect abc_def.mp4 and abc-def.mp4 to match with a search for de but not ef, as well ?

[whyboris]

Thank you for the question!

Feels like _ for sure is meant as a space, so abc_def should be equivalent to abc def (as if 2 words).

I'm not sure about abc-def but it feels like two words to me as well (in enough cases that we may as well pretend it's 2 words).

I don't have a strong opinion on the -. Please implement as you recommend 🤝

One option is to simply use the cleanName rather than file name 🤔
https://github.com/whyboris/Video-Hub-App/blob/main/interfaces/final-object.interface.ts#L28
which already replaces . and _ with spaces:

Video-Hub-App/node/main-support.ts

Line 276 in e2ab8f6

export function cleanUpFileName(original: string): string {

(but it does not touch the -)

[kanwal019]

Thanks @whyboris.

Currently the filter works for both file name and partial path. Would it be ok , just to make it work for the cleanName ?
If so, can I update that to handle - as well ?

[whyboris]

I think the easiest (from code perspective and conceptual simplicity for the user) this feature (in this Issue) can just use cleanName for the search. You can avoid adding any extra logic around - (unless you want to add it -- up to you).

I was guessing that a simple way to do it would be to create a new pipe that will break up the cleanName string into an array of strings (.split(' ')) and then loop through each array with a .startsWith 🤷

The biggest challenge I see with this feature is going around all the files and correctly adding the relevant pieces for the UI to show the field, for appropriate text to appear next to the search/filter field, etc.

Let me know if you'd like any help 🤝

[whyboris]

ps - quick note about https://github.com/kanwal019/Video-Hub-App/pull/1/files#diff-84a1283509603799dadbc0d1e879272e0cd9196aa1bd092948cbdf07ba60eca7R279

Feel free to make any changes you'd like for your own fork and/or copy of the software, but I would not want to merge a change (at least at this time) that replaces the - in file names with spaces for the cleanName field (as you have in your PR linked above) 😓

[kanwal019]

Sure @whyboris I will have a separate branch for the fix. And I thought the PR was linked just to my copy of the code.

[kanwal019]

I think the easiest (from code perspective and conceptual simplicity for the user) this feature (in this Issue) can just use cleanName for the search. You can avoid adding any extra logic around - (unless you want to add it -- up to you).

I was guessing that a simple way to do it would be to create a new pipe that will break up the cleanName string into an array of strings (.split(' ')) and then loop through each array with a .startsWith 🤷

The biggest challenge I see with this feature is going around all the files and correctly adding the relevant pieces for the UI to show the field, for appropriate text to appear next to the search/filter field, etc.

Let me know if you'd like any help 🤝

This will work as expected in the case of magic-search, but how do we need to manage that for the file-search, as we can't just use cleanName to filter out the results.

[whyboris]

Sorry I'm unsure if I fully understand. My thought was an addition of a new filter, not editing of any other filter. This would mean all old filters would continue to behave as before with no change.

The new filter, if enabled, would have its own <input> field which, when users would type in and press the Enter key would perform the search (just like the current file search does). With the code I already have in the app, you might not need to edit any HTML either - it might be enough to just add another entry into the filter array (and update some other appropriate places).

To make this work we'd need also to create a new .pipe file with its own logic.

Please let me know if you're unsure about what I'm requesting with this feature, or about the implementation that I'm describing, or anything else 🤝

Thank you for your continued interest 🙇 though of course no worries if you ever want out 👌

[kanwal019]

I guess I misunderstood the requirement before. I would try to give a shot to the above approach and revert. Thank You @whyboris .