Add toolbars

app/Member/MemberResource.php

@@ -104,6 +104,7 @@ class MemberResource extends JsonResource
             'comment' => $this->comment,
             'links' => [
                 'show' => route('member.show', ['member' => $this->getModel()]),
+                'edit' => route('member.edit', ['member' => $this->getModel()]),
             ],
         ];
     }

resources/css/buttons.css

@@ -20,9 +20,9 @@
         }
     }
     &.btn-warning {
-        @apply bg-yellow-700;
+        @apply bg-yellow-700 text-yellow-300;
         &:not(.disabled):hover {
-            @apply bg-yellow-500;
+            @apply bg-yellow-500 text-yellow-100;
         }
     }
     &.btn-info {

resources/js/components/Ui/ToolbarButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <i-link :href="href" class="btn label mr-2" :class="`btn-${color}`" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
+    <i-link :href="href" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
         <svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite>
         <span class="hidden xl:inline"><slot></slot></span>
     </i-link>
@@ -12,6 +12,11 @@ export default {
     data: function () {
         return {
             menuStore: menuStore(),
+            colors: {
+                primary: 'btn-primary',
+                warning: 'btn-warning',
+                info: 'btn-info',
+            },
         };
     },
     props: {

resources/js/views/member/ShowView.vue

@@ -2,6 +2,7 @@
     <page-layout>
         <div class="flex" slot="toolbar">
             <toolbar-button :href="meta.links.index" color="primary" icon="undo">zurück</toolbar-button>
+            <toolbar-button :href="data.links.edit" color="warning" icon="pencil">bearbeiten</toolbar-button>
         </div>
         <div class="p-3 grid gap-3 this-grid grow">
             <box heading="Stammdaten" class="area-stamm hidden xl:block">

resources/js/views/member/VForm.vue

@@ -2,6 +2,7 @@
     <page-layout>
         <div class="flex" slot="toolbar">
             <toolbar-button :href="meta.links.index" color="primary" icon="undo">zurück</toolbar-button>
+            <toolbar-button :href="data.links.show" color="primary" icon="eye">anschauen</toolbar-button>
         </div>
         <form class="flex grow relative" id="memberedit" @submit.prevent="submit">
             <save-button form="memberedit"></save-button>