beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UX: Use lazy loading for directory list in Library

Browse source
This commit is contained in:
Michael Mayer 2020-12-17 13:13:39 +01:00
parent 859e4f7d8c
commit 6c77109b52
2 changed files with 64 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/pages/library/import.vue
View file

@ -11,6 +11,7 @@
<v-autocomplete
@change="onChange"
@focus="onFocus"
color="secondary-dark"
class="my-3 input-import-folder"
hide-details hide-no-data flat solo
@ -18,7 +19,7 @@
browser-autocomplete="off"
:items="dirs"
:loading="loading"
:disabled="busy || loading"
:disabled="busy"
item-text="name"
item-value="path"
>
@ -103,9 +104,10 @@
name: 'p-tab-import',
data() {
const root = {"path": "/", "name": this.$gettext("All files from import folder")}
const settings = new Settings(this.$config.settings());
return {
settings: new Settings(this.$config.settings()),
settings: settings,
started: false,
busy: false,
loading: false,
@ -114,13 +116,40 @@
fileName: '',
source: null,
root: root,
dirs: [root],
dirs: [root, {path: settings.import.path, name: "/" + Util.truncate(settings.import.path, 100, "…")}],
}
},
methods: {
onChange() {
this.settings.save();
},
onFocus() {
if(this.dirs.length > 2 || this.loading) {
return;
}
this.loading = true;
Folder.findAllUncached(RootImport).then((r) => {
const folders = r.models ? r.models : [];
const currentPath = this.settings.import.path;
let found = currentPath === this.root.path;
this.dirs = [this.root];
for (let i = 0; i < folders.length; i++) {
if (currentPath === folders[i].Path) {
found = true;
}
this.dirs.push({path: folders[i].Path, name: "/" + Util.truncate(folders[i].Path, 100, "…")});
}
if (!found) {
this.settings.import.path = this.root.path;
}
}).finally(() => this.loading = false);
},
showUpload() {
Event.publish("dialog.upload");
},
@ -187,27 +216,6 @@
},
created() {
this.subscriptionId = Event.subscribe('import', this.handleEvent);
this.loading = true;
Folder.findAllUncached(RootImport).then((r) => {
const folders = r.models ? r.models : [];
const currentPath = this.settings.import.path;
let found = currentPath === this.root.path;
this.dirs = [this.root];
for (let i = 0; i < folders.length; i++) {
if (currentPath === folders[i].Path) {
found = true;
}
this.dirs.push({path: folders[i].Path, name: "/" + Util.truncate(folders[i].Path, 100, "…")});
}
if (!found) {
this.settings.import.path = this.root.path;
}
}).finally(() => this.loading = false);
},
destroyed() {
Event.unsubscribe(this.subscriptionId);

56
frontend/src/pages/library/index.vue
View file

@ -12,6 +12,7 @@
<v-autocomplete
@change="onChange"
@focus="onFocus"
color="secondary-dark"
class="my-3 input-index-folder"
hide-details hide-no-data flat solo
@ -19,7 +20,7 @@
browser-autocomplete="off"
:items="dirs"
:loading="loading"
:disabled="busy || loading"
:disabled="busy"
item-text="name"
item-value="path"
>
@ -97,9 +98,10 @@
name: 'p-tab-index',
data() {
const root = {"path": "/", "name": this.$gettext("All originals")}
const settings = new Settings(this.$config.settings());
return {
settings: new Settings(this.$config.settings()),
settings: settings,
readonly: this.$config.get("readonly"),
config: this.$config.values,
started: false,
@ -111,13 +113,40 @@
fileName: "",
source: null,
root: root,
dirs: [root],
dirs: [root, {path: settings.index.path, name: "/" + Util.truncate(settings.index.path, 100, "…")}],
}
},
methods: {
onChange() {
this.settings.save();
},
onFocus() {
if(this.dirs.length > 2 || this.loading) {
return;
}
this.loading = true;
Folder.findAll(RootOriginals).then((r) => {
const folders = r.models ? r.models : [];
const currentPath = this.settings.index.path;
let found = currentPath === this.root.path;
this.dirs = [this.root];
for (let i = 0; i < folders.length; i++) {
if (currentPath === folders[i].Path) {
found = true;
}
this.dirs.push({path: folders[i].Path, name: "/" + Util.truncate(folders[i].Path, 100, "…")});
}
if (!found) {
this.settings.index.path = this.root.path;
}
}).finally(() => this.loading = false);
},
submit() {
// DO NOTHING
},
@ -220,27 +249,6 @@
},
created() {
this.subscriptionId = Event.subscribe('index', this.handleEvent);
this.loading = true;
Folder.findAll(RootOriginals).then((r) => {
const folders = r.models ? r.models : [];
const currentPath = this.settings.index.path;
let found = currentPath === this.root.path;
this.dirs = [this.root];
for (let i = 0; i < folders.length; i++) {
if (currentPath === folders[i].Path) {
found = true;
}
this.dirs.push({path: folders[i].Path, name: "/" + Util.truncate(folders[i].Path, 100, "…")});
}
if (!found) {
this.settings.index.path = this.root.path;
}
}).finally(() => this.loading = false);
},
destroyed() {
Event.unsubscribe(this.subscriptionId);