fix: Diagnosis badges reactivity

This commit is contained in:
axolotle 2024-08-21 18:34:06 +02:00
parent 66f0ed2370
commit fa29cbb499

View file

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue'
import api from '@/api' import api from '@/api'
import { distanceToNow } from '@/helpers/filters/date' import { distanceToNow } from '@/helpers/filters/date'
import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments' import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
@ -18,25 +20,27 @@ const reports = await api
if (!diagnosis) return null if (!diagnosis) return null
return diagnosis.reports.map((report) => { return diagnosis.reports.map((report) => {
const badges = { const badges = reactive({
warnings: 0, warnings: 0,
errors: 0, errors: 0,
ignoreds: 0, ignoreds: 0,
}
const items = report.items.map((item) => {
const status = item.status.toLowerCase() as StateStatus
const variant = STATUS_VARIANT[status]
const issue = !isOkStatus(status)
if (item.ignored) badges.ignoreds++
else if (issue) badges[`${status}s`]++
return { ...item, status, issue, variant }
}) })
const items = reactive(
report.items.map((item) => {
const status = item.status.toLowerCase() as StateStatus
const variant = STATUS_VARIANT[status]
const issue = !isOkStatus(status)
if (item.ignored) badges.ignoreds++
else if (issue) badges[`${status}s`]++
return { ...item, status, issue, variant }
}),
)
return { return {
...report, ...report,
...badges, badges,
items, items,
noIssues: badges.warnings + badges.errors === 0, noIssues: badges.warnings + badges.errors === 0,
} }
@ -49,7 +53,7 @@ function runDiagnosis(report?: { id: string; description: string }) {
const id = report?.id const id = report?.id
api api
.put({ .put({
uri: 'diagnosis/run' + id ? '?force' : '', uri: 'diagnosis/run' + (id ? '?force' : ''),
data: id ? { categories: [id] } : {}, data: id ? { categories: [id] } : {},
humanKey: { humanKey: {
key: 'diagnosis.run' + (id ? '_specific' : ''), key: 'diagnosis.run' + (id ? '_specific' : ''),
@ -77,9 +81,9 @@ function toggleIgnoreIssue(
.then(() => { .then(() => {
item.ignored = action === 'ignore' item.ignored = action === 'ignore'
const count = item.ignored ? 1 : -1 const count = item.ignored ? 1 : -1
report.ignoreds += count report.badges.ignoreds += count
if (!isOkStatus(item.status)) { if (!isOkStatus(item.status)) {
report[`${item.status}s`] -= count report.badges[`${item.status}s`] -= count
} }
}) })
} }
@ -133,18 +137,18 @@ function shareLogs() {
variant="success" variant="success"
/> />
<BBadge <BBadge
v-if="report.errors" v-if="report.badges.errors"
v-t="{ path: 'issues', args: { count: report.errors } }" v-t="{ path: 'issues', args: { count: report.badges.errors } }"
variant="danger" variant="danger"
/> />
<BBadge <BBadge
v-if="report.warnings" v-if="report.badges.warnings"
v-t="{ path: 'warnings', args: { count: report.warnings } }" v-t="{ path: 'warnings', args: { count: report.badges.warnings } }"
variant="warning" variant="warning"
/> />
<BBadge <BBadge
v-if="report.ignoreds" v-if="report.badges.ignoreds"
v-t="{ path: 'ignored', args: { count: report.ignoreds } }" v-t="{ path: 'ignored', args: { count: report.badges.ignoreds } }"
/> />
</div> </div>
</template> </template>