Display a message when no results are found in PersonChooseModal and refine search state handling.

- Added a "no results" message with dynamic translation when no suggestions are available.
- Introduced `hasPreviousQuery` state and `hasNoResult` computed property for improved search state management.
- Updated styles for "no results" display and adjusted button margin in the modal.
This commit is contained in:
2025-10-29 16:47:28 +01:00
parent 5c098a336d
commit 31e57d7507

View File

@@ -68,6 +68,16 @@
@trigger-add-contact="triggerAddContact"
/>
<div v-if="hasNoResult">
<div class="noResult chill-no-data-statement">
{{
trans(ADD_PERSONS_SUGGESTED_COUNTER, {
count: suggestedCounter,
})
}}
</div>
</div>
<div
v-if="props.allowCreate && query.length > 0"
class="create-button"
@@ -112,9 +122,8 @@ import {
import type {
Suggestion,
Search,
EntityType,
SearchOptions,
EntitiesOrMe, Entities,
Entities,
} from "ChillPersonAssets/types";
import {ThirdpartyCompany} from "../../../../../../ChillThirdPartyBundle/Resources/public/types";
@@ -154,6 +163,7 @@ const search = reactive({
previousQuery: "" as string,
currentSearchQueryController: null as AbortController | null,
priorSuggestion: {} as Partial<Suggestion>,
hasPreviousQuery: false,
});
/**
@@ -191,6 +201,8 @@ const selectedAndSuggested = computed<(Suggestion & {isSelected: boolean})[]>(()
return selectedAndSuggested;
});
const hasNoResult = computed(() => search.hasPreviousQuery && suggested.value.length === 0);
function setQuery(q: string) {
search.query = q;
@@ -217,6 +229,7 @@ function setQuery(q: string) {
)
.then((suggested: Search) => {
loadSuggestions(suggested.results);
search.hasPreviousQuery = true;
})
.catch((error: DOMException) => {
if (error instanceof DOMException && error.name === "AbortError") {
@@ -320,8 +333,13 @@ div.body-head {
}
}
.create-button > a {
.create-button > button {
margin-top: 0.5em;
margin-left: 2.6em;
margin-left: 0.6em;
}
.noResult {
text-align: center;
margin: 2em;
font-size: large;
}
</style>