Compare commits
10 Commits
12eb5016c8
...
b15b806948
| Author | SHA1 | Date |
|---|---|---|
philipp lang
|
b15b806948 | |
|
philipp lang
|
19b13133a6 | |
|
philipp lang
|
d22e4b597f | |
|
philipp lang
|
f100135f33 | |
|
philipp lang
|
efc9a397f3 | |
|
philipp lang
|
ab06c7de5d | |
|
philipp lang
|
a9dea10a17 | |
|
philipp lang
|
dd4468808b | |
|
philipp lang
|
1ef8cfdec8 | |
|
philipp lang
|
b6c9eea8ea |
|
|
@ -204,6 +204,7 @@ class MemberResource extends JsonResource
|
|||
'ps_at' => null,
|
||||
'more_ps_at' => null,
|
||||
'without_education_at' => null,
|
||||
'recertified_at' => null,
|
||||
'without_efz_at' => null,
|
||||
'has_vk' => false,
|
||||
'has_svk' => false,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ class SubscriptionController extends Controller
|
|||
'fees' => Fee::pluck('name', 'id'),
|
||||
'mode' => 'create',
|
||||
'data' => [
|
||||
'name' => '',
|
||||
'fee_id' => null,
|
||||
'children' => [],
|
||||
],
|
||||
'meta' => SubscriptionResource::meta(),
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"@editorjs/nested-list": "^1.4.2",
|
||||
"@editorjs/paragraph": "^2.11.3",
|
||||
"@inertiajs/vue3": "^1.0.14",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"change-case": "^4.1.2",
|
||||
|
|
@ -975,6 +976,17 @@
|
|||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
|
||||
"integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
|
||||
|
|
@ -2941,6 +2953,14 @@
|
|||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
"@editorjs/nested-list": "^1.4.2",
|
||||
"@editorjs/paragraph": "^2.11.3",
|
||||
"@inertiajs/vue3": "^1.0.14",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"change-case": "^4.1.2",
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
@import 'tailwindcss/utilities';
|
||||
|
||||
@import 'base.css';
|
||||
@import 'switch';
|
||||
@import 'layout';
|
||||
@import 'buttons';
|
||||
@import 'table';
|
||||
@import 'bool';
|
||||
@import 'form';
|
||||
@import 'editor';
|
||||
|
|
|
|||
|
|
@ -1,313 +0,0 @@
|
|||
:root {
|
||||
--h-field-sm: 23px;
|
||||
--h-field-base: 35px;
|
||||
--h-field-lg: 42px;
|
||||
--m-field-sm: 0.2rem;
|
||||
--m-field-base: 0.3rem;
|
||||
--m-field-lg: 0.4rem;
|
||||
}
|
||||
.size-sm {
|
||||
height: var(--h-field-sm);
|
||||
}
|
||||
.size-base {
|
||||
height: var(--h-field-base);
|
||||
}
|
||||
.size-lg {
|
||||
height: var(--h-field-lg);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@apply flex flex-col relative cursor-pointer;
|
||||
input[type="checkbox"] {
|
||||
@apply invisible absolute;
|
||||
& + span {
|
||||
@apply transition-colors duration-300 flex items-center;
|
||||
span {
|
||||
@apply border-2 border-gray-800 relative rounded cursor-pointer flex flex-none justify-center items-center;
|
||||
}
|
||||
svg {
|
||||
@apply text-white transition-opacity duration-300;
|
||||
opacity: 0;
|
||||
}
|
||||
& + span {
|
||||
a {
|
||||
@apply text-primary-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + span svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.size-sm {
|
||||
height: auto;
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
min-height: var(--h-field-sm);
|
||||
span {
|
||||
width: var(--h-field-sm);
|
||||
height: var(--h-field-sm);
|
||||
}
|
||||
svg {
|
||||
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
}
|
||||
}
|
||||
& + span + span {
|
||||
min-height: var(--h-field-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.size-base {
|
||||
height: auto;
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
min-height: var(--h-field-base);
|
||||
span {
|
||||
width: var(--h-field-base);
|
||||
height: var(--h-field-base);
|
||||
}
|
||||
svg {
|
||||
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
}
|
||||
}
|
||||
& + span + span {
|
||||
min-height: var(--h-field-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.size-lg {
|
||||
height: auto;
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
min-height: var(--h-field-lg);
|
||||
span {
|
||||
width: var(--h-field-lg);
|
||||
height: var(--h-field-lg);
|
||||
}
|
||||
svg {
|
||||
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
}
|
||||
}
|
||||
& + span + span {
|
||||
min-height: var(--h-field-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-wrap {
|
||||
@apply flex flex-col;
|
||||
|
||||
.field-label {
|
||||
@apply font-semibold leading-none text-gray-400;
|
||||
}
|
||||
|
||||
.real-field-wrap {
|
||||
@apply relative flex-none flex;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
@apply h-full items-center flex;
|
||||
&:not(.info-wrap-inline) {
|
||||
@apply absolute top-0 right-0;
|
||||
}
|
||||
&.info-wrap-inline {
|
||||
@apply ml-2;
|
||||
}
|
||||
.info-button {
|
||||
@apply text-primary-700;
|
||||
}
|
||||
svg.chevron {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="color"]), select {
|
||||
@apply border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg;
|
||||
&:disabled {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
}
|
||||
.switch {
|
||||
input[type="checkbox"] {
|
||||
@apply invisible absolute;
|
||||
& + span {
|
||||
@apply rounded transition-colors duration-300 relative cursor-pointer flex grow h-full;
|
||||
span {
|
||||
@apply absolute flex items-center justify-center;
|
||||
}
|
||||
var {
|
||||
@apply duration-300;
|
||||
transition-property: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.field-wrap-sm {
|
||||
.field-label {
|
||||
@apply text-xs;
|
||||
}
|
||||
input:not([type="checkbox"]), select, input:not([type="color"]) {
|
||||
@apply size-sm text-xs px-1 border;
|
||||
}
|
||||
input[type="color"] {
|
||||
@apply size-sm px-0;
|
||||
}
|
||||
select {
|
||||
@apply pr-6;
|
||||
}
|
||||
.switch {
|
||||
width: calc(var(--h-field-sm) * 2);
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
span:nth-of-type(1) {
|
||||
width: calc(var(--h-field-sm) - var(--m-field-sm));
|
||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
top: var(--m-field-sm);
|
||||
left: var(--m-field-sm);
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: calc(var(--h-field-sm) - var(--m-field-sm));
|
||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
top: var(--m-field-sm);
|
||||
left: calc(100% - var(--h-field-sm));
|
||||
}
|
||||
var {
|
||||
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
||||
top: var(--m-field-sm);
|
||||
left: var(--m-field-sm);
|
||||
}
|
||||
svg {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
}
|
||||
&:checked + span var {
|
||||
left: calc(var(--h-field-sm) + var(--m-field-sm));
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
@apply mr-1;
|
||||
.info-button {
|
||||
@apply w-4 h-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.field-wrap-base {
|
||||
.field-label {
|
||||
@apply text-sm;
|
||||
}
|
||||
input:not([type="checkbox"]):not([type="color"]), select {
|
||||
@apply size-base text-sm px-2 border-2;
|
||||
}
|
||||
input[type="color"] {
|
||||
@apply size-base px-0;
|
||||
}
|
||||
.switch {
|
||||
width: calc(var(--h-field-base) * 2);
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
span:nth-of-type(1) {
|
||||
width: calc(var(--h-field-base) - var(--m-field-base));
|
||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
top: var(--m-field-base);
|
||||
left: var(--m-field-base);
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: calc(var(--h-field-base) - var(--m-field-base));
|
||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
top: var(--m-field-base);
|
||||
left: calc(100% - var(--h-field-base));
|
||||
}
|
||||
var {
|
||||
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
||||
top: var(--m-field-base);
|
||||
left: var(--m-field-base);
|
||||
}
|
||||
svg {
|
||||
@apply w-3 h-3;
|
||||
}
|
||||
}
|
||||
&:checked + span var {
|
||||
left: calc(var(--h-field-base) + var(--m-field-base));
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
@apply mr-2;
|
||||
.info-button {
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.field-wrap-lg {
|
||||
.field-label {
|
||||
@apply text-sm;
|
||||
}
|
||||
input:not([type="checkbox"]):not([type="color"]), select {
|
||||
@apply size-lg px-3 border-2;
|
||||
}
|
||||
input[type="color"] {
|
||||
@apply size-lg px-0;
|
||||
}
|
||||
.switch {
|
||||
width: calc(var(--h-field-lg) * 2);
|
||||
input[type="checkbox"] {
|
||||
& + span {
|
||||
span:nth-of-type(1) {
|
||||
width: calc(var(--h-field-lg) - var(--m-field-lg));
|
||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
top: var(--m-field-lg);
|
||||
left: var(--m-field-lg);
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: calc(var(--h-field-lg) - var(--m-field-lg));
|
||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
top: var(--m-field-lg);
|
||||
left: calc(100% - var(--h-field-lg));
|
||||
}
|
||||
var {
|
||||
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
||||
top: var(--m-field-lg);
|
||||
left: var(--m-field-lg);
|
||||
}
|
||||
svg {
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
}
|
||||
&:checked + span var {
|
||||
left: calc(var(--h-field-lg) + var(--m-field-lg));
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
@apply mr-3;
|
||||
.info-button {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input:disabled, selct:disabled {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
:root {
|
||||
--margin: 0.2rem;
|
||||
--n-width: 37px;
|
||||
--sm-width: 35px;
|
||||
--sm-margin: 0.2rem;
|
||||
--xs-width: 23px;
|
||||
--xs-margin: 0.2rem;
|
||||
}
|
||||
|
||||
.bg-switch {
|
||||
@apply bg-primary-700;
|
||||
}
|
||||
|
||||
.field-switch {
|
||||
input:checked + span {
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.display {
|
||||
width: calc(var(--n-width) * 2);
|
||||
height: var(--n-width);
|
||||
border-radius: 0.3rem;
|
||||
var {
|
||||
width: calc(var(--n-width) - var(--margin) * 2);
|
||||
height: calc(var(--n-width) - var(--margin) * 2);
|
||||
top: var(--margin);
|
||||
left: var(--margin);
|
||||
transition: left 0.3s;
|
||||
}
|
||||
& > span:nth-of-type(1) {
|
||||
position: absolute;
|
||||
width: calc(var(--n-width) - var(--margin));
|
||||
height: calc(var(--n-width) - var(--margin) * 2);
|
||||
top: var(--margin);
|
||||
left: var(--margin);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > span:nth-of-type(2) {
|
||||
position: absolute;
|
||||
width: calc(var(--n-width) - var(--margin));
|
||||
height: calc(var(--n-width) - var(--margin) * 2);
|
||||
top: var(--margin);
|
||||
left: calc(100% - var(--n-width));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .display var {
|
||||
left: calc(var(--n-width) + var(--margin));
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
/* --------------------------------- small size ---------------------------------- */
|
||||
.inner-field.h-field-sm {
|
||||
input:checked + .display var {
|
||||
left: calc(var(--sm-width) + var(--sm-margin));
|
||||
}
|
||||
|
||||
.display {
|
||||
width: calc(var(--sm-width) * 2);
|
||||
height: var(--sm-width);
|
||||
var {
|
||||
width: calc(var(--sm-width) - var(--sm-margin) * 2);
|
||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
||||
top: var(--sm-margin);
|
||||
left: var(--sm-margin);
|
||||
}
|
||||
& > span:nth-of-type(1) {
|
||||
width: calc(var(--sm-width) - var(--sm-margin));
|
||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
||||
top: var(--sm-margin);
|
||||
left: var(--sm-margin);
|
||||
}
|
||||
& > span:nth-of-type(2) {
|
||||
width: calc(var(--sm-width) - var(--sm-margin));
|
||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
||||
top: var(--sm-margin);
|
||||
left: calc(100% - var(--sm-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------ very small size -------------------------------- */
|
||||
.inner-field.h-field-xs {
|
||||
input:checked + .display var {
|
||||
left: calc(var(--xs-width) + var(--xs-margin));
|
||||
}
|
||||
|
||||
.display {
|
||||
width: calc(var(--xs-width) * 2);
|
||||
height: var(--xs-width);
|
||||
var {
|
||||
width: calc(var(--xs-width) - var(--xs-margin) * 2);
|
||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
||||
top: var(--xs-margin);
|
||||
left: var(--xs-margin);
|
||||
}
|
||||
& > span:nth-of-type(1) {
|
||||
width: calc(var(--xs-width) - var(--xs-margin));
|
||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
||||
top: var(--xs-margin);
|
||||
left: var(--xs-margin);
|
||||
}
|
||||
& > span:nth-of-type(2) {
|
||||
width: calc(var(--xs-width) - var(--xs-margin));
|
||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
||||
top: var(--xs-margin);
|
||||
left: calc(100% - var(--xs-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800"> *</span></span>
|
||||
<div class="flex flex-col group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="required" :value="label"></f-label>
|
||||
<div class="relative w-full h-full">
|
||||
<div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
|
||||
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
|
||||
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
|
||||
</div>
|
||||
<div :id="id" :class="[fieldAppearance, paddingX, paddingY]"></div>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,7 +32,7 @@ import Alert from 'editorjs-alert';
|
|||
import useFieldSize from '../../composables/useFieldSize.js';
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
|
||||
const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
|
||||
|
||||
const props = defineProps({
|
||||
required: {
|
||||
|
|
@ -42,14 +40,15 @@ const props = defineProps({
|
|||
default: false,
|
||||
},
|
||||
size: {
|
||||
default: null,
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
rows: {
|
||||
default: function () {
|
||||
return 4;
|
||||
},
|
||||
type: Number,
|
||||
default: () => 4,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
conditions: {
|
||||
|
|
@ -58,16 +57,15 @@ const props = defineProps({
|
|||
default: () => false,
|
||||
},
|
||||
hint: {
|
||||
default: null,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
modelValue: {
|
||||
default: undefined,
|
||||
},
|
||||
label: {
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
default: '',
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="h-full items-center flex absolute top-0 right-0">
|
||||
<div v-tooltip="value" class="mr-2">
|
||||
<ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<span class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
|
||||
{{ value }}
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,111 +1,66 @@
|
|||
<template>
|
||||
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
|
||||
<span v-if="label" class="field-label">
|
||||
{{ label }}
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
</span>
|
||||
<div class="relative real-field-wrap" :class="`size-${size}`">
|
||||
<div class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
|
||||
@click="visible = !visible" v-text="`${modelValue.length} Einträge ausgewählt`"></div>
|
||||
<div v-show="visible"
|
||||
class="absolute w-[max-content] z-30 max-h-[31rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
|
||||
<label class="flex flex-col group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="false" :value="label"></f-label>
|
||||
<div class="relative flex-none flex">
|
||||
<div
|
||||
:class="[fieldHeight, fieldAppearance, selectAppearance]"
|
||||
class="form-select flex items-center w-full"
|
||||
@click="visible = !visible"
|
||||
v-text="`${modelValue.length} Einträge ausgewählt`"
|
||||
></div>
|
||||
<div v-show="visible" class="absolute w-[max-content] z-30 max-h-[25rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7 space-y-1">
|
||||
<div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
|
||||
<f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)"
|
||||
:value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
|
||||
<f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
|
||||
<div class="text-sm text-gray-200" v-text="option.name"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-wrap">
|
||||
<div v-if="hint" v-tooltip="hint">
|
||||
<ui-sprite src="info-button" class="info-button"></ui-sprite>
|
||||
</div>
|
||||
<div v-if="size != 'xs'" class="px-1 relative">
|
||||
<ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
|
||||
</div>
|
||||
<div v-if="size == 'xs'" class="px-1 relative">
|
||||
<ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import map from 'lodash/map';
|
||||
import {ref, computed} from 'vue';
|
||||
import useFieldSize from '../../composables/useFieldSize';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
id: {},
|
||||
inset: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
default: function () {
|
||||
return 'base';
|
||||
},
|
||||
},
|
||||
emptyLabel: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
modelValue: {
|
||||
default: undefined,
|
||||
},
|
||||
label: {
|
||||
default: null,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name: {
|
||||
const {fieldHeight, fieldAppearance, paddingX, sizeClass, selectAppearance} = useFieldSize();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
hint: {},
|
||||
size: {
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
modelValue: {
|
||||
validator: (v) => Array.isArray(v),
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
options: {
|
||||
default: function () {
|
||||
return [];
|
||||
validator: (v) => Array.isArray(v),
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data: function () {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
parsedOptions() {
|
||||
return Array.isArray(this.options)
|
||||
? this.options
|
||||
: map(this.options, (value, key) => {
|
||||
return { name: value, id: key };
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
trigger(option, v) {
|
||||
var value = [...this.modelValue];
|
||||
});
|
||||
|
||||
this.$emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
|
||||
},
|
||||
clear() {
|
||||
this.$emit('update:modelValue', null);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
const visible = ref(false);
|
||||
const parsedOptions = computed(() =>
|
||||
Array.isArray(props.options)
|
||||
? props.options
|
||||
: map(props.options, (value, key) => {
|
||||
return {name: value, id: key};
|
||||
})
|
||||
);
|
||||
function trigger(option, v) {
|
||||
var value = JSON.parse(JSON.stringify(props.modelValue));
|
||||
|
||||
<style scope>
|
||||
.inset-bg {
|
||||
background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
|
||||
emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,23 @@
|
|||
<template>
|
||||
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
|
||||
<span v-if="label" class="field-label">
|
||||
{{ label }}
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
</span>
|
||||
<div class="real-field-wrap" :class="`size-${size}`">
|
||||
<select v-model="inner" :disabled="disabled" :name="name">
|
||||
<label class="flex flex-col group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="required" :value="label"></f-label>
|
||||
<div class="relative flex-none flex">
|
||||
<select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance, selectAppearance]">
|
||||
<option v-if="placeholder" :value="def">{{ placeholder }}</option>
|
||||
|
||||
<option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
|
||||
</select>
|
||||
<div class="info-wrap">
|
||||
<div v-if="hint" v-tooltip="hint">
|
||||
<ui-sprite src="info-button" class="info-button"></ui-sprite>
|
||||
</div>
|
||||
<div v-if="size != 'xs'" class="px-1 relative">
|
||||
<ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
|
||||
</div>
|
||||
<div v-if="size == 'xs'" class="px-1 relative">
|
||||
<ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
|
||||
</div>
|
||||
</div>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref} from 'vue';
|
||||
import useFieldSize from '../../composables/useFieldSize.js';
|
||||
import map from 'lodash/map';
|
||||
|
||||
const {fieldHeight, fieldAppearance, selectAppearance, sizeClass} = useFieldSize();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
|||
|
|
@ -1,130 +1,102 @@
|
|||
<template>
|
||||
<label
|
||||
class="flex relative field-switch cursor-pointer"
|
||||
:for="id"
|
||||
:class="{
|
||||
'items-center flex-row-reverse space-x-3 space-x-reverse justify-end': inline,
|
||||
'flex-col': !inline,
|
||||
[sizes[size].wrap]: true,
|
||||
}"
|
||||
>
|
||||
<label class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="false" :value="label"></f-label>
|
||||
<span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
|
||||
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer invisible" @keypress="$emit('keypress', $event)" />
|
||||
<span
|
||||
v-if="label"
|
||||
class="font-semibold leading-none text-gray-400"
|
||||
:class="{
|
||||
'text-xs': size == 'sm',
|
||||
'text-sm': size === 'base',
|
||||
}"
|
||||
>{{ label }}</span
|
||||
>
|
||||
<div class="relative flex items-center inner-field mt-1" :class="`h-field-${fieldSize}`">
|
||||
<span>
|
||||
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
|
||||
<span class="relative cursor-pointer peer-focus:bg-red-500 flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
|
||||
<span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="check"></ui-sprite></span>
|
||||
<span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="close"></ui-sprite></span>
|
||||
<var class="absolute overlay bg-gray-400 rounded top-0"></var>
|
||||
class="relative cursor-pointer h-full rounded peer-focus:bg-red-500 transition-all duration-300 group-[.field-base]:w-[70px] group-[.field-sm]:w-[46px] bg-gray-700 peer-checked:bg-primary-700"
|
||||
></span>
|
||||
<span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
|
||||
<ui-sprite
|
||||
class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
|
||||
src="check"
|
||||
></ui-sprite
|
||||
></span>
|
||||
<span class="absolute h-full top-0 group-[.field-base]:left-[35px] group-[.field-sm]:left-[23px] flex-none flex justify-center items-center aspect-square">
|
||||
<ui-sprite
|
||||
class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
|
||||
src="close"
|
||||
></ui-sprite
|
||||
></span>
|
||||
<var
|
||||
class="absolute transition-all duration-300 bg-gray-400 rounded group-[.field-base]:top-[3px] group-[.field-base]:left-[3px] group-[.field-sm]:top-[2px] group-[.field-sm]:left-[2px] group-[.field-base]:w-[29px] group-[.field-sm]:w-[19px] group-[.field-base]:h-[29px] group-[.field-sm]:h-[19px] group-[.field-base]:peer-checked:left-[37px] group-[.field-sm]:peer-checked:left-[25px]"
|
||||
></var>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</span>
|
||||
</span>
|
||||
<div v-if="hint" class="ml-2 info-wrap">
|
||||
<div v-tooltip="hint">
|
||||
<ui-sprite src="info-button" class="info-button w-4 h-4 text-primary-700"></ui-sprite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
<script setup>
|
||||
import {computed} from 'vue';
|
||||
import useFieldSize from '../../composables/useFieldSize.js';
|
||||
|
||||
const {sizeClass, fieldHeight} = useFieldSize();
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'keypress']);
|
||||
|
||||
const props = defineProps({
|
||||
hint: {
|
||||
default: null,
|
||||
},
|
||||
inline: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
size: {
|
||||
default: 'base',
|
||||
required: false,
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
default: '',
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: () => false,
|
||||
},
|
||||
value: {
|
||||
default: false,
|
||||
validator: (v) => true,
|
||||
default: () => undefined,
|
||||
},
|
||||
label: {
|
||||
default: false,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
modelValue: {
|
||||
default: undefined,
|
||||
validator: (v) => true,
|
||||
default: () => undefined,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'keypress'],
|
||||
data: function () {
|
||||
return {
|
||||
sizes: {
|
||||
sm: {
|
||||
wrap: 'field-wrap-sm',
|
||||
field: 'size-sm',
|
||||
},
|
||||
base: {
|
||||
wrap: 'field-wrap-base',
|
||||
field: 'size-base',
|
||||
},
|
||||
lg: {
|
||||
wrap: 'field-wrap-lg',
|
||||
field: 'size-lg',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
v: {
|
||||
set(v) {
|
||||
if (this.disabled === true) {
|
||||
});
|
||||
|
||||
const v = computed({
|
||||
set: (v) => {
|
||||
if (props.disabled === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof this.modelValue === 'boolean') {
|
||||
this.$emit('update:modelValue', v);
|
||||
if (typeof props.modelValue === 'boolean') {
|
||||
emit('update:modelValue', v);
|
||||
return;
|
||||
}
|
||||
|
||||
var a = this.modelValue.filter((i) => i !== this.value);
|
||||
var a = props.modelValue.filter((i) => i !== this.value);
|
||||
if (v) {
|
||||
a.push(this.value);
|
||||
}
|
||||
|
||||
this.$emit('update:modelValue', a);
|
||||
emit('update:modelValue', a);
|
||||
},
|
||||
get() {
|
||||
if (typeof this.modelValue === 'boolean') {
|
||||
return this.modelValue;
|
||||
if (typeof props.modelValue === 'boolean') {
|
||||
return props.modelValue;
|
||||
}
|
||||
|
||||
if (typeof this.modelValue === 'undefined') {
|
||||
return this.$emit('update:modelValue', false);
|
||||
if (typeof props.modelValue === 'undefined') {
|
||||
return emit('update:modelValue', false);
|
||||
}
|
||||
|
||||
return this.modelValue.indexOf(this.value) !== -1;
|
||||
return props.modelValue.indexOf(props.value) !== -1;
|
||||
},
|
||||
},
|
||||
fieldSize() {
|
||||
var sizes = ['xxs', 'xs', 'sm', 'md', 'lg'];
|
||||
|
||||
var sizeIndex = sizes.findIndex((s) => s === this.size);
|
||||
return sizes[sizeIndex - 1];
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,35 @@
|
|||
<template>
|
||||
<label class="field-wrap field-wrap-sm" :for="id" :class="sizes[size].wrap">
|
||||
<span v-if="label" class="field-label">
|
||||
{{ label }}
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
</span>
|
||||
<div class="real-field-wrap size-sm" :class="sizes[size].field">
|
||||
<input :name="name" :type="type" :value="transformedValue" :disabled="disabled" :placeholder="placeholder"
|
||||
:min="min" :max="max" @keypress="$emit('keypress', $event)" @input="onInput" @change="onChange"
|
||||
@focus="onFocus" @blur="onBlur" />
|
||||
<div v-if="hint" class="info-wrap">
|
||||
<div v-tooltip="hint">
|
||||
<ui-sprite src="info-button" class="info-button"></ui-sprite>
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex flex-col group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="required" :value="label"></f-label>
|
||||
<div class="relative flex-none flex">
|
||||
<input
|
||||
:id="id"
|
||||
:type="type"
|
||||
:value="transformedValue"
|
||||
:disabled="disabled"
|
||||
placeholder=""
|
||||
:min="min"
|
||||
:max="max"
|
||||
:class="[fieldHeight, fieldAppearance, paddingX]"
|
||||
class="w-full"
|
||||
@input="onInput"
|
||||
@change="onChange"
|
||||
@focus="focus = true"
|
||||
@blur="focus = false"
|
||||
/>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import wNumb from 'wnumb';
|
||||
import {ref, computed} from 'vue';
|
||||
import useFieldSize from '../../composables/useFieldSize';
|
||||
|
||||
const {fieldHeight, fieldAppearance, paddingX, sizeClass} = useFieldSize();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
var numb = {
|
||||
natural: wNumb({
|
||||
|
|
@ -77,131 +88,67 @@ var transformers = {
|
|||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
default: function () {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
default: {},
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
default: function () {
|
||||
return 'none';
|
||||
},
|
||||
type: String,
|
||||
default: () => 'none',
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
inset: {
|
||||
default: function () {
|
||||
return null;
|
||||
},
|
||||
default: () => false,
|
||||
},
|
||||
size: {
|
||||
default: function () {
|
||||
return 'base';
|
||||
},
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
hint: {
|
||||
default: null,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
modelValue: {},
|
||||
mask: {
|
||||
default: undefined,
|
||||
modelValue: {
|
||||
validator: (v) => typeof v === 'string' || v === null,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
default: false,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
type: {
|
||||
required: false,
|
||||
default: function () {
|
||||
return 'text';
|
||||
},
|
||||
type: String,
|
||||
default: () => 'text',
|
||||
},
|
||||
disabled: {
|
||||
default: false,
|
||||
default: () => false,
|
||||
type: Boolean,
|
||||
},
|
||||
min: {
|
||||
default: () => '',
|
||||
type: Number,
|
||||
default: () => undefined,
|
||||
},
|
||||
max: {
|
||||
default: () => '',
|
||||
type: Number,
|
||||
default: () => undefined,
|
||||
},
|
||||
name: {},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
focus: false,
|
||||
sizes: {
|
||||
sm: {
|
||||
wrap: 'field-wrap-sm',
|
||||
field: 'size-sm',
|
||||
},
|
||||
base: {
|
||||
wrap: 'field-wrap-base',
|
||||
field: 'size-base',
|
||||
},
|
||||
lg: {
|
||||
wrap: 'field-wrap-lg',
|
||||
field: 'size-lg',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
transformedValue: {
|
||||
get() {
|
||||
return transformers[this.mode][this.focus ? 'edit' : 'display'].to(this.modelValue);
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:modelValue', transformers[this.mode][this.focus ? 'edit' : 'display'].from(v));
|
||||
},
|
||||
},
|
||||
insetClass() {
|
||||
if (this.inset === '') {
|
||||
return 'bg-inset';
|
||||
}
|
||||
if (this.inset === undefined) {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
return `bg-${this.inset}`;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (typeof this.modelValue === 'undefined') {
|
||||
this.$emit('update:modelValue', this.default === undefined ? '' : this.default);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.focus = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.focus = false;
|
||||
},
|
||||
onChange(v) {
|
||||
if (this.mode !== 'none') {
|
||||
this.transformedValue = v.target.value;
|
||||
}
|
||||
},
|
||||
onInput(v) {
|
||||
if (this.mode === 'none') {
|
||||
this.transformedValue = v.target.value;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
const focus = ref(false);
|
||||
|
||||
<style scope>
|
||||
.bg-inset {
|
||||
background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
|
||||
const transformedValue = computed({
|
||||
get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),
|
||||
set: (v) => emit('update:modelValue', transformers[props.mode][focus.value ? 'edit' : 'display'].from(v)),
|
||||
});
|
||||
function onChange(v) {
|
||||
if (props.mode !== 'none') {
|
||||
transformedValue.value = v.target.value;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
function onInput(v) {
|
||||
if (props.mode === 'none') {
|
||||
transformedValue.value = v.target.value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<label class="flex flex-col">
|
||||
<span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800"> *</span></span>
|
||||
<div class="relative w-full h-full">
|
||||
<textarea :placeholder="placeholder" class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
|
||||
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
|
||||
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
|
||||
</div>
|
||||
<label class="flex flex-col group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="required" :value="label"></f-label>
|
||||
<div class="relative flex-none flex">
|
||||
<textarea class="w-full h-full" :class="[fieldAppearance, paddingX, paddingY]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
import useFieldSize from '../../composables/useFieldSize.js';
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
|
||||
const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
|
||||
|
||||
const props = defineProps({
|
||||
required: {
|
||||
|
|
@ -22,33 +20,31 @@ const props = defineProps({
|
|||
default: false,
|
||||
},
|
||||
size: {
|
||||
default: null,
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
rows: {
|
||||
default: function () {
|
||||
return 4;
|
||||
},
|
||||
type: Number,
|
||||
default: () => 4,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
hint: {
|
||||
default: null,
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
modelValue: {
|
||||
default: undefined,
|
||||
validator: (v) => typeof v === 'string' || v === null,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
default: '',
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
function trigger(v) {
|
||||
emit('update:modelValue', v.target.value);
|
||||
}
|
||||
if (typeof props.modelValue === 'undefined') {
|
||||
emit('update:modelValue', '');
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,26 @@
|
|||
import {ref, inject, computed, onBeforeUnmount} from 'vue';
|
||||
import {router} from '@inertiajs/vue3';
|
||||
import useQueueEvents from './useQueueEvents.js';
|
||||
|
||||
export default function () {
|
||||
const sizes = {
|
||||
sm: {
|
||||
label: 'text-xs',
|
||||
field: 'text-xs',
|
||||
},
|
||||
default: {
|
||||
label: 'text-sm',
|
||||
field: 'text-sm',
|
||||
},
|
||||
};
|
||||
|
||||
const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
|
||||
|
||||
function labelClass(size) {
|
||||
return sizes[size ? size : 'default'].label;
|
||||
function sizeClass(size) {
|
||||
return {
|
||||
sm: 'field-sm',
|
||||
base: 'field-base',
|
||||
lg: 'field-lg',
|
||||
}[size];
|
||||
}
|
||||
|
||||
function fieldClass(size) {
|
||||
return sizes[size ? size : 'default'].field;
|
||||
}
|
||||
const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]';
|
||||
const fieldAppearance =
|
||||
'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs';
|
||||
|
||||
const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
|
||||
const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
|
||||
const selectAppearance = 'py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full';
|
||||
|
||||
return {
|
||||
labelClass,
|
||||
fieldClass,
|
||||
defaultFieldClass,
|
||||
fieldHeight,
|
||||
fieldAppearance,
|
||||
paddingX,
|
||||
paddingY,
|
||||
sizeClass,
|
||||
selectAppearance,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
<div class="prose prose-invert">
|
||||
<p>Bitte gib deine NaMi-Zugangsdaten ein,<br />um eine erste Synchronisation durchzuführen.</p>
|
||||
</div>
|
||||
<form @submit.prevent="check" class="grid gap-3 mt-5">
|
||||
<f-text v-model="values.mglnr" label="Mitgliedsnummer" name="mglnr" id="mglnr" type="tel" required></f-text>
|
||||
<f-text v-model="values.password" type="password" label="Passwort" name="password" id="password" required></f-text>
|
||||
<form class="grid gap-3 mt-5" @submit.prevent="check">
|
||||
<f-text id="mglnr" v-model="values.mglnr" label="Mitgliedsnummer" type="tel" required></f-text>
|
||||
<f-text id="password" v-model="values.password" type="password" label="Passwort" required></f-text>
|
||||
<ui-button class="mt-6" :is-loading="loading" type="submit">Weiter</ui-button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="step === 1" class="grid grid-cols-5 w-full gap-3">
|
||||
<page-full-heading class="col-span-full !mb-0">Suchkriterien festlegen</page-full-heading>
|
||||
<form @submit.prevent="storeSearch" class="border-2 border-primary-800 border-solid p-3 rounded-lg grid gap-3 col-span-2">
|
||||
<form class="border-2 border-primary-800 border-solid p-3 rounded-lg grid gap-3 col-span-2" @submit.prevent="storeSearch">
|
||||
<div class="prose prose-invert max-w-none col-span-full">
|
||||
<p>
|
||||
Lege hier die Suchkriterien für den Abruf der Mitglieder-Daten fest. Mit diesen Suchkriterien wird im Anschluss eine Mitgliedersuche in NaMi durchgeführt. Alle Mitglieder, die
|
||||
|
|
@ -21,71 +21,71 @@
|
|||
</p>
|
||||
</div>
|
||||
<f-select
|
||||
id="gruppierung1Id"
|
||||
v-model="values.params.gruppierung1Id"
|
||||
label="Diözesan-Gruppierung"
|
||||
name="gruppierung1Id"
|
||||
id="gruppierung1Id"
|
||||
size="sm"
|
||||
:options="searchLayerOptions[0]"
|
||||
@update:modelValue="loadSearchLayer(1, $event, search)"
|
||||
hint="Gruppierungs-Nummer einer Diözese, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deiner Diözese. Entspricht dem Feld '1. Ebene' in der NaMi Suche."
|
||||
@update:modelValue="loadSearchLayer(1, $event, search)"
|
||||
></f-select>
|
||||
<f-select
|
||||
id="gruppierung2Id"
|
||||
v-model="values.params.gruppierung2Id"
|
||||
label="Bezirks-Gruppierung"
|
||||
name="gruppierung2Id"
|
||||
id="gruppierung2Id"
|
||||
hint="Gruppierungs-Nummer eines Bezirks, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deines Bezirks. Entspricht dem Feld '2. Ebene' in der NaMi Suche. Fülle dieses Feld aus, um Mitglieder auf einen bestimmten Bezirk zu begrenzen."
|
||||
:disabled="!values.params.gruppierung1Id"
|
||||
@update:modelValue="loadSearchLayer(2, $event, search)"
|
||||
size="sm"
|
||||
:options="searchLayerOptions[1]"
|
||||
@update:modelValue="loadSearchLayer(2, $event, search)"
|
||||
></f-select>
|
||||
<f-select
|
||||
id="gruppierung3Id"
|
||||
v-model="values.params.gruppierung3Id"
|
||||
label="Stammes-Gruppierung"
|
||||
name="gruppierung3Id"
|
||||
id="gruppierung3Id"
|
||||
size="sm"
|
||||
@update:modelValue="search"
|
||||
hint="Gruppierungs-Nummer deines Stammes, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deines Stammes. Entspricht dem Feld '3. Ebene' in der NaMi Suche. Fülle dieses Feld aus, um Mitglieder auf einen bestimmten Stamm zu beschränken."
|
||||
:disabled="!values.params.gruppierung1Id || !values.params.gruppierung2Id"
|
||||
:options="searchLayerOptions[2]"
|
||||
@update:modelValue="search"
|
||||
></f-select>
|
||||
<f-select
|
||||
id="mglStatusId"
|
||||
v-model="values.params.mglStatusId"
|
||||
label="Mitglieds-Status"
|
||||
name="mglStatusId"
|
||||
id="mglStatusId"
|
||||
size="sm"
|
||||
@update:modelValue="search"
|
||||
:options="states"
|
||||
hint="Wähle hier etwas aus, um nur aktive oder nur inaktive Mitglieder zu synchronisieren. Wir empfehlen dir, dies so zu belassen und Mitglieder ohne 'Datenweiterverwendung' gänzlich zu löschen, um Karteileichen zu entfernen."
|
||||
@update:modelValue="search"
|
||||
></f-select>
|
||||
<f-switch
|
||||
id="inGrp"
|
||||
v-model="values.params.inGrp"
|
||||
label="In Gruppierung suchen"
|
||||
name="inGrp"
|
||||
id="inGrp"
|
||||
@update:modelValue="search"
|
||||
hint="Mitglieder finden, die direktes Mitglied in der kleinsten befüllten Gruppierung sind."
|
||||
size="sm"
|
||||
@update:modelValue="search"
|
||||
></f-switch>
|
||||
<f-switch
|
||||
id="unterhalbGrp"
|
||||
v-model="values.params.unterhalbGrp"
|
||||
label="Unterhalb Gruppierung suchen"
|
||||
name="unterhalbGrp"
|
||||
id="unterhalbGrp"
|
||||
@update:modelValue="search"
|
||||
hint="Mitglieder finden, die direktes Mitglied in einer Untergruppe der kleinsten befüllten Gruppierung sind."
|
||||
size="sm"
|
||||
@update:modelValue="search"
|
||||
></f-switch>
|
||||
<div class="col-span-full flex justify-center">
|
||||
<ui-button :is-loading="loading" class="!px-10" type="submit">Weiter</ui-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="col-span-3 text-sm col-span-3" v-if="preview !== null && preview.data.length">
|
||||
<section v-if="preview !== null && preview.data.length" class="col-span-3 text-sm col-span-3">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
|
||||
<thead>
|
||||
<th>GruppierungsNr</th>
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
<ui-pagination class="mt-4" :value="preview" @reload="reloadPage"></ui-pagination>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-span-3 items-center justify-center flex text-xl text-gray-200 border-2 border-primary-800 border-solid p-3 rounded-lg mt-4" v-else>Keine Mitglieder gefunden</section>
|
||||
<section v-else class="col-span-3 items-center justify-center flex text-xl text-gray-200 border-2 border-primary-800 border-solid p-3 rounded-lg mt-4">Keine Mitglieder gefunden</section>
|
||||
</div>
|
||||
<div v-if="step === 2">
|
||||
<page-full-heading>Standard-Gruppierung</page-full-heading>
|
||||
|
|
@ -117,8 +117,8 @@
|
|||
<p>Dieser Gruppierung werden Mitglieder automatisch zugeordnet,<br />falls nichts anderes angegeben wurde.</p>
|
||||
<p>I.d.R. ist das z.B. die Nummer deines Stammes, wenn du als StaVo mit Adrema Daten verwaltest.</p>
|
||||
</div>
|
||||
<form @submit.prevent="submit" class="grid grid-cols-2 gap-3 mt-5">
|
||||
<f-text v-model="values.group_id" label="Gruppierungs-Nummer" name="groupId" id="groupId" type="tel" class="col-span-full" required></f-text>
|
||||
<form class="grid grid-cols-2 gap-3 mt-5" @submit.prevent="submit">
|
||||
<f-text id="groupId" v-model="values.group_id" label="Gruppierungs-Nummer" type="tel" class="col-span-full" required></f-text>
|
||||
<ui-button class="btn-secondary" @click.prevent="step--">Zurück</ui-button>
|
||||
<ui-button type="submit">Weiter</ui-button>
|
||||
</form>
|
||||
|
|
@ -141,9 +141,9 @@ import hasFlash from '../../mixins/hasFlash.js';
|
|||
import debounce from 'lodash/debounce';
|
||||
|
||||
export default {
|
||||
layout: FullLayout,
|
||||
|
||||
mixins: [hasFlash],
|
||||
layout: FullLayout,
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
</template>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="grid gap-5">
|
||||
<f-text id="email" name="email" label="E-Mail-Adresse" v-model="values.email"></f-text>
|
||||
<f-text id="password" name="password" type="password" label="Passwort" v-model="values.password"></f-text>
|
||||
<f-text id="email" v-model="values.email" label="E-Mail-Adresse"></f-text>
|
||||
<f-text id="password" v-model="values.password" type="password" label="Passwort"></f-text>
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
></f-select>
|
||||
<f-select v-model="meta.subactivity_id" :options="props.subactivities[meta.activity_id]" name="subactivity_id" label="Untertätigkeit" size="sm"></f-select>
|
||||
<f-select v-model="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id"></f-select>
|
||||
<f-text id="search_text" v-model="searchText" label="Suchen …" size="sm" name="search_text"></f-text>
|
||||
<f-text id="search_text" v-model="searchText" label="Suchen …" size="sm"></f-text>
|
||||
</div>
|
||||
<div class="grid gap-2 grid-cols-6 mt-4">
|
||||
<f-switch v-for="member in members.hits" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
Merke oder notiere dir dieses Passwort, bevor du das Formular absendest.<br />
|
||||
Danach wirst du zum Dashboard weitergeleitet.</span
|
||||
>
|
||||
<f-text id="password" v-model="values.password" type="password" name="password" label="Neues Passwort"></f-text>
|
||||
<f-text id="password_confirmation" v-model="values.password_confirmation" type="password" name="password_confirmation" label="Neues Passwort widerholen"></f-text>
|
||||
<f-text id="password" v-model="values.password" type="password" label="Neues Passwort"></f-text>
|
||||
<f-text id="password_confirmation" v-model="values.password_confirmation" type="password" label="Neues Passwort widerholen"></f-text>
|
||||
<button type="submit" class="btn btn-primary">Passwort zurücksetzen</button>
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="text-gray-500 text-sm hover:text-gray-300" @click.prevent="$inertia.visit('/login')">Zurück zum Login</button>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@
|
|||
</template>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="grid gap-5">
|
||||
<f-text id="email" v-model="values.email" name="email" label="E-Mail-Adresse"></f-text>
|
||||
<f-text id="password" v-model="values.password" name="password" type="password" label="Passwort"></f-text>
|
||||
<f-text id="email" v-model="values.email" label="E-Mail-Adresse"></f-text>
|
||||
<f-text id="password" v-model="values.password" type="password" label="Passwort"></f-text>
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="text-gray-500 text-sm hover:text-gray-300"
|
||||
@click.prevent="$inertia.visit('/password/reset')">Passwort vergessen?</button>
|
||||
<button type="button" class="text-gray-500 text-sm hover:text-gray-300" @click.prevent="$inertia.visit('/password/reset')">Passwort vergessen?</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
<template>
|
||||
<page-layout>
|
||||
<form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
|
||||
<f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2"
|
||||
label="Veranstaltungs-Name" required></f-text>
|
||||
<f-text id="dateFrom" v-model="values.dateFrom" name="dateFrom" type="date" label="Datum von" required></f-text>
|
||||
<f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis"
|
||||
required></f-text>
|
||||
<f-text id="eventName" v-model="values.eventName" class="col-span-2" label="Veranstaltungs-Name" required></f-text>
|
||||
<f-text id="dateFrom" v-model="values.dateFrom" type="date" label="Datum von" required></f-text>
|
||||
<f-text id="dateUntil" v-model="values.dateUntil" type="date" label="Datum bis" required></f-text>
|
||||
|
||||
<f-text id="zipLocation" v-model="values.zipLocation" name="zipLocation" label="PLZ / Ort" required></f-text>
|
||||
<f-select id="country" v-model="values.country" :options="countries" name="country" label="Land"
|
||||
required></f-select>
|
||||
<f-text id="zipLocation" v-model="values.zipLocation" label="PLZ / Ort" required></f-text>
|
||||
<f-select id="country" v-model="values.country" :options="countries" name="country" label="Land" required></f-select>
|
||||
|
||||
<div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
|
||||
<f-text id="search_text" ref="searchTextField" v-model="searchText" class="col-span-2" name="search_text"
|
||||
label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
|
||||
<f-text id="search_text" ref="searchTextField" v-model="searchText" class="col-span-2" label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
|
||||
<div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
|
||||
<f-switch v-for="member in results" :id="`members-${member.id}`" :key="member.id"
|
||||
v-model="values.members" :label="member.fullname" name="members[]" :value="member.id" size="sm"
|
||||
inline @keypress.enter.prevent="onSubmitMemberResult(member)"></f-switch>
|
||||
<f-switch
|
||||
v-for="member in results"
|
||||
:id="`members-${member.id}`"
|
||||
:key="member.id"
|
||||
v-model="values.members"
|
||||
:label="member.fullname"
|
||||
name="members[]"
|
||||
:value="member.id"
|
||||
size="sm"
|
||||
inline
|
||||
@keypress.enter.prevent="onSubmitMemberResult(member)"
|
||||
></f-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block"
|
||||
@click.prevent="submit(compiler.class)" v-text="compiler.title"></button>
|
||||
<button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block" @click.prevent="submit(compiler.class)" v-text="compiler.title"></button>
|
||||
</form>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import {ref, computed, inject} from 'vue';
|
||||
import useSearch from '../../composables/useSearch.js';
|
||||
const axios = inject('axios');
|
||||
|
||||
const { search } = useSearch();
|
||||
const {search} = useSearch();
|
||||
|
||||
const props = defineProps({
|
||||
data: {},
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
:id="`value-${index}`"
|
||||
v-model="condition.value"
|
||||
:options="getOptions(condition.field)"
|
||||
:name="`value-${index}`"
|
||||
label="Wert"
|
||||
></f-multipleselect>
|
||||
<f-switch
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<ui-tabs v-model="active" :entries="tabs"></ui-tabs>
|
||||
<div v-show="active === 0" class="grid grid-cols-2 gap-3">
|
||||
<div class="flex space-x-3">
|
||||
<f-text id="name" v-model="single.name" class="grow" name="name" label="Name" required></f-text>
|
||||
<f-text id="name" v-model="single.name" class="grow" label="Name" required></f-text>
|
||||
<f-switch id="is_active" v-model="single.is_active" name="is_active" label="Aktiv"></f-switch>
|
||||
<f-switch id="is_private" v-model="single.is_private" name="is_private" label="Privat"></f-switch>
|
||||
</div>
|
||||
|
|
@ -54,13 +54,12 @@
|
|||
collection="headerImage"
|
||||
required
|
||||
></f-singlefile>
|
||||
<f-text id="from" v-model="single.from" type="date" name="from" label="Von" required></f-text>
|
||||
<f-text id="to" v-model="single.to" type="date" name="to" label="Bis" required></f-text>
|
||||
<f-text id="from" v-model="single.from" type="date" label="Von" required></f-text>
|
||||
<f-text id="to" v-model="single.to" type="date" label="Bis" required></f-text>
|
||||
<f-textarea
|
||||
id="excerpt"
|
||||
v-model="single.excerpt"
|
||||
hint="Gebe hier eine kurze Beschreibung für die Veranstaltungs-Übersicht ein (Maximal 130 Zeichen)."
|
||||
name="excerpt"
|
||||
label="Auszug"
|
||||
rows="5"
|
||||
required
|
||||
|
|
@ -122,7 +121,7 @@
|
|||
</ui-popup>
|
||||
|
||||
<page-filter breakpoint="xl">
|
||||
<f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
|
||||
<f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
|
||||
<f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" size="sm" @update:model-value="setFilter('past', $event)"></f-switch>
|
||||
<f-switch id="inactive" :model-value="getFilter('inactive')" label="inaktive zeigen" size="sm" @update:model-value="setFilter('inactive', $event)"></f-switch>
|
||||
</page-filter>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</ui-popup>
|
||||
<page-filter breakpoint="lg">
|
||||
<f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch>
|
||||
<f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm" name="active_columns"></f-multipleselect>
|
||||
<f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect>
|
||||
|
||||
<template v-for="(filter, index) in meta.filters">
|
||||
<f-select
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
id="description"
|
||||
label="Beschreibung"
|
||||
size="sm"
|
||||
name="description"
|
||||
:model-value="modelValue.description"
|
||||
@update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
|
||||
></f-textarea>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
:id="`options-${index}`"
|
||||
size="sm"
|
||||
class="grow"
|
||||
:name="`options-${index}`"
|
||||
:model-value="option"
|
||||
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
|
||||
></f-text>
|
||||
|
|
@ -18,15 +17,7 @@
|
|||
></ui-action-button>
|
||||
</div>
|
||||
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
|
||||
<f-text
|
||||
id="min"
|
||||
type="number"
|
||||
size="sm"
|
||||
name="min"
|
||||
label="Minimale Anzahl Elemente"
|
||||
:model-value="modelValue.min"
|
||||
@update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"
|
||||
></f-text>
|
||||
<f-text id="min" type="number" size="sm" label="Minimale Anzahl Elemente" :model-value="modelValue.min" @update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"></f-text>
|
||||
<f-text
|
||||
id="max"
|
||||
type="number"
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
@close="singleSection = null"
|
||||
@submit="storeSection"
|
||||
>
|
||||
<f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name" :name="`sectionform-name`"></f-text>
|
||||
<f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung" :name="`sectionform-intro`"></f-textarea>
|
||||
<f-text id="sectionform-name" v-model="singleSection.model.name" label="Name"></f-text>
|
||||
<f-textarea id="sectionform-intro" v-model="singleSection.model.intro" label="Einleitung"></f-textarea>
|
||||
</asideform>
|
||||
<asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen" @close="singleSection = null" @submit="storeSection">
|
||||
<draggable v-model="singleSection.model.fields" item-key="key" :component-data="{class: 'mt-3 grid gap-3'}">
|
||||
|
|
@ -36,13 +36,13 @@
|
|||
@close="singleField = null"
|
||||
@submit="storeField"
|
||||
>
|
||||
<f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
|
||||
<f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm" name="intro"></f-textarea>
|
||||
<f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm"></f-text>
|
||||
<f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm"></f-textarea>
|
||||
<column-selector v-model="singleField.model.columns"></column-selector>
|
||||
<component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections" :meta="props.meta"></component>
|
||||
<f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld" size="sm" name="nami_type"></f-select>
|
||||
<f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes" label="Bedeutung" size="sm" name="special_type"></f-select>
|
||||
<f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm" name="hint"></f-textarea>
|
||||
<f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm"></f-textarea>
|
||||
<f-switch
|
||||
v-show="singleField.model.nami_type === null"
|
||||
id="for_members"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
v-model="modelValue.empty_option_value"
|
||||
label="Wert der leeren Option"
|
||||
size="sm"
|
||||
name="empty_option_value"
|
||||
@update:modelValue="$emit('update:modelValue', {...modelValue, empty_option_value: $event})"
|
||||
></f-text>
|
||||
<f-select
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<ui-popup v-if="single !== null" :heading="`Vorlage ${single.id ? 'bearbeiten' : 'erstellen'}`" full @close="cancel">
|
||||
<form-builder v-model="single.config" :meta="meta">
|
||||
<template #meta>
|
||||
<f-text id="name" v-model="single.name" name="name" label="Name" required></f-text>
|
||||
<f-text id="name" v-model="single.name" label="Name" required></f-text>
|
||||
</template>
|
||||
</form-builder>
|
||||
<template #actions>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
<template>
|
||||
<f-switch id="fieldrequired" :model-value="modelValue.required" label="Erforderlich" size="sm" name="fieldrequired"
|
||||
inline @update:modelValue="$emit('update:modelValue', { ...modelValue, required: $event })"></f-switch>
|
||||
<f-text id="min" :model-value="modelValue.min" label="minimaler Wert" size="sm" name="min" type="number"
|
||||
@update:modelValue="$emit('update:modelValue', { ...modelValue, min: parse($event) })"></f-text>
|
||||
<f-text id="max" :model-value="modelValue.max" label="maximaler Wert" size="sm" name="max" type="number"
|
||||
@update:modelValue="$emit('update:modelValue', { ...modelValue, max: parse($event) })"></f-text>
|
||||
<f-switch
|
||||
id="fieldrequired"
|
||||
:model-value="modelValue.required"
|
||||
label="Erforderlich"
|
||||
size="sm"
|
||||
name="fieldrequired"
|
||||
inline
|
||||
@update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
|
||||
></f-switch>
|
||||
<f-text id="min" :model-value="modelValue.min" label="minimaler Wert" size="sm" type="number" @update:modelValue="$emit('update:modelValue', {...modelValue, min: parse($event)})"></f-text>
|
||||
<f-text id="max" :model-value="modelValue.max" label="maximaler Wert" size="sm" type="number" @update:modelValue="$emit('update:modelValue', {...modelValue, max: parse($event)})"></f-text>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
:id="`options-${index}`"
|
||||
size="sm"
|
||||
class="grow"
|
||||
:name="`options-${index}`"
|
||||
:model-value="option"
|
||||
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
|
||||
></f-text>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<f-text id="rows" label="Zeilen" size="sm" name="rows" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
|
||||
<f-text id="rows" label="Zeilen" size="sm" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
|
||||
<f-switch
|
||||
id="fieldrequired"
|
||||
v-model="modelValue.required"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</a>
|
||||
</template>
|
||||
<div class="flex space-x-3">
|
||||
<f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name" name="parent-inner_name"></f-text>
|
||||
<f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name"></f-text>
|
||||
<f-select id="parent-level" v-model="editing.parent.level" label="Ebene" name="parent-level" :options="meta.levels"></f-select>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<span v-text="child.name"></span>
|
||||
</td>
|
||||
<td>
|
||||
<f-text :id="`inner_name-${child.id}`" v-model="child.inner_name" label="" size="sm" :name="`inner_name-${child.id}`"></f-text>
|
||||
<f-text :id="`inner_name-${child.id}`" v-model="child.inner_name" label="" size="sm"></f-text>
|
||||
</td>
|
||||
<td>
|
||||
<f-select :id="`level-${child.id}`" v-model="child.level" label="" size="sm" :name="`level-${child.id}`" :options="meta.levels"></f-select>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<ui-popup v-if="massstore !== null" heading="Massenrechnung anlegen" @close="massstore = null">
|
||||
<form @submit.prevent="sendMassstore">
|
||||
<section class="grid grid-cols-2 gap-3 mt-6">
|
||||
<f-text id="year" v-model="massstore.year" name="year" label="Jahr" required></f-text>
|
||||
<f-text id="year" v-model="massstore.year" label="Jahr" required></f-text>
|
||||
</section>
|
||||
<section class="flex mt-4 space-x-2">
|
||||
<ui-button type="submit" class="btn-danger">Speichern</ui-button>
|
||||
|
|
@ -39,29 +39,29 @@
|
|||
<ui-box heading="Für Mitglied anlegen" container-class="flex space-x-3" class="col-span-full">
|
||||
<f-select id="forMemberMember" v-model="forMember.member_id" name="forMemberMember" :options="meta.members" label="Mitglied"></f-select>
|
||||
<f-select id="forMemberSubscription" v-model="forMember.subscription_id" name="forMemberSubscription" :options="meta.subscriptions" label="Beitrag"></f-select>
|
||||
<f-text id="forMemberYear" v-model="forMember.year" name="forMemberYear" label="Jahr"></f-text>
|
||||
<f-text id="forMemberYear" v-model="forMember.year" label="Jahr"></f-text>
|
||||
<ui-icon-button class="btn-primary self-end mb-2" icon="save" @click="saveForMember">Speichern</ui-icon-button>
|
||||
</ui-box>
|
||||
<ui-box heading=" Empfänger" container-class="grid grid-cols-2 gap-3 col-span-full">
|
||||
<f-text id="to_name" v-model="single.to.name" name="to_name" label="Name" class="col-span-full" required></f-text>
|
||||
<f-text id="to_address" v-model="single.to.address" name="to_address" label="Adresse" class="col-span-full" required></f-text>
|
||||
<f-text id="to_zip" v-model="single.to.zip" name="to_zip" label="PLZ" required></f-text>
|
||||
<f-text id="to_location" v-model="single.to.location" name="to_location" label="Ort" required></f-text>
|
||||
<f-text id="mail_email" v-model="single.mail_email" name="mail_email" label="E-Mail-Adresse" class="col-span-full"></f-text>
|
||||
<f-text id="to_name" v-model="single.to.name" label="Name" class="col-span-full" required></f-text>
|
||||
<f-text id="to_address" v-model="single.to.address" label="Adresse" class="col-span-full" required></f-text>
|
||||
<f-text id="to_zip" v-model="single.to.zip" label="PLZ" required></f-text>
|
||||
<f-text id="to_location" v-model="single.to.location" label="Ort" required></f-text>
|
||||
<f-text id="mail_email" v-model="single.mail_email" label="E-Mail-Adresse" class="col-span-full"></f-text>
|
||||
</ui-box>
|
||||
<ui-box heading="Status" container-class="grid gap-3">
|
||||
<f-select id="status" v-model="single.status" :options="meta.statuses" name="status" label="Status" required></f-select>
|
||||
<f-select id="via" v-model="single.via" :options="meta.vias" name="via" label="Rechnungsweg" required></f-select>
|
||||
<f-text id="greeting" v-model="single.greeting" name="greeting" label="Anrede" required></f-text>
|
||||
<f-text id="usage" v-model="single.usage" name="usage" label="Verwendungszweck" required></f-text>
|
||||
<f-text id="greeting" v-model="single.greeting" label="Anrede" required></f-text>
|
||||
<f-text id="usage" v-model="single.usage" label="Verwendungszweck" required></f-text>
|
||||
</ui-box>
|
||||
<ui-box heading="Positionen" class="col-span-full" container-class="grid gap-3">
|
||||
<template #in-title>
|
||||
<ui-icon-button class="ml-3 btn-primary" icon="plus" @click="single.positions.push({...meta.default_position})">Neu</ui-icon-button>
|
||||
</template>
|
||||
<div v-for="(position, index) in single.positions" :key="index" class="flex items-end space-x-3">
|
||||
<f-text :id="`position-description-${index}`" v-model="position.description" class="grow" :name="`position-description-${index}`" label="Beschreibung" required></f-text>
|
||||
<f-text :id="`position-price-${index}`" v-model="position.price" mode="area" :name="`position-price-${index}`" label="Preis" required></f-text>
|
||||
<f-text :id="`position-description-${index}`" v-model="position.description" class="grow" label="Beschreibung" required></f-text>
|
||||
<f-text :id="`position-price-${index}`" v-model="position.price" mode="area" label="Preis" required></f-text>
|
||||
<f-select :id="`position-member-${index}`" v-model="position.member_id" :options="meta.members" :name="`position-member-${index}`" label="Mitglied" required></f-select>
|
||||
<button type="button" class="btn btn-danger btn-sm h-[35px]" icon="trash" @click="single.positions.splice(index, 1)"><ui-sprite src="trash"></ui-sprite></button>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,6 @@
|
|||
:model-value="getFilter('statuses')"
|
||||
label="Status"
|
||||
size="sm"
|
||||
name="group_ids"
|
||||
@update:model-value="setFilter('statuses', $event)"
|
||||
></f-multipleselect>
|
||||
</page-filter>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<form id="form" class="p-3 grid gap-3" @submit.prevent="submit">
|
||||
<ui-box heading="Metadatem">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<f-text id="name" v-model="model.name" name="name" label="Name" size="sm" required></f-text>
|
||||
<f-text id="name" v-model="model.name" label="Name" size="sm" required></f-text>
|
||||
<f-select id="gateway_id" v-model="model.gateway_id" name="gateway_id" :options="meta.gateways" label="Verbindung" size="sm" required></f-select>
|
||||
</div>
|
||||
</ui-box>
|
||||
|
|
@ -18,7 +18,6 @@
|
|||
<f-multipleselect
|
||||
id="activity_ids"
|
||||
v-model="model.filter.activity_ids"
|
||||
name="activity_ids"
|
||||
:options="members.meta.filterActivities"
|
||||
label="Tätigkeit"
|
||||
size="sm"
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
<f-multipleselect
|
||||
id="subactivity_ids"
|
||||
v-model="model.filter.subactivity_ids"
|
||||
name="subactivity_ids"
|
||||
:options="members.meta.filterSubactivities"
|
||||
label="Unterttätigkeit"
|
||||
size="sm"
|
||||
|
|
@ -36,7 +34,6 @@
|
|||
<f-multipleselect
|
||||
id="include"
|
||||
v-model="model.filter.include"
|
||||
name="include"
|
||||
:options="members.meta.members"
|
||||
label="Zusätzliche Mitglieder"
|
||||
size="sm"
|
||||
|
|
@ -45,21 +42,12 @@
|
|||
<f-multipleselect
|
||||
id="exclude"
|
||||
v-model="model.filter.exclude"
|
||||
name="exclude"
|
||||
:options="members.meta.members"
|
||||
label="Mitglieder ausschließen"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="groupIds"
|
||||
v-model="model.filter.group_ids"
|
||||
name="groupIds"
|
||||
:options="members.meta.groups"
|
||||
label="Gruppierungen"
|
||||
size="sm"
|
||||
@update:model-value="reload(1)"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect id="groupIds" v-model="model.filter.group_ids" :options="members.meta.groups" label="Gruppierungen" size="sm" @update:model-value="reload(1)"></f-multipleselect>
|
||||
</div>
|
||||
</ui-box>
|
||||
<ui-box v-if="members !== null" heading="Mitglieder">
|
||||
|
|
|
|||
|
|
@ -6,19 +6,33 @@
|
|||
<ui-popup v-if="single !== null" :heading="single.id ? 'Verbindung bearbeiten' : 'Neue Verbindung'" @close="cancel">
|
||||
<form @submit.prevent="submit">
|
||||
<section class="grid grid-cols-2 gap-3 mt-6">
|
||||
<f-text id="name" v-model="single.name" name="name" label="Bezeichnung" required></f-text>
|
||||
<f-text id="domain" v-model="single.domain" name="domain" label="Domain" required></f-text>
|
||||
<f-select id="type" :model-value="single.type.cls" label="Typ" name="type" :options="meta.types"
|
||||
:placeholder="''" required @update:model-value="
|
||||
<f-text id="name" v-model="single.name" label="Bezeichnung" required></f-text>
|
||||
<f-text id="domain" v-model="single.domain" label="Domain" required></f-text>
|
||||
<f-select
|
||||
id="type"
|
||||
:model-value="single.type.cls"
|
||||
label="Typ"
|
||||
name="type"
|
||||
:options="meta.types"
|
||||
:placeholder="''"
|
||||
required
|
||||
@update:model-value="
|
||||
single.type = {
|
||||
cls: $event,
|
||||
params: { ...getType($event).defaults },
|
||||
params: {...getType($event).defaults},
|
||||
}
|
||||
"></f-select>
|
||||
"
|
||||
></f-select>
|
||||
<template v-for="(field, index) in getType(single.type.cls).fields">
|
||||
<f-text v-if="field.type === 'text' || field.type === 'password' || field.type === 'email'"
|
||||
:id="field.name" :key="index" v-model="single.type.params[field.name]" :label="field.label"
|
||||
:type="field.type" :name="field.name" :required="field.is_required"></f-text>
|
||||
<f-text
|
||||
v-if="field.type === 'text' || field.type === 'password' || field.type === 'email'"
|
||||
:id="field.name"
|
||||
:key="index"
|
||||
v-model="single.type.params[field.name]"
|
||||
:label="field.label"
|
||||
:type="field.type"
|
||||
:required="field.is_required"
|
||||
></f-text>
|
||||
</template>
|
||||
</section>
|
||||
<section class="flex mt-4 space-x-2">
|
||||
|
|
@ -43,12 +57,14 @@
|
|||
<td v-text="gateway.domain"></td>
|
||||
<td v-text="gateway.type_human"></td>
|
||||
<td>
|
||||
<ui-boolean-display :value="gateway.works" long-label="Verbindungsstatus"
|
||||
:label="gateway.works ? 'Verbindung erfolgreich' : 'Verbindung fehlgeschlagen'"></ui-boolean-display>
|
||||
<ui-boolean-display
|
||||
:value="gateway.works"
|
||||
long-label="Verbindungsstatus"
|
||||
:label="gateway.works ? 'Verbindung erfolgreich' : 'Verbindung fehlgeschlagen'"
|
||||
></ui-boolean-display>
|
||||
</td>
|
||||
<td>
|
||||
<a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm"
|
||||
@click.prevent="edit(gateway)"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
<a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(gateway)"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -62,11 +78,11 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
|
||||
import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
|
||||
import SettingLayout from '../setting/Layout.vue';
|
||||
|
||||
const props = defineProps(indexProps);
|
||||
const { meta, data, create, edit, cancel, single, submit } = useIndex(props.data, 'mailgateway');
|
||||
const {meta, data, create, edit, cancel, single, submit} = useIndex(props.data, 'mailgateway');
|
||||
|
||||
function getType(type) {
|
||||
return meta.value.types.find((t) => t.id === type);
|
||||
|
|
|
|||
|
|
@ -24,30 +24,9 @@
|
|||
<span class="hidden xl:inline">Hinzufügen</span>
|
||||
</button>
|
||||
<div v-for="(filter, index) in membershipFilters" :key="index" class="flex space-x-2 mt-2">
|
||||
<f-multipleselect
|
||||
:id="`group_ids-multiple-${index}`"
|
||||
v-model="filter.group_ids"
|
||||
:options="meta.groups"
|
||||
label="Gruppierung"
|
||||
size="sm"
|
||||
:name="`group_ids-multiple-${index}`"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
:id="`activity_ids-multiple-${index}`"
|
||||
v-model="filter.activity_ids"
|
||||
:options="meta.filterActivities"
|
||||
label="Tätigkeiten"
|
||||
size="sm"
|
||||
:name="`activity_ids-multiple-${index}`"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
:id="`subactivity_ids-multiple-${index}`"
|
||||
v-model="filter.subactivity_ids"
|
||||
:options="meta.filterSubactivities"
|
||||
label="Untertätigkeiten"
|
||||
size="sm"
|
||||
:name="`subactivity_ids-multiple-${index}`"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect :id="`group_ids-multiple-${index}`" v-model="filter.group_ids" :options="meta.groups" label="Gruppierung" size="sm"></f-multipleselect>
|
||||
<f-multipleselect :id="`activity_ids-multiple-${index}`" v-model="filter.activity_ids" :options="meta.filterActivities" label="Tätigkeiten" size="sm"></f-multipleselect>
|
||||
<f-multipleselect :id="`subactivity_ids-multiple-${index}`" v-model="filter.subactivity_ids" :options="meta.filterSubactivities" label="Untertätigkeiten" size="sm"></f-multipleselect>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary label mt-3"
|
||||
|
|
@ -60,7 +39,7 @@
|
|||
</button>
|
||||
</ui-popup>
|
||||
<page-filter breakpoint="xl">
|
||||
<f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
|
||||
<f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
|
||||
<f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
|
||||
<f-multipleselect
|
||||
id="group_ids"
|
||||
|
|
@ -68,7 +47,6 @@
|
|||
:model-value="getFilter('group_ids')"
|
||||
label="Gruppierungen"
|
||||
size="sm"
|
||||
name="group_ids"
|
||||
@update:model-value="setFilter('group_ids', $event)"
|
||||
></f-multipleselect>
|
||||
<f-select
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
</template>
|
||||
<setting-layout>
|
||||
<form id="billsettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
|
||||
<f-text label="Absender" hint="Absender-Name in Kurzform, i.d.R. der kurze Stammesname" name="from" id="from" v-model="inner.from"></f-text>
|
||||
<f-text label="Absender (lang)" v-model="inner.from_long" name="from_long" id="from_long" hint="Absender-Name in Langform, i.d.R. der Stammesname"></f-text>
|
||||
<f-text id="from" v-model="inner.from" label="Absender" hint="Absender-Name in Kurzform, i.d.R. der kurze Stammesname"></f-text>
|
||||
<f-text id="from_long" v-model="inner.from_long" label="Absender (lang)" hint="Absender-Name in Langform, i.d.R. der Stammesname"></f-text>
|
||||
<h2 class="text-lg font-semibold text-gray-300 col-span-2 mt-5">Kontaktdaten</h2>
|
||||
<div class="col-span-2 text-gray-300 text-sm">Diese Kontaktdaten stehen im Absender-Bereich auf der Rechnung.</div>
|
||||
<f-text label="Straße" v-model="inner.address" name="address" id="address"></f-text>
|
||||
<f-text label="PLZ" v-model="inner.zip" name="zip" id="zip"></f-text>
|
||||
<f-text label="Ort" v-model="inner.place" name="place" id="place"></f-text>
|
||||
<f-text label="E-Mail-Adresse" v-model="inner.email" name="email" id="email"></f-text>
|
||||
<f-text label="Telefonnummer" v-model="inner.mobile" name="mobile" id="mobile"></f-text>
|
||||
<f-text label="Webseite" v-model="inner.website" name="website" id="website"></f-text>
|
||||
<f-text label="IBAN" v-model="inner.iban" name="iban" id="iban"></f-text>
|
||||
<f-text label="BIC" v-model="inner.bic" name="bic" id="bic"></f-text>
|
||||
<f-text id="address" v-model="inner.address" label="Straße"></f-text>
|
||||
<f-text id="zip" v-model="inner.zip" label="PLZ"></f-text>
|
||||
<f-text id="place" v-model="inner.place" label="Ort"></f-text>
|
||||
<f-text id="email" v-model="inner.email" label="E-Mail-Adresse"></f-text>
|
||||
<f-text id="mobile" v-model="inner.mobile" label="Telefonnummer"></f-text>
|
||||
<f-text id="website" v-model="inner.website" label="Webseite"></f-text>
|
||||
<f-text id="iban" v-model="inner.iban" label="IBAN"></f-text>
|
||||
<f-text id="bic" v-model="inner.bic" label="BIC"></f-text>
|
||||
</form>
|
||||
</setting-layout>
|
||||
</page-layout>
|
||||
|
|
@ -26,23 +26,23 @@
|
|||
import SettingLayout from './Layout.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingLayout,
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
inner: {...this.data},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$inertia.post('/setting/bill', this.inner, {
|
||||
onSuccess: () => this.$success('Einstellungen gespeichert.')
|
||||
onSuccess: () => this.$success('Einstellungen gespeichert.'),
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SettingLayout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<p class="text-sm">Hier kannst du Einstellungen für Anmeldeformulare setzen.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<f-text id="register_url" v-model="inner.register_url" label="Formular-Link" name="register_url"></f-text>
|
||||
<f-text id="clear_cache_url" v-model="inner.clear_cache_url" label="Frontend-Cache-Url" name="clear_cache_url"></f-text>
|
||||
<f-text id="register_url" v-model="inner.register_url" label="Formular-Link"></f-text>
|
||||
<f-text id="clear_cache_url" v-model="inner.clear_cache_url" label="Frontend-Cache-Url"></f-text>
|
||||
</div>
|
||||
</form>
|
||||
</setting-layout>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
<ui-sprite :src="stateDisplay.icon" :class="stateDisplay.text" class="w-5 h-5"></ui-sprite>
|
||||
<span class="ml-3" :class="stateDisplay.text" v-text="stateDisplay.label"></span>
|
||||
</div>
|
||||
<f-text label="URL" hint="URL der Mailman Api" name="base_url" id="base_url" v-model="inner.base_url"></f-text>
|
||||
<f-text label="Benutzername" name="username" id="username" v-model="inner.username"></f-text>
|
||||
<f-text type="password" label="Passwort" name="password" id="password" v-model="inner.password"></f-text>
|
||||
<f-select label="Liste für alle Mitglieder" name="all_list" id="all_list" v-model="inner.all_list" :options="lists"></f-select>
|
||||
<f-select label="Liste für Eltern" name="all_parents_list" id="all_parents_list" v-model="inner.all_parents_list" :options="lists"></f-select>
|
||||
<f-select label="Liste für aktive Leiter" name="active_leaders_list" id="active_leaders_list" v-model="inner.active_leaders_list" :options="lists"></f-select>
|
||||
<f-select label="Liste für passive Leiter" name="passive_leaders_list" id="passive_leaders_list" v-model="inner.passive_leaders_list" :options="lists"></f-select>
|
||||
<f-text id="base_url" v-model="inner.base_url" label="URL" hint="URL der Mailman Api"></f-text>
|
||||
<f-text id="username" v-model="inner.username" label="Benutzername"></f-text>
|
||||
<f-text id="password" v-model="inner.password" type="password" label="Passwort"></f-text>
|
||||
<f-select id="all_list" v-model="inner.all_list" label="Liste für alle Mitglieder" name="all_list" :options="lists"></f-select>
|
||||
<f-select id="all_parents_list" v-model="inner.all_parents_list" label="Liste für Eltern" name="all_parents_list" :options="lists"></f-select>
|
||||
<f-select id="active_leaders_list" v-model="inner.active_leaders_list" label="Liste für aktive Leiter" name="active_leaders_list" :options="lists"></f-select>
|
||||
<f-select id="passive_leaders_list" v-model="inner.passive_leaders_list" label="Liste für passive Leiter" name="passive_leaders_list" :options="lists"></f-select>
|
||||
<div></div>
|
||||
</form>
|
||||
</setting-layout>
|
||||
|
|
@ -36,16 +36,19 @@
|
|||
import SettingLayout from './Layout.vue';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: {...this.data},
|
||||
};
|
||||
components: {
|
||||
SettingLayout,
|
||||
},
|
||||
props: {
|
||||
data: {},
|
||||
state: {},
|
||||
lists: {},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
inner: {...this.data},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
stateDisplay() {
|
||||
if (this.state === null) {
|
||||
|
|
@ -74,14 +77,11 @@ export default {
|
|||
submit() {
|
||||
this.$inertia.post('/setting/mailman', this.inner, {
|
||||
onSuccess: (page) => {
|
||||
this.$success('Einstellungen gespeichert.')
|
||||
this.$success('Einstellungen gespeichert.');
|
||||
this.inner = page.props.data;
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SettingLayout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,12 @@
|
|||
<f-save-button form="namisettingform"></f-save-button>
|
||||
</template>
|
||||
<setting-layout>
|
||||
<form id="namisettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start"
|
||||
@submit.prevent="submit">
|
||||
<form id="namisettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
|
||||
<div class="col-span-full text-gray-100 mb-3">
|
||||
<p class="text-sm">Hier kannst du deine Zugangsdaten zu NaMi anpassen, falls sich z.B. dein Passwort
|
||||
geändert hat.</p>
|
||||
<p class="text-sm">Hier kannst du deine Zugangsdaten zu NaMi anpassen, falls sich z.B. dein Passwort geändert hat.</p>
|
||||
</div>
|
||||
<f-text id="mglnr" v-model="inner.mglnr" label="Mitgliedsnummer" name="mglnr"></f-text>
|
||||
<f-text id="default_group_id" v-model="inner.default_group_id" label="Standard-Gruppierung"
|
||||
name="default_group_id"></f-text>
|
||||
<f-text id="mglnr" v-model="inner.mglnr" label="Mitgliedsnummer"></f-text>
|
||||
<f-text id="default_group_id" v-model="inner.default_group_id" label="Standard-Gruppierung"></f-text>
|
||||
<f-text id="password" v-model="inner.password" label="Passwort" name="password" type="password"></f-text>
|
||||
</form>
|
||||
</setting-layout>
|
||||
|
|
@ -36,7 +33,7 @@ export default {
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
inner: { ...this.data },
|
||||
inner: {...this.data},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -33,5 +33,5 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue