Crud Typerocket svelte

if (!DB::schema()->hasTable('samples')) {
  DB::statement("CREATE TABLE IF NOT EXISTS `samples` (
    `id` int(11) NOT NULL,
    `data` varchar(200) DEFAULT NULL,
    `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
    `updated_at` datetime DEFAULT NULL,
    `deleted_at` datetime DEFAULT NULL
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1");
  DB::statement("ALTER TABLE `samples`
  ADD PRIMARY KEY (`id`)");
  DB::statement("ALTER TABLE `samples`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT");
}

 '/samples/:action?/:id?': wrap({
          asyncComponent: () => import('./routes/samples/base.svelte')
      }),

<li class="dropdown"><a class="nav-link menu-title link-nav" class:active={$location === '/samples'} href="#/samples"><i data-feather="git-pull-request"></i><span>Sample </span></a></li>

<script>
    import { location, link } from 'svelte-spa-router';
    import Samples from './index.svelte'
    import SamplesAdd from './add.svelte'
    import SamplesEdit from './edit.svelte'
    import Test from './test.svelte'

    let samples ;      
    import {
          onMount
      } from "svelte";
      
      onMount(async () => {
        let getFetchData = await getFetch({},'', 
              `${window.location.origin}/api/samples/`, 'GET',tr_nonce);
        samples = getFetchData.data.samples ;
      });

    export let params = {} ;

       

</script>

{#if samples && $location == '/samples'}
 <Samples bind:samples />
{:else if $location.includes('/samples/add')}
<SamplesAdd bind:samples />
{:else if $location.includes('/samples/edit')}
<SamplesEdit bind:samples {params} />
{/if}

<script>
import {
    onMount
} from "svelte";

export let samples;

onMount(async () => {

    let data = samples;
    let columns = [{
            title: `No.`,
            width: '5%',
            visible: true,
            data: function(row, type, val, meta) {
                return meta.row + 1;
            },
        },
        {
            title: `Id`,
            visible: false,
            data: function(row, type, val, meta) {
                return row.id;
            },
        },
        {
            title: `Data`,
            visible: true,
            data: function(row, type, val, meta) {
                return row.data;
            },
            render: function(data, type, row) {
                return `${row.data}`
            }
        },
        {
            title: `Updated At`,
            data: function(row, type, val, meta) {
                return row.updated_at;
            },
        },
        {
            title: "Action",
            data: null,
            render: function(data, type, row) {

                return `
                      <div class="btn-group">
                      <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                      Options
                      </button>
                      <ul class="dropdown-menu">
                        <li><a href="#/samples/edit/${row.id}" class="dropdown-item edit"><i class="fa fa-edit"></i> Edit</a><li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item delete" href="javascript:;"><i class="fa fa-trash text-danger"></i> Trash</a></li>
                      </ul>
                      </div>`;

            },
        },
        {
            title: `<div class="form-check form-switch">
                            <input class="form-check-input allcheck" type="checkbox" >
                        </div>`,
            data: null,
            render: function(data, type, row) {
                return `<div class="form-check form-switch ">
                            <input class="form-check-input rowcheck" data-id="${row.id}" type="checkbox" >
                        </div>`;

            },
        },

    ];

    (function($) {
        let table = $('#example').DataTable({
            order: [
                [0, 'desc']
            ],
            responsive: true,
            scrollX: true,
            dom: 'Bfrtip',
            buttons: [
                'colvis',
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                'pageLength',
            ],
            lengthMenu: [
                [10, 25, 50, -1],
                ['10 rows', '25 rows', '50 rows', 'Show all']
            ],
            data,
            columns,
        });

        $('#example').on('click', 'tbody tr', async function(e) {
            let id = table.row(this).data().id;
            if (e.target.closest(".delete")) {

                let confirm = await swal({
                        title: "Are you sure?",
                        text: "Once deleted, you will not be able to recover this file!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        return willDelete;
                    });

                if (!confirm) {
                    return;
                }

                let getFetchData = await getFetch({}, '',
                    `${window.location.origin}/api/samples/delete/${id}`, 'POST',
                    tr_nonce);

                data = collect(data).filter((value, key) => {
                    return value.id != id;
                }).toArray();
                samples = data;
                table.clear().rows.add(data).draw();
                swal("Poof! This account has been deleted!", {
                    icon: "success",
                });

            } else if (e.target.closest(".rowcheck")) {
                // alert("ddd");
            }

        });

        document.querySelector("#example_wrapper").addEventListener("click", (e) => {
            if (e.target.closest(".allcheck")) {
                for (let a = 0; a < document.querySelectorAll('.rowcheck').length; a++) {
                    document.querySelectorAll('.rowcheck')[a].checked = e.target.closest(".allcheck").checked;
                }

            }
        });

        document.querySelector(".bulkDelete").addEventListener("click", async (e) => {
            if (document.querySelectorAll('.rowcheck:checked').length > 0) {
                let confirm = await swal({
                        title: "Are you sure?",
                        text: "Once deleted, you will not be able to recover this file!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        return willDelete;
                    });

                if (!confirm) {
                    return;
                }

                let bulkId = [];
                for (let a = 0; a < document.querySelectorAll('.rowcheck:checked').length; a++) {
                    bulkId.push(document.querySelectorAll('.rowcheck:checked')[a].dataset.id);
                }

                let getFetchData = await getFetch({
                        bulkId
                    }, '',
                    `${window.location.origin}/api/samples/bulkDelete`, 'POST',
                    tr_nonce);

                data = collect(data).filter((value, key) => {
                    return !bulkId.includes(value.id.toString());
                }).toArray();
                samples = data;
                table.clear().rows.add(data).draw();

                swal(`Poof! All selected has been deleted!`, "Error", "error");
            } else {
                swal(`Poof! No selected data!`, "Error", "error");
            }
        });

    })(jQuery);

    document.querySelector(".loader-wrapper").style.display = 'none';

});
</script>

<div class="container-fluid dashboard-default-sec">
    <div class="card">
        <div class="card-header">
            <div class="float-start">
                <div class="fs-4 ">samples</div>
            </div>
            <div class="float-end me-3">

                <div class="btn-group">
                    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        Options
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item bulkDelete" href="javascript:;"><i class="fa fa-trash text-danger"></i> Trash Selected</a></li>
                    </ul>
                </div>

                <a href="#/samples/add" class="btn btn-primary createnew"><i class="fa fa-plus"></i>
                    Create samples </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">

                    <table id="example" class="display" style="width:100%">
                    </table>
                </div>
            </div>

        </div>

    </div>

</div>

<script>
import {
    push,
    pop,
    replace
} from 'svelte-spa-router'
import {
    onMount
} from "svelte";

export let samples;

onMount(async () => {
    document ?.querySelector(".btn-save") ?.addEventListener("click", async (e) => {
        if (!document.querySelector("#formmodal").reportValidity()) {
            return;
        }

        let getFetchData;
        getFetchData = await getFetch({}, 'formmodal',
            `${window.location.origin}/api/samples/create`, 'POST',
            tr_nonce);

        if (getFetchData.error) {
            swal(`${getFetchData.error}`, "Error", "error");

        } else {
            swal("Successful Save", {
                icon: "success",
            });

            if (getFetchData ?.data ?.id) {
                samples.push(getFetchData.data.samples);
                push("/samples")
            }
        }

    });

    document.querySelector(".loader-wrapper").style.display = 'none'
});
</script>

<div class="card">
    <div class="card-header">
        <div class="fs-4 float-start">Add samples</div>
        <div class="float-end me-3">
            <a href="#/samples" class="btn btn-info"><i class="fa fa-backward"></i> Back</a>
        </div>

    </div>
    <div class="card-body">
        <div class="row">
            <div class="col">

                <form action="" method="post" enctype="multipart/form-data" id="formmodal">

                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <label for="data" class="form-check-label">data:</label>
                                <input type="text" name="data" id="data" required>
                            </div>
                        </div>
                        <div class="pt-3"></div>

                        <button type="button" class="btn btn-success btn-save float-end me-3"><i class="fa fa-save"></i> Save</button>
                    </div>

                </form>
            </div>
        </div>

    </div>

</div>

<script>
import {
    push,
    pop,
    replace
} from 'svelte-spa-router'
export let params = {}
export let samples;
let fields = {};

import {
    onMount
} from "svelte";

onMount(async () => {
    fields.data = collect(samples).where('id', '==', params.id).first().data;

    document.querySelector(".btn-save").addEventListener("click", async (e) => {
        if (!document.querySelector("#formmodal").reportValidity()) {
            return;
        }

        let getFetchData = await getFetch({}, 'formmodal',
            `${window.location.origin}/api/samples/update/${params.id}`, 'POST',
            tr_nonce);

        if (getFetchData.error) {
            swal(`${getFetchData.error}`, "Error", "error");
            document.querySelector(".btn-save").disabled = false;
        } else {
            swal("Successful Save", {
                icon: "success",
            });

            samples = collect(samples).map((item) => {
                if (item.id == params.id) {
                    return getFetchData.data.samples
                } else {
                    return item;
                }
            }).all();
            push("/samples");

        }
    });

    document.querySelector(".loader-wrapper").style.display = 'none';

});
</script>

<div class="card">
    <div class="card-header">
        <div class="fs-4 float-start">Edit samples</div>
        <div class="float-end me-3">
            <a href="#/samples" class="btn btn-info"><i class="fa fa-backward"></i> Back</a>
        </div>

    </div>
    <div class="card-body">
        <div class="row">
            <div class="col">

                <form action="" method="post" enctype="multipart/form-data" id="formmodal">

                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <label for="data" class="form-check-label">data:</label>
                                <input type="text" name="data" id="data" bind:value={fields.data} required>
                            </div>
                        </div>
                        <div class="pt-3"></div>

                        <button type="button" class="btn btn-success btn-save float-end me-3"><i class="fa fa-save"></i> Save</button>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>

php galaxy make:controller base samplesController

    tr_route()->get()->match('/api/samples')->do('index@samples');
    tr_route()->get()->match('/api/samples/add')->do('add@samples');
    tr_route()->post()->match('/api/samples/create')->do('create@samples');
    tr_route()->get()->match('/api/samples/edit/([^/]+)', ['id'])->do('edit@samples');
    tr_route()->post()->match('/api/samples/update/([^/]+)', ['id'])->do('update@samples');
    tr_route()->post()->match('/api/samples/delete/([^/]+)', ['id'])->do('delete@samples');
    tr_route()->post()->match('/api/samples/bulkDelete')->do('bulkDelete@samples');

<?php

namespace App\Controllers;

use App\Models\samples;
use TypeRocket\Controllers\Controller;
use Illuminate\Database\Capsule\Manager as DB;

class samplesController extends Controller
{
    /**
     * The index page for admin
     *
     * @return mixed
     */
    public function index()
    {
        // TODO: Implement index() method.
        // TODO: Implement index() method.
        $samples = DB::select("SELECT 
        * FROM samples
        WHERE deleted_at IS NULL
            ");

        echo json_encode([
            'action' => 'index',
            'status' => 'success',
            'data' => compact('samples')
        ]);
        exit();
    }

    /**
     * The add page for admin
     *
     * @return mixed
     */
    public function add()
    {
        // TODO: Implement add() method.
    }

    /**
     * Create item
     *
     * AJAX requests and normal requests can be made to this action
     *
     * @return mixed
     */
    public function create()
    {
        // TODO: Implement create() method.
        $samples = DB::table('samples')->updateOrInsert(
            ['id' => null],
            [
                'data' => $_POST['data'],
                'updated_at' => date('Y-m-d H:i:s')
            ]
        );
        $id = DB::getPdo()->lastInsertId();

        $samples = collect(DB::select("SELECT 
        * FROM samples
        WHERE id = '{$id}'
            "))->first();

        echo json_encode([
            'action' => 'create',
            'status' => 'success',
            'data' => compact('id', 'samples')
        ]);
        exit();
    }

    /**
     * The edit page for admin
     *
     * @param string|samples $samples
     *
     * @return mixed
     */
    public function edit($id = null)
    {
        // TODO: Implement edit() method.
        $samples = collect(DB::select("SELECT 
        * FROM samples
        WHERE id = '{$id}'
            "))->first();


        // TODO: Implement edit() method.
        echo json_encode([
            'action' => 'edit',
            'status' => 'success',
            'data' => compact('samples', 'id')
        ]);
        exit();
    }

    /**
     * Update item
     *
     * AJAX requests and normal requests can be made to this action
     *
     * @param string|samples $samples
     *
     * @return mixed
     */
    public function update($id = null)
    {
        // TODO: Implement update() method.
        $samples = DB::table('samples')->updateOrInsert(
            ['id' => $id],
            [
                'data' => $_POST['data'],
                'updated_at' => date('Y-m-d H:i:s')
            ]
        );

        $samples = collect(DB::select("SELECT 
        * FROM samples
        WHERE id = '{$id}'
            "))->first();

        echo json_encode([
            'action' => 'update',
            'status' => 'success',
            'data' => compact('id', 'samples')
        ]);
        exit();
    }

    /**
     * The show page for admin
     *
     * @param string|samples $samples
     *
     * @return mixed
     */
    public function show(samples $samples)
    {
        // TODO: Implement show() method.
    }

    /**
     * The delete page for admin
     *
     * @param string|samples $samples
     *
     * @return mixed
     */
    public function delete($id = null)
    {
        // TODO: Implement delete() method.
        // TODO: Implement delete() method.
        $samples = DB::table('samples')->updateOrInsert(
            ['id' => $id],
            [
                'deleted_at' => date('Y-m-d H:i:s')
            ]
        );
        echo json_encode([
            'action' => 'delete',
            'status' => 'success',
            'data' => compact('id')
        ]);
        exit();
    }

    public function bulkDelete()
    {
        $bulkId = explode(",",$_POST['bulkId']);
        DB::table('samples')
            ->whereIn('id', $bulkId)
            ->update(['deleted_at' => date('Y-m-d H:i:s')]);


        echo json_encode([
            'action' => 'delete',
            'status' => 'success',
            'data' => compact('bulkId')
        ]);
        exit();
    }


    /**
     * Destroy item
     *
     * AJAX requests and normal requests can be made to this action
     *
     * @param string|samples $samples
     *
     * @return mixed
     */
    public function destroy(samples $samples)
    {
        // TODO: Implement destroy() method.
    }
}