Only display promised_at when is_age_group

app/Membership/MembershipResource.php

@@ -52,7 +52,7 @@ class MembershipResource extends JsonResource
             ],
             'groups' => NestedGroup::cacheForSelect(),
             'activities' => $activities->map(fn ($activity) => ['id' => $activity->id, 'name' => $activity->name]),
-            'subactivities' => $activities->mapWithKeys(fn ($activity) => [$activity->id => $activity->subactivities->map(fn ($subactivity) => ['id' => $subactivity->id, 'name' => $subactivity->name])]),
+            'subactivities' => $activities->mapWithKeys(fn ($activity) => [$activity->id => $activity->subactivities->map(fn ($subactivity) => ['id' => $subactivity->id, 'name' => $subactivity->name, 'is_age_group' => $subactivity->is_age_group])]),
             'default' => [
                 'group_id' => $member->group_id,
                 'activity_id' => null,

package-lock.json

@@ -27,6 +27,7 @@
             "devDependencies": {
                 "autoprefixer": "^10.4.14",
                 "axios": "^1.4.0",
+                "dayjs": "^1.11.10",
                 "eslint": "^8.43.0",
                 "eslint-config-prettier": "^8.8.0",
                 "eslint-plugin-vue": "^8.7.1",
@@ -1545,6 +1546,12 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
             "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
+        "node_modules/dayjs": {
+            "version": "1.11.10",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+            "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
+            "dev": true
+        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5165,6 +5172,12 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
             "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
+        "dayjs": {
+            "version": "1.11.10",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+            "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
+            "dev": true
+        },
         "debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -14,6 +14,7 @@
     "devDependencies": {
         "autoprefixer": "^10.4.14",
         "axios": "^1.4.0",
+        "dayjs": "^1.11.10",
         "eslint": "^8.43.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-vue": "^8.7.1",

resources/js/views/member/MemberMemberships.vue

@@ -1,24 +1,25 @@
 <template>
     <page-header title="Mitgliedschaften" @close="$emit('close')">
         <template #toolbar>
-            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Mitgliedschaft</page-toolbar-button>
+            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue
-            <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="single = null">Zurück</page-toolbar-button>
+                Mitgliedschaft</page-toolbar-button>
+            <page-toolbar-button v-if="single !== null" color="primary" icon="undo"
+                @click.prevent="single = null">Zurück</page-toolbar-button>
         </template>
     </page-header>
 
     <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-        <f-select id="group_id" v-model="single.group_id" name="group_id" :options="meta.groups" label="Gruppierung" required></f-select>
+        <f-select id="group_id" v-model="single.group_id" name="group_id" :options="meta.groups" label="Gruppierung"
-        <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="meta.activities" label="Tätigkeit" required></f-select>
+            required></f-select>
-        <f-select
+        <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="meta.activities"
-            v-if="single.activity_id"
+            label="Tätigkeit" required></f-select>
-            id="subactivity_id"
+        <f-select v-if="single.activity_id" id="subactivity_id" :model-value="single.subactivity_id" name="subactivity_id"
-            v-model="single.subactivity_id"
+            :options="meta.subactivities[single.activity_id]" label="Untertätigkeit"
-            name="subactivity_id"
+            @update:modelValue="setSubactivityId(single, $event)"></f-select>
-            :options="meta.subactivities[single.activity_id]"
+        <f-switch v-if="displayPromisedAt" id="has_promise" :model-value="single.promised_at !== null"
-            label="Untertätigkeit"
+            label="Hat Versprechen" @update:modelValue="setPromisedAtSwitch(single, $event)"></f-switch>
-        ></f-select>
+        <f-text v-show="displayPromisedAt && single.promised_at !== null" id="promised_at" v-model="single.promised_at"
-        <f-switch id="has_promise" :model-value="single.promised_at !== null" label="Hat Versprechen" @update:modelValue="single.promised_at = $event ? '2000-02-02' : null"></f-switch>
+            type="date" label="Versprechensdatum" size="sm"></f-text>
-        <f-text v-show="single.promised_at !== null" id="promised_at" v-model="single.promised_at" type="date" label="Versprechensdatum" size="sm"></f-text>
         <button type="submit" class="btn btn-primary">Absenden</button>
     </form>
 
@@ -38,8 +39,10 @@
                 <td v-text="membership.human_date"></td>
                 <td><ui-boolean-display :value="membership.is_active" dark></ui-boolean-display></td>
                 <td class="flex space-x-1">
-                    <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite
-                    <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite src="trash"></ui-sprite></a>
+                            src="pencil"></ui-sprite></a>
+                    <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite
+                            src="trash"></ui-sprite></a>
                 </td>
             </tr>
         </table>
@@ -47,6 +50,9 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+
 defineEmits(['close']);
 import { useApiIndex } from '../../composables/useApiIndex.js';
 
@@ -58,5 +64,23 @@ const props = defineProps({
 });
 const { data, meta, reload, single, create, edit, submit, remove } = useApiIndex(props.url, 'membership');
 
+function setPromisedAtSwitch(single, value) {
+    single.promised_at = value ? dayjs().format('YYYY-MM-DD') : null;
+}
+
+const displayPromisedAt = computed(function () {
+    if (!single.value || !single.value.activity_id || !single.value.subactivity_id) {
+        return false;
+    }
+
+    return meta.value.subactivities[single.value.activity_id].find((s) => s.id === single.value.subactivity_id).is_age_group;
+});
+
+function setSubactivityId(single, value) {
+    single.subactivity_id = value;
+
+    return displayPromisedAt;
+}
+
 await reload();
 </script>

tests/Feature/Membership/IndexTest.php

@@ -41,6 +41,7 @@ class IndexTest extends TestCase
             ->assertJsonPath('meta.groups.0.id', $group->id)
             ->assertJsonPath('meta.activities.0.id', $membership->activity_id)
             ->assertJsonPath("meta.subactivities.{$membership->activity_id}.0.id", $membership->subactivity_id)
+            ->assertJsonPath("meta.subactivities.{$membership->activity_id}.0.is_age_group", true)
             ->assertJsonPath('meta.links.store', route('member.membership.store', ['member' => $member]));
     }