DEV Community: anil kumar thakur

Building Better JSON Visualization in Vue 3

anil kumar thakur — Wed, 23 Oct 2024 15:19:01 +0000

When working with complex data structures in JavaScript applications, especially JSON objects, it's crucial to have a tool that helps visualize the data clearly. If you're building a Vue 3 application and looking for a robust way to display your JSON data, the anilkumarthakur/vue3-json-viewer package is an ideal solution.

Introduction to vue3-json-viewer

anilkumarthakur/vue3-json-viewer is a lightweight yet powerful package designed specifically for Vue 3 applications to visualize JSON data. It provides a clean, collapsible interface for working with JSON, making it easier to navigate deeply nested data structures.

Installation

Depending on the package manager you're using, installing the package is straightforward. Below are the commands for different package managers:

# For npm
npm install @anilkumarthakur/vue3-json-viewer
# For yarn
yarn add @anilkumarthakur/vue3-json-viewer
# For bun
bun add @anilkumarthakur/vue3-json-viewer
# For pnpm
pnpm add @anilkumarthakur/vue3-json-viewer

Usage

After installing the package, you can easily integrate the JsonViewer component into your Vue 3 application. Below is a practical example showing how to use the package:
Step-by-Step Example

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';
  import '@anilkumarthakur/vue3-json-viewer/styles.css';
  import Moment from 'moment';

  const jsonData = {
    name: 'John Doe',
    age: 30,
    isActive: true,
    isVerified: false,
    hobbies: ['reading', 'traveling', 'swimming', 'coding'],
    items: [
      { property1: 'value', property2: 'value2', property3: 'value3' },
      { property1: 'value', property2: 'value2', property3: 'value3' },
    ],
    address: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zipCode: '10001',
      coordinates: { latitude: 40.7128, longitude: -74.006 },
    },
    temperature: -2.757,
    currentDate: new Date(),
    formattedDate: Moment().format('YYYY-MM-DD'),
    deepNestedObject: {
      level1: {
        level2: {
          level3: { level4: { level5: { deepKey: 'deep value' } } },
        },
      },
    },
  };

  const isDarkMode = ref(true);
  const toggleDarkMode = () => {
    isDarkMode.value = !isDarkMode.value;
  };

  const isExpanded = ref(true);
  const toggleExpanded = () => {
    isExpanded.value = !isExpanded.value;
  };

  const computedExpanded = computed(() => {
    return isExpanded.value ? 'expanded' : 'collapsed';
  });
</script>

<template>
  <button @click="toggleDarkMode">Toggle Dark Mode</button>
  <button @click="toggleExpanded">Toggle Expanded</button>

  <JsonViewer
    :data="jsonData"
    :level="0"
    :key="computedExpanded"
    :expanded="isExpanded"
    :darkMode="isDarkMode"
  />
</template>

Key Features

Toggle Dark Mode: Easily switch between light and dark themes for better readability depending on the environment.
Collapsible Data: Expand or collapse deeply nested structures, making it easier to focus on the parts of the JSON data you care about.
Automatic Formatting: The JSON data is displayed in a structured and formatted manner, with support for complex data types like arrays, objects, dates, and more.

When to Use vue3-json-viewer
Here are some scenarios where vue3-json-viewer can be especially useful:

API Response Debugging: If you're working with APIs that return large, complex JSON responses, this tool makes it easy to explore the data.
Form or Config Visualization: Visualize form inputs or configurations that involve deeply nested data.
Demo Purposes: If you're building tool or demonstrating how different parts of an application interact with JSON, this component offers a visual aid.

Conclusion

anilkumarthakur/vue3-json-viewer is a versatile and user-friendly tool that simplifies working with JSON data in Vue 3 applications. Whether you need to debug an API response, visualize configuration data, or display complex objects, this package provides an intuitive interface. The added flexibility of toggling dark mode and expanding/collapsing data makes it even more powerful.
If you want to try out the package with your own data, you can also check the demo for a live example. Install vue3-json-viewer in your project today and take control of your JSON visualization experience!

Demo Link:https://vue3-json-viewer.vercel.app/
Npm Link: https://www.npmjs.com/package/@anilkumarthakur/vue3-json-viewer

Simplifying Vue Router with Vue Route Handler: A Laravel-inspired Approach

anil kumar thakur — Sat, 13 Jan 2024 13:29:26 +0000

Vue Route Handler is a powerful library designed to streamline the process of defining routes for Vue Router. Taking inspiration from the elegant structure of Laravel routes, this library offers a fluent and expressive syntax for constructing routes in Vue applications.

Installation

To get started with Vue Route Handler, simply install the latest version using npm or yarn:

npm i vue-route-handler
# or
yarn add vue-route-handler

Overview

Vue Route Handler simplifies the declaration of route definitions for Vue Router by employing chained calls, reminiscent of Laravel. This allows you to easily group and nest routes as deeply as necessary.

Let’s explore a basic example:

import { createRouter, createWebHistory } from "vue-router";
import { Factory, Guard, Route } from "vue-route-handler";
import Home from "./views/Home.vue";
import About from "./views/About.vue";


