fix(front): fix debouncing instances filtering

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2024-01-04 12:58:16 +01:00
parent b3ba45e8a7
commit fe0cf93604
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 16 additions and 19 deletions

View file

@ -1641,5 +1641,6 @@
"Announcements for {eventTitle}": "Announcements for {eventTitle}", "Announcements for {eventTitle}": "Announcements for {eventTitle}",
"Visit {instance_domain}": "Visit {instance_domain}", "Visit {instance_domain}": "Visit {instance_domain}",
"Software details: {software_details}": "Software details: {software_details}", "Software details: {software_details}": "Software details: {software_details}",
"Only instances with an application actor can be followed": "Only instances with an application actor can be followed" "Only instances with an application actor can be followed": "Only instances with an application actor can be followed",
"Domain or instance name": "Domain or instance name"
} }

View file

@ -1635,5 +1635,6 @@
"Announcements for {eventTitle}": "Annonces pour {eventTitle}", "Announcements for {eventTitle}": "Annonces pour {eventTitle}",
"Visit {instance_domain}": "Visiter {instance_domain}", "Visit {instance_domain}": "Visiter {instance_domain}",
"Software details: {software_details}": "Détails du logiciel : {software_details}", "Software details: {software_details}": "Détails du logiciel : {software_details}",
"Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies" "Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies",
"Domain or instance name": "Domaine ou nom de l'instance"
} }

View file

@ -54,15 +54,14 @@
> >
</o-field> </o-field>
<o-field <o-field
:label="t('Domain')" :label="t('Domain or instance name')"
label-for="domain-filter" label-for="domain-filter"
class="flex-auto" class="flex-auto"
> >
<o-input <o-input
id="domain-filter" id="domain-filter"
:placeholder="t('mobilizon-instance.tld')" :placeholder="t('mobilizon-instance.tld')"
:value="filterDomain" v-model="filterDomain"
@input="debouncedUpdateDomainFilter"
/> />
</o-field> </o-field>
</div> </div>
@ -223,7 +222,6 @@ import { Paginate } from "@/types/paginate";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IInstance } from "@/types/instance.model"; import { IInstance } from "@/types/instance.model";
import EmptyContent from "@/components/Utils/EmptyContent.vue"; import EmptyContent from "@/components/Utils/EmptyContent.vue";
import debounce from "lodash/debounce";
import { import {
InstanceFilterFollowStatus, InstanceFilterFollowStatus,
InstanceFollowStatus, InstanceFollowStatus,
@ -254,12 +252,16 @@ const followStatus = useRouteQuery(
const { result: instancesResult } = useQuery<{ const { result: instancesResult } = useQuery<{
instances: Paginate<IInstance>; instances: Paginate<IInstance>;
}>(INSTANCES, () => ({ }>(
page: instancePage.value, INSTANCES,
limit: INSTANCES_PAGE_LIMIT, () => ({
filterDomain: filterDomain.value, page: instancePage.value,
filterFollowStatus: followStatus.value, limit: INSTANCES_PAGE_LIMIT,
})); filterDomain: filterDomain.value,
filterFollowStatus: followStatus.value,
}),
{ debounce: 500 }
);
const instances = computed(() => instancesResult.value?.instances); const instances = computed(() => instancesResult.value?.instances);
@ -276,13 +278,6 @@ const newRelayAddress = ref("");
// relayFollowers: Paginate<IFollower> = { elements: [], total: 0 }; // relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
const updateDomainFilter = (event: InputEvent) => {
const newValue = (event.target as HTMLInputElement).value;
filterDomain.value = newValue;
};
const debouncedUpdateDomainFilter = debounce(updateDomainFilter, 500);
const hasFilter = computed((): boolean => { const hasFilter = computed((): boolean => {
return ( return (
followStatus.value !== InstanceFilterFollowStatus.ALL || followStatus.value !== InstanceFilterFollowStatus.ALL ||