wevisdemo / parliament-watch Goto Github PK

View Figma file

Depended on

• #3
• #12
• #21

Starting point

• Take a look at NavigationBar component first. They implement the search input field but not the result dropdown.
• Add a new component SearchResult which is some child under the NavigationBar
• The component should take the search keyword props bind with the value from the search input.
• Just mock the data to be filtered with the keyword as a const. The data should have the following type: (only filter from the name property)

interface SeachIndexes {
   politicians: {
     name: string;
     description: string;
   }[],
   bills: {
     name: string;
     status: BillStatus
   }[],
   votings: {
     name: string;
     result?: DefaultVotingResult
   }[]
}

• Bold the keyword in the result is nice to have. You can research if it's too difficult then it can be ignored for now.

Describe the bug
Half donut chart in section นักการเมือง is frozen

To Reproduce
Steps to reproduce the behavior:

1. Go to https://parliamentwatch.wevis.info/assemblies/%E0%B8%AA%E0%B8%A0%E0%B8%B2%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%81%E0%B8%97%E0%B8%99%E0%B8%A3%E0%B8%B2%E0%B8%A9%E0%B8%8E%E0%B8%A3-25
2. click angle right icon to change data set
3. see at chart, it will not changed

Expected behavior
It should be changed related to data set

Screenshots
this is first time

this is after I change data set

you can see chart is frozen even though data in right section is changed.

Desktop (please complete the following information):

• OS: mac 14.5
• Browser chrome
• Version 127.0.6533.89

View Figma file

We have an old version of the component which was designed specifically for the politician's page. We want to refactor it and make it a shared component.

Starting point

• Create a new component with yarn gen:component
• Copy code from the old component src/components/politicians/VotingOptionTag.svelte.svelte
• Can develop the component in Histoire with yarn story:dev
• Some code can be improved
  • I feel like label assignment in every case of the switch is a bit redundant.
  • Does if (typeof voteOption === 'string') appropriated? or do we need that if else at all?
  • This is not a strong opinion, feel free to give your own idea, but don't change the component props or behavior.
• Remove the old component, and make sure that the new one is used instead.
• Don't forget to include all variations in the Histoire's story.

See Figma file

Scope of Work

• Scroll to top floating button is not a part of this issue

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Logo is in /static/images/logo
• Some icons are already available in src/components/icons (available in Histoire as well).

View Figma

Suggested props

• changes: array of given mock data type below : represent changes data to be rendered as a list (required)
• selectedDate: Date | undefined (default is undefined): date to be highlighted with dark shade

Behavior

• Changes must be grouped by the date (Figma shows the same date, but it should be different and sort the newest at the top)
• The component shows everything in changes props, pagination is out of this component's scope.
• We don't have event name and change reason data yet. No need to do it.
• Click politician name link to /politicians/{politician.id}

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Check other components on the stories page first. Reuse components as much as possible.
• Don't forget to write Histoire's story.
  • Add variances with and without given selectedDate using Hst.Variant(see doc)
  • Add shared control for all the props (except orientation) (see doc)

Mock data

