@operato/attachment 0.2.52 → 0.3.7
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/CHANGELOG.md +72 -0
- package/dist/src/ox-attachment-list.d.ts +8 -9
- package/dist/src/ox-attachment-list.js +56 -124
- package/dist/src/ox-attachment-list.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -7
- package/src/ox-attachment-list.ts +61 -124
- package/tsconfig.json +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,78 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [0.3.7](https://github.com/hatiolab/operato/compare/v0.3.6...v0.3.7) (2022-01-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/attachment
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [0.3.6](https://github.com/hatiolab/operato/compare/v0.3.5...v0.3.6) (2022-01-09)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/attachment
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### [0.3.5](https://github.com/hatiolab/operato/compare/v0.3.4...v0.3.5) (2022-01-09)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @operato/attachment
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### [0.3.4](https://github.com/hatiolab/operato/compare/v0.3.3...v0.3.4) (2022-01-03)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @operato/attachment
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### [0.3.3](https://github.com/hatiolab/operato/compare/v0.3.2...v0.3.3) (2022-01-03)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @operato/attachment
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
### [0.3.2](https://github.com/hatiolab/operato/compare/v0.3.1...v0.3.2) (2022-01-03)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
### :bug: Bug Fix
|
|
50
|
+
|
|
51
|
+
* data-grist click handler ([2566553](https://github.com/hatiolab/operato/commit/2566553b2515810d3c7cae89061459df92b01e03))
|
|
52
|
+
* data-grist headroom sample style ([006642d](https://github.com/hatiolab/operato/commit/006642dca83c451a50e84d4d85f090085a2b48b6))
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### [0.3.1](https://github.com/hatiolab/operato/compare/v0.3.0...v0.3.1) (2021-12-31)
|
|
57
|
+
|
|
58
|
+
**Note:** Version bump only for package @operato/attachment
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
## [0.3.0](https://github.com/hatiolab/operato/compare/v0.2.52...v0.3.0) (2021-12-31)
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
### :bug: Bug Fix
|
|
68
|
+
|
|
69
|
+
* attachment fetch query ([f94af9d](https://github.com/hatiolab/operato/commit/f94af9de83208cbd0e36f72159259d132e02e5fc))
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
### :rocket: New Features
|
|
73
|
+
|
|
74
|
+
* add tsconfig option useDefineForClassFields ([6291438](https://github.com/hatiolab/operato/commit/6291438571eee0f095064e7d2ada1c620832e092))
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
6
78
|
### [0.2.52](https://github.com/hatiolab/operato/compare/v0.2.51...v0.2.52) (2021-12-21)
|
|
7
79
|
|
|
8
80
|
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import '@operato/data-grist';
|
|
2
|
+
import '@operato/input';
|
|
2
3
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
-
import { ColumnConfig, GristData, GristRecord, SortersConfig } from '@operato/data-grist
|
|
4
|
+
import { ColumnConfig, GristData, GristRecord, SortersConfig } from '@operato/data-grist';
|
|
4
5
|
export declare class OxAttachmentList extends LitElement {
|
|
5
6
|
static styles: import("lit").CSSResult[];
|
|
6
7
|
categories: any[];
|
|
7
|
-
mode: 'GRID' | 'LIST' | 'CARD';
|
|
8
8
|
category: string;
|
|
9
9
|
creatable: boolean;
|
|
10
|
-
private _total;
|
|
11
|
-
private _page;
|
|
12
10
|
private grist;
|
|
11
|
+
fileUploader: any;
|
|
13
12
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
13
|
fetchHandler({ page, limit, sorters }: {
|
|
15
14
|
page: number;
|
|
@@ -41,7 +40,7 @@ export declare class OxAttachmentList extends LitElement {
|
|
|
41
40
|
gutterName: string;
|
|
42
41
|
icon: string;
|
|
43
42
|
handlers: {
|
|
44
|
-
click: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number) => void;
|
|
43
|
+
click: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, target: HTMLElement) => void;
|
|
45
44
|
dblclick?: undefined;
|
|
46
45
|
};
|
|
47
46
|
name?: undefined;
|
|
@@ -111,7 +110,9 @@ export declare class OxAttachmentList extends LitElement {
|
|
|
111
110
|
selectable: {
|
|
112
111
|
multiple: boolean;
|
|
113
112
|
};
|
|
114
|
-
handlers: {
|
|
113
|
+
handlers: {
|
|
114
|
+
click: string;
|
|
115
|
+
};
|
|
115
116
|
classifier: (record: GristRecord, rowIndex: number) => void | {
|
|
116
117
|
[key: string]: any;
|
|
117
118
|
emphasized?: string | boolean | string[] | undefined;
|
|
@@ -128,16 +129,14 @@ export declare class OxAttachmentList extends LitElement {
|
|
|
128
129
|
firstUpdated(): Promise<void>;
|
|
129
130
|
updated(changes: PropertyValues<this>): void;
|
|
130
131
|
onClickSelect(attachment: any): void;
|
|
131
|
-
onAttachmentDropped(e: CustomEvent): Promise<void>;
|
|
132
132
|
onCreateAttachment(e: CustomEvent): Promise<void>;
|
|
133
133
|
onDeleteAttachment(id: string): Promise<void>;
|
|
134
134
|
refreshAttachments(): Promise<void>;
|
|
135
|
-
appendAttachments(): Promise<void>;
|
|
136
135
|
getAttachments({ page, limit, sorters }?: {
|
|
137
136
|
page?: number;
|
|
138
137
|
limit?: number;
|
|
139
138
|
sorters?: SortersConfig;
|
|
140
139
|
}): Promise<any>;
|
|
141
|
-
createAttachments(
|
|
140
|
+
createAttachments(files: File[]): Promise<void>;
|
|
142
141
|
deleteAttachment(id: string): Promise<any>;
|
|
143
142
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
// import './attachment-creation-card'
|
|
3
2
|
import '@operato/data-grist';
|
|
3
|
+
import '@operato/input';
|
|
4
4
|
import gql from 'graphql-tag';
|
|
5
5
|
import i18next from 'i18next';
|
|
6
6
|
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { customElement, property, query
|
|
7
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
8
8
|
import { buildArgs, client } from '@operato/graphql';
|
|
9
9
|
import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
|
|
10
|
+
import { sleep } from '@operato/utils';
|
|
10
11
|
const FETCH_ATTACHMENT_LIST_GQL = (listParam) => {
|
|
11
12
|
return gql `
|
|
12
13
|
{
|
|
@@ -20,6 +21,8 @@ const FETCH_ATTACHMENT_LIST_GQL = (listParam) => {
|
|
|
20
21
|
category
|
|
21
22
|
fullpath
|
|
22
23
|
path
|
|
24
|
+
createdAt
|
|
25
|
+
updatedAt
|
|
23
26
|
}
|
|
24
27
|
total
|
|
25
28
|
}
|
|
@@ -50,20 +53,18 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
50
53
|
constructor() {
|
|
51
54
|
super(...arguments);
|
|
52
55
|
this.categories = ['audio', 'video', 'image', 'text', 'application'];
|
|
53
|
-
this.mode = 'CARD';
|
|
54
56
|
this.category = '';
|
|
55
57
|
this.creatable = false;
|
|
56
|
-
this._total = 0;
|
|
57
|
-
this._page = 1;
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
|
-
const mode = this.mode || 'CARD';
|
|
61
60
|
return html `
|
|
62
|
-
<ox-grist .config=${this.gristConfig} .mode=${
|
|
61
|
+
<ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
|
|
63
62
|
<div slot="headroom" id="headroom">
|
|
64
63
|
<div id="filters">
|
|
65
|
-
<
|
|
66
|
-
|
|
64
|
+
<div id="search">
|
|
65
|
+
<mwc-icon>search</mwc-icon>
|
|
66
|
+
<input type="text"/>
|
|
67
|
+
</div>
|
|
67
68
|
|
|
68
69
|
<select
|
|
69
70
|
@change=${(e) => {
|
|
@@ -72,29 +73,17 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
72
73
|
this.requestUpdate();
|
|
73
74
|
}}
|
|
74
75
|
>
|
|
75
|
-
<option value=""
|
|
76
|
+
<option value="">${i18next.t('text.please choose a category')}</option>
|
|
76
77
|
${this.categories.map(category => html ` <option value=${category} ?selected=${this.category == category}>${category}</option> `)}
|
|
77
78
|
</select>
|
|
78
79
|
</div>
|
|
79
80
|
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<!-- ${this.creatable
|
|
87
|
-
? html `
|
|
88
|
-
<attachment-creation-card
|
|
89
|
-
class="card create"
|
|
90
|
-
.categories=${this.categories}
|
|
91
|
-
.defaultCategory=${this.category}
|
|
92
|
-
@create-attachment=${(e) => this.onCreateAttachment(e)}
|
|
93
|
-
@file-drop=${(e) => this.onAttachmentDropped(e)}
|
|
94
|
-
></attachment-creation-card>
|
|
95
|
-
`
|
|
96
|
-
: undefined} -->
|
|
97
|
-
</div>
|
|
81
|
+
<ox-input-file
|
|
82
|
+
accept="*/*"
|
|
83
|
+
multiple="true"
|
|
84
|
+
hide-filelist
|
|
85
|
+
@change=${this.onCreateAttachment.bind(this)}
|
|
86
|
+
></ox-input-file>
|
|
98
87
|
</ox-grist>
|
|
99
88
|
`;
|
|
100
89
|
}
|
|
@@ -137,7 +126,7 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
137
126
|
gutterName: 'button',
|
|
138
127
|
icon: 'open_in_new',
|
|
139
128
|
handlers: {
|
|
140
|
-
click: (columns, data, column, record, rowIndex) => {
|
|
129
|
+
click: (columns, data, column, record, rowIndex, target) => {
|
|
141
130
|
window.open(record.fullpath, '_blank');
|
|
142
131
|
}
|
|
143
132
|
}
|
|
@@ -147,13 +136,12 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
147
136
|
gutterName: 'button',
|
|
148
137
|
icon: 'link',
|
|
149
138
|
handlers: {
|
|
150
|
-
click: async (columns, data, column, record, rowIndex) => {
|
|
139
|
+
click: async (columns, data, column, record, rowIndex, target) => {
|
|
151
140
|
var { protocol, hostname, port } = location;
|
|
152
141
|
await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`);
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
// this.removeAttribute('data-tooltip')
|
|
142
|
+
target.setAttribute('data-tooltip', 'url copied!');
|
|
143
|
+
await sleep(2000);
|
|
144
|
+
target.removeAttribute('data-tooltip');
|
|
157
145
|
}
|
|
158
146
|
}
|
|
159
147
|
},
|
|
@@ -162,7 +150,7 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
162
150
|
gutterName: 'button',
|
|
163
151
|
icon: 'delete',
|
|
164
152
|
handlers: {
|
|
165
|
-
click: async (columns, data, column, record, rowIndex) => {
|
|
153
|
+
click: async (columns, data, column, record, rowIndex, target) => {
|
|
166
154
|
await this.deleteAttachment(record.id);
|
|
167
155
|
this.refreshAttachments();
|
|
168
156
|
}
|
|
@@ -173,7 +161,7 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
173
161
|
gutterName: 'button',
|
|
174
162
|
icon: 'save_alt',
|
|
175
163
|
handlers: {
|
|
176
|
-
click: (columns, data, column, record, rowIndex) => {
|
|
164
|
+
click: (columns, data, column, record, rowIndex, target) => {
|
|
177
165
|
const element = document.createElement('a');
|
|
178
166
|
element.setAttribute('href', record.fullpath);
|
|
179
167
|
element.setAttribute('download', record.name);
|
|
@@ -238,7 +226,9 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
238
226
|
selectable: {
|
|
239
227
|
multiple: true
|
|
240
228
|
},
|
|
241
|
-
handlers: {
|
|
229
|
+
handlers: {
|
|
230
|
+
click: 'select-row-toggle'
|
|
231
|
+
},
|
|
242
232
|
classifier: function (record, rowIndex) { }
|
|
243
233
|
},
|
|
244
234
|
sorters: [
|
|
@@ -269,15 +259,9 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
269
259
|
}
|
|
270
260
|
}));
|
|
271
261
|
}
|
|
272
|
-
async onAttachmentDropped(e) {
|
|
273
|
-
var files = e.detail;
|
|
274
|
-
await this.createAttachments('', files);
|
|
275
|
-
this.refreshAttachments();
|
|
276
|
-
}
|
|
277
262
|
async onCreateAttachment(e) {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
await this.createAttachments(category, files);
|
|
263
|
+
const files = e.detail;
|
|
264
|
+
await this.createAttachments(files);
|
|
281
265
|
this.refreshAttachments();
|
|
282
266
|
}
|
|
283
267
|
async onDeleteAttachment(id) {
|
|
@@ -286,16 +270,6 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
286
270
|
}
|
|
287
271
|
async refreshAttachments() {
|
|
288
272
|
this.grist.fetch();
|
|
289
|
-
// var attachments = await this.getAttachments()
|
|
290
|
-
// this.attachments = [...attachments]
|
|
291
|
-
// var creationCard = this.shadowRoot.querySelector('attachment-creation-card')
|
|
292
|
-
// if (creationCard) {
|
|
293
|
-
// creationCard.reset()
|
|
294
|
-
// }
|
|
295
|
-
}
|
|
296
|
-
async appendAttachments() {
|
|
297
|
-
// var attachments = await this.getAttachments({ page: this._page + 1 })
|
|
298
|
-
// this.attachments = [...this.attachments, ...attachments]
|
|
299
273
|
}
|
|
300
274
|
async getAttachments({ page = 1, limit = 30, sorters = [] } = {}) {
|
|
301
275
|
var _a;
|
|
@@ -324,16 +298,15 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
|
|
|
324
298
|
}
|
|
325
299
|
return ((_a = attachmentListResponse === null || attachmentListResponse === void 0 ? void 0 : attachmentListResponse.data) === null || _a === void 0 ? void 0 : _a.attachments) || {};
|
|
326
300
|
}
|
|
327
|
-
async createAttachments(
|
|
301
|
+
async createAttachments(files) {
|
|
328
302
|
/*
|
|
329
303
|
ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client
|
|
330
|
-
- TODO support multiple file upload
|
|
331
304
|
*/
|
|
332
|
-
await client.mutate({
|
|
305
|
+
const response = await client.mutate({
|
|
333
306
|
mutation: CREATE_ATTACHMENTS_GQL,
|
|
334
307
|
variables: {
|
|
335
308
|
attachments: files.map(file => {
|
|
336
|
-
return {
|
|
309
|
+
return { file };
|
|
337
310
|
})
|
|
338
311
|
},
|
|
339
312
|
context: {
|
|
@@ -373,8 +346,6 @@ OxAttachmentList.styles = [
|
|
|
373
346
|
}
|
|
374
347
|
|
|
375
348
|
#headroom {
|
|
376
|
-
display: flex;
|
|
377
|
-
flex-direction: row;
|
|
378
349
|
align-items: center;
|
|
379
350
|
padding: var(--padding-default) var(--padding-wide);
|
|
380
351
|
border-top: 2px solid rgba(0, 0, 0, 0.2);
|
|
@@ -383,80 +354,47 @@ OxAttachmentList.styles = [
|
|
|
383
354
|
}
|
|
384
355
|
|
|
385
356
|
#filters {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
#mode {
|
|
390
|
-
width: 100px;
|
|
391
|
-
}
|
|
392
|
-
#add {
|
|
393
|
-
width: 50px;
|
|
394
|
-
text-align: right;
|
|
357
|
+
display: flex;
|
|
358
|
+
flex-direction: row;
|
|
359
|
+
justify-content: space-between;
|
|
395
360
|
}
|
|
396
361
|
|
|
397
|
-
#
|
|
398
|
-
padding: var(--padding-
|
|
399
|
-
font-size: 1em;
|
|
400
|
-
opacity: 0.5;
|
|
401
|
-
color: var(--primary-text-color);
|
|
402
|
-
cursor: pointer;
|
|
362
|
+
#filters > * {
|
|
363
|
+
padding: var(--padding-default) var(--padding-wide);
|
|
403
364
|
}
|
|
404
365
|
|
|
405
|
-
#
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
color: var(--secondary-text-color);
|
|
410
|
-
cursor: default;
|
|
411
|
-
}
|
|
412
|
-
#modes > mwc-icon:hover {
|
|
413
|
-
opacity: 1;
|
|
414
|
-
color: var(--secondary-text-color);
|
|
415
|
-
}
|
|
366
|
+
#search {
|
|
367
|
+
display: flex;
|
|
368
|
+
position: relative;
|
|
369
|
+
align-items: center;
|
|
416
370
|
|
|
417
|
-
|
|
418
|
-
background-color: var(--status-success-color);
|
|
419
|
-
border: 0;
|
|
420
|
-
border-radius: 50%;
|
|
421
|
-
padding: 5px;
|
|
422
|
-
width: 36px;
|
|
423
|
-
height: 36px;
|
|
424
|
-
cursor: pointer;
|
|
425
|
-
}
|
|
426
|
-
#add button:hover {
|
|
427
|
-
background-color: var(--focus-background-color);
|
|
428
|
-
box-shadow: var(--box-shadow);
|
|
429
|
-
}
|
|
430
|
-
#add button mwc-icon {
|
|
431
|
-
font-size: 2em;
|
|
432
|
-
color: var(--theme-white-color);
|
|
371
|
+
--mdc-icon-size: 20px;
|
|
433
372
|
}
|
|
434
373
|
|
|
435
|
-
#
|
|
436
|
-
|
|
437
|
-
}
|
|
438
|
-
#filters [type='text'] {
|
|
374
|
+
#search [type='text'] {
|
|
375
|
+
flex: 1;
|
|
439
376
|
background-color: transparent;
|
|
440
377
|
border: 0;
|
|
441
378
|
border-bottom: var(--border-dark-color);
|
|
442
379
|
padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
|
|
443
380
|
font-size: var(--fontsize-large);
|
|
444
|
-
}
|
|
445
|
-
#filters [type='text']:focus {
|
|
446
381
|
outline: none;
|
|
447
382
|
}
|
|
448
|
-
|
|
383
|
+
|
|
384
|
+
#search mwc-icon {
|
|
449
385
|
position: absolute;
|
|
450
|
-
top: 3px;
|
|
451
386
|
color: var(--secondary-color);
|
|
452
387
|
}
|
|
453
|
-
|
|
454
|
-
|
|
388
|
+
|
|
389
|
+
select {
|
|
390
|
+
border: 0;
|
|
391
|
+
outline: none;
|
|
392
|
+
text-align: right;
|
|
455
393
|
}
|
|
456
394
|
|
|
457
395
|
@media only screen and (max-width: 460px) {
|
|
458
|
-
#
|
|
459
|
-
|
|
396
|
+
#filters {
|
|
397
|
+
flex-direction: column;
|
|
460
398
|
}
|
|
461
399
|
}
|
|
462
400
|
`
|
|
@@ -464,24 +402,18 @@ OxAttachmentList.styles = [
|
|
|
464
402
|
__decorate([
|
|
465
403
|
property({ type: Array })
|
|
466
404
|
], OxAttachmentList.prototype, "categories", void 0);
|
|
467
|
-
__decorate([
|
|
468
|
-
property({ type: String })
|
|
469
|
-
], OxAttachmentList.prototype, "mode", void 0);
|
|
470
405
|
__decorate([
|
|
471
406
|
property({ type: String })
|
|
472
407
|
], OxAttachmentList.prototype, "category", void 0);
|
|
473
408
|
__decorate([
|
|
474
409
|
property({ type: Boolean })
|
|
475
410
|
], OxAttachmentList.prototype, "creatable", void 0);
|
|
476
|
-
__decorate([
|
|
477
|
-
state()
|
|
478
|
-
], OxAttachmentList.prototype, "_total", void 0);
|
|
479
|
-
__decorate([
|
|
480
|
-
state()
|
|
481
|
-
], OxAttachmentList.prototype, "_page", void 0);
|
|
482
411
|
__decorate([
|
|
483
412
|
query('ox-grist')
|
|
484
413
|
], OxAttachmentList.prototype, "grist", void 0);
|
|
414
|
+
__decorate([
|
|
415
|
+
query('ox-input-file')
|
|
416
|
+
], OxAttachmentList.prototype, "fileUploader", void 0);
|
|
485
417
|
OxAttachmentList = __decorate([
|
|
486
418
|
customElement('ox-attachment-list')
|
|
487
419
|
], OxAttachmentList);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["// import './attachment-creation-card'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DataGrist, QueryFilter } from '@operato/data-grist'\nimport {\n ColumnConfig,\n GristData,\n GristRecord,\n PaginationConfig,\n SortersConfig\n} from '@operato/data-grist/dist/src/types'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n return gql`\n {\n attachments(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n mimetype\n encoding\n category\n fullpath\n path\n }\n total\n }\n }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n mutation DeleteAttachment($id: String!) {\n deleteAttachment(id: $id)\n }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n mutation ($attachments: [NewAttachment!]!) {\n createAttachments(attachments: $attachments) {\n id\n name\n description\n mimetype\n encoding\n category\n path\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n static styles = [\n ScrollbarStyles,\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n #headroom {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n border-top: 2px solid rgba(0, 0, 0, 0.2);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n }\n\n #filters {\n flex: 1;\n --mdc-icon-size: 20px;\n }\n #mode {\n width: 100px;\n }\n #add {\n width: 50px;\n text-align: right;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n font-size: 1em;\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > mwc-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n #modes > mwc-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add button {\n background-color: var(--status-success-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n #add button mwc-icon {\n font-size: 2em;\n color: var(--theme-white-color);\n }\n\n #filters {\n position: relative;\n }\n #filters [type='text'] {\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n font-size: var(--fontsize-large);\n }\n #filters [type='text']:focus {\n outline: none;\n }\n #filters mwc-icon {\n position: absolute;\n top: 3px;\n color: var(--secondary-color);\n }\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #modes {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']\n @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'\n @property({ type: String }) category: string = ''\n @property({ type: Boolean }) creatable: boolean = false\n\n @state() private _total: number = 0\n @state() private _page: number = 1\n\n @query('ox-grist') private grist!: DataGrist\n\n render() {\n const mode = this.mode || 'CARD'\n\n return html`\n <ox-grist .config=${this.gristConfig} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" id=\"headroom\">\n <div id=\"filters\">\n <mwc-icon>search</mwc-icon>\n <input type=\"text\" />\n\n <select\n @change=${(e: Event) => {\n this.category = (e.currentTarget as HTMLInputElement)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n ${this.categories.map(\n category =>\n html` <option value=${category} ?selected=${this.category == category}>${category}</option> `\n )}\n </select>\n </div>\n\n <div id=\"modes\">\n <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n </div>\n\n <!-- ${this.creatable\n ? html`\n <attachment-creation-card\n class=\"card create\"\n .categories=${this.categories}\n .defaultCategory=${this.category}\n @create-attachment=${(e: CustomEvent) => this.onCreateAttachment(e)}\n @file-drop=${(e: CustomEvent) => this.onAttachmentDropped(e)}\n ></attachment-creation-card>\n `\n : undefined} -->\n </div>\n </ox-grist>\n `\n }\n\n async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n const { items: records, total } = await this.getAttachments({ page, limit, sorters })\n\n return {\n total,\n records\n }\n }\n\n get gristConfig() {\n return {\n list: {\n thumbnail: function (record: GristRecord, rowIndex: number) {\n return record.category == 'image'\n ? html` <img src=${record.fullpath} style=\"width: 100%; height: 100%;\" /> `\n : record.category == 'video'\n ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n : html`\n <div style=\"width: 100%; height: 100%;\" etc>\n <mwc-icon outlined>insert_drive_file</mwc-icon>\n <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n </div>\n `\n },\n fields: ['name'],\n details: ['updatedAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'open_in_new',\n handlers: {\n click: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): void => {\n window.open(record.fullpath, '_blank')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'link',\n handlers: {\n click: async (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): Promise<void> => {\n var { protocol, hostname, port } = location\n await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n // TODO how to access clicked target\n // this.setAttribute('data-tooltip', 'url copied!')\n // await sleep(2000)\n // this.removeAttribute('data-tooltip')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'delete',\n handlers: {\n click: async (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): Promise<void> => {\n await this.deleteAttachment(record.id!)\n this.refreshAttachments()\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'save_alt',\n handlers: {\n click: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): void => {\n const element = document.createElement('a')\n element.setAttribute('href', record.fullpath)\n element.setAttribute('download', record.name!)\n document.body.appendChild(element)\n element.click()\n }\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n sortable: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n dblclick: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): void => {\n alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n }\n }\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {},\n classifier: function (\n record: GristRecord,\n rowIndex: number\n ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n },\n sorters: [\n {\n name: 'name',\n desc: false\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n }\n }\n\n async firstUpdated() {\n this.refreshAttachments()\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('category')) {\n this.refreshAttachments()\n }\n }\n\n onClickSelect(attachment: any) {\n this.dispatchEvent(\n new CustomEvent('attachment-selected', {\n composed: true,\n bubbles: true,\n detail: {\n attachment\n }\n })\n )\n }\n\n async onAttachmentDropped(e: CustomEvent) {\n var files = e.detail\n\n await this.createAttachments('', files)\n this.refreshAttachments()\n }\n\n async onCreateAttachment(e: CustomEvent) {\n var { category, files } = e.detail\n\n files = Array.from(files)\n\n await this.createAttachments(category, files)\n this.refreshAttachments()\n }\n\n async onDeleteAttachment(id: string) {\n await this.deleteAttachment(id)\n\n this.refreshAttachments()\n }\n\n async refreshAttachments() {\n this.grist.fetch()\n // var attachments = await this.getAttachments()\n // this.attachments = [...attachments]\n\n // var creationCard = this.shadowRoot.querySelector('attachment-creation-card')\n // if (creationCard) {\n // creationCard.reset()\n // }\n }\n\n async appendAttachments() {\n // var attachments = await this.getAttachments({ page: this._page + 1 })\n // this.attachments = [...this.attachments, ...attachments]\n }\n\n async getAttachments({\n page = 1,\n limit = 30,\n sorters = []\n }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n var filters: QueryFilter[] = []\n var sortings: SortersConfig = []\n var pagination: PaginationConfig = {\n limit,\n page\n }\n\n if (this.category)\n filters.push({\n name: 'category',\n operator: 'eq',\n value: this.category\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n\n var attachmentListResponse = await client.query({\n query: FETCH_ATTACHMENT_LIST_GQL(params)\n })\n\n if (!attachmentListResponse || !attachmentListResponse.data) {\n return {}\n }\n\n return attachmentListResponse?.data?.attachments || {}\n }\n\n async createAttachments(category: string, files: File[]) {\n /*\n ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n - TODO support multiple file upload\n */\n\n await client.mutate({\n mutation: CREATE_ATTACHMENTS_GQL,\n variables: {\n attachments: files.map(file => {\n return { category, file }\n })\n },\n context: {\n hasUpload: true\n }\n })\n }\n\n async deleteAttachment(id: string) {\n const response = await client.mutate({\n mutation: DELETE_ATTACHMENT_GQL,\n variables: {\n id\n }\n })\n\n return response.data\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input'\n\nimport gql from 'graphql-tag'\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n ColumnConfig,\n DataGrist,\n GristData,\n GristRecord,\n PaginationConfig,\n QueryFilter,\n SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n return gql`\n {\n attachments(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n mimetype\n encoding\n category\n fullpath\n path\n createdAt\n updatedAt\n }\n total\n }\n }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n mutation DeleteAttachment($id: String!) {\n deleteAttachment(id: $id)\n }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n mutation ($attachments: [NewAttachment!]!) {\n createAttachments(attachments: $attachments) {\n id\n name\n description\n mimetype\n encoding\n category\n path\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n static styles = [\n ScrollbarStyles,\n TooltipStyles,\n css`\n :host {\n display: flex;\n\n width: 100%;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n #headroom {\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n border-top: 2px solid rgba(0, 0, 0, 0.2);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n }\n\n #filters {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n }\n\n #filters > * {\n padding: var(--padding-default) var(--padding-wide);\n }\n\n #search {\n display: flex;\n position: relative;\n align-items: center;\n\n --mdc-icon-size: 20px;\n }\n\n #search [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n font-size: var(--fontsize-large);\n outline: none;\n }\n\n #search mwc-icon {\n position: absolute;\n color: var(--secondary-color);\n }\n\n select {\n border: 0;\n outline: none;\n text-align: right;\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n }\n `\n ]\n\n @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']\n @property({ type: String }) category: string = ''\n @property({ type: Boolean }) creatable: boolean = false\n\n @query('ox-grist') private grist!: DataGrist\n @query('ox-input-file') fileUploader!: any\n\n render() {\n return html`\n <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" id=\"headroom\">\n <div id=\"filters\">\n <div id=\"search\">\n <mwc-icon>search</mwc-icon>\n <input type=\"text\"/>\n </div>\n\n <select\n @change=${(e: Event) => {\n this.category = (e.currentTarget as HTMLInputElement)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('text.please choose a category')}</option>\n ${this.categories.map(\n category =>\n html` <option value=${category} ?selected=${this.category == category}>${category}</option> `\n )}\n </select>\n </div>\n\n <ox-input-file\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n @change=${this.onCreateAttachment.bind(this)}\n ></ox-input-file>\n </ox-grist>\n `\n }\n\n async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n const { items: records, total } = await this.getAttachments({ page, limit, sorters })\n\n return {\n total,\n records\n }\n }\n\n get gristConfig() {\n return {\n list: {\n thumbnail: function (record: GristRecord, rowIndex: number) {\n return record.category == 'image'\n ? html` <img src=${record.fullpath} style=\"width: 100%; height: 100%;\" /> `\n : record.category == 'video'\n ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n : html`\n <div style=\"width: 100%; height: 100%;\" etc>\n <mwc-icon outlined>insert_drive_file</mwc-icon>\n <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n </div>\n `\n },\n fields: ['name'],\n details: ['updatedAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'open_in_new',\n handlers: {\n click: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n target: HTMLElement\n ): void => {\n window.open(record.fullpath, '_blank')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'link',\n handlers: {\n click: async (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n target: HTMLElement\n ): Promise<void> => {\n var { protocol, hostname, port } = location\n await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n target.setAttribute('data-tooltip', 'url copied!')\n await sleep(2000)\n target.removeAttribute('data-tooltip')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'delete',\n handlers: {\n click: async (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n target: HTMLElement\n ): Promise<void> => {\n await this.deleteAttachment(record.id!)\n this.refreshAttachments()\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'save_alt',\n handlers: {\n click: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number,\n target: HTMLElement\n ): void => {\n const element = document.createElement('a')\n element.setAttribute('href', record.fullpath)\n element.setAttribute('download', record.name!)\n document.body.appendChild(element)\n element.click()\n }\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n header: 'name',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n sortable: true\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n dblclick: (\n columns: ColumnConfig[],\n data: GristData,\n column: ColumnConfig,\n record: GristRecord,\n rowIndex: number\n ): void => {\n alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n }\n }\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: true\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n click: 'select-row-toggle'\n },\n classifier: function (\n record: GristRecord,\n rowIndex: number\n ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n },\n sorters: [\n {\n name: 'name',\n desc: false\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n }\n }\n\n async firstUpdated() {\n this.refreshAttachments()\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('category')) {\n this.refreshAttachments()\n }\n }\n\n onClickSelect(attachment: any) {\n this.dispatchEvent(\n new CustomEvent('attachment-selected', {\n composed: true,\n bubbles: true,\n detail: {\n attachment\n }\n })\n )\n }\n\n async onCreateAttachment(e: CustomEvent) {\n const files = e.detail\n\n await this.createAttachments(files)\n this.refreshAttachments()\n }\n\n async onDeleteAttachment(id: string) {\n await this.deleteAttachment(id)\n\n this.refreshAttachments()\n }\n\n async refreshAttachments() {\n this.grist.fetch()\n }\n\n async getAttachments({\n page = 1,\n limit = 30,\n sorters = []\n }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n var filters: QueryFilter[] = []\n var sortings: SortersConfig = []\n var pagination: PaginationConfig = {\n limit,\n page\n }\n\n if (this.category)\n filters.push({\n name: 'category',\n operator: 'eq',\n value: this.category\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n\n var attachmentListResponse = await client.query({\n query: FETCH_ATTACHMENT_LIST_GQL(params)\n })\n\n if (!attachmentListResponse || !attachmentListResponse.data) {\n return {}\n }\n\n return attachmentListResponse?.data?.attachments || {}\n }\n\n async createAttachments(files: File[]) {\n /*\n ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n */\n\n const response = await client.mutate({\n mutation: CREATE_ATTACHMENTS_GQL,\n variables: {\n attachments: files.map(file => {\n return { file }\n })\n },\n context: {\n hasUpload: true\n }\n })\n }\n\n async deleteAttachment(id: string) {\n const response = await client.mutate({\n mutation: DELETE_ATTACHMENT_GQL,\n variables: {\n id\n }\n })\n\n return response.data\n }\n}\n"]}
|