Fixed: search jobs modal showing 'no jobs found' without searching any job (#85zrmar8z) #364
Conversation
src/views/SelectJobsModal.vue
Outdated
| <div v-if="!isJobSearched" class="ion-text-center"> | ||
| <p>{{ $t("Searched jobs will appear here") }}</p> | ||
| </div> | ||
|
|
||
| <div v-else-if="jobs.length === 0" class="ion-text-center"> |
There was a problem hiding this comment.
Use queryString instead of isJobSearched
There was a problem hiding this comment.
As queryString is v-modelled with the search bar, even if we type something without searching (pressing enter) it'll show 'No jobs found' in that case.
There was a problem hiding this comment.
Instead of using v-model, we could update the queryString only on enter press. This way we will not need flag variable
src/views/SelectJobsModal.vue
Outdated
| @@ -12,7 +12,11 @@ | |||
| <ion-content> | |||
| <ion-searchbar v-model="queryString" :placeholder="$t('Search jobs')" @keyup.enter="search($event)" /> | |||
|
|
|||
| <div v-if="jobs.length === 0" class="ion-text-center"> | |||
| <div v-if="!isJobSearched" class="ion-text-center"> | |||
src/views/SelectJobsModal.vue
Outdated
| <div v-if="!isJobSearched" class="ion-text-center"> | ||
| <p>{{ $t("Searched jobs will appear here") }}</p> | ||
| </div> | ||
|
|
||
| <div v-else-if="jobs.length === 0" class="ion-text-center"> |
There was a problem hiding this comment.
Instead of using v-model, we could update the queryString only on enter press. This way we will not need flag variable
src/views/SelectJobsModal.vue
Outdated
| @@ -92,7 +96,9 @@ export default defineComponent({ | |||
| methods: { | |||
| async search(event: any) { | |||
| this.queryString = event.target.value.trim(); | |||
| if(this.queryString.length > 0) this.getJobs(); | |||
| if(this.queryString.length > 0) { | |||
There was a problem hiding this comment.
Why do we need the length check at all?
"That is, all values are truthy except false, 0, -0, 0n, "", null, undefined, and NaN."
There was a problem hiding this comment.
Yes, sir. The empty queryString itself is a false value.
src/views/SelectJobsModal.vue
Outdated
| <p>{{ $t("Searched jobs will appear here") }}</p> | ||
| </div> | ||
|
|
||
| <div v-else-if="jobs.length === 0 && queryString.length != 0" class="ion-text-center"> |
There was a problem hiding this comment.
I think the condition queryString.length != 0" might not be needed, else-if will execute only when queryString.length === 0 fails.
Related Issues
Closes #358
Short Description and Why It's Useful
The select jobs modal showed 'No jobs found' without even searching for a job. Fixed the issue and now the modal shows 'Searched jobs will appear here' if no jobs are searched.
Screenshots of Visual Changes before/after (If There Are Any)
IMPORTANT NOTICE - Remember to add changelog entry
Contribution and Currently Important Rules Acceptance