From f7190ffabb6b14410a5fd208533db2ca526ca094 Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Wed, 28 Aug 2019 08:33:00 +0200
Subject: [PATCH] :recycle: : use boostrap-vue components for module form

---
 src/main/resources/templates/module.html | 123 ++++++++++++-----------
 1 file changed, 64 insertions(+), 59 deletions(-)

diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html
index 1bd34501b..c4ea05b86 100644
--- a/src/main/resources/templates/module.html
+++ b/src/main/resources/templates/module.html
@@ -44,61 +44,60 @@ <h2>Module {{module.name}}</h2>
         </div>
 
         <div class="block_content">
-            <form v-on:submit.prevent="post">
-                <div class="form-row">
-                    <div class="form-group col-md-11">
-                        <label for="name">Name</label>
-                        <input type="text" class="form-control" id="name" v-model="module.name">
-                    </div>
-                    <div class="form-group col-md-1">
-                        <label for="cliVersion">CLI Version</label>
-                        <b-form-select class="form-control" id="cliVersion" v-model="module.cliVersion" :options="versions"></b-form-select>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="description">Description</label>
-                    <input type="text" class="form-control" id="description" v-model="module.description">
-                </div>
+            <form>
+                <b-form-row>
+                    <b-col cols="11">
+                        <b-form-group label="Name" description="The name of your module">
+                            <b-input v-model="module.name"></b-input>
+                        </b-form-group>
+                    </b-col>
+                    <b-col>
+                        <b-form-group label="CLI Version">
+                            <b-form-select v-model="module.cliVersion" :options="versions"></b-form-select>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+                <b-form-group label="Description" description="The description of your module">
+                    <b-input v-model="module.description"></b-input>
+                </b-form-group>
 
                 <b-form-row>
                     <b-col cols="3">
-                        <b-form-group id="estimatedMonthlyCost-fieldSet"
-                                      label="Estimated monthly cost"
-                                      label-for="estimatedMonthlyCost">
+                        <b-form-group label="Estimated monthly cost">
                             <b-input-group append="$">
-                                <b-form-input id="estimatedMonthlyCost" v-model="module.estimatedMonthlyCost"></b-form-input>
+                                <b-form-input v-model="module.estimatedMonthlyCost"></b-form-input>
                             </b-input-group>
 
                         </b-form-group>
                     </b-col>
                 </b-form-row>
 
-                <b-form-group id="estimatedMonthlyCostDescription-fieldSet"
-                              label="Description of estimated monthly cost"
-                              label-for="estimatedMonthlyCostDescription">
+                <b-form-group label="Description of estimated monthly cost">
                     <b-input-group>
                         <b-input-group-text slot="append"><i class="fab fa-markdown"></i></b-input-group-text>
-                        <b-form-textarea id="estimatedMonthlyCostDescription" v-model="module.estimatedMonthlyCostDescription"></b-form-textarea>
+                        <b-form-textarea v-model="module.estimatedMonthlyCostDescription"></b-form-textarea>
                     </b-input-group>
                 </b-form-group>
 
-                <div class="form-row">
-                    <div class="form-group col">
-                        <label for="gitRepositoryUrl">Git Repository URL</label>
-                        <input type="text" class="form-control" id="gitRepositoryUrl" v-model="module.gitRepositoryUrl">
-                    </div>
-                    <div class="form-group col">
-                        <label for="directory">Git repository directory</label>
-                        <input type="text" class="form-control" id="directory" v-model="module.directory">
-                    </div>
-                </div>
+                <b-form-row>
+                    <b-col>
+                        <b-form-group label="Git Repository URL" description="The URL of the module's git repository">
+                            <b-input v-model="module.gitRepositoryUrl"></b-input>
+                        </b-form-group>
+                    </b-col>
+                    <b-col>
+                        <b-form-group label="Git repository directory" description="The sub-directory of the module's code inside the repository (leave empty if root)">
+                            <b-input v-model="module.directory"></b-input>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
 
                 <h2>Authorized Teams</h2>
 
-                <div class="form-row">
-                    <div class="form-group col-md-6">
+                <b-form-row>
+                    <b-col cols="6">
+                    <b-form-group>
                         <vue-multiselect
-
                             :multiple="true"
                             label="id"
                             track-by="id"
@@ -106,34 +105,40 @@ <h2>Authorized Teams</h2>
                             placeholder="Select teams"
                             v-model="module.authorizedTeams"
                             :options="teams"></vue-multiselect>
-                    </div>
-                </div>
+                    </b-form-group>
+                    </b-col>
+                </b-form-row>
 
-                <h2>Variables <button type="button" class="btn btn-success" @click="addVar()">+</button></h2>
+                <h2>Variables <b-button variant="success" @click="addVar()"><i class="fas fa-plus"></i></b-button></h2>
 
-                <div class="form-row align-items-end" v-for="(modVar,modVarIdx) in module.variables">
-                    <div class="form-group col-md-3" >
-                        <label for="var-name">Name: </label>
-                        <input type="text" class="form-control" id="var-name" v-model="modVar.name">
-                    </div>
-                    <div class="form-group col-md-3" >
-                        <label for="var-description">Description: </label>
-                        <input type="text" class="form-control" id="var-description" v-model="modVar.description">
-                    </div>
-                    <div class="form-group col-md-2" >
-                        <label for="var-defaultValue">Default value: </label>
-                        <input type="text" class="form-control" id="var-defaultValue" v-model="modVar.defaultValue">
-                    </div>
-                    <div class="form-group col-md-1">
+                <b-form-row class="align-items-center" v-for="(modVar,modVarIdx) in module.variables">
+                    <b-col cols="3">
+                        <b-form-group label="Name">
+                            <b-input v-model="modVar.name"></b-input>
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="3">
+                        <b-form-group label="Description">
+                            <b-input v-model="modVar.description"></b-input>
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="2">
+                        <b-form-group label="Default value">
+                            <b-input v-model="modVar.defaultValue"></b-input>
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="1">
                         <b-form-checkbox v-model="modVar.editable" switch inline>Editable</b-form-checkbox>
                         <b-form-checkbox v-model="modVar.mandatory" switch inline>Mandatory</b-form-checkbox>
-                    </div>
-                    <div class="form-group" >
-                        <button type="button" class="form-control btn btn-danger" @click="removeVar(modVarIdx)">-</button>
-                    </div>
-                </div>
+                    </b-col>
+                    <b-col cols="1">
+                        <b-form-group>
+                            <b-button variant="danger" @click="removeVar(modVarIdx)"><i class="fas fa-minus"></i></b-button>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
 
-                <button type="submit" class="btn btn-primary"><i class="far fa-save"></i> Save</button>
+                <b-button variant="primary" @click="post"><i class="far fa-save"></i> Save</b-button>
             </form>
         </div>
     </div>