300 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			300 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
|     <form class="flex grow relative" @submit.prevent="submit">
 | |
|         <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
 | |
|             <div>
 | |
|                 <p class="mt-4">
 | |
|                     Dieses Mitglied wurde vorher bereits aktualisiert. Daher könnte ein Update zu Datenverlust führen.
 | |
|                 </p>
 | |
|                 <p class="mt-2">
 | |
|                     Wir empfehlen, die Daten aus NaMi zunächst neu zu synchronisieren und dann die Änderungen hier in
 | |
|                     der Adrema erneut vorzunehmen.
 | |
|                 </p>
 | |
|                 <div class="grid grid-cols-2 gap-3 mt-6">
 | |
|                     <a href="#" @click.prevent="resync" class="text-center btn btn-primary">Neu synchronisieren</a>
 | |
|                     <a href="#" @click.prevent="forceWrite" class="text-center btn btn-danger">Änderungen schreiben</a>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </popup>
 | |
| 
 | |
|         <!-- ****************************** menu links ******************************* -->
 | |
|         <v-tabs v-model="active" :entries="menu">
 | |
|             <div slot="bottom">
 | |
|                 <button
 | |
|                     type="button"
 | |
|                     v-show="mode !== 'create'"
 | |
|                     @click.prevent="confirm"
 | |
|                     class="btn block w-full btn-primary"
 | |
|                 >
 | |
|                     Daten bestätigen
 | |
|                 </button>
 | |
|                 <button type="submit" class="mt-3 btn block w-full btn-primary">Speichern</button>
 | |
|             </div>
 | |
|         </v-tabs>
 | |
| 
 | |
|         <!-- ***************************** Hauptbereich ****************************** -->
 | |
|         <div class="grow">
 | |
|             <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Stammdaten'">
 | |
|                 <f-select
 | |
|                     id="gender_id"
 | |
|                     name="gender_id"
 | |
|                     :options="genders"
 | |
|                     v-model="inner.gender_id"
 | |
|                     label="Geschlecht"
 | |
|                 ></f-select>
 | |
|                 <f-text id="firstname" v-model="inner.firstname" label="Vorname" required></f-text>
 | |
|                 <f-text id="lastname" v-model="inner.lastname" label="Nachname" required></f-text>
 | |
|                 <f-text id="address" v-model="inner.address" label="Adresse" required></f-text>
 | |
|                 <f-text id="further_address" v-model="inner.further_address" label="Adresszusatz"></f-text>
 | |
|                 <f-text id="zip" v-model="inner.zip" label="PLZ" required></f-text>
 | |
|                 <f-text id="location" v-model="inner.location" label="Ort" required></f-text>
 | |
|                 <f-text type="date" id="birthday" v-model="inner.birthday" label="Geburtsdatum" required></f-text>
 | |
|                 <f-select
 | |
|                     :options="regions"
 | |
|                     name="region_id"
 | |
|                     id="region_id"
 | |
|                     v-model="inner.region_id"
 | |
|                     label="Bundesland"
 | |
|                 ></f-select>
 | |
|                 <f-select
 | |
|                     :options="countries"
 | |
|                     id="country_id"
 | |
|                     v-model="inner.country_id"
 | |
|                     label="Land"
 | |
|                     name="country_id"
 | |
|                     required
 | |
|                 ></f-select>
 | |
|                 <f-select
 | |
|                     :options="nationalities"
 | |
|                     id="nationality_id"
 | |
|                     v-model="inner.nationality_id"
 | |
|                     label="Staatsangehörigkeit"
 | |
|                     name="nationality_id"
 | |
|                     required
 | |
|                 ></f-select>
 | |
|                 <f-text
 | |
|                     class="col-span-2"
 | |
|                     id="other_country"
 | |
|                     v-model="inner.other_country"
 | |
|                     label="Andere Staatsangehörigkeit"
 | |
|                 ></f-text>
 | |
| 
 | |
|                 <div class="contents">
 | |
|                     <h2 class="col-span-full font-semibold text-lg text-white">Erste Gruppierung</h2>
 | |
|                     <f-select
 | |
|                         :options="activities"
 | |
|                         id="first_activity_id"
 | |
|                         v-model="inner.first_activity_id"
 | |
|                         label="Erste Tätigkeit"
 | |
|                         name="first_activity_id"
 | |
|                         required
 | |
|                     ></f-select>
 | |
|                     <f-select
 | |
|                         v-if="inner.first_activity_id"
 | |
|                         :options="subactivities[inner.first_activity_id]"
 | |
|                         id="first_subactivity_id"
 | |
