init string diff on change request page

mthstv · Jun 7, 2020 · 9d35716 · 9d35716
1 parent 3f3ea69
commit 9d35716
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 31 deletions.
diff --git a/api/app/Models/ChangeRequest.php b/api/app/Models/ChangeRequest.php
@@ -27,7 +27,7 @@ class ChangeRequest extends Model
     *
     * @var array
     */
-    protected $hidden = ['created_at', 'updated_at', 'consultant_id', 'admin_id'];
+    protected $hidden = ['updated_at', 'consultant_id', 'admin_id'];
 
 
     //belongsto

diff --git a/front/package.json b/front/package.json
@@ -10,6 +10,7 @@
     "babel-plugin-root-import": "^6.5.0",
     "bootstrap": "^4.4.1",
     "classnames": "^2.2.6",
+    "diff": "^4.0.2",
     "eslint-plugin-flowtype": "^4.6.0",
     "faker": "^4.1.0",
     "font-awesome": "^4.7.0",

diff --git a/front/src/pages/ChangeRequest/RequestList.js b/front/src/pages/ChangeRequest/RequestList.js
@@ -10,32 +10,38 @@ import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import CardHeader from '@material-ui/core/CardHeader';
+import Grid from '@material-ui/core/Grid';
+import red from '@material-ui/core/colors/red';
+import yellow from '@material-ui/core/colors/yellow';
+import green from '@material-ui/core/colors/green';
+// import Diff from 'diff';
 
 const useStyles = makeStyles({
     root: {
         marginBottom: '20px',
         minWidth: 275,
     },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
+    opaqueRoot: {
+      marginBottom: '20px',
+      minWidth: 275,
+      opacity: 0.6
     },
     pendingRequest: {
-        backgroundColor: 'yellow',
+        backgroundColor: yellow[500],
     },
     acceptedRequest: {
-        backgroundColor: 'green',
+        backgroundColor: green[500],
     },
     rejectedRequest: {
-      backgroundColor: 'red',
+      backgroundColor: red[500],
     },
     pos: {
         marginBottom: 12,
     },
-  });
+});
 
 function RequestList (props) {
+  const Diff = require('diff');
   const user = useSelector(state => state.user)
   const dispatch = useDispatch()
   const [requests, setRequests] = useState([])
@@ -50,42 +56,70 @@ function RequestList (props) {
   const getRequests = () => {
     api.get("/change-request")
       .then(async (res) => {
+
+        res.data.data.map(request => {
+          let newDate = new Date(request.created_at);
+          request.formatted_created_at = newDate.toLocaleDateString();
+          if(request.reviewed_at) {
+            let newDate = new Date(request.reviewed_at);
+            request.formatted_reviewed_at = newDate.toLocaleDateString();
+          }
+          let diff = Diff.diffChars(request.old_text, request.new_text);
+          diff.forEach((part) => {
+            // green for additions, red for deletions
+            // grey for common parts
+            const color = part.added ? 'green' :
+              part.removed ? 'red' : 'black';
+            request.changes = { part, color }
+            console.log(request.changes);
+            // process.stderr.write(part.value[color]);
+          });
+        })
         await setRequests(res.data.data)
         await setLoaded(true)
+        console.log(res.data.data);
       })
   }
 
   return (
     <>
       <div>
-        {requests.length > 0 && requests.map((item, index) =>
-          <Row key={item.id}>
+        {requests.length > 0 && requests.map((request, index) =>
+          <Row key={request.id}>
             <Col md={12}>
             <Fade 
               in={loaded}
               style={{ transformOrigin: '0 0 0' }}
               {...(loaded ? { timeout: (1000 * (index + 0.5))  } : {})}>
               <div>
-                <Card className={classes.root}>
-                <CardHeader
-                    className={classes.pendingRequest}
-                    // title="Shrimp and Chorizo Paella"
-                    // subheader="September 14, 2016"
-                />
-                    <CardContent>
-                        <Typography variant="h5" component="h5">
-                            Art. 3º - A lei excepcional ou temporária, embora decorrido o período de sua duração ou cessadas as circunstâncias que a determinaram, aplica-se ao fato praticado durante sua vigência.
-                        </Typography>
-                        <Typography className={classes.pos} color="textSecondary">
-                            Código Penal
-                        </Typography>
-                        <Typography variant="body2" component="p">
-                            Avaliado por: Admin / Avaliação pendente
-                        </Typography>
-                    </CardContent>
-                    <CardActions>
-                        <Button size="small">Abrir</Button>
-                    </CardActions>
+                <Card className={request.status === 'PENDING' ? classes.root : classes.opaqueRoot}>
+                {request.status === 'PENDING' && <CardHeader className={classes.pendingRequest}/> }
+                {request.status === 'ACCEPTED' && <CardHeader className={classes.acceptedRequest}/> }
+                {request.status === 'REJECTED' && <CardHeader className={classes.rejectedRequest}/> }
+                  <CardContent>
+                      <Typography variant="h6" component="h6">
+                          {request.change}
+                          {/* Art. 3º - A lei excepcional ou temporária, embora decorrido o período de sua duração ou cessadas as circunstâncias que a determinaram, aplica-se ao fato praticado durante sua vigência. */}
+                      </Typography>
+                      <Typography className={classes.pos} color="textSecondary">
+                          Código Penal
+                      </Typography>
+                      <Grid container spacing={3}>
+                        <Grid item xs={6}>
+                          <Typography variant="body2" component="p">
+                            {request.admin ? `Avaliado por: ${request.admin.name}`: 'Avaliação pendente' }
+                          </Typography>
+                        </Grid>
+                        <Grid item xs={6}>
+                          <Typography variant="body2" component="p" style={{textAlign: 'right'}}>
+                            {request.reviewed_at ? `Avaliado em : ${request.formatted_reviewed_at}`: `Criado em : ${request.formatted_created_at}`}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                  </CardContent>
+                  <CardActions>
+                      <Button size="small">Abrir</Button>
+                  </CardActions>
                 </Card>
               </div>
             </Fade>

diff --git a/front/src/pages/Login/LoginPage.js b/front/src/pages/Login/LoginPage.js
@@ -136,6 +136,8 @@ function LoginPage(props) {
                 onClick={handleForgotPass}>
                 <Help />
                 <span style={{ margin: 5 }}>Esqueceu a senha?</span>
+                {/* TODO */}
+                {/* INSERIR MODAL COM CAMPO DE EMAIL E DEPOIS UM CHECK DE EMAIL ENVIADO COM BOTAO DE VOLTAR/FAZER LOGIN */}
               </Button>
             </div>
           </Fade>