├── .eslintignore
├── resources
    ├── css
    │   └── app.css
    ├── js
    │   ├── components
    │   │   ├── Label.vue
    │   │   ├── icons
    │   │   │   ├── ChevronLeft.vue
    │   │   │   ├── ChevronRight.vue
    │   │   │   ├── Table.vue
    │   │   │   ├── Sizable.js
    │   │   │   ├── Database.vue
    │   │   │   ├── Eye.vue
    │   │   │   ├── Cog.vue
    │   │   │   └── Loader.vue
    │   │   ├── Input.vue
    │   │   ├── Button.vue
    │   │   ├── SecondaryButton.vue
    │   │   ├── SqlEditor.vue
    │   │   ├── Loader.vue
    │   │   ├── DialogModal.vue
    │   │   ├── DataCell.vue
    │   │   ├── SideNavigation.vue
    │   │   ├── Modal.vue
    │   │   ├── DataTable.vue
    │   │   └── TableStructure.vue
    │   ├── base.js
    │   ├── app.js
    │   ├── router.js
    │   ├── components.js
    │   └── views
    │   │   ├── SqlQuery.vue
    │   │   ├── Dashboard.vue
    │   │   └── TableDetails.vue
    └── views
    │   ├── partials
    │       └── logo.blade.php
    │   └── app.blade.php
├── .husky
    └── pre-commit
├── src
    ├── TableIndex.php
    ├── InformationSchema.php
    ├── Http
    │   ├── Middleware
    │   │   ├── EnsureUserIsAuthorized.php
    │   │   └── EnsureUpToDateAssets.php
    │   └── Controllers
    │   │   ├── TableRowsController.php
    │   │   ├── SqlQueryController.php
    │   │   ├── SelectConnectionController.php
    │   │   └── HomeController.php
    ├── Console
    │   ├── PublishCommand.php
    │   └── InstallCommand.php
    ├── DBObject.php
    ├── DatabaseRepositoryFactory.php
    ├── Contracts
    │   └── DatabaseRepository.php
    ├── DibiApplicationServiceProvider.php
    ├── DibiServiceProvider.php
    ├── Table.php
    ├── TableColumn.php
    ├── Repositories
    │   ├── SqlsrvDatabaseRepository.php
    │   ├── MysqlDatabaseRepository.php
    │   └── AbstractDatabaseRepository.php
    └── Dibi.php
├── volar.config.js
├── postcss.config.js
├── jsconfig.json
├── public
    ├── mix-manifest.json
    ├── app.js.LICENSE.txt
    └── app.css
├── tailwind.config.js
├── routes
    └── web.php
├── .eslintrc.js
├── stubs
    └── DibiServiceProvider.stub
├── phpunit.xml.dist
├── LICENSE.md
├── webpack.mix.js
├── config
    └── dibi.php
├── composer.json
├── package.json
├── README.md
└── .php-cs-fixer.dist.php


/.eslintignore:
--------------------------------------------------------------------------------
1 | public
2 | node_modules
3 | vendor
4 | 


--------------------------------------------------------------------------------
/resources/css/app.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/src/TableIndex.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | namespace Cuonggt\Dibi;
4 | 
5 | class TableIndex extends DBObject
6 | {
7 | }
8 | 


--------------------------------------------------------------------------------
/volar.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: [
3 |         require('@volar-plugins/vetur')(),
4 |     ],
5 | };
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |     },
6 | };
7 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |     "vueCompilerOptions": {
3 |         "target": 2.7,
4 |         "extensions": [
5 |             ".vue"
6 |         ]
7 |     }
8 | }
9 | 


--------------------------------------------------------------------------------
/public/mix-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "/app.js": "/app.js?id=6a2b252b3048c8659b7c81b779dd6937",
3 |     "/app.css": "/app.css?id=1e1fb74081edd5ab3f2744353ec35d3d"
4 | }
5 | 


