adminJS 기초 - 리소스 (공식 사이트 번역)

자원

리소스는 AdminJS에서 관리할 수 있는 항목이며 즉시 제공되는 CRUD 작업(만들기, 읽기, 업데이트, 삭제)과 함께 제공됩니다.

 

소개

리소스는 AdminJS에서 관리할 수 있는 항목이며 즉시 제공되는 CRUD 작업 (만들기, 읽기, 업데이트, 삭제) 과 함께 제공됩니다. 대부분의 경우 ORM 또는 ODM의 모델입니다.AdminJS의 아이디어는 어댑터를 생성하기로 결정한 경우 ORM/ODM 모델 또는 사용자 지정 REST API 엔드 포인트 등 모든 종류의 리소스를 관리할 수 있도록 하는 것입니다.

 

어댑터

AdminJS를 사용하면 어댑터를 통해 리소스를 정의할 수 있습니다. 어댑터는 ORM, ODM 또는 선택한 다른 종류의 스토리지 또는 API와 통신하기 위해 API를 제공하는 AdminJS 확장입니다. 모든 어댑터는 해당 메서드를 구현하여 세 가지 기본 클래스를 확장해야 합니다.

• BaseResource - 제공하는 모든 리소스(모델)에 대한 CRUD 작업을 담당합니다.
• BaseDatabase - 데이터베이스에 정의된 모든 리소스(모델) 로드를 담당합니다(선택한 경우).
• BaseProperty - 모델의 메타데이터를 기반으로 리소스(모델) 속성을 설명합니다.

문서에서 어댑터를 사용하려면 먼저 어댑터를 등록해야 합니다.

import AdminJS from 'adminjs'
import { Database, Resource } from '@adminjs/typeorm' // or any other adapter

AdminJS.registerAdapter({ Database, Resource })

 필요한 만큼 어댑터를 등록할 수 있습니다.

 

 

AdminJS에 리소스 전달

AdminJS에 리소스를 제공하기 위해 선택할 수 있는 두 가지 옵션이 있습니다.

1. 전체 데이터베이스 연결 제공
2. 모든 리소스를 명시적으로 제공
    

전체 데이터베이스 제공

이 옵션을 사용하면 전체 데이터베이스를 제공할 수 있으며 AdminJS는 정의한 모든 모델을 로드합니다. 그러나 이 옵션은 모든 어댑터에서 사용할 수 없습니다. 어댑터는 로드한 모든 모델의 메타데이터를 노출하는 연결 또는 클라이언트를 노출해야 합니다. @admin/objection은 전체 데이터베이스 제공을 허용하지 않는 어댑터의 예입니다.

AdminJS가 로드할 전체 데이터베이스를 제공하려면 databasesAdminJS 인스턴스를 설정할 때 속성을 지정해야 합니다. @adminjs/mongoose 경우에는 다음과 같이 보일 것입니다.

const mongooseDb = await mongoose.connect('mongodb://localhost:27017/test')

const admin = new AdminJS({
  databases: [mongooseDb],
})

다른 어댑터의 경우 설정은 기본적으로 동일하며 ORM/ODM 연결(또는 클라이언트)을 전달하기만 하면 됩니다.

 

리소스를 명시적으로 제공

이 옵션을 사용하려면 모든 리소스를 명시적으로 정의해야 합니다. 또한 모든 리소스를 사용자 지정할 수 있으므로 권장되는 접근 방식입니다. 리소스를 정의하려면 resourcesAdminJS 인스턴스를 설정할 때 속성을 지정해야 합니다. 예시:

import User from './user.entity'
import Profile from './profile.entity'

// User and Profile are models defined in your ORM/ODM

const admin = new AdminJS({
  resources: [
    User, // you can simply pass a model
    {
      resource: Profile,
      options: { // or you can provide an object with your custom resource options
        id: 'profiles', // here the resource identifier has been renamed to "profiles"
      },
    },
  ],
})

자원을 제공하는 방법은 어댑터마다 다를 수 있습니다. 사용중인 어댑터에 대한 자세한 자습서를 읽으십시오.

 

 

리소스 맞춤설정

AdminJS는 애플리케이션에 대한 기본 CRUD를 제공하지만 리소스를 추가로 사용자 정의할 수 있습니다. 이것은 리소스의 객체 정의를 사용하고 ResourceOptions 를 지정하여 수행할 수 있습니다 . 위의 예는 id를 프로필로 변경하는 가장 간단한 예입니다. 아래에서 리소스 사용자 지정의 몇 가지 예를 찾을 수 있습니다.

 

접을 수 있는 탐색 아래 리소스 중첩

이는 리소스 옵션에서 탐색 속성을 지정하여 달성할 수 있습니다 . 예를 들면 다음과 같습니다.

const usersNavigation = {
  name: 'Users',
  icon: 'User',
}

const admin = new AdminJS({
  resources: [{
    resource: Profile,
    options: {
      navigation: usersNavigation,
    },
  }],
})

이렇게 하면 Profile리소스가 Users메뉴 아래에 놓입니다.

 

속성의 가시성 변경

지정된 작업에서 특정 속성을 표시하거나 사용할 수 있도록 하려면 다음 두 가지 옵션을 사용할 수 있습니다.

