* Order by invoice number desc

* Allow ordering by number asc / desc
* Allow to delete invoices
* Confirm invoice delete by modal

package.json

@@ -20,13 +20,13 @@
     "postinstall": "electron-builder install-app-deps"
   },
   "dependencies": {
-    "antd": "^3.26.8",
+    "antd": "^3.26.9",
     "bootstrap": "^4.4.1",
     "countries-list": "^2.5.1",
     "currency-symbol-map": "^4.0.4",
     "currency.js": "^1.2.2",
     "electron-updater": "^4.2.0",
-    "libphonenumber-js": "^1.7.38",
+    "libphonenumber-js": "^1.7.41",
     "pouchdb": "^7.1.1",
     "pouchdb-find": "^7.1.1",
     "react": "^16.12.0",
@@ -81,4 +81,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

src/components/invoices/state-tag.js

@@ -21,7 +21,11 @@ const StateTag = props => {
       color = null;
   }
   return (
-    <Tag color={color} onClick={props.onClick}>
+    <Tag
+      color={color}
+      onClick={props.onClick}
+      style={{ fontSize: 14, padding: '4px 8px', marginTop: 12 }}
+    >
       {state}
     </Tag>
   );

src/models/invoices.js

@@ -1,6 +1,7 @@
 import { initialize } from 'redux-form';
 import { message } from 'antd';
 import { keyBy } from 'lodash';
+import { push } from 'connected-react-router';
 
 import * as invoicesService from '../services/invoices';
 
@@ -12,7 +13,7 @@ export default {
   },
 
   effects: {
-    *list({ payload: { sort = ['number'] } = {} }, { put, call }) {
+    *list({ payload: { sort = [{ number: 'desc' }] } = {} }, { put, call }) {
       try {
         const response = yield call(invoicesService.list, sort);
         yield put({ type: 'listSuccess', data: response.docs });
@@ -21,12 +22,7 @@ export default {
       }
     },
 
-    *details(
-      {
-        payload: { id },
-      },
-      { put, call }
-    ) {
+    *details({ payload: { id } }, { put, call }) {
       try {
         const response = yield call(invoicesService.details, id);
         yield put({ type: 'detailsSuccess', data: response });
@@ -35,12 +31,7 @@ export default {
       }
     },
 
-    *initialize(
-      {
-        payload: { id },
-      },
-      { put, call }
-    ) {
+    *initialize({ payload: { id } }, { put, call }) {
       try {
         const response = yield call(invoicesService.details, id);
         yield put({ type: 'detailsSuccess', data: response });
@@ -50,12 +41,7 @@ export default {
       }
     },
 
-    *state(
-      {
-        payload: { _id, _rev, state },
-      },
-      { put, call }
-    ) {
+    *state({ payload: { _id, _rev, state } }, { put, call }) {
       try {
         const response = yield call(invoicesService.save, { _id, _rev, state });
         yield put({ type: 'detailsSuccess', data: response });
@@ -75,6 +61,17 @@ export default {
         message.error('Error saving invoice!', 5);
       }
     },
+
+    *remove({ data, resolve, reject }, { put, call }) {
+      try {
+        const response = yield call(invoicesService.remove, data);
+        yield put({ type: 'removeSuccess', data: response });
+        message.success('Invoice deleted!', 5);
+        yield put(push('/invoices'));
+      } catch (e) {
+        message.error('Error deleting invoice!', 5);
+      }
+    },
   },
 
   reducers: {
@@ -98,5 +95,17 @@ export default {
         },
       };
     },
+
+    removeSuccess(state, payload) {
+      const { data } = payload;
+
+      let items = { ...state.items };
+      delete items[data._id];
+
+      return {
+        ...state,
+        items: items,
+      };
+    },
   },
 };

src/pages/invoices/$id/_layout.js

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import { compose } from 'redux';
 import { connect } from 'dva';
 import { Field, FieldArray, formValueSelector, reduxForm } from 'redux-form';
-import { Button, Col, Form, Icon, Layout, Row, Select, Menu, Dropdown } from 'antd';
+import { Button, Col, Form, Icon, Layout, Row, Select, Menu, Dropdown, Modal } from 'antd';
 import { forEach, get, isString, includes, has, lowerCase, map } from 'lodash';
 
 import moment from 'moment';
@@ -84,6 +84,24 @@ class InvoiceForm extends Component {
     });
   };
 
+  deleteConfirm = (_id, _rev) => {
+    Modal.confirm({
+      title: 'Are you sure delete this invoice?',
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      onOk: () => {
+        this.props.dispatch({
+          type: 'invoices/remove',
+          data: {
+            _id,
+            _rev,
+          },
+        });
+      },
+    });
+  };
+
   printPDF = invoiceId => {
     const { ipcRenderer } = window.require('electron');
 
@@ -256,20 +274,29 @@ class InvoiceForm extends Component {
 
           <FooterToolbar
             extra={
-              <span>
-                {!this.isNew() && invoice && (
-                  <Dropdown overlay={stateMenu(invoice._id, invoice._rev)} trigger={['click']}>
-                    <StateTag state={invoice.state} style={{ marginTop: 10, marginRight: 20 }} />
-                  </Dropdown>
+              <div>
+                {!this.isNew() && (
+                  <Button
+                    type="dashed"
+                    onClick={() => this.deleteConfirm(invoice._id, invoice._rev)}
+                  >
+                    <Icon type="delete" />
+                    Delete
+                  </Button>
                 )}
-              </span>
+              </div>
             }
           >
+            {!this.isNew() && invoice && (
+              <Dropdown overlay={stateMenu(invoice._id, invoice._rev)} trigger={['click']}>
+                <StateTag state={invoice.state} style={{ marginTop: 10, marginRight: 20 }} />
+              </Dropdown>
+            )}
             {!this.isNew() && (
               <Link to={`/invoices/${get(this.props, ['match', 'params', 'id'])}/preview`}>
                 <Button type="dashed" style={{ marginTop: 10, marginRight: 8 }}>
                   <Icon type="eye" />
-                  Preview
+                  View
                 </Button>
               </Link>
             )}
@@ -290,7 +317,7 @@ class InvoiceForm extends Component {
               style={{ marginTop: 10 }}
             >
               <Icon type="save" />
-              Save invoice
+              Save
             </Button>
           </FooterToolbar>
         </Form>

src/pages/invoices/index.js

@@ -120,6 +120,7 @@ class Invoices extends Component {
           <Table.Column
             title="Number"
             key="number"
+            sorter={(a, b) => (a < b ? -1 : a === b ? 0 : 1)}
             render={invoice => (
               <Link to={`/invoices/${invoice._id}`}>
                 <Icon type="file-text" />

src/services/invoices.js

@@ -59,4 +59,10 @@ export async function save(data) {
   }
 }
 
-export async function remove(id) {}
+export async function remove(data) {
+  try {
+    return db.remove(data._id, data._rev);
+  } catch (error) {
+    console.log(error);
+  }
+}