Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: allow valid labels to be created on search #7454

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions resources/js/Shared/Modules/Labels.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@

<!-- labels in vault -->
<ul class="label-list overflow-auto bg-white dark:bg-gray-900" :class="filteredLabels.length > 0 ? 'h-40' : ''">
<!-- case if the label does not exist and needs to be created -->
<li
v-if="showCreateNewLabel"
class="cursor-pointer border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
@click="store()">
{{ $t('Create new label') }} <span class="italic">"{{ form.search }}"</span>
</li>

<li
v-for="label in filteredLabels"
:key="label.id"
Expand All @@ -50,14 +58,6 @@
<CheckedIcon v-if="label.taken" />
</li>

<!-- case if the label does not exist and needs to be created -->
<li
v-if="filteredLabels.length === 0 && form.search.length !== ''"
class="cursor-pointer border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
@click="store()">
{{ $t('Create new label') }} <span class="italic">"{{ form.search }}"</span>
</li>

<!-- blank state when there is no label at all -->
<li
v-if="filteredLabels.length === 0 && form.search.length === ''"
Expand Down Expand Up @@ -120,6 +120,16 @@ export default {
},

computed: {
showCreateNewLabel() {
let searchTermAlreadyAdded = false;
if (this.filteredLabels.length) {
this.filteredLabels.forEach((label) => {
if (label.name.toLowerCase() === this.form.search.toLowerCase()) searchTermAlreadyAdded = true;
});
}

return (!searchTermAlreadyAdded || this.filteredLabels.length === 0) && this.form.search !== '';
},
filteredLabels() {
return this.localLabelsInVault.filter((label) => {
return label.name.toLowerCase().indexOf(this.form.search.toLowerCase()) > -1;
Expand Down