silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: silva:master
Branches Tags
silva:master
silva:dev
..
compare: silva:dev
Branches Tags
silva:master
silva:dev

No commits in common. "master" and "dev" have entirely different histories.
master ... dev

14 changed files with 203 additions and 170 deletions
Show Stats Expand all files Collapse all files

167
index.html
View File

@ -6,72 +6,167 @@
<title>Vite + Vue</title>
<meta name="adrema_base_url" content="/" />
</head>
<body>
<body style="padding: 50px">
<event-form
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
value='{
"sections": [
value='{"sections":[
{
"name": "sdfs",
"name": "tet",
"intro": "",
"fields": [
{
"required": true,
"key": "vorname",
"name": "Vorname",
"nami_type": null,
"name": "checkbox",
"type": "CheckboxField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": false,
"required": true,
"nami_type": null,
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"value": null,
"type": "TextField"
"description": "Sed laoreet mattis sem, vel sodales leo ullamcorper ut. Aliquam hendrerit vestibulum ex, sit amet consequat dolor donec.",
"hint": "Quisque justo leo, ultricies vestibulum.",
"key": "checkbox"
},
{
"required": true,
"key": "nachname",
"name": "Nachname",
"nami_type": null,
"name": "checkboxes Praesent tortor ligula, accumsan quis neque eget, laoreet convallis nunc. Morbi a urna sem. Mauris venenatis a felis ex.",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "CheckboxesField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 3
"desktop": 6
},
"value": [],
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"value": null,
"type": "TextField"
"options": [
"Integer molestie enim vitae enim tellus.",
"Cras ut magna ac metus rutrum efficitur."
],
"key": "checkboxes"
},
{
"required": true,
"key": "mail",
"name": "Mail",
"nami_type": null,
"name": "date",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "DateField",
"columns": {
"mobile": 1,
"tablet": 2,
"desktop": 3
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"max_today": false,
"key": "date"
},
{
"name": "dropdown",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "DropdownField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"type": "EmailField"
}
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"options": [
"a",
"v"
],
"intro": null
}
"key": "dropdown",
"allowcustom": false
},
{
"name": "radio",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "RadioField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"options": [
"a",
"v"
],
"key": "radio",
"allowcustom": false
},
{
"name": "text",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "TextField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": "",
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"key": "text"
},
{
"name": "textarea",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "TextareaField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": "",
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"rows": 5,
"key": "textarea"
},
{
"name": "numerisch",
"hint": "Quisque justo leo, ultricies vestibulum.",
"type": "NumberField",
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"value": null,
"required": false,
"nami_type": null,
"for_members": true,
"special_type": null,
"key": "numerisch",
"min": null,
"max": "7"
},
{"required":true,"parent_field":null,"parent_group":2,"has_empty_option":true,"key":"stamm","name":"Stamm","nami_type":null,"columns":{"mobile":2,"tablet":4,"desktop":6},"for_members":true,"special_type":null,"hint":null,"value":null,"type":"GroupField", "empty_option_value": "Kein Stamm"}
]
}'
payload='{"vorname": "Philipp", "nachname": "Lang", "mail": "a@b.de"}'
}
]}'
url="http://localhost:8000"
editable
></event-form>
<event-overview
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"

32
src/EventForm.ce.vue
View File

