Add fruit to API

src/components/AddFruit.vue

@@ -1,41 +1,87 @@
 <template>
   <div class="modal">
     <h2>New Fruit</h2>
-    <form id="new-fruit">
+    <form id="new-fruit" @submit.prevent="checkForm">
       <!-- name -->
-      <p>
-        <input ref="autofocus" type="text" v-model="fruit.name" placeholder="Name" />
-      </p>
+      <div class="form-field">
+        <label for="fruit-name">Name</label>
+        <input
+          id="fruit-name"
+          ref="autofocus"
+          type="text"
+          v-model="fruit.name"
+          placeholder="Ex: Banana"
+          required
+        />
+      </div>
 
       <!-- image finder (with Unsplash API) -->
       <ImageUnsplash
         @getValue="getImage"
         label="Image"
+        containerClass="form-field"
         placeholder="Search: strawberry, apple ..."
+        :required="true"
       />
 
-      <div class="input-group">
+      <div class="form-group">
         <!-- taste -->
-        <input type="text" v-model="fruit.taste" placeholder="Taste" />
+        <div class="form-field">
+          <label for="fruit-taste">Taste</label>
+          <input
+            id="fruit-taste"
+            type="text"
+            v-model="fruit.taste"
+            placeholder="Ex: sweet"
+            required
+          />
+        </div>
 
         <!-- color -->
-        <input type="color" v-model="fruit.color" placeholder="Color" />
+        <div class="form-field">
+          <label for="fruit-color">Color</label>
+          <input id="fruit-color" type="color" v-model="fruit.color" placeholder="Color" required />
+        </div>
       </div>
 
-      <!-- price -->
-      <p>
-        <input type="number" v-model="fruit.price" placeholder="Price" />
-      </p>
+      <div class="form-group">
+        <!-- price -->
+        <div class="form-field">
+          <label for="fruit-price">Price ($)</label>
+          <input
+            id="fruit-price"
+            type="number"
+            v-model="fruit.price"
+            placeholder="Ex: $13"
+            required
+            min="0"
+          />
+        </div>
 
-      <!-- expires -->
-      <p>
-        <input type="date" v-model="fruit.expires" placeholder="Expiry date" />
-      </p>
+        <!-- expires -->
+        <div class="form-field">
+          <label for="fruit-expires">Expiration Date</label>
+          <input id="fruit-expires" type="date" v-model="fruit.expires" required />
+        </div>
+      </div>
 
       <!-- description -->
-      <p>
-        <textarea v-model="fruit.description" placeholder="Message ..." />
-      </p>
+      <div class="form-field">
+        <label for="fruit-description">Description</label>
+        <textarea
+          id="fruit-description"
+          v-model="fruit.description"
+          placeholder="Ex: malesuada pellentesque elit eget ..."
+          required
+        />
+      </div>
+
+      <div class="actions">
+        <button class="btn btn--cancel" type="button" @click="() => $store.commit('toggleModal')">
+          Cancel
+        </button>
+        <button class="btn btn--success" type="submit">Save</button>
+      </div>
     </form>
   </div>
 </template>
@@ -48,15 +94,27 @@ export default {
   components: { ImageUnsplash },
   data() {
     return {
-      fruit: {}
+      fruit: {
+        color: "#000000"
+      }
     };
   },
   mounted() {
     this.$refs["autofocus"].focus();
+    document.body.classList.add("is-overlayed");
+  },
+  destroyed() {
+    document.body.classList.remove("is-overlayed");
   },
   methods: {
     getImage(url) {
       this.fruit.image = url;
+    },
+    async checkForm(e) {
+      await this.$store
+        .dispatch("addFruit", this.fruit)
+        .then(() => this.$store.commit("toggleModal"));
+      e.preventDefault();
     }
   }
 };
