Merge pull request #55 from chessmadridista/feature-4

Feature 4
chessmadridista · Oct 2, 2022 · f161e4b · f161e4b
2 parents 61dc9c7 + 1f366c6
commit f161e4b
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 29 deletions.
diff --git a/app/src/App.vue b/app/src/App.vue
@@ -23,6 +23,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  background: #eaf9ff;
 }
 
 nav {

diff --git a/app/src/components/Home.vue b/app/src/components/Home.vue
@@ -5,7 +5,7 @@
         v-model="snackbar"
         top
         right>
-            Successfully added!
+            {{ snackbarMessage }}
             <template v-slot:action="{ attrs }">
                 <v-btn
                 icon
@@ -16,7 +16,8 @@
                 </v-btn>
             </template>
         </v-snackbar>
-        <v-card 
+        <v-card
+        class="pb-6 mb-6 rounded-lg"
         v-for="exchange of exchanges"
         :key="exchange.exchangeID">
             <v-card-text>
@@ -40,38 +41,48 @@
                 @input="isExchangeValid(exchange)"
                 >
                 </v-textarea>
-                <div>
-                    <v-btn 
-                    color="error"
-                    v-show="!exchange.submitted && exchange.exchangeID !== 0"
-                    @click="previousStep()">
-                        Previous
-                    </v-btn>
-                    <v-btn 
-                    color="primary"
-                    v-show="!exchange.submitted"
-                    :disabled="!exchange.valid"
-                    @click="nextStep()">
-                        Next
-                    </v-btn>
-                </div>
             </v-card-text>
+            <v-container class="buttons--exchange">
+                <v-btn 
+                absolute 
+                left
+                rounded
+                color="error"
+                v-show="!exchange.submitted && exchange.exchangeID !== 0"
+                @click="previousStep()">
+                    Previous
+                </v-btn>
+                <v-btn
+                absolute 
+                right
+                rounded
+                color="primary"
+                v-show="!exchange.submitted"
+                :disabled="!exchange.valid"
+                @click="nextStep()">
+                    Next
+                </v-btn>
+            </v-container>
         </v-card>
-        <div>
+        <v-container>
             <v-btn 
             color="error"
+            class="mr-2"
+            rounded
             @click="reset()">
                 Reset
             </v-btn>
             <v-btn 
             color="primary"
+            class="ml-2"
+            rounded
             @click="submit()">
                 Submit
             </v-btn>
-        </div>
+        </v-container>
         <v-btn
         fixed
-        fab
+        icon
         bottom
         right
         @click="goToTop()">
@@ -85,6 +96,7 @@ export default {
     data() {
         return {
             snackbar: false,
+            snackbarMessage: "",
             exchanges: [
                 {
                     exchangeID: 0,
@@ -97,6 +109,12 @@ export default {
         };
     },
     methods: {
+        updateSnackbar(message) {
+            this.snackbar = true;
+            this.snackbarMessage = message;
+
+            return true;
+        },
         isExchangeValid(exchange) {
             if (exchange.question && exchange.answer) {
                 exchange.valid = true;
@@ -108,6 +126,8 @@ export default {
         },
         deleteLastExchange() {
             this.exchanges.pop();
+            const message = "The exchange has been deleted.";
+            this.updateSnackbar(message);
 
             return true;
         },
@@ -163,6 +183,8 @@ export default {
             this.createAnotherExchange();
             this.updateSnackbarState();
             this.scrollToBottom();
+            const message = "The exchange has been created."
+            this.updateSnackbar(message);
 
             return true;
         },
@@ -191,6 +213,8 @@ export default {
         reset() {
             this.deleteExchanges();
             this.addFirstExchange();
+            const message = "The conversation has been reset.";
+            this.updateSnackbar(message);
 
             return true;
         },
@@ -201,6 +225,8 @@ export default {
         },
         submit() {
             this.saveExchangesInStore();
+            const message = "The conversation has been submitted.";
+            this.updateSnackbar(message);
 
             return true;
         },
@@ -214,4 +240,9 @@ export default {
         
     },
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.buttons--exchange {
+    height: 45px;
+}
+</style>
diff --git a/app/src/components/NavigationHeader.vue b/app/src/components/NavigationHeader.vue
@@ -13,14 +13,14 @@
         v-model="drawer">
             <v-list-item-group>
                 <v-list nav>
-                    <v-list-item>
+                    <v-list-item
+                    v-for="item of items"
+                    :key="item.itemID">
+                        <v-list-item-icon>
+                            <v-icon>{{ item.itemIcon }}</v-icon>
+                        </v-list-item-icon>
                         <v-list-item-title>
-                            Home
-                        </v-list-item-title> 
-                    </v-list-item>
-                    <v-list-item>
-                        <v-list-item-title>
-                            Results
+                            {{ item.itemTitle }}
                         </v-list-item-title>
                     </v-list-item>
                 </v-list>
@@ -34,7 +34,31 @@ export default {
     data() {
         return {
             drawer: false,
+            items: [
+                {
+                    itemID: 0,
+                    itemTitle: "Home",
+                    itemIcon: "mdi-view-dashboard"
+                },
+                {
+                    itemID: 1,
+                    itemTitle: "Results",
+                    itemIcon: "mdi-hand-heart"
+                },
+            ],
         };
     },
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.v-item-group {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+
+    .v-list-item__title {
+        text-align: left;
+    }
+}
+</style>