Added description to tonic type

kasperlegarth · Feb 16, 2023 · 94da811 · 94da811
1 parent 5da1353
commit 94da811
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -94,7 +94,7 @@ export default {
     addTonic(tonic) {
       console.log("Add the tonic: ", tonic)
     },
-    async addTonicType(typeName) {
+    async addTonicType(type) {
       let newId = null
 
       if(this.typesOfTonic.length > 0) {
@@ -111,7 +111,8 @@ export default {
 
       newData.types.push({
         id: newId,
-        name: typeName
+        name: type.name,
+        description: type.description
       })
 
       const options = {
@@ -299,6 +300,16 @@ export default {
           margin-bottom: 0;
         }
 
+        &--column {
+          flex-direction: column;
+          align-items: flex-start;
+
+          .small {
+            margin-top: 0;
+            margin-bottom: 10px;
+          }
+        }
+
         textarea {
           margin-top: 12px;
           padding: 12px;
@@ -309,10 +320,16 @@ export default {
           border-radius: 3px;
           border: solid 1px lighten($color--crocodile-tooth, 10);
           background-color: lighten($color--crocodile-tooth, 18);
+
+          &.small {
+              padding: 6px;
+              font-size: 12px;
+              min-height: 75px;
+            }
         }
 
         input {
-          &:not(:last-child) {
+          &:not(:last-child):not(:nth-last-child(2)) {
             margin-bottom: 10px;
           }
 

diff --git a/src/components/TonicForm.vue b/src/components/TonicForm.vue
@@ -13,8 +13,9 @@
             </div>
             <div class="form__group-footer">
                 <a href="#" @click.prevent="showNewType = true">Add new type</a>
-                <div class="form__group-field">
+                <div class="form__group-field form__group-field--column">
                     <input v-if="showNewType" @keyup.enter="addType" type="text" class="small" placeholder="Name of new type" v-model="newType" />
+                    <textarea v-if="showNewType" @keyup.enter="addType" class="small" placeholder="Say something about the tonic" v-model="typeDescription"></textarea>
                     <button v-if="showNewType" @click="addType" type="button" class="button button--main button--small">Add</button>
                 </div>
             </div>
@@ -39,6 +40,7 @@
                 showNewType: false,
                 newType: "",
                 tonicName: "",
+                typeDescription: "",
                 pickedTonicType: "",
             }
         },
@@ -47,7 +49,10 @@
                 console.log("something worked")
             },
             addType() {
-                this.$emit("newType", this.newType);
+                this.$emit("newType", {
+                    name: this.newType,
+                    description: this.typeDescription
+                });
                 
                 this.newType = "";
                 this.showNewType = false;