feat: add menu item new tab toggle (#320)

code4romania · Apr 20, 2023 · db5d428 · db5d428
1 parent 4b5f402
commit db5d428
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 33 deletions.
diff --git a/app/Http/Controllers/Admin/MenuController.php b/app/Http/Controllers/Admin/MenuController.php
@@ -68,6 +68,7 @@ protected function prepareItems(array $items, string $location, int $depth = 0):
                     'type' => $item['type'],
                     'url' => $item['type'] === 'external' ? ($item['url'] ?? null) : null,
                     'route' => $item['type'] === 'route' ? ($item['route'] ?? null) : null,
+                    'new_tab' => $item['new_tab'] ?? false,
                     'children' => $this->prepareItems($item['children'] ?? [], $location, ++$depth),
                 ];
 

diff --git a/app/Http/Requests/Admin/MenuRequest.php b/app/Http/Requests/Admin/MenuRequest.php
@@ -33,6 +33,7 @@ protected function nestedRules(int $depth): array
             '%prefix%.*.url' => ['required_if:%prefix%.*.type,external', 'nullable', 'url'],
             '%prefix%.*.model' => ['required_if:%prefix%.*.type,' . MenuItem::allowedModels()->keys()->join(',')],
             '%prefix%.*.route' => ['required_if:%prefix%.*.type,route'],
+            '%prefix%.*.new_tab' => ['boolean'],
         ];
 
         $rules = collect();

diff --git a/app/Http/Resources/MenuItemResource.php b/app/Http/Resources/MenuItemResource.php
@@ -20,6 +20,7 @@ protected function default(Request $request): array
             'model_type' => $this->model_type,
             'model' => $this->model_id,
             'route' => $this->route,
+            'new_tab' => $this->new_tab,
             'children' => self::collection($this->children),
         ];
     }

diff --git a/app/Models/MenuItem.php b/app/Models/MenuItem.php
@@ -34,7 +34,7 @@ class MenuItem extends Model
     ];
 
     protected $fillable = [
-        'id', 'type', 'location', 'position', 'model_type', 'model_id', 'route',
+        'id', 'type', 'location', 'position', 'model_type', 'model_id', 'route', 'new_tab',
     ];
 
     /**

diff --git a/database/migrations/2023_04_20_171819_add_new_tab_column_to_menu_items_table.php b/database/migrations/2023_04_20_171819_add_new_tab_column_to_menu_items_table.php
@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up(): void
+    {
+        Schema::table('menu_items', function (Blueprint $table) {
+            $table->boolean('new_tab')->default(false);
+        });
+    }
+};
diff --git a/lang/en.json b/lang/en.json
@@ -224,6 +224,7 @@
     "field.min_value": "Minimum value",
     "field.name": "Name",
     "field.number": "Number",
+    "field.open_in_new_tab": "Open in new tab",
     "field.options": "Options",
     "field.page": "Page",
     "field.parent": "Parent",
@@ -268,7 +269,7 @@
 
     "form.label": "Form|Forms",
     "form.action.create": "Add form",
-    "form.action.edit": "Edit formu",
+    "form.action.edit": "Edit form",
     "form.action.update": "Update form",
     "form.action.delete": "Delete form",
     "form.action.submit": "Submit",

diff --git a/lang/ro.json b/lang/ro.json
@@ -224,6 +224,7 @@
     "field.min_value": "Valoare minimă",
     "field.name": "Nume",
     "field.number": "Număr",
+    "field.open_in_new_tab": "Deschide în tab nou",
     "field.options": "Opțiuni",
     "field.page": "Pagină",
     "field.parent": "Părinte",

diff --git a/resources/js/components/MenuBuilder/Item.vue b/resources/js/components/MenuBuilder/Item.vue
@@ -77,40 +77,47 @@
                     required
                 />
 
-                <template v-if="item.type === 'external'">
-                    <localized-field
-                        field="form-input"
-                        type="url"
-                        :label="$t('field.url')"
-                        :name="`${prefix}.url`"
-                        v-model="item.url"
-                        required
-                    />
-                </template>
-
-                <template v-else-if="item.type === 'text'">
+                <template v-if="item.type === 'text'">
                     <!-- blank -->
                 </template>
 
-                <template v-else-if="item.type === 'route'">
-                    <form-select
-                        :label="$t(`field.${item.type}`)"
-                        :name="`${prefix}.route`"
-                        v-model="item.route"
-                        :options="routes"
-                        required
-                    />
-                </template>
+                <template v-else>
+                    <template v-if="item.type === 'external'">
+                        <localized-field
+                            field="form-input"
+                            type="url"
+                            :label="$t('field.url')"
+                            :name="`${prefix}.url`"
+                            v-model="item.url"
+                            required
+                        />
+                    </template>
+
+                    <template v-else-if="item.type === 'route'">
+                        <form-select
+                            :label="$t(`field.${item.type}`)"
+                            :name="`${prefix}.route`"
+                            v-model="item.route"
+                            :options="routes"
+                            required
+                        />
+                    </template>
+
+                    <template v-else-if="models.length">
+                        <form-select
+                            :label="$t(`field.${item.type}`)"
+                            :name="`${prefix}.model`"
+                            v-model="item.model"
+                            :options="models"
+                            option-value-key="id"
+                            option-label-key="title"
+                            required
+                        />
+                    </template>
 
-                <template v-else-if="models.length">
-                    <form-select
-                        :label="$t(`field.${item.type}`)"
-                        :name="`${prefix}.model`"
-                        v-model="item.model"
-                        :options="models"
-                        option-value-key="id"
-                        option-label-key="title"
-                        required
+                    <form-toggle
+                        :label="$t('field.open_in_new_tab')"
+                        v-model="item.new_tab"
                     />
                 </template>
             </div>

diff --git a/resources/js/components/MenuBuilder/List.vue b/resources/js/components/MenuBuilder/List.vue
@@ -77,6 +77,7 @@
                 props.items.push({
                     label: {},
                     type: 'external',
+                    new_tab: false,
                     url: {},
                     children: [],
                 });

diff --git a/resources/views/components/menu-item/external.blade.php b/resources/views/components/menu-item/external.blade.php
@@ -4,7 +4,7 @@
     <a
         {{ $attributes->merge([
             'href' => $item->url,
-            'target' => '_blank',
+            'target' => $item->new_tab ? '_blank' : null,
             'rel' => 'noopener',
             'class' => $inactiveClass,
         ]) }}>

diff --git a/resources/views/components/menu-item/model.blade.php b/resources/views/components/menu-item/model.blade.php
@@ -4,6 +4,7 @@
     <a
         {{ $attributes->merge([
             'href' => $item->model->url,
+            'target' => $item->new_tab && !$item->isCurrentUrl() ? '_blank' : null,
             'class' => $item->isCurrentUrl() ? $activeClass : $inactiveClass,
         ]) }}>
         {{ $item->label }}

diff --git a/resources/views/components/menu-item/route.blade.php b/resources/views/components/menu-item/route.blade.php
@@ -4,6 +4,7 @@
     <a
         {{ $attributes->merge([
             'href' => localized_route("front.$item->route"),
+            'target' => $item->new_tab && !$item->isCurrentUrl() ? '_blank' : null,
             'class' => $item->isCurrentUrl() ? $activeClass : $inactiveClass,
         ]) }}>
         {{ $item->label }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ class MenuItem extends Model @@
         ];
         protected $fillable = [
-            'id', 'type', 'location', 'position', 'model_type', 'model_id', 'route',
+            'id', 'type', 'location', 'position', 'model_type', 'model_id', 'route', 'new_tab',
         ];
         /**
@@ Expand Down @@