feat: add vault edit and update functionality (#7523)

app/Domains/Vault/ManageVault/Web/Controllers/VaultController.php

@@ -6,7 +6,9 @@
 use App\Domains\Vault\ManageLifeMetrics\Web\ViewHelpers\VaultLifeMetricsViewHelper;
 use App\Domains\Vault\ManageVault\Services\CreateVault;
 use App\Domains\Vault\ManageVault\Services\DestroyVault;
+use App\Domains\Vault\ManageVault\Services\UpdateVault;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultCreateViewHelper;
+use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultEditViewHelper;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultIndexViewHelper;
 use App\Domains\Vault\ManageVault\Web\ViewHelpers\VaultShowViewHelper;
 use App\Http\Controllers\Controller;
@@ -86,6 +88,33 @@ public function show(Request $request, Vault $vault)
         ]);
     }
 
+    public function edit(Vault $vault)
+    {
+        return Inertia::render('Vault/Edit', [
+            'layoutData' => VaultIndexViewHelper::layoutData(),
+            'data' => VaultEditViewHelper::data($vault),
+        ]);
+    }
+
+    public function update(Request $request, Vault $vault)
+    {
+        $data = [
+            'account_id' => Auth::user()->account_id,
+            'author_id' => Auth::id(),
+            'vault_id' => $vault->id,
+            'name' => $request->input('name'),
+            'description' => $request->input('description'),
+        ];
+
+        (new UpdateVault)->execute($data);
+
+        return response()->json([
+            'data' => route('vault.show', [
+                'vault' => $vault,
+            ]),
+        ], 200);
+    }
+
     public function destroy(Request $request, Vault $vault)
     {
         $data = [

app/Domains/Vault/ManageVault/Web/ViewHelpers/VaultEditViewHelper.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Domains\Vault\ManageVault\Web\ViewHelpers;
+
+use App\Models\Vault;
+
+class VaultEditViewHelper
+{
+    public static function data(Vault $vault): array
+    {
+        return [
+            'id' => $vault->id,
+            'name' => $vault->name,
+            'description' => $vault->description,
+            'url' => [
+                'update' => route('vault.update', [
+                    'vault' => $vault,
+                ]),
+                'back' => route('vault.index'),
+            ],
+        ];
+    }
+}

app/Domains/Vault/ManageVault/Web/ViewHelpers/VaultIndexViewHelper.php

@@ -108,6 +108,9 @@ public static function data(User $user): array
                         'show' => route('vault.show', [
                             'vault' => $vault,
                         ]),
+                        'edit' => route('vault.edit', [
+                            'vault' => $vault,
+                        ]),
                         'settings' => route('vault.settings.index', [
                             'vault' => $vault->id,
                         ]),

resources/js/Pages/Vault/Edit.vue

@@ -0,0 +1,153 @@
+<template>
+  <layout :layout-data="layoutData">
+    <!-- breadcrumb -->
+    <nav class="bg-white dark:bg-gray-900 sm:border-b dark:sm:border-black">
+      <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
+        <div class="flex items-baseline justify-between space-x-6">
+          <ul class="text-sm">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
+              {{ $t('You are here:') }}
+            </li>
+            <li class="me-2 inline">
+              <InertiaLink :href="data.url.back" class="text-blue-500 hover:underline">
+                {{ $t('All the vaults') }}
+              </InertiaLink>
+            </li>
+            <li class="relative me-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3 dark:text-slate-200"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="inline dark:text-slate-200">
+              {{ $t('Edit a vault') }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main class="relative mt-16 sm:mt-24">
+      <div class="mx-auto max-w-lg px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
+        <form
+          class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+          @submit.prevent="submit()">
+          <div
+            class="section-head border-b border-gray-200 bg-blue-50 p-3 dark:border-gray-700 dark:bg-blue-900 sm:p-5">
+            <h1 class="mb-1 flex justify-center text-2xl font-medium">
+              <span>{{ $t('Edit a vault') }}</span>
+
+              <help :url="$page.props.help_links.vault_create" :top="'9px'" :class="'ms-2'" />
+            </h1>
+            <p class="text-center text-sm">
+              {{ $t('Vaults contain all your contacts data.') }}
+            </p>
+          </div>
+          <div class="border-b border-gray-200 p-5 dark:border-gray-700">
+            <text-input
+              ref="name"
+              v-model="form.name"
+              :autofocus="true"
+              :class="'mb-5'"
+              :input-class="'block w-full'"
+              :required="true"
+              :maxlength="255"
+              :label="$t('Name')" />
+            <text-area
+              v-model="form.description"
+              :label="$t('Description')"
+              :maxlength="255"
+              :textarea-class="'block w-full'" />
+          </div>
+
+          <div class="flex justify-between p-5">
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button
+              :href="'data.url.vault.update'"
+              :text="$t('Update')"
+              :state="loadingState"
+              :icon="'check'"
+              :class="'save'" />
+          </div>
+        </form>
+      </div>
+    </main>
+  </layout>
+</template>
+
+<script>
+import { Link } from '@inertiajs/vue3';
+import Layout from '@/Shared/Layout.vue';
+import PrettyLink from '@/Shared/Form/PrettyLink.vue';
+import PrettyButton from '@/Shared/Form/PrettyButton.vue';
+import TextInput from '@/Shared/Form/TextInput.vue';
+import TextArea from '@/Shared/Form/TextArea.vue';
+import Help from '@/Shared/Help.vue';
+
+export default {
+  components: {
+    InertiaLink: Link,
+    Layout,
+    PrettyLink,
+    PrettyButton,
+    TextInput,
+    TextArea,
+    Help,
+  },
+
+  props: {
+    layoutData: {
+      type: Object,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      loadingState: '',
+      form: {
+        name: '',
+        description: '',
+      },
+    };
+  },
+
+  mounted() {
+    this.form.name = this.data.name;
+    this.form.description = this.data.description;
+    this.$nextTick().then(() => {
+      this.$refs.name.focus();
+    });
+  },
+
+  methods: {
+    submit() {
+      this.loadingState = 'loading';
+
+      axios
+        .put(this.data.url.update, this.form)
+        .then((response) => {
+          localStorage.success = this.$t('The vault has been updated');
+          this.$inertia.visit(response.data.data);
+        })
+        .catch(() => {
+          this.loadingState = null;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.section-head {
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+}
+</style>

resources/js/Pages/Vault/Index.vue

@@ -61,13 +61,27 @@
             v-for="vault in data.vaults"
             :key="vault.id"
             class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
-            <div class="vault-detail grid">
+            <div class="vault-detail grid relative">
               <InertiaLink
                 :href="vault.url.show"
                 class="border-b border-gray-200 px-3 py-1 text-lg font-medium hover:rounded-t-lg hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-300 dark:hover:bg-slate-800">
                 {{ vault.name }}
               </InertiaLink>
 
+              <!-- Edit button -->
+              <InertiaLink
+                :href="vault.url.edit"
+                class="ml-2 px-2 py-1 text-sm font-medium text-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 hover:dark:text-slate-900 absolute right-0 top-0">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="pointer h-5 w-5 text-gray-400 hover:text-gray-900 dark:text-gray-600 hover:dark:text-gray-100"
+                  fill="currentColor">
+                  <path
+                    d="M15.7279 9.57627L14.3137 8.16206L5 17.4758V18.89H6.41421L15.7279 9.57627ZM17.1421 8.16206L18.5563 6.74785L17.1421 5.33363L15.7279 6.74785L17.1421 8.16206ZM7.24264 20.89H3V16.6473L16.435 3.21231C16.8256 2.82179 17.4587 2.82179 17.8492 3.21231L20.6777 6.04074C21.0682 6.43126 21.0682 7.06443 20.6777 7.45495L7.24264 20.89Z"></path>
+                </svg>
+              </InertiaLink>
+
               <!-- description -->
               <div>
                 <div v-if="vault.contacts.length > 0" class="relative flex -space-x-2 overflow-hidden p-3">

routes/web.php

@@ -190,6 +190,8 @@
         Route::get('create', [VaultController::class, 'create'])->name('vault.create');
         Route::post('', [VaultController::class, 'store'])->name('vault.store');
         Route::get('{vault}', [VaultController::class, 'show'])->name('vault.show');
+        Route::get('{vault}/edit', [VaultController::class, 'edit'])->name('vault.edit');
+        Route::put('{vault}', [VaultController::class, 'update'])->name('vault.update');
         Route::delete('{vault}', [VaultController::class, 'destroy'])->name('vault.destroy');
 
         Route::middleware('can:vault-viewer,vault')->prefix('{vault}')->group(function () {