FOUR-12112: Process Browser - List the cards

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

@@ -1,5 +1,82 @@
 <template>
-  <b-card>
-    title
-  </b-card>
+  <div class="container processList">
+    <b-card
+      v-for="process in processList"
+      :key="process.id"
+      class="card-process"
+    >
+      <b-card-text>
+        <img
+          class="icon-process"
+          src="/img/default-process.svg"
+          :alt="$t('Default Icon')"
+        >
+        <span class="title-process">{{ process.name }}</span>
+      </b-card-text>
+    </b-card>
+  </div>
 </template>
+
+<script>
+export default {
+  props: ["category"],
+  data() {
+    return {
+      processList: [],
+    };
+  },
+  watch: {
+    category() {
+      this.loadCard();
+    },
+  },
+  mounted() {
+    this.loadCard();
+  },
+  methods: {
+    loadCard() {
+      /* TODO complete the new API */
+      console.log(this.category.name);
+      ProcessMaker.apiClient
+        .get("processes")
+        .then((response) => {
+          this.processList = response.data.data;
+        });
+    },
+  },
+};
+</script>
+
+<style>
+.processList {
+  display: flex;
+  flex-wrap: wrap;
+}
+.card-process {
+  width: 350px;
+  height: 240px;
+  margin-top: 1rem;
+  margin-right: 1rem;
+  border-radius: 16px;
+}
+.card-text {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  padding-top: 15%;
+}
+.icon-process {
+  font-size: 68px;
+  margin-bottom: 1rem;
+}
+.title-process {
+  color: #556271;
+  font-family: Poppins;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.4px;
+  text-transform: uppercase;
+}
+</style>

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

@@ -7,6 +7,8 @@
         <MenuCatologue
           :data="listCategories"
           :select="selectCategorie"
+          title="Avaible Processses"
+          preicon="fas fa-play-circle"
           class="mt-3"
         />
         <ul>
@@ -23,12 +25,16 @@
       </b-col>
       <b-col cols="10">
         <div
-          v-if="!showWizardTemplates && !fields.length"
+          v-if="!showWizardTemplates && !showCardProcesses"
           class="d-flex justify-content-center py-5"
         >
           <CatalogueEmpty />
         </div>
         <wizard-templates v-if="showWizardTemplates" />
+        <CardProcess
+          v-if="showCardProcesses"
+          :category="category"
+        />
       </b-col>
     </b-row>
   </div>
@@ -37,20 +43,22 @@
 <script>
 import MenuCatologue from "./menuCatologue.vue";
 import CatalogueEmpty from "./CatalogueEmpty.vue";
-
+import CardProcess from "./CardProcess.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
 import WizardTemplates from "./WizardTemplates.vue";
 
 export default {
   components: {
-    MenuCatologue, CatalogueEmpty, Breadcrumbs, WizardTemplates,
+    MenuCatologue, CatalogueEmpty, Breadcrumbs, CardProcess, WizardTemplates,
   },
   data() {
     return {
       listCategories: [],
       fields: [],
       wizardTemplates: [],
       showWizardTemplates: false,
+      showCardProcesses: false,
+      category: null,
     };
   },
   mounted() {
@@ -65,10 +73,13 @@ export default {
         });
     },
     selectCategorie(value) {
-      console.log(value);
+      this.category = value;
+      this.showCardProcesses = true;
+      this.showWizardTemplates = false;
     },
     wizardTemplatesSelected() {
       this.showWizardTemplates = true;
+      this.showCardProcesses = false;
     },
   },
 };

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

@@ -1,32 +1,31 @@
 <template>
-    <div class="container wizard-template-container">
-        <template-search
-        type="wizard"
-        package-ai="false"
-        :component="currentComponent" 
-        @show-details="showDetails($event)"
-        :showTemplateOptionsActionBar="false"
-        ></template-search>
-    </div>
+  <div class="container wizard-template-container">
+    <template-search
+      type="wizard"
+      package-ai="false"
+      :component="currentComponent"
+      :show-template-options-action-bar="false"
+      @show-details="showDetails($event)"
+    />
+  </div>
 </template>
 
 <script>
 import TemplateSearch from "../../components/templates/TemplateSearch.vue";
 
 export default {
-    components: { TemplateSearch },
-    data() {
-        return {
-            currentComponent: 'template-select-card',
-            templateData: {},
-        }
+  components: { TemplateSearch },
+  data() {
+    return {
+      currentComponent: "template-select-card",
+      templateData: {},
+    };
+  },
+  methods: {
+    showDetails($event) {
+      this.templateData = $event;
+      this.currentComponent = "template-details";
     },
-    methods: {
-        showDetails($event) {
-            this.templateData = $event;
-            this.currentComponent = 'template-details';
-      },
-    }    
-}
+  },
+};
 </script>
-

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

@@ -7,8 +7,8 @@
       class="m-1"
     >
       <div class="d-flex justify-content-between pl-3 pr-3">
-        <i class="fas fa-play-circle" />
-        {{ $t("Avaible Processses") }}
+        <i :class="preicon" />
+        {{ $t(title) }}
         <i class="fas fa-sort-down" />
       </div>
     </div>
@@ -33,7 +33,7 @@
 
 <script>
 export default {
-  props: ["data", "select"],
+  props: ["data", "select", "title", "preicon"],
   methods: {
     selectItem(item) {
       this.setSelectItem(item.name);