@xuda.io/xuda-widget-plugin-xuda-drive 1.0.32 → 1.0.34

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.
Files changed (3) hide show
  1. package/index.mjs +37 -16
  2. package/package.json +1 -1
  3. package/runtime.mjs +353 -308
package/index.mjs CHANGED
@@ -8,14 +8,15 @@ var common_fields = {
8
8
  type: "string",
9
9
  render: "segment",
10
10
  tooltip: "",
11
+ defaultValue: () => false,
11
12
  options: [
12
13
  {
13
- label: "No",
14
- value: "",
14
+ label: "Yes",
15
+ value: true,
15
16
  },
16
17
  {
17
- label: "Yes",
18
- value: "Y",
18
+ label: "No",
19
+ value: false,
19
20
  },
20
21
  ],
21
22
  },
@@ -53,14 +54,15 @@ var common_fields = {
53
54
  type: "string",
54
55
  render: "segment",
55
56
  tooltip: "",
57
+ defaultValue: () => false,
56
58
  options: [
57
59
  {
58
- label: "No",
59
- value: "",
60
+ label: "Yes",
61
+ value: true,
60
62
  },
61
63
  {
62
- label: "Yes",
63
- value: "Y",
64
+ label: "No",
65
+ value: false,
64
66
  },
65
67
  ],
66
68
  },
@@ -79,14 +81,15 @@ var common_fields = {
79
81
  type: "string",
80
82
  render: "segment",
81
83
  tooltip: "Create tags extract from file name",
84
+ defaultValue: () => false,
82
85
  options: [
83
86
  {
84
- label: "No",
85
- value: "",
87
+ label: "Yes",
88
+ value: true,
86
89
  },
87
90
  {
88
- label: "Yes",
89
- value: "Y",
91
+ label: "No",
92
+ value: false,
90
93
  },
91
94
  ],
92
95
  },
@@ -126,14 +129,15 @@ var common_fields = {
126
129
  type: "string",
127
130
  render: "segment",
128
131
  tooltip: "",
132
+ defaultValue: () => false,
129
133
  options: [
130
134
  {
131
- label: "No",
132
- value: "",
135
+ label: "Yes",
136
+ value: true,
133
137
  },
134
138
  {
135
- label: "Yes",
136
- value: "Y",
139
+ label: "No",
140
+ value: false,
137
141
  },
138
142
  ],
139
143
  },
@@ -141,6 +145,23 @@ var common_fields = {
141
145
  label: "Upload Folder",
142
146
  type: "string",
143
147
  },
148
+ prompt_file_exist: {
149
+ label: "Prompt file exist",
150
+ type: "string",
151
+ render: "segment",
152
+ tooltip: "",
153
+ defaultValue: () => true,
154
+ options: [
155
+ {
156
+ label: "Yes",
157
+ value: true,
158
+ },
159
+ {
160
+ label: "No",
161
+ value: false,
162
+ },
163
+ ],
164
+ },
144
165
  };
145
166
 
146
167
  export const methods = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
3
- "version": "1.0.32",
3
+ "version": "1.0.34",
4
4
  "description": "Xuda Drive widget plugin",
5
5
  "scripts": {
6
6
  "pub": "npm version patch --force && npm publish --access public"
package/runtime.mjs CHANGED
@@ -1,4 +1,6 @@
1
1
  export async function upload(fields, e) {
2
+ var overrideAction = "replace";
3
+ var existingFiles = {};
2
4
  fields.method = e.method;
3
5
 
4
6
  var ret_obj = { app_files: [], addedArr: [], deletedArr: [] };
@@ -6,106 +8,28 @@ export async function upload(fields, e) {
6
8
 
7
9
  var widget_cssClass = fields.widget_cssClass;
8
10
 
9
- await func.utils.load_js_on_demand(
10
- func.common.get_url(
11
- e.SESSION_ID,
12
- "dist",
13
- "runtime/node_modules/filepond/dist/filepond.js"
14
- )
15
- );
16
-
17
- await func.utils.load_js_on_demand(
18
- func.common.get_url(
19
- e.SESSION_ID,
20
- "dist",
21
- "runtime/node_modules/jquery-filepond/filepond.jquery.js"
22
- )
23
- );
24
-
25
- await func.utils.load_js_on_demand(
26
- func.common.get_url(
27
- e.SESSION_ID,
28
- "dist",
29
- "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"
30
- )
31
- );
32
-
33
- await func.utils.load_js_on_demand(
34
- func.common.get_url(
35
- e.SESSION_ID,
36
- "dist",
37
- "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"
38
- )
39
- );
40
-
41
- await func.utils.load_js_on_demand(
42
- func.common.get_url(
43
- e.SESSION_ID,
44
- "dist",
45
- "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"
46
- )
47
- );
48
-
49
- await func.utils.load_js_on_demand(
50
- func.common.get_url(
51
- e.SESSION_ID,
52
- "dist",
53
- "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"
54
- )
55
- );
56
-
57
- await func.utils.load_js_on_demand(
58
- func.common.get_url(
59
- e.SESSION_ID,
60
- "dist",
61
- "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"
62
- )
63
- );
64
-
65
- await func.utils.load_js_on_demand(
66
- func.common.get_url(
67
- e.SESSION_ID,
68
- "dist",
69
- "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"
70
- )
71
- );
72
-
73
- await func.utils.load_css_on_demand(
74
- func.common.get_url(
75
- e.SESSION_ID,
76
- "dist",
77
- "runtime/node_modules/filepond/dist/filepond.css"
78
- )
79
- );
80
-
81
- func.utils.load_css_on_demand(
82
- func.common.get_url(
83
- e.SESSION_ID,
84
- "dist",
85
- "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"
86
- )
87
- );
88
- func.utils.load_css_on_demand(
89
- func.common.get_url(
90
- e.SESSION_ID,
91
- "dist",
92
- "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
93
- )
94
- );
95
- func.utils.load_css_on_demand(
96
- func.common.get_url(
97
- e.SESSION_ID,
98
- "dist",
99
- "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"
100
- )
101
- );
102
- func.utils.load_css_on_demand(
103
- func.common.get_url(
104
- e.SESSION_ID,
105
- "dist",
106
- "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"
107
- )
108
- );
11
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond/dist/filepond.js"));
12
+
13
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/jquery-filepond/filepond.jquery.js"));
14
+
15
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"));
16
+
17
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"));
18
+
19
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"));
20
+
21
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"));
22
+
23
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"));
24
+
25
+ await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"));
26
+
27
+ await func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond/dist/filepond.css"));
28
+
29
+ func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"));
30
+ func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"));
31
+ func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"));
32
+ func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"));
109
33
 
110
34
  var pond = undefined;
111
35
 
@@ -118,8 +42,8 @@ export async function upload(fields, e) {
118
42
  init_files.push({
119
43
  source: val,
120
44
  options: {
121
- type: "local",
122
- },
45
+ type: "local"
46
+ }
123
47
  });
124
48
  });
125
49
  };