• 모든 속성에 대해 isVisible 옵션을 설정합니다.
• 리소스에 listProperties, editProperties, filterProperties, showProperties를 설정합니다.

 

'isVisible' 설정

데이터베이스 모델에서 정의한 모든 속성은 AdminJS에서 추가로 사용자 지정할 수 있습니다. 이 예에서는 목록 작업에서 바이오 속성을 숨기고 필터에서 숨길 것이지만 표시 및 편집에서는 활성화된 상태로 둡니다.

const admin = new AdminJS({
  resources: [{
    resource: Profile,
    options: {
      properties: {
        bio: {
          isVisible: {
            edit: true,
            show: true,
            list: false,
            filter: false,
          },
        },
      },
    },
  }],
})

 

보이는 속성의 설정 목록

목록 및 필터에는 숨겨진 바이오가 있지만 표시 및 편집에는 표시되는 예제는 listProperties, editProperties, filterProperties, showProperties를 설정하여 얻을 수도 있습니다.

const admin = new AdminJS({
  resources: [{
    resource: Profile,
    options: {
      listProperties: ['id', 'name', 'createdAt'],
      filterProperties: ['id', 'name', 'createdAt'],
      editProperties: ['id', 'name', 'bio', 'createdAt'],
      showProperties: ['id', 'name', 'bio', 'createdAt'],
    },
  }],
})

 

최종 결과는 동일하지만 이 접근방식이 설정 isVisible 또는 속성 위치 설정보다 우선한다는 점에 유의해야 합니다. 속성의 사용자 정의애 대한 더 많은 예는 속성 섹션에서 찾을 수 있습니다.

 

작업 사용자 지정

예제와 설명은 액션 섹션을 참조하십시오.

기본 탐색 링크 변경

기본적으로 사이드바에서 리소스 링크를 누르면 리소스의 목록 작업으로 이동합니다. 이는 href 옵션을 구성하여 변경할 수 있습니다. 사용자 리소스가 "active" 상태인 사용자만 표시하는 이미 필터링된 사용자 목록을 열기를 원한다고 가정해 보겠습니다.

const UserResource = {
  resource: User,
  options: {
    id: 'users',
    href: ({ h, resource }) => {
      return h.resourceActionUrl({
        resourceId: resource.decorate().id(),
        actionName: 'list',
        params: {
          'filters.status': 'active',
        },
      })
    },
  },
}

 

리소스 정렬 구성

기본적으로 리소스의 목록 작업으로 이동하면 실제 데이터베이스 쿼리에 정렬 정보가 없기 때문에 무작위 순서로 결과가 표시됩니다(테이블 UI를 사용하여 정렬할 열을 선택하지 않는 한). 그러나 정렬 옵션을 지정하여 리소스에 대한 기본 정렬을 정의할 수 있습니다.

const UserResource = {
  resource: User,
  options: {
    sort: {
      sortBy: 'updatedAt',
      direction: 'desc',
    },
  },
}

위의 예에서 결과 목록의 맨 위에 나타나는 최신 레코드와 함께 updatedAt 속성으로 정렬할 사용자 리소스를 지정했습니다.

리소스 번역
locale을 지정하여 리소스에 대한 번역을 정의할 수 있습니다. 이것은 리소스 수준에서 수행되는 것이 아니라 AdminJS의 인스턴스화 프로세스 중에 수행됩니다.

사이드바에서 리소스 이름 바꾸기

애플리케이션의 사이드바에서 리소스의 이름을 바꾸려면 레이블을 설정해야 합니다.

const admin = new AdminJS({
  resources: [User],
  locale: {
    language: 'en',
    translations: {
      labels: {
        User: 'People',
      },
    },
  },
})

위의 예에서 사이드바의 사용자 리소스는 People로 이름이 변경되었습니다.
또 다른 시나리오는 사용자가 현재 보고 있는 리소스에 따라 다른 메시지를 표시하려는 경우입니다. 목록 작업에 표시할 레코드 없이 리소스를 입력할 때 나타나는 메시지를 예로 들 수 있습니다.

이 리소스에 레코드가 없습니다.

이를 변경하려면 아래 예와 같이 리소스별 번역을 정의해야 합니다.

const admin = new AdminJS({
  resources: [User],
  locale: {
    language: 'en',
    translations: {
      resources: {
        User: {
          messages: {
            noRecordsInResource: 'There are no users to display'
          },
        },
      },
    },
  },
})

사용 가능한 모든 로케일 및 사전 정의된 번역 목록을 보려면 adminjs 핵심 저장소의 locale을 방문하십시오.

"기능" 사용
기능은 리소스의 기능으로 가져올 수 있는 미리 정의된 코드 조각이며 나머지 구성과 병합됩니다. 기능의 예는 @adminjs/passwords입니다. 편집 양식에서 암호 해싱을 처리하고 해당 UI를 표시하는 패키지입니다.
사용 예:

import passwordsFeature from '@adminjs/passwords'
import argon2 from 'argon2'
import { User } from './user.entity'

const UserResource = {
  resource: User,
  features: [passwordsFeature({
    properties: { encryptedPassword: 'hashedPassword' },
    hash: argon2.hash,
  })],
}