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

refactor: rework async AppList

Browse source
This commit is contained in:
axolotle 2024-08-13 00:15:59 +02:00
parent 301fd4d36c
commit 2478f53fc2
2 changed files with 20 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/types/core/api.ts
View file

@ -148,3 +148,5 @@ export type AppInfo = {
supports_config_panel: boolean supports_config_panel: boolean
supports_purge: boolean supports_purge: boolean
} }
export type AppList = { apps: AppInfo[] }

39
app/src/views/app/AppList.vue
View file

@ -1,35 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import api from '@/api'
import { useInitialQueries } from '@/composables/useInitialQueries'
import { useSearch } from '@/composables/useSearch' import { useSearch } from '@/composables/useSearch'
import type { Obj } from '@/types/commons' import type { AppList } from '@/types/core/api'
const { loading } = useInitialQueries([{ uri: 'apps?full' }], { const apps = await api
onQueriesResponse, .get<AppList>({ uri: 'apps?full', initial: true })
}) .then(({ apps }) => {
return apps
const apps = ref<Obj[] | undefined>()
const [search, filteredApps] = useSearch(apps, (s, app) => {
return Object.values(app).some(
(value) => value && value.toLowerCase().includes(s),
)
})
function onQueriesResponse(data: any) {
if (data.apps.length === 0) {
apps.value = undefined
return
}
apps.value = data.apps
.map(({ id, name, description, manifest }) => { .map(({ id, name, description, manifest }) => {
return { id, name: manifest.name, label: name, description } return { id, name: manifest.name, label: name, description }
}) })
.sort((prev, app) => { .sort((prev, app) => {
return prev.label > app.label ? 1 : -1 return prev.label > app.label ? 1 : -1
}) })
} })
const [search, filteredApps] = useSearch(apps, (s, app) =>
Object.values(app).some((value) => value && value.toLowerCase().includes(s)),
)
</script> </script>
<template> <template>
@ -37,7 +25,6 @@ function onQueriesResponse(data: any) {
v-model="search" v-model="search"
items-name="installed_apps" items-name="installed_apps"
:items="filteredApps" :items="filteredApps"
:loading="loading"
> >
<template #top-bar-buttons> <template #top-bar-buttons>
<BButton variant="success" :to="{ name: 'app-catalog' }"> <BButton variant="success" :to="{ name: 'app-catalog' }">
@ -54,8 +41,8 @@ function onQueriesResponse(data: any) {
class="d-flex justify-content-between align-items-center pe-0" class="d-flex justify-content-between align-items-center pe-0"
> >
<div> <div>
<h5 class="fw-bold"> <h5>
{{ label }} <strong class="me-1 fw-bold">{{ label }}</strong>
<small class="text-secondary">{{ id }}</small> <small class="text-secondary">{{ id }}</small>
</h5> </h5>
<p class="m-0"> <p class="m-0">