/
list_layout.svelte
128 lines (118 loc) · 3.16 KB
/
list_layout.svelte
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
119
120
121
122
123
124
125
126
127
128
<script>
import { I18n } from '#user/lib/i18n'
import { icon } from '#lib/utils'
import { isNonEmptyArray } from '#lib/boolean_tests'
import screen_ from '#lib/screen'
import Spinner from '#general/components/spinner.svelte'
import { getEntitiesByUris } from '#entities/lib/entities'
import ListSelectionsCandidate from './list_selections_candidate.svelte'
export let list, selections
let { _id, description, creator } = list
// TODO: rebase and fix visibility once items/shelves visibility branches have been merged
// let { visibility } = list
// const listings = app.user.listings()
// let visibilityData = listings[visibility]
let isEditable = creator === app.user.id
let entities = []
const paginationSize = 5
let offset = 5
let fetching
// fake
let scrollY = 0
const getSelectionsEntities = async selections => {
const uris = selections.map(_.property('uri'))
return getEntitiesByUris(uris)
}
const assignFirstSelectionsAsEntities = async () => {
const firstSelections = selections.slice(0, paginationSize)
entities = await getSelectionsEntities(firstSelections)
}
const waitingForEntities = assignFirstSelectionsAsEntities()
const showEditor = async () => {
const { default: ListEditor } = await import('#lists/components/list_editor.svelte')
app.execute('modal:open')
const component = app.layout.showChildComponent('modal', ListEditor, {
props: {
list,
}
})
component.$on('listUpdated', event => {
list = event.detail.list
})
}
const fetchMore = async () => {
if (fetching || hasMore === false) return
fetching = true
const nextBatchSelections = selections.slice(offset, paginationSize)
const nextEntities = await getSelectionsEntities(nextBatchSelections)
if (isNonEmptyArray(nextEntities)) {
offset += paginationSize
entities = [ entities, ...nextEntities ]
}
fetching = false
}
$: {
if (screen_.height() >= scrollY) {
fetchMore()
}
}
$: hasMore = entities.length > offset
$: name = list.name
$: description = list.description
</script>
{#await waitingForEntities}
<p class="loading">Loading... <Spinner/></p>
{:then}
<div class="header">
<!-- <p>{I18n('list')}</p> -->
<h3>{name}</h3>
<p class="visibility">
<!-- {@html icon(visibilityData.icon)} {visibilityData.label} -->
</p>
<p>{description}</p>
{#if isEditable}
<button
id="showListEditor"
class="tiny-button"
on:click={showEditor}
>
{@html icon('pencil')}
{I18n('edit info')}
</button>
{/if}
<ListSelectionsCandidate
bind:entities
listId={_id}
{isEditable}
/>
</div>
{/await}
<div class="footer">
<p class="list-id">
{I18n('list')}
-
{_id}
</p>
</div>
<style lang="scss">
@import '#general/scss/utils';
.header{
@include display-flex(column, center, center);
display: flex;
margin: 1em 0;
width: 100%;
}
.visibility{
color: #666;
}
.list-id{
@include display-flex(column, center);
font-size: small;
}
#showListEditor{
margin: 1em 0;
padding: 0.3em;
white-space: nowrap;
width: 10em;
}
</style>