Enhance project screen

#1427

Author: jmgasper

src/actions/challenges.js

@@ -59,22 +59,58 @@ import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '..
 /**
  * Loads active challenges of project by page
  */
-export function loadChallengesByPage (page, projectId, status, filterChallengeName = null, selfService = false, userHandle = null) {
+export function loadChallengesByPage (
+  page,
+  projectId,
+  status,
+  filterChallengeName = null,
+  selfService = false,
+  userHandle = null,
+  filterChallengeType = {},
+  filterDate = {},
+  filterSortBy = null,
+  filterSortOrder = null
+) {
   return (dispatch, getState) => {
     dispatch({
       type: LOAD_CHALLENGES_PENDING,
       challenges: [],
       projectId: projectId,
       status,
       filterChallengeName,
+      filterChallengeType,
+      filterDate,
+      filterSortBy,
+      filterSortOrder,
       perPage: PAGE_SIZE,
       page
     })
 
     const filters = {
-      sortBy: 'updated',
+      sortBy: 'startDate',
       sortOrder: 'desc'
     }
+    if (_.isObject(filterChallengeType) && filterChallengeType.value) {
+      filters['type'] = filterChallengeType.value
+    }
+    if (_.isObject(filterDate) && filterDate.startDateStart) {
+      filters['startDateStart'] = filterDate.startDateStart
+    }
+    if (_.isObject(filterDate) && filterDate.startDateEnd) {
+      filters['startDateEnd'] = filterDate.startDateEnd
+    }
+    if (_.isObject(filterDate) && filterDate.endDateStart) {
+      filters['endDateStart'] = filterDate.endDateStart
+    }
+    if (_.isObject(filterDate) && filterDate.endDateEnd) {
+      filters['endDateEnd'] = filterDate.endDateEnd
+    }
+    if (filterSortBy) {
+      filters['sortBy'] = filterSortBy
+    }
+    if (filterSortOrder) {
+      filters['sortOrder'] = filterSortOrder
+    }
     if (!_.isEmpty(filterChallengeName)) {
       filters['name'] = filterChallengeName
     }
@@ -113,14 +149,24 @@ export function loadChallengesByPage (page, projectId, status, filterChallengeNa
 /**
  * Loads active challenges of project
  */
-export function loadChallenges (projectId, status, filterChallengeName = null) {
+export function loadChallenges (
+  projectId,
+  status,
+  filterChallengeName = null,
+  filterChallengeType = null,
+  filterSortBy,
+  filterSortOrder
+) {
   return (dispatch, getState) => {
     dispatch({
       type: LOAD_CHALLENGES_PENDING,
       challenges: [],
       projectId: projectId ? `${projectId}` : '',
       status,
-      filterChallengeName
+      filterChallengeName,
+      filterChallengeType,
+      filterSortBy,
+      filterSortOrder
     })
 
     const filters = {}

src/assets/images/sort-icon.svg

@@ -1,144 +1,59 @@
 @import "../../../styles/includes";
 
 .item {
-  width: 100%;
   display: flex;
-  justify-content: space-between;
-  font-size: 16px;
+  font-size: 14px;
+  gap: 30px;
   height: 100%;
+  padding: 0 20px;
+
   .editingContainer {
     display: none;
   }
   .iconsContainer {
     display: flex;
   }
-  &:hover {@import "../../../styles/includes";
-
-    .item {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      font-size: 16px;
-      height: 100%;
-      &:hover {
-        cursor: pointer;
-        background-color: $lighter-gray;
-      }
-
-      .block {
-        color: $text-color;
-        word-break: break-all;
-      }
-
-      .light-text {
-        color: $light-text;
-      }
-
-      .linkGroup {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        padding-left: 20px;
-        padding-right: 20px;
-
-        .link,
-        .link:hover,
-        .link:visited {
-          color: $status-blue;
-          margin: 0;
-          text-decoration-line: underline;
-        }
-
-        span.link,
-        span.link:hover,
-        span.link:visited {
-          color: $inactive;
-          cursor: default;
-        }
-
-        &.onlyOne {
-          justify-content: center;
-        }
-      }
-
-
-    }
-
-    .icon {
-      vertical-align: bottom;
-    }
-
-    .faIcon {
-      color: $gray;
-      margin-right: 10px;
-      margin-left: 20px;
-    }
-
-    .faIconContainer {
-      flex:1;
-      width: 100%;
-      display: flex;
-      justify-items: flex-end;
-      align-items: center;
-
-      span {
-        flex-grow: 1;
-        flex-shrink: 0;
-        color: $text-color;
-      }
-    }
-
-    .col1 {
-      flex: 6;
-      flex-wrap: nowrap;
-      display: flex;
-      text-decoration: none;
-
-      .name {
-        flex:1;
-        display: flex;
-        flex-direction: column;
-      }
 
-      align-items: center;
-      padding-left: 20px;
-    }
+  .col1 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    .col2 {
-      flex: 2;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-decoration: none;
-    }
+  .col2 {
+    display: flex;
+    flex: 2;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    .col3 {
-      flex: 2;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
+  .col3 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    .col4 {
-      flex: 2;
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      align-items: center;
-      padding-right: 20px;
-      justify-content: center;
-    }
+  .col4 {
+    display: flex;
+    width: 30px;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    cursor: pointer;
-    background-color: $lighter-gray;
+  .col5 {
+    display: flex;
+    width: 80px;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    .editingContainer {
-      display: flex;
-    }
-    .iconsContainer {
-      display: none;
-    }
+  .col6 {
+    display: flex;
+    width: 40px;
+    flex-direction: column;
+    justify-content: center;
   }
 
   .block {
@@ -305,54 +220,6 @@
   }
 }
 
-.col1 {
-  flex: 6;
-  flex-wrap: nowrap;
-  display: flex;
-
-  .name {
-    flex:1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  align-items: center;
-  padding-left: 20px;
-}
-
-.col2 {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .statusText {
-    color: $text-color;
-    font-size: 14px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    //hyphens: auto;
-    max-width: 100px;
-  }
-}
-
-.col3 {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.col4 {
-  flex: 2;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  align-items: center;
-  padding-right: 20px;
-}
-
 .modalContainer {
   padding: 0;
   position: fixed;