@@ -64,15 +122,15 @@ export default {
 
 <style lang="less">
 .modal {
-  position: absolute;
+  position: fixed;
   top: @headerHeight;
   left: 0;
   right: 0;
   bottom: 0;
-  height: 100%;
   background-color: @color-2;
   padding: 1rem;
   z-index: 14;
+  overflow-y: scroll;
 
   form {
     border: 2px solid @color-1;
@@ -82,30 +140,94 @@ export default {
     background-color: rgba(0, 0, 0, 0.06);
     box-shadow: 0 1px 4px 1px #d2d2f2;
     padding: 1rem;
+    margin-bottom: 1rem;
 
-    .input-group {
-      display: flex;
-      align-items: center;
+    @media screen and (min-width: @sm) {
+      width: 425px;
+      margin: 0 auto 2rem auto;
+    }
+
+    [type="color"] {
+      height: 48px;
+    }
+
+    .form-field {
+      padding: 0.75rem 1rem;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background-color: @color-2;
       margin: 1rem 0;
 
-      [type="color"] {
-        width: 35%;
-        height: 48px;
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
       }
 
-      :first-child {
-        margin-right: 1rem;
+      textarea,
+      input {
+        width: 100%;
+        box-sizing: border-box;
+        border: none;
+        border-radius: 4px;
+        background-color: lighten(@text-color, 70%);
+        padding: 0.75rem 1rem;
+        color: darken(@color-1, 20%);
       }
     }
 
-    input,
-    .image-unsplash {
-      box-sizing: border-box;
-      width: 100%;
-      border-radius: 4px;
-      border: 1px solid #cecece;
+    .form-group {
+      display: flex;
+      align-items: center;
+      margin: 1rem 0;
       background-color: @color-2;
-      padding: 0.75rem 1rem;
+
+      .form-field {
+        background-color: none;
+        margin: 0;
+        width: 50%;
+      }
+
+      // :first-child {
+      //   margin-right: 1rem;
+      //   width: 60%;
+
+      //   @media screen and (min-width: @sm) {
+      //     width: 100%;
+      //   }
+      // }
+
+      // [type="color"] {
+      //   width: calc(40% - 1rem);
+      //   flex-shrink: 0;
+      //   height: 48px;
+
+      //   @media screen and (min-width: @sm) {
+      //     width: calc(35% - 1rem);
+      //   }
+      // }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .btn {
+        border: none;
+        border-radius: 4px;
+        color: @color-2;
+        padding: 0.5rem 1.35rem;
+        margin: 0 0.5rem;
+
+        &--success {
+          background-color: #2ecc71;
+        }
+
+        &--cancel {
+          background-color: darken(#cecece, 15%);
+        }
+      }
     }
   }
 }

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="image-unsplash">
+  <div :class="containerClass" class="image-unsplash">
     <label for="search-unsplash">{{ label }}</label>
     <!-- Loading placeholder -->
     <ImageSkeleton v-if="loading" />
@@ -17,7 +17,13 @@
 
     <!-- Search input -->
     <div class="search-box">
-      <input id="search-unsplash" type="search" :placeholder="placeholder" @change="handleSearch" />
+      <input
+        id="search-unsplash"
+        type="search"
+        :placeholder="placeholder"
+        @change="handleSearch"
+        :required="required"
+      />
     </div>
   </div>
 </template>
@@ -32,6 +38,10 @@ export default {
     ImageSkeleton
   },
   props: {
+    containerClass: {
+      type: String,
+      default: null
+    },
     label: {
       type: String,
       default: "Image (from Unsplash)"
@@ -39,6 +49,10 @@ export default {
     placeholder: {
       type: String,
       default: "Type anything !"
+    },
+    required: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -69,12 +83,6 @@ export default {
 
 <style scoped lang="less">
 .image-unsplash {
-  label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
   .preview,
   .skeleton {
     margin-bottom: 1rem;
@@ -104,7 +112,7 @@ export default {
       position: absolute;
       z-index: 1;
       top: 50%;
-      right: 0.3rem;
+      right: 0.5rem;
       width: 24px;
       height: 24px;
       transform: translateY(-50%);

src/components/Grid/DeleteItem.vue

@@ -6,8 +6,8 @@
     <div v-if="openPrompt" :class="{ open: openPrompt }" class="prompt">
       <h3>You will delete '{{ item.name }}'?</h3>
       <div class="actions">
-        <button class="btn btn-cancel" @click="openPrompt = false">No</button>
-        <button class="btn btn-success" @click="removeFruit(item.id)">Yes</button>
+        <button class="btn btn--cancel" @click="openPrompt = false">No</button>
+        <button class="btn btn--success" @click="removeFruit(item.id)">Yes</button>
       </div>
     </div>
   </div>
@@ -67,14 +67,14 @@ export default {
     color: @color-2;
     padding: 0.5rem 1.35rem;
     margin: 0 0.5rem;
-  }
 
-  .btn-success {
-    background-color: #2ecc71;
-  }
+    &--success {
+      background-color: #2ecc71;
+    }
 
-  .btn-cancel {
-    background-color: darken(#cecece, 15%);
+    &--cancel {
+      background-color: darken(#cecece, 15%);
+    }
   }
 }
 

src/components/Header.vue

@@ -7,13 +7,18 @@
 
     <div class="actions">
       <button
+        :disabled="modalIsOpen"
         class="action-btn action-btn--delete"
         @click="() => $store.commit('toggleDeleteMode')"
       >
         {{ deleteMode ? "&#x1F6AB;" : "&#x1f5d1;" }}
       </button>
-      <button class="action-btn action-btn--add" @click="() => $store.commit('toggleModal')">
-        +
+      <button
+        :disabled="deleteMode"
+        class="action-btn action-btn--add"
+        @click="() => $store.commit('toggleModal')"
+      >
+        {{ modalIsOpen ? "&#x1F6AB;" : "&#x2795;" }}
       </button>
     </div>
   </header>
@@ -25,7 +30,7 @@ import { mapState } from "vuex";
 export default {
   name: "Header",
   computed: {
-    ...mapState(["deleteMode"])
+    ...mapState(["deleteMode", "modalIsOpen"])
   }
 };
 </script>
@@ -75,24 +80,23 @@ header {
         border: none;
         border-radius: 50%;
         color: @color-2;
-        font-size: 28px;
+        font-size: 24px;
         font-weight: lighter;
         text-align: center;
         margin-left: 1rem;
+        padding-top: 2px;
+        background: lighten(#cecece, 10%);
+
+        &:disabled {
+          opacity: 0.4;
+        }
 
         &--delete {
           border: 1px solid @text-error;
-          background: lighten(#cecece, 10%);
-          font-size: 24px;
-          padding-top: 2px;
         }
 
         &--add {
-          background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
-
-          &:hover {
-            background: linear-gradient(0deg, #1c9797 11.05%, #147171 89.93%);
-          }
+          border: 1px solid @color-1;
         }
       }
     }