♻️ : migrate module-description page

src/main/client/app/app.vue

@@ -25,4 +25,5 @@
   @import "~@/assets/css/style.css";
   @import "~@/assets/css/color_2.css";
   @import "~@/assets/css/responsive.css";
+  @import "~@/assets/css/github-markdown.css";
 </style>

src/main/client/app/main.js

@@ -4,6 +4,8 @@ import { Multiselect } from 'vue-multiselect';
 import fontawesomeConfig from '@/shared/config/fontawesome-config';
 import bootstrapVueConfig from '@/shared/config/bootstrap-vue-config';
 
+import initFilters from '@/shared/filters';
+
 import {
   AppDefaultLayout,
   AppErrorLayout,
@@ -17,6 +19,9 @@ fontawesomeConfig.init();
 bootstrapVueConfig.init();
 Vue.use(Multiselect);
 
+// filters
+initFilters();
+
 // layout definitions
 Vue.component('app-default-layout', AppDefaultLayout);
 Vue.component('app-error-layout', AppErrorLayout);

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

@@ -1,13 +1,105 @@
 <template>
-  <div>This is not the final module description {{ $route.params.moduleId }} page xD</div>
+  <div
+    v-if="module"
+    class="block module_description"
+  >
+    <section class="block_head row">
+      <div class="col-md-8">
+        <div class="row">
+          <div class="col-md-2">
+            <img
+              :src="imageUrl"
+              :alt="module.mainProvider"
+            >
+          </div>
+          <div class="col-md-10">
+            <h1>
+              <span>{{ module.name }}</span>
+              <app-cli-badge
+                :cli="module.terraformImage"
+                badge-style="for-the-badge"
+              />
+            </h1>
+            <div class="provider">
+              {{ module.id }}
+            </div>
+            <div class="desc">
+              {{ module.description }}
+            </div>
+            <hr>
+            <div class="metadata">
+              <p>
+                Published <strong>{{ module.moduleMetadata.createdAt | dateTimeLong }}</strong>
+                by <a href="#">{{ module.moduleMetadata.createdBy.username }}</a>
+              </p>
+              <p v-if="module.moduleMetadata.updatedAt">
+                Last modified <b>{{ module.moduleMetadata.updatedAt | dateTimeLong }}</b>
+                by <a href="#">{{ module.moduleMetadata.updatedBy.username }}</a>
+              </p>
+              <p>Source: <a :href="module.gitRepositoryUrl">{{ module.gitRepositoryUrl }}</a></p>
+              <p v-if="module.estimatedMonthlyCost">
+                Estimated monthly cost: ${{ module.estimatedMonthlyCost }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section>
+      <b-tabs>
+        <b-tab active>
+          <template slot="title">
+            <i class="fab fa-markdown" /> Readme
+          </template>
+          <app-readme :module-id="module.id" />
+        </b-tab>
+        <b-tab v-if="module.estimatedMonthlyCostDescription">
+          <template slot="title">
+            <i class="fab fa-markdown" /> Cost Of Ownership
+          </template>
+          <b-container fluid>
+            <app-markdown :content="module.estimatedMonthlyCostDescription" />
+          </b-container>
+        </b-tab>
+      </b-tabs>
+    </section>
+  </div>
 </template>
 
 <script>
+  import axios from 'axios';
+
+  import { AppCliBadge, AppMarkdown } from '@/shared/components';
+
+  import AppReadme from './readme.vue';
+
   export default {
     name: 'AppModuleDescription',
-  };
-</script>
 
-<style scoped>
+    components: {
+      AppCliBadge,
+      AppReadme,
+      AppMarkdown,
+    },
 
-</style>
+    data: function data() {
+      return {
+        module: null,
+        moduleId: this.$route.params.moduleId,
+      };
+    },
+
+    computed: {
+      imageUrl() {
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/assets/images/providers/${this.module.mainProvider}.png`);
+      },
+    },
+
+    async created() {
+      const url = `/api/modules/${this.moduleId}`;
+      const response = await axios.get(url);
+      this.module = response.data;
+    },
+  };
+</script>

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

@@ -0,0 +1,45 @@
+<template id="readme">
+  <b-container fluid>
+    <b-spinner
+      v-if="!loaded"
+      label="Loading..."
+      class="m-5"
+      style="height: 2.5rem; width: 2.5rem"
+    />
+    <div
+      v-if="loaded"
+      class="markdown-body"
+    >
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="content" />
+    </div>
+  </b-container>
+</template>
+
+<script>
+  import axios from 'axios';
+
+  import marked from 'marked';
+
+  export default {
+    name: 'AppReadme',
+
+    props: {
+      moduleId: {
+        type: String,
+        required: true,
+      },
+    },
+
+    data: () => ({
+      content: '',
+      loaded: false,
+    }),
+
+    async created() {
+      const result = await axios.get(`/api/modules/${this.moduleId}/readme`);
+      this.content = marked(result.data);
+      this.loaded = true;
+    },
+  };
+</script>

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

@@ -5,3 +5,4 @@ export { default as AppSideBar } from '@/shared/components/sidebar/side-bar.vue'
 export { default as AppBreadcrumb } from '@/shared/components/breadcrumb/breadcrumb.vue';
 export { default as AppCliBadge } from '@/shared/components/cli-badge.vue';
 export { default as AppFormTypeahead } from '@/shared/components/form-typeahead.vue';
+export { default as AppMarkdown } from '@/shared/components/markdown.vue';

src/main/client/app/shared/components/markdown.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="markdown-body">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-html="convertedContent" />
+  </div>
+</template>
+
+<script>
+  import marked from 'marked';
+
+  export default {
+    name: 'Markdown',
+
+    props: {
+      content: {
+        type: String,
+        required: true,
+      },
+    },
+
+    computed: {
+      convertedContent() {
+        if (typeof this.content === 'undefined') {
+          return '';
+        }
+        return marked(this.content);
+      },
+    },
+  };
+</script>

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

@@ -13,6 +13,8 @@ import {
   LayoutPlugin,
   NavbarPlugin,
   NavPlugin,
+  SpinnerPlugin,
+  TabsPlugin,
   ToastPlugin,
 } from 'bootstrap-vue';
 import { Multiselect } from 'vue-multiselect';
@@ -31,6 +33,8 @@ export default {
     Vue.use(ToastPlugin);
     Vue.use(NavbarPlugin);
     Vue.use(DropdownPlugin);
+    Vue.use(SpinnerPlugin);
+    Vue.use(TabsPlugin);
     Vue.use(NavPlugin);
     Vue.use(BreadcrumbPlugin);
 

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

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+function formatDate(value, options) {
+  if (!value) return '';
+  return new Intl.DateTimeFormat(undefined, options).format(Date.parse(value));
+}
+
+export default function initFilters() {
+
+  // display date like "05/04/2020, 4:20:20 AM"
+  Vue.filter('dateTime', (value) => formatDate(value, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+  }));
+
+  // display date like "May 04, 2020, 4:20:20 AM"
+  Vue.filter('dateTimeLong', (value) => formatDate(value, {
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+  }));
+
+}

src/main/java/io/codeka/gaia/modules/controller/ModuleRestController.java

@@ -1,6 +1,7 @@
 package io.codeka.gaia.modules.controller;
 
 import io.codeka.gaia.modules.bo.TerraformModule;
+import io.codeka.gaia.modules.repository.TerraformModuleGitRepository;
 import io.codeka.gaia.modules.repository.TerraformModuleRepository;
 import io.codeka.gaia.teams.User;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -9,8 +10,11 @@
 import org.springframework.web.bind.annotation.*;
 
 import javax.validation.Valid;
+import javax.ws.rs.Produces;
+import javax.ws.rs.core.MediaType;
 import java.time.LocalDateTime;
 import java.util.List;
+import java.util.Optional;
 import java.util.UUID;
 
 /**
@@ -23,9 +27,12 @@ public class ModuleRestController {
 
     private TerraformModuleRepository moduleRepository;
 
+    private TerraformModuleGitRepository moduleGitRepository;
+
     @Autowired
-    public ModuleRestController(TerraformModuleRepository moduleRepository) {
+    public ModuleRestController(TerraformModuleRepository moduleRepository, TerraformModuleGitRepository moduleGitRepository) {
         this.moduleRepository = moduleRepository;
+        this.moduleGitRepository = moduleGitRepository;
     }
 
     @GetMapping
@@ -69,4 +76,12 @@ public TerraformModule saveModule(@PathVariable String id, @RequestBody @Valid T
         return moduleRepository.save(module);
     }
 
-}
+    @GetMapping("/{id}/readme")
+    @Produces(MediaType.TEXT_PLAIN)
+    public Optional<String> readme(@PathVariable String id) {
+        var module = moduleRepository.findById(id).orElseThrow();
+        return moduleGitRepository.getReadme(module);
+    }
+
+
+}

src/main/java/io/codeka/gaia/modules/controller/ModulesMVCController.java

@@ -41,13 +41,6 @@ public String description(@PathVariable String id, Model model) {
         return "module_description";
     }
 
-    @GetMapping("/modules/{id}/readme")
-    @Produces(MediaType.TEXT_PLAIN)
-    @ResponseBody
-    public Optional<String> readme(@PathVariable String id) {
-        var module = terraformModuleRepository.findById(id).orElseThrow();
-        return terraformModuleGitRepository.getReadme(module);
-    }
 
 }