เพิ่ม filter เพื่อดู Card การลงมติล่าสุด

[Th1nkK1D]

Is your feature request related to a problem? Please describe.

• ไปที่ หน้าแรก แล้ว Scroll มาที่ส่วน การลงมติ
• User สำรวจได้เฉพาะ 5 มติล่าสุด ซึ่งสามารถทำให้น่าสนใจมากกว่านี้ได้

Describe the solution you'd like
เพิ่ม alternative ในการสำรวจตัวอย่าง ได้แก่ ‘10 มติที่ผ่านล่าสุด’ และ ‘10 มติที่ไม่ผ่านล่าสุด’

Figma Design

• แก้ไขจาก 5 มติล่าสุด เป็น 10 มติล่าสุด
• เพิ่มปุ่ม filter 2 ปุ่ม ได้แก่
  1. 10 มติที่ผ่านล่าสุด
  2. 10 มติที่ไม่ผ่านล่าสุด

โดยกำหนดให้ 10 มติล่าสุด เป็น Default

Additional context

• ในตอนนี้เรายังใช้ static site generation ซึ่ง 10 มติล่าสุด ที่เป็น default จะ ถูก query ใส่ตัวแปร voteEvents ในไฟล์ src/routes/+page.server.ts ซึ่งเมื่อมันต้องเลือก filter ได้ ย้ายการ query ทั้งหมดว่าไว้ที่ฝั่ง client-side ตรง component นี้เลยน่าจะสมเหตุสมผลกว่า เมื่อ filter ถูกเปลี่ยนก็ query ใหม่ด้วย where condition ที่เปลี่ยนไป

[SupeemAFK]

Can I take this one.

[SupeemAFK]

I saw that all the datasheet operation like fetchVotings are server-only how can I move query logic to client-side or should I make api route that call fetchVotings then use that created route for client-side.

[Th1nkK1D]

I saw that all the datasheet operation like fetchVotings are server-only how can I move query logic to client-side or should I make api route that call fetchVotings then use that created route for client-side.

Sorry for late reply, I was on the holiday. We are moving away from Google Sheets and related function like fetchVotings, to our new dedicated API called Politigraph which we can query the data using GraphQL.

First, make sure you pull the latest commits from main. Then you can see that we are using the GraphQL to query the data here:

parliament-watch/src/routes/+page.server.ts

Lines 134 to 166 in cd6d667

	const { voteEvents } = await graphql.query({
	voteEvents: {
	__args: {
	sort: [{ start_date: 'DESC' }],
	limit: MAX_LATEST_VOTE
	},
	id: true,
	title: true,
	nickname: true,
	start_date: true,
	result: true,
	end_date: true,
	organizations: {
	id: true
	}
	}
	});
	const latestVoteEvents: ComponentProps<VoteCard>[] = await Promise.all(
	voteEvents.map(async (voteEvent) => {
	const groupedVotes = groupVotesByAffiliation(await queryPoliticiansVote(voteEvent));
	const mappedGroups = groupedVotes.map((aff) => ({
	name: aff.name,
	resultSummary: optionsArrayToResultSummary(countVotesInEachOption(aff.votes))
	}));
	return {
	...voteEvent,
	date: voteEvent.start_date,
	votesSummary: buildVotesSummary({ groups: mappedGroups, result: voteEvent.result })
	};
	})
	);

We can move this logic to the frontend, in the Svelte component of this section. After that works, make it reactively update where: { status_EQ: status } when selected status change.

[SupeemAFK]

Do I need config or any .env? I pull last commit and try to run yarn dev but got generating error from genql.

[Th1nkK1D]

Do I need config or any .env? I pull last commit and try to run yarn dev but got generating error from genql.

No config and .env should be needed. Can you provide the screenshot of the error?

[SupeemAFK]

[Th1nkK1D]

@SupeemAFK Interesting, which shell / OS do you used? Somehow default variable substitution does not work. As a workaround, you can replace this line in package.json

		"gen:graphql": "genql --endpoint ${PUBLIC_POLITIGRAPH_ENDPOINT:-https://politigraph.wevis.info/graphql} --output src/lib/politigraph/genql -S Date:string -S DateTime:string",

with

		"gen:graphql": "genql --endpoint https://politigraph.wevis.info/graphql --output src/lib/politigraph/genql -S Date:string -S DateTime:string",

[Th1nkK1D]

I removed GraphQL endpoint variable substitution in 7f2b4ba, since it is only useful for very rare use case, and not worth broken on some system. Pull latest commit on main and the issue should be gone now.