Merge pull request #5376 from ProcessMaker/feature/FOUR-9486

feature/FOUR-9486: IT5 Default Welcome Screens

ProcessMaker/Http/Controllers/Designer/DesignerController.php

@@ -24,7 +24,12 @@ public function index(Request $request)
             return redirect()->route($redirect);
         }
 
-        return view('designer.index');
+
+        $listConfig = (object) [
+            'status' => $request->input('status'),
+        ];
+
+        return view('designer.index', compact('listConfig'));
     }
 
     private function checkAuth()

resources/js/processes/components/CreateProcessModal.vue

@@ -146,6 +146,12 @@
         }
       },
     },
+    mounted() {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (searchParams.size > 0 && searchParams.get("create") === "true") {
+          this.show();
+      };
+    },
     methods: {
       onShown() {
         if (this.generativeProcessData) {

resources/js/processes/designer/AssetButtons.vue

@@ -0,0 +1,84 @@
+<template>
+  <b-card-text>
+    <div class="button-container">
+      <b-button
+        size="sm"
+        class="custom-button custom-text"
+        block
+        @click="openAsset(urlAsset)"
+      >
+        {{ $t(asset_name_new) }}
+        <i class="fas fa-arrow-right ml-2 align-middle" />
+      </b-button>
+    </div>
+    <div class="button-container">
+      <b-button
+        size="sm"
+        class="custom-button custom-text"
+        block
+        @click="callURL()"
+      >
+        {{ $t(asset_name_all) }}
+        <i class="fas fa-arrow-right ml-2 align-middle" />
+      </b-button>
+    </div>
+  </b-card-text>
+</template>
+
+<script>
+export default {
+  props: {
+    asset_name_all: String,
+    urlPath: String,
+    urlAsset: String,
+    asset_name: String,
+    asset_name_new: String,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    callURL() {
+      window.location.href = window.location.origin + this.urlPath;
+    },
+    openAsset(url) {
+      window.open(url, "_blank");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-container {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.b-card {
+  border: none;
+  padding: 0;
+}
+.b-card .btn {
+  width: 100%;
+}
+.custom-button {
+  display: flex;
+  padding: 8px 12px;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #b7d8ff;
+  background: #d1e3fe;
+}
+.custom-text {
+  color: #5e6469;
+  font-family: "Open Sans", sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.28px;
+}
+</style>

resources/js/processes/designer/Assets.vue

@@ -5,93 +5,164 @@
         {{ $t("Assets") }}
       </b-navbar-brand>
     </b-navbar>
+
     <div class="mt-3">
       <b-card-group deck>
         <b-card
+          v-for="(asset, index) in assetsCore"
+          :key="index"
           bg-variant="light"
           class="text-center"
+          @click="toggleButtons(index, 'core')"
         >
-          <asset
-            color="#4DA2EB"
-            icon="fas fa-play-circle"
-            asset_name="Processes"
-          />
-        </b-card>
-        <b-card
-          bg-variant="light"
-          class="text-center"
-        >
-          <asset
-            color="#8EB86F"
-            icon="fas fa-file-alt"
-            asset_name="Screens"
-          />
-        </b-card>
-        <b-card
-          bg-variant="light"
-          class="text-center"
-        >
-          <asset
-            color="#F7CF5D"
-            icon="fas fa-code"
-            asset_name="Scripts"
-          />
+          <template v-if="!showButtonsCore[index]">
+            <asset
+              :color="asset.color"
+              :icon="asset.icon"
+              :asset_name="asset.asset_name"
+            />
+          </template>
+
+          <template v-if="showButtonsCore[index]">
+            <asset-buttons
+              :asset_name_all="asset.asset_name_all"
+              :asset_name_new="asset.asset_name_new"
+              :url-path="asset.urlPath"
+              :url-asset="asset.urlAsset"
+            />
+          </template>
         </b-card>
       </b-card-group>
     </div>
     <div class="mt-3">
       <b-card-group deck>
         <b-card
+          v-for="(asset, index) in assetsPackage"
+          :key="index"
           bg-variant="light"
           class="text-center"
+          @click="toggleButtons(index, 'package')"
         >
-          <asset
-            color="#712F4A"
-            icon="fas fa-table"
-            asset_name="Decision Tables"
-          />
-        </b-card>
-        <b-card
-          bg-variant="light"
-          class="text-center"
-        >
-          <asset
-            color="#D66A5F"
-            icon="fas fa-database"
-            asset_name="Collections"
-          />
-        </b-card>
-        <b-card
-          bg-variant="light"
-          class="text-center"
-        >
-          <asset
-            color="#B5D3E7"
-            icon="fas fa-share-alt"
-            asset_name="Data Connectors"
-          />
+          <template v-if="!showButtonsPackage[index]">
+            <asset
+              :color="asset.color"
+              :icon="asset.icon"
+              :asset_name="asset.asset_name"
+            />
+          </template>
+
+          <template v-if="showButtonsPackage[index]">
+            <asset-buttons
+              :asset_name_all="asset.asset_name_all"
+              :asset_name_new="asset.asset_name_new"
+              :url-path="asset.urlPath"
+              :url-asset="asset.urlAsset"
+            />
+          </template>
         </b-card>
       </b-card-group>
     </div>
   </div>
 </template>
-
 <script>
 import Asset from "./Asset.vue";
+import AssetButtons from "./AssetButtons.vue";
 
 export default {
-  components: { Asset },
+  components: {
+    Asset,
+    AssetButtons,
+  },
   data() {
-    return { };
+    return {
+      urlPath: "",
+      assetsCore: [
+        {
+          color: "#4DA2EB",
+          icon: "fas fa-play-circle",
+          asset_name: "Processes",
+          asset_name_all: "See All Processes",
+          asset_name_new: "New Process",
+          urlPath: "/processes",
+          urlAsset: "/processes?create=true",
+        },
+        {
+          color: "#8EB86F",
+          icon: "fas fa-file-alt",
+          asset_name: "Screens",
+          asset_name_all: "See All Screens",
+          asset_name_new: "New Screen",
+          urlPath: "/designer/screens",
+          urlAsset: "/designer/screens?create=true",
+        },
+        {
+          color: "#F7CF5D",
+          icon: "fas fa-code",
+          asset_name: "Scripts",
+          asset_name_all: "See All Scripts",
+          asset_name_new: "New Script",
+          urlPath: "/designer/scripts",
+          urlAsset: "/designer/scripts?create=true",
+        },
+      ],
+      assetsPackage: [
+        {
+          color: "#712F4A",
+          icon: "fas fa-table",
+          asset_name: "Decision Tables",
+          asset_name_all: "See All Decision Tables",
+          asset_name_new: "New Decision Table",
+          urlPath: "/designer/decision-tables",
+          urlAsset: "/designer/decision-tables?create=true",
+        },
+        {
+          color: "#D66A5F",
+          icon: "fas fa-database",
+          asset_name: "Collections",
+          asset_name_all: "See All Collections",
+          asset_name_new: "New Collection",
+          urlPath: "/collections",
+          urlAsset: "/collections?create=true",
+        },
+        {
+          color: "#B5D3E7",
+          icon: "fas fa-share-alt",
+          asset_name: "Data Connectors",
+          asset_name_all: "See All Data Connectors",
+          asset_name_new: "New Data Connector",
+          urlPath: "/designer/data-sources",
+          urlAsset: "/designer/data-sources?create=true",
+        },
+      ],
+      showButtonsCore: new Array(3).fill(false),
+      showButtonsPackage: new Array(3).fill(false),
+    };
+  },
+  methods: {
+    toggleButtons(index, section) {
+      if (section === "core") {
+        this.$set(this.showButtonsCore, index, !this.showButtonsCore[index]);
+      }
+      if (section === "package") {
+        this.$set(this.showButtonsPackage, index, !this.showButtonsPackage[index]);
+      }
+    },
   },
 };
 </script>
 
 <style scoped>
 .assets {
-  background-color: #F9F9F9;
+  background-color: #f9f9f9;
+}
+.b-card {
+  margin: 5px;
+  border: none;
+  padding: 0;
 }
-.card {
-  border-radius: 8px;
+.b-card-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 </style>