mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
refactor: rm no longer used configpanel related components
This commit is contained in:
axolotle
parent
be782c7bc9
commit
3c6f4f3e3c
3 changed files with 0 additions and 274 deletions
|
|
@ -1,122 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { BaseValidation } from '@vuelidate/core'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { filterObject } from '@/helpers/commons'
|
||||
import type { Obj } from '@/types/commons'
|
||||
|
||||
const props = defineProps<{
|
||||
tabId: string
|
||||
panels: Obj[]
|
||||
forms: Obj<Obj>
|
||||
v: BaseValidation
|
||||
}>()
|
||||
|
||||
const slots = defineSlots<{
|
||||
'tab-top': any
|
||||
'tab-before': any
|
||||
'tab-after': any
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
apply: [
|
||||
value:
|
||||
| { id: string; form: Obj }
|
||||
| { id: string; form: Obj; action: string; name: string },
|
||||
]
|
||||
}>()
|
||||
|
||||
const panel = computed(() => {
|
||||
// FIXME throw error if no panel?
|
||||
return props.panels.find((panel) => panel.id === props.tabId)
|
||||
})
|
||||
|
||||
const validation = computed(() => {
|
||||
return props.v.forms[panel.value?.id]
|
||||
})
|
||||
|
||||
function onApply() {
|
||||
const panelId = panel.value?.id
|
||||
|
||||
emit('apply', {
|
||||
id: panelId,
|
||||
form: props.forms[panelId],
|
||||
})
|
||||
}
|
||||
|
||||
function onAction(sectionId: string, actionId: string, actionFields) {
|
||||
const panelId = panel.value?.id
|
||||
const actionFieldsKeys = Object.keys(actionFields)
|
||||
|
||||
emit('apply', {
|
||||
id: panelId,
|
||||
form: filterObject(props.forms[panelId], ([key]) =>
|
||||
actionFieldsKeys.includes(key),
|
||||
),
|
||||
action: [panelId, sectionId, actionId].join('.'),
|
||||
name: actionId,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AbstractForm
|
||||
v-if="panel"
|
||||
v-bind="{
|
||||
id: panel.id + '-form',
|
||||
validation,
|
||||
serverError: panel.serverError,
|
||||
}"
|
||||
@submit="onApply"
|
||||
:no-footer="!panel.hasApplyButton"
|
||||
>
|
||||
<slot name="tab-top" />
|
||||
|
||||
<template v-if="panel.help" #disclaimer>
|
||||
<div class="alert alert-info" v-html="panel.help" />
|
||||
</template>
|
||||
|
||||
<slot name="tab-before" />
|
||||
|
||||
<template v-for="section in panel.sections">
|
||||
<Component
|
||||
v-if="section.visible"
|
||||
:is="section.name ? 'section' : 'div'"
|
||||
:key="section.id"
|
||||
class="panel-section"
|
||||
>
|
||||
<BCardTitle v-if="section.name" title-tag="h3">
|
||||
{{ section.name }}
|
||||
<small v-if="section.help">{{ section.help }}</small>
|
||||
</BCardTitle>
|
||||
|
||||
<template v-for="(field, fname) in section.fields">
|
||||
<!-- FIXME rework the whole component chain to avoid direct mutation of the `forms` props -->
|
||||
<!-- eslint-disable -->
|
||||
<Component
|
||||
v-if="field.visible"
|
||||
:is="field.is"
|
||||
v-bind="field.props"
|
||||
v-model="forms[panel.id][fname]"
|
||||
:validation="validation[fname]"
|
||||
:key="fname"
|
||||
@action.stop="onAction(section.id, fname, section.fields)"
|
||||
/>
|
||||
<!-- eslint-enable -->
|
||||
</template>
|
||||
</Component>
|
||||
</template>
|
||||
|
||||
<slot name="tab-after" />
|
||||
</AbstractForm>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
margin-bottom: 1em;
|
||||
border-bottom: solid $border-width $gray-500;
|
||||
}
|
||||
:deep(.panel-section:not(:last-child)) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { CustomRoute } from '@/types/commons'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
defineProps<{
|
||||
routes: CustomRoute[]
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
'tab-top': any
|
||||
'tab-before': any
|
||||
'tab-after': any
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BCard no-body>
|
||||
<BCardHeader header-tag="nav">
|
||||
<BNav card-header fill pills>
|
||||
<BNavItem
|
||||
v-for="route in routes"
|
||||
:key="route.text"
|
||||
:to="route.to"
|
||||
:active="$route.params.tabId === route.to.params.tabId"
|
||||
>
|
||||
<!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
|
||||
<!-- exact-active-class="active" -->
|
||||
<YIcon v-if="route.icon" :iname="route.icon" />
|
||||
{{ route.text }}
|
||||
</BNavItem>
|
||||
</BNav>
|
||||
</BCardHeader>
|
||||
|
||||
<!-- Bind extra props to the child view and forward child events to parent -->
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Component v-bind="$attrs" :is="Component">
|
||||
<template #tab-top>
|
||||
<slot name="tab-top" />
|
||||
</template>
|
||||
<template #tab-before>
|
||||
<slot name="tab-before" />
|
||||
</template>
|
||||
<template #tab-after>
|
||||
<slot name="tab-after" />
|
||||
</template>
|
||||
</Component>
|
||||
</RouterView>
|
||||
</BCard>
|
||||
</template>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { BaseValidation } from '@vuelidate/core'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
submitText?: string
|
||||
validation?: BaseValidation
|
||||
serverError?: string
|
||||
inline?: boolean
|
||||
noFooter?: boolean
|
||||
}>(),
|
||||
{
|
||||
id: 'ynh-form',
|
||||
submitText: undefined,
|
||||
validation: undefined,
|
||||
serverError: '',
|
||||
inline: false,
|
||||
noFooter: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [e: SubmitEvent]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const errorFeedback = computed(() => {
|
||||
const v = props.validation
|
||||
return (
|
||||
props.serverError ||
|
||||
(v && v.$errors.length ? t('form_errors.invalid_form') : '')
|
||||
)
|
||||
})
|
||||
|
||||
function onSubmit(e: Event) {
|
||||
const v = props.validation
|
||||
if (v) {
|
||||
v.$touch()
|
||||
if (v.$pending || v.$errors.length) return
|
||||
}
|
||||
emit('submit', e as SubmitEvent)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<BCardBody>
|
||||
<slot name="disclaimer" />
|
||||
|
||||
<BForm
|
||||
v-bind="$attrs"
|
||||
:id="id"
|
||||
:inline="inline"
|
||||
novalidate
|
||||
@submit.prevent.stop="onSubmit"
|
||||
>
|
||||
<slot name="default" />
|
||||
|
||||
<slot name="server-error" v-bind="{ errorFeedback }">
|
||||
<BAlert
|
||||
:modelValue="!!errorFeedback"
|
||||
variant="danger"
|
||||
class="my-3"
|
||||
icon="ban"
|
||||
>
|
||||
<div v-html="errorFeedback" />
|
||||
</BAlert>
|
||||
</slot>
|
||||
</BForm>
|
||||
</BCardBody>
|
||||
|
||||
<BCardFooter v-if="!noFooter">
|
||||
<slot name="footer">
|
||||
<BButton type="submit" variant="success" :form="id">
|
||||
{{ submitText || $t('save') }}
|
||||
</BButton>
|
||||
</slot>
|
||||
</BCardFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
& > *:not(:first-child) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue