Affichage des dossiers associés dans la page groupe de travail

client/src/components/DashboardPage/DecisionSupportFilePanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
-import { ItemPanel, TabDefinition, Item } from './ItemPanel';
+import { ItemPanel, TabDefinition, Item } from '../ItemPanel';
 import { useUserProfile } from '../../gql/queries/profile';
 import { inWorkgroup } from '../../types/workgroup';
 import { useDecisionSupportFiles } from '../../gql/queries/dsf';

client/src/components/DashboardPage/ItemPanel.tsx

@@ -1,119 +0,0 @@
-import React, { FunctionComponent, useState, useEffect } from "react";
-import { Link } from "react-router-dom";
-import { WithLoader } from "../WithLoader";
-
-export interface Item {
-  id: string
-  [propName: string]: any;
-}
-
-export interface TabDefinition {
-  label: string
-  itemFilter?: (item: Item) => boolean
-}
-export interface ItemPanelProps {
-  className?: string
-  itemIconClassName?: string
-  title?: string
-  newItemUrl: string
-  isLoading?: boolean
-  items: Item[]
-  tabs?: TabDefinition[],
-  itemKey: (item: Item, index: number) => string
-  itemLabel: (item: Item, index: number) => string
-  itemUrl: (item: Item, index: number) => string
-}
-
-export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
-  const { 
-    title, className, newItemUrl, 
-    itemKey, itemLabel, 
-    itemIconClassName, itemUrl,
-  } = props;
-  
-  const items = props.items || [];
-  const tabs = props.tabs || [];
-
-  const [ state, setState ] = useState({ selectedTab: 0, filteredItems: [] });
-
-  const filterItemsForTab = (tab: TabDefinition, items: Item[]) => {
-    const itemFilter = tab && typeof tab.itemFilter === 'function' ? tab.itemFilter : () => true;
-    return items.filter(itemFilter);
-  };
-
-  const selectTab = (tabIndex: number) => {
-    setState(state => {
-      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[tabIndex] : null;
-      return { 
-        ...state, 
-        selectedTab: tabIndex,
-        filteredItems: filterItemsForTab(newTab, items)
-      };
-    });
-  };
-
-  useEffect(() => {
-    setState(state => {
-      const { tabs, items } = props;      
-      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[state.selectedTab] : null;
-      return {
-        ...state,
-        filteredItems: filterItemsForTab(newTab, items),
-      }
-    });
-  }, [items, tabs]);
-
-  const itemElements = state.filteredItems.map((item: Item, i: number) => {
-    return (
-      <Link to={itemUrl(item, i)} key={`item-${itemKey(item, i)}`} className="panel-block">
-        <span className="panel-icon">
-          <i className={itemIconClassName} aria-hidden="true"></i>
-        </span>
-        {itemLabel(item, i)}
-      </Link>
-    );
-  });
-
-  return (
-    <nav className={`panel ${className}`}>
-      <div className="level is-mobile panel-heading mb-0">
-        <div className="level-left">
-          <p className="level-item">{title}</p>
-        </div>
-        <div className="level-right">
-          <Link to={newItemUrl} className="button level-item is-outlined is-info is-inverted">
-            <i className="icon fa fa-plus"></i>
-          </Link>
-        </div>
-      </div>
-      <div className="panel-block">
-        <p className="control has-icons-left">
-          <input disabled={true} className="input" type="text" placeholder="Filtrer..." />
-          <span className="icon is-left">
-            <i className="fas fa-search" aria-hidden="true"></i>
-          </span>
-        </p>
-      </div>
-      <p className="panel-tabs">
-        {
-          tabs.map((tab, i) => {
-            return (
-              <a key={`workgroup-tab-${i}`}
-                onClick={selectTab.bind(null, i)}
-                className={i === state.selectedTab ? 'is-active' : ''}>
-                {tab.label}
-              </a>
-            )
-          })
-        }
-      </p>
-      {
-        itemElements.length > 0 ?
-        itemElements :
-        <a className="panel-block has-text-centered is-block">
-          <em>Aucun élément pour l'instant.</em>
-        </a>
-      }
-    </nav>
-  )
-};

client/src/components/DashboardPage/WorkgroupsPanel.tsx

@@ -2,7 +2,7 @@ import React, {  } from 'react';
 import { Workgroup, inWorkgroup } from '../../types/workgroup';
 import { useWorkgroups } from '../../gql/queries/workgroups';
 import { useUserProfile } from '../../gql/queries/profile';
-import { ItemPanel, Item } from './ItemPanel';
+import { ItemPanel, Item } from '../ItemPanel';
 
 export function WorkgroupsPanel() {
   const { workgroups } = useWorkgroups();