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