Add group internal name and layer

app/Group.php

@@ -7,6 +7,7 @@ use App\Nami\HasNamiField;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class Group extends Model
 {
@@ -28,6 +29,14 @@ class Group extends Model
         return $this->belongsTo(static::class, 'parent_id');
     }
 
+    /**
+     * @return HasMany<self>
+     */
+    public function children(): HasMany
+    {
+        return $this->hasMany(static::class, 'parent_id');
+    }
+
     public static function booted(): void
     {
         static::creating(function (self $group) {

app/Group/Actions/GroupApiIndexAction.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Group\Actions;
+
+use App\Group;
+use App\Group\Resources\GroupResource;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Inertia\Inertia;
+use Inertia\Response;
+use Lorisleiva\Actions\Concerns\AsAction;
+
+class GroupApiIndexAction
+{
+    use AsAction;
+
+    /**
+     * @return Collection<int, Group>
+     */
+    public function handle(): Collection
+    {
+        return Group::get();
+    }
+
+    public function asController(?Group $group = null): AnonymousResourceCollection
+    {
+        return GroupResource::collection($group ? $group->children()->withCount('children')->get() : Group::where('parent_id', null)->withCount('children')->get());
+    }
+}

app/Group/Actions/GroupIndexAction.php

@@ -23,8 +23,11 @@ class GroupIndexAction
 
     public function asController(): Response
     {
+        session()->put('menu', 'group');
+        session()->put('title', 'Gruppierungen');
+
         return Inertia::render('group/Index', [
-            'data' => GroupResource::collection($this->handle()),
+            'data' => GroupResource::collection(Group::where('parent_id', null)->withCount('children')->get()),
         ]);
     }
 }

app/Group/Resources/GroupResource.php

@@ -3,6 +3,7 @@
 namespace App\Group\Resources;
 
 use App\Group;
+use App\Group\Enums\Level;
 use App\Lib\HasMeta;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -28,6 +29,10 @@ class GroupResource extends JsonResource
             'parent_id' => $this->parent_id,
             'id' => $this->id,
             'level' => $this->level?->value,
+            'children_count' => $this->children_count,
+            'links' => [
+                'children' => route('api.group', ['group' => $this->id]),
+            ]
         ];
     }
 
@@ -39,7 +44,9 @@ class GroupResource extends JsonResource
         return [
             'links' => [
                 'bulkstore' => route('group.bulkstore'),
-            ]
+                'root_path' => route('api.group'),
+            ],
+            'levels' => Level::forSelect(),
         ];
     }
 }

app/Membership/Actions/MassListAction.php

@@ -18,7 +18,7 @@ class MassListAction
         session()->put('title', 'Mitgliedschaften zuweisen');
         $activities = Activity::with('subactivities')->get();
 
