💄 : new module page list

src/main/client/app/pages/modules/module-description.vue

@@ -98,7 +98,7 @@
     computed: {
       imageUrl() {
         // eslint-disable-next-line global-require, import/no-dynamic-require
-        return require(`@/assets/images/providers/${this.module.mainProvider}.png`);
+        return require(`@/assets/images/providers/${this.module.mainProvider || 'unknown'}.png`);
       },
     },
 

src/main/client/app/pages/modules/modules.vue

@@ -13,51 +13,63 @@
       <b-card
         v-for="module in modules"
         :key="module.id"
-        :title="module.name"
+        :header-class="module.mainProvider || 'unknown'"
         class="moduleCard"
+        no-body
       >
-        <b-card-text>
+        <template v-slot:header>
+          <h1>{{ module.name }}</h1>
+          <app-provider-logo
+            :provider="module.mainProvider"
+            size="40px"
+          />
+        </template>
+
+        <b-card-body>
+          <p>{{ module.description }}</p>
+        </b-card-body>
+        <b-card-footer class="metadata">
           <app-cli-badge
+            class="app-cli-badge"
             :cli="module.terraformImage"
             badge-style="flat-square"
-            style="margin-bottom: .75rem"
           />
-          <p>{{ module.description }}</p>
-
           <p v-if="module.estimatedMonthlyCost">
-            Estimated monthly cost :
-            <b-badge variant="info">
-              {{ module.estimatedMonthlyCost }} $
-            </b-badge>
+            <font-awesome-icon icon="dollar-sign" /> {{ module.estimatedMonthlyCost }} / month
           </p>
-        </b-card-text>
-
-        <b-button
-          :to="{ name: 'module', params: { moduleId: module.id }}"
-          title="Edit this module"
-          variant="primary"
-          class="mr-1"
-        >
-          <font-awesome-icon icon="edit" />
-        </b-button>
-
-        <b-button
-          :to="{ name: 'module_description', params: { moduleId: module.id }}"
-          title="Detail of this module"
-          variant="primary"
-          class="mr-1"
-        >
-          <font-awesome-icon icon="info" />
-        </b-button>
-
-        <b-button
-          title="Run this module"
-          variant="primary"
-          class="mr-1"
-          @click="createStack(module.id)"
-        >
-          <font-awesome-icon icon="rocket" />
-        </b-button>
+          <p>
+            <font-awesome-icon icon="user" /> {{ module.moduleMetadata.createdBy.username }}
+          </p>
+        </b-card-footer>
+
+        <b-card-footer>
+          <b-button
+            :to="{ name: 'module', params: { moduleId: module.id }}"
+            title="Edit this module"
+            variant="primary"
+            class="mr-1"
+          >
+            <font-awesome-icon icon="edit" />
+          </b-button>
+
+          <b-button
+            :to="{ name: 'module_description', params: { moduleId: module.id }}"
+            title="Detail of this module"
+            variant="primary"
+            class="mr-1"
+          >
+            <font-awesome-icon icon="info" />
+          </b-button>
+
+          <b-button
+            title="Run this module"
+            variant="primary"
+            class="mr-1"
+            @click="createStack(module.id)"
+          >
+            <font-awesome-icon icon="rocket" />
+          </b-button>
+        </b-card-footer>
       </b-card>
     </b-card-group>
   </div>
@@ -66,13 +78,14 @@
 <script>
   import { getModules } from '@/shared/api/modules-api';
 
-  import { AppCliBadge } from '@/shared/components';
+  import { AppCliBadge, AppProviderLogo } from '@/shared/components';
 
   export default {
     name: 'AppModules',
 
     components: {
       AppCliBadge,
+      AppProviderLogo,
     },
 
     data: function data() {
@@ -98,3 +111,51 @@
 
   };
 </script>
+
+<style scoped>
+  p {
+    margin-bottom: 0;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+  }
+
+  .card-header h1 {
+    color: white;
+  }
+
+  .card-header.unknown {
+    background-color: #4f55e3;
+  }
+
+  .card-header.google {
+    background-color: #2f6fd8;
+  }
+
+  .card-header.docker {
+    background-color: #2496ed;
+  }
+
+  .card-header.aws {
+    background-color: #ea8c00;
+  }
+
+  .card-header.azurerm {
+    background-color: #007cc1;
+  }
+
+  .metadata {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .app-cli-badge {
+    height: 100%;
+    margin-right: 0.75rem;
+  }
+
+</style>

src/main/client/app/shared/components/index.js

@@ -7,3 +7,4 @@ export { default as AppCliBadge } from '@/shared/components/cli-badge/cli-badge.
 export { default as AppFormTypeahead } from '@/shared/components/typeahead/form-typeahead.vue';
 export { default as AppMarkdown } from '@/shared/components/markdown/markdown.vue';
 export { default as AppConsole } from '@/shared/components/console/console.vue';
+export { default as AppProviderLogo } from '@/shared/components/providers/provider-logo.vue';

src/main/client/app/shared/components/providers/provider-logo.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="provider || 'unknown'">
+    <b-img
+      :src="imageUrl"
+      class="rounded-logo"
+      rounded="circle"
+      :width="size"
+      :height="size"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ProviderLogo',
+
+    props: {
+      provider: {
+        type: String,
+        required: true,
+      },
+      size: {
+        type: String,
+        default: '80px',
+      },
+    },
+
+    computed: {
+      imageUrl() {
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/assets/images/providers/logos/${this.provider || 'unknown'}.png`);
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .rounded-logo {
+    background-color: white;
+  }
+
+  .unknown {
+    background-color: #4f55e3;
+  }
+
+  .google {
+    background-color: #2f6fd8;
+  }
+
+  .docker {
+    background-color: #2496ed;
+  }
+
+  .aws {
+    background-color: #ea8c00;
+  }
+
+  .azurerm {
+    background-color: #007cc1;
+  }
+</style>

src/main/client/app/shared/config/bootstrap-vue-config.js

@@ -10,6 +10,7 @@ import {
   FormInputPlugin,
   FormPlugin,
   FormTextareaPlugin,
+  ImagePlugin,
   InputGroupPlugin,
   LayoutPlugin,
   ModalPlugin,
@@ -35,6 +36,7 @@ export default {
     Vue.use(FormInputPlugin);
     Vue.use(FormPlugin);
     Vue.use(FormTextareaPlugin);
+    Vue.use(ImagePlugin);
     Vue.use(InputGroupPlugin);
     Vue.use(LayoutPlugin);
     Vue.use(ModalPlugin);

src/main/client/app/shared/config/fontawesome-config.js

@@ -11,6 +11,7 @@ import {
   faChevronUp,
   faCircleNotch,
   faCog,
+  faDollarSign,
   faEdit,
   faFile,
   faFolder,
@@ -55,6 +56,7 @@ export default {
   init: () => {
     library.add(
       faCalendarAlt,
+      faDollarSign,
       faEdit,
       faUser,
       faLock,