Skip to content

Commit 2bf6052

Browse files
committed
UX: Block user interface while saving content and advanced settings
Signed-off-by: Michael Mayer <michael@photoprism.app>
1 parent e7df0c2 commit 2bf6052

File tree

2 files changed

+56
-54
lines changed

2 files changed

+56
-54
lines changed

frontend/src/page/settings/advanced.vue

+33-26
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<v-col cols="12" sm="6" lg="3">
3030
<v-checkbox
3131
v-model="settings.Debug"
32-
:disabled="busy"
32+
:disabled="isDemo"
3333
class="ma-0 pa-0 input-debug"
3434
density="compact"
3535
color="surface-variant"
@@ -45,7 +45,7 @@
4545
<v-col cols="12" sm="6" lg="3">
4646
<v-checkbox
4747
v-model="settings.Experimental"
48-
:disabled="busy"
48+
:disabled="isDemo"
4949
class="ma-0 pa-0 input-experimental"
5050
density="compact"
5151
color="surface-variant"
@@ -61,7 +61,7 @@
6161
<v-col cols="12" sm="6" lg="3">
6262
<v-checkbox
6363
v-model="settings.ReadOnly"
64-
:disabled="busy"
64+
:disabled="isDemo"
6565
class="ma-0 pa-0 input-readonly"
6666
density="compact"
6767
color="surface-variant"
@@ -77,7 +77,7 @@
7777
<v-col cols="12" sm="6" lg="3">
7878
<v-checkbox
7979
v-model="settings.DisableBackups"
80-
:disabled="busy"
80+
:disabled="isDemo"
8181
class="ma-0 pa-0 input-disable-backups"
8282
density="compact"
8383
color="surface-variant"
@@ -93,7 +93,7 @@
9393
<v-col cols="12" sm="6" lg="3">
9494
<v-checkbox
9595
v-model="settings.DisableWebDAV"
96-
:disabled="busy"
96+
:disabled="isDemo"
9797
class="ma-0 pa-0 input-disable-webdav"
9898
density="compact"
9999
color="surface-variant"
@@ -109,7 +109,7 @@
109109
<v-col cols="12" sm="6" lg="3">
110110
<v-checkbox
111111
v-model="settings.DisablePlaces"
112-
:disabled="busy"
112+
:disabled="isDemo"
113113
class="ma-0 pa-0 input-disable-places"
114114
density="compact"
115115
color="surface-variant"
@@ -125,7 +125,7 @@
125125
<v-col cols="12" sm="6" lg="3">
126126
<v-checkbox
127127
v-model="settings.DisableExifTool"
128-
:disabled="busy || (!settings.Experimental && !settings.DisableExifTool)"
128+
:disabled="isDemo || (!settings.Experimental && !settings.DisableExifTool)"
129129
class="ma-0 pa-0 input-disable-exiftool"
130130
density="compact"
131131
color="surface-variant"
@@ -141,7 +141,7 @@
141141
<v-col cols="12" sm="6" lg="3">
142142
<v-checkbox
143143
v-model="settings.DisableTensorFlow"
144-
:disabled="busy"
144+
:disabled="isDemo"
145145
class="ma-0 pa-0 input-disable-tensorflow"
146146
density="compact"
147147
color="surface-variant"
@@ -170,7 +170,7 @@
170170
<v-col cols="12" sm="4">
171171
<v-checkbox
172172
v-model="settings.BackupDatabase"
173-
:disabled="busy || settings.BackupSchedule === ''"
173+
:disabled="isDemo || settings.BackupSchedule === ''"
174174
class="ma-0 pa-0 input-backup-database"
175175
density="compact"
176176
color="surface-variant"
@@ -186,7 +186,7 @@
186186
<v-col cols="12" sm="4">
187187
<v-checkbox
188188
v-model="settings.BackupAlbums"
189-
:disabled="busy"
189+
:disabled="isDemo"
190190
class="ma-0 pa-0 input-backup-albums"
191191
density="compact"
192192
color="surface-variant"
@@ -202,7 +202,7 @@
202202
<v-col cols="12" sm="4">
203203
<v-checkbox
204204
v-model="settings.SidecarYaml"
205-
:disabled="busy"
205+
:disabled="isDemo"
206206
class="ma-0 pa-0 input-sidecar-yaml"
207207
density="compact"
208208
color="surface-variant"
@@ -227,7 +227,7 @@
227227
<v-col v-if="settings.ThumbLibrary === 'imaging'" cols="12" class="py-2">
228228
<v-select
229229
v-model="settings.ThumbFilter"
230-
:disabled="busy"
230+
:disabled="isDemo"
231231
:items="options.ThumbFilters()"
232232
:label="$gettext('Downscaling Filter')"
233233
density="compact"
@@ -248,7 +248,7 @@
248248
:min="720"
249249
:max="7680"
250250
:step="4"
251-
:disabled="busy"
251+
:disabled="isDemo"
252252
hide-details
253253
class="ma-0"
254254
@end="onChange"
@@ -268,7 +268,7 @@
268268
:min="720"
269269
:max="7680"
270270
:step="4"
271-
:disabled="busy"
271+
:disabled="isDemo"
272272
hide-details
273273
class="ma-0"
274274
@end="onChange"
@@ -278,7 +278,7 @@
278278
<v-col cols="12" sm="6" lg="4" class="py-2">
279279
<v-checkbox
280280
v-model="settings.ThumbUncached"
281-
:disabled="busy"
281+
:disabled="isDemo"
282282
class="ma-0 pa-0"
283283
density="compact"
284284
color="surface-variant"
@@ -311,7 +311,7 @@
311311
v-model="settings.JpegQuality"
312312
:min="25"
313313
:max="100"
314-
:disabled="busy"
314+
:disabled="isDemo"
315315
hide-details
316316
class="ma-0"
317317
@end="onChange"
@@ -327,7 +327,7 @@
327327
:min="720"
328328
:max="30000"
329329
:step="20"
330-
:disabled="busy"
330+
:disabled="isDemo"
331331
class="ma-0"
332332
@end="onChange"
333333
></v-slider>
@@ -342,7 +342,7 @@
342342
:min="720"
343343
:max="30000"
344344
:step="20"
345-
:disabled="busy"
345+
:disabled="isDemo"
346346
class="ma-0"
347347
@end="onChange"
348348
></v-slider>
@@ -359,7 +359,7 @@
359359
<v-col cols="12" sm="6" lg="4">
360360
<v-checkbox
361361
v-model="settings.DisableDarktable"
362-
:disabled="busy || settings.DisableRaw"
362+
:disabled="isDemo || settings.DisableRaw"
363363
class="ma-0 pa-0 input-disable-darktable"
364364
density="compact"
365365
color="surface-variant"
@@ -375,7 +375,7 @@
375375
<v-col cols="12" sm="6" lg="4">
376376
<v-checkbox
377377
v-model="settings.DisableRawTherapee"
378-
:disabled="busy || settings.DisableRaw"
378+
:disabled="isDemo || settings.DisableRaw"
379379
class="ma-0 pa-0 input-disable-rawtherapee"
380380
density="compact"
381381
color="surface-variant"
@@ -391,7 +391,7 @@
391391
<v-col cols="12" sm="6" lg="4">
392392
<v-checkbox
393393
v-model="settings.RawPresets"
394-
:disabled="busy || settings.DisableRaw"
394+
:disabled="isDemo || settings.DisableRaw"
395395
class="ma-0 pa-0 input-raw-presets"
396396
density="compact"
397397
color="surface-variant"
@@ -407,7 +407,7 @@
407407
<v-col cols="12" sm="6" lg="4">
408408
<v-checkbox
409409
v-model="settings.DisableImageMagick"
410-
:disabled="busy"
410+
:disabled="isDemo"
411411
class="ma-0 pa-0 input-disable-imagemagick"
412412
density="compact"
413413
color="surface-variant"
@@ -423,7 +423,7 @@
423423
<v-col cols="12" sm="6" lg="4">
424424
<v-checkbox
425425
v-model="settings.DisableFFmpeg"
426-
:disabled="busy || (!settings.Experimental && !settings.DisableFFmpeg)"
426+
:disabled="isDemo || (!settings.Experimental && !settings.DisableFFmpeg)"
427427
class="ma-0 pa-0 input-disable-ffmpeg"
428428
density="compact"
429429
color="surface-variant"
@@ -439,7 +439,7 @@
439439
<v-col v-if="isSponsor" cols="12" sm="6" lg="4">
440440
<v-checkbox
441441
v-model="settings.DisableVectors"
442-
:disabled="busy"
442+
:disabled="isDemo"
443443
class="ma-0 pa-0 input-disable-vectors"
444444
density="compact"
445445
color="surface-variant"
@@ -459,7 +459,7 @@
459459
<v-btn
460460
color="highlight"
461461
:block="$vuetify.display.xs"
462-
:disabled="busy || !$config.values.restart"
462+
:disabled="isDemo || !$config.values.restart"
463463
variant="flat"
464464
@click.stop.p.prevent="onRestart"
465465
>
@@ -518,8 +518,11 @@ export default {
518518
}
519519
520520
this.busy = true;
521+
this.$notify.blockUI();
522+
521523
this.settings.load().finally(() => {
522524
this.busy = false;
525+
this.$notify.unblockUI();
523526
});
524527
},
525528
onChange() {
@@ -528,13 +531,17 @@ export default {
528531
}
529532
530533
this.busy = true;
534+
this.$notify.blockUI();
531535
532536
this.settings
533537
.save()
534538
.then(() => {
535539
this.$notify.success(this.$gettext("Changes successfully saved"));
536540
})
537-
.finally(() => (this.busy = false));
541+
.finally(() => {
542+
this.busy = false;
543+
this.$notify.unblockUI();
544+
});
538545
},
539546
},
540547
};

0 commit comments

Comments
 (0)