Make text clickable in Help section

frontend/src/components/help/help.html

@@ -11,42 +11,26 @@
         <v-toolbar-title>Help</v-toolbar-title>
       </v-toolbar>
       <v-list two-line subheader>
-        <v-list-tile>
-          <v-list-tile-avatar>
-            <v-icon class="primary lighten-2" dark>
-              fas fa-code
-            </v-icon>
-          </v-list-tile-avatar>
-          <v-list-tile-content>
-            <v-list-tile-title>API documentation</v-list-tile-title>
-            <v-list-tile-sub-title>Documentation about different endpoints of metageneDB API</v-list-tile-sub-title>
-          </v-list-tile-content>
-          <v-list-tile-avatar>
-            <v-btn href="/api/swagger" flat icon target="_blank">
-              <v-icon class="tertiary--text">
-                open_in_new
+        <template v-for="(item, index) in help_links">
+          <v-list-tile :key="item.title">
+            <v-list-tile-avatar>
+              <v-icon class="primary lighten-2" dark>
+                {{ item.icon }}
               </v-icon>
-            </v-btn>
-          </v-list-tile-avatar>
-        </v-list-tile>
-        <v-list-tile>
-          <v-list-tile-avatar>
-            <v-icon class="primary lighten-2" dark>
-              fab fa-gitlab
-            </v-icon>
-          </v-list-tile-avatar>
-          <v-list-tile-content>
-            <v-list-tile-title>GitLab repository</v-list-tile-title>
-            <v-list-tile-sub-title>Access to source code of the project</v-list-tile-sub-title>
-          </v-list-tile-content>
-          <v-list-tile-avatar>
-            <v-btn href="/api/swagger" flat icon target="_blank">
-              <v-icon class="tertiary--text">
-                open_in_new
-              </v-icon>
-            </v-btn>
-          </v-list-tile-avatar>
-        </v-list-tile>
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title><a :href="item.url" target="_blank">{{ item.title }}</a></v-list-tile-title>
+              <v-list-tile-sub-title><a :href="item.url" target="_blank">{{ item.info }}</a></v-list-tile-sub-title>
+            </v-list-tile-content>
+            <v-list-tile-avatar>
+              <v-btn :href="item.url" flat icon target="_blank">
+                <v-icon class="tertiary--text">
+                  open_in_new
+                </v-icon>
+              </v-btn>
+            </v-list-tile-avatar>
+          </v-list-tile>
+        </template>
       </v-list>
     </v-card>
   </v-dialog>

frontend/src/components/help/help.js

@@ -4,4 +4,22 @@ export default {
       dialog: false,
     }
   },
+  computed: {
+    help_links() {
+      return [
+        {
+          title: 'API documentation',
+          info: 'Documentation about different endpoints of metageneDB API',
+          icon: 'fas fa-code',
+          url: '/api/swagger',
+        },
+        {
+          title: 'GitLab repository',
+          info: 'Access to source code of the project',
+          icon: 'fab fa-gitlab',
+          url: 'https://gitlab.pasteur.fr/metagenomics/metagenedb',
+        },
+      ];
+    },
+  }
 }
\ No newline at end of file

frontend/src/components/help/help.scss

+a {
+    text-decoration: none;
+    color: inherit;
+}
\ No newline at end of file

frontend/src/components/help/help.vue

 <template src="./help.html" lang="html"></template>
-<script src="./help.js" lang="js"></script>
+<script src="./help.js" lang="js"></script>
\ No newline at end of file
+<style src="./help.scss" lang="scss" scoped></style>
\ No newline at end of file