fix: remove mock count in status card and make unit changeable in dat…

…a page (#148) * fix: remove text from all bill status cards and change text in Bill Explore Page * fix: improve unit prop
wevisdemo · Oct 22, 2024 · 98b89a9 · 98b89a9
1 parent c3dcc68
commit 98b89a9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/src/components/DataPage/DataPage.story.md b/src/components/DataPage/DataPage.story.md
@@ -56,17 +56,18 @@ export type SelectedComboboxValueType = Record<
 | `filteredData`       | `{ id: any; [key: string]: any }[]`       | ข้อมูลใส่ตารางที่ผ่านการ filter มาจากด้านนอกแล้ว  |
 | `tableHeader`        | `{ key: string; value: string }[]`        | ข้อมูลหัวตาราง                                    |
 | `tablePageSize`      | `number = 10`                             | จำนวนข้อมูลต่อหน้า                                |
+| `unit`               | `string = 'มติ หรือ คำที่เกี่ยวข้อง'`     | คำที่แสดงในส่วนท้ายของ DataPage component         |
 
 ## Reactive Props
 
 Props เหล่านี้ต้อง `bind:props` เพื่อให้ parent component สามารถทราบ state ด้านใน component ได้
 
-| Props                        | Type                                                 | Meaning                                                                                                        |
-| ---------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `bind:searchQuery`           | `string = ""`                                        | ข้อความในกล่องค้นหา                                                                                            |
-| `bind:selectedComboboxValue` | `SelectedComboboxValueType = ทุกช่องเป็น undefined*` | เป็น Object ที่จะมี key เป็น key ของ combobox นั้น และ value เป็น value ของ combobox นั้นๆ                     |
+| Props                        | Type                                                 | Meaning                                                                                                         |
+| ---------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `bind:searchQuery`           | `string = ""`                                        | ข้อความในกล่องค้นหา                                                                                             |
+| `bind:selectedComboboxValue` | `SelectedComboboxValueType = ทุกช่องเป็น undefined*` | เป็น Object ที่จะมี key เป็น key ของ combobox นั้น และ value เป็น value ของ combobox นั้นๆ                      |
 | `bind:selectedCheckboxValue` | `SelectedCheckboxValueType = ทุกชอยส์**`             | เป็น Object ที่จะมี key เป็น key ของ checkbox กลุ่มนั้น และ value เป็น array ของ choice ของกลุ่ม checkbox นั้นๆ |
-| `bind:mounted`               | `boolean = false`                                    | เอาไว้ sync กับด้านนอกว่าตอนนี้ DataPage mount แล้วหรือยัง                                                     |
+| `bind:mounted`               | `boolean = false`                                    | เอาไว้ sync กับด้านนอกว่าตอนนี้ DataPage mount แล้วหรือยัง                                                      |
 
 > - \*ทุกช่องเป็น undefined = `Object.fromEntries(comboboxFilterList.map((group) => [group.key, undefined]));`
 > - \*ทุกชอยส์ = `Object.fromEntries(checkboxFilterList.map((group) => [group.key, group.choices.map((choice) => choice.value)]));`

diff --git a/src/components/DataPage/DataPage.story.svelte b/src/components/DataPage/DataPage.story.svelte
@@ -73,11 +73,13 @@
 							? e.type === selectedComboboxValue.filterComboboxType
 							: true)
 				);
+	let unit = 'มติ';
 </script>
 
 <Hst.Story title="DataPage" layout={{ type: 'single', iframe: true }}>
 	<div class="body-02 bg-white font-sans">
 		<DataPage
+			{unit}
 			{breadcrumbList}
 			{searchPlaceholder}
 			{comboboxFilterList}
@@ -115,6 +117,7 @@
 		<Hst.Number bind:value={tablePageSize} title="(Prop) Table Page Size" />
 		<hr />
 		<Hst.Text bind:value={searchQuery} title="(Reactive) Search Query" />
+		<Hst.Text bind:value={unit} title="(Prop) unit" />
 		<section class="mb-2 border border-solid border-white p-2">
 			<strong class="mb-2 block">Selected Filter?</strong>
 			<pre class="border border-solid border-gray-50 p-2"><code

diff --git a/src/components/DataPage/DataPage.svelte b/src/components/DataPage/DataPage.svelte
@@ -43,10 +43,8 @@
 		Checkbox,
 		ComboBox,
 		DataTable,
-		DataTableSkeleton,
 		FormGroup,
 		Pagination,
-		PaginationSkeleton,
 		Search
 	} from 'carbon-components-svelte';
 	import Filter from 'carbon-icons-svelte/lib/Filter.svelte';
@@ -145,6 +143,8 @@
 			renderCombobox = true;
 		});
 	};
+
+	export let unit = 'มติ';
 </script>
 
 <svelte:window on:scroll|passive={scrollEventHandler} />
@@ -313,7 +313,7 @@
 					pageSizeInputDisabled
 					forwardText="หน้าถัดไป"
 					backwardText="หน้าก่อนหน้า"
-					itemRangeText={(min, max, total) => `${min} - ${max} จาก ${total} มติ`}
+					itemRangeText={(min, max, total) => `${min} - ${max} จาก ${total} ${unit}`}
 					pageRangeText={(_, total) => `จาก ${total} หน้า`}
 				/>
 			</div>

diff --git a/src/components/LegislativeProcess/BillStatusCard.svelte b/src/components/LegislativeProcess/BillStatusCard.svelte
@@ -4,7 +4,7 @@
 	import BillStatusTag from '../BillStatusTag/BillStatusTag.svelte';
 
 	export let billStatus: BillStatus;
-	export let billAmount: string;
+	// export let billAmount: string;
 	export let descriptionTitle: string | null;
 	export let descriptionList: Array<string>;
 	export let learnMoreLabel: string;
@@ -26,13 +26,7 @@
 			isLarge={true}
 			status={billStatus}
 		/>
-		<div
-			class="my-2 text-sm font-semibold
-		"
-		>
-			จำนวน {billAmount} ฉบับ
-		</div>
-		<div class="text-sm font-normal">
+		<div class="mt-2 text-sm font-normal">
 			{descriptionTitle}
 			<ul class="px-4">
 				{#each descriptionList as list}

diff --git a/src/routes/bills/explore/+page.svelte b/src/routes/bills/explore/+page.svelte
@@ -149,6 +149,7 @@
 
 <DataPage
 	bind:this={cmpDataPage}
+	unit="ร่างกฎหมาย"
 	tablePageSize={50}
 	breadcrumbList={[
 		{ url: '/', label: 'หน้าหลัก' },