YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

[enh] save in url query the current catalog search values

Browse source
This commit is contained in:
axolotle 2022-11-09 18:01:17 +01:00
parent f60cdc2608
commit 6db9d57c46
2 changed files with 29 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/src/router/routes.js
View file

@ -175,6 +175,7 @@ const routes = [
name: 'app-catalog', name: 'app-catalog',
path: '/apps/catalog', path: '/apps/catalog',
component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'), component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'),
props: route => route.query,
meta: { meta: {
args: { trad: 'catalog' }, args: { trad: 'catalog' },
breadcrumb: ['app-list', 'app-catalog'] breadcrumb: ['app-list', 'app-catalog']

47
app/src/views/app/AppCatalog.vue
View file

@ -12,10 +12,10 @@
</b-input-group-prepend> </b-input-group-prepend>
<b-form-input <b-form-input
id="search-input" :placeholder="$t('search.for', { items: $tc('items.apps', 2) })" id="search-input" :placeholder="$t('search.for', { items: $tc('items.apps', 2) })"
v-model="search" @input="setCategory" :value="search" @input="updateQuery('search', $event)"
/> />
<b-input-group-append> <b-input-group-append>
<b-select v-model="quality" :options="qualityOptions" @change="setCategory" /> <b-select :value="quality" :options="qualityOptions" @change="updateQuery('quality', $event)" />
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
@ -24,9 +24,9 @@
<b-input-group-prepend is-text> <b-input-group-prepend is-text>
<icon iname="filter" /> <icon iname="filter" />
</b-input-group-prepend> </b-input-group-prepend>
<b-select v-model="category" :options="categories" /> <b-select :value="category" :options="categories" @change="updateQuery('category', $event)" />
<b-input-group-append> <b-input-group-append>
<b-button variant="primary" :disabled="category === null" @click="category = null"> <b-button variant="primary" :disabled="category === null" @click="updateQuery('category', null)">
{{ $t('app_show_categories') }} {{ $t('app_show_categories') }}
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
@ -39,10 +39,13 @@
</b-input-group-prepend> </b-input-group-prepend>
<b-form-radio-group <b-form-radio-group
id="subtags-radio" name="subtags" id="subtags-radio" name="subtags"
v-model="subtag" :options="subtags" :checked="subtag" :options="subtags" @change="updateQuery('subtag', $event)"
buttons button-variant="outline-secondary" buttons button-variant="outline-secondary"
/> />
<b-select id="subtags-select" v-model="subtag" :options="subtags" /> <b-select
id="subtags-select" :value="subtag" :options="subtags"
@change="updateQuery('subtag', $event)"
/>
</b-input-group> </b-input-group>
</div> </div>
</template> </template>
@ -54,7 +57,7 @@
tag="li" class="category-card" tag="li" class="category-card"
> >
<b-card-title> <b-card-title>
<b-link @click="category = cat.value" class="card-link"> <b-link @click="updateQuery('category', cat.value)" class="card-link">
<icon :iname="cat.icon" /> {{ cat.text }} <icon :iname="cat.icon" /> {{ cat.text }}
</b-link> </b-link>
</b-card-title> </b-card-title>
@ -171,6 +174,13 @@ export default {
AppCatalogDetails AppCatalogDetails
}, },
props: {
search: { type: String, default: '' },
quality: { type: String, default: 'decent_quality' },
category: { type: String, default: null },
subtag: { type: String, default: 'all' }
},
data () { data () {
return { return {
queries: [ queries: [
@ -195,12 +205,6 @@ export default {
// The rest is filled from api data // The rest is filled from api data
], ],
// Set by user inputs
search: '',
category: null,
subtag: 'all',
quality: 'decent_quality',
// Custom install form // Custom install form
customInstall: { customInstall: {
field: { field: {
@ -244,7 +248,7 @@ export default {
subtags () { subtags () {
// build an options array for subtags v-model/options // build an options array for subtags v-model/options
if (this.category) { if (this.category && this.categories.length > 2) {
const category = this.categories.find(cat => cat.value === this.category) const category = this.categories.find(cat => cat.value === this.category)
if (category.subtags) { if (category.subtags) {
const subtags = [{ text: this.$i18n.t('all'), value: 'all' }] const subtags = [{ text: this.$i18n.t('all'), value: 'all' }]
@ -302,11 +306,16 @@ export default {
this.antifeatures = Object.fromEntries(data.antifeatures.map((af) => ([af.id, af]))) this.antifeatures = Object.fromEntries(data.antifeatures.map((af) => ([af.id, af])))
}, },
setCategory () { updateQuery (key, value) {
// allow search without selecting a category // Update the query string without reloading the page
if (this.category === null) { this.$router.replace({
this.category = 'all' query: {
} ...this.$route.query,
// allow search without selecting a category
category: this.$route.query.category || 'all',
[key]: value
}
})
}, },
// INSTALL APP // INSTALL APP