SergeyMell

const container = document.querySelector('.gallery__container');
const prevButton = document.querySelector('.gallery__prev');
const nextButton = document.querySelector('.gallery__next');

prevButton.onclick = () => {
  const items = document.querySelectorAll('.gallery__item');
  container.insertBefore(items[items.length - 1], items[0]);
};

nextButton.onclick = () => {

SergeyMell

<div class="gallery__container">
  <img src="https://images.unsplash.com/photo-1602116224649-c3b66d507eef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" class="gallery__item"/>
  <img src="https://images.unsplash.com/photo-1597816165828-56c53e9394f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" class="gallery__item"/>
  <img src="https://images.unsplash.com/photo-1590080603530-ab883f5f5763?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" class="gallery__item"/>
  <img src="https://images.unsplash.com/photo-1574352524385-e8eb66309d43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" class="gallery__item"/>
  <img src="https://images.unsplash.com/photo-1610878180933-123728745d22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" class="gallery__item"/>
  <img src="http

SergeyMell

// Main function
function convertToInterface(obj) {
  const resObj = {};
  for (let key in obj) {
    if (typeof obj[key] === 'string') {
      resObj[key] = 'string';
    } else if (typeof obj[key] === 'number') {
      resObj[key] = 'number';
    } else if (typeof obj[key] === 'boolean') {
      resObj[key] = 'boolean';

SergeyMell

import * as React from 'react';
import { Box } from 'admin-bro'

const PropertyItem = (props) => {
  
  const { join, param } = props.property.custom;
  
  return (
    <Box>{props.record.populated[join].params[param]}</Box>
  )

SergeyMell

import { ResourceWithOptions } from 'admin-bro';
import { Post } from '../../models/posts/entities/post.entity';
import AdminBro from 'admin-bro';

const PostResource: ResourceWithOptions = {
  resource: Post,
  options: {
    properties: {
      userLink: {
        custom: {

SergeyMell

import * as React from 'react';
import { Box } from 'admin-bro'

const PropertyItem = (props) => {
  return (
    <Box>{props.record.populated.userId.params.link}</Box>
  )
}

export default PropertyItem;

SergeyMell

import { ResourceWithOptions } from 'admin-bro';
import { Post } from '../../models/posts/entities/post.entity';
import AdminBro from 'admin-bro';

const PostResource: ResourceWithOptions = {
  resource: Post,
  options: {
    properties: {
      userLink: {
        components: {

SergeyMell

@Entity('posts')
export class Post extends BaseEntity {

  @PrimaryColumn({
    name: 'pk_post',
    generated: 'increment',
  })
  id: number; // <= Should always be `id`

  ...

SergeyMell

import { BaseEntity, Column, Entity, OneToMany, PrimaryColumn } from 'typeorm';
import { UseAsTitle } from 'admin-bro-typeorm';
import { Post } from '../../posts/entities/post.entity';

@Entity('users')
export class User extends BaseEntity {

  @PrimaryColumn({
    name: 'pk_user',
    generated: 'increment',

SergeyMell

import { ResourceWithOptions } from 'admin-bro';
import { User } from '../../users/entities/user.entity';

const UserResource: ResourceWithOptions = {
  resource: User,
  options: {},
};

export default UserResource;