silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add nami field

This commit is contained in:
philipp lang 2021-04-11 20:35:18 +02:00
parent d865e1a46d
commit db375629fc
11 changed files with 150 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Member/MemberResource.php
View File

@ -34,7 +34,6 @@ class MemberResource extends JsonResource
'email' => $this->email,
'email_parents' => $this->email_parents,
'fax' => $this->fax,
'nami_id' => $this->nami_id,
'country_id' => $this->country_id,
'region_id' => $this->region_id,
'nationality_id' => $this->nationality_id,
@ -43,6 +42,7 @@ class MemberResource extends JsonResource
'letter_address' => $this->letter_address,
'bill_kind_id' => $this->bill_kind_id,
'bill_kind_name' => optional($this->billKind)->name,
'has_nami' => $this->nami_id !== null,
];
}
}

1
resources/css/app.css vendored
View File

@ -2,3 +2,4 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "base";
@import "switch";

18
resources/css/base.css vendored
View File

@ -84,3 +84,21 @@
input, select {
outline: none;
}
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
select,
input[type="week"] {
height: 37px;
&::-webkit-inner-spin-button {
display: none;
}
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}

112
resources/css/switch.css vendored Normal file
View File

@ -0,0 +1,112 @@
:root {
--margin: 0.2rem;
--n-width: 37px;
--sm-width: 35px;
--sm-margin: 0.2rem;
--xs-width: 23px;
--xs-margin: 0.2rem;
}
.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));
}
}
}
}

2
resources/js/app.js vendored
View File

@ -6,6 +6,7 @@ window.io = require('socket.io-client');
import Sprite from './components/Sprite.js';
import FText from './components/FText.vue';
import FSwitch from './components/FSwitch.vue';
import FSelect from './components/FSelect.vue';
import FTextarea from './components/FTextarea.vue';
import Pages from './components/Pages.vue';
@ -14,6 +15,7 @@ import App from './layouts/App.vue';
Vue.use(plugin)
Vue.component('f-text', FText);
Vue.component('f-switch', FSwitch);
Vue.component('f-select', FSelect);
Vue.component('f-textarea', FTextarea);
Vue.component('sprite', Sprite);

6
resources/js/components/FSelect.vue
View File

@ -1,7 +1,7 @@
<template>
<label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
<div class="relative h-full flex flex-col">
<span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
<span v-if="label && !inset" class="leading-none font-semibold relative z-10 text-gray-400" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
@ -9,9 +9,9 @@
'text-xs': size == 'sm',
'text-sm': size === null
}" v-text="label"></span>
<div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
<div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
<select :value="value" @change="trigger"
class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none"
:class="{
'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'

131
resources/js/components/FSwitch.vue
View File

@ -1,19 +1,15 @@
<template>
<label class="flex flex-col relative field-switch cursor-pointer" :for="id" :class="{[`size-${outerSize}`]: true}">
<span v-if="label && !inset" class="font-semibold leading-none text-gray-700" :class="{
<span v-if="label" class="font-semibold leading-none text-gray-400" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}</span>
<span v-if="label && inset" class="z-10 absolute top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}</span>
<div class="relative inner-field" :class="`h-field-${fieldSize}`">
<div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
<input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
<span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-400': v === false}">
<span><sprite class="relative text-white flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-6 h-6': size === null}" src="check"></sprite></span>
<span><sprite class="relative text-white flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-6 h-6': size === null}" src="close"></sprite></span>
<var class="absolute overlay bg-white rounded top-0"></var>
<span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-700': v === false}">
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
<var class="absolute overlay bg-gray-400 rounded top-0"></var>
</span>
</div>
</label>
@ -102,118 +98,3 @@ export default {
}
};
</script>
<style lang="css">
:root {
--margin: 0.2rem;
--n-width: 2.5rem;
--sm-width: 35px;
--sm-margin: 0.2rem;
--xs-width: 23px;
--xs-margin: 0.2rem;
}
.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));
}
}
}
}
</style>

4
resources/js/components/FText.vue
View File

@ -1,7 +1,7 @@
<template>
<label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
<div class="relative h-full flex flex-col">
<span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
<span v-if="label && !inset" class="font-semibold leading-none relative z-10 text-gray-400" :class="{
'text-xs': size == 'sm',
'text-sm': size === null
}">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
@ -9,7 +9,7 @@
'text-xs': size == 'sm',
'text-sm': size === null
}" v-text="label"></span>
<div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
<div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
<input :type="type" :name="name" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder"
@focus="onFocus" @blur="onBlur"
class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"

3
resources/js/views/member/Edit.vue
View File

@ -75,6 +75,9 @@
<div>
<f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit"></f-text>
</div>
<div>
<f-switch id="has_nami" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
</div>
<div>
<f-text type="date" id="joined_at" v-model="inner.joined_at" label="Eintrittsdatum"></f-text>
</div>

2
resources/js/views/member/Index.vue
View File

@ -24,7 +24,7 @@
<v-bool v-model="member.send_newspaper"></v-bool>
</div>
<div class="py-1 px-6">
<v-bool v-model="member.nami_id !== null"></v-bool>
<v-bool v-model="member.has_nami"></v-bool>
</div>
<div class="py-1 px-6">
<div class="py-1 rounded-full flex text-xs items-center justify-center leading-none bg-primary-900" v-text="member.bill_kind_name" v-if="member.bill_kind_name"></div>

2
webpack.mix.js vendored
View File

@ -18,8 +18,8 @@ mix.js('resources/js/app.js', 'public/js')
.vue({ version: 2 })
.postCss('resources/css/app.css', 'public/css', [
atImport(),
tailwindcss('./tailwind.config.js'),
nested(),
tailwindcss('./tailwind.config.js'),
])
.copy('resources/img', 'public/img')
.sourceMaps();