Implement client status

client/views/clients/Detail.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import Layout from "../layouts/Main";
 import moment from "moment";
 
+const basePath = process.env.API_BASE_PATH;
+const frontendBasePath = process.env.FRONTEND_BASE_PATH;
+
 export default function Detail({ client, user }) {
   const timelineComponent = client.events
     .reverse()
@@ -25,7 +28,7 @@ export default function Detail({ client, user }) {
         </div>
       );
     });
-
+  console.debug(client);
   return (
     <Layout user={user}>
       <div className="row">
@@ -36,14 +39,6 @@ export default function Detail({ client, user }) {
         <div className="col col-4">
           <div class="card border-dark">
             <div class="card-body d-flex flex-column">
-              <div className="d-flex justify-content-between">
-                <span>Status</span>
-                <div>
-                  <span className="card-text badge badge-pill badge-dark text-capitalize">
-                    {client.status.replace("_", " ")}
-                  </span>
-                </div>
-              </div>
               <div className="d-flex justify-content-between">
                 <span>Address</span>
                 <span>{client.address || "-"}</span>
@@ -52,6 +47,51 @@ export default function Detail({ client, user }) {
                 <span>Tel.</span>
                 <span>{client.telephone || "-"}</span>
               </div>
+              <form
+                method="post"
+                action={
+                  basePath +
+                  "/clients/" +
+                  client._id +
+                  "/events" +
+                  "?token=" +
+                  user.token +
+                  "&redirect=" +
+                  frontendBasePath +
+                  "/clients/" +
+                  client._id
+                }
+                class="inline"
+              >
+                <div className="d-flex justify-content-between">
+                  <span>Status</span>
+                  <select
+                    className="card-text text-capitalize"
+                    name="value"
+                    defaultValue={client.status}
+                  >
+                    <option value="potential" className="card-text">
+                      Potential
+                    </option>
+                    <option value="active" className="card-text">
+                      Active
+                    </option>
+                    <option value="inactive" className="card-text">
+                      Inactive
+                    </option>
+                    <option value="on_hold" className="card-text">
+                      On Hold
+                    </option>
+                  </select>
+                </div>
+                <button
+                  type="submit"
+                  class="badge badge-primary align-self-end"
+                >
+                  Update
+                </button>
+                <input type="hidden" name="eventType" value="status_changed" />
+              </form>
             </div>
           </div>
         </div>
@@ -60,7 +100,7 @@ export default function Detail({ client, user }) {
       <div className="jumbotron jumbotron-fluid row mt-4 py-3 mx-0">
         {timelineComponent}
         <div className="col-sm-2 d-flex align-items-center">
-          <a className="btn btn-light" href={`/clients/${client.id}/timeline`}>
+          <a className="btn btn-light" href={`/clients/${client._id}/timeline`}>
             View Full Timeline
           </a>
         </div>

server/routes/clients.js

@@ -5,15 +5,18 @@ const moment = require("moment");
 const Client = require("../model/Client");
 const User = require("../model/User");
 
+const getStatus = (client) =>
+  client.events
+    .filter((event) => event.eventType == "status_changed")
+    .reverse()[0].value;
+
 router.get("/", async (req, res) => {
   const client = await Client.find({ created_by: req.userId }).map(
     (clients) => {
       return clients
         .map((client) => {
-          const status = client.events
-            .filter((event) => event.eventType == "status_changed")
-            .reverse()[0];
-          if (status) return { ...client.toJSON(), status: status.value };
+          const status = getStatus(client);
+          if (status) return { ...client.toJSON(), status };
           else return { ...client.toJSON(), status: "" };
         })
         .sort((a, b) => moment(b.updatedAt).subtract(a.updatedAt));
@@ -92,9 +95,13 @@ router.post("/:id/events", async (req, res) => {
 
   const client = await Client.findById(id);
 
-  client.events.push({ ...req.body });
+  if (getStatus(client) !== req.body.value) {
+    client.events.push({ ...req.body });
+    await client.save();
+  }
 
-  res.send(await client.save());
+  if (req.body.redirect) res.redirect(req.body.redirect);
+  else res.json(client);
 });
 
 /**