Feature/four 16107

resources/js/components/shared/FilterTable.vue

@@ -462,6 +462,18 @@ export default {
   border-radius: 5px;
   padding: 7px;
 }
+.status-alternative-a {
+  background: rgba(224, 229, 232, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
+}
+.status-alternative-b {
+  background: rgba(249, 232, 195, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
+}
 @-moz-document url-prefix() {
   .pm-table-truncate {
     overflow: hidden;

resources/js/processes-catalogue/components/ProcessesCatalogue.vue

@@ -87,7 +87,7 @@ export default {
       category: null,
       selectedProcess: null,
       guidedTemplates: false,
-      numCategories: 15,
+      numCategories: 100,
       page: 1,
       key: 0,
       totalPages: 1,
@@ -115,7 +115,10 @@ export default {
           this.showMenu = false;
         }
       }
-    }
+    },
+    listCategories() {
+      this.$root.categories = this.listCategories;
+    },
   },
   computed: {
     showMobileMenuControl() {
@@ -265,6 +268,8 @@ export default {
     background-color: #F7F9FB;
     flex: 1;
     width: 315px;
+    height: 100%;
+    overflow-y: scroll;
   }
 
   @media (max-width: $lp-breakpoint) {

resources/js/processes-catalogue/components/menuCatologue.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <SearchCategories
-      ref="searchCategory"
-      :filter-pmql="onFilter"
-      class="hide-on-mobile"
-    />
     <div
       v-b-toggle.category-menu
       block

resources/js/processes-catalogue/components/utils/SearchCards.vue

@@ -1,26 +1,49 @@
 <template>
-  <div class="search-group">
-    <b-btn
-      class="btn btn-input"
-      :title="$t('Search Processes')"
-      @click="fetch()"
-    >
-      <i class="fas fa-search search-icon" />
-    </b-btn>
-    <b-form-input
-      id="search-box"
-      v-model="filter"
-      :placeholder="$t('Search Processes')"
-      @keyup.enter="fetch()"
-    />
-    <div v-if="filter">
-      <b-btn
-        class="px-1 btn btn-input"
-        v-b-tooltip.hover.bottom="$t('Clear Search')"
-        @click="clearSearch()"
-      >
-        <b-icon class="icon-close" icon="x" />
-      </b-btn>
+  <div class="search">
+    <b-input-group class="search-input-group">
+      <b-input-group-prepend >
+        <b-button
+          :title="$t('Search Processes')"
+          @click="fetch()"
+        >
+          <i class="fas fa-search search-icon" />
+        </b-button>
+      </b-input-group-prepend>
+
+      <b-form-input
+        class="search-box"
+        v-model="filter"
+        :placeholder="$t('Search categories and processes')"
+        @keyup.enter="fetch()"
+      />
+
+      <b-input-group-append>
+        <b-button
+          v-if="filter"
+          v-b-tooltip.hover.bottom="$t('Clear Search')"
+          @click="clearSearch()"
+        >
+          <b-icon class="icon-close" icon="x" />
+        </b-button>
+      </b-input-group-append>
+    </b-input-group>
+    <div v-if="filteredCategories !== null"
+         class="category-button-container">
+      <template v-if="filteredCategories.length > 0">
+        <b-button v-for="category in filteredCategories"
+          :key="category.id"
+          class="category-button"
+          variant="light"
+          @click="selectCategory(category)"
+        >
+        {{ category.name }}
+        </b-button>
+      </template>
+      <template v-else>
+        <div class="category-no-result">
+          {{ $t('No matching categories were found') }}
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -31,55 +54,80 @@ export default {
   data() {
     return {
       filter: "",
+      filteredCategories: null,
     };
   },
   methods: {
     fetch() {
       this.filterPmql(this.filter, true);
+      this.filterCategories();
     },
     clearSearch() {
       this.filter = "";
+      this.filterCategories();
       this.fetch();
     },
+    selectCategory(category) {
+      // Do not set the query if we are already on the route
+      if (this.$route.query.categoryId !== category.id) {
+        this.$router.push({name: "index", query: {categoryId: category.id}});
+      }
+      this.clearSearch();
+    },
+    filterCategories() {
+      if (!this.filter) {
+        this.filteredCategories = null;
+        return;
+      }
+      this.filteredCategories = this.$root.categories.filter((category) => {
+        return category.name
+          .toLowerCase()
+          .includes(this.filter.toLowerCase());
+      });
+    },
   },
 };
 </script>
 
-<style scoped>
-.search-group {
-  display: flex;
-  align-items: center;
-  margin-top: 15px;
-}
-.btn-input,
-#search-box {
-  border: none;
-  background-color: #f7f9fb;
+<style scoped lang="scss">
+.search-input-group {
+  margin-top: 10px;
+  .btn-secondary, input {
+    background-color: #E5EDF3;
+    border-color: #E5EDF3;
+    color: #5C5C63;
+  }
 }
-#search-box {
-  font-size: 19px;
+
+.category-button {
+  color: #50606D;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 32.077px;
-  letter-spacing: -0.38px;
+  border-radius: 6px;
+  border: 1px solid #CDDDEE;
+  text-transform: inherit;
+
+  margin-top: 10px;
+  margin-right: 5px;
 }
-.form-control:focus {
-  border: none !important;
-  box-shadow: none;
-}
-.btn-input {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0px;
-  font-size: 20px;
-  color: #6a7888;
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
+
+.category-button-container {
+  text-wrap: nowrap;
+  overflow-x: scroll
 }
-.icon-close {
-  width: 24px;
-  height: 24px;
+
+.category-no-result {
+  color: #50606D;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  border-radius: 6px;
+  border: 1px solid #CDDDEE;
+
+  text-align: center;
+  padding: 10px 0;
+  background: none;
+  margin-top: 10px;
 }
 </style>

resources/js/processes-catalogue/index.js

@@ -42,6 +42,7 @@ new Vue({
     return {
       permission: window.ProcessMaker.permission,
       isDocumenterInstalled: window.ProcessMaker.isDocumenterInstalled,
+      categories: [],
     };
   },
   methods: {

resources/js/requests/components/RequestsListing.vue

@@ -396,7 +396,22 @@ export default {
       };
     },
     formatProcessVersionAlternative(value) {
-      return `Alternative ${value}`;
+      let color = "primary";
+      let badge = "alternative-a";
+
+      if (value === "B") {
+        color = "secondary";
+        badge = "alternative-b";
+      } else if (value === null) {
+        return "-";
+      }
+
+      return `
+        <span 
+          class="badge badge-${color} status-${badge}"
+        >
+          Alternative ${value}
+        </span>`;
     },
     transform(dataInput) {
       const data = _.cloneDeep(dataInput);

resources/js/tasks/components/TasksList.vue

@@ -602,9 +602,12 @@ export default {
       if (props.status === "ACTIVE" && isSelfService) {
         color = "danger";
         label = "Self Service";
-      } else if (props.status === "ACTIVE") {
+      } else if (props.status === "ACTIVE" && props.advanceStatus === "open") {
         color = "success";
         label = "In Progress";
+      } else if (props.status === "ACTIVE" && props.advanceStatus === "overdue") {
+        color = "danger";
+        label = "Overdue";
       } else if (props.status === "CLOSED") {
         color = "primary";
         label = "Completed";

resources/lang/en.json

@@ -2282,5 +2282,7 @@
   "Type to search Screen": "Type to search Screen",
   "Type to search Chart": "Type to search Chart",
   "Open Case": "Open Case",
-  "Alternative": "Alternative"
+  "Alternative": "Alternative",
+  "No matching categories were found": "No matching categories were found",
+  "Search categories and processes": "Search categories and processes"
 }