iconograph-ui 1.1.5 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/form/Form.svelte
CHANGED
|
@@ -33,11 +33,13 @@
|
|
|
33
33
|
return addNotification({'status': 'failure', 'message': 'Erreur ' + response.status })
|
|
34
34
|
|
|
35
35
|
const data = await response.json();
|
|
36
|
+
console.log(data);
|
|
37
|
+
|
|
36
38
|
if (!response.ok) {
|
|
37
39
|
addNotification({'status': 'failure', 'message': response.status + ': ' + data.message})
|
|
38
40
|
}
|
|
39
41
|
else {
|
|
40
|
-
addNotification({'status': 'success', 'message':
|
|
42
|
+
addNotification({'status': 'success', 'message': data.message})
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
}
|
package/lib/layout/Card.svelte
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let url;
|
|
3
|
+
export let text;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<span>
|
|
7
|
+
<a href="{url}">{text}</a>
|
|
8
|
+
</span>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
a {
|
|
12
|
+
font-weight: 500;
|
|
13
|
+
text-decoration: none;
|
|
14
|
+
font-size: 13px;
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
color: #555;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
import { onMount } from 'svelte';
|
|
4
|
+
import TableRow from "./TableRow.svelte";
|
|
5
|
+
|
|
6
|
+
export let columns = [];
|
|
7
|
+
export let uri;
|
|
8
|
+
export let actions = false;
|
|
9
|
+
|
|
10
|
+
let waiting = false;
|
|
11
|
+
let selected = {};
|
|
12
|
+
let pagination = false;
|
|
13
|
+
let total = 0;
|
|
14
|
+
let limit = 500;
|
|
15
|
+
let page = 1;
|
|
16
|
+
|
|
17
|
+
let data = [];
|
|
18
|
+
|
|
19
|
+
/*
|
|
20
|
+
function handleSort(sname) {
|
|
21
|
+
settings.forEach(e => {
|
|
22
|
+
if (e.name == sname) {
|
|
23
|
+
if (e.ascending) {
|
|
24
|
+
data = [...data].sort(e.sort).reverse();
|
|
25
|
+
e.ascending = false;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
data = [...data].sort(e.sort);
|
|
29
|
+
e.ascending = true;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function handleSelect(e, id) {
|
|
36
|
+
selected[id] = e.target.checked;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function handleSelectAll(e) {
|
|
40
|
+
data.forEach(e => {
|
|
41
|
+
selected[e.id] = e.target.checked;
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
async function getData() {
|
|
47
|
+
waiting = true;
|
|
48
|
+
|
|
49
|
+
const response = await fetch(`${uri}?limit=${limit}&page=${page}`, {
|
|
50
|
+
method: 'GET',
|
|
51
|
+
headers: { 'Content-Type': 'application/json' }
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
console.log(response);
|
|
55
|
+
const resBody = await response.json();
|
|
56
|
+
data = resBody.data;
|
|
57
|
+
|
|
58
|
+
console.log(resBody);
|
|
59
|
+
|
|
60
|
+
selected = {};
|
|
61
|
+
waiting = false;
|
|
62
|
+
|
|
63
|
+
if (!response.ok)
|
|
64
|
+
addNotification({'status': 'failure', 'message': response.status + ': ' + resBody.message})
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function resetAndGetData() {
|
|
68
|
+
selected = {};
|
|
69
|
+
page = 1;
|
|
70
|
+
getData();
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
onMount(() => {
|
|
74
|
+
resetAndGetData()
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<!--<div style="max-width: min(calc(100% - 24px), 1100px) !important;">-->
|
|
80
|
+
<div class="table-wrapper">
|
|
81
|
+
<div>
|
|
82
|
+
<!--<div >
|
|
83
|
+
<div>
|
|
84
|
+
{#if actions}
|
|
85
|
+
<div class="hd-actions" >
|
|
86
|
+
<div>
|
|
87
|
+
<input class="checkbox" type="checkbox" on:change={(e) => handleSelectAll(e)}/>
|
|
88
|
+
<h4>{data.length} Schedules Rules</h4>
|
|
89
|
+
<span>({Object.values(selected).filter(Boolean).length} sélectionnées)</span>
|
|
90
|
+
</div>
|
|
91
|
+
<div style="display: flex; gap: 12px;">
|
|
92
|
+
<select bind:value={status} on:change={resetAndGetData} disabled={waiting} >
|
|
93
|
+
{#each statuses as option}
|
|
94
|
+
<option value={option.value}> {option.name} </option>
|
|
95
|
+
{/each}
|
|
96
|
+
</select>
|
|
97
|
+
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
{/if}
|
|
101
|
+
</div>
|
|
102
|
+
</div>-->
|
|
103
|
+
|
|
104
|
+
<div class="table-header">
|
|
105
|
+
<div><div>
|
|
106
|
+
{#each columns as c}
|
|
107
|
+
<div style="min-width: {c.width}px; width: {c.width}px;">
|
|
108
|
+
{c.label}
|
|
109
|
+
{#if c.sort != null }
|
|
110
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
111
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
112
|
+
<div class="sort-icon" on:click={() => handleSort(c.field)}></div>
|
|
113
|
+
{/if}
|
|
114
|
+
</div>
|
|
115
|
+
{/each}
|
|
116
|
+
</div></div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="table-body">
|
|
120
|
+
{#each data as d }
|
|
121
|
+
<TableRow actions={actions} columns={columns} row={d}>
|
|
122
|
+
</TableRow>
|
|
123
|
+
{/each}
|
|
124
|
+
|
|
125
|
+
<!--{#if pagination && data.length > 0}
|
|
126
|
+
<div class="footer-pagination" >
|
|
127
|
+
<div>
|
|
128
|
+
Page <input type="number" bind:value={page} on:change={getData} disabled={waiting}/>
|
|
129
|
+
/ {Math.round(total / limit)}
|
|
130
|
+
</div>
|
|
131
|
+
<div>
|
|
132
|
+
<select bind:value={limit} on:change={resetAndGetData} disabled={waiting} >
|
|
133
|
+
<option value="50">50</option>
|
|
134
|
+
<option value="100">100</option>
|
|
135
|
+
<option value="500">500</option>
|
|
136
|
+
<option value="1000">1000</option>
|
|
137
|
+
</select>
|
|
138
|
+
/ page
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
{/if}-->
|
|
142
|
+
|
|
143
|
+
{#if data.length == 0}
|
|
144
|
+
<span>Aucune donnée disponible</span>
|
|
145
|
+
{/if}
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<style>
|
|
151
|
+
.table-wrapper {
|
|
152
|
+
width: 100% !important;
|
|
153
|
+
display: flex;
|
|
154
|
+
flex-direction: column;
|
|
155
|
+
align-items: stretch;
|
|
156
|
+
overflow-x: auto;
|
|
157
|
+
min-width: 0;
|
|
158
|
+
box-sizing: border-box;
|
|
159
|
+
}
|
|
160
|
+
.table-wrapper > div {
|
|
161
|
+
display: inline-flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
}
|
|
164
|
+
.table-wrapper .table-header {
|
|
165
|
+
padding: 0px 28px;
|
|
166
|
+
height: 48px;
|
|
167
|
+
width: calc(100% - 56px);
|
|
168
|
+
background-color: #f7f7f7;
|
|
169
|
+
display: inline-flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
border-bottom: 1px solid #e5e5e5;
|
|
172
|
+
}
|
|
173
|
+
.table-wrapper .table-header > div {
|
|
174
|
+
min-width: 100%;
|
|
175
|
+
display: inline-flex;
|
|
176
|
+
height: 100%;
|
|
177
|
+
}
|
|
178
|
+
.table-wrapper .table-header > div > div {
|
|
179
|
+
display: inline-flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
height: 100%;
|
|
182
|
+
background-color: #f7f7f7;
|
|
183
|
+
border-bottom: 1px solid #e5e5e5;
|
|
184
|
+
padding-right: 28px;
|
|
185
|
+
}
|
|
186
|
+
.table-wrapper .table-header > div > div > div {
|
|
187
|
+
color: #333;
|
|
188
|
+
font-weight: 700;
|
|
189
|
+
text-transform: capitalize;
|
|
190
|
+
font-size: 13px;
|
|
191
|
+
padding: 0px;
|
|
192
|
+
padding-right: 24px;
|
|
193
|
+
display: flex;
|
|
194
|
+
gap: 8px;
|
|
195
|
+
}
|
|
196
|
+
.table-body {
|
|
197
|
+
width: 100%;
|
|
198
|
+
background-color: #fff;
|
|
199
|
+
}
|
|
200
|
+
.table-body > span {
|
|
201
|
+
display: inline-block;
|
|
202
|
+
width: 100%;
|
|
203
|
+
height: 96px;
|
|
204
|
+
line-height: 96px;
|
|
205
|
+
text-align: center;
|
|
206
|
+
font-weight: 600;
|
|
207
|
+
color: #aaa;
|
|
208
|
+
}
|
|
209
|
+
.sort-icon {
|
|
210
|
+
width: 18px;
|
|
211
|
+
height: 18px;
|
|
212
|
+
background-image: url('/icons/icon-order.svg');
|
|
213
|
+
background-size: 12px auto;
|
|
214
|
+
background-repeat: no-repeat;
|
|
215
|
+
background-position: center center ;
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
}
|
|
218
|
+
@media (max-width: 600px) {
|
|
219
|
+
.table-wrapper {
|
|
220
|
+
width: 100% !important;
|
|
221
|
+
max-width: calc(100vw - 24px) !important;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
.checkbox {
|
|
225
|
+
margin-right: 12px;
|
|
226
|
+
width: 14px;
|
|
227
|
+
cursor: pointer;
|
|
228
|
+
}
|
|
229
|
+
.hd-actions {
|
|
230
|
+
background-color: #ffffff;
|
|
231
|
+
border-bottom: 1px solid #e5e5e5;
|
|
232
|
+
width: calc(100% - 56px);
|
|
233
|
+
height: 48px;
|
|
234
|
+
padding: 0px 28px;
|
|
235
|
+
display: flex;
|
|
236
|
+
align-items: center;
|
|
237
|
+
justify-content: space-between;
|
|
238
|
+
}
|
|
239
|
+
.hd-actions > div:nth-of-type(1) {
|
|
240
|
+
display: flex;
|
|
241
|
+
}
|
|
242
|
+
.hd-actions h4 {
|
|
243
|
+
color: #222;
|
|
244
|
+
color: #6046c5;
|
|
245
|
+
font-size: 14px;
|
|
246
|
+
margin-right: 6px;
|
|
247
|
+
}
|
|
248
|
+
.hd-actions span {
|
|
249
|
+
color: #777;
|
|
250
|
+
font-weight: 600;
|
|
251
|
+
font-size: 14px;
|
|
252
|
+
}
|
|
253
|
+
.footer-pagination {
|
|
254
|
+
background-color: #f7f7f7;
|
|
255
|
+
border-bottom: 1px solid #e5e5e5;
|
|
256
|
+
width: calc(100% - 56px);
|
|
257
|
+
height: 48px;
|
|
258
|
+
padding: 0px 28px;
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: space-between;
|
|
262
|
+
color: #555;
|
|
263
|
+
font-weight: 600;
|
|
264
|
+
font-size: 14px;
|
|
265
|
+
display: flex;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
width: calc(100% - 56px);
|
|
268
|
+
}
|
|
269
|
+
.footer-pagination input[type="number"]{
|
|
270
|
+
width: 50px;
|
|
271
|
+
background-color: #fff;
|
|
272
|
+
margin: 0px 6px;
|
|
273
|
+
}
|
|
274
|
+
.footer-pagination select{
|
|
275
|
+
background-color: #fff;
|
|
276
|
+
margin-left: 60px;
|
|
277
|
+
}
|
|
278
|
+
</style>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let actions;
|
|
3
|
+
export let columns;
|
|
4
|
+
export let row;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div class="wrapper">
|
|
8
|
+
{#if actions}
|
|
9
|
+
<input class="checkbox" type="checkbox" on:change={(e) => handleSelect(e, row.id)} checked={selected[row.id]}/>
|
|
10
|
+
{/if}
|
|
11
|
+
<div class="row">
|
|
12
|
+
{#each columns as c}
|
|
13
|
+
<div style="min-width: {c.width}px; width: {c.width}px;">
|
|
14
|
+
{#if c.component}
|
|
15
|
+
<svelte:component this={c.component} {...c.props} {...{ [c.field]: row[c.field], ...row }}/>
|
|
16
|
+
{:else}
|
|
17
|
+
<span>{row[c.field]}</span>
|
|
18
|
+
{/if}
|
|
19
|
+
</div>
|
|
20
|
+
{/each}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
.wrapper {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
min-width: calc(100% - 56px);
|
|
28
|
+
border-bottom: 1px solid #e5e5e5;
|
|
29
|
+
padding: 0px 28px;
|
|
30
|
+
height: 48px;
|
|
31
|
+
}
|
|
32
|
+
.row {
|
|
33
|
+
height: 100%;
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
.row > div {
|
|
38
|
+
margin-right: 24px;
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
span {
|
|
43
|
+
display: inline-block;
|
|
44
|
+
height: max-content;
|
|
45
|
+
line-height: 18px;
|
|
46
|
+
width: 100%;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
font-weight: 500;
|
|
52
|
+
color: #777;
|
|
53
|
+
font-family: "Roboto", serif;
|
|
54
|
+
margin-top: 1px;
|
|
55
|
+
}
|
|
56
|
+
</style>
|