[component] Promises Overview

[Th1nkK1D]

Idea

• This is a huge issue. Can be split into several components such as Chart, Tab, ActiveFilter, StatusExplanationDialog, etc. as you preferred
• Only use the state to store active tab and is status dialog open (Open by ข้อมูลเพิ่มเติม button), the rest is passed through props
• Fire the event when the filter is changed (user click remove active filter)

Depends on

• 21

• 20

Used by

• 7

[nathakits]

@Th1nkK1D I'm trying to do what you told me but I'm unsure where to start. Could you give me more detail?

State ที่หา promise ไม่เจอ (empty state)
ไอค่อนพรรคที่แสดงตรงตัวฟิวเตอร์

[Th1nkK1D]

@Th1nkK1D I'm trying to do what you told me but I'm unsure where to start. Could you give me more detail?

State ที่หา promise ไม่เจอ (empty state)
ไอค่อนพรรคที่แสดงตรงตัวฟิวเตอร์

Sure! The main component is in components/explore/promise-overview/promise-overview.vue which also import other components in the same folder.

The component is in /pages/explore.vue which you can also tweak the props to see the behavior (There are component tests but it can be difficult to see the component visually)

For the incomplete tasks. First is the empty state. When promises props is an empty array :promises="[]", this is what we expect (according to the Figma):

but this is the current version:

We need to hide the right column and change some styles.

Second, an icon in the filter tag. When the filter is in the filters props eg. :filters="[{ type: 'party', value: 'พลังประชารัฐ' }]" the icon should show before the party name. This is what we expect (according to the Figma):

but this is the current version:

We need to add a condition to provide the correct icon image (which should already exist in static/images) according to the given filter type and value in components/explore/promise-overview/filter-chip.vue

Thank you for your helps krub!

[nathakits]

@Th1nkK1D Sorry I've been busy kub. Thank you for the explanation. I will try and follow your suggestions.

By the way when is this project due?

[Th1nkK1D]

@Th1nkK1D Sorry I've been busy kub. Thank you for the explanation. I will try and follow your suggestions.

By the way when is this project due?

Don't worry, nothing is rushed with this project. I'll be back finalizing everything after the BKK election (22 May) krub.

[nathakits]

@Th1nkK1D I have implemented both empty promises state and also the filter icons and updated the active filter test