Добавление нескольких представлений списков к одному ресурсу - Admin-On-Rest

У меня есть ресурс сказки, который я хочу отображать по-разному для одного и того же пользователя, в зависимости от статуса сказки.

Сказка со статусом = NEW должна отображаться в List1

Сказки со статусом = УТВЕРЖДЕНО и т. Д. Должны отображаться как List2 (мне нужно отображать разные свойства сказки)

Как добиться этого с помощью Admin-On-Rest?

При добавлении одного и того же ресурса дважды (как показано ниже) и выделении разных представлений списка для обоих только первый отображается, а второй игнорируется

<Resource name="tales" list={EditorAssignedList} edit={EditTale} options={{ label: 'Assigned Tales' }}/>
<Resource name="tales" list={EditorTaleTrack} options={{ label: 'Your Tales' }}/>

Регистрируется следующая ошибка.

flattenChildren(...): Encountered two children with the same key, `1:$tales`. Child keys must be unique;

Любые стратегии по внедрению уникального ключа в ресурс.


person kunal pareek    schedule 23.05.2017    source источник


Ответы (3)


Приведенный выше ответ на самом деле не так полезен, если вы также хотите добавить возможности CRUD к тому же маршруту, но через разные меню списков. Если у вас есть 2 представления списка List1 и List2 с компонентами CRUD. Введите edit (например) из List2 и нажмите save, вы будете перенаправлены на List1

Более широкое решение - создать настраиваемую оболочку для вашего REST-клиента. Вдохновение снизу. https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

в моем случае это выглядело так.

Я создал фиктивный ресурс trackTale в App.js. В restWrapper.js

const RESTWrapper = requestHandler => (type, resource, params) => {

      if (type === 'GET_LIST' && resource === 'trackTale') {
        const page =  params.pagination.page
        const perPage = params.pagination.perPage
        const {field, order} = params.sort
        const query = {}
        query['where'] = {...params.filter}
        if (field) {query['order'] = [field + ' ' + order]}
        if (perPage > 0) {
            query['limit'] = perPage;
            if (page >= 0) {
                query['skip'] = (page - 1) * perPage
            }
        }
        //Key part here hardcoding the tales route to trackTale

const url = config.host + '/' + 'tales?' +  queryParameters({filter: JSON.stringify(query)})
        const options = {};
        options.user = {authenticated: true}
        options.user.token = localStorage.getItem('token');
        options.method = 'GET';
        return fetchUtils.fetchJson(url, options)
          .then((response) => {
            const {headers, json} = response;
            //admin on rest needs the {data} key
            return {data: json,
                    total: parseInt(headers.get('x-total-count').split('/').pop(), 10)}
        })
    }
}


//below function is very very specific to how loopback.js expects to recieve REST queries. Please customize it for your API needs
const queryParameters = data => Object.keys(data)
    .map(key => [key, data[key]].map(encodeURIComponent).join('='))
    .join('&');

Это будет работать во всех случаях. Можно по-прежнему создавать собственное меню, если на разных маршрутах нет CRUD.

person kunal pareek    schedule 08.06.2017
comment
Что такое config и queryParameters в вашем коде? Я полагаю, fetchUtils от админа-отдыхающего? - person quicklikerabbit; 14.09.2017
comment
Config - это моя локальная конфигурация, а queryParameters - это функция, которую я забыл включить в приведенное выше. Добавляю сейчас. fetchUtils импортируется из AOR. - person kunal pareek; 14.09.2017

Держите только один ресурс. Создайте собственное меню с двумя записями, которые передают ваши фильтры параметрам URL.

Затем в компоненте TalesList отобразите компоненты правильной редакции в зависимости от вашего параметра.

person Gildas Garcia    schedule 23.05.2017
comment
Создал элемент меню, как предложено в документации. Однако необходима ясность по обоим упомянутым вами пунктам. 1) Как передать параметры фильтра из компонента меню в ресурс? 2) Как получить доступ к элементу меню, по которому щелкают, из представления списка (в основном, как я могу получить доступ к той ссылке, которая была нажата, и, следовательно, к какому представлению для отображения) - person kunal pareek; 24.05.2017
comment
1) Посмотрите на URL-адрес обычной страницы просмотра списка с установленными фильтрами. Это должно дать вам название необходимых вам параметров. Затем просто следуйте документации реактивного маршрутизатора по компоненту Link 2) Возможно, aor-зависимый-ввод может вам в этом помочь. На просмотрах не тестировал. Если это не сработает, я посмотрю, как мы можем обновить его для поддержки представлений. - person Gildas Garcia; 25.05.2017
comment
Ok. Попаду на это и расскажу вам. - person kunal pareek; 26.05.2017

Решено с большой и удивительной помощью @Gildas

Это было решено

1) Создайте настраиваемый компонент меню

const linkData = {
  pathname: "/tales",
  hash: "trackTales"
}

export default ({ resources, onMenuTap, logout }) => {
  return (
    <div>
      <MenuItem containerElement={<Link to="/tales" />} primaryText="Tales For Edit" onTouchTap={onMenuTap} />
      <MenuItem containerElement={<Link to={ linkData } />} primaryText="Track Tales" onTouchTap={onMenuTap} />
      {logout}
    </div>
  )
}

Компонент Link в React Router принимает объекты в качестве параметров. Они передаются как свойства нижестоящему компоненту.

export const EditorAssignedList = (props) => {
  return taleViewJuggler(props)
}

Функция жонглера считывает реквизиты и создает пользовательские представления на основе реквизита. Компонент ссылки передавал данные ключу 'location' в реквизите.

const taleViewJuggler = (props) => {
  let viewName = props.location.hash
  let component;
  switch (viewName) {
    case "case1":
      component = (
        <ListView1 />
      )
      break;
    case "#case2":
      component = ( < ListView2 /> )
      break;
  }
  return component
}
person kunal pareek    schedule 26.05.2017
comment
Отлично :) Значит, аддон зависимого ввода не работал для представлений? - person Gildas Garcia; 29.05.2017
comment
Я не пробовал TBH. У меня было ощущение того, что вы предлагали изначально, но я изо всех сил пытался найти способ передать настраиваемые реквизиты из меню в компонент переключения выше. Еще раз спасибо за все. Также большое спасибо за Admin on Rest. Я бы очень хотел спонсировать пиво для вас, ребята из команды, после того, как я закончу свой проект и получу деньги :) - person kunal pareek; 29.05.2017
comment
Хорошо :) К вашему сведению, я только что выпустил новую версию aor-зависимого ввода аддон, который теперь предоставляет DependentField компонент для представлений - person Gildas Garcia; 30.05.2017