crud list blade component

Author: midesweb

resources/assets/js/api-kit-crud.js

@@ -0,0 +1,49 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/crud/components/crud/crud.js';
+import { CrudConfigBuilder } from '@dile/crud/lib/CrudConfigBuilder';
+import { MyResponseApiAdapter } from './responseApiAdapter.js';
+
+
+export class ApiKitCrud extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      endpoint: { type: String },
+      config: { type: Object },
+      generatedConfig: { type: Object },
+    };
+  }
+
+  firstUpdated() {
+    this.config = {
+      ...this.config,
+      responseAdapter: new MyResponseApiAdapter(),
+    }
+    this.generatedConfig = new CrudConfigBuilder(this.endpoint, this.config).getConfig();
+    this.generatedConfig.templates.item = this.getItemTemplate();
+  }
+
+  render() {
+    return html`
+      ${this.generatedConfig 
+        ? html`
+            <dile-crud
+              .config="${this.generatedConfig}">
+            </dile-crud>
+          `
+        : html`<p>Loading...</p>`}
+    `;
+  }
+
+  getItemTemplate() {
+
+  }
+}
+customElements.define('api-kit-crud', ApiKitCrud);

resources/assets/js/api-kit.js

@@ -0,0 +1,5 @@
+import { ApiKitCrud } from './api-kit-crud.js';
+import { html } from 'lit';
+
+window.litHtml = html;
+window.ClassApiKitCrud = ApiKitCrud;

resources/assets/js/responseApiAdapter.js

@@ -0,0 +1,7 @@
+import { ResponseApiAdapter } from '@dile/crud/lib/ResponseApiAdapter';
+
+export class MyResponseApiAdapter extends ResponseApiAdapter {
+  getElementList() {
+    return this.response.data.result.data;
+  }
+}

resources/views/components/crud-list.blade.php

@@ -0,0 +1,15 @@
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        class CrudListComponent extends ClassApiKitCrud {
+            getItemTemplate(item) {
+                return (item) => litHtml`@if($itemElement) <{{ $itemElement }} .item="${item}"></{{ $itemElement }}> @elseif(count($displayProperties) === 0) Set $itemElement component or $displayProperties array to show item content @else @foreach($displayProperties as $property) ${ item.{{ $property }} } @if(!$loop->last) - @endif @endforeach @endif`; 
+            }
+        }
+        customElements.define('crud-list-component', CrudListComponent);
+    });
+</script>
+
+<crud-list-component
+    endpoint="{{ $endpoint }}"
+    config="{{ json_encode($config) }}"
+></crud-list-component>

src/APIKitServiceProvider.php

@@ -10,7 +10,24 @@ class APIKitServiceProvider extends ServiceProvider
 {
     public function boot(): void
     {
-        // ...
+        // Load views
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'api-kit');
+        
+        if ($this->app->runningInConsole()) {
+            // Publish views
+            $this->publishes([
+                __DIR__.'/../resources/views' => resource_path('views/vendor/api-kit'),
+            ], 'api-kit-views');
+
+            $this->publishes([
+                __DIR__.'/../resources/assets' => resource_path('vendor/api-kit'),
+            ], 'api-kit-assets');
+        }
+        
+        // Register Blade components
+        $this->loadViewComponentsAs('api-kit', [
+            \EscuelaIT\APIKit\View\Components\CrudList::class,
+        ]);
     }
 
     public function register(): void

src/View/Components/CrudList.php

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace EscuelaIT\APIKit\View\Components;
+
+use Illuminate\Support\Str;
+use Illuminate\View\Component;
+
+class CrudList extends Component
+{
+    public array $config;
+
+    public function __construct(
+        public string $endpoint,
+        public $itemElement = null,
+        public $displayProperties = [],
+        public ?array $filters = null,
+        public ?array $sort = null,
+    ) {
+
+        $this->config = [
+            'availableFilters' => $this->filters ?? [],
+            'sort' => $this->sort ?? null,
+            'customization' => [
+                'disableFilter' => $this->filters ? false : true,
+                'disableSort' => $this->sort ? false : true,
+                'disablePagination' => false,
+            ]
+        ];
+    }
+
+    public function render()
+    {
+        return view('api-kit::components.crud-list');
+    }
+}