mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2025-06-25 12:01:45 +02:00
Extract ItemRow out of ItemTable
This commit is contained in:
Johannes Zillmann
parent
dc11204bb1
commit
8b7ae34bbc
126
ui/src/debug/ItemRow.svelte
Normal file
126
ui/src/debug/ItemRow.svelte
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<script>
|
||||||
|
import { scale, fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
import type ItemGroup from '@core/debug/ItemGroup';
|
||||||
|
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||||
|
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
||||||
|
|
||||||
|
import ChangeSymbol from './ChangeSymbol.svelte';
|
||||||
|
import { formatValue } from './formatValues';
|
||||||
|
|
||||||
|
export let pageIdx: number;
|
||||||
|
export let itemIdx: number;
|
||||||
|
export let schema: AnnotatedColumn[];
|
||||||
|
export let itemGroup: ItemGroup;
|
||||||
|
export let changes: ChangeIndex;
|
||||||
|
export let maxPage: number;
|
||||||
|
export let pageIsPinned: boolean;
|
||||||
|
|
||||||
|
let expandedItemGroup: { pageIndex: number; itemIndex: number };
|
||||||
|
|
||||||
|
$: expanded =
|
||||||
|
expandedItemGroup && expandedItemGroup.pageIndex === pageIdx && expandedItemGroup.itemIndex === itemIdx;
|
||||||
|
|
||||||
|
const toggleRow = (pageIndex: number, itemIndex: number) => {
|
||||||
|
expandedItemGroup = expanded ? undefined : { pageIndex, itemIndex };
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
class:expandable={itemGroup.hasMany()}
|
||||||
|
class:expanded
|
||||||
|
class:changePlus={changes.isPlusChange(itemGroup.top)}
|
||||||
|
class:changeNeutral={changes.isNeutralChange(itemGroup.top)}
|
||||||
|
class:changeMinus={changes.isMinusChange(itemGroup.top)}
|
||||||
|
in:fade>
|
||||||
|
<!-- Page number in first page item row -->
|
||||||
|
{#if itemIdx === 0}
|
||||||
|
<td id="page" class="page bg-gray-50 align-top">
|
||||||
|
<div>Page {pageIdx} {pageIsPinned ? '' : ' / ' + maxPage}</div>
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td id="page" />
|
||||||
|
{/if}
|
||||||
|
<td class="align-baseline">
|
||||||
|
<ChangeSymbol {changes} item={itemGroup.top} />
|
||||||
|
</td>
|
||||||
|
<span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(pageIdx, itemIdx)}>
|
||||||
|
<!-- ID & change marker column -->
|
||||||
|
<td class="align-top">
|
||||||
|
<div class="flex space-x-0.5 items-center">
|
||||||
|
<div>{itemIdx}{itemGroup.hasMany() ? '…' : ''}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Row values -->
|
||||||
|
{#each schema as column}
|
||||||
|
<td class="select-all">{formatValue(itemGroup.top.data[column.name])}</td>
|
||||||
|
{/each}
|
||||||
|
</span>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Expanded childs -->
|
||||||
|
{#if expanded}
|
||||||
|
{#each itemGroup.elements as child, childIdx}
|
||||||
|
<tr
|
||||||
|
class="childs"
|
||||||
|
class:changePlus={changes.isPlusChange(child)}
|
||||||
|
class:changeNeutral={changes.isNeutralChange(child)}
|
||||||
|
class:changeMinus={changes.isMinusChange(child)}>
|
||||||
|
<td id="page" />
|
||||||
|
<td class="align-baseline">
|
||||||
|
<ChangeSymbol {changes} item={child} />
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap">
|
||||||
|
<div class="flex space-x-1">
|
||||||
|
<div class="w-8">{'└ ' + childIdx}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{#each schema as column}
|
||||||
|
<td class="select-all">{formatValue(child.data[column.name])}</td>
|
||||||
|
{/each}
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
@apply font-semibold;
|
||||||
|
@apply pr-4;
|
||||||
|
@apply whitespace-nowrap;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 2.4em;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
td:not(#page) {
|
||||||
|
@apply px-1;
|
||||||
|
@apply border-b;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover td:not(#page) {
|
||||||
|
@apply bg-gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.expandable:hover td:not(#page) {
|
||||||
|
@apply cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.expanded td:not(#page) {
|
||||||
|
@apply bg-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.childs td:not(#page) {
|
||||||
|
@apply bg-gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.changePlus td:not(#page) {
|
||||||
|
@apply text-green-800;
|
||||||
|
}
|
||||||
|
tr.changeMinus td:not(#page) {
|
||||||
|
@apply text-red-800;
|
||||||
|
}
|
||||||
|
tr.changeNeutral td:not(#page) {
|
||||||
|
@apply text-yellow-800;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,12 +1,13 @@
|
|||||||
<script>
|
<script>
|
||||||
import { scale, fade } from 'svelte/transition';
|
import { scale } from 'svelte/transition';
|
||||||
|
|
||||||
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
||||||
import ColumnAnnotation from '../../../core/src/debug/ColumnAnnotation';
|
|
||||||
import type ChangeIndex from '@core/debug/ChangeIndex';
|
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||||
import inView from '../actions/inView';
|
|
||||||
import { formatValue } from './formatValues';
|
|
||||||
import type Page from '@core/debug/Page';
|
import type Page from '@core/debug/Page';
|
||||||
import ChangeSymbol from './ChangeSymbol.svelte';
|
import ColumnAnnotation from '../../../core/src/debug/ColumnAnnotation';
|
||||||
|
|
||||||
|
import inView from '../actions/inView';
|
||||||
|
import ItemRow from './ItemRow.svelte';
|
||||||
|
|
||||||
export let schema: AnnotatedColumn[];
|
export let schema: AnnotatedColumn[];
|
||||||
export let pages: Page[];
|
export let pages: Page[];
|
||||||
@ -76,62 +77,7 @@
|
|||||||
|
|
||||||
<!-- Page items -->
|
<!-- Page items -->
|
||||||
{#each page.itemGroups as itemGroup, itemIdx}
|
{#each page.itemGroups as itemGroup, itemIdx}
|
||||||
<tr
|
<ItemRow {pageIdx} {itemIdx} {schema} {itemGroup} {changes} {maxPage} {pageIsPinned} />
|
||||||
class:expandable={itemGroup.hasMany()}
|
|
||||||
class:expanded={expandedItemGroup && isExpanded(page.index, itemIdx)}
|
|
||||||
class:changePlus={changes.isPlusChange(itemGroup.top)}
|
|
||||||
class:changeNeutral={changes.isNeutralChange(itemGroup.top)}
|
|
||||||
class:changeMinus={changes.isMinusChange(itemGroup.top)}
|
|
||||||
in:fade>
|
|
||||||
<!-- Page number in first page item row -->
|
|
||||||
{#if itemIdx === 0}
|
|
||||||
<td id="page" class="page bg-gray-50 align-top">
|
|
||||||
<div>Page {page.index} {pageIsPinned ? '' : ' / ' + maxPage}</div>
|
|
||||||
</td>
|
|
||||||
{:else}
|
|
||||||
<td id="page" />
|
|
||||||
{/if}
|
|
||||||
<td class="align-baseline">
|
|
||||||
<ChangeSymbol {changes} item={itemGroup.top} />
|
|
||||||
</td>
|
|
||||||
<span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(page.index, itemIdx)}>
|
|
||||||
<!-- ID & change marker column -->
|
|
||||||
<td class="align-top">
|
|
||||||
<div class="flex space-x-0.5 items-center">
|
|
||||||
<div>{itemIdx}{itemGroup.hasMany() ? '…' : ''}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<!-- Row values -->
|
|
||||||
{#each schema as column}
|
|
||||||
<td class="select-all">{formatValue(itemGroup.top.data[column.name])}</td>
|
|
||||||
{/each}
|
|
||||||
</span>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Expanded childs -->
|
|
||||||
{#if expandedItemGroup && isExpanded(page.index, itemIdx)}
|
|
||||||
{#each itemGroup.elements as child, childIdx}
|
|
||||||
<tr
|
|
||||||
class="childs"
|
|
||||||
class:changePlus={changes.isPlusChange(child)}
|
|
||||||
class:changeNeutral={changes.isNeutralChange(child)}
|
|
||||||
class:changeMinus={changes.isMinusChange(child)}>
|
|
||||||
<td id="page" />
|
|
||||||
<td class="align-baseline">
|
|
||||||
<ChangeSymbol {changes} item={child} />
|
|
||||||
</td>
|
|
||||||
<td class="whitespace-nowrap">
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
<div class="w-8">{'└ ' + childIdx}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
{#each schema as column}
|
|
||||||
<td class="select-all">{formatValue(child.data[column.name])}</td>
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
{/each}
|
{/each}
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -147,16 +93,6 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.page {
|
|
||||||
@apply font-semibold;
|
|
||||||
@apply pr-4;
|
|
||||||
@apply whitespace-nowrap;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
top: 2.4em;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
th {
|
||||||
@apply px-1;
|
@apply px-1;
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
@ -164,42 +100,4 @@
|
|||||||
top: 2.4em;
|
top: 2.4em;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
td:not(#page) {
|
|
||||||
@apply px-1;
|
|
||||||
@apply border-b;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover td:not(#page) {
|
|
||||||
@apply bg-gray-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.expandable:hover td:not(#page) {
|
|
||||||
@apply cursor-pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.expanded td:not(#page) {
|
|
||||||
@apply bg-gray-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.childs td:not(#page) {
|
|
||||||
@apply bg-gray-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.changePlus td:not(#page) {
|
|
||||||
@apply text-green-800;
|
|
||||||
}
|
|
||||||
tr.changeMinus td:not(#page) {
|
|
||||||
@apply text-red-800;
|
|
||||||
}
|
|
||||||
tr.changeNeutral td:not(#page) {
|
|
||||||
@apply text-yellow-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fontTooltip {
|
|
||||||
position: absolute;
|
|
||||||
margin-right: 15px;
|
|
||||||
right: 100%;
|
|
||||||
with: 200px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user