|                         v-model="inner.first_subactivity_id"
 | |
|                         label="Erste Untertätigkeit"
 | |
|                         name="first_subactivity_id"
 | |
|                         required
 | |
|                     ></f-select>
 | |
|                 </div>
 | |
|             </div>
 | |
|             <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Kontakt'">
 | |
|                 <f-text id="main_phone" v-model="inner.main_phone" label="Telefon (Eltern)"></f-text>
 | |
|                 <f-text id="mobile_phone" v-model="inner.mobile_phone" label="Handy (Eltern)"></f-text>
 | |
|                 <f-text id="work_phone" v-model="inner.work_phone" label="Tel geschäftlich (Eltern)"></f-text>
 | |
|                 <f-text id="children_phone" v-model="inner.children_phone" label="Telefon (Kind)"></f-text>
 | |
|                 <f-text id="email" v-model="inner.email" label="E-Mail"></f-text>
 | |
|                 <f-text id="email_parents" v-model="inner.email_parents" label="E-Mail eltern"></f-text>
 | |
|                 <f-text id="fax" v-model="inner.fax" label="Fax"></f-text>
 | |
|             </div>
 | |
|             <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'System'">
 | |
|                 <f-select
 | |
|                     :options="billKinds"
 | |
|                     id="bill_kind_id"
 | |
|                     v-model="inner.bill_kind_id"
 | |
|                     label="Rechnung versenden über"
 | |
|                     name="bill_kind_id"
 | |
|                 ></f-select>
 | |
|             </div>
 | |
|             <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Prävention'">
 | |
|                 <div class="grid grid-cols-[max-content_1fr] col-span-2 gap-3">
 | |
|                     <f-switch id="has_efz" v-model="hasEfz" label="Führungszeugnis eingesehen"></f-switch>
 | |
|                     <div>
 | |
|                         <f-text
 | |
|                             v-if="inner.efz !== null"
 | |
|                             type="date"
 | |
|                             id="efz"
 | |
|                             v-model="inner.efz"
 | |
|                             label="Führungszeugnis eingesehen am"
 | |
|                         ></f-text>
 | |
|                     </div>
 | |
|                     <f-switch id="has_ps" v-model="hasPs" label="Hat Präventionsschulung"></f-switch>
 | |
|                     <div>
 | |
|                         <f-text
 | |
|                             v-if="inner.ps_at !== null"
 | |
|                             type="date"
 | |
|                             id="ps_at"
 | |
|                             v-model="inner.ps_at"
 | |
|                             label="Präventionsschulung am"
 | |
|                         ></f-text>
 | |
|                     </div>
 | |
|                     <f-switch id="has_more_ps" v-model="hasMorePs" label="Hat Vertierungsschulung"></f-switch>
 | |
|                     <div>
 | |
|                         <f-text
 | |
|                             v-if="inner.more_ps_at !== null"
 | |
|                             type="date"
 | |
|                             id="more_ps_at"
 | |
|                             v-model="inner.more_ps_at"
 | |
|                             label="Vertiefungsschulung am"
 | |
|                         ></f-text>
 | |
|                     </div>
 | |
|                     <f-switch
 | |
|                         id="has_without_education"
 | |
|                         v-model="hasWithoutEducation"
 | |
|                         label="Einsatz ohne Schulung"
 | |
|                     ></f-switch>
 | |
|                     <div>
 | |
|                         <f-text
 | |
|                             v-if="inner.without_education_at !== null"
 | |
|                             type="date"
 | |
|                             id="without_education_at"
 | |
|                             v-model="inner.without_education_at"
 | |
|                             label="Einsatz ohne Schulung am"
 | |
|                         ></f-text>
 | |
|                     </div>
 | |
|                     <f-switch id="has_without_efz" v-model="hasWithoutEfz" label="Einsatz ohne EFZ"></f-switch>
 | |
|                     <div>
 | |
|                         <f-text
 | |
|                             v-if="inner.without_efz_at !== null"
 | |
|                             type="date"
 | |
|                             id="without_efz_at"
 | |
|                             v-model="inner.without_efz_at"
 | |
|                             label="Einsatz ohne EFZ am"
 | |
|                         ></f-text>
 | |
|                     </div>
 | |
|                 </div>
 | |
|                 <div class="flex col-span-full space-x-3">
 | |
|                     <f-switch id="has_svk" v-model="inner.has_svk" label="SVK unterschrieben"></f-switch>
 | |
|                     <f-switch id="has_vk" v-model="inner.has_vk" label="Verhaltenskodex unterschrieben"></f-switch>
 | |
