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"
 }

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"
 }

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"
 }

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"
 }

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"
 }

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"
 }

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"
 }

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"
 }