@@ -127,9 +51,7 @@ export async function upload(fields, e) {
127
51
  // init files from predefined array
128
52
  if (!_.isEmpty(fields.file_upload_init_file_array)) {
129
53
  if (typeof fields.file_upload_init_file_array === "string") {
130
- fields.file_upload_init_file_array = eval(
131
- fields.file_upload_init_file_array
132
- );
54
+ fields.file_upload_init_file_array = eval(fields.file_upload_init_file_array);
133
55
  }
134
56
  if (fields.file_upload_init_file_array?.length) {
135
57
  init_files_fn(fields.file_upload_init_file_array);
@@ -172,22 +94,17 @@ export async function upload(fields, e) {
172
94
 
173
95
  if (!_.isEmpty(fields["xu-bind"])) {
174
96
  var ret = ret_obj.app_files;
175
- if (typeof initialBindValue === "string")
176
- ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
97
+ if (typeof initialBindValue === "string") ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
177
98
 
178
99
  await e.api_utils.set_field_value(fields["xu-bind"], ret);
179
100
  }
180
101
 
181
102
  if (is_remove && fields.event_name_for_successful_remove_callback) {
182
- await e.api_utils.invoke_event(
183
- fields.event_name_for_successful_remove_callback
184
- );
103
+ await e.api_utils.invoke_event(fields.event_name_for_successful_remove_callback);
185
104
  }
186
105
 
187
106
  if (!is_remove && fields.event_name_for_successful_callback) {
188
- await e.api_utils.invoke_event(
189
- fields.event_name_for_successful_callback
190
- );
107
+ await e.api_utils.invoke_event(fields.event_name_for_successful_callback);
191
108
  }
192
109
 
193
110
  if (fields.clear_on_file_upload) {
@@ -197,14 +114,10 @@ export async function upload(fields, e) {
197
114
  }, 100);
198
115
  };
199
116
 
200
- var $pallet_wrapper = $(
201
- `<div class="image_wrapper" style="border: none !important;">`
202
- );
117
+ var $pallet_wrapper = $(`<div class="image_wrapper" style="border: none !important;">`);
203
118
 
204
119
  var input_id = new Date().valueOf();
205
- var $imgInp = $(
206
- `<input class="filepond ${widget_cssClass}" id="${input_id}" />`
207
- ).appendTo($pallet_wrapper);
120
+ var $imgInp = $(`<input class="filepond ${widget_cssClass}" id="${input_id}" />`).appendTo($pallet_wrapper);
208
121
 
209
122
  e.$containerP.html($pallet_wrapper);
210
123
 
@@ -236,7 +149,7 @@ export async function upload(fields, e) {
236
149
 
237
150
  fetch(url, {
238
151
  method: "POST",
239
- body: e,
152
+ body: e
240
153
  }).then((res) => {
241
154
  console.log("Request complete! response:", res);
242
155
  });
@@ -256,12 +169,7 @@ export async function upload(fields, e) {
256
169
  imageEditorSupportImage: (file) => {
257
170
  // return /^image/.test(file);
258
171
 
259
- return (
260
- file.type !== "image/svg+xml" &&
261
- file.type !== "image/gif" &&
262
- !file.type.includes("audio") &&
263
- !file.type.includes("video")
264
- );
172
+ return file.type !== "image/svg+xml" && file.type !== "image/gif" && !file.type.includes("audio") && !file.type.includes("video");
265
173
  },
266
174
 
267
175
  imageEditor: {
@@ -271,9 +179,9 @@ export async function upload(fields, e) {
271
179
 
272
180
  imageProcessor: pintura.processImage,
273
181
  editorOptions: {
274
- ...pintura.getEditorDefaults(),
182
+ ...pintura.getEditorDefaults()
275
183
  },
276
- legacyDataToImageState: pintura.legacyDataToImageState,
184
+ legacyDataToImageState: pintura.legacyDataToImageState
277
185
  },
278
186
  server: {
279
187
  load: (source, load, error, progress, abort, headers) => {
@@ -300,33 +208,21 @@ export async function upload(fields, e) {
300
208
  return {
301
209
  abort: () => {
302
210
  abort();
303
- },
211
+ }
304
212
  };
305
213
  },
306
- process: (
307
- fieldName,
308
- file,
309
- metadata,
310
- load,
311
- error,
312
- progress,
313
- abort,
314
- transfer,
315
- options
316
- ) => {
214
+ process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
317
215
  let formData = new FormData();
318
216
  formData.append("file", file, file.name);
319
217
  const { app_id, gtp_token, app_token } = e._session;
320
218
 
321
- formData.append(
322
- "app_id_reference",
323
- APP_OBJ?.[app_id]?.app_id_reference
324
- );
219
+ formData.append("app_id_reference", APP_OBJ?.[app_id]?.app_id_reference);
325
220
  formData.append("app_id", app_id);
326
221
  formData.append("gtp_token", gtp_token);
327
222
  formData.append("app_token", app_token);
328
- formData.append("folder", fields.file_upload_folder);
329
- formData.append("public", fields.public_file);
223
+ formData.append("drive_type", "workspace");
224
+ if (fields.file_upload_folder) formData.append("folder", fields.file_upload_folder);
225
+ if (fields.public_file) formData.append("make_public", fields.public_file);
330
226
 
331
227
  let tags = fields.assign_file_tags || [];
332
228
 
@@ -350,20 +246,32 @@ export async function upload(fields, e) {
350
246
 
351
247
  let _domain = e._session.domain;
352
248
  if (e._session.is_deployment) {
353
- _domain =
354
- e._session.opt.regional_server === "dev.xuda.io"
355
- ? "dev.xuda.io"
356
- : "xuda.io";
249
+ _domain = e._session.opt.regional_server === "dev.xuda.io" ? "dev.xuda.io" : "xuda.io";
357
250
  }
358
251
 
359
- request.open("POST", `https://${_domain}/rpi/runtime_upload_file`);
252
+ if (overrideAction === "replace" && file.name in existingFiles) {
253
+ formData.append("file_path", "/" + file.name);
254
+ formData.append("file_name", file.name);
255
+ request.open("POST", `https://${_domain}/cpi/update_drive_file_workspace`);
256
+ } else {
257
+ request.open("POST", `https://${_domain}/cpi/upload_drive_file_workspace`);
258
+ }
259
+
260
+ request.setRequestHeader("xu-gtp-token", gtp_token);
261
+ request.setRequestHeader("xu-app-token", app_token);
262
+
263
+ // request.open("POST", `https://${_domain}/rpi/runtime_upload_file`);
360
264
 
361
265
  request.upload.onprogress = (e) => {
362
266
  progress(e.lengthComputable, e.loaded, e.total);
363
267
  };
364
268
 
365
269
  request.onload = async function () {
366
- const res = JSON.parse(request.responseText);
270
+ var res = {};
271
+ try {
272
+ res = JSON.parse(request.responseText);
273
+ } catch (error) {}
274
+
367
275
  if (request.status >= 200 && request.status < 300 && res.code > 0) {
368
276
  // the load method accepts either a string (id) or an object
369
277
  load(request.responseText);
@@ -377,7 +285,7 @@ export async function upload(fields, e) {
377
285
  // if (fields.instant_file_upload === "N" ? false : true) do_callback();
378
286
  } else {
379
287
  // Can call the error method if something is wrong, should exit after
380
- e.report_error(res.data);
288
+ // e.report_error(res.data);
381
289
  }
382
290
  };
383
291
 
@@ -391,7 +299,7 @@ export async function upload(fields, e) {
391
299
 
392
300
  // Let FilePond know the request has been cancelled
393
301
  abort();
394
- },
302
+ }
395
303
  };
396
304
  },
397
305
 
@@ -409,15 +317,12 @@ export async function upload(fields, e) {
409
317
  let app_id = e._session.app_id;
410
318
  let app_id_reference = APP_OBJ[app_id].app_id_reference;
411
319
 
412
- axios_ajax(
413
- func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"),
414
- {
415
- app_id,
416
- server_files: ret_obj.deletedArr,
417
- app_id_reference: app_id_reference,
418
- gtp_token: e._session.gtp_token,
419
- }
420
- );
320
+ axios_ajax(func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"), {
321
+ app_id,
322
+ server_files: ret_obj.deletedArr,
323
+ app_id_reference: app_id_reference,
324
+ gtp_token: e._session.gtp_token
325
+ });
421
326
  load();
422
327
  },
423
328
  remove: (source, load, error) => {
@@ -425,23 +330,20 @@ export async function upload(fields, e) {
425
330
 
426
331
  ret_obj.deletedArr.push(source_clean);
427
332
 
428
- var myIndex = ret_obj.app_files.indexOf(
429
- (file) => file.server_fileName === source
430
- );
333
+ var myIndex = ret_obj.app_files.indexOf((file) => file.server_fileName === source);
431
334
  if (myIndex !== -1) {
432
335
  ret_obj.app_files.splice(myIndex, 1);
433
336
  }
434
337
 
435
338
  ////////////// CALLBACK
436
- if (fields.instant_file_upload === "N" ? false : true)
437
- do_callback(true);
339
+ if (fields.instant_file_upload === "N" ? false : true) do_callback(true);
438
340
  // Can call the error method if something is wrong, should exit after
439
341
  // error('oh my goodness');
440
342
 
441
343
  // Should call the load method when done, no parameters required
442
344
  load();
443
- },
444
- },
345
+ }
346
+ }
445
347
  };
446
348
 
447
349
  if (fields.file_upload_drop_area_label) {
@@ -497,45 +399,37 @@ export async function upload(fields, e) {
497
399
  do_callback();
498
400
  });
499
401
 
500
- return;
402
+ function processFiles(params) {
403
+ overrideAction = params.overrideAction;
404
+ existingFiles = params.existingFiles;
405
+
406
+ pond.processFiles();
407
+ }
408
+
409
+ return {
410
+ pond,
411
+ processFiles
412
+ };
501
413
  }
502
414
 
503
415
  export async function viewer(fields, e) {
504
416
  const { app_id, gtp_token, app_token } = e._session;
505
417
 
506
- await func.utils.load_js_on_demand(
507
- "https://cdn.tailwindcss.com?plugins=forms"
508
- );
418
+ await func.utils.load_js_on_demand("https://cdn.tailwindcss.com?plugins=forms");
509
419
 
510
- await func.utils.load_js_on_demand(
511
- "https://cdn.jsdelivr.net/npm/vue@3.5.6/dist/vue.global.js"
512
- );
420
+ await func.utils.load_js_on_demand("https://cdn.jsdelivr.net/npm/vue@3.5.6/dist/vue.global.js");
513
421
 
514
- await func.utils.load_js_on_demand(
515
- "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"
516
- );
422
+ await func.utils.load_js_on_demand("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js");
517
423
 
518
- await func.utils.load_js_on_demand(
519
- "https://unpkg.com/swiper/swiper-bundle.min.js"
520
- );
521
- await func.utils.load_css_on_demand(
522
- "https://unpkg.com/swiper/swiper-bundle.min.css"
523
- );
424
+ await func.utils.load_js_on_demand("https://unpkg.com/swiper/swiper-bundle.min.js");
425
+ await func.utils.load_css_on_demand("https://unpkg.com/swiper/swiper-bundle.min.css");
524
426
 
525
427
  await func.utils.load_js_on_demand("https://unpkg.com/@vueuse/shared");
526
428
  await func.utils.load_js_on_demand("https://unpkg.com/@vueuse/core");
527
- await func.utils.load_js_on_demand(
528
- "https://unpkg.com/@floating-ui/core@1.1.1"
529
- );
530
- await func.utils.load_js_on_demand(
531
- "https://unpkg.com/@floating-ui/dom@1.1.1"
532
- );
533
- await func.utils.load_js_on_demand(
534
- "https://unpkg.com/floating-vue@5.2.2/dist/floating-vue.umd.js"
535
- );
536
- await func.utils.load_css_on_demand(
537
- "https://unpkg.com/floating-vue@^5.2.2/dist/style.css"
538
- );
429
+ await func.utils.load_js_on_demand("https://unpkg.com/@floating-ui/core@1.1.1");
430
+ await func.utils.load_js_on_demand("https://unpkg.com/@floating-ui/dom@1.1.1");
431
+ await func.utils.load_js_on_demand("https://unpkg.com/floating-vue@5.2.2/dist/floating-vue.umd.js");
432
+ await func.utils.load_css_on_demand("https://unpkg.com/floating-vue@^5.2.2/dist/style.css");
539
433
 
540
434
  var fs = import("./fs-lightbox.js");
541
435
 
@@ -579,7 +473,7 @@ export async function viewer(fields, e) {
579
473
  ></circle>
580
474
  </svg>
581
475
  </div>
582
- `,
476
+ `
583
477
  };
584
478
 
585
479
  var segmentComponent = {
@@ -593,7 +487,7 @@ export async function viewer(fields, e) {
593
487
  },
594
488
  set(v) {
595
489
  this.$emit("update:modelValue", v);
596
- },
490
+ }
597
491
  },
598
492
  segmentActive() {
599
493
  // debugger;
@@ -603,7 +497,7 @@ export async function viewer(fields, e) {
603
497
 
604
498
  // debugger;
605
499
  return ret;
606
- },
500
+ }
607
501
  },
608
502
  template: `
609
503
  <div class="flex relative items-center rounded-lg bg-gray-100 [&>button]:px-4 [&>button]:py-2">
@@ -614,15 +508,15 @@ export async function viewer(fields, e) {
614
508
  </button>
615
509
 
616
510
 
617
- <div :style="{ left: segmentActive > 0 ? (Number(segmentActive) / options.length) * 100 + '%' : 0, width: 100 / options.length + '%' }" class="after:absolute transition-all duration-300 after:inset-[1px] after:bg-white after:rounded-lg after:shadow absolute h-full rounded"></div>
511
+ <div :style="{ left: segmentActive > 0 ? (Number(segmentActive) / options.length) * 100 + '%' : 0, width: 100 / options.length + '%' }" class="after:absolute transition-all duration-300 after:inset-[3px] after:bg-white after:rounded-lg after:shadow absolute h-full rounded"></div>
618
512
  </div>
619
- `,
513
+ `
620
514
  };
621
515
 
622
516
  const html = `
623
517
  <div class="flex flex-col divide-y overflow-hidden h-full" dir="ltr">
624
518
 
625
- <div v-if="options.show_toolbar !== 'N'" class="flex items-center py-2 px-6">
519
+ <div v-if="options.show_toolbar !== false" class="flex items-center py-2 px-6">
626
520
  <div class="flex gap-2 items-center flex-1">
627
521
  <h1 class=" text-2xl font-bold text-gray-900 capitalize" v-text="options.toolbar_label || view"></h1>
628
522
 
@@ -651,7 +545,21 @@ export async function viewer(fields, e) {
651
545
  <input type="text" ref="search" placeholder="Search" @focus="search.length ? (showSearchPopper = true) : ''" @blur="hideSearchPopper" class="border-0 ring-0 focus:ring-0 py-0 px-1" v-model.trim="search" @keyup.delete="removeLastSearch" />
652
546
  </li>
653
547
 
654
- <sepcial-loader class="absolute size-5" v-if="loadingSearch" />
548
+ <div class="absolute right-4 flex items-center gap-2 empty:hidden">
549
+
550
+
551
+ <sepcial-loader class="size-5" v-if="loadingSearch" />
552
+
553
+ <template v-if="search.length">
554
+ <button @click="search = '' ">
555
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
556
+ </button>
557
+ </template>
558
+
559
+
560
+ </div>
561
+
562
+
655
563
 
656
564
  </ul>
657
565
  <template #popper>
@@ -698,8 +606,9 @@ export async function viewer(fields, e) {
698
606
  </div>
699
607
  </div>
700
608
 
609
+ <template v-if="view === 'gallery' || view === 'list'">
701
610
 
702
- <div v-if="view === 'gallery' || view === 'list'" class="flex-1 overflow-auto" :class="{ 'grid gap-x-4 gap-y-4 grid-cols-2 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-6 p-4': view === 'gallery', 'flex flex-col divide-y': view === 'list' }">
611
+ <div class="flex-1 overflow-auto" :class="{ 'grid gap-x-4 gap-y-4 grid-cols-2 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 xl:gap-x-6 p-4': view === 'gallery', 'flex flex-col divide-y': view === 'list' }">
703
612
 
704
613
  <div :class="{ 'md:col-span-4 xl:col-span-5 grid gap-x-4 gap-y-3 grid-cols-2 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 sm:gap-x-6': view === 'gallery'}">
705
614
  <template v-for="folder in folders">
@@ -737,7 +646,7 @@ export async function viewer(fields, e) {
737
646
  <svg class="size-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
738
647
  </div>
739
648
 
740
- <div class="pointer-events-none block w-56 truncate text-left font-medium dark:text-newDark-100 2xl:w-full" v-text="file.name"></div>
649
+ <div class="pointer-events-none block w-56 truncate text-left font-medium 2xl:w-full" v-text="file.name"></div>
741
650
  </div>
742
651
  <div class="flex items-center gap-2 truncate text-gray-500">
743
652
  <div class="truncate" v-text="file.size"></div>
@@ -746,26 +655,32 @@ export async function viewer(fields, e) {
746
655
  </div>
747
656
  </template>
748
657
 
749
- <div v-if="!isEndOfList && (!loadingSearch || loadingSearch && allLoading) && files.length" class="text-center col-span-5 py-6">
750
- <button :class="[allLoading ? 'px-1.5' : 'px-4']" class="bg-black rounded-full py-1.5 transition-all text-white font-semibold shadow-xl shadow-black/30" @click="refreshDirectory(true)">
658
+
659
+ </div>
660
+
661
+ <div v-if="!isEndOfList && (!loadingSearch || loadingSearch && allLoading) && files.length" class="sticky text-center col-span-5 py-6 bottom-0 left-0 right-0">
662
+ <button :class="[allLoading ? 'px-1.5' : 'px-4']" class="px-4 bg-black/80 rounded-full py-1.5 transition-all text-white font-semibold" @click="refreshDirectory(true)">
751
663
 
752
- <template v-if="allLoading">
753
- <sepcial-loader class="size-6" />
754
- </template>
664
+ <template v-if="allLoading">
665
+ <sepcial-loader class="size-6" />
666
+ </template>
755
667
 
756
- <template v-else>
757
- Load all
758
- </template>
668
+ <template v-else>
669
+ Load all
670
+ </template>
671
+
672
+
673
+ </button>
674
+ </div>
675
+
676
+ </template>
759
677
 
760
-
761
- </button>
762
- </div>
763
678
 
764
- </div>
765
-
766
679
 
767
- <div v-if="view === 'slider'" class="flex items-center justify-between py-4 px-4 flex-1 h-full">
768
- <div class="absolute inset-y-0 left-0 z-10 flex items-center">
680
+
681
+
682
+ <div v-if="view === 'slider'" class="relative flex items-center justify-between py-4 px-4 flex-1 h-full overflow-hidden">
683
+ <div class="absolute inset-y-0 left-6 z-10 flex items-center">
769
684
  <button @click="swiper.slidePrev()" class="bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
770
685
  <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-left w-6 h-6"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
771
686
  </button>
@@ -790,13 +705,14 @@ export async function viewer(fields, e) {
790
705
  </div>
791
706
  </div>
792
707
 
793
- <div class="absolute inset-y-0 right-0 z-10 flex items-center">
708
+ <div class="absolute inset-y-0 right-6 z-10 flex items-center">
794
709
  <button @click="swiper.slideNext()" class="bg-white -mr-2 lg:-mr-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
795
710
  <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-right w-6 h-6"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
796
711
  </button>
797
712
  </div>
798
713
  </div>
799
714
 
715
+
800
716
 
801
717
  </div>
802
718
 
@@ -818,21 +734,21 @@ export async function viewer(fields, e) {
818
734
 
819
735
  >
820
736
 
821
- <div v-show="uploadModal" class="relative w-full py-6 bg-white border shadow-lg px-7 border-neutral-200 sm:max-w-lg sm:rounded-lg">
737
+ <div v-show="uploadModal" class="relative w-full py-6 bg-white border shadow-lg px-7 border-neutral-200 sm:max-w-lg sm:rounded-lg overflow-hidden">
822
738
  <div class="flex items-center justify-between pb-3">
823
739
  <h3 class="text-lg font-semibold" v-text="'Upload file' + (options.file_upload_allow_multiple_files ? 's' : '')"></h3>
824
740
  <button @click="uploadModal=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
825
741
  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
826
742
  </button>
827
743
  </div>
828
- <div id="imageUploaderComponent" class="relative w-auto pb-8"></div>
744
+ <div id="imageUploaderComponent" class="relative w-auto pb-8 h-48 [&>div]:h-full [&>div>div]:h-full"></div>
829
745
  <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
830
746
  <button @click="uploadModal=false" type="button" class="inline-flex gap-2 items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">
831
747
 
832
748
  <div>Dismiss</div>
833
749
  </button>
834
750
  <button
835
- @click="uploadFiles"
751
+ @click="uploadFiles(false)"
836
752
  :disabled="uploaderLoading"
837
753
  type="button"
838
754
  class="inline-flex items-center gap-2 justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -845,7 +761,59 @@ export async function viewer(fields, e) {
845
761
  <template v-else>Upload</template>
846
762
  </button>
847
763
  </div>
764
+
765
+
766
+
767
+
768
+ <div v-show="showExistModal" class="absolute inset-0 bg-white py-6 px-7 flex flex-col ">
769
+ <div class="flex items-center justify-between pb-3">
770
+ <h3 class="text-lg font-semibold">Upload options</h3>
771
+ <button @click="showExistModal=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
772
+ <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
773
+ </button>
774
+ </div>
775
+
776
+
777
+ <div class="flex-1">
778
+ <p class="text-gray-800">
779
+ One or more items already exists in this location. Do you want to replace the existing items with a new version or keep both items?
780
+ Replacing the items won't change sharing settings.
781
+ </p>
782
+
783
+ <fieldset>
784
+ <div class="mt-6 space-y-5 pl-2">
785
+ <div v-for="option in replaceOptions" :key="option.value">
786
+ <label :for="option.value" class="flex items-center cursor-pointer">
787
+ <input :id="option.value" name="notification-method" type="radio" :value="option.value" v-model="overrideAction" :checked="option.value === overrideAction" class="option-radio peer" />
788
+ <div class="ml-3 block font-medium peer-checked:text-black text-light-700 cursor-pointer">{{ option.label }}</div>
789
+ </label>
790
+ </div>
791
+ </div>
792
+ </fieldset>
793
+ </div>
794
+
795
+
796
+ <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
797
+ <button @click="showExistModal=false" type="button" class="inline-flex gap-2 items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">
798
+
799
+ <div>Dismiss</div>
800
+ </button>
801
+ <button
802
+ @click="uploadFiles(true)"
803
+ :disabled="uploaderLoading"
804
+ type="button"
805
+ class="inline-flex items-center gap-2 justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed"
806
+ >
807
+
808
+
809
+ Upload
810
+ </button>
811
+ </div>
848
812
  </div>
813
+
814
+ </div>
815
+
816
+
849
817
 
850
818
 
851
819
  </transition>
@@ -861,33 +829,31 @@ export async function viewer(fields, e) {
861
829
 
862
830
  `;
863
831
 
864
- const search_drive = async function (opt) {
832
+ const fetcher = async function (service, opt) {
865
833
  let _domain = e._session.domain;
866
834
  if (e._session.is_deployment) {
867
- _domain =
868
- e._session.opt.regional_server === "dev.xuda.io"
869
- ? "dev.xuda.io"
870
- : "xuda.io";
835
+ _domain = e._session.opt.regional_server === "dev.xuda.io" ? "dev.xuda.io" : "xuda.io";
871
836
  }
872
837
 
873
- const response = await fetch(
874
- `https://${_domain}/cpi/get_drive_files_workspace`,
875
- {
876
- method: "POST",
877
- headers: {
878
- Accept: "application/json",
879
- "Content-Type": "application/json",
880
- "xu-gtp-token": gtp_token,
881
- "xu-app-token": app_token,
882
- },
883
- body: JSON.stringify(opt),
884
- }
885
- );
838
+ opt.app_id = app_id;
839
+
840
+ const response = await fetch(`https://${_domain}/cpi/${service}`, {
841
+ method: "POST",
842
+ headers: {
843
+ Accept: "application/json",
844
+ "Content-Type": "application/json",
845
+ "xu-gtp-token": gtp_token,
846
+ "xu-app-token": app_token
847
+ },
848
+ body: JSON.stringify(opt)
849
+ });
850
+
851
+ const json = await response.json();
886
852
 
887
853
  if (!response.ok) {
888
- throw response.status;
854
+ throw json;
889
855
  }
890
- const json = await response.json();
856
+
891
857
  return json;
892
858
  };
893
859
 
@@ -912,29 +878,33 @@ export async function viewer(fields, e) {
912
878
  components: {
913
879
  VDropdown: FloatingVue.Dropdown,
914
880
  segmentComponent,
915
- sepcialLoader,
881
+ sepcialLoader
916
882
  },
917
883
  data() {
918
884
  return {
885
+ replaceOptions: [
886
+ { label: "Replace existing items", value: "replace" },
887
+ { label: "Keep all items", value: "keep" }
888
+ ],
919
889
  sortDirOptions: [
920
890
  {
921
891
  label: "Ascending",
922
- value: "asc",
892
+ value: "asc"
923
893
  },
924
894
  {
925
895
  label: "Descending",
926
- value: "desc",
927
- },
896
+ value: "desc"
897
+ }
928
898
  ],
929
899
  sortOptions: [
930
900
  {
931
901
  label: "Date",
932
- value: "date",
902
+ value: "date"
933
903
  },
934
904
  {
935
905
  label: "Name",
936
- value: "name",
937
- },
906
+ value: "name"
907
+ }
938
908
  ],
939
909
  viewOptions: [
940
910
  {
@@ -946,7 +916,7 @@ export async function viewer(fields, e) {
946
916
  ></path>
947
917
  </svg>`,
948
918
  label: "",
949
- value: "gallery",
919
+ value: "gallery"
950
920
  },
951
921
  {
952
922
  icon: ` <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -957,7 +927,7 @@ export async function viewer(fields, e) {
957
927
  ></path>
958
928
  </svg>`,
959
929
  label: "",
960
- value: "list",
930
+ value: "list"
961
931
  },
962
932
  {
963
933
  icon: ` <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
@@ -965,8 +935,8 @@ export async function viewer(fields, e) {
965
935
  <path d="M192,48H64A16,16,0,0,0,48,64V192a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48Zm0,144H64V64H192V192ZM240,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0ZM32,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Z"></path>
966
936
  </svg>`,
967
937
  label: "",
968
- value: "slider",
969
- },
938
+ value: "slider"
939
+ }
970
940
  ],
971
941
  options: fields,
972
942
  folders: [],
@@ -975,7 +945,7 @@ export async function viewer(fields, e) {
975
945
  uploadModal: false,
976
946
  uploaderLoading: false,
977
947
  loadingSearch: false,
978
- search_drive,
948
+ fetcher,
979
949
  formatBytes,
980
950
  initUploader: upload,
981
951
  swiper: null,
@@ -987,18 +957,18 @@ export async function viewer(fields, e) {
987
957
  {
988
958
  label: "Filename",
989
959
  tag: "name",
990
- modifier: "contains",
960
+ modifier: "contains"
991
961
  },
992
962
  {
993
963
  label: "Tag",
994
964
  tag: "tag",
995
- modifier: "equals",
965
+ modifier: "equals"
996
966
  },
997
967
  {
998
968
  label: "Content",
999
969
  tag: "any",
1000
- modifier: "contains",
1001
- },
970
+ modifier: "contains"
971
+ }
1002
972
  ],
1003
973
  opts: {
1004
974
  search_string: "",
@@ -1006,11 +976,16 @@ export async function viewer(fields, e) {
1006
976
  path: "/",
1007
977
  search_string: "",
1008
978
  sort_by: fields.sort_by || "date",
1009
- sort_dir: fields.sort_dir || "desc",
979
+ sort_dir: fields.sort_dir || "desc"
1010
980
  },
1011
- limit: 5,
981
+ limit: 10,
1012
982
  isEndOfList: false,
983
+ existingFiles: {},
1013
984
  allLoading: false,
985
+ showExistModal: false,
986
+ overrideAction: "replace",
987
+ pond: null,
988
+ processFiles: null
1014
989
  };
1015
990
  },
1016
991
  methods: {
@@ -1023,40 +998,95 @@ export async function viewer(fields, e) {
1023
998
  this.isEndOfList = false;
1024
999
  }
1025
1000
 
1026
- const folders = await this.search_drive({
1001
+ const folders = await this.fetcher("get_drive_files_workspace", {
1027
1002
  ...this.opts,
1028
- type: "directory",
1003
+ type: "directory"
1029
1004
  });
1030
- const files = await this.search_drive({
1005
+ const files = await this.fetcher("get_drive_files_workspace", {
1031
1006
  ...this.opts,
1032
1007
  ...(all ? {} : { from: 0, to: this.limit }),
1033
- type: "file",
1008
+ type: "file"
1034
1009
  });
1035
1010
 
1036
1011
  this.folders = folders.data.children || [];
1037
1012
  this.files = files.data.children || [];
1038
1013
 
1039
1014
  if (all) {
1040
- this.isEndOfList = true;
1041
1015
  this.allLoading = false;
1016
+ this.isEndOfList = true;
1042
1017
  }
1018
+
1019
+ if (files.length < this.limit) {
1020
+ this.allLoading = true;
1021
+ this.isEndOfList = true;
1022
+ }
1023
+
1043
1024
  this.loadingSearch = false;
1044
1025
 
1045
1026
  this.$nextTick(() => {
1046
1027
  refreshFsLightbox();
1047
1028
  });
1048
1029
  },
1049
- uploadFiles() {
1050
- var pond = FilePond.find(
1051
- $("#imageUploaderComponent").find(`.filepond`)[0]
1052
- );
1053
- // debugger;
1030
+ uploadFiles(is_after_confirm) {
1054
1031
  this.uploaderLoading = true;
1055
- pond.processFiles();
1056
1032
 
1057
- pond.on("processfile", (e) => {
1033
+ if (is_after_confirm) {
1034
+ this.showExistModal = false;
1035
+ this.processCb();
1036
+ } else {
1037
+ let promises = [];
1038
+ this.existingFiles = {};
1039
+
1040
+ this.pond
1041
+ .getFiles()
1042
+ .map((e) => e.file.name)
1043
+ .forEach((filename) => {
1044
+ promises.push(
1045
+ new Promise((resolve, reject) => {
1046
+ this.fetcher(`check_drive_file_workspace`, {
1047
+ file_path: "/" + filename,
1048
+ file_name: filename,
1049
+ type: "file"
1050
+ })
1051
+ .then((e) => {
1052
+ resolve(e);
1053
+ })
1054
+ .catch((err) => {
1055
+ this.uploaderLoading = false;
1056
+
1057
+ if (err.code === -764) {
1058
+ this.existingFiles[filename] = err.duplicates;
1059
+ resolve(err);
1060
+ return;
1061
+ }
1062
+
1063
+ reject(err);
1064
+ });
1065
+ })
1066
+ );
1067
+ });
1068
+
1069
+ Promise.all(promises)
1070
+ .then((e) => {
1071
+ if (Object.keys(this.existingFiles).length) {
1072
+ this.showExistModal = true;
1073
+ } else {
1074
+ this.processCb();
1075
+ }
1076
+ })
1077
+ .catch((e) => {
1078
+ this.showExistModal = true;
1079
+ // debugger;
1080
+ });
1081
+ }
1082
+ },
1083
+ processCb() {
1084
+ this.processFiles({ overrideAction: this.overrideAction, existingFiles: this.existingFiles });
1085
+
1086
+ this.pond.on("processfile", (e) => {
1058
1087
  this.uploaderLoading = false;
1059
- pond.removeFiles();
1088
+ this.uploadModal = false;
1089
+ this.pond.removeFiles();
1060
1090
 
1061
1091
  this.refreshDirectory();
1062
1092
  });
@@ -1085,19 +1115,17 @@ export async function viewer(fields, e) {
1085
1115
  searchDebounce: _.debounce(async function ($event) {
1086
1116
  await this.refreshDirectory();
1087
1117
  }, 400),
1088
- moment,
1118
+ moment
1089
1119
  },
1090
1120
  mounted() {
1091
1121
  var onDrop = (files) => {
1092
1122
  this.uploadModal = true;
1093
- FilePond.find(
1094
- $("#imageUploaderComponent").find(`.filepond`)[0]
1095
- )?.addFiles(files);
1123
+ this.addFiles(files);
1096
1124
  // params.$refs.ImageUploader?.$refs?.pond?.addFiles(files);
1097
1125
  };
1098
1126
 
1099
1127
  const { isOverDropZone } = VueUse.useDropZone(this.$refs.dropZoneRef, {
1100
- onDrop,
1128
+ onDrop
1101
1129
  });
1102
1130
 
1103
1131
  this.isOverDropZone = isOverDropZone;
@@ -1120,9 +1148,7 @@ export async function viewer(fields, e) {
1120
1148
  }
1121
1149
  },
1122
1150
  searchTags() {
1123
- return this.opts.search_string
1124
- .split(" ")
1125
- .filter((e) => e.includes(":"));
1151
+ return this.opts.search_string.split(" ").filter((e) => e.includes(":"));
1126
1152
  },
1127
1153
  search: {
1128
1154
  get() {
@@ -1130,44 +1156,48 @@ export async function viewer(fields, e) {
1130
1156
  .split(" ")
1131
1157
  .filter((e) => !e.includes(":"))
1132
1158
  .filter((e) => e)
1133
- .join(" ");
1159
+ .join(" ")
1160
+ .trim();
1134
1161
  },
1135
1162
 
1136
1163
  set(value) {
1137
- var existingTags = this.opts.search_string
1138
- .split(" ")
1139
- .filter((e) => e.includes(":"));
1164
+ // debugger;
1165
+ var existingTags = this.opts.search_string.split(" ").filter((e) => e.includes(":"));
1140
1166
 
1141
- this.opts.search_string = (
1142
- existingTags.join(" ") +
1143
- " " +
1144
- value
1145
- ).trim();
1167
+ this.opts.search_string = (existingTags.join(" ") + " " + value).trim();
1146
1168
 
1147
1169
  if (value.length) {
1148
1170
  this.showSearchPopper = true;
1149
1171
  } else {
1150
1172
  this.showSearchPopper = false;
1151
1173
  }
1152
- },
1153
- },
1174
+ }
1175
+ }
1154
1176
  },
1155
1177
  watch: {
1156
1178
  opts: {
1157
1179
  deep: true,
1158
1180
  handler() {
1159
1181
  this.searchDebounce();
1160
- },
1182
+ }
1161
1183
  },
1162
1184
  view: {
1163
1185
  handler(val) {
1164
1186
  if (val === "slider") {
1165
1187
  this.$nextTick(() => {
1166
- this.swiper = new Swiper(this.$refs["swiper-container"], {
1167
- loop: true,
1168
- slidesPerView: 1,
1169
- spaceBetween: 20,
1170
- });
1188
+ setTimeout(() => {
1189
+ this.swiper = new Swiper(this.$refs["swiper-container"], {
1190
+ loop: true,
1191
+ slidesPerView: 1,
1192
+ spaceBetween: 20
1193
+ });
1194
+
1195
+ this.swiper.on("slideChange", (event) => {
1196
+ if (event.activeIndex >= 5 && !this.isEndOfList && !this.loadingSearch && !this.allLoading) {
1197
+ this.refreshDirectory(true);
1198
+ }
1199
+ });
1200
+ }, 500);
1171
1201
  });
1172
1202
  }
1173
1203
 
@@ -1175,23 +1205,38 @@ export async function viewer(fields, e) {
1175
1205
  refreshFsLightbox();
1176
1206
  });
1177
1207
  },
1208
+ immediate: true
1178
1209
  },
1210
+ files() {
1211
+ this.$nextTick(() => {
1212
+ refreshFsLightbox();
1213
+ this.swiper.update();
1214
+
1215
+ // this.swiper;
1216
+ // debugger;
1217
+ // this.swiper = new Swiper(this.$refs["swiper-container"], {
1218
+ // loop: true,
1219
+ // slidesPerView: 1,
1220
+ // spaceBetween: 20
1221
+ // });
1222
+ });
1223
+ }
1179
1224
  },
1180
1225
  async created() {
1181
1226
  this.refreshDirectory();
1182
1227
 
1183
- this.$nextTick(() => {
1228
+ this.$nextTick(async () => {
1184
1229
  // debugger;
1185
- this.initUploader(
1186
- { ...fields, instant_file_upload: "N" },
1187
- { ...e, $containerP: $("#imageUploaderComponent") }
1188
- );
1230
+ var { pond, processFiles } = await this.initUploader({ ...fields, instant_file_upload: "N" }, { ...e, $containerP: $("#imageUploaderComponent") });
1231
+
1232
+ this.pond = pond;
1233
+ this.processFiles = processFiles;
1189
1234
  });
1190
1235
 
1191
1236
  this.$watch("opts", (value) => {
1192
1237
  this.refreshDirectory();
1193
1238
  });
1194
- },
1239
+ }
1195
1240
  });
1196
1241
 
1197
1242
  setTimeout(() => {