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.

Sign up for GitHub

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

Jump to bottom

Update ModQ with for new api #1021

Merged
merged 2 commits into from
Oct 24, 2024
Merged

Update ModQ with for new api #1021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1345271
Country group in request
Excellify Oct 24, 2024
b2efa1e
Set limit on limit
Excellify Oct 24, 2024
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
1 change: 1 addition & 0 deletions src/apollo/query/mod-queue.query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export namespace GetModRequests {
page?: number | null;
limit?: number | null;
wish?: string | null;
country?: string[] | string | null;
}
export interface Result {
modRequests: {
Expand Down
48 changes: 27 additions & 21 deletions src/views/admin/ModQueue/AdminModQueue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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";
Expand All @@ -128,24 +131,38 @@ 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");

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(false);

const query = useQuery<GetModRequests.Result, GetModRequests.Variables>(
GetModRequests,
() => ({
page: null,
limit: Number(limit.value),
page: 0,
lennartkloock marked this conversation as resolved.
Show resolved Hide resolved
limit: 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",
Expand All @@ -163,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;
Expand Down Expand Up @@ -197,26 +211,18 @@ 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));
return filter.value.size
? requests.value.filter((r) => filterType.value !== filter.value.has(r.actor_country_code))
: requests.value;
});

watch(filtered, reset);
const searchQuery = ref("");

const debouncedSearch = debouncedRef(searchQuery, 500);

const amount = ref(LIMIT);
const targetMap = new Map<string, Emote>();

const loadEmotes = async (ids: string[]) => {
Expand Down