├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── composer.json
└── src
    ├── Commands
        └── PackageSetup.php
    ├── Controllers
        ├── Ops.php
        └── TagosController.php
    ├── Observers
        └── TagObserver.php
    ├── Tagos.php
    ├── TagosRoutes.php
    ├── TagosServiceProvider.php
    ├── Traits
        └── HasTags.php
    ├── config
        └── tags.php
    ├── database
        └── seeds
        │   └── TagsTableSeeder.php
    └── resources
        ├── assets
            ├── js
            │   ├── add.vue
            │   ├── index.vue
            │   ├── manager.js
            │   ├── mixins
            │   │   └── search.js
            │   └── table
            │   │   ├── item.vue
            │   │   └── list.vue
            └── sass
            │   ├── _checkbox.scss
            │   ├── _vue.scss
            │   └── style.scss
        ├── lang
            └── en
            │   └── messages.php
        └── views
            ├── editor.blade.php
            ├── index.blade.php
            ├── partials
                ├── add.blade.php
                ├── display.blade.php
                └── shared.blade.php
            └── show.blade.php


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: ctf0
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Muah
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">
  2 |     Tagos
  3 |     <br>
  4 |     <a href="https://packagist.org/packages/ctf0/tagos"><img src="https://img.shields.io/packagist/v/ctf0/tagos.svg" alt="Latest Stable Version" /></a> <a href="https://packagist.org/packages/ctf0/tagos"><img src="https://img.shields.io/packagist/dt/ctf0/tagos.svg" alt="Total Downloads" /></a>
  5 | </h1>
  6 | 
  7 | A Tag **Editor** and **Selector** based on [spatie/laravel-tags](https://github.com/spatie/laravel-tags).
  8 | 
  9 | #### Editor
 10 | <p align="center">
 11 |     <img src="https://user-images.githubusercontent.com/7388088/41531521-de565f66-72f3-11e8-8a2a-e07ea1002e1b.png">
 12 | </p>
 13 | 
 14 | #### Selector
 15 | <p align="center">
 16 |     <img src="https://user-images.githubusercontent.com/7388088/38068467-9407081a-3311-11e8-83a5-eea196fb00e3.png">
 17 | </p>
 18 | 
 19 | - package requires Laravel v5.5+
 20 | 
 21 | <br>
 22 | 
 23 | ## Installation
 24 | 
 25 | - `composer require ctf0/tagos`
 26 | 
 27 | - publish the package assets with
 28 | 
 29 |     `php artisan vendor:publish --provider="ctf0\Tagos\TagosServiceProvider"`<br>
 30 |     `php artisan vendor:publish --provider="Spatie\Tags\TagsServiceProvider" --tag="migrations"`
 31 | 
 32 | - after installation, run `php artisan tagos:setup` to add
 33 |     + package routes to `routes/web.php`
 34 |     + package assets compiling to `webpack.mix.js`
 35 | 
 36 | - install dependencies
 37 | 
 38 |     ```bash
 39 |     yarn add vue vue-awesome@v2 vue-notif vue-tippy@v2 axios fuse.js
 40 |     ```
 41 | 
 42 | - add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.
 43 |     - if you are having issues [Check](https://ctf0.wordpress.com/2017/09/12/laravel-mix-es6/)
 44 | 
 45 |     ```js
 46 |     // app.js
 47 | 
 48 |     window.Vue = require('vue')
 49 | 
 50 |     require('../vendor/Tagos/js/manager')
 51 | 
 52 |     new Vue({
 53 |         el: '#app'
 54 |     })
 55 |     ```
 56 | 
 57 | <br>
 58 | 
 59 | ## Features
 60 | - tags editor & selector.
 61 | - show tag suggestion as you type.
 62 | - easily add new tag name & type.
 63 | - show tagged items by tag & by type.
 64 | - search for tags by name in tags index.
 65 | - shortcuts
 66 | 
 67 |     |  interactions  | keyboard | mouse (click) |
 68 |     |----------------|----------|---------------|
 69 |     | show all tags  |          | *(input)* 2x  |
 70 |     | add new tag    | enter    | *             |
 71 |     | hide tags list | esc      | anywhere      |
 72 | 
 73 | <br>
 74 | 
 75 | ## Usage
 76 | 
 77 | - migrate the tags table with `php artisan migrate`
 78 | 
 79 | - there is also a seeder to quickly get you going
 80 |     ```php
 81 |     // database/seeds/DatabaseSeeder.php
 82 | 
 83 |     class DatabaseSeeder extends Seeder
 84 |     {
 85 |         /**
 86 |          * Run the database seeds.
 87 |          */
 88 |         public function run()
 89 |         {
 90 |             //...
 91 | 
 92 |             $this->call(TagsTableSeeder::class);
 93 |         }
 94 |     }
 95 |     ```
 96 | 
 97 | - add `HasTags` trait to your model ex.`post`
 98 | 
 99 |     ```php
100 |     use ctf0\Tagos\Traits\HasTags;
101 |     use Illuminate\Database\Eloquent\Model;
102 | 
103 |     class Post extends Model
104 |     {
105 |         use HasTags;
106 |     }
107 |     ```
108 | 
109 | <br>
110 | 
111 | > #### Get All tags
112 | ```php
113 | app('cache')->get('tagos');
114 | ```
115 | 
116 | > #### Attaching Tags
117 | 
118 | - show the tag selector
119 |     + ex.`posts create view`
120 | 
121 |         ```blade
122 |         @include('Tagos::partials.add')
123 |         ```
124 | 
125 |     + ex.`posts edit view`
126 | 
127 |         ```blade
128 |         @include('Tagos::partials.add', ['old' => app('tagos')->getModelTags($post)])
129 |         ```
130 | 
131 | - save the tags
132 |     + `store()`
133 | 
134 |         ```php
135 |         $model = Post::create([...]);
136 | 
137 |         app('tagos')->saveTags($model, $request);
138 |         ```
139 | 
140 |     + `update()`
141 | 
142 |         ```php
143 |         $model = Post::find($id)->update([...]);
144 | 
145 |         app('tagos')->saveTags($model, $request);
146 |         ```
147 | 
148 | <br>
149 | 
150 | > #### Display Model Tags
151 | 
152 | ```blade
153 | @include('Tagos::partials.display', [
154 |     'tags' => $post->tags,
155 |     'showType' => true // whether to show the tag type or not
156 | ])
157 | ```
158 | 
159 | <br>
160 | 
161 | #### Routes
162 | 
163 | | Method |             URL             |         Name        |                        Action                        |
164 | |--------|-----------------------------|---------------------|------------------------------------------------------|
165 | | GET    | tags/editor                 | tagos.editor        | \ctf0\Tagos\Controllers\TagosController@editor       |
166 | | GET    | tags                        | tagos.index         | \ctf0\Tagos\Controllers\TagosController@index        |
167 | | GET    | tags/type/{type}            | tagos.index_type    | \ctf0\Tagos\Controllers\TagosController@indexByType  |
168 | | GET    | tags/{slug}                 | tagos.show          | \ctf0\Tagos\Controllers\TagosController@show         |
169 | | GET    | tags/type/{type}/tag/{slug} | tagos.show_type     | \ctf0\Tagos\Controllers\TagosController@showByType   |
170 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ctf0/tagos",
 3 |     "description": "GUI to manage tags in laravel based on spatie/laravel-tags",
 4 |     "homepage": "https://github.com/ctf0/Tagos",
 5 |     "license": "MIT",
 6 |     "keywords": [
 7 |         "ctf0",
 8 |         "tagos",
 9 |         "tagging",
10 |         "gui",
11 |         "laravel",
12 |         "manager"
13 |     ],
14 |     "authors": [
15 |         {
16 |             "name": "Muah",
17 |             "email": "muah003@gmail.com"
18 |         }
19 |     ],
20 |     "require": {
21 |         "illuminate/support": ">=5.5 <9.0",
22 |         "spatie/laravel-tags": "*",
23 |         "ctf0/package-changelog": "*"
24 |     },
25 |     "autoload": {
26 |         "psr-4": {
27 |             "ctf0\\Tagos\\": "src"
28 |         }
29 |     },
30 |     "extra": {
31 |         "laravel": {
32 |             "providers": [
33 |                 "ctf0\\Tagos\\TagosServiceProvider"
34 |             ]
35 |         },
36 |         "changeLog": "logs"
37 |     },
38 |     "config": {
39 |         "sort-packages": true
40 |     },
41 |     "scripts": {
42 |         "post-package-install": [
43 |             "@php artisan vendor:publish --provider=\"ctf0\\Tagos\\TagosServiceProvider\"",
44 |             "@php artisan vendor:publish --provider=\"Spatie\\Tags\\TagsServiceProvider\" --tag=\"migrations\""
45 |         ]
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/Commands/PackageSetup.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos\Commands;
 4 | 
 5 | use Illuminate\Support\Str;
 6 | use Illuminate\Console\Command;
 7 | 
 8 | class PackageSetup extends Command
 9 | {
10 |     protected $file;
11 |     protected $signature   = 'tagos:setup';
12 |     protected $description = 'setup package routes & assets compiling';
13 | 
14 |     /**
15 |      * Create a new command instance.
16 |      */
17 |     public function __construct()
18 |     {
19 |         $this->file = app('files');
20 | 
21 |         parent::__construct();
22 |     }
23 | 
24 |     /**
25 |      * Execute the console command.
26 |      *
27 |      * @return mixed
28 |      */
29 |     public function handle()
30 |     {
31 |         // routes
32 |         $route_file = base_path('routes/web.php');
33 |         $search     = 'Tagos';
34 | 
35 |         if ($this->checkExist($route_file, $search)) {
36 |             $data = "\n// Tagos\nctf0\Tagos\TagosRoutes::routes();";
37 | 
38 |             $this->file->append($route_file, $data);
39 |         }
40 | 
41 |         // mix
42 |         $mix_file = base_path('webpack.mix.js');
43 |         $search   = 'Tagos';
44 | 
45 |         if ($this->checkExist($mix_file, $search)) {
46 |             $data = "\n// Tagos\nmix.sass('resources/assets/vendor/Tagos/sass/style.scss', 'public/assets/vendor/Tagos/style.css')";
47 | 
48 |             $this->file->append($mix_file, $data);
49 |         }
50 | 
51 |         $this->info('All Done');
52 |     }
53 | 
54 |     /**
55 |      * [checkExist description].
56 |      *
57 |      * @param [type] $file   [description]
58 |      * @param [type] $search [description]
59 |      *
60 |      * @return [type] [description]
61 |      */
62 |     protected function checkExist($file, $search)
63 |     {
64 |         return $this->file->exists($file) && !Str::contains($this->file->get($file), $search);
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/Controllers/Ops.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos\Controllers;
 4 | 
 5 | trait Ops
 6 | {
 7 |     protected function populateLocales($item)
 8 |     {
 9 |         foreach ($this->locales as $one) {
10 |             $item[$one] = $item[$one] ?? null;
11 |         }
12 | 
13 |         return $item;
14 |     }
15 | 
16 |     protected function getModelsByTag($slug)
17 |     {
18 |         $tag = $this->tagCache->where('slug', $slug)->first();
19 | 
20 |         return $this->relation
21 |                     ->get()
22 |                     ->where('tag_id', $tag->id)
23 |                     ->groupBy(function ($item) {
24 |                         return $item->taggable_type;
25 |                     })
26 |                     ->map(function ($val, $model) use ($tag) {
27 |                         return app($model)->with(['user', 'tags'])->withAnyTags([$tag->name])->get();
28 |                     });
29 |     }
30 | 
31 |     protected function getModelsByType($type, $slug)
32 |     {
33 |         $tag = $this->tagCache
34 |                     ->where('slug', $slug)
35 |                     ->where('type', $type)
36 |                     ->first();
37 | 
38 |         return $this->relation
39 |                     ->get()
40 |                     ->where('tag_id', $tag->id)
41 |                     ->groupBy(function ($item) {
42 |                         return $item->taggable_type;
43 |                     })
44 |                     ->map(function ($val, $model) {
45 |                         return $val->map(function ($item) use ($model) {
46 |                             return app($model)->with(['user', 'tags'])->find($item->taggable_id);
47 |                         });
48 |                     });
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/Controllers/TagosController.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace ctf0\Tagos\Controllers;
  4 | 
  5 | use Illuminate\Http\Request;
  6 | use App\Http\Controllers\Controller;
  7 | 
  8 | class TagosController extends Controller
  9 | {
 10 |     use Ops;
 11 | 
 12 |     protected $relation;
 13 |     protected $locales;
 14 |     protected $tagCache;
 15 |     protected $tagModel;
 16 | 
 17 |     public function __construct()
 18 |     {
 19 |         $this->relation = app('db')->table('taggables');
 20 |         $this->locales  = [config('app.locale')];
 21 |         $this->tagCache = app('cache')->get('tagos');
 22 |         $this->tagModel = app(config('tags.model'));
 23 |     }
 24 | 
 25 |     /**
 26 |      * Display a listing of the resource.
 27 |      *
 28 |      * @return \Illuminate\Http\Response
 29 |      */
 30 |     public function index()
 31 |     {
 32 |         $tags     = $this->tagCache;
 33 |         $showType = true;
 34 | 
 35 |         return view('Tagos::index', compact('tags', 'showType'));
 36 |     }
 37 | 
 38 |     public function indexByType($type)
 39 |     {
 40 |         $tags     = $this->tagCache->where('type', $type);
 41 |         $showType = false;
 42 | 
 43 |         return view('Tagos::index', compact('tags', 'showType'));
 44 |     }
 45 | 
 46 |     /**
 47 |      * Display tags editor.
 48 |      *
 49 |      * @return [type] [description]
 50 |      */
 51 |     public function editor()
 52 |     {
 53 |         $locales  = $this->locales;
 54 |         $relation = $this->relation->get();
 55 |         $tags     = $this->tagCache->map(function ($tag) use ($relation) {
 56 |             return [
 57 |                 'count' => $relation->where('tag_id', $tag->id)->count(),
 58 |                 'order' => $tag->order_column,
 59 |                 'type'  => $tag->type,
 60 |                 'name'  => $this->populateLocales($tag->getTranslations('name')),
 61 |                 'slug'  => $this->populateLocales($tag->getTranslations('slug')),
 62 |                 'id'    => $tag->id,
 63 |            ];
 64 |         });
 65 | 
 66 |         return view('Tagos::editor', compact('tags', 'locales'));
 67 |     }
 68 | 
 69 |     /**
 70 |      * Display Taged Items.
 71 |      *
 72 |      * @param mixed $tag
 73 |      *
 74 |      * @return [type] [description]
 75 |      */
 76 |     public function show($tag)
 77 |     {
 78 |         $models = $this->getModelsByTag($tag);
 79 | 
 80 |         return view('Tagos::show', compact('models'));
 81 |     }
 82 | 
 83 |     public function showByType($type, $slug)
 84 |     {
 85 |         $models = $this->getModelsByType($type, $slug);
 86 | 
 87 |         return view('Tagos::show', compact('models'));
 88 |     }
 89 | 
 90 |     /**
 91 |      * Store a newly created resource in storage.
 92 |      *
 93 |      * @param \Illuminate\Http\Request $request
 94 |      *
 95 |      * @return \Illuminate\Http\Response
 96 |      */
 97 |     public function store(Request $request)
 98 |     {
 99 |         $tag = $this->tagModel->create($request->all());
100 | 
101 |         return response()->json([
102 |             'msg'  => trans('Tagos::messages.model_created'),
103 |             'item' => [
104 |                 'count' => 0,
105 |                 'order' => $tag->order_column,
106 |                 'type'  => $tag->type,
107 |                 'name'  => $this->populateLocales($tag->getTranslations('name')),
108 |                 'slug'  => $this->populateLocales($tag->getTranslations('slug')),
109 |                 'id'    => $tag->id,
110 |             ],
111 |         ]);
112 |     }
113 | 
114 |     /**
115 |      * Update the specified resource in storage.
116 |      *
117 |      * @param \Illuminate\Http\Request $request
118 |      * @param int                      $id
119 |      *
120 |      * @return \Illuminate\Http\Response
121 |      */
122 |     public function update(Request $request, $id)
123 |     {
124 |         $request->validate(['order' => 'required']);
125 | 
126 |         $reload    = false;
127 |         $tagModel  = $this->tagModel;
128 |         $new_order = $request->order;
129 | 
130 |         $tag = $tagModel->find($id);
131 |         $tag->update([
132 |             'name' => $request->name,
133 |             'type' => $request->type,
134 |         ]);
135 | 
136 |         if ($new_order != $tag->order_column) {
137 |             $reload = true;
138 |             $tag->swapOrderWithModel($tagModel->where('order_column', $new_order)->first());
139 |         }
140 | 
141 |         return response()->json([
142 |             'msg'  => trans('Tagos::messages.model_updated'),
143 |             'tag'  => [
144 |                 'count' => $this->relation->get()->where('tag_id', $tag->id)->count(),
145 |                 'order' => $tag->order_column,
146 |                 'type'  => $tag->type,
147 |                 'name'  => $this->populateLocales($tag->getTranslations('name')),
148 |                 'slug'  => $this->populateLocales($tag->getTranslations('slug')),
149 |                 'id'    => $tag->id,
150 |             ],
151 |             'reload' => $reload,
152 |         ]);
153 |     }
154 | 
155 |     public function updateMulti(Request $request)
156 |     {
157 |         foreach ($this->tagModel->whereIn('id', $request->ids)->get() as $model) {
158 |             $model->update(['type' => $request->type]);
159 |         }
160 | 
161 |         return response()->json([
162 |             'msg' => trans('Tagos::messages.model_updated'),
163 |         ]);
164 |     }
165 | 
166 |     /**
167 |      * Remove the specified resource from storage.
168 |      *
169 |      * @param int $id
170 |      *
171 |      * @return \Illuminate\Http\Response
172 |      */
173 |     public function destroy($id)
174 |     {
175 |         $this->tagModel->destroy($id);
176 | 
177 |         return response()->json([
178 |             'msg' => trans('Tagos::messages.model_deleted'),
179 |         ]);
180 |     }
181 | 
182 |     public function destroyMulti(Request $request)
183 |     {
184 |         $this->tagModel->destroy($request->ids);
185 | 
186 |         return response()->json([
187 |             'msg' => trans('Tagos::messages.models_deleted'),
188 |         ]);
189 |     }
190 | }
191 | 


--------------------------------------------------------------------------------
/src/Observers/TagObserver.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos\Observers;
 4 | 
 5 | class TagObserver
 6 | {
 7 |     /**
 8 |      * Listen to the Tag saved event.
 9 |      */
10 |     public function saved()
11 |     {
12 |         return $this->cleanData();
13 |     }
14 | 
15 |     /**
16 |      * Listen to the Tag deleted event.
17 |      */
18 |     public function deleted()
19 |     {
20 |         return $this->cleanData();
21 |     }
22 | 
23 |     /**
24 |      * helpers.
25 |      *
26 |      * @return [type] [description]
27 |      */
28 |     protected function cleanData()
29 |     {
30 |         return app('cache')->forget('tagos');
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/Tagos.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos;
 4 | 
 5 | class Tagos
 6 | {
 7 |     protected $tagClass;
 8 | 
 9 |     public function __construct()
10 |     {
11 |         $this->tagClass = app('cache')->get('tagos');
12 |     }
13 | 
14 |     /**
15 |      * resolve all tags.
16 |      *
17 |      * @return [type] [description]
18 |      */
19 |     public function getTags()
20 |     {
21 |         $res = $this->tagClass->map(function ($item) {
22 |             return [
23 |                 'name'=> $item->name,
24 |                 'type'=> $item->type,
25 |             ];
26 |         });
27 | 
28 |         return json_encode($res);
29 |     }
30 | 
31 |     /**
32 |      * resolve model tags.
33 |      *
34 |      * @param mixed $model
35 |      *
36 |      * @return [type] [description]
37 |      */
38 |     public function getModelTags($model)
39 |     {
40 |         if (!$model->tags->count()) {
41 |             return json_encode([]);
42 |         }
43 | 
44 |         $res = $model->tags->map(function ($item) {
45 |             return [
46 |                 'name'=> $item->name,
47 |                 'type'=> $item->type,
48 |             ];
49 |         });
50 | 
51 |         return json_encode($res);
52 |     }
53 | 
54 |     /**
55 |      * save & sync tags correctly to model.
56 |      *
57 |      * @param [type] $model   [description]
58 |      * @param [type] $request [description]
59 |      *
60 |      * @return [type] [description]
61 |      */
62 |     public function saveTags($model, $request)
63 |     {
64 |         $items = [];
65 |         $tags  = json_decode($request->tags, true);
66 | 
67 |         foreach ($tags as $one) {
68 |             $items[] = app(config('tags.model'))->findOrCreate($one['name'], $one['type']);
69 |         }
70 | 
71 |         return $model->syncTags($items);
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/TagosRoutes.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos;
 4 | 
 5 | class TagosRoutes
 6 | {
 7 |     public static function routes()
 8 |     {
 9 |         $controller = config('tags.controller');
10 | 
11 |         app('router')->group([
12 |             'prefix' => 'tags',
13 |             'as'     => 'tagos.',
14 |         ], function () use ($controller) {
15 |             // editor
16 |             app('router')->get('editor', "$controller@editor")->name('editor');
17 |             app('router')->post('/', "$controller@store")->name('store');
18 |             // show all
19 |             app('router')->get('/', "$controller@index")->name('index');
20 |             app('router')->get('type/{type}', "$controller@indexByType")->name('index_type');
21 |             // update
22 |             app('router')->put('{id}/update', "$controller@update")->name('update');
23 |             app('router')->post('update-multi', "$controller@updateMulti")->name('update_multi');
24 |             // delete
25 |             app('router')->delete('{id}/destroy', "$controller@destroy")->name('destroy');
26 |             app('router')->post('destroy-multi', "$controller@destroyMulti")->name('destroy_multi');
27 |             // show specific
28 |             app('router')->get('{slug}', "$controller@show")->name('show');
29 |             app('router')->get('type/{type}/tag/{slug}', "$controller@showByType")->name('show_type');
30 |         });
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/TagosServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos;
 4 | 
 5 | use ctf0\Tagos\Commands\PackageSetup;
 6 | use ctf0\Tagos\Observers\TagObserver;
 7 | use Illuminate\Support\Facades\Schema;
 8 | use Illuminate\Support\ServiceProvider;
 9 | 
10 | class TagosServiceProvider extends ServiceProvider
11 | {
12 |     /**
13 |      * Perform post-registration booting of services.
14 |      */
15 |     public function boot()
16 |     {
17 |         $this->packagePublish();
18 |         $this->cacheAndObserver();
19 |         $this->command();
20 |     }
21 | 
22 |     /**
23 |      * [packagePublish description].
24 |      *
25 |      * @return [type] [description]
26 |      */
27 |     protected function packagePublish()
28 |     {
29 |         // config
30 |         $this->publishes([
31 |             __DIR__ . '/config' => config_path(),
32 |         ], 'config');
33 | 
34 |         // seeds
35 |         $this->publishes([
36 |             __DIR__ . '/database/seeds' => database_path('seeds'),
37 |         ], 'seeds');
38 | 
39 |         // resources
40 |         $this->publishes([
41 |             __DIR__ . '/resources/assets' => resource_path('assets/vendor/Tagos'),
42 |         ], 'assets');
43 | 
44 |         // trans
45 |         $this->loadTranslationsFrom(__DIR__ . '/resources/lang', 'Tagos');
46 |         $this->publishes([
47 |             __DIR__ . '/resources/lang' => resource_path('lang/vendor/Tagos'),
48 |         ], 'trans');
49 | 
50 |         // views
51 |         $this->loadViewsFrom(__DIR__ . '/resources/views', 'Tagos');
52 |         $this->publishes([
53 |             __DIR__ . '/resources/views' => resource_path('views/vendor/Tagos'),
54 |         ], 'views');
55 |     }
56 | 
57 |     /**
58 |      * model events cacheAndObserver.
59 |      *
60 |      * @return [type] [description]
61 |      */
62 |     protected function cacheAndObserver()
63 |     {
64 |         $model = $this->app['config']->get('tags.model');
65 | 
66 |         if ($model && Schema::hasTable('tags')) {
67 |             $this->app['cache']->rememberForever('tagos', function () use ($model) {
68 |                 return $this->app->make($model)->ordered()->get();
69 |             });
70 | 
71 |             $this->app->make($model)->observe(TagObserver::class);
72 |         }
73 |     }
74 | 
75 |     /**
76 |      * package commands.
77 |      *
78 |      * @return [type] [description]
79 |      */
80 |     protected function command()
81 |     {
82 |         $this->commands([
83 |             PackageSetup::class,
84 |         ]);
85 |     }
86 | 
87 |     /**
88 |      * Register any package services.
89 |      *
90 |      * @return [type] [description]
91 |      */
92 |     public function register()
93 |     {
94 |         $this->app->singleton('tagos', function () {
95 |             return new Tagos();
96 |         });
97 |     }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/Traits/HasTags.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace ctf0\Tagos\Traits;
 4 | 
 5 | use Spatie\Tags\HasTags as Spatie;
 6 | use Illuminate\Database\Eloquent\Model;
 7 | 
 8 | trait HasTags
 9 | {
10 |     use Spatie;
11 | 
12 |     /**
13 |      * support custom model.
14 |      *
15 |      * @return [type] [description]
16 |      */
17 |     public static function getTagClassName(): string
18 |     {
19 |         return config('tags.model');
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/config/tags.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 |     /*
 5 |      * package controller
 6 |      * ex."https://github.com/ctf0/Tagos/wiki/Example-Controller"
 7 |      *
 8 |      * change this so you can assign middlewares to the routes
 9 |      * and resolve the extra locales for the editor so you can use it with already saved tags
10 |      */
11 |     'controller' => '\ctf0\Tagos\Controllers\TagosController',
12 | 
13 |     /*
14 |      * package tag model
15 |      * ex."https://github.com/ctf0/Tagos/wiki/Example-Model"
16 |      *
17 |      * so you can extend the functionality with ease
18 |      * for example add revisions
19 |      */
20 |     'model' => Spatie\Tags\Tag::class,
21 | ];
22 | 


--------------------------------------------------------------------------------
/src/database/seeds/TagsTableSeeder.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Faker\Factory;
 4 | use Illuminate\Database\Seeder;
 5 | 
 6 | class TagsTableSeeder extends Seeder
 7 | {
 8 |     /**
 9 |      * Run the database seeds.
10 |      */
11 |     public function run()
12 |     {
13 |         $faker = Factory::create();
14 |         $model = app(config('tags.model'));
15 | 
16 |         for ($i=0; $i < 5; ++$i) {
17 |             $model->create([
18 |                 'name' => $faker->unique()->safeColorName(),
19 |             ]);
20 |         }
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/add.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="control">
  3 |         <!-- tags to be saved -->
  4 |         <input :value="JSON.stringify(selectedTags)"
  5 |                type="hidden"
  6 |                name="tags">
  7 | 
  8 |         <div ref="wrapper" class="field has-addons">
  9 |             <div class="control tag-input is-expanded">
 10 |                 <!-- tag name -->
 11 |                 <input ref="tagName"
 12 |                        v-model="tagName"
 13 |                        :placeholder="trans('tag_ph')"
 14 |                        class="input"
 15 |                        @dblclick="showAllTags = true">
 16 | 
 17 |                 <!-- tags list -->
 18 |                 <div v-show="filteredList.length && showAllTags"
 19 |                      class="tag-list field is-grouped is-grouped-multiline">
 20 |                     <div v-for="(item,i) in filteredList"
 21 |                          :key="i"
 22 |                          class="control link"
 23 |                          @click="addToList(item)">
 24 |                         <div class="tags has-addons">
 25 |                             <span class="tag is-info is-marginless">{{ item.name }}</span>
 26 |                             <span v-if="item.type" class="tag is-dark is-marginless">{{ item.type }}</span>
 27 |                         </div>
 28 |                     </div>
 29 |                 </div>
 30 |             </div>
 31 | 
 32 |             <!-- tag type -->
 33 |             <div class="control">
 34 |                 <input ref="tagType"
 35 |                        v-model="tagType"
 36 |                        :placeholder="trans('type_ph')"
 37 |                        class="input">
 38 |             </div>
 39 | 
 40 |             <!-- add -->
 41 |             <div class="control">
 42 |                 <button type="button" class="button is-dark" @click="addToList()">{{ trans('add_new') }}</button>
 43 |             </div>
 44 |         </div>
 45 | 
 46 |         <!-- selected tags -->
 47 |         <transition-group :style="listPadding"
 48 |                           tag="div"
 49 |                           name="tag-slide-up"
 50 |                           class="field is-grouped is-grouped-multiline">
 51 |             <div v-for="(item,i) in selectedTags" :key="`${item.name}-${item.type}`" class="control">
 52 |                 <div class="tags has-addons">
 53 |                     <span class="tag is-info is-marginless">{{ item.name }}</span>
 54 |                     <span v-if="item.type" class="tag is-primary is-marginless">{{ item.type }}</span>
 55 |                     <span class="tag is-danger is-delete is-marginless link" @click="removeFromList(i)"/>
 56 |                 </div>
 57 |             </div>
 58 | 
 59 |             <!-- clear all -->
 60 |             <div v-tippy
 61 |                  v-show="selectedTags.length > 1"
 62 |                  key="delete"
 63 |                  :title="trans('clear_list')"
 64 |                  class="delete"
 65 |                  @click="clearTagsList()"/>
 66 |         </transition-group>
 67 |     </div>
 68 | </template>
 69 | 
 70 | <style src="../sass/_vue.scss" lang="scss"></style>
 71 | 
 72 | <style scoped lang="scss">
 73 |     .field {
 74 |         transition: all 0.2s;
 75 |     }
 76 | 
 77 |     .tag-input {
 78 |         position: relative;
 79 | 
 80 |         .tag-list {
 81 |             position: absolute;
 82 |             top: 100%;
 83 |             width: 100%;
 84 |             padding: 1rem 0 0;
 85 |             left: 0;
 86 |         }
 87 |     }
 88 | 
 89 |     .tag-slide-up-leave-active {
 90 |         position: absolute;
 91 |     }
 92 | </style>
 93 | 
 94 | <script>
 95 | export default {
 96 |     props: ['oldList', 'tagsList', 'translation'],
 97 |     data() {
 98 |         return {
 99 |             tagName: null,
100 |             tagType: null,
101 |             showAllTags: false,
102 |             selectedTags: this.oldList || [],
103 |             listPadding: ''
104 |         }
105 |     },
106 |     created() {
107 |         window.addEventListener('resize', this.updatePadding)
108 |         document.addEventListener('keydown', this.shortCuts)
109 |         document.addEventListener('click', (e) => {
110 |             if (!this.isFocused('wrapper', e)) {
111 |                 this.hideLists()
112 |             }
113 |         })
114 |     },
115 |     computed: {
116 |         fuseLib() {
117 |             return new Fuse(this.fullList(), {keys: ['name']})
118 |         },
119 |         filteredList() {
120 |             let val = this.tagName
121 | 
122 |             if (val) {
123 |                 return this.fuseLib.search(val)
124 |             }
125 | 
126 |             if (this.showAllTags) {
127 |                 return this.fullList()
128 |             }
129 | 
130 |             return []
131 |         }
132 |     },
133 |     methods: {
134 |         shortCuts(e) {
135 |             let key = e.keyCode
136 | 
137 |             // enter
138 |             if (key == 13) {
139 |                 e.preventDefault()
140 |                 e.stopPropagation()
141 | 
142 |                 // name
143 |                 if (this.isFocused('tagName', e)) {
144 |                     this.addToList()
145 |                 }
146 | 
147 |                 // type
148 |                 if (this.isFocused('tagType', e)) {
149 |                     if (!this.tagName) {
150 |                         return this.showNotif(this.trans('no_val'), 'warning')
151 |                     }
152 | 
153 |                     this.addToList()
154 |                 }
155 |             }
156 | 
157 |             // esc
158 |             if (key == 27) {
159 |                 return this.hideLists()
160 |             }
161 |         },
162 | 
163 |         // ops
164 |         fullList() {
165 |             let list = this.selectedTags.length ? this.selectedTags : []
166 | 
167 |             return this.tagsList.filter((obj) => {
168 |                 return !list.some((e) => {
169 |                     return obj.name == e.name && obj.type == e.type
170 |                 })
171 |             })
172 |         },
173 |         addToList(item = null) {
174 |             if (item) {
175 |                 if (item.type == null && this.tagType) {
176 |                     item.type = this.tagType
177 |                 }
178 | 
179 |                 this.selectedTags.push(item)
180 |                 return this.updatePadding()
181 |             }
182 | 
183 |             let str = this.tagName
184 |             str ? this.selectedTags.push({name: str.trim(), type: this.tagType}) : this.showNotif(this.trans('no_val'), 'warning')
185 | 
186 |             this.tagName = ''
187 |             this.$refs.tagName.focus()
188 |         },
189 |         removeFromList(i) {
190 |             return this.selectedTags.splice(i, 1)
191 |         },
192 |         hideLists() {
193 |             return this.showAllTags = false
194 |         },
195 |         clearTagsList() {
196 |             this.selectedTags = []
197 |         },
198 | 
199 |         // helpers
200 |         isFocused(item, e) {
201 |             return this.$refs[item] && this.$refs[item].contains(e.target)
202 |         },
203 |         trans(key) {
204 |             return this.translation[key]
205 |         },
206 |         showNotif(msg, s = 'success') {
207 |             let title
208 |             let duration
209 | 
210 |             switch (s) {
211 |                 case 'danger':
212 |                     title = 'Error'
213 |                     duration = null
214 |                     break
215 |                 case 'warning':
216 |                     title = 'Warning'
217 |                     duration = 3
218 |                     break
219 |                 default:
220 |                     title = 'Success'
221 |                     duration = 2
222 |             }
223 | 
224 |             EventHub.fire('showNotif', {
225 |                 title: title,
226 |                 body: msg,
227 |                 type: s,
228 |                 duration: duration
229 |             })
230 |         },
231 |         updatePadding(s = true) {
232 |             !s
233 |                 ? this.listPadding = {'padding-top': 0}
234 |                 : this.$nextTick(() => {
235 |                     this.listPadding = {'padding-top': document.querySelector('.tag-list').clientHeight + 'px'}
236 |                 })
237 |         }
238 |     },
239 |     watch: {
240 |         tagName(val) {
241 |             if (val) {
242 |                 this.showAllTags = true
243 |                 return this.updatePadding()
244 |             }
245 | 
246 |             this.hideLists()
247 |         },
248 |         filteredList(val) {
249 |             if (!val.length) this.hideLists()
250 |         },
251 |         showAllTags(val) {
252 |             val
253 |                 ? this.updatePadding()
254 |                 : this.updatePadding(false)
255 |         }
256 |     }
257 | }
258 | </script>
259 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/index.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Search from './mixins/search'
 3 | import debounce from 'lodash/debounce'
 4 | 
 5 | export default {
 6 |     mixins: [Search],
 7 |     props: ['namesList'],
 8 |     data() {
 9 |         return {
10 |             names: this.namesList
11 |         }
12 |     },
13 |     computed: {
14 |         fuseLib() {
15 |             let list = this.namesList.map((e, i) => {
16 |                 return {
17 |                     id: i,
18 |                     name: e
19 |                 }
20 |             })
21 | 
22 |             return new Fuse(list, {keys: ['name']})
23 |         }
24 |     },
25 |     methods: {
26 |         inSearchList(item) {
27 |             return this.names.includes(item)
28 |         },
29 |         updateList: debounce(function () {
30 |             let val = this.searchFor
31 | 
32 |             if (val) {
33 |                 return this.names = this.fuseLib.search(val).map((e) => e.name)
34 |             }
35 | 
36 |             return this.names = this.namesList
37 |         }, 250)
38 |     },
39 |     watch: {
40 |         searchFor() {
41 |             this.updateList()
42 |         }
43 |     },
44 |     render() {}
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/manager.js:
--------------------------------------------------------------------------------
 1 | /*                Libs                */
 2 | window.EventHub = require('vuemit')
 3 | window.Fuse = require('fuse.js')
 4 | 
 5 | // axios
 6 | window.axios = require('axios')
 7 | axios.defaults.headers.common = {
 8 |     'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
 9 |     'X-Requested-With': 'XMLHttpRequest'
10 | }
11 | axios.interceptors.response.use(
12 |     (response) => response,
13 |     (error) => Promise.reject(error.response)
14 | )
15 | 
16 | // vue-tippy
17 | Vue.use(require('vue-tippy'), {
18 |     arrow: true,
19 |     touchHold: true,
20 |     inertia: true,
21 |     performance: true,
22 |     flipDuration: 0,
23 |     popperOptions: {
24 |         modifiers: {
25 |             preventOverflow: {enabled: false},
26 |             hide: {enabled: false}
27 |         }
28 |     }
29 | })
30 | 
31 | // vue-awesome
32 | import 'vue-awesome/icons/search'
33 | import 'vue-awesome/icons/times'
34 | import 'vue-awesome/icons/trash'
35 | import 'vue-awesome/icons/anchor'
36 | Vue.component('icon', require('vue-awesome/components/Icon').default)
37 | 
38 | /*                Components                */
39 | Vue.component('Tagos', require('./add.vue').default)
40 | Vue.component('TagosList', require('./table/list.vue').default)
41 | Vue.component('TagosIndex', require('./index.vue').default)
42 | Vue.component('MyNotification', require('vue-notif').default)
43 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/mixins/search.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     data() {
 3 |         return {
 4 |             searchFor: null
 5 |         }
 6 |     },
 7 |     methods: {
 8 |         resetSearch() {
 9 |             this.searchFor = null
10 |         }
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/table/item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition name="tag-slide-up">
  3 |         <div class="column is-3">
  4 |             <div :data-order="!more ? tagOrder : ''" class="box" @click="showMore()">
  5 |                 <!-- select -->
  6 |                 <section class="tag-ops">
  7 |                     <input :id="`tag-${tag.id}`" v-model="$parent.ids"
  8 |                            :value="tag.id"
  9 |                            type="checkbox"
 10 |                            class="cbx-checkbox">
 11 |                     <label :for="`tag-${tag.id}`" class="cbx is-marginless">
 12 |                         <svg width="14px" height="12px" viewBox="0 0 14 12"><polyline points="1 7.6 5 11 13 1"/></svg>
 13 |                     </label>
 14 |                 </section>
 15 | 
 16 |                 <template v-if="!more">
 17 |                     <!-- count -->
 18 |                     <p class="title">
 19 |                         <span class="icon"><icon name="anchor" scale="0.9"/></span>
 20 |                         <span>{{ tag.count }}</span>
 21 |                     </p>
 22 | 
 23 |                     <!-- title -->
 24 |                     <p class="title is-marginless">{{ getTitle(tag.name) }}</p>
 25 | 
 26 |                     <!-- slug -->
 27 |                     <p v-if="tag.count == 0" class="subtitle is-marginless">{{ getTitle(tag.slug) }}</p>
 28 |                     <a v-else
 29 |                        :href="getTagUrl"
 30 |                        target="_blank"
 31 |                        class="subtitle is-marginless has-text-info"
 32 |                        @click.stop>
 33 |                         {{ getTitle(tag.slug) }}
 34 |                     </a>
 35 | 
 36 |                     <div class="level m-t-20">
 37 |                         <!-- type -->
 38 |                         <div class="level-left">
 39 |                             <a v-if="tagType"
 40 |                                :href="getTagTypeUrl"
 41 |                                target="_blank"
 42 |                                class="tag is-primary"
 43 |                                @click.stop>
 44 |                                 {{ tagType }}
 45 |                             </a>
 46 |                         </div>
 47 |                         <!-- delete -->
 48 |                         <div class="level-right">
 49 |                             <button class="button is-danger"
 50 |                                     @click.stop="FormSubmit('deleteRoute', 'delete')">
 51 |                                 <span class="icon"><icon name="trash"/></span>
 52 |                             </button>
 53 |                         </div>
 54 |                     </div>
 55 |                 </template>
 56 | 
 57 |                 <template v-else>
 58 |                     <!-- order -->
 59 |                     <div class="field">
 60 |                         <label class="label">{{ trans('order') }}</label>
 61 |                         <input v-model="tagOrder" type="text" class="tag-input" @click.stop>
 62 |                     </div>
 63 | 
 64 |                     <!-- name -->
 65 |                     <div class="field">
 66 |                         <label class="label">{{ trans('name') }}</label>
 67 |                         <ul class="tag-list" @click.stop>
 68 |                             <li v-for="(v, k) in tagName" :data-lang="k" class="tag-item">
 69 |                                 <input v-model="tagName[k]"
 70 |                                        :placeholder="trans('tag_ph')"
 71 |                                        type="text"
 72 |                                        class="tag-input"
 73 |                                        @click.stop>
 74 |                             </li>
 75 |                         </ul>
 76 |                     </div>
 77 | 
 78 |                     <!-- type -->
 79 |                     <div class="field m-b-50">
 80 |                         <label class="label">{{ trans('type') }}</label>
 81 |                         <input v-model="tagType"
 82 |                                :placeholder="trans('type_ph')"
 83 |                                type="text"
 84 |                                class="tag-input"
 85 |                                @click.stop>
 86 |                     </div>
 87 | 
 88 |                     <!-- ops -->
 89 |                     <div class="level is-mobile">
 90 |                         <!-- update -->
 91 |                         <div class="level-left">
 92 |                             <button class="button is-success"
 93 |                                     @click.stop="FormSubmit('updateRoute', 'put')">
 94 |                                 {{ trans('update') }}
 95 |                             </button>
 96 |                         </div>
 97 | 
 98 |                         <!-- delete -->
 99 |                         <div class="level-right">
100 |                             <button class="button is-danger"
101 |                                     @click.stop="FormSubmit('deleteRoute', 'delete')">
102 |                                 <span class="icon"><icon name="trash"/></span>
103 |                             </button>
104 |                         </div>
105 |                     </div>
106 |                 </template>
107 |             </div>
108 |         </div>
109 |     </transition>
110 | </template>
111 | 
112 | <script>
113 | export default {
114 |     name: 'tag-item',
115 |     props: [
116 |         'item',
117 |         'index',
118 |         'updateRoute',
119 |         'deleteRoute',
120 |         'showRoute',
121 |         'typeRoute',
122 |         'showTypeRoute'
123 |     ],
124 |     data() {
125 |         return {
126 |             more: false,
127 |             tag: this.item,
128 |             tagName: this.item.name,
129 |             tagOrder: this.item.order,
130 |             tagType: this.item.type
131 |         }
132 |     },
133 |     mounted() {
134 |         // multi delete
135 |         EventHub.listen('tags-select-delete', (ids) => {
136 |             ids.map((e) => {
137 |                 return e == this.tag.id
138 |                     ? this.removeTagFromList(true)
139 |                     : false
140 |             })
141 |         })
142 | 
143 |         // multi update
144 |         EventHub.listen('tags-select-update', ({ids, type}) => {
145 |             ids.map((e) => {
146 |                 if (e == this.tag.id) {
147 |                     this.tag.type = type
148 |                     this.tagType = type
149 |                 }
150 | 
151 |                 return false
152 |             })
153 |         })
154 |     },
155 |     computed: {
156 |         getTagUrl() {
157 |             let type = this.tag.type
158 |             let slug = this.getTitle(this.tag.slug)
159 | 
160 |             return type
161 |                 ? this.showTypeRoute.replace(0, slug).replace(1, type)
162 |                 : this.showRoute.replace(0, slug)
163 |         },
164 |         getTagTypeUrl() {
165 |             return this.typeRoute.replace(0, this.tag.type)
166 |         }
167 |     },
168 |     methods: {
169 |         // helpers
170 |         getTitle(title) {
171 |             return this.$parent.getTitle(title)
172 |         },
173 |         showMore() {
174 |             this.more = !this.more
175 |         },
176 |         trans(key) {
177 |             return this.$parent.trans(key)
178 |         },
179 |         removeTagFromList(search = false) {
180 |             let parent = this.$parent.tags
181 | 
182 |             parent.splice(search ? parent.indexOf(this.item) : this.index, 1)
183 |         },
184 | 
185 |         // form
186 |         FormSubmit(route, type) {
187 |             // empty
188 |             let test = Object.keys(this.tagName).reduce((res, k) => res && !(!!this.tagName[k] || this.tagName[k] === false || !isNaN(parseInt(this.tagName[k]))), true)
189 |             if (test) {
190 |                 return this.$parent.showNotif(this.trans('no_val'), 'warning')
191 |             }
192 | 
193 |             axios({
194 |                 method: type,
195 |                 url: this[route].replace(0, this.tag.id),
196 |                 data: {
197 |                     name: this.tagName,
198 |                     type: this.tagType,
199 |                     order: this.tagOrder
200 |                 }
201 |             }).then(({data}) => {
202 |                 if (data.tag) {
203 |                     if (data.reload) {
204 |                         return location.reload()
205 |                     }
206 | 
207 |                     this.tag = data.tag
208 |                 }
209 | 
210 |                 this.showMore()
211 |                 this.$parent.showNotif(data.msg)
212 | 
213 |                 if (type == 'delete') {
214 |                     this.removeTagFromList()
215 |                 }
216 |             }).catch((err) => {
217 |                 this.$parent.showFormErrors(err.data.errors)
218 |                 console.error(err)
219 |             })
220 |         }
221 |     }
222 | }
223 | </script>
224 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/table/list.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import TagosItem from './item.vue'
  3 | import Search from './../mixins/search'
  4 | import debounce from 'lodash/debounce'
  5 | import orderBy from 'lodash/orderBy'
  6 | 
  7 | export default {
  8 |     components: {TagosItem},
  9 |     name: 'tag-index',
 10 |     mixins: [Search],
 11 |     props: ['list', 'selectFirst', 'translations'],
 12 |     data() {
 13 |         return {
 14 |             nameLocale: '',
 15 |             newItem: {
 16 |                 type: null,
 17 |                 tag: {}
 18 |             },
 19 |             multiTypeName: '',
 20 |             tags: this.list,
 21 |             ids: [],
 22 |             searchFieldType: 'name',
 23 |             searchFields: [
 24 |                 'name',
 25 |                 'type'
 26 |             ]
 27 |         }
 28 |     },
 29 |     mounted() {
 30 |         this.nameLocale = this.selectFirst
 31 |         this.tags = orderBy(this.tags, ['count', 'order'], ['desc', 'asc'])
 32 |     },
 33 |     computed: {
 34 |         itemsCount() {
 35 |             return this.tags.length
 36 |         }
 37 |     },
 38 |     methods: {
 39 |         // save new item
 40 |         SaveNew(event) {
 41 |             let newTag = this.newItem.tag
 42 |             let newType = this.newItem.type
 43 | 
 44 |             // empty
 45 |             if (Object.keys(newTag).length == 0) {
 46 |                 return this.showNotif(this.trans('no_val'), 'warning')
 47 |             }
 48 | 
 49 |             // exist
 50 |             let name = newTag[this.nameLocale]
 51 |             let check = this.tags.some((e) => {
 52 |                 return e.name[this.nameLocale] == name && e.type == newType
 53 |             })
 54 | 
 55 |             if (check) {
 56 |                 this.searchFor = name
 57 |                 this.$refs.search.focus()
 58 |                 return this.showNotif(this.trans('tag_exist'), 'danger')
 59 |             }
 60 | 
 61 |             // submit
 62 |             axios.post(event.target.action, {
 63 |                 name: newTag,
 64 |                 type: newType
 65 |             }).then(({data}) => {
 66 |                 document.querySelectorAll('.toggle-pad').forEach((e) => {
 67 |                     e.value = ''
 68 |                 })
 69 | 
 70 |                 this.newItem = {
 71 |                     type: null,
 72 |                     tag: {}
 73 |                 }
 74 |                 this.list.push(data.item)
 75 |                 this.showNotif(data.msg)
 76 |             }).catch((err) => {
 77 |                 this.showFormErrors(err.data.errors)
 78 |                 console.error(err)
 79 |             })
 80 |         },
 81 |         // delete multi
 82 |         DeleteTags(event) {
 83 |             axios.post(event.target.action, {
 84 |                 ids: this.ids
 85 |             }).then(({data}) => {
 86 |                 EventHub.fire('tags-select-delete', this.ids)
 87 |                 this.ids = []
 88 |                 this.showNotif(data.msg)
 89 |             }).catch((err) => {
 90 |                 this.showFormErrors(err.data.errors)
 91 |                 console.error(err)
 92 |             })
 93 |         },
 94 |         // update multi
 95 |         UpdateTags(event) {
 96 |             let ids = this.ids
 97 |             let type = this.multiTypeName
 98 | 
 99 |             axios.post(event.target.action, {
100 |                 ids: ids,
101 |                 type: type
102 |             }).then(({data}) => {
103 |                 EventHub.fire('tags-select-update', {
104 |                     ids: ids,
105 |                     type: type
106 |                 })
107 | 
108 |                 this.ids = []
109 |                 this.multiTypeName = ''
110 |                 this.showNotif(data.msg)
111 |             }).catch((err) => {
112 |                 this.showFormErrors(err.data.errors)
113 |                 console.error(err)
114 |             })
115 |         },
116 | 
117 |         // multi locale
118 |         showName(code) {
119 |             return this.nameLocale == code
120 |         },
121 |         addNewItem(code, event) {
122 |             return this.newItem.tag[code] = event.target.value
123 |         },
124 | 
125 |         // helpers
126 |         selectAll() {
127 |             // clear
128 |             if (this.ids.length > 0) {
129 |                 return this.ids = []
130 |             }
131 | 
132 |             // add
133 |             this.ids = this.tags.map((e) => e.id)
134 |         },
135 |         getTitle(title) {
136 |             let locale = this.selectFirst
137 | 
138 |             return title.hasOwnProperty(locale) ? title[locale] : ''
139 |         },
140 |         trans(key) {
141 |             return this.translations[key]
142 |         },
143 |         showFormErrors(err) {
144 |             Object.values(err).map((e) => {
145 |                 this.showNotif(Object.values(e)[0], 'danger')
146 |             })
147 |         },
148 |         showNotif(msg, s = 'success') {
149 |             let title
150 |             let duration
151 | 
152 |             switch (s) {
153 |                 case 'danger':
154 |                     title = 'Error'
155 |                     duration = null
156 |                     break
157 |                 case 'warning':
158 |                     title = 'Warning'
159 |                     duration = 3
160 |                     break
161 |                 default:
162 |                     title = 'Success'
163 |                     duration = 2
164 |             }
165 | 
166 |             EventHub.fire('showNotif', {
167 |                 title: title,
168 |                 body: msg,
169 |                 type: s,
170 |                 duration: duration
171 |             })
172 |         },
173 |         updateList: debounce(function () {
174 |             let val = this.searchFor
175 |             let list = this.list
176 | 
177 |             if (val) {
178 |                 const locale = this.selectFirst
179 |                 let type = this.searchFieldType
180 |                 let test = type == 'name'
181 | 
182 |                 return this.tags = new Fuse(list, {keys: test ? [`name.${locale}`] : ['type']}).search(val)
183 |             }
184 | 
185 |             return this.tags = list
186 |         }, 250)
187 |     },
188 |     watch: {
189 |         searchFor(val) {
190 |             this.updateList()
191 |         }
192 |     },
193 |     render() {}
194 | }
195 | </script>
196 | 


--------------------------------------------------------------------------------
/src/resources/assets/sass/_checkbox.scss:
--------------------------------------------------------------------------------
 1 | // https://codepen.io/andreasstorm/pen/ybPwre
 2 | $grey-lighter: #dbdbdb;
 3 | $primary: #23d160;
 4 | 
 5 | .cbx-checkbox {
 6 |     &[type='checkbox'],
 7 |     &:checked {
 8 |         display: none;
 9 |     }
10 | }
11 | 
12 | .cbx {
13 |     position: relative;
14 |     top: 1px;
15 |     display: inline-block;
16 |     width: 14px;
17 |     height: 14px;
18 |     margin-right: 6px;
19 |     cursor: pointer;
20 |     vertical-align: sub;
21 |     border: 1px solid $grey-lighter;
22 |     border-radius: 3px;
23 | 
24 |     &::before {
25 |         position: absolute;
26 |         top: 50%;
27 |         left: 50%;
28 |         width: 20px;
29 |         height: 20px;
30 |         margin: -10px 0 0 -10px;
31 |         content: '';
32 |         transform: scale(0);
33 |         border-radius: 100%;
34 |         background: $primary;
35 |     }
36 | 
37 |     &::after {
38 |         position: absolute;
39 |         top: 5px;
40 |         left: 5px;
41 |         width: 2px;
42 |         height: 2px;
43 |         content: '';
44 |         transform: scale(0);
45 |         border-radius: 2px;
46 |         box-shadow: 0 -18px 0 $primary, 12px -12px 0 $primary, 18px 0 0 $primary, 12px 12px 0 $primary, 0 18px 0 $primary, -12px 12px 0 $primary, -18px 0 0 $primary, -12px -12px 0 $primary;
47 |     }
48 | 
49 |     svg {
50 |         position: relative;
51 |         top: -3px;
52 |         transform: scale(0);
53 |         fill: none;
54 |         stroke-linecap: round;
55 |         stroke-linejoin: round;
56 | 
57 |         polyline {
58 |             stroke: $primary;
59 |             stroke-width: 2;
60 |         }
61 |     }
62 | }
63 | 
64 | input:checked + .cbx {
65 |     top: 0;
66 |     border-color: transparent;
67 | 
68 |     &::before {
69 |         transition: all 0.3s ease;
70 |         transform: scale(1);
71 |         opacity: 0;
72 |     }
73 | 
74 |     &::after {
75 |         transition: all 0.6s ease;
76 |         transform: scale(1);
77 |         opacity: 0;
78 |     }
79 | 
80 |     svg {
81 |         transition: all 0.4s ease;
82 |         transition-delay: 0.1s;
83 |         transform: scale(1);
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/resources/assets/sass/_vue.scss:
--------------------------------------------------------------------------------
 1 | $list: (tag-slide-up);
 2 | 
 3 | @each $class in $list {
 4 |     .#{$class}-move,
 5 |     .#{$class}-enter-active,
 6 |     .#{$class}-leave-active {
 7 |         transition: all 0.3s ease;
 8 |     }
 9 | 
10 |     .#{$class}-enter,
11 |     .#{$class}-leave-to {
12 |         opacity: 0;
13 |     }
14 | }
15 | 
16 | .tag-slide-up-enter,
17 | .tag-slide-up-leave-to {
18 |     transform: translateY(-30px);
19 | }
20 | 


--------------------------------------------------------------------------------
/src/resources/assets/sass/style.scss:
--------------------------------------------------------------------------------
  1 | @import './checkbox';
  2 | @import './vue';
  3 | 
  4 | [v-cloak] {
  5 |     display: none;
  6 | }
  7 | 
  8 | .link {
  9 |     cursor: pointer;
 10 | }
 11 | 
 12 | .m-b-50 {
 13 |     margin-bottom: 50px;
 14 | }
 15 | 
 16 | .m-t-20 {
 17 |     margin-top: 20px;
 18 | }
 19 | 
 20 | // input multi-locale
 21 | .input-box {
 22 |     position: relative;
 23 | }
 24 | 
 25 | .toggle-locale {
 26 |     position: absolute;
 27 |     z-index: 5;
 28 |     top: 0;
 29 |     right: 1px;
 30 |     opacity: 0.3;
 31 | 
 32 |     &:hover {
 33 |         opacity: 1;
 34 |     }
 35 | 
 36 |     &::after {
 37 |         display: none !important;
 38 |     }
 39 | 
 40 |     select {
 41 |         font-weight: bold;
 42 |         padding: 0.4rem 0.5rem 0.5rem !important;
 43 |         text-transform: capitalize;
 44 |         border: none;
 45 |         background-color: transparent;
 46 |     }
 47 | }
 48 | 
 49 | .toggle-pad {
 50 |     padding-right: 32px;
 51 | }
 52 | 
 53 | // editor
 54 | .box {
 55 |     position: relative;
 56 |     overflow: hidden;
 57 |     cursor: pointer;
 58 |     transition: all 0.3s ease;
 59 |     box-shadow: 0 6px 20px rgba(black, 0.08);
 60 | 
 61 |     &:hover {
 62 |         transform: translateY(-0.7rem);
 63 |         box-shadow: 0 15px 30px 0 rgba(black, 0.11), 0 5px 15px 0 rgba(black, 0.08);
 64 |     }
 65 | 
 66 |     &::before {
 67 |         font-size: 8rem;
 68 |         position: absolute;
 69 |         top: 50%;
 70 |         right: -5%;
 71 |         content: attr(data-order);
 72 |         transform: translateY(-50%);
 73 |         color: rgba(black, 0.05);
 74 |     }
 75 | }
 76 | 
 77 | .tag-ops {
 78 |     width: 100%;
 79 |     text-align: right;
 80 | }
 81 | 
 82 | .tag-list {
 83 |     margin: 0;
 84 | }
 85 | 
 86 | .tag-item {
 87 |     position: relative;
 88 | 
 89 |     &:not(:first-of-type) {
 90 |         padding-top: 5px;
 91 |     }
 92 | 
 93 |     &::before {
 94 |         position: absolute;
 95 |         top: 0.5rem;
 96 |         right: 0.5rem;
 97 |         content: attr(data-lang);
 98 |         cursor: default;
 99 |         text-transform: capitalize;
100 |         opacity: 0.5;
101 |     }
102 | }
103 | 
104 | .tag-input {
105 |     font-size: 1rem;
106 |     line-height: 1;
107 |     width: calc(100% - 0.7rem);
108 |     height: 100%;
109 |     margin-left: 0.7rem;
110 |     padding: 0.5rem;
111 |     border: none;
112 |     border-left: 5px solid #edf2f3;
113 |     background-color: #f9fbfb;
114 | 
115 |     &:focus,
116 |     &:active,
117 |     &:hover {
118 |         border-left-color: darken(#edf2f3, 20%);
119 |     }
120 | }
121 | 


--------------------------------------------------------------------------------
/src/resources/lang/en/messages.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return array (
 4 |   'add_new' => 'Add new',
 5 |   'count' => 'Count',
 6 |   'delete' => 'Delete',
 7 |   'delete_selected' => 'Delete Selected',
 8 |   'find' => 'Find',
 9 |   'model_created' => 'Model Created !',
10 |   'model_deleted' => 'Model Deleted !',
11 |   'model_updated' => 'Model Updated !',
12 |   'models_deleted' => 'Models Deleted !',
13 |   'models_updated' => 'Models Updated !',
14 |   'name' => 'Name',
15 |   'no_entries' => 'No Data To Display',
16 |   'no_val' => 'Maybe You Should Add Something First ?!!',
17 |   'ops' => 'Operations',
18 |   'order' => 'Order',
19 |   'select_all' => 'Select All',
20 |   'select_non' => 'Select Non',
21 |   'slug' => 'Slug',
22 |   'tag_exist' => 'Tag Already Exist',
23 |   'tag_ph' => 'tag name',
24 |   'tags' => 'Tags',
25 |   'type' => 'Type',
26 |   'type_ph' => 'type name',
27 |   'update' => 'Update',
28 |   'clear_list' => 'Clear Tags List',
29 | );


--------------------------------------------------------------------------------
/src/resources/views/editor.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('Tagos::partials.shared')
  2 | @section('title', trans('Tagos::messages.tags'))
  3 | 
  4 | @section('content')
  5 |     <tagos-list inline-template v-cloak
  6 |         select-first="{{ app()->getLocale() }}"
  7 |         :list="{{ json_encode($tags) }}"
  8 |         :translations="{{ json_encode([
  9 |             'no_val' => trans('Tagos::messages.no_val'), 
 10 |             'tag_exist' => trans('Tagos::messages.tag_exist'), 
 11 |             'tag_ph' => trans('Tagos::messages.tag_ph'), 
 12 |             'type_ph' => trans('Tagos::messages.type_ph'), 
 13 |             'update' => trans('Tagos::messages.update'), 
 14 |             'order' => trans('Tagos::messages.order'), 
 15 |             'name' => trans('Tagos::messages.name'), 
 16 |             'type' => trans('Tagos::messages.type'), 
 17 |         ]) }}">
 18 |         <div class="container">
 19 |             <div class="level">
 20 |                 {{-- count --}}
 21 |                 <div class="level-left">
 22 |                     <p class="title">
 23 |                         {{ trans('Tagos::messages.tags') }} "<span>@{{ itemsCount }}</span>"
 24 |                     </p>
 25 |                 </div>
 26 | 
 27 |                 {{-- search --}}
 28 |                 <div class="level-right">
 29 |                     <div class="field has-addons has-addons-right">
 30 |                         {{-- type --}}
 31 |                         <p class="control">
 32 |                             <span class="select">
 33 |                                 <select v-model="searchFieldType">
 34 |                                     <option v-for="n in searchFields" :key="n">@{{ n }}</option>
 35 |                                 </select>
 36 |                             </span>
 37 |                         </p>
 38 |                         {{-- input --}}
 39 |                         <p class="control has-icons-left">
 40 |                             <input class="input"
 41 |                                 ref="search"
 42 |                                 type="text"
 43 |                                 v-model="searchFor"
 44 |                                 placeholder="{{ trans('Tagos::messages.find') }}">
 45 |                             <span class="icon is-left"><icon name="search"></icon></span>
 46 |                         </p>
 47 |                         {{-- clear --}}
 48 |                         <p class="control">
 49 |                             <button class="button is-black"
 50 |                                 :disabled="!searchFor"
 51 |                                 @click="resetSearch()">
 52 |                                 <span class="icon"><icon name="times"></icon></span>
 53 |                             </button>
 54 |                         </p>
 55 |                     </div>
 56 |                 </div>
 57 |             </div>
 58 | 
 59 |             {{-- update multi --}}
 60 |             <div class="level">
 61 |                 <div class="level-left">
 62 |                     <div class="field has-addons is-marginless">
 63 |                         {{-- delete multi --}}
 64 |                         <div class="control">
 65 |                             <form action="{{ route('tagos.destroy_multi') }}"
 66 |                                 method="POST"
 67 |                                 @submit.prevent="DeleteTags($event)">
 68 |                                 <button type="submit"
 69 |                                     class="button is-danger"
 70 |                                     :disabled="ids.length < 1">
 71 |                                     {{ trans('Tagos::messages.delete') }}
 72 |                                 </button>
 73 |                             </form>
 74 |                         </div>
 75 | 
 76 |                         {{-- select multi  --}}
 77 |                         <div class="control">
 78 |                             <div class="button" @click="selectAll()">
 79 |                                 <template v-if="ids.length < 1">{{ trans('Tagos::messages.select_all') }}</template>
 80 |                                 <template v-else>{{ trans('Tagos::messages.select_non') }}</template>
 81 |                             </div>
 82 |                         </div>
 83 |                     </div>
 84 |                 </div>
 85 | 
 86 |                 {{-- update --}}
 87 |                 <div class="level-right">
 88 |                     <form action="{{ route('tagos.update_multi') }}" method="POST" @submit.prevent="UpdateTags($event)">
 89 |                         <div class="field has-addons">
 90 |                             <div class="control">
 91 |                                 <input class="input" v-model="multiTypeName" placeholder="{{ trans('Tagos::messages.type_ph') }}">
 92 |                             </div>
 93 |                             <div class="control">
 94 |                                 <button type="submit"
 95 |                                     class="button is-success"
 96 |                                     :disabled="ids.length < 1">
 97 |                                     {{ trans('Tagos::messages.update') }}
 98 |                                 </button>
 99 |                             </div>
100 |                         </div>
101 |                     </form>
102 |                 </div>
103 |             </div>
104 | 
105 |             {{-- add new --}}
106 |             <div class="field">
107 |                 <form action="{{ route('tagos.store') }}" method="post" @submit.prevent="SaveNew($event)">
108 |                     <div class="field has-addons">
109 |                         {{-- name --}}
110 |                         <div class="control is-expanded input-box">
111 |                             <div class="select toggle-locale">
112 |                                 <select v-model="nameLocale">
113 |                                     @foreach($locales as $code)
114 |                                         <option value="{{ $code }}">{{ $code }}</option>
115 |                                     @endforeach
116 |                                 </select>
117 |                             </div>
118 |                             @foreach($locales as $code)
119 |                                 <input type="text"
120 |                                     name="name[{{ $code }}]"
121 |                                     class="input toggle-pad"
122 |                                     v-show="showName('{{ $code }}')"
123 |                                     @input="addNewItem('{{ $code }}', $event)"
124 |                                     placeholder="{{ trans('Tagos::messages.tag_ph') }}">
125 |                             @endforeach
126 |                             @if($errors->has('name'))
127 |                                 <p class="help is-danger">
128 |                                     {{ $errors->first('name') }}
129 |                                 </p>
130 |                             @endif
131 |                         </div>
132 |                         {{-- type --}}
133 |                         <div class="control">
134 |                             <input type="text" class="input" v-model="newItem.type" placeholder="{{ trans('Tagos::messages.type_ph') }}">
135 |                         </div>
136 |                         {{-- submit --}}
137 |                         <div class="control">
138 |                             <button type="submit" class="button is-link">{{ trans('Tagos::messages.add_new') }}</button>
139 |                         </div>
140 |                     </div>
141 |                 </form>
142 |             </div>
143 |         </div>
144 |         <br>
145 | 
146 |         {{-- list --}}
147 |         <div class="columns is-multiline">
148 |             <tagos-item v-for="(tag, i) in tags"
149 |                 :key="tag.id"
150 |                 :item="tag"
151 |                 :index="i"
152 |                 show-route="{{ route('tagos.show', 0) }}"
153 |                 type-route="{{ route('tagos.index_type', 0) }}"
154 |                 show-type-route="{{ route('tagos.show_type', [1, 0]) }}"
155 |                 update-route="{{ route('tagos.update', 0) }}"
156 |                 delete-route="{{ route('tagos.destroy', 0) }}">
157 |             </tagos-item>
158 |         </div>
159 |     </tagos-list>
160 | @endsection
161 | 


--------------------------------------------------------------------------------
/src/resources/views/index.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('Tagos::partials.shared')
 2 | 
 3 | @section('content')
 4 |     <tagos-index inline-template v-cloak :names-list="{{ $tags->pluck('name') }}">
 5 |         <div class="column">
 6 |             {{-- search --}}
 7 |             <div class="field has-addons has-addons-right">
 8 |                 {{-- input --}}
 9 |                 <p class="control has-icons-left">
10 |                     <input class="input"
11 |                         type="text"
12 |                         v-model="searchFor"
13 |                         placeholder="{{ trans('Tagos::messages.find') }}">
14 |                     <span class="icon is-left"><icon name="search"></icon></span>
15 |                 </p>
16 |                 {{-- clear --}}
17 |                 <p class="control">
18 |                     <button class="button is-black"
19 |                         :disabled="!searchFor"
20 |                         @click="resetSearch()">
21 |                         <span class="icon"><icon name="times"></icon></span>
22 |                     </button>
23 |                 </p>
24 |             </div>
25 | 
26 |             {{-- list --}}
27 |             <div class="field is-grouped is-grouped-multiline">
28 |                 @foreach($tags as $tag)
29 |                     <transition name="tag-slide-up">
30 |                         <div class="control" v-show="inSearchList('{{ $tag->name }}')">
31 |                             @if($tag->type)
32 |                                 @if(isset($showType) && $showType == true)
33 |                                     <a href="{{ route('tagos.show_type', [$tag->type, $tag->slug]) }}" class="tags has-addons">
34 |                                         <span class="tag is-primary">{{ $tag->name }}</span>
35 |                                         <span class="tag">{{ $tag->type }}</span>
36 |                                     </a>
37 |                                 @else
38 |                                     <a href="{{ route('tagos.show_type', [$tag->type, $tag->slug]) }}" class="tag is-primary" v-show="inSearchList('{{ $tag->name }}')">{{ $tag->name }}</a>
39 |                                 @endif
40 |                             @else
41 |                                 <a href="{{ route('tagos.show', $tag->slug) }}" class="tag is-primary">{{ $tag->name }}</a>
42 |                             @endif
43 |                         </div>
44 |                     </transition>
45 |                 @endforeach
46 |             </div>
47 |         </div>
48 |     </tagos-index>
49 | @endsection
50 | 


--------------------------------------------------------------------------------
/src/resources/views/partials/add.blade.php:
--------------------------------------------------------------------------------
 1 | <tagos :old-list="{{ old('tags') ?? $old ?? '[]' }}"
 2 |     :tags-list="{{ app('tagos')->getTags() ?? '[]' }}"
 3 |     :translation="{{ json_encode([
 4 |         'tag_exist' => trans('Tagos::messages.tag_exist'), 
 5 |         'no_val' => trans('Tagos::messages.no_val'), 
 6 |         'add_new' => trans('Tagos::messages.add_new'), 
 7 |         'tag_ph' => trans('Tagos::messages.tag_ph'), 
 8 |         'type_ph' => trans('Tagos::messages.type_ph'), 
 9 |         'clear_list' => trans('Tagos::messages.clear_list'), 
10 |     ]) }}">
11 | </tagos>
12 | 


--------------------------------------------------------------------------------
/src/resources/views/partials/display.blade.php:
--------------------------------------------------------------------------------
 1 | @if(count($tags))
 2 |     <div class="field is-grouped is-grouped-multiline">
 3 |         @foreach($tags as $tag)
 4 |             <div class="control">
 5 |                 @if($tag->type)
 6 |                     @if(isset($showType) && $showType == true)
 7 |                         <a href="{{ route('tagos.show_type', [$tag->type, $tag->slug]) }}" class="tags has-addons">
 8 |                             <span class="tag is-primary">{{ $tag->name }}</span>
 9 |                             <span class="tag">{{ $tag->type }}</span>
10 |                         </a>
11 |                     @else
12 |                         <a href="{{ route('tagos.show_type', [$tag->type, $tag->slug]) }}" class="tag is-primary">{{ $tag->name }}</a>
13 |                     @endif
14 |                 @else
15 |                     <a href="{{ route('tagos.show', $tag->slug) }}" class="tag is-primary">{{ $tag->name }}</a>
16 |                 @endif
17 |             </div>
18 |         @endforeach
19 |     </div>
20 | @endif
21 | 


--------------------------------------------------------------------------------
/src/resources/views/partials/shared.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 8 |     <title>@yield('title', '')</title>
 9 | 
10 |     {{-- styles --}}
11 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
12 |     <link rel="stylesheet" href="{{ mix('assets/vendor/Tagos/style.css') }}">
13 | </head>
14 | 
15 | <body>
16 |     <section id="app" v-cloak>
17 | 
18 |         {{-- notif --}}
19 |         <div class="notif-container">
20 |             <my-notification></my-notification>
21 |         </div>
22 | 
23 |         {{-- Body --}}
24 |         <div class="container">
25 |             <div class="columns">
26 |                 <div class="column">
27 |                     @yield('content')
28 |                 </div>
29 |             </div>
30 |         </div>
31 |     </section>
32 | 
33 |     {{-- app --}}
34 |     <script src="{{ asset("js/app.js") }}"></script>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/src/resources/views/show.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('Tagos::partials.shared')
 2 | 
 3 | @section('content')
 4 |     <div class="columns is-multiline">
 5 |         @foreach($models as $model => $value)
 6 |             @foreach($value as $item)
 7 |                 <div class="column is-3">
 8 |                     <div class="card">
 9 |                         <div class="card-image link">
10 |                             <figure class="image is-4by3">
11 |                                 <img src="//bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
12 |                             </figure>
13 |                         </div>
14 |                         <div class="card-content">
15 |                             {{-- date --}}
16 |                             <p>{{ $item->created_at->format('F d, Y') }}</p>
17 | 
18 |                             <div class="content">
19 |                                 {{-- title --}}
20 |                                 <h3 class="title">{{ $item->title }}</h3>
21 |                                 <br>
22 |                                 {{-- tags --}}
23 |                                 @include('Tagos::partials.display', ['tags' => $one->tags])
24 |                             </div>
25 |                         </div>
26 |                     </div>
27 |                 </div>
28 |             @endforeach
29 |         @endforeach
30 |     </div>
31 | @endsection


--------------------------------------------------------------------------------