From 1345271537b57d7f461a4f269f8fa737c07f4b96 Mon Sep 17 00:00:00 2001
From: Excellify <jarlsgu@gmail.com>
Date: Thu, 24 Oct 2024 16:28:03 +0200
Subject: [PATCH 1/2] Country group in request

Include the country group when doing the api request for the modQ
---
 src/apollo/query/mod-queue.query.ts        |  1 +
 src/views/admin/ModQueue/AdminModQueue.vue | 26 +++++++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/apollo/query/mod-queue.query.ts b/src/apollo/query/mod-queue.query.ts
index 31b32045..a79bf7e0 100644
--- a/src/apollo/query/mod-queue.query.ts
+++ b/src/apollo/query/mod-queue.query.ts
@@ -26,6 +26,7 @@ export namespace GetModRequests {
 		page?: number | null;
 		limit?: number | null;
 		wish?: string | null;
+		country?: string[] | string | null;
 	}
 	export interface Result {
 		modRequests: {
diff --git a/src/views/admin/ModQueue/AdminModQueue.vue b/src/views/admin/ModQueue/AdminModQueue.vue
index 4c111a7f..988c8889 100644
--- a/src/views/admin/ModQueue/AdminModQueue.vue
+++ b/src/views/admin/ModQueue/AdminModQueue.vue
@@ -138,14 +138,27 @@ const activeTab = ref("list");
 const fakeRequest = {} as Message.ModRequest;
 
 const country = ref("");
+const filter = computed(
+	() =>
+		new Set(
+			Object.values(GROUPS)
+				.filter((g) => g.state.value)
+				.flatMap((g) => g.list),
+		),
+);
+const filterType = ref(true);
 
 const query = useQuery<GetModRequests.Result, GetModRequests.Variables>(
 	GetModRequests,
 	() => ({
-		page: null,
+		page: 0,
 		limit: Number(limit.value),
 		wish: activeTab.value,
-		country: CISO2.has(country.value.toUpperCase()) ? country.value : undefined,
+		country: CISO2.has(country.value.toUpperCase())
+			? country.value
+			: filter.value.size && !filterType.value
+			? [...filter.value]
+			: undefined,
 	}),
 	{
 		fetchPolicy: "cache-and-network",
@@ -197,15 +210,6 @@ const groupDropdown = ref<HTMLElement | null>(null);
 onClickOutside(groupDropdown, () => {
 	dropdownOpen.value = false;
 });
-const filterType = ref(true);
-const filter = computed(
-	() =>
-		new Set(
-			Object.values(GROUPS)
-				.filter((g) => g.state.value)
-				.flatMap((g) => g.list),
-		),
-);
 
 const filtered = computed(() => {
 	return requests.value.filter((r) => filterType.value !== filter.value.has(r.actor_country_code));

From b2efa1e050535d511ce96f25598a820db98985db Mon Sep 17 00:00:00 2001
From: Excellify <jarlsgu@gmail.com>
Date: Thu, 24 Oct 2024 17:57:07 +0200
Subject: [PATCH 2/2] Set limit on limit

---
 src/views/admin/ModQueue/AdminModQueue.vue | 24 ++++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/views/admin/ModQueue/AdminModQueue.vue b/src/views/admin/ModQueue/AdminModQueue.vue
index 988c8889..dc1ab457 100644
--- a/src/views/admin/ModQueue/AdminModQueue.vue
+++ b/src/views/admin/ModQueue/AdminModQueue.vue
@@ -19,8 +19,10 @@
 						:error="country !== '' && !CISO2.has(country.toUpperCase())"
 					/>
 				</div>
+
 				<div>
-					<TextInput v-model="amount" icon="search" label="Limit" type="number" width="6em" />
+					<label for="limit">Limit: {{ _limit }}</label>
+					<RangeInput v-model.number="_limit" :min="1" :max="250" width="8em" />
 				</div>
 			</section>
 			<section class="mod-queue-categories">
@@ -120,6 +122,7 @@ import { Emote } from "@/structures/Emote";
 import { Message } from "@/structures/Message";
 import EmoteDeleteModal from "@/views/emote/EmoteDeleteModal.vue";
 import EmoteMergeModal from "@/views/emote/EmoteMergeModal.vue";
+import RangeInput from "@/components/form/RangeInput.vue";
 import TextInput from "@/components/form/TextInput.vue";
 import Toggle from "@/components/form/Toggle.vue";
 import Icon from "@/components/utility/Icon.vue";
@@ -128,9 +131,10 @@ import ModRequestCard from "./ModRequestCard.vue";
 
 const BASE_VISIBLE = 24;
 const BASE_ADD = 24;
-const LIMIT = 100;
 
-const limit = ref(LIMIT);
+const _limit = ref(100);
+const limit = debouncedRef(_limit, 500);
+
 const bigMode = ref(false);
 
 const activeTab = ref("list");
@@ -146,13 +150,13 @@ const filter = computed(
 				.flatMap((g) => g.list),
 		),
 );
-const filterType = ref(true);
+const filterType = ref(false);
 
 const query = useQuery<GetModRequests.Result, GetModRequests.Variables>(
 	GetModRequests,
 	() => ({
 		page: 0,
-		limit: Number(limit.value),
+		limit: limit.value,
 		wish: activeTab.value,
 		country: CISO2.has(country.value.toUpperCase())
 			? country.value
@@ -176,10 +180,7 @@ watch(isAtEnd, (v) => {
 	}
 });
 
-const refetch = () => {
-	if (amount.value === limit.value) nextTick(query.refetch);
-	else limit.value = amount.value;
-};
+const refetch = () => nextTick(query.refetch);
 
 const addMore = async () => {
 	if (!canViewMore.value) return;
@@ -212,7 +213,9 @@ onClickOutside(groupDropdown, () => {
 });
 
 const filtered = computed(() => {
-	return requests.value.filter((r) => filterType.value !== filter.value.has(r.actor_country_code));
+	return filter.value.size
+		? requests.value.filter((r) => filterType.value !== filter.value.has(r.actor_country_code))
+		: requests.value;
 });
 
 watch(filtered, reset);
@@ -220,7 +223,6 @@ const searchQuery = ref("");
 
 const debouncedSearch = debouncedRef(searchQuery, 500);
 
-const amount = ref(LIMIT);
 const targetMap = new Map<string, Emote>();
 
 const loadEmotes = async (ids: string[]) => {