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

client/src/components/WorkgroupPage/DecisionSupportFilePanel.tsx

@@ -0,0 +1,48 @@
+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+import { useDecisionSupportFiles } from '../../gql/queries/dsf';
+import { DecisionSupportFile } from '../../types/decision';
+import { User } from '../../types/user';
+import { DecisionSupportFileLink } from '../DecisionSupportFileLink';
+import { WorkgroupLink } from '../WorkgroupLink';
+
+export interface DecisionSupportFilePanelProps {
+  workgroupId: string
+}
+
+export const DecisionSupportFilePanel: FunctionComponent<DecisionSupportFilePanelProps> = ({ workgroupId }) => {
+  const { decisionSupportFiles } = useDecisionSupportFiles({
+    variables: {
+      filter: {
+        workgroups: [workgroupId],
+      }
+    }
+  })
+  
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Dossiers d'aide à la décision
+      </p>
+      {
+        decisionSupportFiles.map((dsf: DecisionSupportFile) => {
+          return (
+            <Link to={`/decisions/${dsf.id}`} key={`dsf-${dsf.id}`} className="panel-block">
+              <span className="panel-icon">
+                <i className="fas fa-file" aria-hidden="true"></i>
+              </span>
+              <span>{dsf.title}</span>
+            </Link>
+          );
+        })
+      }
+      {
+        decisionSupportFiles.length === 0 ?
+        <a className="panel-block has-text-centered is-block">
+          <p className="is-italic">Aucun dossier pour l'instant.</p>
+        </a> :
+        null
+      }
+    </nav>
+  );
+}