FileUploads

import { AgGridReact } from 'ag-grid-react';

import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';

import { ApolloClient, gql, InMemoryCache } from "@apollo/client"

import { Button, getTextFieldUtilityClass, Grid, Paper, Stack, styled } from '@mui/material';

import ContentList from './ContentList';

import FileDownloadCellRenderer from './FileDownloadCellRenderer';

import FileUploadHistoryList from './FileUploadHistoryList';

import MilestoneList from './MilestoneList';

import Accordion from '@mui/material/Accordion';

import AccordionDetails from '@mui/material/AccordionDetails';

import AccordionSummary from '@mui/material/AccordionSummary';

import Typography from '@mui/material/Typography';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import * as _ from 'underscore';

import moment from 'moment';

import { Color } from 'ag-grid-community';

const GET_FILEUPLOADS =

  gql`

  query($contentId:Int) {

    fileUploads(where: {contentId:{eq:$contentId}}) {

      contentId

      fileType {

        fileTypeName

      }

      content {

          userInfo {

          longName

          }

      }

      version

      originalName

      fileName

      dateCreated

    }

  }

`;

const Item = styled(Paper)(({ theme }) => ({

  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',

  padding: theme.spacing(1),

  textAlign: 'left',

}));

const client = new ApolloClient({

  uri: process.env.REACT_APP_MAGIC_API,

  cache: new InMemoryCache(),

});

const MAGIC_API_FILES_BASE_URL ="http://localhost:8081/Files/";

const SubmissionEditor = () => {

  const gridRef = useRef(null); // Optional - for accessing Grid's API

  const [rowData, setRowData] = useState([]); // Set rowData to Array of Objects, one Object per Row // mother content

  const [fileUploadInfopPanelVisivility, SetFileUploadInfoPanelVisibility] = useState(false);

  const [expanded, setExpanded] = React.useState<string | false>(false);

  const [fileUploadData, setFileUploadData] = useState([]); //history and file uploads

  const [selectedContentId, setSelectedContentId] = useState(0);

  const [downloadURL, setDownloadURL] = useState('');  //history and file uploads

  const [mostRecentFileUploadInfo, setMostRecentFileUploadInfo] = useState({} as any);

  const handleChange =

    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {

      setExpanded(isExpanded ? panel : false);

    };

  // Each Column Definition results in one Column.

  const [columnDefs, setColumnDefs] = useState([

    { field: 'fileName', filter: true },

    { field: 'version', filter: true },

    { field: 'originalName' },

    {

      headerName: "Open",

      field: "fileName",

      editable: false,

      cellRenderer: FileDownloadCellRenderer

    }

  ]);

  const onVisibilityChange = (contentId: number) => {

    setSelectedContentId(contentId);

    client

      .query({

        query: GET_FILEUPLOADS,

        variables: { "contentId": contentId }

      })

      .then((response) => {

        if (response && response.data && response.data.fileUploads && response.data.fileUploads.length) {

          setFileUploadData(response.data.fileUploads);

          let sortedList = _.sortBy(response.data.fileUploads, 'version');

          let mostRecentFile: any = sortedList.reverse()[0];

          let downloadUrl = MAGIC_API_FILES_BASE_URL + mostRecentFile.originalName;

          setDownloadURL(downloadUrl);

          setMostRecentFileUploadInfo(mostRecentFile);

          SetFileUploadInfoPanelVisibility(true);

          setExpanded('panel1');

        }

        else {

          SetFileUploadInfoPanelVisibility(false);

          setFileUploadData([]);

          setMostRecentFileUploadInfo({} as any);

          setDownloadURL('');

          setExpanded(false);

        }

      });

  }

  return (

    <div>

      <Grid container spacing={2}>

        <Grid item xs={12}>

          <p style={{ marginLeft: 5, fontSize:'20px',color:'black' }}>Submissions </p>

          <div><ContentList handleVisibility={onVisibilityChange} selectedContentId={selectedContentId} /></div>

        </Grid>

        {/*  <Grid item xs={4}>

          <p style={{ marginLeft: 5 }}>Milestones <Button variant="contained">UPdate</Button></p>

          <div className="ag-theme-alpine" style={{ height: 400 }}><MilestoneList /></div>

        </Grid> */}

        <Grid item xs={12}>

          {fileUploadInfopPanelVisivility ?

            <div>

              <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>

                <AccordionSummary

                  expandIcon={<ExpandMoreIcon />}

                  aria-controls="panel1bh-content"

                  id="panel1bh-header"

                >

                  <Typography sx={{ width: '33%', flexShrink: 0,color:'black',fontSize:'20px' }}>

                    Uploaded Files and History

                  </Typography>

                </AccordionSummary>

                <AccordionDetails>

                  <Stack spacing={1}>

                    <Item>Type : {mostRecentFileUploadInfo.fileType.fileTypeName} </Item>

                    <Item>Version : {mostRecentFileUploadInfo.version}</Item>

                    <Item>File Name : {mostRecentFileUploadInfo.fileName} &nbsp;  &nbsp; &nbsp; <a href={downloadURL}>Download</a></Item>

                    <Item>Uploaded By : {mostRecentFileUploadInfo.content.userInfo.longName}</Item>

                    <Item>Date Created : {moment(mostRecentFileUploadInfo.dateCreated).format('MM/DD/YYYY')}</Item>

                  </Stack>

                </AccordionDetails>

              </Accordion>

              <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>

                <AccordionSummary

                  expandIcon={<ExpandMoreIcon />}

                  aria-controls="panel2bh-content"

                  id="panel2bh-header"

                >

                  <Typography sx={{ width: '33%', flexShrink: 0 }}> File Upload History</Typography>

                </AccordionSummary>

                <AccordionDetails>

                </AccordionDetails>

              </Accordion>

            </div>

            : null}

        </Grid>

      </Grid>

    </div>

  );

}

export default SubmissionEditor;