@ -57,13 +57,19 @@
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg>
</a>
<div class="overflow-hidden grow">
<div class="overflow-hidden">
<carousel :touch-drag="false" :mouse-drag="false" v-model="active">
<slide v-for="(section, index) in v.sections" :key="index">
<div v-if="active === index" class="w-full flex-none px-2 flex flex-col items-center justify-center h-12" @click="active = index">
<span class="flex items-center justify-center w-4 h-4 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
<div class="flex-none w-full">
<div
href="#"
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
@click="active = index"
>
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
<span class="text-sm text-font" v-html="section.name"></span>
</div>
</div>
</slide>
</carousel>
</div>
@ -113,7 +119,7 @@
</div>
</div>
<navigation v-if="active === index" :as-form="asForm" v-model="active" :last="v.sections.length"></navigation>
<navigation v-if="active === index" v-model="active" :last="v.sections.length"></navigation>
</slide>
</carousel>
</div>
@ -149,16 +155,14 @@ import useToastify from './composables/useToastify.js';
import useFields from './composables/useFields.js';
import SettingIcon from './components/icons/SettingIcon.vue';
import useColumns from './composables/useColumns.js';
import usePageMeta from './composables/usePageMeta.js';
const {scroll} = useScroll();
const {errorFromResponse} = useToastify();
const {colClassesForField, containerClasses} = useColumns();
const finished = ref(false);
const eventForm = ref(null);
const pageMeta = usePageMeta();
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active', 'save']);
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active']);
const props = defineProps({
editable: {
@ -181,10 +185,6 @@ const props = defineProps({
default: () => false,
type: Boolean,
},
asForm: {
type: Boolean,
default: () => false,
},
});
const active = ref(0);
@ -233,14 +233,8 @@ const {back, next, backable, nextable} = useNav(active, v.value.sections.length)
const {resolveComponentName} = useFields();
async function submit() {
if (props.asForm) {
emits('save', payload.value);
return;
}
try {
await axios.post('/api/form/' + props.formId + '/register', payload.value, {
params: pageMeta.value.later === '1' ? pageMeta.value : {},
});
await axios.post('/api/form/' + props.formId + '/register', payload.value);
finished.value = true;
} catch (e) {
errorFromResponse(e);

2
src/components/Accordion.vue
View File

@ -1,6 +1,6 @@
<template>
<box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
<div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2 cursor-pointer">
<div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2">
<div v-text="title"></div>
<div class="flex items-center space-x-2">
<slot name="buttons"></slot>

8
src/components/DetailPopup.vue
View File

@ -13,17 +13,9 @@
<a
:href="registerUrl.replace(':slug', event.slug)"
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-font focus:outline-none bg-primary text-font"
v-if="event.can_register"
>
Zur Anmeldung
</a>
<button
type="button"
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-font focus:outline-none bg-gray-700 text-font"
v-else
>
Anmeldung zzt nicht möglich
</button>
</div>
</popup>
</template>

6
src/components/Navigation.vue
View File

@ -10,7 +10,7 @@
<div></div>
</div>
</div>
<span v-text="asForm ? 'Speichern' : 'Anmeldung absenden'"></span>
Anmeldung absenden
</button>
</div>
</template>
@ -29,10 +29,6 @@ const props = defineProps({
type: Number,
required: true,
},
asForm: {
type: Boolean,
required: true,
},
});
const innerValue = computed({

2
src/components/fields/Checkbox.vue
View File

@ -1,5 +1,5 @@
<template>
<v-checkbox :id="innerId" v-model="inner" :label="field.name" :description="field.description" :name="field.key" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
<v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
</template>
<script setup>

32
src/components/fields/Nami.vue
View File

@ -13,27 +13,16 @@
Bitte achte außerdem darauf, dass du mindestens <span class="font-semibold">Leserechte</span> auf deine Gruppierung hast. Diese kann dir i.d.R. dein
<span class="font-semibold">StaVo</span> erteilen.
</p>
<v-checkbox
:modelValue="loginState !== 'nami'"
@update:modelValue="loginState = $event ? 'skipping' : 'nami'"
name="login_state"
id="login_state"
description="Ich bin kein Mitglied der DPSG im DV Köln und möchte daher meine Mitglieder selbst eingeben."
intro=""
></v-checkbox>
</div>
<div class="flex mt-4 space-x-3">
<v-text @keypress.enter="innerLogin" name="nami_mglnr" label="Mitgliedsnummer" id="nami_mglnr" v-model="loginData.mglnr" required></v-text>
<v-text @keypress.enter="innerLogin" name="nami_password" label="Passwort" id="nami_password" v-model="loginData.password" type="password" required></v-text>
<v-btn class="self-end" @click.prevent="innerLogin">
<span v-text="loginState === 'nami' ? 'Anmelden' : 'Weiter'"></span>
</v-btn>
<v-btn class="self-end" @click.prevent="innerLogin">Anmelden</v-btn>
</div>
</template>
<template #finished>
<div class="flex items-center justify-between">
<div v-if="user">Erfolgreich eingeloggt als {{ user }}.</div>
<div v-else>Nicht eingeloggt</div>
<div>Erfolgreich eingeloggt als {{ user }}.</div>
<v-btn class="self-end" @click.prevent="innerLogout">Abmelden</v-btn>
</div>
</template>
@ -68,7 +57,7 @@
@update:modelValue="toggleMember(member)"
:name="`${field.key}-memberselect-${member.id}`"
:id="`${field.key}-memberselect-${member.id}`"
:description="member.name"
:label="member.name"
intro=""
v-for="member in searchResults.data"
></v-checkbox>
@ -113,7 +102,7 @@
v-model="member[memberField.key]"
:name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:description="memberField.description"
:label="memberField.description"
intro=""
:required="memberField.required"
:class="colClassesForField(memberField)"
@ -236,7 +225,7 @@ if (user.value !== null) {
const {resolveComponentName} = useFields();
const step = computed(() => {
if (user.value === null && loginState.value !== 'skipped') {
if (user.value === null) {
return 1;
}
@ -258,7 +247,6 @@ function deleteMember(index) {
}
const membersAccepted = ref(false);
const loginState = ref('nami');
const membersCompleted = ref(false);
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
@ -300,13 +288,6 @@ const inner = computed(
{deep: true},
);
async function innerLogin() {
if (loginState.value === 'skipping') {
loginState.value = 'skipped';
membersAccepted.value = true;
membersCompleted.value = false;
return;
}
await login();
membersAccepted.value = false;
membersCompleted.value = false;
@ -331,11 +312,8 @@ function toggleMember(member) {
}
async function innerLogout() {
if (loginState.value !== 'skipped') {
logout();
resetSearchData();
}
loginState.value = 'nami';
membersAccepted.value = false;
membersCompleted.value = false;
inner.value = [];

2
src/components/fields/Text.vue
View File

@ -1,5 +1,5 @@
<template>
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" :intro="field.intro" v-model="inner"></v-text>
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text>
</template>
<script setup>

15
src/components/fields/VCheckbox.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="relative">
<field-label v-if="label" :name="label" :required="required" :hint="hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1">
<div class="grid grid-cols-1 gap-2">
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
<label :for="id" class="p-0 block leading-none relative flex items-start">
<input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
@ -9,9 +8,11 @@
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
></span>
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
<span v-if="description" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
<span v-text="description"></span>
<span v-if="label" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
<span v-text="label"></span>
<span v-show="required" class="text-red-800"> *</span>
</span>
<hint :value="hint" class="ml-2" v-if="hint"></hint>
</label>
</div>
</div>
@ -19,7 +20,7 @@
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
import Hint from '../Hint.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
@ -40,10 +41,6 @@ const props = defineProps({
type: String,
default: () => '',
},
description: {
required: false,
type: String,
},
required: {
required: false,
type: Boolean,

2
src/components/fields/VRadio.vue
View File

@ -8,7 +8,7 @@
<span
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded-full block top-0"
></span>
<span class="peer-checked:bg-primary left-2 top-2 group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded-full block"></span>
<span class="peer-checked:bg-primary left-2 group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded-full block"></span>
<span v-if="option.iscustom" class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
<input
:id="`${id}-custom-value`"

8
src/components/fields/VText.vue
View File

@ -1,6 +1,4 @@
<template>
<div>
<div class="text-sm text-gray-600 mb-4" v-text="intro" v-if="intro"></div>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
<input
:id="id"
@ -18,7 +16,6 @@
</div>
<field-label :name="label" :required="required"></field-label>
</label>
</div>
</template>
<script setup>
@ -73,11 +70,6 @@ const props = defineProps({
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
intro: {
required: false,
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
});
const presentMax = computed(() => {

10
src/composables/usePageMeta.js
View File

@ -1,10 +0,0 @@
import { ref } from 'vue';
export default function useEventMeta() {
const varName = 'adrema_page_meta';
const pageMeta = ref(null);
if (window[varName]) {
pageMeta.value = window[varName];
}
return pageMeta;
}

2
tailwind.config.js
View File

@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.vue', './src/**/*.js'],
content: ['./src/**/*.vue'],
theme: {
extend: {
colors: {

1
vite.config.js
View File

@ -24,6 +24,5 @@ export default defineConfig({
},
server: {
port: 5174,
host: '0.0.0.0',
},
});