Refactor frontend

kicks321 · Apr 23, 2021 · b3b9922 · b3b9922
1 parent 41fd8bf
commit b3b9922
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 31 deletions.
diff --git a/backend/apps/journals/migrations/0006_journal_file_upload.py b/backend/apps/journals/migrations/0006_journal_file_upload.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.1.6 on 2021-04-01 00:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('journals', '0005_auto_20210331_1613'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='journal',
+            name='file_upload',
+            field=models.CharField(max_length=255, null=True, verbose_name='file_upload'),
+        ),
+    ]
diff --git a/backend/apps/journals/models.py b/backend/apps/journals/models.py
@@ -11,6 +11,7 @@ class Journal(models.Model):
     date = models.DateField(verbose_name='date', auto_now_add=True, null=True)
     source = models.CharField(verbose_name='source', max_length=255, null=True)
     comment = models.CharField(verbose_name='comment', max_length=255, null=True)
+    file_upload = models.CharField(verbose_name='file_upload', max_length=255, null=True)
 
     def __str__(self):
         return self.name
diff --git a/frontend/src/components/JournalModal.js b/frontend/src/components/JournalModal.js
@@ -135,6 +135,17 @@ export default class JournalModal extends Component {
                                 placeholder="Enter Comment"
                             />
                         </FormGroup>
+                        <FormGroup>
+                            <Label for="account-subcategory">File Upload</Label>
+                            <Input
+                                type="text"
+                                id="entry-comment"
+                                name="file_upload"
+                                value={this.state.activeItem.file_upload}
+                                onChange={this.handleChange}
+                                placeholder="Enter File"
+                            />
+                        </FormGroup>
                     </Form>
                 </ModalBody>
                 <ModalFooter>

diff --git a/frontend/src/components/JournalTable.js b/frontend/src/components/JournalTable.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import API from '../api'
-import { Header, Table, Button, Checkbox, Dropdown  } from 'semantic-ui-react'
+import { Header, Table, Button, Checkbox, Dropdown, Input } from 'semantic-ui-react'
 import JouralModal from '../components/JournalModal'
 import JournalModal from '../components/JournalModal';
+import '../css/components/JournalTable.css'
 
 export default function LogTable() {
     const [journalList, setJournalList] = useState(null);
@@ -53,37 +54,32 @@ export default function LogTable() {
             setSelectedJournals(selectedJournals.filter((el) => el.id != item.id))
     }
 
-    const verifyIsCheked = (journalList, item) => {
-        let arr = journalList.filter((el) => el.id == item.id);
-        if (arr.length == 0)
-            return false;
-        else 
-            return true;
-    }
-
     const handleSubmit = async (item) => {
         setModal(!modal)
         setIsAdd(true);
 
-        if (selectedJournals != null || selectedJournals[0] != undefined) {
-            handleEditAccount(item)
-        }
+        if (item.id)
+            API.put(`/api/journals/admin/${item.id}/`, item).then(res => res.data);
+        else
+            API.post(`/api/journals/admin/`, item).then(res => res.data);
 
-        API.post(`/api/journals/admin/`, item).then(res => res.data);
         refreshItems();
         setSelectedJournals([]);
     }
 
     const handleEditAccount = (item) => {
+        console.log(selectedJournals[0])
+        setActiveItem(selectedJournals[0]);
         setIsAdd(false);
-        setActiveItem(selectedJournals[0])
+        setModal(!modal)
     }
 
     const deleteSelectedRows = async (journals) => {
         for (let entry in journals) {
             API.delete(`/api/journals/admin/${journals[entry].id}/`).then(res => res.data);
         }
         refreshItems();
+        window.location.replace('/apps/journals')
     }
 
     const handleChange = async (e, item) => {
@@ -92,19 +88,6 @@ export default function LogTable() {
         refreshItems();
     }
 
-    const mapValueToStatus = (value) => {
-        switch (value) {
-            case "Approved":
-                return 1
-            case "Pending":
-                return 2
-            case "Rejected":
-                return 3
-            default:
-                return "Unknown"
-        }
-    }
-
     const mapStatusToValue = (status) => {
         switch(Number.parseInt(status)) {
             case 1:
@@ -198,6 +181,13 @@ export default function LogTable() {
                         <Table.Cell>
                             <Header as='h4'>{(log["comment"] != null ? log["comment"] : "N/A")}</Header>
                         </Table.Cell>
+                        <Table.Cell>
+                            <Header as='h4'>{(log["file_upload"] != null ? log["file_upload"] : "N/A")}</Header>
+                            <input
+                                type="file"
+                                hidden
+                            />
+                        </Table.Cell>
                     </Table.Row>
                 )
             });
@@ -206,10 +196,19 @@ export default function LogTable() {
 
     return (
         <div>
-            <div>
-                <Button color='green' onClick={() => handleAddItem()}>Add</Button>
-                <Button color='blue' onClick={() => handleAddItem(selectedJournals[0])}>Edit</Button>
-                <Button color='red' onClick={() => deleteSelectedRows(selectedJournals)}>Delete</Button>
+            <div className="journal-title-bar">
+                <div>
+                    <Button color='green' onClick={() => handleAddItem()}>Add</Button>
+                    <Button color='blue' onClick={() => handleEditAccount(selectedJournals[0])}>Edit</Button>
+                    <Button color='red' onClick={() => deleteSelectedRows(selectedJournals)}>Delete</Button>
+                </div>
+                <div>
+                    <Input style={{ float: "right" }}
+                        type="search"
+                        id="entry-search"
+                        placeholder="Search"
+                    />
+                </div>
             </div>
             <Table cell padded style={{ width: "100%" }}>
                 <Table.Header>
@@ -223,6 +222,7 @@ export default function LogTable() {
                         <Table.HeaderCell>Amount</Table.HeaderCell>
                         <Table.HeaderCell>Source</Table.HeaderCell>
                         <Table.HeaderCell>Comment</Table.HeaderCell>
+                        <Table.HeaderCell>File Uploads</Table.HeaderCell>
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>

diff --git a/frontend/src/css/components/JournalTable.css b/frontend/src/css/components/JournalTable.css
@@ -0,0 +1,4 @@
+.journal-title-bar {
+    display: flex;
+    justify-content: space-between;
+}