|                     <f-switch
 | |
|                         id="multiply_pv"
 | |
|                         v-model="inner.multiply_pv"
 | |
|                         label="Multiplikator*in Präventionsschulung"
 | |
|                     ></f-switch>
 | |
|                     <f-switch
 | |
|                         id="multiply_more_pv"
 | |
|                         v-model="inner.multiply_more_pv"
 | |
|                         label="Multiplikator*in Vertierungsschulung"
 | |
|                     ></f-switch>
 | |
|                 </div>
 | |
|             </div>
 | |
|             <div class="grid grid-cols-4 gap-3 p-4" v-show="menuTitle == 'Verwaltung'">
 | |
|                 <f-switch id="has_nami" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
 | |
|                 <f-switch id="send_newspaper" v-model="inner.send_newspaper" label="Mittendrin versenden"></f-switch>
 | |
|                 <f-text
 | |
|                     class="col-span-2"
 | |
|                     type="date"
 | |
|                     id="joined_at"
 | |
|                     v-model="inner.joined_at"
 | |
|                     label="Eintrittsdatum"
 | |
|                 ></f-text>
 | |
|                 <f-select
 | |
|                     class="col-span-2"
 | |
|                     :options="subscriptions"
 | |
|                     id="subscription_id"
 | |
|                     v-model="inner.subscription_id"
 | |
|                     label="Beitrag"
 | |
|                     name="subscription_id"
 | |
|                 ></f-select>
 | |
|                 <f-textarea
 | |
|                     class="col-span-2"
 | |
|                     rows="4"
 | |
|                     id="letter_address"
 | |
|                     v-model="inner.letter_address"
 | |
|                     label="Brief-Adresse"
 | |
|                 ></f-textarea>
 | |
|             </div>
 | |
|         </div>
 | |
|     </form>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| function issetComputed(val) {
 | |
|     return {
 | |
|         set(v) {
 | |
|             this.inner[val] = v ? '' : null;
 | |
|         },
 | |
|         get() {
 | |
|             return this.inner[val] !== null;
 | |
|         },
 | |
|     };
 | |
| }
 | |
| 
 | |
| export default {
 | |
|     data: function () {
 | |
|         return {
 | |
|             inner: {},
 | |
|             active: 0,
 | |
|             menu: [
 | |
|                 {id: 'stammdaten', title: 'Stammdaten'},
 | |
|                 {id: 'kontakt', title: 'Kontakt'},
 | |
|                 {id: 'praevention', title: 'Prävention'},
 | |
|                 {id: 'system', title: 'System'},
 | |
|                 {id: 'verwaltung', title: 'Verwaltung'},
 | |
|             ],
 | |
|         };
 | |
|     },
 | |
| 
 | |
|     props: {
 | |
|         subactivities: {},
 | |
|         activities: {},
 | |
|         mode: {},
 | |
|         genders: {},
 | |
|         subscriptions: {},
 | |
|         data: {},
 | |
|         regions: {},
 | |
|         countries: {},
 | |
|         nationalities: {},
 | |
|         confessions: {},
 | |
|         billKinds: {},
 | |
|         conflict: {},
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|         confirm() {
 | |
|             this.$inertia.post(`/member/${this.inner.id}/confirm`);
 | |
|         },
 | |
|         submit() {
 | |
|             this.mode === 'create'
 | |
|                 ? this.$inertia.post(`/member`, this.inner)
 | |
|                 : this.$inertia.patch(`/member/${this.inner.id}`, this.inner);
 | |
|         },
 | |
|         resync() {
 | |
|             this.$inertia.get(`/member/${this.inner.id}/resync`);
 | |
|         },
 | |
|         forceWrite() {},
 | |
|     },
 | |
| 
 | |
|     components: {
 | |
|         'popup': () => import('../../components/Popup.vue'),
 | |
|         'v-tabs': () => import('../../components/VTabs.vue'),
 | |
|     },
 | |
| 
 | |
|     computed: {
 | |
|         menuTitle() {
 | |
|             return this.menu[this.active].title;
 | |
|         },
 | |
|         hasEfz: issetComputed('efz'),
 | |
|         hasPs: issetComputed('ps_at'),
 | |
|         hasMorePs: issetComputed('more_ps_at'),
 | |
|         hasWithoutEfz: issetComputed('without_efz_at'),
 | |
|         hasWithoutEducation: issetComputed('without_education_at'),
 | |
|     },
 | |
| 
 | |
|     created() {
 | |
|         this.inner = this.data;
 | |
|     },
 | |
| };
 | |
| </script>
 |