Route.view({ path: "/", view: Home }).name("home");
Route.view({ path: "about", view: About }).name("about");

const router = createRouter({
  routes: Factory.routes(),
  history: createWebHistory(),
});

export default router;

The above code sets up a router using the Vue Route Handler, providing a clean and organized way to define routes.

Laravel-inspired Structure

Taking inspiration from Laravel, Vue Route Handler introduces a familiar structure to Vue Router. You can group routes, apply guards, and nest routes within each other, creating a hierarchy that mirrors the organization of your application.

Using Resolver for Dynamic Imports

Vue Route Handler supports dynamic imports using the usingResolver method and import.meta.globEager. This allows you to import views dynamically, providing a more efficient and modular approach to managing your views.

Package Link :https://www.npmjs.com/package/vue-route-handler
Demo Link: https://vue-route-handler.vercel.app/

Laravel Advanced and fast Api Crud

anil kumar thakur — Fri, 09 Jun 2023 13:58:53 +0000

Fast-Api-Crud is a package for Laravel that allows developers to quickly and easily create API endpoints for their CRUD (Create, Read, Update, Delete) operations. This package uses the FastAPI framework to create the API endpoints, which is known for its high performance and easy-to-use interface.

One of the key benefits of using Fast-Api-Crud is the speed at which developers can create API endpoints. With just a few lines of code, developers can create a fully-functional API endpoint for any database table in their Laravel project. This means that developers can spend less time writing boilerplate code and more time building out the core features of their applications.

Another benefit of using Fast-Api-Crud is the ability to customize the API endpoints to fit the needs of your project. Fast-Api-Crud includes a wide range of configuration options, allowing developers to specify the HTTP methods (GET, POST, PUT, DELETE) that are allowed for each endpoint, as well as the fields that should be included in the response.

In addition to its speed and flexibility, Fast-Api-Crud is also easy to use. The package includes detailed documentation that explains how to get started with the package and how to customize the API endpoints to fit the needs of your project. Additionally, the package includes a number of helpful features, such as the automatic generation of OpenAPI documentation and support for authentication and authorization.

Fast-Api-Crud is a powerful package for Laravel developers who want to quickly and easily create API endpoints for their CRUD operations. With its high performance, flexibility, and ease of use, Fast-Api-Crud is a valuable tool for any Laravel project that requires API functionality.

index(): This method returns a collection of all records in the model's database table. It maps to the GET request on the controller's base URL. In the example given, the index method is not being explicitly mapped in the routes file, but will be mapped to the GET request on the base URL of '/posts'.
store(): This method creates a new record in the model's database table. It maps to the POST request on the controller's base URL.
show($id): This method returns a single record from the model's database table based on the ID provided in the URL. It maps to the GET request on the URL with a parameter of the record ID.
destroy($id): This method deletes a record from the model's database table based on the ID provided in the URL. It maps to the DELETE request on the URL with a parameter of the record ID.
delete(): This method is used for the bulk deletion of records. It maps to the POST request on the URL with the action of "delete".
changeStatusOtherColumn($id,$column): This method changes the value of a specific column in the database table between 0 and 1 for a specific record based on the ID provided in the URL. It maps to the PUT request on the URL with the parameters of the record ID and the column name.
update($id): This method updates a record in the model's database table based on the ID provided in the URL. It maps to the PUT request on the URL with a parameter of the record ID.
change status ($id): This method changes the value of the "status" column in the database table between 0 and 1 for a specific record based on the ID provided in the URL. It maps to the PUT request on the URL with a parameter of the record ID.
restoreTrashed($id): This method restores a soft-deleted record in the model's database table based on the ID provided in the URL. It maps to the PUT request on the URL with a parameter of the record ID.
restoreAllTrashed(): This method restores all soft-deleted records in the model's database table. It maps to the POST request on the URL with the action of "restore-all-trashed".
forceDeleteTrashed($id): This method hard-deletes a soft-deleted record in the model's database table based on the ID provided in the URL. It maps to the POST request on the URL with the action of "force-delete-trashed".

The routes for these methods can be defined in the routes file for the Laravel application using the Route::controller() method, as shown in the example provided. The controller is passed as the parameter to the Route::controller() method, and the prefix of the base URL for the routes is set using the ->prefix() method. The routes for each method are then defined using the appropriate HTTP method and the name of the method on the controller. For example, the GET request on the base URL for the controller is mapped to the "index" method on the controller

Routes

<?php

use App\Http\Controllers\PostController;
use App\Http\Controllers\TagController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::controller(PostController::class)
    ->prefix('posts')
    ->group(callback:  function () {
        Route::get('', 'index');
        Route::post('', 'store');
        Route::post('delete', 'delete');
        Route::post('restore-all-trashed', 'restoreAllTrashed');
        Route::post('force-delete-trashed', 'forceDeleteTrashed');
        Route::get('{id}', 'show');
        Route::put('{id}', 'update');
        Route::put('{id}/status-change/{column}', 'changeStatusOtherColumn'); //specific columns change value from 0 to 1 and vice versa
        Route::put('{id}/status-change', 'changeStatus');//default status column from 0 to 1 and vice versa
        Route::put('{id}/restore-trash', 'restoreTrashed');
        Route::delete('{id}', 'destroy');
    });

