Create DiferansDialog component

components/teks/diferans-dialog.js

@@ -0,0 +1,80 @@
+import React, {forwardRef, useState} from 'react'
+import PropTypes from 'prop-types'
+
+import {format} from 'date-fns'
+import {fr} from 'date-fns/locale'
+
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import Box from '@mui/material/Box'
+import Slide from '@mui/material/Slide'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import Avatar from '@mui/material/Avatar'
+import LyricsIcon from '@mui/icons-material/Lyrics'
+
+import Diferans from './diferans'
+
+const Transition = forwardRef(function Transition(props, ref) {
+  return <Slide ref={ref} direction='up' {...props} />
+})
+
+export default function DiferansDialog({difference}) {
+  const [ouve, meteOuve] = useState(false)
+  const [ouveDiferans, meteOuveDiferans] = useState(null)
+
+  const handleClickOpen = () => {
+    meteOuve(true)
+  }
+
+  const handleClose = () => {
+    meteOuve(false)
+  }
+
+  return (
+    <Box sx={{textAlign: 'center'}}>
+      <Button variant='outlined' onClick={handleClickOpen}>
+        Voir la liste des modifications
+      </Button>
+      <Dialog
+        keepMounted
+        open={ouve}
+        TransitionComponent={Transition}
+        aria-describedby='liste des modifications'
+        onClose={handleClose}
+      >
+        <DialogTitle>Liste des modifications</DialogTitle>
+        <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
+          {difference.map(({id, admin_user, date, jsonDiff}) => {
+            const {firstname} = admin_user.data.attributes
+            const diferansDate = format(new Date(date), 'PPPppp', {locale: fr})
+
+            return (
+              <React.Fragment key={id}>
+                <ListItemButton
+                  onClick={() => meteOuveDiferans(id)}
+                >
+                  <ListItemAvatar>
+                    <Avatar>
+                      <LyricsIcon />
+                    </Avatar>
+                  </ListItemAvatar>
+                  <ListItemText primary={`Modifié par : ${firstname}`} secondary={diferansDate} />
+                </ListItemButton>
+                <Diferans id={id} ouveDiferans={ouveDiferans} meteOuveDiferans={meteOuveDiferans} difference={jsonDiff} />
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Dialog>
+    </Box>
+  )
+}
+
+DiferansDialog.propTypes = {
+  difference: PropTypes.array.isRequired
+}
+

components/teks/teks.js

@@ -20,6 +20,7 @@ import VweKomante from '../komante/vwe-komante'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import Pataje from './pataje'
+import DiferansDialog from './diferans-dialog'
 
 const PREFIX = 'teks'
 
@@ -175,6 +176,11 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
       {parole.okiMizikID && (
         <OkiMizik id={parole.okiMizikID} parole={parole} />
       )}
+
+      {parole?.difference?.length > 0 && (
+        <DiferansDialog difference={parole.difference} />
+      )}
+
       <Grid container justifyContent='start' spacing={1}>
         <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
           <div className={classes.gridText}>