Skip to content

Commit

Permalink
fix: remove data page loading skeleton causing uncrawed pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Th1nkK1D
Th1nkK1D committed Jun 14, 2024
1 parent b5a79df commit b027cb2
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 98 deletions.
7 changes: 0 additions & 7 deletions src/components/DataPage/DataPage.story.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
let searchQuery = '';
let selectedCheckboxValue: SelectedCheckboxValueType;
let selectedComboboxValue: SelectedComboboxValueType;
let mounted: boolean;
$: filteredData =
selectedCheckboxValue === undefined ||
Expand Down Expand Up @@ -89,7 +88,6 @@
bind:searchQuery
bind:selectedCheckboxValue
bind:selectedComboboxValue
bind:mounted
>
<h1 class="fluid-heading-03">ประวัติการลงมติ</h1>
<svelte:fragment slot="table" let:cellKey let:cellValue>
Expand Down Expand Up @@ -123,10 +121,5 @@
>{JSON.stringify(selectedCheckboxValue, null, 2)}</code
></pre>
</section>
<section class="mb-2 border border-solid border-white p-2">
<strong class="mb-2 block">Is Component Mounted?</strong>
<pre class="border border-solid border-gray-50 p-2"><code>{mounted?.toString() ?? ''}</code
></pre>
</section>
</svelte:fragment>
</Hst.Story>
151 changes: 60 additions & 91 deletions src/components/DataPage/DataPage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@
export let selectedCheckboxValue: SelectedCheckboxValueType = Object.fromEntries(
checkboxFilterList.map((group) => [group.key, group.choices.map((choice) => choice.value)])
);
export let mounted = false;
export let downloadSize: 'sm' | 'lg' | 'otherPossibleValue' = 'sm';
export let downloadLinks: Link[] = [];
Expand Down Expand Up @@ -121,8 +120,8 @@
let comboboxInternal: Record<string, string> = {};
let showFilter = true;
let isMobile = false;
onMount(() => {
mounted = true;
showFilter = window.matchMedia(`(min-width: 672px)`).matches;
isMobile = !showFilter;
});
Expand Down Expand Up @@ -183,33 +182,24 @@
<LinkTable links={downloadLinks} />
</div>
<Search
class="md:hidden {!mounted ? '-mt-4' : ''}"
class="md:hidden"
searchClass="md:hidden mt-2"
placeholder={searchPlaceholder}
light
bind:value={searchQuery}
skeleton={!mounted}
/>
</div>
</header>
<div class="flex w-full flex-1 gap-1 bg-ui-01">
{#if showFilter}
<aside
class="fixed top-0 z-50 flex h-screen w-full flex-[0_0_250px] flex-col overscroll-none bg-white md:sticky md:z-30 md:h-auto md:max-h-screen md:w-[250px]"
class:md:flex={!mounted}
class:hidden={!mounted}
>
<div
class="sticky top-0 z-30 flex w-full bg-white pl-6 duration-300 md:top-12"
class:md:top-12={showHeader}
>
<Search
class="flex-1 {!mounted ? '-mt-6' : ''}"
placeholder={searchPlaceholder}
light
bind:value={searchQuery}
skeleton={!mounted}
/>
<Search class="flex-1" placeholder={searchPlaceholder} light bind:value={searchQuery} />
<Button
kind="ghost"
icon={Minimize}
Expand All @@ -219,7 +209,6 @@
on:click={() => {
showFilter = false;
}}
skeleton={!mounted}
/>
</div>
<div class="h-0 flex-[1_1_auto] overflow-y-scroll px-6 py-4">
Expand All @@ -231,7 +220,7 @@
on:select={(e) => (selectedComboboxValue[optionGroup.key] = e.detail.selectedId)}
on:clear={() => (selectedComboboxValue[optionGroup.key] = undefined)}
items={optionGroup.choices}
disabled={!mounted || !renderCombobox}
disabled={!renderCombobox}
selectedId={comboboxInternal[optionGroup.key]}
{shouldFilterItem}
/>
Expand All @@ -247,7 +236,6 @@
bind:group={selectedCheckboxValue[optionGroup.key]}
value={choice.value}
labelText={choice.label}
skeleton={!mounted}
/>
{/each}
</FormGroup>
Expand All @@ -257,97 +245,78 @@
<Button
class="min-w-0 flex-[2_2_0%] pr-4"
kind="tertiary"
on:click={() => filterTickAll(false)}
skeleton={!mounted}>ล้างตัวเลือก</Button
on:click={() => filterTickAll(false)}>ล้างตัวเลือก</Button
>
<Button
class="min-w-0 flex-[2_2_0%] pr-4"
kind={'tertiary' || 'secondary'}
on:click={() => filterTickAll()}
skeleton={!mounted}>เลือกทั้งหมด</Button
on:click={() => filterTickAll()}>เลือกทั้งหมด</Button
>
<Button
class="min-w-0 flex-1 pr-4 md:hidden"
on:click={() => {
showFilter = false;
}}
skeleton={!mounted}>ดูที่เลือก</Button
}}>ดูที่เลือก</Button
>
</div>
</aside>
{/if}
<div class="flex flex-1 flex-col bg-white">
{#if mounted}
<div class="overflow-x-auto overflow-y-hidden">
<DataTable
class="w-0 min-w-full pt-0"
size="tall"
headers={tableHeader}
rows={filteredData}
pageSize={tablePageSize}
page={tableCurrentPage}
>
<svelte:fragment slot="cell-header" let:header>
{#if header.key === 'files'}
<span>เอก<br class="md:hidden" />สาร</span>
{:else}
{header.value}
{/if}
</svelte:fragment>
<svelte:fragment slot="cell" let:cell let:row>
<slot name="table" cellKey={cell.key} cellValue={cell.value} {row} />
</svelte:fragment>
</DataTable>
</div>
{#if filteredData.length === 0}
<div
class="body-compact-01 flex h-10 items-center border-b border-solid border-b-ui-03 px-4 text-gray-60"
>
ไม่พบข้อมูลที่ค้นหา
</div>
{/if}
<div class="flex-1" />
<div class="sticky bottom-0">
{#if !showFilter}
<Button
class="m-4"
tooltipAlignment="start"
tooltipPosition="top"
iconDescription="แสดงตัวเลือก"
icon={isFilterNotDefault ? FilterEdit : Filter}
kind={isFilterNotDefault ? 'secondary' : 'primary'}
on:click={() => {
showFilter = true;
}}
skeleton={!mounted}
/>
{/if}
<Pagination
class="overflow-x-hidden"
pageSize={tablePageSize}
bind:page={tableCurrentPage}
totalItems={filteredData.length}
pageSizeInputDisabled
forwardText="หน้าถัดไป"
backwardText="หน้าก่อนหน้า"
itemRangeText={(min, max, total) => `${min} - ${max} จาก ${total} มติ`}
pageRangeText={(_, total) => `จาก ${total} หน้า`}
/>
</div>
{:else}
<div class="overflow-x-auto overflow-y-hidden">
<DataTableSkeleton
class="w-0 min-w-full pt-0"
size="tall"
headers={tableHeader}
rows={10}
showHeader={false}
showToolbar={false}
/>
<div class="overflow-x-auto overflow-y-hidden">
<DataTable
class="w-0 min-w-full pt-0"
size="tall"
headers={tableHeader}
rows={filteredData}
pageSize={tablePageSize}
page={tableCurrentPage}
>
<svelte:fragment slot="cell-header" let:header>
{#if header.key === 'files'}
<span>เอก<br class="md:hidden" />สาร</span>
{:else}
{header.value}
{/if}
</svelte:fragment>
<svelte:fragment slot="cell" let:cell let:row>
<slot name="table" cellKey={cell.key} cellValue={cell.value} {row} />
</svelte:fragment>
</DataTable>
</div>
{#if filteredData.length === 0}
<div
class="body-compact-01 flex h-10 items-center border-b border-solid border-b-ui-03 px-4 text-gray-60"
>
ไม่พบข้อมูลที่ค้นหา
</div>
<div class="flex-1" />
<PaginationSkeleton />
{/if}
<div class="flex-1" />
<div class="sticky bottom-0">
{#if !showFilter}
<Button
class="m-4"
tooltipAlignment="start"
tooltipPosition="top"
iconDescription="แสดงตัวเลือก"
icon={isFilterNotDefault ? FilterEdit : Filter}
kind={isFilterNotDefault ? 'secondary' : 'primary'}
on:click={() => {
showFilter = true;
}}
/>
{/if}
<Pagination
class="overflow-x-hidden"
pageSize={tablePageSize}
bind:page={tableCurrentPage}
totalItems={filteredData.length}
pageSizeInputDisabled
forwardText="หน้าถัดไป"
backwardText="หน้าก่อนหน้า"
itemRangeText={(min, max, total) => `${min} - ${max} จาก ${total} มติ`}
pageRangeText={(_, total) => `จาก ${total} หน้า`}
/>
</div>
</div>
</div>
</div>

0 comments on commit b027cb2

Please sign in to comment.