Controller example

<?php

namespace App\Http\Controllers;

use Anil\FastApiCrud\Controller\CrudBaseController;
use App\Http\Requests\StoreTagRequest;
use App\Http\Requests\UpdateTagRequest;
use App\Http\Resources\Tag\TagResource;
use App\Models\Tag;
use Exception;

class TagController extends CrudBaseController
{


    /**
     * @throws Exception
     */
    public function __construct()
    {
        parent::__construct(
            model: Tag::class,
            storeRequest: StoreTagRequest::class,
            updateRequest: UpdateTagRequest::class,
            resource: TagResource::class,
        );
    }
}

<?php

namespace App\Http\Controllers;

use Anil\FastApiCrud\Controller\CrudBaseController;
use App\Http\Requests\StorePostRequest;
use App\Http\Requests\UpdatePostRequest;
use App\Http\Resources\Post\PostResource;
use App\Models\Post;
use Exception;

class PostController extends CrudBaseController
{
    /**
     * @throws Exception
     */
    public function __construct()
    {
        parent::__construct(
            model: Post::class,
            storeRequest: StorePostRequest::class,
            updateRequest: UpdatePostRequest::class,
            resource: PostResource::class,
        );


    }
    //
}

<?php

namespace App\Http\Controllers;

use Anil\FastApiCrud\Controller\CrudBaseController;
use App\Http\Requests\StoreCategoryRequest;
use App\Http\Requests\UpdateCategoryRequest;
use App\Http\Resources\Category\CategoryResource;
use App\Models\Category;
use Exception;

class CategoryController extends CrudBaseController
{

    /**
     * @throws Exception
     */
    public function __construct()
    {
        parent::__construct(
            model: Category::class,
            storeRequest: StoreCategoryRequest::class,
            updateRequest: UpdateCategoryRequest::class,
            resource: CategoryResource::class,
        );
    }

}

Package Link
https://packagist.org/packages/anil/fast-api-crud

Example Link
https://github.com/anilkumarthakur60/Fast-Api-Crud-Example

Simplifying Password Reset in Laravel with Custom Eloquent Model for Authentication

anil kumar thakur — Fri, 02 Jun 2023 07:34:45 +0000

Password reset functionality is a crucial aspect of any web application that deals with user authentication. In Laravel, the framework provides a convenient way to handle password resets out of the box. However, there are scenarios where you might want to customize the behavior and use a custom Eloquent model for authentication. In this article, we will explore a quick example that demonstrates how password reset can be implemented using a custom Eloquent model in Laravel.

Setting up the Environment
Before diving into the implementation details, let’s make sure we have the necessary environment set up. Ensure that you have a Laravel project up and running with the required dependencies installed. If you haven’t already, create the relevant database tables and models for authentication.

The Code Example
Let’s take a look at the code snippet that demonstrates how password reset can be achieved using a custom Eloquent model for authentication.
`public function passwordReset(Request $request): JsonResponse
{
try {

        $admin = Admin::whereEmail($request->input('email'))->firstOrFail();
        PasswordResetJob::dispatch($admin);

        return response()->json(
            [
                'message' => 'Password reset link sent on your email id.',
            ],
            ResponseAlias::HTTP_OK
        );
    } catch (Exception $e) {
        return response()->json(
            [
                'error' => $e->getMessage(),
            ],
            ResponseAlias::HTTP_BAD_REQUEST
        );
    }
}`

The PasswordResetJob
Let’s now take a closer look at the PasswordResetJob class, which handles the actual password reset process.
`<?php

namespace App\Jobs;

use App\Models\Admin;
use Illuminate\Auth\Notifications\ResetPassword;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Password;

class PasswordResetJob implements ShouldQueue
{
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

public function __construct(public Admin $admin)
{
}

public function handle(): void
{
    ResetPassword::createUrlUsing(function (Admin $admin, string $token) {
        return "https://example.com/reset-password?token=$token";
    });
    $this->admin->sendPasswordResetNotification(
        Password::broker()->createToken($this->admin)
    );
}

The PasswordResetJob class is responsible for generating the password reset URL and triggering the password reset notification to the admin user. In this example, we use the ResetPassword notification class provided by Laravel, which allows customization of the password reset URL creation. We set the URL using the createUrlUsing method, and then send the password reset notification to the admin user.

Conclusion
Customizing the password reset functionality in Laravel using a custom Eloquent model for authentication provides flexibility and control over the process. In this article, we explored a simple example that demonstrated how password reset can be achieved with a custom Eloquent model. Feel free to apply this approach to your Laravel projects and customize it further based on your specific requirements.

Remember, password security is a critical aspect of any application, so ensure that you follow best practices and take necessary precautions to protect user data.

Happy coding!

In this article, we covered the implementation details of password reset using a custom Eloquent model for authentication in Laravel. We explored a code example and discussed the concepts and steps involved. By leveraging the power of Laravel’s customization capabilities, you can adapt the password reset functionality to suit your application’s needs.