1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<script lang="ts" context="module">
import {
type Action,
type FlowAction,
type GenericPage,
type Shelf,
type TitledParagraph,
isFlowAction,
} from '@jet-app/app-store/api/models';
interface TitledParagraphShelf extends Shelf {
items: [TitledParagraph];
}
interface VersionHistoryPage extends FlowAction {
page: 'versionHistory';
pageData: GenericPage;
}
export function isTitledParagraphShelf(
shelf: Shelf,
): shelf is TitledParagraphShelf {
const { contentType, items } = shelf;
return contentType === 'titledParagraph' && Array.isArray(items);
}
function isVersionHistoryFlowAction(
action: Action,
): action is VersionHistoryPage {
return isFlowAction(action) && action.page === 'versionHistory';
}
</script>
<script lang="ts">
import { createEventDispatcher, type SvelteComponent } from 'svelte';
import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
import ContentModal from '~/components/jet/item/ContentModal.svelte';
import TitledParagraphItem, {
isTitledParagraphItem,
} from '~/components/jet/item/TitledParagraphItem.svelte';
import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
import ShelfTitle from '~/components/Shelf/Title.svelte';
import { getI18n } from '~/stores/i18n';
import { getJetPerform } from '~/jet';
import { VERSION_HISTORY_MODAL_ID } from '~/utils/metrics';
const perform = getJetPerform();
export let shelf: TitledParagraphShelf;
let modalComponent: SvelteComponent;
let modalTriggerElement: HTMLElement | null = null;
const { seeAllAction } = shelf;
const i18n = getI18n();
const translateFn = (key: string) => $i18n.t(key);
const handleModalClose = () => modalComponent.close();
const handleOpenModalClick = (e: Event) => {
modalTriggerElement = e.target as HTMLElement;
modalComponent?.showModal();
perform(destination);
};
const destination =
seeAllAction && isVersionHistoryFlowAction(seeAllAction)
? seeAllAction
: undefined;
const pageData = destination?.pageData;
</script>
<ShelfWrapper {shelf}>
<div slot="title" class="title-container">
{#if shelf.title}
<button on:click={handleOpenModalClick}>
<ShelfTitle title={shelf.title} seeAllAction={destination} />
</button>
{/if}
{#if pageData}
<Modal {modalTriggerElement} bind:this={modalComponent}>
<ContentModal
on:close={handleModalClose}
title={pageData.title || null}
subtitle={null}
targetId={VERSION_HISTORY_MODAL_ID}
>
<svelte:fragment slot="content">
<ul>
{#each pageData.shelves as shelf}
{#each shelf.items || [] as item}
{#if isTitledParagraphItem(item)}
<li>
<TitledParagraphItem {item} />
</li>
{/if}
{/each}
{/each}
</ul>
</svelte:fragment>
</ContentModal>
</Modal>
{/if}
</div>
{#each shelf.items as item}
<TitledParagraphItem {item} />
{/each}
</ShelfWrapper>
<style>
.title-container {
display: flex;
justify-content: space-between;
padding-top: 16px;
padding-inline-end: var(--bodyGutter);
}
</style>
|
