Merge pull request #40 from Anant/dev

Dev

astra.api/leaves.api.tests/README.md

@@ -31,11 +31,9 @@ npm run test
 
 #### Troubleshooting
 
-* Point the API that is being tested to port `8000`, or change line 3 in *leaves.api.tests/test/app.spec.js* to match the running URL/PORT of the API.
 * **Ensure your Node/Python API is running before starting tests**
 
-
-**2.4.3** We will discuss how to run the tests for testing the node API and the python API from the same test suite. We can either do this on Gitpod or locally, whichever you prefer as the steps will be the same after setting it up. If doing this on Gitpod, go to `gitpod.io#the-repo-url` and wait for it to finish loading. If doing it locally, git clone the repo to whichever location. Once cloned, cd into the directory and open the directory in whichever code editor you are using. We will discuss the how-to for both. But before doing so, we will need to download the secure connect bundle from Astra and place that into the `/astra.credentials` directory, and then insert the appropriate credentials into `/astra.credentials/UserCred.json` as those will be needed to run the API’s and tests. 
+**2.4.3** We will discuss how to run the tests for testing the node API and the python API from the same test suite. We can either do this on Gitpod or locally, whichever you prefer as the steps will be the same after setting it up. If doing this on Gitpod, go to `gitpod.io#the-repo-url` and wait for it to finish loading. If doing it locally, git clone the repo to whichever location. Once cloned, cd into the directory and open the directory in whichever code editor you are using. We will discuss the how-to for both. But before doing so, we will need to download the secure connect bundle from Astra and place that into the `/astra.credentials` directory, and then insert the appropriate credentials into `/astra.credentials/UserCred.json` as those will be needed to run the API’s and tests. Also, we will need to run the importer to create the table in Astra if that has not been done already. Instructions for doing so are in `/astra.import/README.md`. 
 
 ---
 

astra.api/leaves.api.tests/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "mocha --require test/setup.js",
+    "test": "mocha --timeout 4000 --require test/setup.js",
     "dev": "nodemon src/server.js",
     "start": "node src/server.js",
     "predeploy": "npm audit",

astra.ui/README.md

@@ -9,7 +9,11 @@ Administration panel for <a href="https://github.com/Anant/cassandra.api">Cassan
 --- 
 - [Setup](#setup)
 
-- [Folder Structure](#folder-structure)
+- [Astra UI](#h1-idastra-ui-44astra-uih1)
+- [Table of Contents](#h2-idtable-of-contents-44table-of-contentsh2)
+- [Setup](#setup)
+- [Operations](#h2-idoperations-44operationsh2)
+    - [Folder Structure](#folder-structure)
 
 
 ## Setup
@@ -28,12 +32,31 @@ SKIP_PREFLIGHT_CHECK=true
 
 ![Astra](src/assets/astra_ui.png)
 
+
+
 Each column allows sorting, editing, deletion and paginationm of our Cassandra table.
 
 To edit columns, edit `/Views/Leaves/components/LeavesTable/LeavesTable.js`
 
 ![Astra](src/assets/LeavesTableColumns.png)
 
+## Operations
+----
+
+<br/>
+
+- Edit
+![Astra](src/assets/edit5.png)
+<br/>
+
+- Delete
+![Astra](src/assets/edit3.png)
+![Astra](src/assets/edit4.png)
+<br/>
+
+- Column sorting
+
+![Astra](src/assets/edit2.png)
 
 #### Folder Structure
 ```

astra.ui/src/views/Leaves/components/LeavesTable/LeavesTable.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import Paper from '@material-ui/core/Paper';
-import { EditingState } from '@devexpress/dx-react-grid';
+
 import {
     PagingState,
     IntegratedPaging,
     SortingState,
-    IntegratedSorting
+    IntegratedSorting,
+    DataTypeProvider,
+    EditingState
 } from '@devexpress/dx-react-grid';
 import {
     Grid, Table, TableHeaderRow, PagingPanel, TableEditRow,
@@ -15,6 +17,59 @@ import {
 //DevExpress Plugin for column resizing
 // import { TableColumnResizing } from '@devexpress/dx-react-grid-material-ui';
 
+//Date column formatting
+const DateFormatter = ({ value }) => (
+    <b style={{ color: 'darkblue' }}>
+        {new Date(value).toLocaleString('en-US')}
+    </b>
+);
+
+const DateTypeProvider = props => (
+    <DataTypeProvider
+        formatterComponent={DateFormatter}
+        {...props}
+    />
+);
+
+//URL column formatting
+const UrlFormatter = ({ value }) => (
+    <b style={{ color: 'darkblue' }}>
+        {<a href={value} target="_blank">{value}</a>}
+    </b>
+);
+
+const UrlTypeProvider = props => (
+    <DataTypeProvider
+        formatterComponent={UrlFormatter}
+        {...props}
+    />
+);
+
+// Pic column formatting
+const PicFormatter = ({ value }) => (
+    <img src={value} style={{ height: '50px', width: "140px" }} alt="No Preview" />
+);
+
+const PicTypeProvider = props => (
+    <DataTypeProvider
+        formatterComponent={PicFormatter}
+        {...props}
+    />
+);
+
+//Tags column formatting
+const TagsFormatter = ({ value }) => (
+    <div>
+        {value.map((tag) => <p>{tag}</p>)}
+    </div>
+);
+
+const TagsTypeProvider = props => (
+    <DataTypeProvider
+        formatterComponent={TagsFormatter}
+        {...props}
+    />
+);
 
 //Our columns require [name, title], name is used to align object keys with columns, title is the column heading
 const columns = [
@@ -29,7 +84,7 @@ const columns = [
 const LeavesTable = () => {
     //Our Table data
     const [rows, setRows] = useState([]);
-    
+
     //Runs similar to componentDidMount, set our table data
     useEffect(() => {
         getLeaves();
@@ -38,6 +93,13 @@ const LeavesTable = () => {
     //IDs of editing rows
     const [editingRowIds, setEditingRowIds] = useState([]);
 
+    //Columns for custom formatting
+    const [dateColumn] = useState(['created_at']);
+    const [urlColumn] = useState(['url']);
+    const [picColumn] = useState(['preview_picture']);
+    const [tagsColumn] = useState(['tags']);
+
+
     //Our Row changes as we edit
     const [rowChanges, setRowChanges] = useState({});
 
@@ -147,6 +209,10 @@ const LeavesTable = () => {
                 <SortingState />
                 <IntegratedPaging />
                 <IntegratedSorting />
+                <DateTypeProvider for={dateColumn} />
+                <UrlTypeProvider for={urlColumn} />
+                <PicTypeProvider for={picColumn} />
+                <TagsTypeProvider for={tagsColumn} />
                 <Table />
                 {/* <TableColumnResizing columnWidths={columnWidths} /> */}
                 <TableHeaderRow showSortingControls={true} />