--------------------------------------------------------------------------------
/resources/js/components/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <label class="block font-medium text-sm text-gray-700">
 3 |         <span v-if="value">{{ value }}</span>
 4 |         <span v-else><slot /></span>
 5 |     </label>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |     props: {
11 |         value: {
12 |             type: String,
13 |             default: null,
14 |         },
15 |     },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/InformationSchema.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | use JsonSerializable;
 6 | 
 7 | class InformationSchema implements JsonSerializable
 8 | {
 9 |     public $tables = [];
10 | 
11 |     public function __construct(array $tables = [])
12 |     {
13 |         $this->tables = $tables;
14 |     }
15 | 
16 |     public function jsonSerialize()
17 |     {
18 |         return [
19 |             'tables' => $this->tables,
20 |         ];
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/resources/views/partials/logo.blade.php:
--------------------------------------------------------------------------------
 1 | <svg
 2 |     fill="{{ $fillColor ?? '#25C4F2' }}"
 3 |     viewBox="{{ $viewBox ?? '0 0 20 20' }}"
 4 |     class="{{ $class ?? 'w-12 h-12' }}"
 5 | >
 6 |     <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
 7 |     <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
 8 |     <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme');
 2 | 
 3 | module.exports = {
 4 |     content: [
 5 |         './resources/**/*.blade.php',
 6 |         './resources/**/*.{js,ts}',
 7 |         './resources/**/*.vue',
 8 |     ],
 9 | 
10 |     theme: {
11 |         extend: {
12 |             fontFamily: {
13 |                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],
14 |             },
15 |         },
16 |     },
17 | 
18 |     plugins: [require('@tailwindcss/forms')],
19 | };
20 | 


--------------------------------------------------------------------------------
/src/Http/Middleware/EnsureUserIsAuthorized.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Middleware;
 4 | 
 5 | use Cuonggt\Dibi\Dibi;
 6 | 
 7 | class EnsureUserIsAuthorized
 8 | {
 9 |     /**
10 |      * Handle the incoming request.
11 |      *
12 |      * @param  \Illuminate\Http\Request  $request
13 |      * @param  \Closure  $next
14 |      * @return \Illuminate\Http\Response
15 |      */
16 |     public function handle($request, $next)
17 |     {
18 |         return Dibi::check($request) ? $next($request) : abort(403);
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Http/Controllers/TableRowsController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Controllers;
 4 | 
 5 | use Cuonggt\Dibi\Dibi;
 6 | use Illuminate\Http\Request;
 7 | use Illuminate\Routing\Controller;
 8 | 
 9 | class TableRowsController extends Controller
10 | {
11 |     /**
12 |      * @param  string  $table
13 |      * @return \Illuminate\Http\JsonResponse
14 |      */
15 |     public function filter(Request $request, $table)
16 |     {
17 |         return response()->json(Dibi::databaseRepository()->rows($table, $request));
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/Http/Controllers/SqlQueryController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Controllers;
 4 | 
 5 | use Cuonggt\Dibi\Dibi;
 6 | use Illuminate\Http\Request;
 7 | use Illuminate\Routing\Controller;
 8 | 
 9 | class SqlQueryController extends Controller
10 | {
11 |     public function run(Request $request)
12 |     {
13 |         return [
14 |             'results' => collect(explode(';', $request->sql_query))->filter()->map(function ($query) {
15 |                 return Dibi::databaseRepository()->runSqlQuery($query);
16 |             }),
17 |         ];
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/ChevronLeft.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         xmlns="http://www.w3.org/2000/svg"
 4 |         fill="none"
 5 |         viewBox="0 0 24 24"
 6 |         stroke="currentColor"
 7 |         :class="sizeClass"
 8 |     >
 9 |         <path
10 |             stroke-linecap="round"
11 |             stroke-linejoin="round"
12 |             stroke-width="2"
13 |             d="M15 19l-7-7 7-7"
14 |         />
15 |     </svg>
16 | </template>
17 | 
18 | <script>
19 | import Sizable from './Sizable';
20 | 
21 | export default {
22 |     mixins: [Sizable],
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/ChevronRight.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         xmlns="http://www.w3.org/2000/svg"
 4 |         fill="none"
 5 |         viewBox="0 0 24 24"
 6 |         stroke="currentColor"
 7 |         :class="sizeClass"
 8 |     >
 9 |         <path
10 |             stroke-linecap="round"
11 |             stroke-linejoin="round"
12 |             stroke-width="2"
13 |             d="M9 5l7 7-7 7"
14 |         />
15 |     </svg>
16 | </template>
17 | 
18 | <script>
19 | import Sizable from './Sizable';
20 | 
21 | export default {
22 |     mixins: [Sizable],
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         fill="currentColor"
 4 |         viewBox="0 0 24 24"
 5 |         :class="sizeClass"
 6 |     >
 7 |         <path
 8 |             fill-rule="evenodd"
 9 |             d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z"
10 |             clip-rule="evenodd"
11 |         />
12 |     </svg>
13 | </template>
14 | 
15 | <script>
16 | import Sizable from './Sizable';
17 | 
18 | export default {
19 |     mixins: [Sizable],
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Sizable.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         size: {
 4 |             default: '8',
 5 |         },
 6 |     },
 7 | 
 8 |     computed: {
 9 |         sizeClass() {
10 |             return {
11 |                 2: 'h-2 w-2',
12 |                 3: 'h-3 w-3',
13 |                 4: 'h-4 w-4',
14 |                 5: 'h-5 w-5',
15 |                 6: 'h-6 w-6',
16 |                 8: 'h-8 w-8',
17 |                 12: 'h-12 w-12',
18 |                 16: 'h-16 w-16',
19 |                 20: 'h-20 w-20',
20 |             }[this.size];
21 |         },
22 |     },
23 | };
24 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Database.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         fill="currentColor"
 4 |         viewBox="0 0 20 20"
 5 |         :class="sizeClass"
 6 |     >
 7 |         <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
 8 |         <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
 9 |         <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
10 |     </svg>
11 | </template>
12 | 
13 | <script>
14 | import Sizable from './Sizable';
15 | 
16 | export default {
17 |     mixins: [Sizable],
18 | };
19 | </script>
20 | 


--------------------------------------------------------------------------------
/routes/web.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Cuonggt\Dibi\Dibi;
 4 | use Illuminate\Support\Facades\Route;
 5 | 
 6 | Route::namespace('Cuonggt\Dibi\Http\Controllers')
 7 |     ->prefix(Dibi::path())
 8 |     ->middleware(config('dibi.middleware', []))
 9 |     ->group(function () {
10 |         Route::post('/api/select-connection', 'SelectConnectionController@select');
11 |         Route::post('/api/sql-query', 'SqlQueryController@run');
12 |         Route::post('/api/tables/{table}/rows/filter', 'TableRowsController@filter');
13 | 
14 |         Route::get('/{view?}', 'HomeController@index')->where('view', '(.*)')->name('dibi');
15 |     });
16 | 


--------------------------------------------------------------------------------
/resources/js/components/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <input
 3 |         ref="input"
 4 |         class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
 5 |         :value="value"
 6 |         @input="$emit('input', $event.target.value)"
 7 |     >
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     props: {
13 |         value: {
14 |             type: String,
15 |             default: null,
16 |         },
17 |     },
18 | 
19 |     methods: {
20 |         focus() {
21 |             this.$refs.input.focus();
22 |         },
23 |     },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/resources/js/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button
 3 |         :type="type"
 4 |         class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150"
 5 |     >
 6 |         <slot />
 7 |     </button>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     props: {
13 |         type: {
14 |             type: String,
15 |             default: 'submit',
16 |         },
17 |     },
18 | };
19 | </script>
20 | 


--------------------------------------------------------------------------------
/resources/js/components/SecondaryButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button
 3 |         :type="type"
 4 |         class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150"
 5 |     >
 6 |         <slot />
 7 |     </button>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     props: {
13 |         type: {
14 |             type: String,
15 |             default: 'button',
16 |         },
17 |     },
18 | };
19 | </script>
20 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Eye.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         xmlns="http://www.w3.org/2000/svg"
 4 |         fill="none"
 5 |         viewBox="0 0 24 24"
 6 |         stroke-width="1.5"
 7 |         stroke="currentColor"
 8 |         :class="sizeClass"
 9 |     >
10 |         <path
11 |             stroke-linecap="round"
12 |             stroke-linejoin="round"
13 |             d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z"
14 |         />
15 |     </svg>
16 | </template>
17 | 
18 | <script>
19 | import Sizable from './Sizable';
20 | 
21 | export default {
22 |     mixins: [Sizable],
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/Http/Controllers/SelectConnectionController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Controllers;
 4 | 
 5 | use Cuonggt\Dibi\Dibi;
 6 | use Illuminate\Http\Request;
 7 | use Illuminate\Routing\Controller;
 8 | use Illuminate\Support\Facades\Cache;
 9 | use Illuminate\Validation\ValidationException;
10 | 
11 | class SelectConnectionController extends Controller
12 | {
13 |     public function select(Request $request)
14 |     {
15 |         if (! in_array($request->connection, Dibi::databaseConnections())) {
16 |             throw ValidationException::withMessages([
17 |                 'connection' => ['Invalid connection.'],
18 |             ]);
19 |         }
20 | 
21 |         Cache::put('dibiConnection', $request->connection);
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/resources/js/base.js:
--------------------------------------------------------------------------------
 1 | import numeral from 'numeral';
 2 | 
 3 | export default {
 4 |     methods: {
 5 |         formatNumber(number, format = '0,0') {
 6 |             return numeral(number).format(format);
 7 |         },
 8 | 
 9 |         strLimit(value, limit = 55, end = '...') {
10 |             if (value.length <= limit) {
11 |                 return value;
12 |             }
13 | 
14 |             return `${value.substr(0, limit)}${end}`;
15 |         },
16 | 
17 |         httpBuildQuery(params) {
18 |             const query = new URLSearchParams();
19 |             for (const [key, value] of Object.entries(params)) {
20 |                 query.append(key, value);
21 |             }
22 |             return query.toString();
23 |         },
24 |     },
25 | };
26 | 


--------------------------------------------------------------------------------
/public/app.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Vue.js v2.7.14
 3 |  * (c) 2014-2022 Evan You
 4 |  * Released under the MIT License.
 5 |  */
 6 | 
 7 | /*! @preserve
 8 |  * numeral.js
 9 |  * version : 2.0.6
10 |  * author : Adam Draper
11 |  * license : MIT
12 |  * http://adamwdraper.github.com/Numeral-js/
13 |  */
14 | 
15 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
16 | 
17 | /**
18 |  * @license
19 |  * Lodash <https://lodash.com/>
20 |  * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
21 |  * Released under MIT license <https://lodash.com/license>
22 |  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
23 |  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
24 |  */
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         browser: true,
 4 |         node: true,
 5 |         es6: true,
 6 |     },
 7 |     extends: [
 8 |         'plugin:vue/recommended',
 9 |     ],
10 |     ignorePatterns: [
11 |         'node_modules/',
12 |         'public/',
13 |         'vendor/',
14 |         '*.json',
15 |     ],
16 |     rules: {
17 |         'vue/multi-word-component-names': ['off'],
18 |         'vue/require-prop-types': ['off'],
19 |         'vue/html-indent': ['error', 4],
20 |         'indent': ['error', 4],
21 |         'semi': ['error', 'always'],
22 |         'quotes': ['error', 'single'],
23 |         'comma-dangle': ['error', 'always-multiline'],
24 |         'object-curly-spacing': ['error', 'always'],
25 |         'comma-spacing': ['error', { 'before': false, 'after': true }],
26 |     },
27 | };
28 | 


--------------------------------------------------------------------------------
/src/Console/PublishCommand.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Console;
 4 | 
 5 | use Illuminate\Console\Command;
 6 | 
 7 | class PublishCommand extends Command
 8 | {
 9 |     /**
10 |      * The name and signature of the console command.
11 |      *
12 |      * @var string
13 |      */
14 |     protected $signature = 'dibi:publish {--force : Overwrite any existing files}';
15 | 
16 |     /**
17 |      * The console command description.
18 |      *
19 |      * @var string
20 |      */
21 |     protected $description = 'Publish all of the Dibi resources';
22 | 
23 |     /**
24 |      * Execute the console command.
25 |      *
26 |      * @return void
27 |      */
28 |     public function handle()
29 |     {
30 |         $this->call('vendor:publish', [
31 |             '--tag' => 'dibi-assets',
32 |             '--force' => true,
33 |         ]);
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/Http/Controllers/HomeController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Controllers;
 4 | 
 5 | use Cuonggt\Dibi\Dibi;
 6 | use Illuminate\Routing\Controller;
 7 | 
 8 | class HomeController extends Controller
 9 | {
10 |     /**
11 |      * Single page application catch-all route.
12 |      *
13 |      * @return \Illuminate\Contracts\View\View|\Illuminate\Contracts\View\Factory
14 |      */
15 |     public function index()
16 |     {
17 |         return view('dibi::app', [
18 |             'dibiScriptVariables' => Dibi::scriptVariables([
19 |                 'databaseConnections' => Dibi::databaseConnections(),
20 |                 'currentDatabaseConnection' => Dibi::currentDatabaseConnection(),
21 |                 'database' => Dibi::databaseRepository()->getName(),
22 |                 'informationSchema' => Dibi::databaseRepository()->informationSchema(),
23 |             ]),
24 |         ]);
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/stubs/DibiServiceProvider.stub:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\Facades\Gate;
 6 | use Cuonggt\Dibi\Dibi;
 7 | use Cuonggt\Dibi\DibiApplicationServiceProvider;
 8 | 
 9 | class DibiServiceProvider extends DibiApplicationServiceProvider
10 | {
11 |     /**
12 |      * Bootstrap any application services.
13 |      *
14 |      * @return void
15 |      */
16 |     public function boot()
17 |     {
18 |         parent::boot();
19 | 
20 |         // Dibi::useDatabaseConnectionName('custom_mysql');
21 |     }
22 | 
23 |     /**
24 |      * Register the Dibi gate.
25 |      *
26 |      * This gate determines who can access Dibi in non-local environments.
27 |      *
28 |      * @return void
29 |      */
30 |     protected function gate()
31 |     {
32 |         Gate::define('viewDibi', function ($user = null) {
33 |             return in_array(optional($user)->email, [
34 |                 //
35 |             ]);
36 |         });
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Cog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         xmlns="http://www.w3.org/2000/svg"
 4 |         viewBox="0 0 20 20"
 5 |         fill="currentColor"
 6 |         :class="sizeClass"
 7 |     >
 8 |         <path
 9 |             fill-rule="evenodd"
10 |             d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
11 |             clip-rule="evenodd"
12 |         />
13 |     </svg>
14 | </template>
15 | 
16 | <script>
17 | import Sizable from './Sizable';
18 | 
19 | export default {
20 |     mixins: [Sizable],
21 | };
22 | </script>
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/src/DBObject.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | abstract class DBObject
 6 | {
 7 |     /**
 8 |      * The DB object's raw attributes.
 9 |      *
10 |      * @var array
11 |      */
12 |     public $raw;
13 | 
14 |     /**
15 |      * Get the raw DB object array.
16 |      *
17 |      * @return array
18 |      */
19 |     public function getRaw()
20 |     {
21 |         return $this->raw;
22 |     }
23 | 
24 |     /**
25 |      * Set the raw DB object array from the provider.
26 |      *
27 |      * @return $this
28 |      */
29 |     public function setRaw(array $raw)
30 |     {
31 |         $this->raw = $raw;
32 | 
33 |         return $this;
34 |     }
35 | 
36 |     /**
37 |      * Map the given array onto the DB object's properties.
38 |      *
39 |      * @return $this
40 |      */
41 |     public function map(array $attributes)
42 |     {
43 |         foreach ($attributes as $key => $value) {
44 |             $this->{$key} = $value;
45 |         }
46 | 
47 |         return $this;
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/DatabaseRepositoryFactory.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | use Cuonggt\Dibi\Repositories\MysqlDatabaseRepository;
 6 | use Cuonggt\Dibi\Repositories\SqlsrvDatabaseRepository;
 7 | use Illuminate\Database\Connection;
 8 | use InvalidArgumentException;
 9 | 
10 | class DatabaseRepositoryFactory
11 | {
12 |     /**
13 |      * Create a database repository instance for the given database connection.
14 |      *
15 |      * @param  \Illuminate\Database\Connection  $provider
16 |      * @return \Cuonggt\Dibi\Contracts\DatabaseRepository
17 |      */
18 |     public static function make(Connection $db)
19 |     {
20 |         switch ($db->getDriverName()) {
21 |             case 'mysql':
22 |                 return new MysqlDatabaseRepository($db);
23 |             case 'sqlsrv':
24 |                 return new SqlsrvDatabaseRepository($db);
25 |             default:
26 |                 throw new InvalidArgumentException('Database driver ['.$db->getDriverName().'] is not supported.');
27 |         }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/resources/js/components/SqlEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="w-full h-full flex">
 3 |         <div
 4 |             id="editor"
 5 |             class="flex-1 overflow-hidden"
 6 |         />
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import loader from '@monaco-editor/loader';
12 | 
13 | export default {
14 |     name: 'SqlEditor',
15 | 
16 |     props: ['value'],
17 | 
18 |     async mounted() {
19 |         const monaco = await loader.init();
20 | 
21 |         const editor = monaco.editor.create(document.getElementById('editor'), {
22 |             value: this.value,
23 |             language: 'sql',
24 |             minimap: { enabled: false },
25 |             automaticLayout: true,
26 |             scrollBeyondLastLine: false,
27 |             wordWrap: 'on',
28 |             wrappingStrategy: 'advanced',
29 |             overviewRulerLanes: 0,
30 |         });
31 | 
32 |         editor.onDidChangeModelContent(() => {
33 |             this.$emit('input', editor.getValue());
34 |         });
35 |     },
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/phpunit.xml.dist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <phpunit backupGlobals="false"
 3 |          backupStaticAttributes="false"
 4 |          beStrictAboutTestsThatDoNotTestAnything="true"
 5 |          bootstrap="vendor/autoload.php"
 6 |          colors="true"
 7 |          convertDeprecationsToExceptions="true"
 8 |          convertErrorsToExceptions="true"
 9 |          convertNoticesToExceptions="true"
10 |          convertWarningsToExceptions="true"
11 |          processIsolation="false"
12 |          stopOnError="false"
13 |          stopOnFailure="false"
14 |          verbose="true"
15 | >
16 |     <testsuites>
17 |         <testsuite name="Dibi Test Suite">
18 |             <directory suffix="Test.php">./tests</directory>
19 |         </testsuite>
20 |     </testsuites>
21 |     <php>
22 |         <env name="APP_ENV" value="self-testing"/>
23 |         <env name="APP_KEY" value="base64:+HB8DVzRb0DPyT4aBv1ixg+htia3ICgsF/r7AIilD5w="/>
24 |         <env name="DB_DATABASE" value="testdibi"/>
25 |         <env name="DB_USERNAME" value="root"/>
26 |         <env name="DB_PASSWORD" value=""/>
27 |     </php>
28 | </phpunit>
29 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Cuong Giang
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/resources/js/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div
 4 |             class="flex items-center mt-4"
 5 |             style="height: 150px"
 6 |         >
 7 |             <IconLoader
 8 |                 :class="`mx-auto block text-${color}-500`"
 9 |                 :style="{ width: `${width}px` }"
10 |                 viewBox="0 0 120 30"
11 |                 :fill="fillColor"
12 |             />
13 |         </div>
14 | 
15 |         <div class="mt-4 text-center max-w-xl mx-auto">
16 |             <slot />
17 |         </div>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 | import IconLoader from './icons/Loader.vue';
23 | 
24 | export default {
25 |     name: 'Loader',
26 |     components: {IconLoader},
27 |     props: {
28 |         color: {
29 |             type: [String],
30 |             required: false,
31 |             default: 'gray',
32 |         },
33 |         width: {
34 |             type: [Number, String],
35 |             required: false,
36 |             default: 50,
37 |         },
38 |         fillColor: {
39 |             type: String,
40 |             required: false,
41 |             default: 'currentColor',
42 |         },
43 |     },
44 | };
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/Http/Middleware/EnsureUpToDateAssets.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Http\Middleware;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Http\Request;
 7 | use Illuminate\Support\Facades\File;
 8 | use RuntimeException;
 9 | 
10 | class EnsureUpToDateAssets
11 | {
12 |     /**
13 |      * Ensures assets are up to date.
14 |      *
15 |      * @param  Request  $request
16 |      * @param  string|null  $guard
17 |      * @return mixed
18 |      */
19 |     public function handle($request, Closure $next, $guard = null)
20 |     {
21 |         if (! app()->runningInConsole()) {
22 |             $publishedPath = public_path('vendor/dibi/mix-manifest.json');
23 | 
24 |             if (! File::exists($publishedPath)) {
25 |                 throw new RuntimeException('The Dibi assets are not published. Please run: `php artisan dibi:install`.');
26 |             }
27 | 
28 |             if (File::get($publishedPath) !== File::get(__DIR__.'/../../../public/mix-manifest.json')) {
29 |                 throw new RuntimeException('The published Dibi assets are not up-to-date with the installed version.  Please run: `php artisan dibi:publish`.');
30 |             }
31 |         }
32 | 
33 |         return $next($request);
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | const mix = require('laravel-mix');
 2 | const path = require('path');
 3 | const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
 4 | 
 5 | /*
 6 |  |--------------------------------------------------------------------------
 7 |  | Mix Asset Management
 8 |  |--------------------------------------------------------------------------
 9 |  |
10 |  | Mix provides a clean, fluent API for defining some Webpack build steps
11 |  | for your Laravel application. By default, we are compiling the Sass
12 |  | file for the application as well as bundling up all the JS files.
13 |  |
14 |  */
15 | 
16 | mix
17 |     .webpackConfig({
18 |         plugins: [
19 |             new MonacoEditorWebpackPlugin({
20 |                 // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
21 |                 languages: ['sql'],
22 |             }),
23 |         ],
24 |     })
25 |     .js('resources/js/app.js', 'public')
26 |     .vue({ version: 2 })
27 |     .setPublicPath('public')
28 |     .postCss('resources/css/app.css', 'public', [
29 |         require('tailwindcss'),
30 |     ])
31 |     .alias({ '@': path.join(__dirname, 'resources/js/') })
32 |     .version();
33 | 


--------------------------------------------------------------------------------
/config/dibi.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Cuonggt\Dibi\Http\Middleware\EnsureUpToDateAssets;
 4 | use Cuonggt\Dibi\Http\Middleware\EnsureUserIsAuthorized;
 5 | 
 6 | return [
 7 | 
 8 |     /*
 9 |     |--------------------------------------------------------------------------
10 |     | Dibi Path
11 |     |--------------------------------------------------------------------------
12 |     |
13 |     | This is the URI path where Dibi will be accessible from. Feel free
14 |     | to change this path to anything you like. Note that the URI will not
15 |     | affect the paths of its internal API that aren't exposed to users.
16 |     |
17 |     */
18 | 
19 |     'path' => env('DIBI_PATH', '/dibi'),
20 | 
21 |     /*
22 |     |--------------------------------------------------------------------------
23 |     | Dibi Route Middleware
24 |     |--------------------------------------------------------------------------
25 |     |
26 |     | These middleware will be assigned to every Dibi route - giving you
27 |     | the chance to add your own middleware to this list or change any of
28 |     | the existing middleware. Or, you can simply stick with this list.
29 |     |
30 |     */
31 | 
32 |     'middleware' => [
33 |         'web',
34 |         EnsureUserIsAuthorized::class,
35 |         EnsureUpToDateAssets::class,
36 |     ],
37 | 
38 | ];
39 | 


--------------------------------------------------------------------------------
/resources/js/components/DialogModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <modal
 3 |         :show="show"
 4 |         :max-width="maxWidth"
 5 |         :closeable="closeable"
 6 |         @close="close"
 7 |     >
 8 |         <div class="px-6 py-4">
 9 |             <div class="text-lg">
10 |                 <slot name="title" />
11 |             </div>
12 | 
13 |             <div
14 |                 class="mt-4 overflow-y-auto"
15 |                 style="max-height: 80vh"
16 |             >
17 |                 <slot name="content" />
18 |             </div>
19 |         </div>
20 | 
21 |         <div class="px-6 py-4 bg-gray-100 text-right">
22 |             <slot name="footer" />
23 |         </div>
24 |     </modal>
25 | </template>
26 | 
27 | <script>
28 | import Modal from './Modal';
29 | 
30 | export default {
31 |     components: {
32 |         Modal,
33 |     },
34 | 
35 |     props: {
36 |         show: {
37 |             type: Boolean,
38 |             default: false,
39 |         },
40 |         maxWidth: {
41 |             type: String,
42 |             default: '2xl',
43 |         },
44 |         closeable: {
45 |             type: Boolean,
46 |             default: true,
47 |         },
48 |     },
49 | 
50 |     methods: {
51 |         close() {
52 |             this.$emit('close');
53 |         },
54 |     },
55 | };
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/Contracts/DatabaseRepository.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Contracts;
 4 | 
 5 | use Illuminate\Http\Request;
 6 | 
 7 | interface DatabaseRepository
 8 | {
 9 |     /**
10 |      * Get the database name.
11 |      *
12 |      * @return string
13 |      */
14 |     public function getName();
15 | 
16 |     /**
17 |      * Run given raw SQL query.
18 |      *
19 |      * @param  string  $sqlQuery
20 |      * @return mixed
21 |      */
22 |     public function runSqlQuery($sqlQuery);
23 | 
24 |     /**
25 |      * Get the Dibi InformationSchema instance.
26 |      *
27 |      * @return \Cuonggt\Dibi\InformationSchema
28 |      */
29 |     public function informationSchema();
30 | 
31 |     /**
32 |      * Get list of Dibi Table instances.
33 |      *
34 |      * @return array
35 |      */
36 |     public function tables();
37 | 
38 |     /**
39 |      * Get list of Dibi TableColumn instances.
40 |      *
41 |      * @return \Illuminate\Support\Collection
42 |      */
43 |     public function columns();
44 | 
45 |     /**
46 |      * Get list of Dibi TableIndex instances.
47 |      *
48 |      * @return \Illuminate\Support\Collection
49 |      */
50 |     public function indexes();
51 | 
52 |     /**
53 |      * Get list of records for the given table.
54 |      *
55 |      * @param  string  $table
56 |      * @return array
57 |      */
58 |     public function rows($table, Request $request);
59 | }
60 | 


--------------------------------------------------------------------------------
/src/DibiApplicationServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | use Illuminate\Support\Facades\Gate;
 6 | use Illuminate\Support\ServiceProvider;
 7 | 
 8 | class DibiApplicationServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * Bootstrap any application services.
12 |      *
13 |      * @return void
14 |      */
15 |     public function boot()
16 |     {
17 |         $this->authorization();
18 |     }
19 | 
20 |     /**
21 |      * Configure the Dibi authorization services.
22 |      *
23 |      * @return void
24 |      */
25 |     protected function authorization()
26 |     {
27 |         $this->gate();
28 | 
29 |         Dibi::auth(function ($request) {
30 |             return app()->environment('local') ||
31 |                    Gate::check('viewDibi', [$request->user()]);
32 |         });
33 |     }
34 | 
35 |     /**
36 |      * Register the Dibi gate.
37 |      *
38 |      * This gate determines who can access Dibi in non-local environments.
39 |      *
40 |      * @return void
41 |      */
42 |     protected function gate()
43 |     {
44 |         Gate::define('viewDibi', function ($user) {
45 |             return in_array($user->email, [
46 |                 //
47 |             ]);
48 |         });
49 |     }
50 | 
51 |     /**
52 |      * Register any application services.
53 |      *
54 |      * @return void
55 |      */
56 |     public function register()
57 |     {
58 |         //
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/resources/js/app.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import axios from 'axios';
 3 | import _ from 'lodash';
 4 | import PortalVue from 'portal-vue';
 5 | import Toasted from 'vue-toasted';
 6 | import router from './router';
 7 | import Base from './base';
 8 | 
 9 | Vue.config.productionTip = false;
10 | 
11 | Vue.use(PortalVue);
12 | Vue.use(Toasted, {
13 |     position: 'bottom-right',
14 |     duration: 6000,
15 | });
16 | 
17 | window._ = _;
18 | window.Bus = new Vue({ name: 'Bus' });
19 | 
20 | window.axios = axios.create();
21 | 
22 | const token = document.head.querySelector('meta[name="csrf-token"]');
23 | 
24 | if (token) {
25 |     window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
26 | }
27 | 
28 | window.axios.interceptors.response.use(
29 |     response => response,
30 |     error => {
31 |         if (! error.response) {
32 |             return Promise.reject(error);
33 |         }
34 | 
35 |         const { status } = error.response;
36 | 
37 |         // Show the user a 500 error
38 |         if (status >= 500) {
39 |             Bus.$emit('error', error.response.data.message);
40 |         }
41 | 
42 |         return Promise.reject(error);
43 |     },
44 | );
45 | 
46 | import './components';
47 | 
48 | Vue.mixin(Base);
49 | 
50 | new Vue({
51 |     el: '#dibi',
52 |     router,
53 |     mounted() {
54 |         Bus.$on('error', message => {
55 |             this.$toasted.show(message, { type: 'error' });
56 |         });
57 |     },
58 | });
59 | 


--------------------------------------------------------------------------------
/src/DibiServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | 
 7 | class DibiServiceProvider extends ServiceProvider
 8 | {
 9 |     /**
10 |      * Bootstrap any application services.
11 |      *
12 |      * @return void
13 |      */
14 |     public function boot()
15 |     {
16 |         $this->loadRoutesFrom(__DIR__.'/../routes/web.php');
17 | 
18 |         $this->loadViewsFrom(__DIR__.'/../resources/views', 'dibi');
19 | 
20 |         if ($this->app->runningInConsole()) {
21 |             $this->publishes([
22 |                 __DIR__.'/../config/dibi.php' => config_path('dibi.php'),
23 |             ], 'dibi-config');
24 | 
25 |             $this->publishes([
26 |                 __DIR__.'/../public' => public_path('vendor/dibi'),
27 |             ], 'dibi-assets');
28 | 
29 |             $this->publishes([
30 |                 __DIR__.'/../stubs/DibiServiceProvider.stub' => app_path('Providers/DibiServiceProvider.php'),
31 |             ], 'dibi-provider');
32 |         }
33 |     }
34 | 
35 |     /**
36 |      * Register any application services.
37 |      *
38 |      * @return void
39 |      */
40 |     public function register()
41 |     {
42 |         $this->mergeConfigFrom(
43 |             __DIR__.'/../config/dibi.php', 'dibi'
44 |         );
45 | 
46 |         $this->commands([
47 |             Console\InstallCommand::class,
48 |             Console\PublishCommand::class,
49 |         ]);
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "cuonggt/laravel-dibi",
 3 |     "description": "An elegant GUI database management tool for your Laravel applications.",
 4 |     "keywords": [
 5 |         "laravel",
 6 |         "dibi"
 7 |     ],
 8 |     "homepage": "https://github.com/cuonggt/laravel-dibi",
 9 |     "license": "MIT",
10 |     "support": {
11 |         "issues": "https://github.com/cuonggt/laravel-dibi/issues",
12 |         "source": "https://github.com/cuonggt/laravel-dibi"
13 |     },
14 |     "authors": [
15 |         {
16 |             "name": "Cuong Giang",
17 |             "email": "thaicuong.giang@gmail.com"
18 |         }
19 |     ],
20 |     "require": {
21 |         "php": "^7.3|^8.0.2|^8.3",
22 |         "ext-json": "*",
23 |         "laravel/framework": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
24 |         "ramsey/uuid": "^3.8|^4.0"
25 |     },
26 |     "require-dev": {
27 |         "friendsofphp/php-cs-fixer": "^3.4",
28 |         "orchestra/testbench": "^4.0|^5.0|^6.0|^7.0|^8.0|^9.0|^10.0"
29 |     },
30 |     "autoload": {
31 |         "psr-4": {
32 |             "Cuonggt\\Dibi\\": "src/"
33 |         }
34 |     },
35 |     "autoload-dev": {
36 |         "psr-4": {
37 |             "Cuonggt\\Dibi\\Tests\\": "tests/"
38 |         }
39 |     },
40 |     "extra": {
41 |         "laravel": {
42 |             "providers": [
43 |                 "Cuonggt\\Dibi\\DibiServiceProvider"
44 |             ]
45 |         }
46 |     },
47 |     "config": {
48 |         "sort-packages": true
49 |     },
50 |     "minimum-stability": "dev",
51 |     "prefer-stable": true
52 | }
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "scripts": {
 4 |         "dev": "npm run development",
 5 |         "development": "mix",
 6 |         "watch": "mix watch",
 7 |         "watch-poll": "mix watch -- --watch-options-poll=1000",
 8 |         "hot": "mix watch --hot",
 9 |         "prod": "npm run production",
10 |         "production": "mix --production",
11 |         "lint": "eslint --cache --ext=js,ts,vue",
12 |         "lint:fix": "eslint --cache --ext=js,ts,vue --fix",
13 |         "prepare": "husky install"
14 |     },
15 |     "devDependencies": {
16 |         "@monaco-editor/loader": "^1.3.3",
17 |         "@tailwindcss/forms": "^0.5.3",
18 |         "@volar-plugins/vetur": "^2.0.0",
19 |         "autoprefixer": "^10.4.13",
20 |         "axios": "^1.6.0",
21 |         "cross-env": "^7.0.3",
22 |         "eslint": "^8.34.0",
23 |         "eslint-plugin-vue": "^9.9.0",
24 |         "husky": "^8.0.3",
25 |         "laravel-mix": "^6.0.0",
26 |         "lint-staged": "^13.1.2",
27 |         "lodash": "^4.17.21",
28 |         "monaco-editor": "^0.39.0",
29 |         "monaco-editor-webpack-plugin": "^7.0.1",
30 |         "numeral": "^2.0.6",
31 |         "portal-vue": "^2.1.7",
32 |         "postcss": "^8.4.31",
33 |         "splitpanes": "^2.4.1",
34 |         "tailwindcss": "^3.2.7",
35 |         "vue": "^2.6.12",
36 |         "vue-json-pretty": "^1.9.4",
37 |         "vue-loader": "^15.9.8",
38 |         "vue-router": "^3.5.1",
39 |         "vue-template-compiler": "^2.7.14",
40 |         "vue-toasted": "^1.1.28"
41 |     },
42 |     "lint-staged": {
43 |         "**/*.{js,ts,vue}": [
44 |             "eslint --cache --fix"
45 |         ],
46 |         "**/*.php": [
47 |             "./vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.dist.php"
48 |         ]
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/Table.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi;
 4 | 
 5 | use JsonSerializable;
 6 | 
 7 | class Table extends DBObject implements JsonSerializable
 8 | {
 9 |     /**
10 |      * @var string
11 |      */
12 |     public $tableCatalog;
13 | 
14 |     /**
15 |      * @var string
16 |      */
17 |     public $tableSchema;
18 | 
19 |     /**
20 |      * @var string
21 |      */
22 |     public $tableName;
23 | 
24 |     /**
25 |      * @var string
26 |      */
27 |     public $tableType;
28 | 
29 |     /**
30 |      * @var array
31 |      */
32 |     public $columns;
33 | 
34 |     /**
35 |      * @var array
36 |      */
37 |     public $indexes;
38 | 
39 |     /**
40 |      * Set the columns of the table.
41 |      *
42 |      * @return $this|array
43 |      */
44 |     public function columns(array $columns = null)
45 |     {
46 |         if (is_null($columns)) {
47 |             return $this->columns;
48 |         }
49 | 
50 |         $this->columns = $columns;
51 | 
52 |         return $this;
53 |     }
54 | 
55 |     /**
56 |      * Set the indexes of the table.
57 |      *
58 |      * @return $this|array
59 |      */
60 |     public function indexes(array $indexes = null)
61 |     {
62 |         if (is_null($indexes)) {
63 |             return $this->indexes;
64 |         }
65 | 
66 |         $this->indexes = $indexes;
67 | 
68 |         return $this;
69 |     }
70 | 
71 |     /**
72 |      * Get the JSON serializable fields for the object.
73 |      *
74 |      * @return array
75 |      */
76 |     public function jsonSerialize()
77 |     {
78 |         return [
79 |             'tableCatalog' => $this->tableCatalog,
80 |             'tableSchema' => $this->tableSchema,
81 |             'tableName' => $this->tableName,
82 |             'tableType' => $this->tableType,
83 |             'columns' => $this->columns,
84 |             'indexes' => $this->indexes,
85 |         ];
86 |     }
87 | }
88 | 


--------------------------------------------------------------------------------
/resources/js/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Dashboard from './views/Dashboard';
 4 | import TableDetails from './views/TableDetails';
 5 | import SqlQuery from './views/SqlQuery';
 6 | 
 7 | Vue.use(Router);
 8 | 
 9 | const router = new Router({
10 |     scrollBehavior,
11 |     base: window.Dibi.path,
12 |     mode: 'history',
13 |     routes: [
14 |         {
15 |             path: '/',
16 |             redirect: '/dashboard',
17 |         },
18 |         {
19 |             name: 'dashboard',
20 |             path: '/dashboard',
21 |             component: Dashboard,
22 |             props: true,
23 |         },
24 |         {
25 |             name: 'sql-query',
26 |             path: '/sql-query',
27 |             component: SqlQuery,
28 |             props: true,
29 |         },
30 |         {
31 |             path: '/tables/:tableName',
32 |             component: TableDetails,
33 |             name: 'tables-show',
34 |             props: route => ({
35 |                 tableName: route.params.tableName,
36 |                 currentTable: Dibi.informationSchema.tables.find(table => table.tableName == route.params.tableName),
37 |             }),
38 |         },
39 |         {
40 |             name: 'catch-all',
41 |             path: '*',
42 |             redirect: () => {
43 |                 window.location.href = '/404';
44 |             },
45 |         },
46 |     ],
47 | });
48 | 
49 | export default router;
50 | 
51 | function scrollBehavior(to, from, savedPosition) {
52 |     if (savedPosition) {
53 |         return savedPosition;
54 |     }
55 | 
56 |     if (to.hash) {
57 |         return { selector: to.hash };
58 |     }
59 | 
60 |     const [component] = router.getMatchedComponents({ ...to }).slice(-1);
61 | 
62 |     if (component && component.scrollToTop === false) {
63 |         return {};
64 |     }
65 | 
66 |     return { x: 0, y: 0 };
67 | }
68 | 
69 | 


--------------------------------------------------------------------------------
/resources/js/components.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import IconChevronLeft from './components/icons/ChevronLeft.vue';
 4 | import IconChevronRight from './components/icons/ChevronRight.vue';
 5 | import IconCog from './components/icons/Cog.vue';
 6 | import IconDatabase from './components/icons/Database.vue';
 7 | import IconEye from './components/icons/Eye.vue';
 8 | import IconLoader from './components/icons/Loader.vue';
 9 | import IconTable from './components/icons/Table.vue';
10 | 
11 | import XButton from './components/Button.vue';
12 | import XDialogModal from './components/DialogModal.vue';
13 | import XInput from './components/Input.vue';
14 | import XLabel from './components/Label.vue';
15 | import XLoader from './components/Loader.vue';
16 | import XSecondaryButton from './components/SecondaryButton.vue';
17 | 
18 | import SideNavigation from './components/SideNavigation.vue';
19 | import TableStructure from './components/TableStructure.vue';
20 | import DataTable from './components/DataTable.vue';
21 | import DataCell from './components/DataCell.vue';
22 | import SqlEditor from './components/SqlEditor.vue';
23 | 
24 | // Icons
25 | Vue.component('IconChevronLeft', IconChevronLeft);
26 | Vue.component('IconChevronRight', IconChevronRight);
27 | Vue.component('IconCog', IconCog);
28 | Vue.component('IconDatabase', IconDatabase);
29 | Vue.component('IconEye', IconEye);
30 | Vue.component('IconLoader', IconLoader);
31 | Vue.component('IconTable', IconTable);
32 | 
33 | // Components
34 | Vue.component('XButton', XButton);
35 | Vue.component('XDialogModal', XDialogModal);
36 | Vue.component('XInput', XInput);
37 | Vue.component('XLabel', XLabel);
38 | Vue.component('XLoader', XLoader);
39 | Vue.component('XSecondaryButton', XSecondaryButton);
40 | 
41 | Vue.component('SideNavigation', SideNavigation);
42 | Vue.component('TableStructure', TableStructure);
43 | Vue.component('DataTable', DataTable);
44 | Vue.component('DataCell', DataCell);
45 | Vue.component('SqlEditor', SqlEditor);
46 | 


--------------------------------------------------------------------------------
/resources/views/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <!-- Meta Information -->
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 7 |     <meta name="csrf-token" content="{{ csrf_token() }}" />
 8 |     <meta name="robots" content="noindex, nofollow" />
 9 | 
10 |     <!-- Title -->
11 |     <title>Dibi</title>
12 | 
13 |     <!-- Style sheets -->
14 |     <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
15 |     <link href="{{ mix('app.css', 'vendor/dibi') }}" rel="stylesheet" type="text/css">
16 | </head>
17 | 
18 | <body>
19 |     <div id="dibi">
20 |         <div v-cloak class="font-sans antialiased h-screen flex overflow-hidden bg-gray-200">
21 |             <div class="flex shrink-0">
22 |                 <div class="flex flex-col w-64">
23 |                     <div class="flex flex-col h-0 flex-1">
24 |                         <!-- Logo -->
25 |                         <a href="{{ \Cuonggt\Dibi\Dibi::path() }}">
26 |                             <div class="flex items-center h-16 px-4 bg-gray-900 text-xl text-white font-medium">
27 |                                 @include('dibi::partials.logo')
28 |                                 <div class="ml-2" style="padding-top: 2px;">Dibi</div>
29 |                             </div>
30 |                         </a>
31 | 
32 |                         <side-navigation />
33 |                     </div>
34 |                 </div>
35 |             </div>
36 | 
37 |             <router-view :key="$route.name + ($route.params.tableName || '')"></router-view>
38 | 
39 |             <!-- Modal Portal -->
40 |             <portal-target name="modal" multiple>
41 |             </portal-target>
42 |         </div>
43 |     </div>
44 | 
45 |     <script>
46 |         window.Dibi = @json($dibiScriptVariables);
47 |     </script>
48 | 
49 |     <!-- Scripts -->
50 |     <script src="{{ mix('app.js', 'vendor/dibi') }}"></script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/resources/js/components/DataCell.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="column.isStringDataType ? '' : 'text-right'">
 3 |         <span
 4 |             v-if="value === null"
 5 |             class="text-gray-400"
 6 |         >NULL</span>
 7 |         <template v-else>
 8 |             <span
 9 |                 v-if="value === ''"
10 |                 class="text-gray-400"
11 |             >EMPTY</span>
12 |             <template v-else>
13 |                 <span
14 |                     v-if="shouldHideValue"
15 |                     class="cursor-pointer"
16 |                     @click="toggleShowHiddenValue()"
17 |                 >
18 |                     <svg
19 |                         xmlns="http://www.w3.org/2000/svg"
20 |                         fill="none"
21 |                         viewBox="0 0 24 24"
22 |                         stroke-width="1.5"
23 |                         stroke="currentColor"
24 |                         class="w-6 h-6"
25 |                     >
26 |                         <path
27 |                             stroke-linecap="round"
28 |                             stroke-linejoin="round"
29 |                             d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
30 |                         />
31 |                     </svg>
32 |                 </span>
33 |                 <span v-else>{{ displayedValue }}</span>
34 |             </template>
35 |         </template>
36 |     </div>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |     props: ['value', 'column'],
42 | 
43 |     data() {
44 |         return {
45 |             shouldHideValue: this.column.shouldHideValue,
46 |         };
47 |     },
48 | 
49 |     computed: {
50 |         displayedValue() {
51 |             return this.column.isStringDataType ? this.strLimit(this.value, 55) : this.value;
52 |         },
53 |     },
54 | 
55 |     methods: {
56 |         toggleShowHiddenValue() {
57 |             this.shouldHideValue = !this.shouldHideValue;
58 |         },
59 |     },
60 | };
61 | </script>
62 | 


--------------------------------------------------------------------------------
/resources/js/components/SideNavigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex-1 flex flex-col overflow-y-auto bg-gray-800">
 3 |         <div class="p-2 sticky top-0">
 4 |             <x-input
 5 |                 v-model="keyword"
 6 |                 type="text"
 7 |                 placeholder="Search for item..."
 8 |                 class="w-full text-sm"
 9 |             />
10 |         </div>
11 | 
12 |         <div class="flex flex-col overflow-y-auto">
13 |             <!-- Tables tabs -->
14 |             <h3
15 |                 class="px-2 mt-4 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider"
16 |             >
17 |                 Tables
18 |             </h3>
19 | 
20 |             <nav class="text-sm text-white">
21 |                 <router-link
22 |                     v-for="table in filteredTables"
23 |                     :key="`table-${table.tableName}`"
24 |                     :to="`/tables/${table.tableName}`"
25 |                     active-class="bg-gray-700 rounded-l-full border-r-4 border-blue-500 group mt-1"
26 |                     class="flex w-full pr-6 pl-4 py-2 items-center gap-x-4 hover:bg-gray-700 hover:rounded-l-full"
27 |                     :title="table.tableName"
28 |                 >
29 |                     <icon-table
30 |                         v-if="table.tableType == 'BASE TABLE'"
31 |                         size="6"
32 |                         class="shrink-0"
33 |                     />
34 |                     <icon-eye
35 |                         v-else-if="table.tableType == 'VIEW'"
36 |                         size="6"
37 |                         class="shrink-0"
38 |                     />
39 |                     {{ table.tableName }}
40 |                 </router-link>
41 |             </nav>
42 |         </div>
43 |     </div>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |     data() {
49 |         return {
50 |             keyword: '',
51 |         };
52 |     },
53 |     computed: {
54 |         filteredTables() {
55 |             if (!this.keyword) {
56 |                 return Dibi.informationSchema.tables;
57 |             }
58 |             return Dibi.informationSchema.tables.filter((table) => table.tableName.includes(this.keyword));
59 |         },
60 |     },
61 | };
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/Console/InstallCommand.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Cuonggt\Dibi\Console;
 4 | 
 5 | use Illuminate\Console\Command;
 6 | use Illuminate\Support\Str;
 7 | 
 8 | class InstallCommand extends Command
 9 | {
10 |     /**
11 |      * The name and signature of the console command.
12 |      *
13 |      * @var string
14 |      */
15 |     protected $signature = 'dibi:install';
16 | 
17 |     /**
18 |      * The console command description.
19 |      *
20 |      * @var string
21 |      */
22 |     protected $description = 'Install all of the Dibi resources';
23 | 
24 |     /**
25 |      * Execute the console command.
26 |      *
27 |      * @return void
28 |      */
29 |     public function handle()
30 |     {
31 |         $this->comment('Publishing Dibi Service Provider...');
32 |         $this->callSilent('vendor:publish', ['--tag' => 'dibi-provider']);
33 | 
34 |         $this->comment('Publishing Dibi Assets...');
35 |         $this->callSilent('vendor:publish', ['--tag' => 'dibi-assets']);
36 | 
37 |         $this->registerDibiServiceProvider();
38 | 
39 |         $this->info('Dibi scaffolding installed successfully.');
40 |     }
41 | 
42 |     /**
43 |      * Register the Dibi service provider in the application configuration file.
44 |      *
45 |      * @return void
46 |      */
47 |     protected function registerDibiServiceProvider()
48 |     {
49 |         $namespace = Str::replaceLast('\\', '', $this->laravel->getNamespace());
50 | 
51 |         $appConfig = file_get_contents(config_path('app.php'));
52 | 
53 |         if (! $appConfig) {
54 |             return;
55 |         }
56 | 
57 |         if (Str::contains($appConfig, $namespace.'\\Providers\\DibiServiceProvider::class')) {
58 |             return;
59 |         }
60 | 
61 |         $lineEndingCount = [
62 |             "\r\n" => substr_count($appConfig, "\r\n"),
63 |             "\r" => substr_count($appConfig, "\r"),
64 |             "\n" => substr_count($appConfig, "\n"),
65 |         ];
66 | 
67 |         $eol = array_keys($lineEndingCount, max($lineEndingCount))[0];
68 | 
69 |         file_put_contents(config_path('app.php'), str_replace(
70 |             "{$namespace}\\Providers\RouteServiceProvider::class,".$eol,
71 |             "{$namespace}\\Providers\RouteServiceProvider::class,".$eol."        {$namespace}\Providers\DibiServiceProvider::class,".$eol,
72 |             $appConfig
73 |         ));
74 | 
75 |         file_put_contents(app_path('Providers/DibiServiceProvider.php'), str_replace(
76 |             "namespace App\Providers;",
77 |             "namespace {$namespace}\Providers;",
78 |             file_get_contents(app_path('Providers/DibiServiceProvider.php'))
79 |         ));
80 |     }
81 | }
82 | 


--------------------------------------------------------------------------------
/resources/js/components/icons/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |         viewBox="0 0 120 30"
 4 |         xmlns="http://www.w3.org/2000/svg"
 5 |         :class="sizeClass"
 6 |     >
 7 |         <circle
 8 |             cx="15"
 9 |             cy="15"
10 |             r="15"
11 |         >
12 |             <animate
13 |                 attributeName="r"
14 |                 from="15"
15 |                 to="15"
16 |                 begin="0s"
17 |                 dur="0.8s"
18 |                 values="15;9;15"
19 |                 calcMode="linear"
20 |                 repeatCount="indefinite"
21 |             />
22 |             <animate
23 |                 attributeName="fill-opacity"
24 |                 from="1"
25 |                 to="1"
26 |                 begin="0s"
27 |                 dur="0.8s"
28 |                 values="1;.5;1"
29 |                 calcMode="linear"
30 |                 repeatCount="indefinite"
31 |             />
32 |         </circle>
33 |         <circle
34 |             cx="60"
35 |             cy="15"
36 |             r="9"
37 |             fill-opacity="0.3"
38 |         >
39 |             <animate
40 |                 attributeName="r"
41 |                 from="9"
42 |                 to="9"
43 |                 begin="0s"
44 |                 dur="0.8s"
45 |                 values="9;15;9"
46 |                 calcMode="linear"
47 |                 repeatCount="indefinite"
48 |             />
49 |             <animate
50 |                 attributeName="fill-opacity"
51 |                 from="0.5"
52 |                 to="0.5"
53 |                 begin="0s"
54 |                 dur="0.8s"
55 |                 values=".5;1;.5"
56 |                 calcMode="linear"
57 |                 repeatCount="indefinite"
58 |             />
59 |         </circle>
60 |         <circle
61 |             cx="105"
62 |             cy="15"
63 |             r="15"
64 |         >
65 |             <animate
66 |                 attributeName="r"
67 |                 from="15"
68 |                 to="15"
69 |                 begin="0s"
70 |                 dur="0.8s"
71 |                 values="15;9;15"
72 |                 calcMode="linear"
73 |                 repeatCount="indefinite"
74 |             />
75 |             <animate
76 |                 attributeName="fill-opacity"
77 |                 from="1"
78 |                 to="1"
79 |                 begin="0s"
80 |                 dur="0.8s"
81 |                 values="1;.5;1"
82 |                 calcMode="linear"
83 |                 repeatCount="indefinite"
84 |             />
85 |         </circle>
86 |     </svg>
87 | </template>
88 | 
89 | <script>
90 | import Sizable from './Sizable';
91 | 
92 | export default {
93 |     mixins: [Sizable],
94 | };
95 | </script>
96 | 


--------------------------------------------------------------------------------
/src/TableColumn.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Cuonggt\Dibi;
  4 | 
  5 | use JsonSerializable;
  6 | 
  7 | class TableColumn extends DBObject implements JsonSerializable
  8 | {
  9 |     /**
 10 |      * @var string
 11 |      */
 12 |     public $tableCatalog;
 13 | 
 14 |     /**
 15 |      * @var string
 16 |      */
 17 |     public $tableSchema;
 18 | 
 19 |     /**
 20 |      * @var string
 21 |      */
 22 |     public $tableName;
 23 | 
 24 |     /**
 25 |      * @var string
 26 |      */
 27 |     public $columnName;
 28 | 
 29 |     /**
 30 |      * @var int
 31 |      */
 32 |     public $ordinalPosition;
 33 | 
 34 |     /**
 35 |      * @var mixed
 36 |      */
 37 |     public $columnDefault;
 38 | 
 39 |     /**
 40 |      * @var bool
 41 |      */
 42 |     public $isNullable;
 43 | 
 44 |     /**
 45 |      * @var string
 46 |      */
 47 |     public $dataType;
 48 | 
 49 |     /**
 50 |      * @var int
 51 |      */
 52 |     public $characterMaximumLength;
 53 | 
 54 |     /**
 55 |      * @var int
 56 |      */
 57 |     public $characterOctetLength;
 58 | 
 59 |     /**
 60 |      * @var int
 61 |      */
 62 |     public $numericPrecision;
 63 | 
 64 |     /**
 65 |      * @var int
 66 |      */
 67 |     public $numericScale;
 68 | 
 69 |     /**
 70 |      * @var int
 71 |      */
 72 |     public $datetimePrecision;
 73 | 
 74 |     /**
 75 |      * @var string
 76 |      */
 77 |     public $characterSetName;
 78 | 
 79 |     /**
 80 |      * @var string
 81 |      */
 82 |     public $collationName;
 83 | 
 84 |     /**
 85 |      * @var bool
 86 |      */
 87 |     public $isStringDataType;
 88 | 
 89 |     /**
 90 |      * @var bool
 91 |      */
 92 |     public $shouldHideValue = false;
 93 | 
 94 |     /**
 95 |      * Get the JSON serializable fields for the object.
 96 |      *
 97 |      * @return array
 98 |      */
 99 |     public function jsonSerialize()
100 |     {
101 |         return [
102 |             'tableCatalog' => $this->tableCatalog,
103 |             'tableSchema' => $this->tableSchema,
104 |             'tableName' => $this->tableName,
105 |             'columnName' => $this->columnName,
106 |             'ordinalPosition' => $this->ordinalPosition,
107 |             'columnDefault' => $this->columnDefault,
108 |             'isNullable' => $this->isNullable,
109 |             'dataType' => $this->dataType,
110 |             'characterMaximumLength' => $this->characterMaximumLength,
111 |             'characterOctetLength' => $this->characterOctetLength,
112 |             'numericPrecision' => $this->numericPrecision,
113 |             'numericScale' => $this->numericScale,
114 |             'datetimePrecision' => $this->datetimePrecision,
115 |             'characterSetName' => $this->characterSetName,
116 |             'collationName' => $this->collationName,
117 |             'isStringDataType' => $this->isStringDataType,
118 |             'shouldHideValue' => $this->isStringDataType && $this->characterMaximumLength > 255,
119 |         ];
120 |     }
121 | }
122 | 


--------------------------------------------------------------------------------
/resources/js/views/SqlQuery.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <splitpanes
 3 |         horizontal
 4 |         class="default-theme"
 5 |     >
 6 |         <pane>
 7 |             <div class="flex flex-col h-full">
 8 |                 <div class="grow">
 9 |                     <sql-editor v-model="query" />
10 |                 </div>
11 |                 <div class="sticky bottom-0 px-4 py-2">
12 |                     <x-button
13 |                         :disabled="!query || runningQuery"
14 |                         @click.native="runQuery"
15 |                     >
16 |                         Run
17 |                     </x-button>
18 |                 </div>
19 |             </div>
20 |         </pane>
21 |         <pane style="overflow: scroll;">
22 |             <div
23 |                 v-if="runningQuery"
24 |                 class="flex grow items-center justify-center"
25 |             >
26 |                 <x-loader />
27 |             </div>
28 |             <div
29 |                 v-else
30 |                 class="px-4"
31 |             >
32 |                 <div
33 |                     v-if="result"
34 |                     class="flex min-w-full overflow-x-auto"
35 |                 >
36 |                     <template
37 |                         v-if="result.statement === 'select'"
38 |                     >
39 |                         <data-table
40 |                             v-if="result.result.length > 0"
41 |                             :columns="columns"
42 |                             :rows="result.result"
43 |                         />
44 |                         <span v-else>No data</span>
45 |                     </template>
46 |                     <template v-else>
47 |                         <span>Query OK<span v-if="result.statement !== 'statement'">: {{ result.result }} row affected</span></span>
48 |                     </template>
49 |                 </div>
50 |             </div>
51 |         </pane>
52 |     </splitpanes>
53 | </template>
54 | 
55 | <script>
56 | import { Splitpanes, Pane } from 'splitpanes';
57 | import 'splitpanes/dist/splitpanes.css';
58 | import 'vue-json-pretty/lib/styles.css';
59 | 
60 | export default {
61 |     components: { Splitpanes, Pane },
62 | 
63 |     data() {
64 |         return {
65 |             query: '',
66 |             runningQuery: false,
67 |             result: null,
68 |             columns: null,
69 |         };
70 |     },
71 |     methods: {
72 |         async runQuery() {
73 |             this.runningQuery = true;
74 |             try {
75 |                 const response = await axios.post(`${Dibi.path}/api/sql-query`, { sql_query: this.query });
76 |                 this.result = response.data.results.pop();
77 |                 if (this.result.statement == 'select' && Array.isArray(this.result.result) && this.result.result.length > 0) {
78 |                     this.columns = _.map(Object.keys(this.result.result[0]), (key) => {
79 |                         return {
80 |                             columnName: key,
81 |                         };
82 |                     });
83 |                 }
84 |             } catch (e) {
85 |                 //
86 |             }
87 |             this.runningQuery = false;
88 |         },
89 |     },
90 | };
91 | </script>
92 | 


--------------------------------------------------------------------------------
/src/Repositories/SqlsrvDatabaseRepository.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Cuonggt\Dibi\Repositories;
  4 | 
  5 | use Cuonggt\Dibi\Table;
  6 | use Cuonggt\Dibi\TableColumn;
  7 | use Cuonggt\Dibi\TableIndex;
  8 | 
  9 | class SqlsrvDatabaseRepository extends AbstractDatabaseRepository
 10 | {
 11 |     /**
 12 |      * @return array
 13 |      */
 14 |     protected function stringDataTypes()
 15 |     {
 16 |         return [
 17 |             'char',
 18 |             'varchar',
 19 |             'text',
 20 |             'nchar',
 21 |             'nvarchar',
 22 |             'ntext',
 23 |             'binary',
 24 |             'varbinary',
 25 |             'image',
 26 |         ];
 27 |     }
 28 | 
 29 |     /**
 30 |      * {@inheritdoc}
 31 |      */
 32 |     protected function rawTables()
 33 |     {
 34 |         return $this->db->select(
 35 |             'SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_CATALOG = ? ORDER BY TABLE_SCHEMA ASC, TABLE_TYPE ASC, TABLE_NAME ASC',
 36 |             [$this->getName()]
 37 |         );
 38 |     }
 39 | 
 40 |     /**
 41 |      * {@inheritdoc}
 42 |      */
 43 |     protected function mapRawTableToObject($rawTable)
 44 |     {
 45 |         return (new Table)->setRaw((array) $rawTable)->map([
 46 |             'tableCatalog' => $rawTable->TABLE_CATALOG,
 47 |             'tableSchema' => $rawTable->TABLE_SCHEMA,
 48 |             'tableName' => $rawTable->TABLE_SCHEMA.'.'.$rawTable->TABLE_NAME,
 49 |             'tableType' => $rawTable->TABLE_TYPE,
 50 |         ]);
 51 |     }
 52 | 
 53 |     /**
 54 |      * {@inheritdoc}
 55 |      */
 56 |     protected function rawColumns()
 57 |     {
 58 |         return $this->db->select(
 59 |             'SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_CATALOG = ? ORDER BY TABLE_SCHEMA ASC, ORDINAL_POSITION ASC',
 60 |             [$this->getName()]
 61 |         );
 62 |     }
 63 | 
 64 |     /**
 65 |      * {@inheritdoc}
 66 |      */
 67 |     protected function mapRawColumnToObject($rawColumn)
 68 |     {
 69 |         return (new TableColumn)->setRaw((array) $rawColumn)->map([
 70 |             'tableCatalog' => $rawColumn->TABLE_CATALOG,
 71 |             'tableSchema' => $rawColumn->TABLE_SCHEMA,
 72 |             'tableName' => $rawColumn->TABLE_SCHEMA.'.'.$rawColumn->TABLE_NAME,
 73 |             'columnName' => $rawColumn->COLUMN_NAME,
 74 |             'ordinalPosition' => $rawColumn->ORDINAL_POSITION,
 75 |             'columnDefault' => $rawColumn->COLUMN_DEFAULT,
 76 |             'isNullable' => $rawColumn->IS_NULLABLE == 'YES',
 77 |             'dataType' => $rawColumn->DATA_TYPE,
 78 |             'characterMaximumLength' => $rawColumn->CHARACTER_MAXIMUM_LENGTH,
 79 |             'characterOctetLength' => $rawColumn->CHARACTER_OCTET_LENGTH,
 80 |             'numericPrecision' => $rawColumn->NUMERIC_PRECISION,
 81 |             'numericScale' => $rawColumn->NUMERIC_SCALE,
 82 |             'datetimePrecision' => $rawColumn->DATETIME_PRECISION,
 83 |             'characterSetName' => $rawColumn->CHARACTER_SET_NAME,
 84 |             'collationName' => $rawColumn->COLLATION_NAME,
 85 |             'isStringDataType' => in_array($rawColumn->DATA_TYPE, $this->stringDataTypes()),
 86 |         ]);
 87 |     }
 88 | 
 89 |     /**
 90 |      * {@inheritdoc}
 91 |      */
 92 |     protected function rawIndexes()
 93 |     {
 94 |         return [];
 95 |     }
 96 | 
 97 |     /**
 98 |      * {@inheritdoc}
 99 |      */
100 |     protected function mapRawIndexToObject($rawIndex)
101 |     {
102 |         return (new TableIndex)->setRaw((array) $rawIndex)->map([]);
103 |     }
104 | }
105 | 


--------------------------------------------------------------------------------
/resources/js/components/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <portal to="modal">
  3 |         <transition leave-active-class="duration-200">
  4 |             <div
  5 |                 v-show="show"
  6 |                 class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0"
  7 |             >
  8 |                 <transition
  9 |                     enter-active-class="ease-out duration-300"
 10 |                     enter-class="opacity-0"
 11 |                     enter-to-class="opacity-100"
 12 |                     leave-active-class="ease-in duration-200"
 13 |                     leave-class="opacity-100"
 14 |                     leave-to-class="opacity-0"
 15 |                 >
 16 |                     <div
 17 |                         v-show="show"
 18 |                         class="fixed inset-0 transform transition-all"
 19 |                         @click="close"
 20 |                     >
 21 |                         <div class="absolute inset-0 bg-gray-500 opacity-75" />
 22 |                     </div>
 23 |                 </transition>
 24 | 
 25 |                 <transition
 26 |                     enter-active-class="ease-out duration-300"
 27 |                     enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 28 |                     enter-to-class="opacity-100 translate-y-0 sm:scale-100"
 29 |                     leave-active-class="ease-in duration-200"
 30 |                     leave-class="opacity-100 translate-y-0 sm:scale-100"
 31 |                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 32 |                 >
 33 |                     <div
 34 |                         v-show="show"
 35 |                         class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
 36 |                         :class="maxWidthClass"
 37 |                     >
 38 |                         <slot />
 39 |                     </div>
 40 |                 </transition>
 41 |             </div>
 42 |         </transition>
 43 |     </portal>
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |     props: {
 49 |         show: {
 50 |             type: Boolean,
 51 |             default: false,
 52 |         },
 53 |         maxWidth: {
 54 |             type: String,
 55 |             default: '2xl',
 56 |         },
 57 |         closeable: {
 58 |             type: Boolean,
 59 |             default: true,
 60 |         },
 61 |     },
 62 | 
 63 |     computed: {
 64 |         maxWidthClass() {
 65 |             return {
 66 |                 'sm': 'sm:max-w-sm',
 67 |                 'md': 'sm:max-w-md',
 68 |                 'lg': 'sm:max-w-lg',
 69 |                 'xl': 'sm:max-w-xl',
 70 |                 '2xl': 'sm:max-w-2xl',
 71 |                 '3xl': 'sm:max-w-3xl',
 72 |                 '4xl': 'sm:max-w-4xl',
 73 |                 '5xl': 'sm:max-w-5xl',
 74 |                 '6xl': 'sm:max-w-6xl',
 75 |                 '7xl': 'sm:max-w-7xl',
 76 |             }[this.maxWidth];
 77 |         },
 78 |     },
 79 | 
 80 |     watch: {
 81 |         show: {
 82 |             immediate: true,
 83 |             handler(show) {
 84 |                 if (show) {
 85 |                     document.body.style.overflow = 'hidden';
 86 |                 } else {
 87 |                     document.body.style.overflow = null;
 88 |                 }
 89 |             },
 90 |         },
 91 |     },
 92 | 
 93 |     created() {
 94 |         const closeOnEscape = (e) => {
 95 |             if (e.key === 'Escape' && this.show) {
 96 |                 this.close();
 97 |             }
 98 |         };
 99 | 
100 |         document.addEventListener('keydown', closeOnEscape);
101 | 
102 |         this.$once('hook:destroyed', () => {
103 |             document.removeEventListener('keydown', closeOnEscape);
104 |         });
105 |     },
106 | 
107 |     methods: {
108 |         close() {
109 |             if (this.closeable) {
110 |                 this.$emit('close');
111 |             }
112 |         },
113 |     },
114 | };
115 | </script>
116 | 


--------------------------------------------------------------------------------
/src/Dibi.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Cuonggt\Dibi;
  4 | 
  5 | use Closure;
  6 | use Illuminate\Support\Arr;
  7 | use Illuminate\Support\Facades\Cache;
  8 | use Illuminate\Support\Facades\DB;
  9 | 
 10 | class Dibi
 11 | {
 12 |     /**
 13 |      * The callback that should be used to authenticate Horizon users.
 14 |      *
 15 |      * @var \Closure
 16 |      */
 17 |     public static $authUsing;
 18 | 
 19 |     /**
 20 |      * Database Connections.
 21 |      *
 22 |      * @var array<string>
 23 |      */
 24 |     public static $databaseConnections = [];
 25 | 
 26 |     /**
 27 |      * Database Connection Name.
 28 |      *
 29 |      * @var string
 30 |      */
 31 |     public static $databaseConnectionName = 'mysql';
 32 | 
 33 |     /**
 34 |      * Database Repository.
 35 |      *
 36 |      * @var \Cuonggt\Dibi\Contracts\DatabaseRepository
 37 |      */
 38 |     public static $databaseRepository;
 39 | 
 40 |     /**
 41 |      * Get the URI path prefix utilized by Dibi.
 42 |      *
 43 |      * @return string
 44 |      */
 45 |     public static function path()
 46 |     {
 47 |         return config('dibi.path', '/dibi');
 48 |     }
 49 | 
 50 |     /**
 51 |      * Determine if the given request can access the Horizon dashboard.
 52 |      *
 53 |      * @param  \Illuminate\Http\Request  $request
 54 |      * @return bool
 55 |      */
 56 |     public static function check($request)
 57 |     {
 58 |         return (static::$authUsing ?: function () {
 59 |             return app()->environment('local');
 60 |         })($request);
 61 |     }
 62 | 
 63 |     /**
 64 |      * Set the callback that should be used to authenticate Horizon users.
 65 |      *
 66 |      * @return static
 67 |      */
 68 |     public static function auth(Closure $callback)
 69 |     {
 70 |         static::$authUsing = $callback;
 71 | 
 72 |         return new static;
 73 |     }
 74 | 
 75 |     /**
 76 |      * Register available database connections.
 77 |      *
 78 |      * @return static
 79 |      */
 80 |     public static function registerDatabaseConnections(array $databaseConnections)
 81 |     {
 82 |         static::$databaseConnections = $databaseConnections;
 83 | 
 84 |         return new static;
 85 |     }
 86 | 
 87 |     /**
 88 |      * Get the list of available database connections.
 89 |      *
 90 |      * @return array
 91 |      */
 92 |     public static function databaseConnections()
 93 |     {
 94 |         return empty(static::$databaseConnections) ? [static::$databaseConnectionName] : static::$databaseConnections;
 95 |     }
 96 | 
 97 |     /**
 98 |      * Get the current database connection name.
 99 |      *
100 |      * @return string
101 |      */
102 |     public static function currentDatabaseConnection()
103 |     {
104 |         return Cache::get('dibiConnection') ?? Arr::first(static::databaseConnections());
105 |     }
106 | 
107 |     /**
108 |      * Specify the database connection name that should be used by Dibi.
109 |      *
110 |      * @param  string  $databaseConnectionName
111 |      * @return static
112 |      */
113 |     public static function useDatabaseConnectionName($databaseConnectionName)
114 |     {
115 |         static::$databaseConnectionName = $databaseConnectionName;
116 | 
117 |         return new static;
118 |     }
119 | 
120 |     /**
121 |      * Get the database connection.
122 |      *
123 |      * @return \Illuminate\Database\Connection
124 |      */
125 |     public static function databaseConnection()
126 |     {
127 |         return DB::connection(static::currentDatabaseConnection());
128 |     }
129 | 
130 |     /**
131 |      * Get the database repository.
132 |      *
133 |      * @return \Cuonggt\Dibi\Contracts\DatabaseRepository
134 |      */
135 |     public static function databaseRepository()
136 |     {
137 |         return static::$databaseRepository ?: static::$databaseRepository = DatabaseRepositoryFactory::make(static::databaseConnection());
138 |     }
139 | 
140 |     /**
141 |      * Get the default JavaScript variables for Dibi.
142 |      *
143 |      * @param  array  $options
144 |      * @return array
145 |      */
146 |     public static function scriptVariables($options = [])
147 |     {
148 |         return array_merge([
149 |             'path' => static::path(),
150 |         ], $options);
151 |     }
152 | }
153 | 


--------------------------------------------------------------------------------
/src/Repositories/MysqlDatabaseRepository.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Cuonggt\Dibi\Repositories;
  4 | 
  5 | use Cuonggt\Dibi\Table;
  6 | use Cuonggt\Dibi\TableColumn;
  7 | use Cuonggt\Dibi\TableIndex;
  8 | 
  9 | class MysqlDatabaseRepository extends AbstractDatabaseRepository
 10 | {
 11 |     /**
 12 |      * @return array
 13 |      */
 14 |     protected function stringDataTypes()
 15 |     {
 16 |         return [
 17 |             'char',
 18 |             'varchar',
 19 |             'binary',
 20 |             'varbinary',
 21 |             'tinyblob',
 22 |             'tinytext',
 23 |             'text',
 24 |             'blob',
 25 |             'mediumtext',
 26 |             'mediumblob',
 27 |             'longtext',
 28 |             'longblob',
 29 |             'enum',
 30 |             'set',
 31 |         ];
 32 |     }
 33 | 
 34 |     /**
 35 |      * {@inheritdoc}
 36 |      */
 37 |     protected function rawTables()
 38 |     {
 39 |         return $this->db->select(
 40 |             'SELECT * FROM information_schema.tables WHERE table_schema = ? ORDER BY table_name ASC',
 41 |             [$this->getName()]
 42 |         );
 43 |     }
 44 | 
 45 |     /**
 46 |      * {@inheritdoc}
 47 |      */
 48 |     protected function mapRawTableToObject($rawTable)
 49 |     {
 50 |         return (new Table)->setRaw((array) $rawTable)->map([
 51 |             'tableCatalog' => $rawTable->TABLE_CATALOG,
 52 |             'tableSchema' => $rawTable->TABLE_SCHEMA,
 53 |             'tableName' => $rawTable->TABLE_NAME,
 54 |             'tableType' => $rawTable->TABLE_TYPE,
 55 |         ]);
 56 |     }
 57 | 
 58 |     /**
 59 |      * {@inheritdoc}
 60 |      */
 61 |     protected function rawColumns()
 62 |     {
 63 |         return $this->db->select(
 64 |             'SELECT * FROM information_schema.columns WHERE table_schema = ? ORDER BY table_name ASC, ordinal_position ASC',
 65 |             [$this->getName()]
 66 |         );
 67 |     }
 68 | 
 69 |     /**
 70 |      * {@inheritdoc}
 71 |      */
 72 |     protected function mapRawColumnToObject($rawColumn)
 73 |     {
 74 |         return (new TableColumn)->setRaw((array) $rawColumn)->map([
 75 |             'tableCatalog' => $rawColumn->TABLE_CATALOG,
 76 |             'tableSchema' => $rawColumn->TABLE_SCHEMA,
 77 |             'tableName' => $rawColumn->TABLE_NAME,
 78 |             'columnName' => $rawColumn->COLUMN_NAME,
 79 |             'ordinalPosition' => $rawColumn->ORDINAL_POSITION,
 80 |             'columnDefault' => $rawColumn->COLUMN_DEFAULT,
 81 |             'isNullable' => $rawColumn->IS_NULLABLE == 'YES',
 82 |             'dataType' => $rawColumn->DATA_TYPE,
 83 |             'characterMaximumLength' => $rawColumn->CHARACTER_MAXIMUM_LENGTH,
 84 |             'characterOctetLength' => $rawColumn->CHARACTER_OCTET_LENGTH,
 85 |             'numericPrecision' => $rawColumn->NUMERIC_PRECISION,
 86 |             'numericScale' => $rawColumn->NUMERIC_SCALE,
 87 |             'datetimePrecision' => $rawColumn->DATETIME_PRECISION,
 88 |             'characterSetName' => $rawColumn->CHARACTER_SET_NAME,
 89 |             'collationName' => $rawColumn->COLLATION_NAME,
 90 |             'isStringDataType' => in_array($rawColumn->DATA_TYPE, $this->stringDataTypes()),
 91 |         ]);
 92 |     }
 93 | 
 94 |     /**
 95 |      * {@inheritdoc}
 96 |      */
 97 |     protected function rawIndexes()
 98 |     {
 99 |         return $this->db->select(
100 |             'SELECT * FROM information_schema.statistics WHERE table_schema = ? ORDER BY table_name ASC',
101 |             [$this->getName()]
102 |         );
103 |     }
104 | 
105 |     /**
106 |      * {@inheritdoc}
107 |      */
108 |     protected function mapRawIndexToObject($rawIndex)
109 |     {
110 |         return (new TableIndex)->setRaw((array) $rawIndex)->map([
111 |             'tableCatalog' => $rawIndex->TABLE_CATALOG,
112 |             'tableSchema' => $rawIndex->TABLE_SCHEMA,
113 |             'tableName' => $rawIndex->TABLE_NAME,
114 |             'nonUnique' => (bool) $rawIndex->NON_UNIQUE,
115 |             'indexSchema' => $rawIndex->INDEX_SCHEMA,
116 |             'indexName' => $rawIndex->INDEX_NAME,
117 |             'seqInIndex' => $rawIndex->SEQ_IN_INDEX,
118 |             'columnName' => $rawIndex->COLUMN_NAME,
119 |             'indexType' => $rawIndex->INDEX_TYPE,
120 |         ]);
121 |     }
122 | }
123 | 


--------------------------------------------------------------------------------
/resources/js/views/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="grow flex flex-col overflow-x-auto">
  3 |         <div class="flex flex-col h-0 flex-1">
  4 |             <div class="bg-white w-full">
  5 |                 <div class="px-12">
  6 |                     <div class="py-6">
  7 |                         <div class="flex items-center justify-between text-sm text-gray-700 uppercase font-bold tracking-widest">
  8 |                             <div>
  9 |                                 <div v-if="connections.length > 1">
 10 |                                     <select
 11 |                                         class="py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pr-8"
 12 |                                         @change="selectConnection($event.target.value)"
 13 |                                     >
 14 |                                         <option
 15 |                                             v-for="connection in connections"
 16 |                                             :key="connection"
 17 |                                             :value="connection"
 18 |                                             :selected="connection == currentDatabaseConnection"
 19 |                                         >
 20 |                                             {{ connection }}
 21 |                                         </option>
 22 |                                     </select>
 23 |                                 </div>
 24 |                                 <div v-else>
 25 |                                     {{ connections[0] }}
 26 |                                 </div>
 27 |                             </div>
 28 |                             <div>Database {{ database }}</div>
 29 |                             <div>
 30 |                                 <router-link to="/sql-query">
 31 |                                     <x-button>SQL</x-button>
 32 |                                 </router-link>
 33 |                             </div>
 34 |                         </div>
 35 |                     </div>
 36 |                 </div>
 37 |             </div>
 38 | 
 39 |             <div class="flex-1 flex flex-col overflow-y-auto bg-gray-200">
 40 |                 <table class="min-w-full divide-y divide-gray-200 text-gray-800">
 41 |                     <thead class="bg-gray-50">
 42 |                         <tr>
 43 |                             <th
 44 |                                 scope="col"
 45 |                                 class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 46 |                             >
 47 |                                 Name
 48 |                             </th>
 49 |                             <th
 50 |                                 scope="col"
 51 |                                 class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 52 |                             >
 53 |                                 Type
 54 |                             </th>
 55 |                         </tr>
 56 |                     </thead>
 57 | 
 58 |                     <tbody class="bg-white divide-y divide-gray-200">
 59 |                         <tr
 60 |                             v-for="table in tables"
 61 |                             :key="table.tableName"
 62 |                         >
 63 |                             <td class="px-6 py-4 whitespace-nowrap text-sm">
 64 |                                 <router-link :to="`/tables/${table.tableName}`">
 65 |                                     {{ table.tableName }}
 66 |                                 </router-link>
 67 |                             </td>
 68 |                             <td class="px-6 py-4 whitespace-nowrap text-sm">
 69 |                                 {{ table.tableType }}
 70 |                             </td>
 71 |                         </tr>
 72 |                     </tbody>
 73 |                 </table>
 74 |             </div>
 75 |         </div>
 76 |     </div>
 77 | </template>
 78 | 
 79 | <script>
 80 | import axios from 'axios';
 81 | 
 82 | export default {
 83 |     data() {
 84 |         return {
 85 |             connections: Dibi.databaseConnections,
 86 |             currentDatabaseConnection: Dibi.currentDatabaseConnection,
 87 |             database: Dibi.database,
 88 |             tables: Dibi.informationSchema.tables,
 89 |         };
 90 |     },
 91 |     methods: {
 92 |         async selectConnection(connection) {
 93 |             if (connection == this.currentDatabaseConnection) {
 94 |                 return;
 95 |             }
 96 | 
 97 |             await axios.post(`${Dibi.path}/api/select-connection`, {
 98 |                 connection,
 99 |             });
100 | 
101 |             window.location.href = Dibi.path;
102 |         },
103 |     },
104 | };
105 | </script>
106 | 


--------------------------------------------------------------------------------
/resources/js/components/DataTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <table class="divide-y divide-gray-200 text-gray-800">
  4 |             <thead class="bg-gray-50 sticky top-0">
  5 |                 <tr>
  6 |                     <th
  7 |                         v-for="column in columns"
  8 |                         :key="column.columnName"
  9 |                         class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider cursor-pointer"
 10 |                         @click.prevent="handleSorting(column.columnName)"
 11 |                     >
 12 |                         <div class="flex justify-between items-center">
 13 |                             <span />
 14 |                             <span>{{ column.columnName }}</span>
 15 |                             <span>
 16 |                                 <span v-if="column.columnName == sortKey">
 17 |                                     <svg
 18 |                                         v-if="sortDir == 'asc'"
 19 |                                         xmlns="http://www.w3.org/2000/svg"
 20 |                                         class="h-3 w-3"
 21 |                                         fill="none"
 22 |                                         viewBox="0 0 24 24"
 23 |                                         stroke="currentColor"
 24 |                                     >
 25 |                                         <path
 26 |                                             stroke-linecap="round"
 27 |                                             stroke-linejoin="round"
 28 |                                             stroke-width="2"
 29 |                                             d="M5 10l7-7m0 0l7 7m-7-7v18"
 30 |                                         />
 31 |                                     </svg>
 32 |                                     <svg
 33 |                                         v-else
 34 |                                         xmlns="http://www.w3.org/2000/svg"
 35 |                                         class="h-3 w-3"
 36 |                                         fill="none"
 37 |                                         viewBox="0 0 24 24"
 38 |                                         stroke="currentColor"
 39 |                                     >
 40 |                                         <path
 41 |                                             stroke-linecap="round"
 42 |                                             stroke-linejoin="round"
 43 |                                             stroke-width="2"
 44 |                                             d="M19 14l-7 7m0 0l-7-7m7 7V3"
 45 |                                         />
 46 |                                     </svg>
 47 |                                 </span>
 48 |                             </span>
 49 |                         </div>
 50 |                     </th>
 51 |                 </tr>
 52 |             </thead>
 53 | 
 54 |             <tbody class="bg-white divide-y divide-gray-200 overflow-y-auto">
 55 |                 <tr
 56 |                     v-for="(row, index) in rows"
 57 |                     :key="index"
 58 |                     @click.prevent="selectRow(row)"
 59 |                 >
 60 |                     <td
 61 |                         v-for="column in columns"
 62 |                         :key="column.columnName"
 63 |                         class="px-6 py-4 whitespace-nowrap text-sm"
 64 |                     >
 65 |                         <data-cell
 66 |                             :value="row[column.columnName]"
 67 |                             :column="column"
 68 |                         />
 69 |                     </td>
 70 |                 </tr>
 71 |             </tbody>
 72 |         </table>
 73 | 
 74 |         <x-dialog-modal
 75 |             :show="selectedRow !== null"
 76 |             max-width="7xl"
 77 |         >
 78 |             <template #title>
 79 |                 Row Details
 80 |             </template>
 81 |             <template #content>
 82 |                 <vue-json-pretty :data="selectedRow" />
 83 |             </template>
 84 |             <template #footer>
 85 |                 <x-secondary-button @click.native="selectedRow = null">
 86 |                     Close
 87 |                 </x-secondary-button>
 88 |             </template>
 89 |         </x-dialog-modal>
 90 |     </div>
 91 | </template>
 92 | 
 93 | <script>
 94 | import VueJsonPretty from 'vue-json-pretty';
 95 | import 'vue-json-pretty/lib/styles.css';
 96 | 
 97 | export default {
 98 |     components: {
 99 |         VueJsonPretty,
100 |     },
101 |     props: {
102 |         columns: Array,
103 |         rows: Array,
104 |         sortKey: String,
105 |         sortDir: {
106 |             type: String,
107 |             default: 'asc',
108 |         },
109 |         updateSorting: Function,
110 |     },
111 |     data() {
112 |         return {
113 |             selectedRow: null,
114 |         };
115 |     },
116 |     methods: {
117 |         selectRow(row) {
118 |             this.selectedRow = row;
119 |         },
120 | 
121 |         handleSorting(columnName) {
122 |             if (this.updateSorting) {
123 |                 this.updateSorting(columnName);
124 |             }
125 |         },
126 |     },
127 | };
128 | </script>
129 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Dibi
  2 | 
  3 | <p align="center">
  4 | <a href="https://github.com/cuonggt/laravel-dibi/actions"><img src="https://github.com/cuonggt/laravel-dibi/workflows/tests/badge.svg" alt="Build Status"></a>
  5 | <a href="https://packagist.org/packages/cuonggt/laravel-dibi"><img src="https://poser.pugx.org/cuonggt/laravel-dibi/license.svg" alt="License"></a>
  6 | </p>
  7 | 
  8 | ![screenshot](https://user-images.githubusercontent.com/8156596/115648495-b9360080-a34f-11eb-86c5-4da253046f86.png)
  9 | 
 10 | Laravel Dibi is an elegant GUI database management tool for your Laravel applications. It provides a quick access for browsing your database on local/dev server without installing any other applications.
 11 | 
 12 | ## Installation
 13 | 
 14 | You may install Dibi into your project using the Composer package manager:
 15 | 
 16 | ```bash
 17 | composer require cuonggt/laravel-dibi
 18 | ```
 19 | 
 20 | After installing Dibi, publish its assets using the `dibi:install` Artisan command:
 21 | 
 22 | ```bash
 23 | php artisan dibi:install
 24 | ```
 25 | 
 26 | Currently, Dibi only supports MySQL. I hope other DB engines like SQL Server, PostgreSQL, SQLite, etc will be supported in near future.
 27 | 
 28 | Dibi use database connection name `mysql` by default to connect. If you would like to use another database connection name, you may use the `Dibi::useDatabaseConnectionName` method. You may call this method from the `boot` method of your application's `App\Providers\DibiServiceProvider`:
 29 | 
 30 | ```php
 31 | /**
 32 |  * Bootstrap any application services.
 33 |  *
 34 |  * @return void
 35 |  */
 36 | public function boot()
 37 | {
 38 |     parent::boot();
 39 | 
 40 |     Dibi::useDatabaseConnectionName('custom_mysql');
 41 | }
 42 | ```
 43 | 
 44 | ### Dashboard Authorization
 45 | 
 46 | Dibi exposes a dashboard at the `/dibi` URI. By default, you will only be able to access this dashboard in the `local` environment. However, within your `app/Providers/DibiServiceProvider.php` file, there is an [authorization gate](https://laravel.com/docs/8.x/authorization#gates) definition. This authorization gate controls access to Dibi in **non-local** environments. You are free to modify this gate as needed to restrict access to your Dibi installation:
 47 | 
 48 | ```php
 49 | /**
 50 |  * Register the Dibi gate.
 51 |  *
 52 |  * This gate determines who can access Dibi in non-local environments.
 53 |  *
 54 |  * @return void
 55 |  */
 56 | protected function gate()
 57 | {
 58 |     Gate::define('viewDibi', function ($user) {
 59 |         return in_array($user->email, [
 60 |             'admin@example.com',
 61 |         ]);
 62 |     });
 63 | }
 64 | ```
 65 | 
 66 | ### Upgrading Dibi
 67 | 
 68 | When upgrading to a new major version of Dibi, it's important that you carefully review the upgrade guide. In addition, when upgrading to any new Dibi version, you should re-publish Dibi's assets:
 69 | 
 70 | ```bash
 71 | php artisan dibi:publish
 72 | ```
 73 | 
 74 | To keep the assets up-to-date and avoid issues in future updates, you may add the `dibi:publish` command to the `post-update-cmd` scripts in your application's `composer.json` file:
 75 | 
 76 | ```json
 77 | {
 78 |     "scripts": {
 79 |         "post-update-cmd": [
 80 |             "@php artisan dibi:publish --ansi"
 81 |         ]
 82 |     }
 83 | }
 84 | ```
 85 | 
 86 | ### Customizing Middleware
 87 | 
 88 | If needed, you can customize the middleware stack used by Dibi routes by updating your `config/dibi.php` file. If you have not published Dibi's confiugration file, you may do so using the `vendor:publish` Artisan command:
 89 | 
 90 | ```
 91 | php artisan vendor:publish --tag=dibi-config
 92 | ```
 93 | 
 94 | Once the configuration file has been published, you may edit Dibi's middleware by tweaking the `middleware` configuration option within this file:
 95 | 
 96 | ```php
 97 | /*
 98 | |--------------------------------------------------------------------------
 99 | | Dibi Route Middleware
100 | |--------------------------------------------------------------------------
101 | |
102 | | These middleware will be assigned to every Dibi route - giving you
103 | | the chance to add your own middleware to this list or change any of
104 | | the existing middleware. Or, you can simply stick with this list.
105 | |
106 | */
107 | 
108 | 'middleware' => [
109 |     'web',
110 |     EnsureUserIsAuthorized::class,
111 |     EnsureUpToDateAssets::class
112 | ],
113 | ```
114 | 
115 | ### Local Only Installation
116 | 
117 | If you plan to only use Dibi to assist your local development, you may install Dibi using the `--dev` flag:
118 | 
119 | ```bash
120 | composer require cuonggt/laravel-dibi --dev
121 | php artisan dibi:install
122 | ```
123 | 
124 | After running `dibi:install`, you should remove the `DibiServiceProvider` service provider registration from your application's `config/app.php` configuration file. Instead, manually register Dibi's service providers in the `register` method of your `App\Providers\AppServiceProvider` class. We will ensure the current environment is one of specific environments before registering the providers:
125 | 
126 | ```php
127 | /**
128 |  * Register any application services.
129 |  *
130 |  * @return void
131 |  */
132 | public function register()
133 | {
134 |     if ($this->app->environment('local', 'develop', 'staging')) {
135 |         $this->app->register(\Cuonggt\Dibi\DibiServiceProvider::class);
136 |         $this->app->register(DibiServiceProvider::class);
137 |     }
138 | }
139 | ```
140 | 
141 | Finally, you should also prevent the Dibi package from being auto-discovered by adding the following to your `composer.json` file:
142 | 
143 | ```json
144 | "extra": {
145 |     "laravel": {
146 |         "dont-discover": [
147 |             "cuonggt/laravel-dibi"
148 |         ]
149 |     }
150 | },
151 | ```
152 | 
153 | ## License
154 | 
155 | Laravel Dibi is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
156 | 


--------------------------------------------------------------------------------
/src/Repositories/AbstractDatabaseRepository.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Cuonggt\Dibi\Repositories;
  4 | 
  5 | use Cuonggt\Dibi\Contracts\DatabaseRepository;
  6 | use Cuonggt\Dibi\InformationSchema;
  7 | use Illuminate\Http\Request;
  8 | use Illuminate\Support\Arr;
  9 | 
 10 | abstract class AbstractDatabaseRepository implements DatabaseRepository
 11 | {
 12 |     /**
 13 |      * The database instance.
 14 |      *
 15 |      * @var \Illuminate\Database\ConnectionInterface
 16 |      */
 17 |     public $db;
 18 | 
 19 |     /**
 20 |      * Create a new database repository.
 21 |      *
 22 |      * @param  \Illuminate\Database\ConnectionInterface  $db
 23 |      * @return void
 24 |      */
 25 |     public function __construct($db)
 26 |     {
 27 |         $this->db = $db;
 28 |     }
 29 | 
 30 |     /**
 31 |      * {@inheritdoc}
 32 |      */
 33 |     public function getName()
 34 |     {
 35 |         return $this->db->getDatabaseName();
 36 |     }
 37 | 
 38 |     /**
 39 |      * {@inheritdoc}
 40 |      */
 41 |     public function runSqlQuery($sqlQuery)
 42 |     {
 43 |         $statement = strtolower(Arr::first(explode(' ', $sqlQuery)));
 44 | 
 45 |         if (! in_array($statement, ['select', 'insert', 'update', 'delete'])) {
 46 |             $statement = 'statement';
 47 |         }
 48 | 
 49 |         return [
 50 |             'query' => $sqlQuery,
 51 |             'statement' => $statement,
 52 |             'result' => $this->db->{$statement}($sqlQuery),
 53 |         ];
 54 |     }
 55 | 
 56 |     /**
 57 |      * {@inheritdoc}
 58 |      */
 59 |     public function informationSchema()
 60 |     {
 61 |         return new InformationSchema($this->tables());
 62 |     }
 63 | 
 64 |     /**
 65 |      * {@inheritdoc}
 66 |      */
 67 |     public function tables()
 68 |     {
 69 |         $columns = $this->columns()->groupBy('tableName');
 70 |         $indexes = $this->indexes()->groupBy('tableName');
 71 | 
 72 |         return collect($this->rawTables())
 73 |             ->map(function ($rawTable) use ($columns, $indexes) {
 74 |                 $table = $this->mapRawTableToObject($rawTable);
 75 | 
 76 |                 if ($indexes[$table->tableName] ?? false) {
 77 |                     $table->indexes($indexes[$table->tableName]->toArray());
 78 |                 }
 79 | 
 80 |                 return $table
 81 |                     ->columns($columns[$table->tableName]->toArray());
 82 |             })
 83 |             ->toArray();
 84 |     }
 85 | 
 86 |     /**
 87 |      * {@inheritdoc}
 88 |      */
 89 |     public function columns()
 90 |     {
 91 |         return collect($this->rawColumns())->map(function ($rawColumn) {
 92 |             return $this->mapRawColumnToObject($rawColumn);
 93 |         });
 94 |     }
 95 | 
 96 |     /**
 97 |      * {@inheritdoc}
 98 |      */
 99 |     public function indexes()
100 |     {
101 |         return collect($this->rawIndexes())->map(function ($rawIndex) {
102 |             return $this->mapRawIndexToObject($rawIndex);
103 |         });
104 |     }
105 | 
106 |     /**
107 |      * {@inheritdoc}
108 |      */
109 |     public function rows($table, Request $request)
110 |     {
111 |         $query = $this->buildSelectQuery($table, $request);
112 | 
113 |         $total = $query->count();
114 | 
115 |         $query->when(! empty($request->sort_key), function ($q) use ($request) {
116 |             return $q->orderBy(
117 |                 $request->sort_key,
118 |                 $request->input('sort_dir', 'asc')
119 |             );
120 |         });
121 | 
122 |         return [
123 |             'total' => $total,
124 |             'data' => $query->offset($request->input('offset', 0))->limit($request->input('limit', 50))->get(),
125 |         ];
126 |     }
127 | 
128 |     /**
129 |      * Build select query.
130 |      *
131 |      * @param  string  $table
132 |      * @return \Illuminate\Database\Query\Builder
133 |      */
134 |     protected function buildSelectQuery($table, Request $request)
135 |     {
136 |         $query = $this->db->table($table);
137 | 
138 |         foreach ($request->input('filters', []) as $filter) {
139 |             if ($filter['field'] == '__raw__') {
140 |                 if (! empty($filter['value'])) {
141 |                     $query->whereRaw($filter['value']);
142 |                 }
143 |             } elseif ($filter['field'] == '__any__') {
144 |                 foreach ($this->columns($table)->pluck('column_name')->all() as $column) {
145 |                     $query->tap(function ($query) use ($column, $filter) {
146 |                         return $this->buildSubWhereClause($query, $column, $filter['operator'], $filter['value'], 'or');
147 |                     });
148 |                 }
149 |             } else {
150 |                 $query->tap(function ($query) use ($filter) {
151 |                     return $this->buildSubWhereClause($query, $filter['field'], $filter['operator'], $filter['value']);
152 |                 });
153 |             }
154 |         }
155 | 
156 |         return $query;
157 |     }
158 | 
159 |     /**
160 |      * @param  \Illuminate\Database\Query\Builder  $query
161 |      * @param  string  $column
162 |      * @param  string  $operator
163 |      * @param  string  $value
164 |      * @param  string  $boolean
165 |      * @return \Illuminate\Database\Query\Builder
166 |      */
167 |     public function buildSubWhereClause($query, $column, $operator = '=', $value = '', $boolean = 'and')
168 |     {
169 |         if (in_array($operator, ['IN', 'NOT IN'])) {
170 |             return $query->whereIn($column, array_filter(explode(',', $value)), $boolean, $operator == 'NOT IN');
171 |         }
172 | 
173 |         if (in_array($operator, ['IS NULL', 'IS NOT NULL'])) {
174 |             return $query->whereNull($column, $boolean, $operator == 'IS NOT NULL');
175 |         }
176 | 
177 |         if (in_array($operator, ['BETWEEN', 'NOT BETWEEN'])) {
178 |             return $query->whereBetween($column, explode(' AND ', strtoupper($value)), $boolean, $operator == 'NOT BETWEEN');
179 |         }
180 | 
181 |         if (in_array($operator, ['LIKE', 'NOT LIKE'])) {
182 |             return $query->where($column, $operator, '%'.$value.'%', $boolean);
183 |         }
184 | 
185 |         return $query->where($column, $operator, $value, $boolean);
186 |     }
187 | 
188 |     /**
189 |      * Get list of raw tables.
190 |      *
191 |      * @return array
192 |      */
193 |     abstract protected function rawTables();
194 | 
195 |     /**
196 |      * Map the raw table object to a Dibi Table instance.
197 |      *
198 |      * @param  object  $rawTable
199 |      * @return \Cuonggt\Dibi\Table
200 |      */
201 |     abstract protected function mapRawTableToObject($rawTable);
202 | 
203 |     /**
204 |      * Get list of raw columns.
205 |      *
206 |      * @return array
207 |      */
208 |     abstract protected function rawColumns();
209 | 
210 |     /**
211 |      * Map the raw column object to a Dibi TableColumn instance.
212 |      *
213 |      * @param  object  $rawColumn
214 |      * @return \Cuonggt\Dibi\TableColumn
215 |      */
216 |     abstract protected function mapRawColumnToObject($rawColumn);
217 | 
218 |     /**
219 |      * Get list of raw indexes.
220 |      *
221 |      * @return array
222 |      */
223 |     abstract protected function rawIndexes();
224 | 
225 |     /**
226 |      * Map the raw index object to a Dibi TableIndex instance.
227 |      *
228 |      * @param  object  $rawIndex
229 |      * @return \Cuonggt\Dibi\TableIndex
230 |      */
231 |     abstract protected function mapRawIndexToObject($rawIndex);
232 | }
233 | 


--------------------------------------------------------------------------------
/resources/js/components/TableStructure.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <splitpanes
  3 |         horizontal
  4 |         class="default-theme"
  5 |     >
  6 |         <pane style="overflow: scroll;">
  7 |             <table class="divide-y divide-gray-200 text-gray-800">
  8 |                 <thead class="bg-gray-50">
  9 |                     <tr>
 10 |                         <th
 11 |                             scope="col"
 12 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 13 |                         >
 14 |                             #
 15 |                         </th>
 16 |                         <th
 17 |                             scope="col"
 18 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 19 |                         >
 20 |                             Column Name
 21 |                         </th>
 22 |                         <th
 23 |                             scope="col"
 24 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 25 |                         >
 26 |                             Data Type
 27 |                         </th>
 28 |                         <th
 29 |                             scope="col"
 30 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 31 |                         >
 32 |                             Character Set
 33 |                         </th>
 34 |                         <th
 35 |                             scope="col"
 36 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 37 |                         >
 38 |                             Collation
 39 |                         </th>
 40 |                         <th
 41 |                             scope="col"
 42 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 43 |                         >
 44 |                             Is Nullable
 45 |                         </th>
 46 |                         <th
 47 |                             scope="col"
 48 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
 49 |                         >
 50 |                             Column Default
 51 |                         </th>
 52 |                     </tr>
 53 |                 </thead>
 54 | 
 55 |                 <tbody class="bg-white divide-y divide-gray-200">
 56 |                     <tr
 57 |                         v-for="(column, index) in columns"
 58 |                         :key="index"
 59 |                     >
 60 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 61 |                             <data-cell
 62 |                                 :value="column.ordinalPosition"
 63 |                                 :column="{isStringDataType: false, shouldHideValue: false}"
 64 |                             />
 65 |                         </td>
 66 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 67 |                             <data-cell
 68 |                                 :value="column.columnName"
 69 |                                 :column="{isStringDataType: true, shouldHideValue: false}"
 70 |                             />
 71 |                         </td>
 72 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 73 |                             <data-cell
 74 |                                 :value="column.dataType"
 75 |                                 :column="{isStringDataType: true, shouldHideValue: false}"
 76 |                             />
 77 |                         </td>
 78 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 79 |                             <data-cell
 80 |                                 :value="column.characterSetName"
 81 |                                 :column="{isStringDataType: true, shouldHideValue: false}"
 82 |                             />
 83 |                         </td>
 84 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 85 |                             <data-cell
 86 |                                 :value="column.collationName"
 87 |                                 :column="{isStringDataType: false, shouldHideValue: false}"
 88 |                             />
 89 |                         </td>
 90 |                         <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
 91 |                             {{ column.isNullable ? 'YES' : 'NO' }}
 92 |                         </td>
 93 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
 94 |                             <data-cell
 95 |                                 :value="column.columnDefault"
 96 |                                 :column="{isStringDataType: true, shouldHideValue: false}"
 97 |                             />
 98 |                         </td>
 99 |                     </tr>
100 |                 </tbody>
101 |             </table>
102 |         </pane>
103 | 
104 |         <pane style="overflow: scroll;">
105 |             <table class="divide-y divide-gray-200 text-gray-800">
106 |                 <thead class="bg-gray-50">
107 |                     <tr>
108 |                         <th
109 |                             scope="col"
110 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
111 |                         >
112 |                             Index Name
113 |                         </th>
114 |                         <th
115 |                             scope="col"
116 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
117 |                         >
118 |                             Index Algorithm
119 |                         </th>
120 |                         <th
121 |                             scope="col"
122 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
123 |                         >
124 |                             Is Unique
125 |                         </th>
126 |                         <th
127 |                             scope="col"
128 |                             class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider"
129 |                         >
130 |                             Column Name
131 |                         </th>
132 |                     </tr>
133 |                 </thead>
134 | 
135 |                 <tbody class="bg-white divide-y divide-gray-200">
136 |                     <tr
137 |                         v-for="index in indexes"
138 |                         :key="index.index_name"
139 |                     >
140 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
141 |                             {{ index.indexName }}
142 |                         </td>
143 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
144 |                             {{ index.indexType }}
145 |                         </td>
146 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
147 |                             {{ !index.nonUnique }}
148 |                         </td>
149 |                         <td class="px-6 py-4 whitespace-nowrap text-sm">
150 |                             {{ index.columnName }}
151 |                         </td>
152 |                     </tr>
153 |                 </tbody>
154 |             </table>
155 |         </pane>
156 |     </splitpanes>
157 | </template>
158 | 
159 | <script>
160 | import { Splitpanes, Pane } from 'splitpanes';
161 | import 'splitpanes/dist/splitpanes.css';
162 | 
163 | export default {
164 |     components: { Splitpanes, Pane },
165 | 
166 |     props: {
167 |         columns: Array,
168 |         indexes: Array,
169 |     },
170 | };
171 | </script>
172 | 


--------------------------------------------------------------------------------
/.php-cs-fixer.dist.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | use PhpCsFixer\Config;
  4 | use PhpCsFixer\Finder;
  5 | 
  6 | $rules = [
  7 |     'array_indentation' => true,
  8 |     'array_syntax' => ['syntax' => 'short'],
  9 |     'binary_operator_spaces' => [
 10 |         'default' => 'single_space',
 11 |     ],
 12 |     'blank_line_after_namespace' => true,
 13 |     'blank_line_after_opening_tag' => true,
 14 |     'blank_line_before_statement' => [
 15 |         'statements' => [
 16 |             'continue',
 17 |             'return',
 18 |         ],
 19 |     ],
 20 |     'no_blank_lines_before_namespace' => false,
 21 |     'control_structure_braces' => true,
 22 |     'control_structure_continuation_position' => [
 23 |         'position' => 'same_line',
 24 |     ],
 25 |     'curly_braces_position' => [
 26 |         'control_structures_opening_brace' => 'same_line',
 27 |         'functions_opening_brace' => 'next_line_unless_newline_at_signature_end',
 28 |         'anonymous_functions_opening_brace' => 'same_line',
 29 |         'classes_opening_brace' => 'next_line_unless_newline_at_signature_end',
 30 |         'anonymous_classes_opening_brace' => 'next_line_unless_newline_at_signature_end',
 31 |         'allow_single_line_empty_anonymous_classes' => false,
 32 |         'allow_single_line_anonymous_functions' => false,
 33 |     ],
 34 |     'cast_spaces' => true,
 35 |     'class_attributes_separation' => [
 36 |         'elements' => [
 37 |             'const' => 'one',
 38 |             'method' => 'one',
 39 |             'property' => 'one',
 40 |             'trait_import' => 'none',
 41 |         ],
 42 |     ],
 43 |     'class_definition' => [
 44 |         'multi_line_extends_each_single_line' => true,
 45 |         'single_item_single_line' => true,
 46 |         'single_line' => true,
 47 |     ],
 48 |     'clean_namespace' => true,
 49 |     'compact_nullable_typehint' => true,
 50 |     'concat_space' => [
 51 |         'spacing' => 'none',
 52 |     ],
 53 |     'constant_case' => ['case' => 'lower'],
 54 |     'declare_equal_normalize' => true,
 55 |     'declare_parentheses' => true,
 56 |     'elseif' => true,
 57 |     'encoding' => true,
 58 |     'full_opening_tag' => true,
 59 |     'fully_qualified_strict_types' => true,
 60 |     'function_declaration' => true,
 61 |     'function_typehint_space' => true,
 62 |     'general_phpdoc_tag_rename' => true,
 63 |     'heredoc_to_nowdoc' => true,
 64 |     'include' => true,
 65 |     'increment_style' => ['style' => 'post'],
 66 |     'indentation_type' => true,
 67 |     'integer_literal_case' => true,
 68 |     'lambda_not_used_import' => true,
 69 |     'linebreak_after_opening_tag' => true,
 70 |     'line_ending' => true,
 71 |     'list_syntax' => true,
 72 |     'lowercase_cast' => true,
 73 |     'lowercase_keywords' => true,
 74 |     'lowercase_static_reference' => true,
 75 |     'magic_method_casing' => true,
 76 |     'magic_constant_casing' => true,
 77 |     'method_argument_space' => [
 78 |         'on_multiline' => 'ignore',
 79 |     ],
 80 |     'method_chaining_indentation' => true,
 81 |     'multiline_whitespace_before_semicolons' => [
 82 |         'strategy' => 'no_multi_line',
 83 |     ],
 84 |     'native_function_casing' => true,
 85 |     'native_function_type_declaration_casing' => true,
 86 |     'no_alias_functions' => true,
 87 |     'no_alias_language_construct_call' => true,
 88 |     'no_alternative_syntax' => true,
 89 |     'no_binary_string' => true,
 90 |     'no_blank_lines_after_class_opening' => true,
 91 |     'no_blank_lines_after_phpdoc' => true,
 92 |     'no_closing_tag' => true,
 93 |     'no_empty_phpdoc' => true,
 94 |     'no_empty_statement' => true,
 95 |     'no_extra_blank_lines' => [
 96 |         'tokens' => [
 97 |             'extra',
 98 |             'throw',
 99 |             'use',
100 |         ],
101 |     ],
102 |     'no_leading_import_slash' => true,
103 |     'no_leading_namespace_whitespace' => true,
104 |     'no_mixed_echo_print' => [
105 |         'use' => 'echo',
106 |     ],
107 |     'no_multiline_whitespace_around_double_arrow' => true,
108 |     'no_multiple_statements_per_line' => true,
109 |     'no_short_bool_cast' => true,
110 |     'no_singleline_whitespace_before_semicolons' => true,
111 |     'no_spaces_after_function_name' => true,
112 |     'no_space_around_double_colon' => true,
113 |     'no_spaces_around_offset' => [
114 |         'positions' => ['inside', 'outside'],
115 |     ],
116 |     'no_spaces_inside_parenthesis' => true,
117 |     'no_superfluous_phpdoc_tags' => [
118 |         'allow_mixed' => true,
119 |         'allow_unused_params' => true,
120 |     ],
121 |     'no_trailing_comma_in_singleline' => true,
122 |     'no_trailing_whitespace' => true,
123 |     'no_trailing_whitespace_in_comment' => true,
124 |     'no_unneeded_control_parentheses' => [
125 |         'statements' => ['break', 'clone', 'continue', 'echo_print', 'return', 'switch_case', 'yield'],
126 |     ],
127 |     'no_unneeded_curly_braces' => true,
128 |     'no_unset_cast' => true,
129 |     'no_unused_imports' => true,
130 |     'no_unreachable_default_argument_value' => true,
131 |     'no_useless_return' => true,
132 |     'no_whitespace_before_comma_in_array' => true,
133 |     'no_whitespace_in_blank_line' => true,
134 |     'normalize_index_brace' => true,
135 |     'not_operator_with_successor_space' => true,
136 |     'object_operator_without_whitespace' => true,
137 |     'ordered_imports' => ['sort_algorithm' => 'alpha'],
138 |     'psr_autoloading' => false,
139 |     'phpdoc_indent' => true,
140 |     'phpdoc_inline_tag_normalizer' => true,
141 |     'phpdoc_no_access' => true,
142 |     'phpdoc_no_package' => true,
143 |     'phpdoc_no_useless_inheritdoc' => true,
144 |     'phpdoc_order' => [
145 |         'order' => ['param', 'return', 'throws'],
146 |     ],
147 |     'phpdoc_scalar' => true,
148 |     'phpdoc_separation' => [
149 |         'groups' => [
150 |             ['deprecated', 'link', 'see', 'since'],
151 |             ['author', 'copyright', 'license'],
152 |             ['category', 'package', 'subpackage'],
153 |             ['property', 'property-read', 'property-write'],
154 |             ['param', 'return'],
155 |         ],
156 |     ],
157 |     'phpdoc_single_line_var_spacing' => true,
158 |     'phpdoc_summary' => false,
159 |     'phpdoc_to_comment' => false,
160 |     'phpdoc_tag_type' => [
161 |         'tags' => [
162 |             'inheritdoc' => 'inline',
163 |         ],
164 |     ],
165 |     'phpdoc_trim' => true,
166 |     'phpdoc_types' => true,
167 |     'phpdoc_var_without_name' => true,
168 |     'return_type_declaration' => ['space_before' => 'none'],
169 |     'self_accessor' => false,
170 |     'self_static_accessor' => true,
171 |     'short_scalar_cast' => true,
172 |     'simplified_null_return' => false,
173 |     'single_blank_line_at_eof' => true,
174 |     'single_class_element_per_statement' => [
175 |         'elements' => ['const', 'property'],
176 |     ],
177 |     'single_import_per_statement' => true,
178 |     'single_line_after_imports' => true,
179 |     'single_line_comment_style' => [
180 |         'comment_types' => ['hash'],
181 |     ],
182 |     'single_quote' => true,
183 |     'single_space_around_construct' => true,
184 |     'space_after_semicolon' => true,
185 |     'standardize_not_equals' => true,
186 |     'statement_indentation' => true,
187 |     'switch_case_semicolon_to_colon' => true,
188 |     'switch_case_space' => true,
189 |     'ternary_operator_spaces' => true,
190 |     'trailing_comma_in_multiline' => ['elements' => ['arrays']],
191 |     'trim_array_spaces' => true,
192 |     'types_spaces' => true,
193 |     'unary_operator_spaces' => true,
194 |     'visibility_required' => [
195 |         'elements' => ['method', 'property'],
196 |     ],
197 |     'whitespace_after_comma_in_array' => true,
198 | ];
199 | 
200 | $finder = Finder::create()
201 |     ->in([
202 |         __DIR__.'/src',
203 |         __DIR__.'/tests',
204 |     ])
205 |     ->name('*.php')
206 |     ->notName([
207 |         '_ide_helper_actions.php',
208 |         '_ide_helper_models.php',
209 |         '_ide_helper.php',
210 |         '.phpstorm.meta.php',
211 |         '*.blade.php',
212 |     ])
213 |     ->exclude([
214 |         'storage',
215 |         'bootstrap/cache',
216 |         'node_modules',
217 |     ])
218 |     ->ignoreDotFiles(true)
219 |     ->ignoreVCS(true);
220 | 
221 | return (new Config)
222 |     ->setFinder($finder)
223 |     ->setRules($rules)
224 |     ->setRiskyAllowed(true)
225 |     ->setUsingCache(true);
226 | 


--------------------------------------------------------------------------------
/public/app.css:
--------------------------------------------------------------------------------
1 | /*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:transparent}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:transparent}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.hidden{display:none}.h-0{height:0}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.h-screen{height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-l-full{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.rounded-l-none{border-bottom-left-radius:0;border-top-left-radius:0}.rounded-r-none{border-bottom-right-radius:0;border-top-right-radius:0}.border{border-width:1px}.border-r-4{border-right-width:4px}.border-t-2{border-top-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-2{padding:.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pl-4{padding-left:1rem}.pr-6{padding-right:1.5rem}.pr-8{padding-right:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-sans{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-all{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:rounded-l-full:hover{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.focus\:border-blue-300:focus{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity))}.focus\:border-gray-900:focus{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.focus\:border-indigo-300:focus{--tw-border-opacity:1;border-color:rgb(165 180 252/var(--tw-border-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-indigo-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(199 210 254/var(--tw-ring-opacity))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity:0.5}.active\:bg-gray-50:active{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.active\:bg-gray-900:active{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.active\:text-gray-800:active{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.disabled\:opacity-25:disabled{opacity:.25}.disabled\:opacity-75:disabled{opacity:.75}@media (min-width:640px){.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:w-full{width:100%}.sm\:max-w-2xl{max-width:42rem}.sm\:max-w-3xl{max-width:48rem}.sm\:max-w-4xl{max-width:56rem}.sm\:max-w-5xl{max-width:64rem}.sm\:max-w-6xl{max-width:72rem}.sm\:max-w-7xl{max-width:80rem}.sm\:max-w-lg{max-width:32rem}.sm\:max-w-md{max-width:28rem}.sm\:max-w-sm{max-width:24rem}.sm\:max-w-xl{max-width:36rem}.sm\:translate-y-0{--tw-translate-y:0px}.sm\:scale-100,.sm\:translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:scale-100{--tw-scale-x:1;--tw-scale-y:1}.sm\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:px-0{padding-left:0;padding-right:0}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
2 | 


--------------------------------------------------------------------------------
/resources/js/views/TableDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="grow flex flex-col overflow-x-auto">
  3 |         <div class="flex flex-col h-0 flex-1">
  4 |             <div class="bg-white w-full sticky top-0">
  5 |                 <div class="px-12">
  6 |                     <div class="py-6">
  7 |                         <div class="flex items-center justify-between text-sm text-gray-700 uppercase font-bold tracking-widest">
  8 |                             <div>Table {{ currentTable.tableName }}</div>
  9 |                             <div>
 10 |                                 <router-link to="/sql-query">
 11 |                                     <x-button>SQL</x-button>
 12 |                                 </router-link>
 13 |                             </div>
 14 |                         </div>
 15 | 
 16 |                         <div
 17 |                             v-if="tab == 'data' && filterEnabled"
 18 |                             class="mt-6 border-t-2 border-gray-200"
 19 |                         >
 20 |                             <div class="flex flex-col w-full">
 21 |                                 <form>
 22 |                                     <div class="flex mt-4">
 23 |                                         <select
 24 |                                             v-model="filterForm.field"
 25 |                                             class="py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pr-8"
 26 |                                         >
 27 |                                             <option
 28 |                                                 v-for="column in currentTable.columns"
 29 |                                                 :key="`column-name-${column.columnName}`"
 30 |                                                 :value="column.columnName"
 31 |                                             >
 32 |                                                 {{ column.columnName }}
 33 |                                             </option>
 34 |                                             <hr>
 35 |                                             <option value="__any__">
 36 |                                                 Any column
 37 |                                             </option>
 38 |                                             <option value="__raw__">
 39 |                                                 Raw SQL
 40 |                                             </option>
 41 |                                         </select>
 42 |                                         <select
 43 |                                             v-show="filterForm.field != '__raw__'"
 44 |                                             v-model="filterForm.operator"
 45 |                                             class="py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pr-8 ml-2"
 46 |                                         >
 47 |                                             <option value="=">
 48 |                                                 =
 49 |                                             </option>
 50 |                                             <option value="<>">
 51 |                                                 &lt;&gt;
 52 |                                             </option>
 53 |                                             <option value="<">
 54 |                                                 &lt;
 55 |                                             </option>
 56 |                                             <option value=">">
 57 |                                                 &gt;
 58 |                                             </option>
 59 |                                             <option value="<=">
 60 |                                                 &lt;=
 61 |                                             </option>
 62 |                                             <option value=">=">
 63 |                                                 &gt;=
 64 |                                             </option>
 65 |                                             <hr>
 66 |                                             <option value="IN">
 67 |                                                 IN
 68 |                                             </option>
 69 |                                             <option value="NOT IN">
 70 |                                                 NOT IN
 71 |                                             </option>
 72 |                                             <hr>
 73 |                                             <option value="IS NULL">
 74 |                                                 IS NULL
 75 |                                             </option>
 76 |                                             <option value="IS NOT NULL">
 77 |                                                 IS NOT NULL
 78 |                                             </option>
 79 |                                             <hr>
 80 |                                             <option value="BETWEEN">
 81 |                                                 BETWEEN
 82 |                                             </option>
 83 |                                             <option value="NOT BETWEEN">
 84 |                                                 NOT BETWEEN
 85 |                                             </option>
 86 |                                             <hr>
 87 |                                             <option value="LIKE">
 88 |                                                 LIKE
 89 |                                             </option>
 90 |                                             <option value="NOT LIKE">
 91 |                                                 NOT LIKE
 92 |                                             </option>
 93 |                                         </select>
 94 |                                         <x-input
 95 |                                             v-model="filterForm.value"
 96 |                                             class="flex-1 block w-full ml-2 px-4 py-2"
 97 |                                             :placeholder="filterValuePlaceholder"
 98 |                                             :disabled="isNullOrNotNullOperator"
 99 |                                         />
100 |                                         <x-button
101 |                                             class="ml-2"
102 |                                             :disabled="loadingRecords"
103 |                                             @click.native="loadRecords"
104 |                                         >
105 |                                             Apply
106 |                                         </x-button>
107 |                                     </div>
108 |                                 </form>
109 |                             </div>
110 |                         </div>
111 |                     </div>
112 |                 </div>
113 |             </div>
114 | 
115 |             <div
116 |                 class="flex-1 flex flex-col bg-gray-200 overflow-y-auto"
117 |             >
118 |                 <template v-if="tab == 'data'">
119 |                     <div class="flex min-w-full overflow-x-auto">
120 |                         <data-table
121 |                             :columns="currentTable.columns"
122 |                             :rows="records"
123 |                             :sort-key="sortKey"
124 |                             :sort-dir="sortDir"
125 |                             :update-sorting="updateSorting"
126 |                         />
127 |                     </div>
128 |                 </template>
129 | 
130 |                 <table-structure
131 |                     v-if="tab == 'structure'"
132 |                     :columns="currentTable.columns"
133 |                     :indexes="currentTable.indexes"
134 |                 />
135 |             </div>
136 | 
137 |             <div class="bg-gray-100 border-t-2 sticky bottom-0">
138 |                 <div class="px-12">
139 |                     <div class="py-4">
140 |                         <div class="flex justify-between items-center">
141 |                             <div class="flex">
142 |                                 <button
143 |                                     class="inline-flex items-center px-4 py-2 border rounded-md font-semibold text-xs uppercase tracking-widest transition ease-in-out duration-150 rounded-r-none"
144 |                                     :class="tab == 'data' ? 'bg-gray-800 border-transparent text-white hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-75' : 'bg-white border-gray-300 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50'"
145 |                                     :disabled="tab == 'data'"
146 |                                     @click="tab = 'data'"
147 |                                 >
148 |                                     Data
149 |                                 </button>
150 |                                 <button
151 |                                     class="inline-flex items-center px-4 py-2 border rounded-md font-semibold text-xs uppercase tracking-widest transition ease-in-out duration-150 rounded-l-none rounded-r-none"
152 |                                     :class="tab == 'structure' ? 'bg-gray-800 border-transparent text-white hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-75' : 'bg-white border-gray-300 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50'"
153 |                                     :disabled="tab == 'structure'"
154 |                                     @click="tab = 'structure'"
155 |                                 >
156 |                                     Structure
157 |                                 </button>
158 |                             </div>
159 |                             <div
160 |                                 v-if="tab == 'data'"
161 |                                 class="text-sm text-gray-700"
162 |                             >
163 |                                 <span v-if="loadingRecords">Loading rows...</span>
164 |                                 <span v-else>
165 |                                     <span v-if="total > 0">
166 |                                         {{ formatNumber(from) }}-{{ formatNumber(to) }} of {{ formatNumber(total) }} rows
167 |                                     </span>
168 |                                     <span v-else>
169 |                                         0 rows
170 |                                     </span>
171 |                                 </span>
172 |                             </div>
173 |                             <div
174 |                                 v-if="tab == 'data'"
175 |                                 class="flex gap-x-4"
176 |                             >
177 |                                 <div>
178 |                                     <button
179 |                                         class="inline-flex items-center px-4 py-2 border rounded-md font-semibold text-xs uppercase tracking-widest transition ease-in-out duration-150"
180 |                                         :class="filterEnabled ? 'bg-gray-800 border-transparent text-white hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-75' : 'bg-white border-gray-300 text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50'"
181 |                                         @click="toggleFilter"
182 |                                     >
183 |                                         Filters
184 |                                     </button>
185 |                                 </div>
186 |                                 <div class="flex">
187 |                                     <button
188 |                                         class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out rounded-r-none disabled:opacity-25"
189 |                                         title="Previous page"
190 |                                         :disabled="offset == 0 || loadingRecords"
191 |                                         @click.prevent="selectPreviousPage"
192 |                                     >
193 |                                         <icon-chevron-left size="4" />
194 |                                     </button>
195 |                                     <button
196 |                                         class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out rounded-l-none rounded-r-none"
197 |                                         title="Page settings"
198 |                                         :disabled="loadingRecords"
199 |                                         @click.prevent="startSetting"
200 |                                     >
201 |                                         <icon-cog size="4" />
202 |                                     </button>
203 |                                     <button
204 |                                         class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out rounded-l-none disabled:opacity-25"
205 |                                         title="Next page"
206 |                                         :disabled="!hasMorePages || loadingRecords"
207 |                                         @click.prevent="selectNextPage"
208 |                                     >
209 |                                         <icon-chevron-right size="4" />
210 |                                     </button>
211 |                                 </div>
212 |                             </div>
213 |                         </div>
214 |                     </div>
215 |                 </div>
216 |             </div>
217 |         </div>
218 | 
219 |         <x-dialog-modal
220 |             :show="setting"
221 |             max-width="sm"
222 |         >
223 |             <template #title>
224 |                 Page settings
225 |             </template>
226 |             <template #content>
227 |                 <form @submit.prevent="setPageSettings">
228 |                     <div>
229 |                         <x-label
230 |                             for="limit"
231 |                             value="Limit"
232 |                         />
233 |                         <x-input
234 |                             id="limit"
235 |                             v-model="pageSettingsForm.limit"
236 |                             type="text"
237 |                             class="mt-1 block w-full"
238 |                             placecholder="Limit"
239 |                             required
240 |                             autofocus
241 |                         />
242 |                     </div>
243 |                     <div class="mt-4">
244 |                         <x-label
245 |                             for="offset"
246 |                             value="Offset"
247 |                         />
248 |                         <x-input
249 |                             id="offset"
250 |                             v-model="pageSettingsForm.offset"
251 |                             type="text"
252 |                             class="mt-1 block w-full"
253 |                             placecholder="Offset"
254 |                             required
255 |                         />
256 |                     </div>
257 |                 </form>
258 |             </template>
259 |             <template #footer>
260 |                 <x-secondary-button @click.native="closePageSettingsModal">
261 |                     Nevermind
262 |                 </x-secondary-button>
263 | 
264 |                 <x-button
265 |                     class="ml-2"
266 |                     :class="{ 'opacity-25': loadingRecords }"
267 |                     :disabled="loadingRecords"
268 |                     @click.native="setPageSettings"
269 |                 >
270 |                     Go
271 |                 </x-button>
272 |             </template>
273 |         </x-dialog-modal>
274 |     </div>
275 | </template>
276 | 
277 | <script>
278 | export default {
279 |     props: {
280 |         tableName: String,
281 |         currentTable: Object,
282 |     },
283 | 
284 |     data() {
285 |         return {
286 |             tab: 'data',
287 |             records: [],
288 |             total: 0,
289 |             offset: 0,
290 |             limit: 50,
291 |             sortKey: null,
292 |             sortDir: 'asc',
293 |             loadingRecords: true,
294 |             setting: false,
295 |             pageSettingsForm: {
296 |                 offset: null,
297 |                 limit: null,
298 |             },
299 |             filterEnabled: false,
300 |             filterForm: {
301 |                 field: '__raw__',
302 |                 operator: '=',
303 |                 value: '',
304 |             },
305 |             filterValuePlaceholder: 'EMPTY',
306 |         };
307 |     },
308 | 
309 |     computed: {
310 |         from() {
311 |             return this.offset + 1;
312 |         },
313 | 
314 |         to() {
315 |             return this.offset + this.records.length;
316 |         },
317 | 
318 |         hasMorePages() {
319 |             return this.offset + this.records.length < this.total;
320 |         },
321 | 
322 |         isNullOrNotNullOperator() {
323 |             return ['IS NULL', 'IS NOT NULL'].includes(this.filterForm.operator);
324 |         },
325 |     },
326 | 
327 |     watch: {
328 |         'filterForm.operator': function (newVal) {
329 |             if (['IN', 'NOT IN'].includes(newVal)) {
330 |                 this.filterValuePlaceholder = '1,2,3';
331 |             } else if (['IS NULL', 'IS NOT NULL'].includes(newVal)) {
332 |                 this.filterForm.value = '';
333 |                 this.filterValuePlaceholder = '';
334 |             } else if (['BETWEEN', 'NOT BETWEEN'].includes(newVal)) {
335 |                 this.filterValuePlaceholder = '1 AND 100';
336 |             } else if (['LIKE', 'NOT LIKE'].includes(newVal)) {
337 |                 this.filterValuePlaceholder = 'Pattern';
338 |             } else {
339 |                 this.filterValuePlaceholder = 'EMPTY';
340 |             }
341 |         },
342 |     },
343 | 
344 |     mounted() {
345 |         this.loadRecords();
346 |     },
347 | 
348 |     methods: {
349 |         async loadRecords() {
350 |             this.loadingRecords = true;
351 | 
352 |             const data = this.filterEnabled ? {
353 |                 filters: [
354 |                     this.filterForm,
355 |                 ],
356 |             } : {};
357 | 
358 |             const queryParams = this.httpBuildQuery({
359 |                 offset: this.offset,
360 |                 limit: this.limit,
361 |                 sort_key: this.sortKey ? this.sortKey : '',
362 |                 sort_dir: this.sortDir,
363 |             });
364 | 
365 |             try {
366 |                 const response = await axios.post(
367 |                     `${Dibi.path}/api/tables/${this.tableName}/rows/filter?${queryParams}`,
368 |                     data,
369 |                 );
370 | 
371 |                 this.records = response.data.data;
372 |                 this.total = response.data.total;
373 |                 this.loadingRecords = false;
374 |             } catch (error) {
375 |                 this.loadingRecords = false;
376 |             }
377 |         },
378 | 
379 |         updateSorting(sortKey) {
380 |             if (this.sortKey == sortKey) {
381 |                 if (this.sortDir == 'asc') {
382 |                     this.sortDir = 'desc';
383 |                 } else {
384 |                     this.sortDir = 'asc';
385 |                 }
386 |             } else {
387 |                 this.sortDir = 'asc';
388 |             }
389 | 
390 |             this.sortKey = sortKey;
391 | 
392 |             this.loadRecords();
393 |         },
394 | 
395 |         selectPreviousPage() {
396 |             if (this.offset > this.limit) {
397 |                 this.offset = this.offset - this.limit;
398 |             } else {
399 |                 this.offset = 0;
400 |             }
401 | 
402 |             this.loadRecords();
403 |         },
404 | 
405 |         selectNextPage() {
406 |             this.offset = this.offset + this.limit;
407 | 
408 |             this.loadRecords();
409 |         },
410 | 
411 |         startSetting() {
412 |             this.pageSettingsForm = {
413 |                 limit: this.limit,
414 |                 offset: this.offset,
415 |             };
416 |             this.setting = true;
417 |         },
418 | 
419 |         setPageSettings() {
420 |             this.limit = parseInt(this.pageSettingsForm.limit);
421 |             this.offset = parseInt(this.pageSettingsForm.offset);
422 |             this.loadRecords();
423 |             this.closePageSettingsModal();
424 |         },
425 | 
426 |         closePageSettingsModal() {
427 |             this.setting = false;
428 |         },
429 | 
430 |         toggleFilter() {
431 |             this.filterEnabled = !this.filterEnabled;
432 | 
433 |             if (! this.filterEnabled) {
434 |                 this.loadRecords();
435 |             }
436 |         },
437 |     },
438 | };
439 | </script>
440 | 


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