const mockChanges = [
  {
    date: new Date("2024-05-27"),
    type: "in",
    politician: {
      id: "มาริษ-เสงี่ยมพงษ์",
      firstname: "มาริษ",
      lastname: "เสงี่ยมพงษ์",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รัฐมนตรีว่าการกระทรวงต่างประเทศ"
  },
  {
    date: new Date("2024-05-27"),
    type: "out",
    politician: {
      id: "ปานปรีย์-พหิทธานุกร",
      firstname: "ปานปรีย์",
      lastname: "พหิทธานุกร",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รัฐมนตรีว่าการกระทรวงต่างประเทศ"
  },
  {
    date: new Date("2024-05-27"),
    type: "in",
    politician: {
      id: "สุริยะ-จึงรุ่งเรืองกิจ",
      firstname: "สุริยะ",
      lastname: "จึงรุ่งเรืองกิจ",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รองนายกรัฐมนตรี"
  },
  {
    date: new Date("2024-05-20"),
    type: "out",
    politician: {
      id: "ปานปรีย์-พหิทธานุกร",
      firstname: "ปานปรีย์",
      lastname: "พหิทธานุกร",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รองนายกรัฐมนตรี"
  },
];

See Figma file

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Should have voting and highlightedVoteByGroups props which are the same type as described in the Interface VoteCard in src/routes/assemblies/[id]/+page.ts
• 3 variations from the design depend on voting.result, either if it's DefaultVotingResult.Passed, DefaultVotingResult.Failed, or any string

Please open a PR merging into branch cabinet/main

Tasks

1. Bill explore page

• Web: https://parliamentwatch.wevis.info/bills/explore
• Code: src/routes/bills/explore

1.1 Update "ชื่อผู้เสนอ" dropdown

• Include cabinet and split politician/assembly section like

-----บุคคล ------
กรณิศ งามสุคนธ์รัตนา
กัณวีร์ สืบแสง
เกรียงศักดิ์ ฝ้ายสีงาม
…
อุทัย พิมพ์ใจชน
-----คณะรัฐมนตรี ------
คณะรัฐมนตรี ชุดที่ 63 (ประยุทธ์, 2563)
คณะรัฐมนตรี ชุดที่ 64 (เศรษฐา, 2566)
คณะรัฐมนตรี ชุดที่ <term> (<prime minister first name>, <started year>)

• You can use disable items for section separator.

1.2 Make the list filterable by the cabinet in the dropdown

• Update filter logic to look up in proposedByCabinetId too.

1.3 Read query params when mounted and set the dropdown value

• There is already an implementation in the onMount function. Please check if it works for both politicians and the cabinet.

2. Add a link from the cabinet page

• Web: /assemblies/<cabinet_id>
• Code: src/routes/assemblies/[id]/+page.svelte

• The link should take the user to the bill explore page and set the current cabinet correctly in the filter dropdown.

Component src/components/Assemblies/SummaryGroup.svelte

Changes needed:

• Hide the half-circle chart only when the assembly is cabinet.
• For every type of assembly: Add top-left arrow icon. Remove link and hover state from the whole container, and move that link to the arrow. Suggest using title attribute for the tool-tip (need to check if it's working)

View Figma

View Figma file

Depended on

• #21
  Can do other parts of the component first if the issue is not closed yet

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Add the following props:
  • orientation: 'landscape' | 'portrait' default = 'landscape'
  • nickname: string
  • title: string (ชื่อทางการ)
  • proposedBy: { avatar: string, name: string, description: string }
  • proposedOn: Date
  • status: BillStatus defined in src/models/bill.ts
  • currentState: string | undefined
  • daySinceProposed: number
  • billUrl: string
• Don't forget to write Histoire's story.
  • Mock data according to Figma. Use placeholder image from https://placehold.co. Use # for billUrl for now.
  • Put both orientations in different Hst.Variant in grid layout (see doc)
  • Add shared control for all the props (except orientation) (see doc)

Describe the bug

• 'Null' appears in some voting titles
• But in the voting detail page the title display correctly

To Reproduce
Steps to reproduce the behavior:

1. Go to https://parliamentwatch.wevis.info/assemblies/%E0%B8%AA%E0%B8%A0%E0%B8%B2%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%81%E0%B8%97%E0%B8%99%E0%B8%A3%E0%B8%B2%E0%B8%A9%E0%B8%8E%E0%B8%A3-25/votes

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: Mackbook Air
• OS: Mac OS
• Browser: Arc
• Version 1.56.0 (52658)

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

View Figma file

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Add the following props:
  • label: string
  • isLarge: boolean If true, show the large variation. (default = false = small)
• Don't forget to write Histoire's story. Add control for both props (see doc)

Current situation

The search functionality was implemented in #39 for the NavigationBar. Our search strategy is to create a SearchIndexes data that provides minimum data which will be filtered and shown in SearchResults. However, it only works with 3 fixed types of categories: politicians (นักการเมือง), bills (กฏหมาย), and votings (การลงมติ) as defined in src/models/search.ts

The corresponding UI looks like this:

What we want

Search functionality must be refactored in order to be able to be used in 2 more places

1. Bills Page: search for bills and proposers (view Figma)
   
2. Home Page: has 3 separate search inputs, each search for politicians, bills, and votings only one category per input. (view Figma)
   

I think the solution is to add support for the new category in SearchIndexes and SearchResults, and make it optional so each search input doesn't need to have the same category.

Starting point

1. Model defined in src/models/search.ts
2. Search function in src/libs/search.ts
3. SearchItem, SearchResult, SearchResultGroup components in src/components
4. Since the input UI for Bills and Home Page is the same, I suggest you create a new SearchInput component (with yarn gen:component) based on Carbon's TextInput which received flexible SearchIndexes props. You can just mock it as a const for now.
5. No need to add to the Bill and Home Page route. You can work fully on the Histoire notebook with yarn story:dev
6. Don't forget to update documentation (story file) and test to cover new use cases if necessary.

Important Please feel free to raise an issue if something is not making sense, or you found a better way to do it.

Add the cabinet's member section to the assembly page. Keep representative and senate the same, only cabinet.

View Figma

Notes

• Replace these lines of src/routes/assemblies/[id]/+page.svelte

{#if isCabinet}
	{JSON.stringify(mainMembers)}
{/if}

• There is a PoliticianProfile component. We might need to make changes to that component to make showing the avatar image optional.
• Don't forget to make it responsive.

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

View Figma

Starting point

• The Sidebar component was already implemented in /legislative-process page (source: src/routes/legislative-process/+page.svelte).
• Add a logic that when user scroll into each section, the item in side bar is highlighted (like แนะนำภาพรวม from the screenshot)
  • Can use scrollama to detect the section. See example in src/routes/politicians/[id]/+page.svelte that implement similar thing.
  • Try isSelected props on the SideMenuItem component ref

issue of overflowing is coming from NavigationBar.svelte the width is set to w-screen has need to change to w-full instead
and the weird flickering effect on slide animation is coming from <header> tag class has been using sticky and it will taking a space of window while user scrolling down the nav will get hidden cause a window's Y axis got shorter and then event will fired to scrollEventHandler and that will cause nearly infinite loop on window's Y axis , to fix this issue need to change sticky class to fixed instead to made NavigationBar component not take any space in window and then need to set a class mt-12 (the height of NavigationBar component) to the wrapper of main <slot/> in routes/+layout.svelte to push the main content down and prevent main content got overlapped by NavigationBar component

See Figma file

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• The button should be hidden when the user is already at the top.
• When the user is not at the top, floating as a position fix at the bottom right corner. Refer to the margin here
• When clicked, smoothly scroll the page to the top.

View Figma file

Scope of work

• You don't need to add a link to each menu yet.
• The search function doesn't need to work yet. Only focus on the UI.
• Blue/Purple announcement banner is not a part of this issue

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Logo is in /static/images/logo
• Don't start from scratch, take a look at Carbon's UI Shell

View Figma

Notes

• Use data from latestBills variable in src/routes/assemblies/[id]/+page.svelte page.
• You can use Carbon's Data Table components.
• Bill's nickname links to /bills/{bill.id}.
• You can use a BillStatusTag component for the "สถานะ" column.
• The "มีขั้นตอนอะไรบ้างกว่าจะผ่านกฏหมายสำเร็จ?" popup was already implemented in /bills page. Try to reuse it.
• Use href="#" for "ดูร่างกฎหมายทั้งหมด" link. (We haven't implemented the destination page yet). I think you can use the button component from Carbon as well.

View Figma file

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Add the following props:
  • status: BillStatus defined in src/models/bill.ts
  • isLarge: boolean If true, show the large variation. (default = false = small)
• Don't forget to write Histoire's story.
  • Put 4 statuses in different Hst.Variant in grid layout (see doc)
  • Add shared control for isLarge prop (see doc)

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

See Figma file

Scope of Work

• label "ประธานสภา" is not under this issue's scope

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Component would has the following props:
  • id, firstname, lastname, avatar as a string
  • party as a Party
  • role as a string
  • isLarge as a boolean, to switch between the variation (default = false = small)

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

Create a branch cabinet/<name> and PR to merge into cabinet/main

Currently, this section uses mock data:

We need to add logic to changes to src/routes/assemblies/[id]/+page.server.ts to provide correct data to the UI (without changing both variable's types).

• changes should be created from politicians variable by filtering their assemblyRoles that match the current (cabinet) assembly.
• latestBills just filter by proposedByAssemblyId that matches the current (cabinet) assembly.

The summary section on the assembly page currently does not support a cabinet.

Current behavior

1. Representatives /assemblies/สภาผู้แทนราษฎร-26

2. Senates /assemblies/วุฒิสภา-12

3. Broken for the cabinet /assemblies/คณะรัฐมนตรี-62

Expectation

Show information correctly. Adding new design for the cabinet, but keeping representatives and senates the same.

View Figma

Starting point

• Assembly page src/routes/assemblies/[id]/+page.svelte
• Summary Component src/components/Assemblies/Summary.svelte

• Starting from src/routes/politicians/[id]/+page.svelte
• Move to src/components/DownloadData/DownloadData.svelte
• Receive prop with a type of Link[] (Link type declared in src/models)
• show icon based on if the URL includes .pdf or .csv
• Add story file src/components/DownloadData/DownloadData.story.svelte. Read more in Readme

See Figma: https://www.figma.com/file/cdtZnPegHm5CGHWqIND5Im/Design_Phase01?type=design&node-id=40-67247&mode=design&t=Z4UrxedaXd9XnNM7-0

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

View Figma file

Scope of work

• There are 3 variations of proposer based on given props (Top to button in Figma)
  1. Giving Politician and Party (defined in src/models), using Politician's avatar
  2. Giving Assembly (defined in src/models), using the static icon from Figma
  3. Giving custom name and description, using the static icon from Figma
• No need to add a link yet, don't need to add an underline style.
• Left and right variation is for the responsiveness in Figma. For development no need for additional props, just wrap the content into the new line.

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• You can design or discuss how the props of this component should look like.
• Don't forget to write Histoire's story.
  • Mock data according to Figma.
  • Put all 3 orientations in different Hst.Variant in grid layout (see doc)
  • Add shared control for all the props (except orientation) (see doc)

This is a challenging issue that might cause related changes to the current assembly data structure.

Create a branch cabinet/<name> and PR to merge into cabinet/main

Each assembly will have a members page at /assemblies/[id]/members. Correctly it's working fine for representative and senate, but it is broken and doesn't match the design yet for cabinet type.

We need to make some changes to support the cabinet and still support the current representative/senate, or propose the solution if it is too complex to change.

View Figma

This is a huge issue and requires some experimentation. Please read carefully.

View Figma file for more detail brief

Notes

• Starting route file: src/routes/assemblies/[id]/changes/+page.svelte. Currently has no UI, just the data prepared by adjacent +page.server.ts
  • assembly = assembly info
  • availableAssemblies = list of all assemblies to create a navigation link
  • assemblyRoles = list of every combination of politicians (id) and their role in the current assembly (one politician can have more than one role. This is the correct behavior. The member list in the main assembly page is incorrect since current logic removes duplicated politicians, but fixing it is out of this issue's scope)
  • members politician information that exists in assemblyRoles
• This page should be available only for cabinet. you can use path /assemblies/คณะรัฐมนตรี-63/changes for testing.
• The main logic is to sync selected date between the bar chart, date picker, members tabs, and the timeline tab.
• Try to reuse previously created components including #78, and #80, components used in assembly pages or others. Can make some changes if necessary.
• Some parts of the design have not yet validated the technical feasibility. If you find something impossible or too complicated to implement, you can suggest an alternative solution or ask for discussion

I bring this issue up in order to inform you that i've added this repo to Bangkok Open Source Festival '23 event since i think that your project can help a lot of people interesting in Thai Parliament. That is a very important factor nowadays.

I think adding this repo to the event will help promoting it to others people and contributors to bring more interesting works into your repo. You can take a look at the event repo here Bangkok Open Source Festival '23 repository, and your project will be shown in the event website here.

Thanks for making this thing up so far! i will help contributing to Parliament Watch as well.

View Figma file

We have an old version of the component which was designed specifically for the politician's page. We want to add more features and make it a shared component.

Starting point

• Create a new component with yarn gen:component
• Copy code from the old component src/components/politicians/VotingResultTag.svelte
• Can develop the component in Histoire with yarn story:dev
• Add the following feature
  • Add purple variation, when the result is not DefaultVotingResult
  • Create new props called isLarge. If true, show the large variation. (default = false = small)
• Remove the old component, and make sure that the new one is used instead.
• Don't forget to include all variations in the Histoire's story.

Scope

Only what is included in the screenshot

View Figma

Starting point

1. The page is available at /legislative-process (source: srv/routes/legislative-process)
2. Put the content under the right heading.
3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process

View Figma file

Depended on

• #20
  Can do the component first if the issue is not closed yet

Scope of work

• Add all the headings and subheadings according to the design.
• Ignore the active indicator, for now, treat every item on the sidebar as a normal item.
• Might need to wait for #20 to be completed first to do:
  • Smooth scroll to each section on the body when clicking on the corresponding heading.
  • Responsive layout for both desktop/mobile screens.

Starting point

• Create a new component file at src/components/legislative-process/Sidebar.svelte.
• The carbon design system has SideNav in UI Shell I'm not sure if it will fit our use case. If not, we might need to create it from scratch.
• The component should be used in the /legislative-process page. The route file is located at src/routes/legislative-process/+page.svelte.

View Figma file

Scope of work

• Add a Blue Title section. Use the current timestamp for the updated date for now.
• Don't need to do the sidebar. (Splitted into another issue #28 )
• No need to add the top breadcrumb.
• Add every heading 1 and heading 2 text, that shows on the sidebar, to the body but don't add other content yet.
  • Add styles and spacing in a way that content in each section can be added separately without concerning the body layout.
• The body should be responsive. Desktop size should have max-width for the body (use the size from Figma) so that the paragraph shouldn't be too long.

Starting point

• The page will be at the URL /legislative-process. The route file is located at src/routes/legislative-process/+page.svelte.

Step to reproduce

1. Open https://parliament-watch.pages.dev/politicians/สมชาติ-สกุลสมมุติ/votes in the mobile screen size of responsive mode

Current incorrect behaviors

1. Filter button in the bottom left is barely visible. The background is missing. (This one also occurs in desktop size)
   

2. When opening the hamburger menu, the filter button is still showing.

3. The navigation bar is in front of the filter panel, which hides the search box and close button.

Tested on Firefox and Chromium on Linux

Expectation

1. The filter button should have interactive-01 color. (See Figma)
2. The sidebar opened with the hamburger menu should be in front of the filter button.
3. The filter panel should be in front of the navigation bar

Starting point

1. DataPage component (contain the filter button and panel) src/components/DataPage/DataPage.svelte
2. NavigationBar component (contain the hamburger menu and sidebar) src/components/NavigationBar/NavigationBar.svelte

• Starting from src/components/politicians/Share.svelte
• Move to src/components/Share/Share.svelte
• Add prop to custom the label "แชร์ประวัติ" the default value should be "แชร์"
• Correct every file that previously used the Share component
• Add story file src/components/Share/Share.story.svelte. Read more in Readme