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

UX: Fix form event handling #1995

Browse source
This commit is contained in:
Michael Mayer 2022-03-23 18:42:41 +01:00
parent 0ce900122f
commit 45b563136e
8 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/app/routes.js
View file

@ -100,7 +100,7 @@ export default [
path: "/all",
component: Photos,
meta: { title: $gettext("Search"), auth: true },
props: { staticFilter: { quality: 0 } },
props: { staticFilter: { quality: "0" } },
},
{
name: "photos",
@ -166,14 +166,14 @@ export default [
path: "/unsorted",
component: Photos,
meta: { title: $gettext("Unsorted"), auth: true },
props: { staticFilter: { unsorted: true } },
props: { staticFilter: { unsorted: "true" } },
},
{
name: "favorites",
path: "/favorites",
component: Photos,
meta: { title: $gettext("Favorites"), auth: true },
props: { staticFilter: { favorite: true } },
props: { staticFilter: { favorite: "true" } },
},
{
name: "live",
@ -194,21 +194,21 @@ export default [
path: "/review",
component: Photos,
meta: { title: $gettext("Review"), auth: true },
props: { staticFilter: { review: true } },
props: { staticFilter: { review: "true" } },
},
{
name: "private",
path: "/private",
component: Photos,
meta: { title: $gettext("Private"), auth: true },
props: { staticFilter: { private: true } },
props: { staticFilter: { private: "true" } },
},
{
name: "archive",
path: "/archive",
component: Photos,
meta: { title: $gettext("Archive"), auth: true },
props: { staticFilter: { archived: true } },
props: { staticFilter: { archived: "true" } },
},
{
name: "places",
@ -246,7 +246,7 @@ export default [
path: "/library/hidden",
component: Photos,
meta: { title: $gettext("Hidden Files"), auth: true },
props: { staticFilter: { hidden: true } },
props: { staticFilter: { hidden: "true" } },
},
{
name: "errors",

8
frontend/src/component/photo/toolbar.vue
View file

@ -3,7 +3,7 @@
dense autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8"
@submit.prevent="filterChange">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-text-field v-model="filter.q"
<v-text-field :value="filter.q"
class="input-search background-inherit elevation-0"
autocorrect="off"
autocapitalize="none"
@ -12,7 +12,10 @@
:label="$gettext('Search')"
prepend-inner-icon="search"
color="secondary-dark"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="filterChange"
@change="filterChange"
@keyup.enter.native="filterChange"
></v-text-field>
@ -217,6 +220,9 @@ export default {
},
},
methods: {
onChangeQuery(val) {
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
colorOptions() {
return this.all.colors.concat(options.Colors());
},

12
frontend/src/pages/albums.vue
View file

@ -6,7 +6,7 @@
<v-form ref="form" class="p-albums-search" lazy-validation dense @submit.prevent="updateQuery">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-text-field id="search"
v-model="filter.q"
:value="filter.q"
solo hide-details clearable overflow single-line
class="input-search background-inherit elevation-0"
:label="$gettext('Search')"
@ -15,8 +15,11 @@
autocapitalize="none"
prepend-inner-icon="search"
color="secondary-dark"
@keyup.enter.native="updateQuery"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="updateQuery"
@change="updateQuery"
@keyup.enter.native="updateQuery"
></v-text-field>
<v-overflow-btn v-model="filter.category"
@ -483,7 +486,12 @@ export default {
this.listen = true;
});
},
onChangeQuery(val) {
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
updateQuery() {
if (this.loading) return;
this.filter.q = this.filter.q.trim();
const query = {

10
frontend/src/pages/labels.vue
View file

@ -6,7 +6,7 @@
<v-form ref="form" class="p-labels-search" lazy-validation dense @submit.prevent="updateQuery">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-text-field id="search"
v-model="filter.q"
:value="filter.q"
class="input-search background-inherit elevation-0"
solo hide-details clearable overflow
:label="$gettext('Search')"
@ -15,7 +15,10 @@
autocorrect="off"
autocapitalize="none"
color="secondary-dark"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="updateQuery"
@change="updateQuery"
@keyup.enter.native="updateQuery"
></v-text-field>
@ -415,7 +418,12 @@ export default {
this.listen = true;
});
},
onChangeQuery(val) {
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
updateQuery() {
if (this.loading) return;
this.filter.q = this.filter.q.trim();
const query = {

10
frontend/src/pages/library/errors.vue
View file

@ -2,7 +2,7 @@
<div v-infinite-scroll="loadMore" class="p-page p-page-errors" :infinite-scroll-disabled="scrollDisabled"
:infinite-scroll-distance="1200" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-text-field v-model="filter.q"
<v-text-field :value="filter.q"
class="input-search background-inherit elevation-0"
browser-autocomplete="off"
autocorrect="off"
@ -11,7 +11,10 @@
:label="$gettext('Search')"
prepend-inner-icon="search"
color="secondary-dark"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="updateQuery"
@change="updateQuery"
@keyup.enter.native="updateQuery"
></v-text-field>
<v-spacer></v-spacer>
@ -125,7 +128,12 @@ export default {
this.loadMore();
},
methods: {
onChangeQuery(val) {
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
updateQuery() {
if (this.loading) return;
this.filter.q = this.filter.q.trim();
const query = {};

12
frontend/src/pages/people/subjects.vue
View file

@ -16,9 +16,10 @@
autocapitalize="none"
clearable overflow
color="secondary-dark"
@change="onChangeQuery"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="updateQuery"
@change="updateQuery"
@keyup.enter.native="updateQuery"
></v-text-field>
@ -532,14 +533,7 @@ export default {
});
},
onChangeQuery(val) {
if (!val) {
val = '';
}
if (this.filter.q !== val) {
this.filter.q = val;
this.updateQuery();
}
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
updateQuery() {
if (this.loading || !this.active) {

6
frontend/src/pages/photos.vue
View file

@ -79,11 +79,11 @@ export default {
const settings = this.$config.settings();
if (settings && settings.features.private) {
filter.public = true;
filter.public = "true";
}
if (settings && settings.features.review && (!this.staticFilter || !("quality" in this.staticFilter))) {
filter.quality = 3;
filter.quality = "3";
}
return {
@ -337,6 +337,8 @@ export default {
});
},
updateQuery() {
if (this.loading) return;
this.filter.q = this.filter.q.trim();
const query = {

13
frontend/src/pages/places.vue
View file

@ -3,7 +3,7 @@
<div id="map" style="width: 100%; height: 100%;">
<div class="map-control">
<div class="maplibregl-ctrl maplibregl-ctrl-group">
<v-text-field v-model="filter.q"
<v-text-field :value="filter.q"
class="pa-0 ma-0 input-search"
single-line
solo
@ -16,7 +16,10 @@
autocorrect="off"
autocapitalize="none"
color="secondary-dark"
@input="onChangeQuery"
@click:clear="clearQuery"
@blur="formChange"
@change="formChange"
@keyup.enter.native="formChange"
></v-text-field>
</div>
@ -81,11 +84,11 @@ export default {
const settings = this.$config.settings();
if (settings && settings.features.private) {
filter.public = true;
filter.public = "true";
}
if (settings && settings.features.review && (!this.staticFilter || !("quality" in this.staticFilter))) {
filter.quality = 3;
filter.quality = "3";
}
let mapFont = ['Roboto', 'sans-serif'];
@ -229,7 +232,11 @@ export default {
this.loading = false;
});
},
onChangeQuery(val) {
this.filter.q = typeof val === 'string' ? val.trim() : '';
},
formChange() {
if (this.loading) return;
this.search();
},
clearQuery() {