-        return Inertia::render('group/Index', [
+        return Inertia::render('activity/Masslist', [
             'activities' => $activities->pluck('name', 'id'),
             'subactivities' => $activities->mapWithKeys(fn (Activity $activity) => [$activity->id => $activity->subactivities()->pluck('name', 'id')]),
             'groups' => Group::pluck('name', 'id'),

resources/js/components/form/Text.vue

@@ -5,18 +5,8 @@
             <span v-show="required" class="text-red-800">&nbsp;*</span>
         </span>
         <div class="real-field-wrap size-sm" :class="sizes[size].field">
-            <input
+            <input :name="name" :type="type" :value="transformedValue" :disabled="disabled" :placeholder="placeholder"
-                @keypress="$emit('keypress', $event)"
+                @keypress="$emit('keypress', $event)" @input="onInput" @change="onChange" @focus="onFocus" @blur="onBlur" />
-                :name="name"
-                :type="type"
-                :value="transformedValue"
-                @input="onInput"
-                @change="onChange"
-                :disabled="disabled"
-                :placeholder="placeholder"
-                @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>
@@ -242,25 +232,6 @@ var transformers = {
 };
 
 export default {
-    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',
-                },
-            },
-        };
-    },
     props: {
         placeholder: {
             default: function () {
@@ -312,23 +283,24 @@ export default {
         },
         name: {},
     },
-    methods: {
+    data: function () {
-        onFocus() {
+        return {
-            this.focus = true;
+            focus: false,
+            sizes: {
+                sm: {
+                    wrap: 'field-wrap-sm',
+                    field: 'size-sm',
                 },
-        onBlur() {
+                base: {
-            this.focus = false;
+                    wrap: 'field-wrap-base',
+                    field: 'size-base',
                 },
-        onChange(v) {
+                lg: {
-            if (this.mode !== 'none') {
+                    wrap: 'field-wrap-lg',
-                this.transformedValue = v.target.value;
+                    field: 'size-lg',
-            }
                 },
-        onInput(v) {
-            if (this.mode === 'none') {
-                this.transformedValue = v.target.value;
-            }
             },
+        };
     },
     computed: {
         transformedValue: {
@@ -355,6 +327,25 @@ export default {
             this.$emit('input', 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) {
+            console.log(this.modelModifiers);
+            if (this.mode === 'none') {
+                this.transformedValue = v.target.value;
+            }
+        },
+    },
 };
 </script>
 

resources/js/views/activity/Masslist.vue

@@ -0,0 +1,94 @@
+<template>
+    <page-layout>
+        <template #right>
+            <f-save-button form="actionform"></f-save-button>
+        </template>
+        <form id="actionform" class="grow p-3" @submit.prevent="submit">
+            <div class="flex space-x-3">
+                <f-select :model-value="meta.activity_id" :options="props.activities" label="Tätigkeit" size="sm" name="activity_id" @update:model-value="setActivityId"></f-select>
+                <f-select
+                    :model-value="meta.subactivity_id"
+                    :options="props.subactivities[meta.activity_id]"
+                    name="subactivity_id"
+                    label="Untertätigkeit"
+                    size="sm"
+                    @update:model-value="reload('subactivity_id', $event)"
+                ></f-select>
+                <f-select :model-value="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id" @update:model-value="reload('group_id', $event)"></f-select>
+            </div>
+            <div class="grid gap-2 grid-cols-6 mt-4">
+                <f-switch v-for="member in members.data" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>
+            </div>
+            <div v-if="members.meta.last_page" class="px-6">
+                <ui-pagination class="mt-4" :value="members.meta" :only="['data']" @reload="reloadReal($event, false)"></ui-pagination>
+            </div>
+        </form>
+    </page-layout>
+</template>
+
+<script lang="js" setup>
+import { onBeforeUnmount, ref, defineProps, reactive, inject } from 'vue';
+import useQueueEvents from '../../composables/useQueueEvents.js';
+const { startListener, stopListener } = useQueueEvents('group', () => null);
+const axios = inject('axios');
+
+startListener();
+onBeforeUnmount(() => stopListener());
+
+const meta = reactive({
+    activity_id: null,
+    subactivity_id: null,
+    group_id: null,
+});
+
+const props = defineProps({
+    activities: {
+        type: Object,
+        default: () => { },
+    },
+    subactivities: {
+        type: Object,
+        default: () => { },
+    },
+    groups: {
+        type: Object,
+        default: () => { },
+    },
+});
+
+const members = ref({ meta: {}, data: [] });
+const selected = ref([]);
+
+async function reload(key, v) {
+    meta[key] = v;
+
+    reloadReal(1, true);
+}
+
+async function reloadReal(page, update) {
+    if (meta.activity_id && meta.subactivity_id && meta.group_id) {
+        const memberResponse = await axios.post('/api/member/search', {
+            page: page,
+            per_page: 80,
+        });
+        members.value = memberResponse.data;
+
+        if (update) {
+            const membershipResponse = await axios.post('/api/membership/member-list', meta);
+            selected.value = membershipResponse.data;
+        }
+    }
+}
+
+async function setActivityId(id) {
+    meta.subactivity_id = null;
+    await reload('activity_id', id);
+}
+
+async function submit() {
+    await axios.post('/api/membership/masslist', {
+        ...meta,
+        members: selected.value,
+    });
+}
+</script>

resources/js/views/group/Index.vue

@@ -1,94 +1,159 @@
 <template>
     <page-layout>
         <template #right>
-            <f-save-button form="actionform"></f-save-button>
+            <f-save-button form="groupform"></f-save-button>
         </template>
-        <form id="actionform" class="grow p-3" @submit.prevent="submit">
+        <ui-popup v-if="editing !== null" heading="Untergruppen bearbeiten" inner-width="max-w-5xl" @close="editing = null">
             <div class="flex space-x-3">
-                <f-select :model-value="meta.activity_id" :options="props.activities" label="Tätigkeit" size="sm" name="activity_id" @update:model-value="setActivityId"></f-select>
+                <f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name" name="parent-inner_name"></f-text>
-                <f-select
+                <f-select id="parent-level" v-model="editing.parent.level" label="Ebene" name="parent-level" :options="meta.levels"></f-select>
-                    :model-value="meta.subactivity_id"
-                    :options="props.subactivities[meta.activity_id]"
-                    name="subactivity_id"
-                    label="Untertätigkeit"
-                    size="sm"
-                    @update:model-value="reload('subactivity_id', $event)"
-                ></f-select>
-                <f-select :model-value="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id" @update:model-value="reload('group_id', $event)"></f-select>
             </div>
-            <div class="grid gap-2 grid-cols-6 mt-4">
+            <div>
-                <f-switch v-for="member in members.data" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>
+                <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm table">
+                    <thead>
+                        <th>NaMi-Name</th>
+                        <th>Interner Name</th>
+                        <th>Ebene</th>
+                    </thead>
+                    <tr v-for="child in editing.children" :key="child.id">
+                        <td>
+                            <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>
+                        </td>
+                        <td>
+                            <f-select :id="`level-${child.id}`" v-model="child.level" label="" size="sm" :name="`level-${child.id}`" :options="meta.levels"></f-select>
+                        </td>
+                    </tr>
+                </table>
+                <ui-button class="btn-primary" @click.prevent="store">Speichern</ui-button>
             </div>
-            <div v-if="members.meta.last_page" class="px-6">
+        </ui-popup>
-                <ui-pagination class="mt-4" :value="members.meta" :only="['data']" @reload="reloadReal($event, false)"></ui-pagination>
+        <form id="groupform" class="grow p-3" @submit.prevent="submit">
+            <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm table">
+                <thead>
+                    <th>NaMi-Name</th>
+                    <th>Interner Name</th>
+                    <th>Ebene</th>
+                    <th></th>
+                </thead>
+
+                <template v-for="child in childrenOf('null')" :key="child.id">
+                    <tr>
+                        <td>
+                            <div class="flex space-x-2">
+                                <a v-if="!isOpen(child.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="open(child)"><ui-sprite src="plus"></ui-sprite></a>
+                                <a v-if="isOpen(child.id)" v-tooltip="`Schließen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="close(child)"
+                                    ><ui-sprite src="close"></ui-sprite
+                                ></a>
+                                <span v-text="child.name"></span>
                             </div>
+                        </td>
+                        <td v-text="child.inner_name"></td>
+                        <td v-text="child.level"></td>
+                        <td>
+                            <a v-if="child.children_count" v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(child)"
+                                ><ui-sprite src="pencil"></ui-sprite
+                            ></a>
+                        </td>
+                    </tr>
+                    <template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
+                        <tr>
+                            <div class="pl-12 flex space-x-2">
+                                <a v-if="subchild.children_count !== 0 && !isOpen(subchild.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="open(subchild)"
+                                    ><ui-sprite src="plus"></ui-sprite
+                                ></a>
+                                <a v-if="subchild.children_count !== 0 && isOpen(subchild.id)" v-tooltip="`Schließen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="close(subchild)"
+                                    ><ui-sprite src="close"></ui-sprite
+                                ></a>
+                                <span v-text="subchild.name"></span>
+                            </div>
+                            <td v-text="subchild.inner_name"></td>
+                            <td v-text="subchild.level"></td>
+                            <td>
+                                <a v-if="subchild.children_count" v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(subchild)"
+                                    ><ui-sprite src="pencil"></ui-sprite
+                                ></a>
+                            </td>
+                        </tr>
+                        <template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
+                            <tr>
+                                <div class="pl-24 flex space-x-2">
+                                    <a
+                                        v-if="subsubchild.children_count !== 0 && !isOpen(subsubchild.id)"
+                                        v-tooltip="`Öffnen`"
+                                        href="#"
+                                        class="inline-flex btn btn-info btn-sm"
+                                        @click.prevent="open(subsubchild)"
+                                        ><ui-sprite src="plus"></ui-sprite
+                                    ></a>
+                                    <a
+                                        v-if="subsubchild.children_count !== 0 && isOpen(subsubchild.id)"
+                                        v-tooltip="`Schließen`"
+                                        href="#"
+                                        class="inline-flex btn btn-info btn-sm"
+                                        @click.prevent="close(subsubchild)"
+                                        ><ui-sprite src="close"></ui-sprite
+                                    ></a>
+                                    <span v-text="subsubchild.name"></span>
+                                </div>
+                                <td v-text="subchild.inner_name"></td>
+                                <td v-text="subchild.level"></td>
+                                <td>
+                                    <a v-if="subsubchild.children_count" v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(subsubchild)"
+                                        ><ui-sprite src="pencil"></ui-sprite
+                                    ></a>
+                                </td>
+                            </tr>
+                        </template>
+                    </template>
+                </template>
+            </table>
         </form>
     </page-layout>
 </template>
 
-<script lang="js" setup>
+<script setup>
-import { onBeforeUnmount, ref, defineProps, reactive, inject } from 'vue';
+import {computed, ref, reactive} from 'vue';
-import useQueueEvents from '../../composables/useQueueEvents.js';
+import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
-const { startListener, stopListener } = useQueueEvents('group', () => null);
+const props = defineProps(indexProps);
-const axios = inject('axios');
+var {axios, meta, data} = useIndex(props.data, 'invoice');
 
-startListener();
+const children = reactive({
-onBeforeUnmount(() => stopListener());
+    null: data.value,
-
-const meta = reactive({
-    activity_id: null,
-    subactivity_id: null,
-    group_id: null,
 });
 
-const props = defineProps({
+var editing = ref(null);
-    activities: {
-        type: Object,
-        default: () => { },
-    },
-    subactivities: {
-        type: Object,
-        default: () => { },
-    },
-    groups: {
-        type: Object,
-        default: () => { },
-    },
-});
 
-const members = ref({ meta: {}, data: [] });
+async function open(parent) {
-const selected = ref([]);
+    const result = (await axios.get(parent.links.children)).data;
 
-async function reload(key, v) {
+    children[parent.id] = result.data;
-    meta[key] = v;
-
-    reloadReal(1, true);
 }
 
-async function reloadReal(page, update) {
+async function edit(parent) {
-    if (meta.activity_id && meta.subactivity_id && meta.group_id) {
+    editing.value = {
-        const memberResponse = await axios.post('/api/member/search', {
+        parent: parent,
-            page: page,
+        children: (await axios.get(parent.links.children)).data.data,
-            per_page: 80,
+    };
-        });
-        members.value = memberResponse.data;
-
-        if (update) {
-            const membershipResponse = await axios.post('/api/membership/member-list', meta);
-            selected.value = membershipResponse.data;
-        }
-    }
 }
 
-async function setActivityId(id) {
+function close(parent) {
-    meta.subactivity_id = null;
+    delete children[parent.id];
-    await reload('activity_id', id);
 }
 
-async function submit() {
+function isOpen(child) {
-    await axios.post('/api/membership/masslist', {
+    return child in children;
-        ...meta,
+}
-        members: selected.value,
+
-    });
+function childrenOf(parent) {
+    return children[parent] ? children[parent] : [];
+}
+
+async function store() {
+    await axios.post(meta.value.links.bulkstore, [editing.value.parent, ...editing.value.children]);
+    children[editing.value.parent.id] = (await axios.get(editing.value.parent.links.children)).data.data;
+    editing.value = null;
 }
 </script>

routes/web.php

@@ -19,6 +19,7 @@ use App\Invoice\Actions\InvoiceStoreAction;
 use App\Course\Actions\CourseUpdateAction;
 use App\Dashboard\Actions\IndexAction as DashboardIndexAction;
 use App\Efz\ShowEfzDocumentAction;
+use App\Group\Actions\GroupApiIndexAction;
 use App\Group\Actions\GroupBulkstoreAction;
 use App\Group\Actions\GroupIndexAction;
 use App\Initialize\Actions\InitializeAction;
@@ -129,6 +130,7 @@ Route::group(['middleware' => 'auth:web'], function (): void {
 
     // ----------------------------------- group ----------------------------------
     Route::get('/group', GroupIndexAction::class)->name('group.index');
+    Route::get('/api/group/{group?}', GroupApiIndexAction::class)->name('api.group');
     Route::post('/group/bulkstore', GroupBulkstoreAction::class)->name('group.bulkstore');
 
     // ----------------------------------- course ----------------------------------

tests/Feature/Group/IndexTest.php

@@ -11,27 +11,55 @@ class IndexTest extends TestCase
 {
     use DatabaseTransactions;
 
-    public function testItDisplaysAllActivitiesAndSubactivities(): void
+    public function testItDisplaysGroupPage(): void
+    {
+        $this->login()->loginNami()->withoutExceptionHandling();
+
+        $this->get('/group')
+            ->assertOk()
+            ->assertInertiaPath('data.meta.links.root_path', route('api.group'));
+    }
+
+    public function testItDisplaysParentGroup(): void
+    {
+        $this->login()->loginNami()->withoutExceptionHandling();
+
+        $group = Group::factory()->create(['name' => 'Afff', 'inner_name' => 'Gruppe', 'level' => Level::REGION]);
+
+        $this->get('/api/group')
+            ->assertJsonCount(2, 'data')
+            ->assertJsonPath('data.1.name', 'Afff')
+            ->assertJsonPath('data.1.inner_name', 'Gruppe')
+            ->assertJsonPath('data.1.id', $group->id)
+            ->assertJsonPath('data.1.level', 'Bezirk')
+            ->assertJsonPath('data.1.parent_id', null)
+            ->assertJsonPath('meta.links.bulkstore', route('group.bulkstore'));
+    }
+
+    public function testItDisplaysGroupsForParent(): void
     {
         $this->login()->loginNami()->withoutExceptionHandling();
 
         $group = Group::factory()->for(Group::first(), 'parent')->create(['name' => 'Afff', 'inner_name' => 'Gruppe', 'level' => Level::REGION]);
+        Group::factory()->for(Group::first(), 'parent')->create(['name' => 'Afff', 'inner_name' => 'Gruppe', 'level' => Level::REGION]);
 
-        $this->get('/group')
+        $this->get('/api/group/' . Group::first()->id)
-            ->assertInertiaPath('data.data.1.name', 'Afff')
+            ->assertJsonCount(2, 'data')
-            ->assertInertiaPath('data.data.1.inner_name', 'Gruppe')
+            ->assertJsonPath('data.0.name', 'Afff')
-            ->assertInertiaPath('data.data.1.id', $group->id)
+            ->assertJsonPath('data.0.inner_name', 'Gruppe')
-            ->assertInertiaPath('data.data.1.level', 'Bezirk')
+            ->assertJsonPath('data.0.id', $group->id)
-            ->assertInertiaPath('data.data.1.parent_id', Group::first()->id)
+            ->assertJsonPath('data.0.level', 'Bezirk')
-            ->assertInertiaPath('data.meta.links.bulkstore', route('group.bulkstore'));
+            ->assertJsonPath('data.0.parent_id', Group::first()->id)
+            ->assertJsonPath('data.0.links.children', route('api.group', ['group' => $group->id]))
+            ->assertJsonPath('meta.links.bulkstore', route('group.bulkstore'));
     }
 
     public function testLevelCanBeNull(): void
     {
         $this->login()->loginNami()->withoutExceptionHandling();
 
-        Group::factory()->create(['level' => null]);
+        $group = Group::factory()->for(Group::first(), 'parent')->create(['level' => null]);
 
-        $this->get('/group')->assertInertiaPath('data.data.2.level', null);
+        $this->get('/api/group/' . Group::first()->id)->assertJsonPath('data.0.id', $group->id);
     }
 }