2

tale ステータスに応じて、同じユーザーに対してさまざまな方法で表示したい tale リソースがあります。

status = NEW の Tale は List1 で表示する必要があります

status = APPROVED などの Tales は List2 として表示する必要があります (Tales のさまざまなプロパティを表示する必要があります)

Admin-On-Rest を使用してこれを達成する方法は?

同じリソースを 2 回 (以下のように) 追加し、異なるリスト ビューを両方に割り当てると、最初のビューのみが表示され、2 番目のビューは無視されます。

<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;

リソースに一意のキーを挿入する方法に関する戦略。

4

3 に答える 3

2

上記の回答は、CRUD 機能を同じルートに追加したいが別のリスト メニューを使用したい場合には、あまり役に立ちません。CRUD コンポーネントを含む 2 つのリスト ビュー List1 と List2 がある場合。List2 から編集 (たとえば) を入力し、[保存] をクリックすると、List1 にリダイレクトされます。

より広範なソリューションは、REST クライアントへのカスタム ラッパーを作成することです。下からのインスピレーション。 https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

私の場合、このように見えました。

App.js にダミー リソース「trackTale」を作成しました。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 がない場合でも、カスタム メニューを作成できます。

于 2017-06-08T13:56:33.673 に答える
0

@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>
  )
}

React Router の Link コンポーネントは、オブジェクトをパラメーターとして受け入れます。これらは props として下流のコンポーネントに渡されます。

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

ジャグラー関数は小道具を読み取り、小道具に基づいてカスタム ビューを作成します。Link コンポーネントは 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
}
于 2017-05-26T18:23:04.503 に答える