funkwhale/front/src/components/admin/SignupFormBuilder.vue

202 wiersze
6.1 KiB
Vue
Czysty Zwykły widok Historia

<script setup lang="ts">
2022-07-04 22:52:53 +00:00
import type { Form } from '~/types'
import SignupForm from '~/components/auth/SignupForm.vue'
import { useVModel } from '@vueuse/core'
import { computed, ref } from 'vue'
2022-09-08 14:32:45 +00:00
import { useI18n } from 'vue-i18n'
import { arrayMove } from '~/utils'
2022-08-30 20:23:17 +00:00
interface Events {
(e: 'update:modelValue', value: Form): void
}
interface Props {
modelValue: Form
signupApprovalEnabled?: boolean
}
2022-08-30 20:23:17 +00:00
const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), {
signupApprovalEnabled: false
})
const value = useVModel(props, 'modelValue', emit, { deep: true })
const maxFields = ref(10)
const isPreviewing = ref(false)
2022-09-08 14:32:45 +00:00
const { t } = useI18n()
const labels = computed(() => ({
2022-09-18 23:12:39 +00:00
delete: t('components.admin.SignupFormBuilder.label.delete'),
up: t('components.admin.SignupFormBuilder.label.moveUp'),
down: t('components.admin.SignupFormBuilder.label.moveDown')
}))
if (!value.value?.fields) {
value.value = {
help_text: {
text: '',
content_type: 'text/markdown'
},
fields: []
}
}
const addField = () => {
value.value.fields.push({
2022-11-26 23:16:46 +00:00
label: t('components.admin.SignupFormBuilder.label.additionalField', { fieldNumber: value.value.fields.length + 1 }),
required: true,
input_type: 'short_text'
})
}
const remove = (idx: number) => {
value.value.fields.splice(idx, 1)
}
const move = (idx: number, increment: number) => {
if (idx + increment >= value.value.fields.length) return
if (idx === 0 && increment < 0) return
arrayMove(value.value.fields, idx, idx + increment)
}
</script>
2020-03-18 10:57:33 +00:00
<template>
<div>
<div class="ui top attached tabular menu">
2021-12-06 10:35:20 +00:00
<button
:class="[{active: !isPreviewing}, 'item']"
@click.stop.prevent="isPreviewing = false"
>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.button.edit') }}
2020-03-18 10:57:33 +00:00
</button>
2021-12-06 10:35:20 +00:00
<button
:class="[{active: isPreviewing}, 'item']"
@click.stop.prevent="isPreviewing = true"
>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.button.preview') }}
2020-03-18 10:57:33 +00:00
</button>
</div>
2021-12-06 10:35:20 +00:00
<div
v-if="isPreviewing"
class="ui bottom attached segment"
>
2020-03-18 10:57:33 +00:00
<signup-form
:customization="value"
2020-03-18 10:57:33 +00:00
:signup-approval-enabled="signupApprovalEnabled"
2021-12-06 10:35:20 +00:00
:fetch-description-html="true"
/>
<div class="ui clearing hidden divider" />
2020-03-18 10:57:33 +00:00
</div>
2021-12-06 10:35:20 +00:00
<div
v-else
class="ui bottom attached segment"
>
2020-03-18 10:57:33 +00:00
<div class="field">
<label for="help-text">
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.label.helpText') }}
2020-03-18 10:57:33 +00:00
</label>
<p>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.help.helpText') }}
2020-03-18 10:57:33 +00:00
</p>
<content-form
2022-07-19 01:29:43 +00:00
v-if="value.help_text"
v-model="value.help_text.text"
2020-03-18 10:57:33 +00:00
field-id="help-text"
:permissive="true"
2021-12-06 10:35:20 +00:00
/>
2020-03-18 10:57:33 +00:00
</div>
<div class="field">
<label>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.label.additionalFields') }}
2020-03-18 10:57:33 +00:00
</label>
<p>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.help.additionalFields') }}
2020-03-18 10:57:33 +00:00
</p>
2022-07-19 01:29:43 +00:00
<table v-if="value.fields?.length > 0">
2020-03-18 10:57:33 +00:00
<thead>
<tr>
<th>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.label') }}
2020-03-18 10:57:33 +00:00
</th>
<th>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.type') }}
2020-03-18 10:57:33 +00:00
</th>
<th>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.required') }}
2020-03-18 10:57:33 +00:00
</th>
2022-09-18 23:12:39 +00:00
<th><span class="visually-hidden">{{ $t('components.admin.SignupFormBuilder.table.additionalFields.header.actions') }}</span></th>
2020-03-18 10:57:33 +00:00
</tr>
</thead>
<tbody>
2021-12-06 10:35:20 +00:00
<tr
v-for="(field, idx) in value.fields"
2021-12-06 10:35:20 +00:00
:key="idx"
>
2020-03-18 10:57:33 +00:00
<td>
2021-12-06 10:35:20 +00:00
<input
v-model="field.label"
type="text"
required
>
2020-03-18 10:57:33 +00:00
</td>
<td>
<select v-model="field.input_type">
<option value="short_text">
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.short') }}
2020-03-18 10:57:33 +00:00
</option>
<option value="long_text">
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.type.long') }}
2020-03-18 10:57:33 +00:00
</option>
</select>
</td>
<td>
<select v-model="field.required">
<option :value="true">
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.true') }}
2020-03-18 10:57:33 +00:00
</option>
<option :value="false">
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.table.additionalFields.required.false') }}
2020-03-18 10:57:33 +00:00
</option>
</select>
</td>
<td>
<i
:disabled="idx === 0 || null"
2021-12-06 10:35:20 +00:00
role="button"
2020-03-18 10:57:33 +00:00
:title="labels.up"
:class="['up', 'arrow', { disabled: idx === 0 }, 'icon']"
2021-12-06 10:35:20 +00:00
@click="move(idx, -1)"
/>
2020-03-18 10:57:33 +00:00
<i
:disabled="idx >= value.fields.length - 1 || null"
2021-12-06 10:35:20 +00:00
role="button"
2020-08-01 09:11:51 +00:00
:title="labels.down"
:class="['down', 'arrow', { disabled: idx >= value.fields.length - 1 }, 'icon']"
2021-12-06 10:35:20 +00:00
@click="move(idx, 1)"
/>
<i
role="button"
:title="labels.delete"
class="x icon"
@click="remove(idx)"
/>
2020-03-18 10:57:33 +00:00
</td>
</tr>
</tbody>
</table>
2021-12-06 10:35:20 +00:00
<div class="ui hidden divider" />
<button
2022-07-19 01:29:43 +00:00
v-if="value.fields?.length < maxFields"
2021-12-06 10:35:20 +00:00
class="ui basic button"
@click.stop.prevent="addField"
>
2022-09-18 23:12:39 +00:00
{{ $t('components.admin.SignupFormBuilder.button.add') }}
2020-03-18 10:57:33 +00:00
</button>
</div>
</div>
2021-12-06 10:35:20 +00:00
<div class="ui hidden divider" />
2020-03-18 10:57:33 +00:00
</div>
</template>