Add fruit to API
This commit is contained in:
@@ -45,6 +45,10 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
body.is-overlayed {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem 1rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%230c9696' fill-opacity='0.35'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,13 +7,18 @@
|
||||
|
||||
<div class="actions">
|
||||
<button
|
||||
:disabled="modalIsOpen"
|
||||
class="action-btn action-btn--delete"
|
||||
@click="() => $store.commit('toggleDeleteMode')"
|
||||
>
|
||||
{{ deleteMode ? "🚫" : "🗑" }}
|
||||
</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 ? "🚫" : "➕" }}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,14 @@ export default {
|
||||
getFruit: async ({ commit }, id) => {
|
||||
await axios.get(`http://localhost:3000/fruit/${id}`).then(res => commit("setFruit", res.data));
|
||||
},
|
||||
addFruit: async ({ commit }, fruit) => {
|
||||
commit("setLoading", true);
|
||||
await axios
|
||||
.post("http://localhost:3000/fruit", fruit)
|
||||
.then(res => commit("addFruit", res.data))
|
||||
.catch(err => console.log(err))
|
||||
.finally(() => commit("setLoading", false));
|
||||
},
|
||||
removeFruit: async ({ commit }, id) => {
|
||||
await axios
|
||||
.delete(`http://localhost:3000/fruit/${id}`)
|
||||
|
||||
Reference in New Issue
Block a user