appv2: Update AppInfo to display multiple admin/help tabs + formating

This commit is contained in:
axolotle 2023-01-05 21:35:19 +01:00
parent 757cb786ed
commit 68386ffaec

View file

@ -1,49 +1,43 @@
<template> <template>
<view-base :queries="queries" @queries-response="onQueriesResponse" ref="view"> <view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
<yuno-alert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postInstall.length" variant="info" class="my-4"> <yuno-alert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postInstall.length" variant="info" class="my-4">
<div class="d-md-flex align-items-center mb-3">
<div class="d-md-flex align-items-center"> <h2 v-t="'app.doc.notifications.post_install'" class="md-m-0" />
<h2 v-t="'app.doc.notifications.post_install'" />
<b-button <b-button
variant="primary" variant="primary"
size="sm" size="sm"
class="ml-auto mr-2" class="ml-auto mr-2"
@click="dismissNotification($event, 'post_install')" @click="dismissNotification('post_install')"
> >
<icon iname="check" /> <icon iname="check" />
{{ $t('app.doc.notifications.dismiss') }} {{ $t('app.doc.notifications.dismiss') }}
</b-button> </b-button>
</div> </div>
<div <vue-showdown
v-for="[name, notif] in app.doc.notifications.postInstall" :key="name" v-for="[name, notif] in app.doc.notifications.postUpgrade" :key="name"
> :markdown="notif" flavor="github" :options="{ headerLevelStart: 4 }"
<vue-showdown :markdown="notif" flavor="github" /> />
</div>
</yuno-alert> </yuno-alert>
<yuno-alert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postUpgrade.length" variant="info" class="my-4"> <yuno-alert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postUpgrade.length" variant="info" class="my-4">
<div class="d-md-flex align-items-center"> <div class="d-md-flex align-items-center mb-3">
<h2 v-t="'app.doc.notifications.post_upgrade'" /> <h2 v-t="'app.doc.notifications.post_upgrade'" class="md-m-0" />
<b-button <b-button
variant="primary" variant="primary"
size="sm" size="sm"
class="ml-auto mr-2" class="ml-auto mr-2"
@click="dismissNotification($event, 'post_upgrade')" @click="dismissNotification('post_upgrade')"
> >
<icon iname="check" /> <icon iname="check" />
{{ $t('app.doc.notifications.dismiss') }} {{ $t('app.doc.notifications.dismiss') }}
</b-button> </b-button>
</div> </div>
<div <vue-showdown
v-for="[name, notif] in app.doc.notifications.postUpgrade" :key="name" v-for="[name, notif] in app.doc.notifications.postUpgrade" :key="name"
> :markdown="notif" flavor="github" :options="{ headerLevelStart: 4 }"
<vue-showdown :markdown="notif" flavor="github" /> />
</div>
</yuno-alert> </yuno-alert>
<section v-if="app" class="border rounded p-3 mb-4"> <section v-if="app" class="border rounded p-3 mb-4">
@ -188,13 +182,13 @@
v-if="app.is_webapp" v-if="app.is_webapp"
> >
<template v-if="!app.is_default"> <template v-if="!app.is_default">
<b-button @click="setAsDefaultDomain($event, false)" id="main-domain" variant="success"> <b-button @click="setAsDefaultDomain(false)" id="main-domain" variant="success">
<icon iname="star" /> {{ $t('app_make_default') }} <icon iname="star" /> {{ $t('app_make_default') }}
</b-button> </b-button>
</template> </template>
<template v-else> <template v-else>
<b-button @click="setAsDefaultDomain($event, true)" id="main-domain" variant="warning"> <b-button @click="setAsDefaultDomain(true)" id="main-domain" variant="warning">
<icon iname="star" /> {{ $t('app_make_not_default') }} <icon iname="star" /> {{ $t('app_make_not_default') }}
</b-button> </b-button>
</template> </template>
@ -202,13 +196,16 @@
</template> </template>
</config-panels> </config-panels>
<b-card v-if="app && app.doc.admin" no-body> <b-card v-if="app && app.doc.admin.length" no-body>
<b-tabs card fill pills> <b-tabs card fill pills>
<b-tab> <b-tab
v-for="[name, content] in app.doc.admin" :key="name"
>
<template #title> <template #title>
<icon iname="book" class="mr-2" />{{ $t('app.doc.admin.title') }} <icon iname="book" class="mr-2" />
{{ name === "admin" ? $t('app.doc.admin.title') : name }}
</template> </template>
<vue-showdown :markdown="app.doc.admin" flavor="github" /> <vue-showdown :markdown="content" flavor="github" />
</b-tab> </b-tab>
</b-tabs> </b-tabs>
</b-card> </b-card>
@ -410,9 +407,9 @@ export default {
}) : [] }) : []
}, },
admin: [ admin: [
formatI18nField(ADMIN), ['admin', formatI18nField(ADMIN)],
...Object.keys(doc).sort().map((key) => formatI18nField(doc[key])) ...Object.keys(doc).sort().map((key) => [key.charAt(0) + key.slice(1).toLowerCase(), formatI18nField(doc[key])])
].join('\n\n') ].filter((doc) => doc[1])
}, },
is_webapp: app.is_webapp, is_webapp: app.is_webapp,
is_default: app.is_default, is_default: app.is_default,
@ -474,7 +471,7 @@ export default {
).then(this.$refs.view.fetchQueries) ).then(this.$refs.view.fetchQueries)
}, },
async setAsDefaultDomain (event, undo = false) { async setAsDefaultDomain (undo = false) {
const confirmed = await this.$askConfirmation(this.$i18n.t('confirm_app_default')) const confirmed = await this.$askConfirmation(this.$i18n.t('confirm_app_default'))
if (!confirmed) return if (!confirmed) return
@ -485,7 +482,7 @@ export default {
).then(this.$refs.view.fetchQueries) ).then(this.$refs.view.fetchQueries)
}, },
async dismissNotification (event, name = false) { async dismissNotification (name) {
api.put( api.put(
`apps/${this.id}/dismiss_notification/${name}`, `apps/${this.id}/dismiss_notification/${name}`,
{}, {},
@ -524,4 +521,8 @@ select {
font-size: 50%; font-size: 50%;
font-weight: normal; font-weight: normal;
} }
.yuno-alert div div:not(:last-child) {
margin-bottom: 1rem;
}
</style> </style>