[UsersList] wip

Author: Jovert Lota Palonpon

public/assets.json

@@ -1,4 +1,4 @@
 {
-  "js/backoffice.js": "js/backoffice.bundle.641bb19e1c6de2294267.js",
-  "js/vendor.js": "js/vendor.bundle.60bab7ed0c4b898e6cd4.js"
+  "js/backoffice.js": "js/backoffice.bundle.4f26014a924451720488.js",
+  "js/vendor.js": "js/vendor.bundle.fe9518cbecd64dd5305d.js"
 }

public/js/backoffice.bundle.4f26014a924451720488.js

@@ -1,10 +1,12 @@
 export default {
     // English
+    'en.actions': require('../../lang/en/actions.php'),
     'en.navigation': require('../../lang/en/navigation.php'),
     'en.resources': require('../../lang/en/resources.php'),
     'en.table': require('../../lang/en/table.php'),
 
     // Filipino
+    'fil.actions': require('../../lang/fil/actions.php'),
     'fil.navigation': require('../../lang/fil/navigation.php'),
     'fil.resources': require('../../lang/fil/resources.php'),
     'fil.table': require('../../lang/fil/table.php'),

public/js/backoffice.bundle.641bb19e1c6de2294267.js

@@ -19,4 +19,21 @@ export default class User {
 
         return response.data;
     }
+
+    /**
+     * Delete a user
+     *
+     * @param {number}
+     *
+     * @return {object}
+     */
+    static async delete(id) {
+        const response = await axios.delete(`/api/users/${id}`);
+
+        if (response.status !== 200) {
+            return;
+        }
+
+        return response.data;
+    }
 }

public/js/vendor.bundle.60bab7ed0c4b898e6cd4.js

@@ -37,11 +37,11 @@ const Confirmation = props => {
 
             <DialogActions>
                 <Button onClick={cancelled} color="primary">
-                    {cancelText ? cancelText : Lang.get('resources.cancel')}
+                    {cancelText ? cancelText : Lang.get('actions.cancel')}
                 </Button>
 
                 <Button onClick={confirmed} color="secondary" autoFocus>
-                    {confirmText ? confirmText : Lang.get('resources.confirm')}
+                    {confirmText ? confirmText : Lang.get('actions.confirm')}
                 </Button>
             </DialogActions>
         </Dialog>

public/js/vendor.bundle.fe9518cbecd64dd5305d.js

@@ -19,7 +19,7 @@ class List extends Component {
         },
         filters: {},
         selectedResources: [],
-        activeResource: 0,
+        activeResourceId: 0,
         message: {},
         alert: {},
     };
@@ -28,12 +28,13 @@ class List extends Component {
      * Event listener that is triggered when a resource delete button is clicked.
      * This should prompt for confirmation.
      *
-     * @param {string} resource
+     * @param {string} resourceId
      *
      * @return {undefined}
      */
-    handleDeleteClick = resource => {
+    handleDeleteClick = resourceId => {
         this.setState({
+            activeResourceId: resourceId,
             alert: {
                 type: 'confirmation',
                 title: Lang.get('resources.delete_confirmation_title', {
@@ -42,8 +43,8 @@ class List extends Component {
                 body: Lang.get('resources.delete_confirmation_body', {
                     name: 'User',
                 }),
-                confirmText: Lang.get('resources.continue'),
-                confirmed: () => alert('Deleting User:' + resource),
+                confirmText: Lang.get('actions.continue'),
+                confirmed: async () => await this.deleteUser(resourceId),
                 cancelled: () => this.setState({ alert: {} }),
             },
         });
@@ -193,6 +194,47 @@ class List extends Component {
         history.push(`${location.pathname}${queryString}`);
     }
 
+    /**
+     * This should send an API request to delete a resource.
+     *
+     * @param {string} resourceId
+     *
+     * @return {undefined}
+     */
+    deleteUser = async resourceId => {
+        this.setState({ loading: true });
+
+        try {
+            const pagination = await User.delete(resourceId);
+
+            this.setState({
+                loading: false,
+                pagination,
+                alert: {},
+                message: {
+                    type: 'success',
+                    body: 'User successfully deleted!',
+                    closed: () => this.setState({ message: {} }),
+                    actionText: Lang.get('actions.undo'),
+                    action: () => alert('Recovering...'),
+                },
+            });
+        } catch (error) {
+            const { activeResourceId } = this.state;
+
+            this.setState({
+                loading: false,
+                message: {
+                    type: 'error',
+                    body: 'Error deleting user!',
+                    closed: () => this.setState({ message: {} }),
+                    actionText: Lang.get('actions.retry'),
+                    action: async () => await this.deleteUser(activeResourceId),
+                },
+            });
+        }
+    };
+
     /**
      * This should send an API request to fetch all resource.
      *
@@ -278,6 +320,9 @@ class List extends Component {
             current_page: page,
         } = pagination;
 
+        const { pageProps } = this.props;
+        const { user: authUser } = pageProps;
+
         const primaryAction = {
             text: Lang.get('resources.create', {
                 name: 'User',
@@ -323,20 +368,22 @@ class List extends Component {
                                 </IconButton>
                             </Tooltip>
 
-                            <Tooltip
-                                title={Lang.get('resources.delete', {
-                                    name: 'User',
-                                })}
-                            >
-                                <IconButton
-                                    color="secondary"
-                                    onClick={() =>
-                                        this.handleDeleteClick(user.id)
-                                    }
+                            {authUser.id !== user.id && (
+                                <Tooltip
+                                    title={Lang.get('resources.delete', {
+                                        name: 'User',
+                                    })}
                                 >
-                                    <DeleteIcon />
-                                </IconButton>
-                            </Tooltip>
+                                    <IconButton
+                                        color="secondary"
+                                        onClick={() =>
+                                            this.handleDeleteClick(user.id)
+                                        }
+                                    >
+                                        <DeleteIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            )}
                         </div>
                     ),
                 };