mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2024-11-27 18:23:36 +01: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>
|
||||
import { scale, fade } from 'svelte/transition';
|
||||
import { scale } from 'svelte/transition';
|
||||
|
||||
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
|
||||
import ColumnAnnotation from '../../../core/src/debug/ColumnAnnotation';
|
||||
import type ChangeIndex from '@core/debug/ChangeIndex';
|
||||
import inView from '../actions/inView';
|
||||
import { formatValue } from './formatValues';
|
||||
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 pages: Page[];
|
||||
@ -76,62 +77,7 @@
|
||||
|
||||
<!-- Page items -->
|
||||
{#each page.itemGroups as itemGroup, itemIdx}
|
||||
<tr
|
||||
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}
|
||||
<ItemRow {pageIdx} {itemIdx} {schema} {itemGroup} {changes} {maxPage} {pageIsPinned} />
|
||||
{/each}
|
||||
{/each}
|
||||
</tbody>
|
||||
@ -147,16 +93,6 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page {
|
||||
@apply font-semibold;
|
||||
@apply pr-4;
|
||||
@apply whitespace-nowrap;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply px-1;
|
||||
position: -webkit-sticky;
|
||||
@ -164,42 +100,4 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.fontTooltip {
|
||||
position: absolute;
|
||||
margin-right: 15px;
|
||||
right: 100%;
|
||||
with: 200px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user