CRUD Documentation

CRUD pages are sections in the admin dashboard of your application where you can control related content or rules.

For example, the Roles page controls the roles in your application, such as admin, user and editor roles.

Creating a CRUD page

To create a CRUD page copy and paste a folder in src/app/(protected)/admin. Rename the folder and refactor the files in it.

The new CRUD page will need its own Prisma functions. Create these functions in a corresponding folder inside src/actions/(authorized). You can also copy and paste a folder here and refactor it.

Updating Admin Navbar

The newly created CRUD page will not appear on the admin navbar on its own. To fix this, configure the stories.ts and internalLinks.ts files in src/constants and then update adminNav.js.

stories.ts

Create a new export with the appropriate name and add it to the ADMIN_STORIES object inside stories.ts.

// Add the name of your CRUD page
export const COMMENT = 'comment';
 
export const ADMIN_STORIES = {
  // Add the CRUD page to the ADMIN_STORIES object and set it `false`
  [COMMENT]: false,
};

Configure the ADMIN_PATHS in internalLinks.ts. This is where we define the path of the newly created CRUD page. If the CRUD page requires its own pages, define their paths as well.

export const ADMIN_PATHS = generateLink('/admin', {
  // The new CRUD page will be located at `/admin/comments`
  comments: '/comments',
  editComment: '/comments/edit',
});

adminNav.js

Add a new entry to the adminContent object in src/content/adminNav.js.

import { ADMIN_PATHS } from '@/constants/internalLinks';
import { COMMENT } from '@/constants/stories';
 
const style = { width: '20px', height: '20px' };
 
const adminContent = [
  {
    name: 'Comments',
    story: COMMENT,
    icon: <CommentsIcon style={style} />,
    path: ADMIN_PATHS.comments,
  },
];

Updating Prisma

You will also need to configure Prisma to be able to work with the database. The necessary files are located in the prisma folder.

Update Prisma Schema

Add a new model for the CRUD page in prisma/schema.prisma.

model Comment {
  id        String               @id @unique @default(cuid())
  createdAt DateTime             @default(now())
  updatedAt DateTime?            @updatedAt
  userId    String
}

Update Prisma Stories

Add the story to Prisma in prisma/seed.ts and edit the permissions.

async function main() {
  // STORIES
  // Add `comment` story
  const comment = await prisma.story.create({
    data: {
      name: 'comment',
    },
  });
 
  // PERMISSIONS
  // Configure permissions for `comment`
  // In this example only admins have any access to comments
  await prisma.permission.create({
    data: {
      roleId: admin.id,
      storyId: comment.id,
      create: true,
      read: true,
      update: true,
      delete: true,
    },
  });
}