Create a tabular structure to display data and some actions to be per…

…formed Bahmni#7

ui/react-components/components/AllAppointmentServices/AllAppointmentServices.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import './AllAppointmentServices.scss'
+
+export class AllAppointmentServices extends React.Component{
+    constructor(props){
+        super(props);
+        this.getKeys =this.getKeys.bind(this);
+        this.getHeader =this.getHeader.bind(this);
+        this.getRowsData =this.getRowsData.bind(this);
+    }
+
+    getKeys = function () {
+        let keys = Object.keys(this.props.services[0]);
+        keys.push("Actions");
+        return keys;
+    }
+
+    getHeader = function () {
+        var keys = this.getKeys();
+        return keys.map((key,index)=>{
+                return <th key ={index}>{key}</th>
+        })
+    }
+
+    getService = function(keys,data) {
+        var self = this;
+        return  keys.map((key,index)=>{
+            if(key === "Description")
+            {
+                return <td key={index} className="service-disc-tablecell">{data[key]}</td>
+            }
+            else if(key === "Actions")
+            {
+                return <td key={index}>
+                    <a id="editservice" onClick={self.props.editService}>Edit</a>
+                    <a id="deleteservice" onClick={self.props.removeService}>Delete</a>
+                    </td>
+            }
+            return <td key={index} >{data[key]}</td>})
+    }
+
+    getRowsData = function(){
+        var keys = this.getKeys(); 
+        var self = this;
+        return this.props.services.map((row,index)=>{
+
+            return <tr key={index}>
+                {this.getService(keys,row)}
+                </tr>
+
+        });
+    }
+
+    render(){ 
+        return <div>
+            <table>
+                <thead>
+                <tr>
+                    {this.getHeader()}
+                    </tr>  
+                </thead>
+                <tbody>
+                    {this.getRowsData()}
+                </tbody>
+            </table>
+        </div>
+    }
+};

ui/react-components/components/AllAppointmentServices/AllAppointmentServices.scss

@@ -0,0 +1,84 @@
+table{
+    border-color: #0a0a0a;
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: table;
+    width: 100%;
+    margin: 0 auto;
+    font-size: 13px;
+    font-weight: 300;
+    font-family: OpenSans,Arial,sans-serif;
+}
+
+thead {
+    display: table-header-group;
+    vertical-align: middle;
+    border-color: inherit;
+}
+
+table tr:nth-child(odd) {
+    background: #fff;
+}
+
+table tr {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+}
+
+table th:first-child {
+    text-align: left;
+}
+
+table th {
+    background: #e2e1e1;
+    border-color: #e2e1e1;
+    display: table-cell;
+    vertical-align: inherit;
+}
+
+table thead tr th {
+    padding: 7px;
+
+}
+
+table thead th {
+    border-bottom: 1px solid #ddd;
+    width: auto;
+    word-break: normal;
+}
+
+table td, table th {
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+}
+
+table tr {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+}
+
+table tr:nth-child(even) {
+    background: #F2F1F1;
+}
+
+table th {
+    text-align: center;
+    border-color: #ddd;
+    color: #313131;
+}
+
+table .service-disc-tablecell {
+    min-width: 310px;
+    max-width: 310px;
+}
+
+table td a {
+    display: inline-block;
+    margin: 0 5px;
+}
+
+a, a:active, a:hover, a:link, a:visited {
+    color: #2b95ff;
+    text-decoration: none;
+    cursor: pointer;
+}

ui/react-components/components/AllAppointmentServices/AllAppointmentServices.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import {AllAppointmentServices} from './AllAppointmentServices';
+
+describe('Services', ()=>{
+
+    let service = [{
+        "Service Name": "Cardiology",
+        "Location":"",
+        "Speciality":"Cardiology",
+        "Duration":"45 min",
+        "Description":"ok"
+
+      },{
+      "Service Name": "Chemotherapy",
+      "Location":"25 min",
+      "Speciality":"Unkown location",
+      "Duration":"45 min",
+      "Description":"ok"
+      }]
+
+    let mockEditService= jest.fn();
+    let mockDeleteService= jest.fn();
+    let mountedApp = shallow(<AllAppointmentServices services={service} editService={mockEditService} removeService={mockDeleteService} />);
+
+
+    it('should render a <table />', () => {
+        expect(mountedApp.find('table').length).toEqual(1);
+    });
+
+    it('should edit service in allServices', () => {
+        mountedApp.find('#editservice').first().simulate('click', mockEditService);
+        expect(mockEditService).toBeCalledTimes(1);
+    });
+
+    it('should delete service in allServices', () => {
+        mountedApp.find('#deleteservice').first().simulate('click', mockDeleteService);
+        expect(mockDeleteService).toBeCalledTimes(1);
+    });
+
+    it('should render a <thead />',()=>{
+        expect(mountedApp.find('thead').length).toEqual(1);
+    });
+
+    it('should render a <tbody />',()=>{
+        expect(mountedApp.find('tbody').length).toEqual(1);
+    });
+
+});