From 5f70bab3f0c0ebba281dd3e4f8e8b110404e5dd0 Mon Sep 17 00:00:00 2001
From: Nicolas Perrenoud <mail@nicu.ch>
Date: Fri, 17 Nov 2023 22:44:55 +0100
Subject: [PATCH] Added scaffold for edit page

---
 .../CommunityVolunteer.php                    |  3 +
 .../cmtyvol/CommunityVolunteersEditPage.vue   | 94 +++++++++++++++++++
 .../cmtyvol/CommunityVolunteersShowPage.vue   | 39 ++++----
 resources/js/router/cmtyvol.js                | 29 ++++++
 4 files changed, 144 insertions(+), 21 deletions(-)
 create mode 100644 resources/js/pages/cmtyvol/CommunityVolunteersEditPage.vue

diff --git a/app/Http/Resources/CommunityVolunteers/CommunityVolunteer.php b/app/Http/Resources/CommunityVolunteers/CommunityVolunteer.php
index d5d9010e8..1ded0262e 100644
--- a/app/Http/Resources/CommunityVolunteers/CommunityVolunteer.php
+++ b/app/Http/Resources/CommunityVolunteers/CommunityVolunteer.php
@@ -4,6 +4,7 @@
 
 use App\Models\CommunityVolunteers\Responsibility;
 use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Storage;
 
 /**
@@ -58,6 +59,8 @@ public function toArray($request): array
             'url' => $request->user()->can('view', $this->resource)
                 ? route('cmtyvol.show', $this)
                 : null,
+            'can_update' => $request->user()->can('update', $this->resource),
+            'can_delete' => $request->user()->can('delete', $this->resource),
         ];
     }
 }
diff --git a/resources/js/pages/cmtyvol/CommunityVolunteersEditPage.vue b/resources/js/pages/cmtyvol/CommunityVolunteersEditPage.vue
new file mode 100644
index 000000000..8992df93a
--- /dev/null
+++ b/resources/js/pages/cmtyvol/CommunityVolunteersEditPage.vue
@@ -0,0 +1,94 @@
+<template>
+    <b-container v-if="cmtyvol">
+        {{ cmtyvol }}
+        <!-- <WalletForm
+            :wallet="cmtyvol"
+            :title="$t('Edit community volunteer')"
+            :disabled="isBusy"
+            @submit="handleUpdate"
+            @cancel="handleCancel"
+            @delete="handleDelete"
+        /> -->
+        <p class="text-right">
+            <small>
+                {{ $t("Created") }}:
+                {{ cmtyvol.created_at | dateTimeFormat }} </small
+            ><br />
+            <small>
+                {{ $t("Last updated") }}:
+                {{ cmtyvol.updated_at | dateTimeFormat }}
+            </small>
+        </p>
+    </b-container>
+    <b-container v-else>
+        {{ $t("Loading...") }}
+    </b-container>
+</template>
+
+<script>
+import { showSnackbar } from "@/utils";
+import cmtyvolApi from '@/api/cmtyvol/cmtyvol'
+// import WalletForm from "@/components/accounting/WalletForm.vue";
+export default {
+    title() {
+        return this.$t("Edit community volunteer");
+    },
+    components: {
+        // WalletForm
+    },
+    props: {
+        id: {
+            required: true
+        }
+    },
+    data() {
+        return {
+            cmtyvol: null,
+            isBusy: false
+        };
+    },
+    watch: {
+        $route() {
+            this.fetchData();
+        }
+    },
+    async created() {
+        this.fetchData();
+    },
+    methods: {
+        async fetchData() {
+            try {
+                let data = await cmtyvolApi.find(this.id);
+                this.cmtyvol = data.data;
+            } catch (err) {
+                alert(err);
+            }
+        },
+        async handleUpdate(formData) {
+            this.isBusy = true;
+            try {
+                await cmtyvolApi.update(this.id, formData);
+                showSnackbar(this.$t("Community volunteer updated."));
+                this.$router.push({ name: "cmtyvol.overview" });
+            } catch (err) {
+                alert(err);
+            }
+            this.isBusy = false;
+        },
+        async handleDelete() {
+            this.isBusy = true;
+            try {
+                await cmtyvolApi.delete(this.id);
+                showSnackbar(this.$t("Community volunteer deleted."));
+                this.$router.push({ name: "cmtyvol.overview" });
+            } catch (err) {
+                alert(err);
+            }
+            this.isBusy = false;
+        },
+        handleCancel() {
+            this.$router.push({ name: "cmtyvol.overview" });
+        }
+    }
+};
+</script>
diff --git a/resources/js/pages/cmtyvol/CommunityVolunteersShowPage.vue b/resources/js/pages/cmtyvol/CommunityVolunteersShowPage.vue
index e7b930d78..c7365639f 100644
--- a/resources/js/pages/cmtyvol/CommunityVolunteersShowPage.vue
+++ b/resources/js/pages/cmtyvol/CommunityVolunteersShowPage.vue
@@ -65,6 +65,9 @@ import PhoneLink from "@/components/common/PhoneLink.vue";
 import EmailLink from "@/components/common/EmailLink.vue";
 import PageHeader from "@/components/layout/PageHeader.vue";
 export default {
+    title() {
+        return this.$t("Community Volunteer");
+    },
     components: {
         CmtyvolComments,
         EmailLink,
@@ -97,30 +100,24 @@ export default {
                     title: this.$t('Occupation'),
                 },
             ],
-            pageHeaderButtons: [
-                // {
-                //     to: {
-                //         name: "fundraising.donors.edit",
-                //         params: { id: this.id }
-                //     },
-                //     variant: "primary",
-                //     icon: "pencil-alt",
-                //     text: this.$t("Edit"),
-                //     show: this.can("manage-fundraising-entities")
-                // },
-                // {
-                //     href: this.route(
-                //         "cmtyvol.edit",
-                //         this.id
-                //     ),
-                //     icon: "pencil-alt",
-                //     text: this.$t("Edit"),
-                //     show: this.can("view-fundraising-entities")
-                // },
-            ],
         }
     },
     computed: {
+        pageHeaderButtons() {
+            console.log(this.cmtyvol.can_update)
+            return [
+                {
+                    to: {
+                        name: "cmtyvol.edit",
+                        params: { id: this.id }
+                    },
+                    variant: "primary",
+                    icon: "pencil-alt",
+                    text: this.$t("Edit"),
+                    show: this.cmtyvol.can_update
+                },
+            ]
+        },
         fields() {
             if (!this.cmtyvol) {
                 return []
diff --git a/resources/js/router/cmtyvol.js b/resources/js/router/cmtyvol.js
index 98cfb23cb..301090eb7 100644
--- a/resources/js/router/cmtyvol.js
+++ b/resources/js/router/cmtyvol.js
@@ -42,4 +42,33 @@ export default [
             }
         }
     },
+    {
+        path: "/cmtyvol/:id/edit",
+        name: "cmtyvol.edit",
+        components: {
+            default: () => import("@/pages/cmtyvol/CommunityVolunteersEditPage.vue"),
+            breadcrumbs: BreadcrumbsNav,
+        },
+        props: {
+            default: true,
+            breadcrumbs: route => ({
+                items: [
+                    {
+                        text: i18n.t('Community Volunteers'),
+                        to: { name: "cmtyvol.overview" }
+                    },
+                    {
+                        text: i18n.t('Community Volunteer'),
+                        to: {
+                            name: "cmtyvol.show",
+                            params: { id: route.params.id }
+                        },
+                    },
+                    {
+                        text: i18n.t('Edit community volunteer'),
+                    }
+                ]
+            })
+        }
+    },
 ];