Task UI fixes (#1757)

* Fixed ui bugs
1. pagination
2. layout
3. unwanted class and element remove
4. responsive

* fixed sorting look like chip

* changes sort of  task into a button

forms-flow-web/src/components/Form/Create.js

@@ -253,7 +253,7 @@ const Create = React.memo(() => {
               </div>
             </div>
             <div className="">
-              <label htmlFor="Description" className="control-label field-required font-weight-bold">
+              <label htmlFor="Description" className="control-label font-weight-bold">
                 {" "}
                 {t("Description")}
               </label>

forms-flow-web/src/components/Form/Item/Edit.js

@@ -603,7 +603,7 @@ const Edit = React.memo(() => {
                 </div>
               </div>
               <div >
-                <label htmlFor="Description" className="control-label field-required font-weight-bold">
+                <label htmlFor="Description" className="control-label font-weight-bold">
                   {" "}
                   {t("Description")}
                 </label>

forms-flow-web/src/components/ServiceFlow/NoTaskSelected/index.js

@@ -0,0 +1,27 @@
+import React from "react";
+import NoFilterSelectedImage from "./undraw_to_do_re_jaef.svg";
+import { Translation } from "react-i18next";
+
+function NoTaskSelectedMessage() {
+  return (
+    <div className="d-flex flex-column h-100 align-items-center justify-content-center">
+      <img
+        src={NoFilterSelectedImage}
+        style={{ width: "100%", height: "150PX" }}
+      />
+      <h3 className="text-center">
+        <Translation>{(t) => t("Select a task from the List.")}</Translation>
+      </h3>
+      <p className="text-center">
+        <Translation>
+          {(t) =>
+            t(
+              "Choose a task from the list; your selection directs your current activity."
+            )
+          }
+        </Translation>
+      </p>
+    </div>
+  );
+}
+export default NoTaskSelectedMessage;

forms-flow-web/src/components/ServiceFlow/ServiceFlow.scss

@@ -14,7 +14,6 @@
   overflow-y: auto;
   padding-right: 15px;
   border-right: 1px solid #d0d0d0;
-  padding-bottom: 40px;
 }
 .service-task-details {
   min-height: 80vh;
@@ -100,36 +99,7 @@
   padding: 5px;
   width: 12rem;
 }
-// .row-position{
-//position: fixed;
-// }
-.task-section-top {
-  //min-height: 35px;
-  padding: calc(6px + 2px) 15px calc(6px - 2px) 15px;
-  //border: none;
-  background-color: #fafafa;
-  box-shadow: 0 2px 6px -4px #555;
-  z-index: 2;
-  //top: 0;
-  //bottom: auto;
-  //overflow: visible;
-  margin-bottom: 0.5rem;
-  //height: auto;
-
-  .header-wrapper {
-    //display: grid;
-    //grid-template-columns: auto auto auto;
-    ul {
-      li {
-        max-width: 200px;
-        white-space: nowrap;
-        display: block;
-        float: left;
-        padding: 0 1.5em;
-      }
-    }
-  }
-}
+
 .variable-filter-item {
   padding: 5px;
   max-height: 250px;

forms-flow-web/src/components/ServiceFlow/details/ServiceTaskDetails.js

@@ -41,7 +41,7 @@ import {
 } from "../../../constants/constants";
 import { getCustomSubmission } from "../../../apiManager/services/FormServices";
 import { getFormioRoleIds } from "../../../apiManager/services/userservices";
-import  NoFilterSelected  from "../../../components/ServiceFlow/list/sort/NoFilterSelected";
+import  NoTaskSelectedMessage  from "../../../components/ServiceFlow/NoTaskSelected";
 
 import { bpmActionError } from "../../../actions/bpmTaskActions";
 import { setCustomSubmission } from "../../../actions/checkListActions";
@@ -252,7 +252,7 @@ const ServiceFlowTaskDetails = React.memo(() => {
 
   if (!bpmTaskId) {
     return (
-      <NoFilterSelected />
+      <NoTaskSelectedMessage />
     );
   } else if (isTaskLoading) {
     return (

forms-flow-web/src/components/ServiceFlow/details/TaskHeader.js

@@ -217,8 +217,8 @@ const TaskHeader = React.memo(() => {
         onClose={() => setModal(false)}
         groups={taskGroups}
       />
-      <Row className="ml-0 task-header">{task?.name}</Row>
-      <Row className="ml-0 task-name">
+      <Row className="mx-0 task-header">{task?.name}</Row>
+      <Row className="mx-0 task-name">
         <span className="application-id" data-title={t("Process Name")}>
           {" "}
           {
@@ -227,12 +227,12 @@ const TaskHeader = React.memo(() => {
           }
         </span>
       </Row>
-      <Row className="ml-0">
+      <Row className="mx-0">
         <span data-title={t("Submission ID")} className="application-id">
           {t("Submission ID")}# {task?.applicationId}
         </span>
       </Row>
-      <Row className="actionable mb-4">
+      <Row className="actionable mb-4 mx-0">
         <Col
           sm={followUpDate ? 2 : "auto"}
           data-title={

forms-flow-web/src/components/ServiceFlow/index.js

@@ -5,8 +5,7 @@ import ServiceTaskListViewDetails from './list/ServiceTaskListViewDetails';
 
 
 import ServiceFlowTaskDetails from "./details/ServiceTaskDetails";
-import { Col, Container, Row } from "react-bootstrap";
-import "./ServiceFlow.scss";
+ import "./ServiceFlow.scss";
 import {
   fetchBPMTaskCount,
   fetchFilterList,
@@ -241,20 +240,21 @@ export default React.memo(() => {
   }, [cardView, dispatch]);
 
   return (
-    <Container fluid id="main" className="pt-0">
+    <div>
+      <TaskHead />
       {cardView ? (
         <>
-        <TaskHead />
-        <Row className="p-2">
-        <Col lg={3} xs={12} sm={12} md={4} xl={3}>
+
+        <div className="row mx-0">
+        <div className="col-12 px-0 col-md-4 col-xl-3">
           <section>
-            <header className="task-section-top">
+            <header className="d-flex flex-wrap align-items-center p-2 bg-white shadow mb-2">
               <TaskSortSelectedList />
             </header>
             <ServiceFlowTaskList />
           </section>
-        </Col>
-        <Col className="pl-0" lg={9} xs={12} sm={12} md={8} xl={9}>
+        </div>
+        <div className="col-12 pr-0 pl-md-5 col-md-8 col-xl-9  px-2 pr-md-0 py-5 py-md-0 border ">
           <Switch>
             <Route
               path={`${BASE_ROUTE}task/:taskId?`}
@@ -265,8 +265,8 @@ export default React.memo(() => {
               <Redirect exact to="/404" />
             </Route>
           </Switch>
-        </Col>
-        </Row>
+        </div>
+        </div>
         </>
       ) :
         (
@@ -276,7 +276,6 @@ export default React.memo(() => {
               path={`${BASE_ROUTE}task`}
               render={() => (
                 <>
-                  <TaskHead />
                   <ServiceTaskListView />
                 </>
               )}
@@ -297,6 +296,6 @@ export default React.memo(() => {
             </Route>
           </Switch>
         ) }
-    </Container>
+    </div>
   );
 });

forms-flow-web/src/components/ServiceFlow/list/ServiceTaskList.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { ListGroup, Row } from "react-bootstrap";
+import { ListGroup } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchServiceTaskList } from "../../../apiManager/services/bpmTaskServices";
 import {
@@ -67,6 +67,7 @@ const ServiceFlowTaskList = React.memo(() => {
     if ((tasksCount || taskList.length) && selectedFilter) {
       return (
         <>
+          <div style={{minHeight:"67vh"}}>
           {taskList.map((task, index) => (
             <div
               className={`clickable shadow border  ${
@@ -75,11 +76,11 @@ const ServiceFlowTaskList = React.memo(() => {
               key={index}
               onClick={() => getTaskDetails(task.id)}
             >
-              <Row>
-                <div className="col-12">
+
+                <div className="col-12 px-0">
                   <h5 className="font-weight-bold">{task.name}</h5>
                 </div>
-              </Row>
+
               <div className="font-size-16 d-flex justify-content-between">
                 <div className="pr-0" style={{ maxWidth: "65%" }}>
                   <span data-toggle="tooltip" title="Form Name">
@@ -148,35 +149,40 @@ const ServiceFlowTaskList = React.memo(() => {
             </div>
           ))}
 
-          <Row style={{justifyContent: "flex-end"}}>
-          <div className="pagination-wrapper">
+          </div>
+
+              <div className="d-flex justify-content-end">
+
             <Pagination
               activePage={activePage}
               itemsCountPerPage={tasksPerPage}
               totalItemsCount={tasksCount}
-              pageRangeDisplayed={3}
+              pageRangeDisplayed={5}
               onChange={handlePageChange}
               prevPageText="<"
               nextPageText=">"
+              itemClass="page-item"
+              linkClass="page-link"
             />
-          </div>
-          </Row>
+              </div>
+
+
 
         </>
       );
     } else {
       return (
-        <Row className="not-selected mt-2 ml-1">
-          <i className="fa fa-info-circle mr-2 mt-1" />
+        <div className="d-flex align-items-center justify-content-center py-4 px-2">
+          <i className="fa fa-info-circle mr-2" />
           {t("No task matching filters found.")}
-        </Row>
+        </div>
       );
     }
   };
 
   return (
     <>
-      <ListGroup className="service-task-list">
+      <ListGroup className="service-task-list d-block">
         <TaskFilterComponent  totalTasks={isTaskListLoading ? 0 : tasksCount} />
         {isTaskListLoading ? <Loading /> : renderTaskList()}
       </ListGroup>

forms-flow-web/src/components/ServiceFlow/list/ServiceTaskListView.js

@@ -123,9 +123,8 @@ const ServiceTaskListView = React.memo(() => {
   const renderTaskList = () => {
     if ((tasksCount || taskList.length) && selectedFilter) {
       return (
-        <>
-        <hr className=" head-rule mt-1"/>
-        <div className="list-container p-2"
+        <> 
+        <div className="list-container "
 
         >
           {taskList?.map((task, index) => (

forms-flow-web/src/components/ServiceFlow/list/search/TaskFilterSearch.js

@@ -148,13 +148,13 @@ const TaskFilterSearch = React.memo(
                     nameBoxIndex === index ? (
                       <>
                         <button
-                          className="btn click-element"
+                          className="btn btn-small"
                           onClick={() => updateFilterName(index)}
                         >
                           <i className="fa fa-check" aria-hidden="true" />
                         </button>
                         <button
-                          className="btn click-element"
+                          className="btn btn-small"
                           onClick={() => setShowNameBoxIndex(null)}
                         >
                           <i className="fa fa-times" aria-hidden="true" />
@@ -221,7 +221,7 @@ const TaskFilterSearch = React.memo(
                       <span className="btn-container second-box">
                         <span className="second-inner-box">
                           {filter.type === Filter_Search_Types.VARIABLES ? (
-                            <button className="btn">
+                            <button className="btn btn-small">
                               <i
                                 className="fa fa-calendar"
                                 aria-hidden="true"
@@ -230,14 +230,14 @@ const TaskFilterSearch = React.memo(
                             </button>
                           ) : null}
                           <button
-                            className="btn click-element"
+                            className="btn btn-small"
                             onClick={() => updateFilterValue(index)}
                           >
                             <i className="fa fa-check" aria-hidden="true" />
                           </button>
 
                           <button
-                            className="btn click-element"
+                            className="btn btn-small"
                             onClick={() => {
                               setShowValueBoxIndex(null);
                               setCalander(false);

forms-flow-web/src/components/ServiceFlow/list/sort/TaskSortSelectedList.js

@@ -87,7 +87,7 @@ const TaskSortSelectedList = React.memo(() => {
 
   const selectedSortList = () => {
     return sortList.map((sort, index) => (
-      <div className="mr-3" key={index}>
+      <div className=" badge border rounded-pill  p-2 m-2 " key={index}>
         {sortList.length > 1 ? (
           <span
             className="mr-1 font-weight-bold click-element"
@@ -133,13 +133,15 @@ const TaskSortSelectedList = React.memo(() => {
       {selectedSortList()}
       {sortOptions.length ? (
         <div className="ml-1">
-          <i
-            className="fa fa-plus-circle"
+          <button
+            className="btn btn-small btn-link text-dark"
             data-title={t("Add sorting")}
             title={t("Add sorting")}
             onClick={() => setShowSortListDropdown(!showSortListDropdown)}
-          />
-          <span  style={{  textDecoration: 'underline' , fontSize: '14px' }} className="px-1 py-1">{t("Add sorting")}</span>
+          >
+            <i className="fa fa-plus-circle mr-2" />
+            {t("Add sorting")}
+          </button>
 
           {showSortListDropdown ? (
             <TaskSort handleClick={addSort} options={sortOptions} />