mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-07 20:58:24 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user