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 ModalError to new requests

Browse source
This commit is contained in:
axolotle 2024-08-05 17:15:04 +02:00
parent 519de69d29
commit 24b28b397f
1 changed files with 45 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
app/src/components/modals/ModalError.vue
View file

@ -1,39 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { APIError, APIInternalError } from '@/api/errors'
import { useStore } from 'vuex' import ModalOverlay from '@/components/modals/ModalOverlay.vue'
import type { APIRequest } from '@/composables/useRequests'
import MessageListGroup from '@/components/MessageListGroup.vue' const props = defineProps<{
import type { Obj } from '@/types/commons' request: APIRequest & { err: APIError }
}>()
const props = withDefaults( const { err, messages, traceback } = (() => {
defineProps<{ const { err, action } = props.request
request: Obj return {
}>(), err: err,
{}, messages: action?.messages,
) traceback: err instanceof APIInternalError ? err.traceback : null,
}
const store = useStore() })()
const error = computed(() => {
return props.request.error
})
const messages = computed(() => {
const messages = props.request.messages
if (messages && messages.length > 0) return messages
return null
})
function dismiss() {
store.dispatch('DISMISS_ERROR', props.request)
}
</script> </script>
<template> <template>
<!-- This card receives style from `ViewLockOverlay` if used inside it --> <ModalOverlay :request="request" footer-variant="danger" :hide-footer="false">
<div> <h5 v-t="`api_errors_titles.${err.name}`" />
<BCardBody>
<BCardTitle v-t="'api_errors_titles.' + error.name" />
<em v-t="'api_error.sorry'" /> <em v-t="'api_error.sorry'" />
@ -45,45 +31,28 @@ function dismiss() {
<!-- FIXME USE DD DL DT --> <!-- FIXME USE DD DL DT -->
<p class="m-0"> <p class="m-0">
<strong v-t="'error'" />: <strong v-t="'error'" />:
<code>"{{ error.code }}" {{ error.status }}</code> <code>"{{ err.code }}" {{ err.status }}</code>
</p> </p>
<p> <p>
<strong v-t="'action'" />: <strong v-t="'action'" />:
<code>"{{ error.method }}" {{ error.path }}</code> <code>"{{ err.method }}" {{ err.path }}</code>
</p> </p>
<p> <p>
<strong v-t="'api_error.error_message'" /> <strong v-t="'api_error.error_message'" />
<BAlert :model-value="true" class="mt-2" variant="danger"> <YAlert variant="danger" class="mt-2">
<div v-html="error.message" /> <div v-html="err.message" />
</BAlert> </YAlert>
</p> </p>
<template v-if="error.traceback"> <div v-if="traceback">
<p> <p><strong v-t="'traceback'" /></p>
<strong v-t="'traceback'" /> <pre><code>{{ traceback }}</code></pre>
</p>
<pre><code>{{ error.traceback }}</code></pre>
</template>
<template v-if="messages">
<p class="my-2">
<strong v-t="'api_error.server_said'" />
</p>
<MessageListGroup :messages="messages" bordered />
</template>
</BCardBody>
<BCardFooter footer-bg-variant="danger">
<!-- TODO add copy error ? -->
<BButton variant="light" size="sm" v-t="'ok'" @click="dismiss" />
</BCardFooter>
</div> </div>
</template>
<style lang="scss" scoped> <div v-if="messages">
code, <p class="my-2"><strong v-t="'api_error.server_said'" /></p>
pre code { <MessageListGroup :messages="messages" bordered fixed-height />
color: $black; </div>
} </ModalOverlay>
</style> </template>