JessyBruyneel
/
RecepyBook
Watch 3
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'Fix-CreateRecipe' of JessyBruyneel/RecepyBook into master

master
Simondb 4 years ago
parent
1a58e3161a 8673385abb
commit
ed5221daf4
5 changed files with 213 additions and 126 deletions
Split View Show Diff Stats
  1. 7
    7
      package-lock.json
  2. 1
    1
      package.json
  3. 15
    0
      src/assets/styles/main.css
  4. 132
    78
      src/components/RecipeForm.vue
  5. 58
    40
      src/views/Recipes.vue

+ 7
- 7
package-lock.json View File

@@ -25,11 +25,11 @@
}
},
"@braid/vue-formulate": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/@braid/vue-formulate/-/vue-formulate-2.2.8.tgz",
"integrity": "sha512-v8y5dAtO25/DxJMc5LjIHyX70H4ogKnVUeAurX0N3vYbit4xSY+Ptz30xM9CYFDBJOBuK97DLsfDteuydd/U1g==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@braid/vue-formulate/-/vue-formulate-2.3.2.tgz",
"integrity": "sha512-ZTycTkYaY89x8wnIMiy6SwdDRqCiXhCmd1sadvPNc4/6ut/BIlEIhskDL8D8UQhbdh6f/r0pavopixy94WgyYg==",
"requires": {
"@braid/vue-formulate-i18n": "^1.4.0",
"@braid/vue-formulate-i18n": "^1.7.0",
"is-plain-object": "^3.0.0",
"is-url": "^1.2.4",
"nanoid": "^2.1.11"
@@ -51,9 +51,9 @@
}
},
"@braid/vue-formulate-i18n": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@braid/vue-formulate-i18n/-/vue-formulate-i18n-1.4.0.tgz",
"integrity": "sha512-US/CguORgMlT+fE+m/Cln8s/EkZB43IvTwOh077I7Tk7vLoZhs7G8+ATMd/Hf4ksLhCUIyxtdEpElbUgTTnjzg=="
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@braid/vue-formulate-i18n/-/vue-formulate-i18n-1.7.0.tgz",
"integrity": "sha512-yyF4SpH+frMaQ3Xe+OaEvkrTpDfj1nrGLA6oNWeDyJ/11UIyrcZ5Wp6Z6fGV3D1sKOS+o9XrVeaf2t4ZXpDugw=="
},
"@directus/sdk-js": {
"version": "6.0.5",

+ 1
- 1
package.json View File

@@ -7,7 +7,7 @@
"build": "vue-cli-service build"
},
"dependencies": {
"@braid/vue-formulate": "^2.2.8",
"@braid/vue-formulate": "^2.3.2",
"@directus/sdk-js": "^6.0.5",
"vue": "^2.6.11",
"vue-router": "^3.1.5"

+ 15
- 0
src/assets/styles/main.css View File

@@ -208,6 +208,21 @@ td {
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.card{
background-color: #CFC9B9;
border: none;
display: inline-block;
font-size: 16px;
padding: 15px 32px;
border-radius: 10rem;
}
a:active{
color: green;
text-decoration: none;
}
.formGroup{
width: 50%;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);

+ 132
- 78
src/components/RecipeForm.vue View File

@@ -1,91 +1,145 @@
<template>
<FormulateForm :values="RecipeData" @submit="saveEvent">
<FormulateInput v-if="RecipeData.id" type="hidden" name="id" />
<FormulateInput
v-if="RecipeData.id"
label="Created On"
type="text"
name="created_on"
disabled="true"
/>
<FormulateInput
label="Name"
type="text"
name="name"
validation="required|max:50"
/>
<FormulateInput
:options="{normal: 'Normal', vegan: 'Vegan', veggi: 'Veggi', nolactose: 'no lactose', nogluten: 'no gluten'}"
type="checkbox"
name="tags"
label="type of dish"
/>
<FormulateInput
type="text"
name="ingredients"
label="ingredient"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
:options="{
l: 'Liter',
ml: 'milliliter',
g: 'Gram',
kg: 'Kilogram'}"
type="checkbox"
label="Ingredient Unit"
name="unit"
validation="max:1,value"
error-behavior="live"
/>
<FormulateForm :values="RecipeData" @submit="saveEvent" v-model="RecipeData">
{{ RecipeData }}
<FormulateInput v-if="RecipeData.id" type="hidden" name="id" />
<FormulateInput
v-if="RecipeData.id"
label="Created On"
type="text"
name="created_on"
disabled="true"
/>
<FormulateInput
label="Name"
type="text"
name="name"
validation="required|max:50"
/>
<FormulateInput
:options="{
normal: 'Normal',
vegan: 'Vegan',
veggi: 'Veggi',
nolactose: 'no lactose',
nogluten: 'no gluten',
}"
type="checkbox"
name="tags"
label="type of dish"
/>
<FormulateInput
class="formGroup"
type="group"
name="ingredients"
label="yeaaaa"
:repeatable="true"
validation-name="test"
add-label="+ recept"
>
<FormulateInput
type="text"
name="name"
label="ingredient"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
type="text"
name="cat_1"
label="cat_1"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
type="text"
name="cat_2"
label="cat_2"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
type="text"
name="Cat_3"
label="cat_3"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
type="text"
name="cat_4"
label="cat_4"
placeholder="ingredient name"
help="Enter a ingredient"
validation="required"
/>
<FormulateInput
:options="{
l: 'Liter',
ml: 'milliliter',
g: 'Gram',
kg: 'Kilogram',
}"
type="checkbox"
label="Ingredient Unit"
name="unit"
validation="max:1,value"
error-behavior="live"
/>
</FormulateInput>

<FormulateInput type="submit" label="Save" />
</FormulateForm>
<FormulateInput type="submit" label="Save" />
</FormulateForm>

</template>

<script>
//werkte niet omdat er in de database iets niet juist was :)
export default {
name: "RecipeForm",
props: {
RecipeData: {
type: Object,
default: function () {
return {};
},
name: 'RecipeForm',
props: {
RecipeData: {
type: Object,
default: function () {
return {};
},
},
},
},

methods: {
saveEvent(data) {
if (this.RecipeData.id) {
this.$root.directusClient
.updateItem("recepies", data.id, data)
.then(this.notifySuccess)
.catch(this.notifyError);
} else {
this.$root.directusClient
.createItem("recepies", data)
.then(this.notifySuccess)
.catch(this.notifyError);
}
},
notifySuccess() {
this.$root.$emit("notify", {
title: "Success",
body: "The recepy has been saved.",
});
},
notifyError(error) {
this.$root.$emit("notify", {
title: "Error",
body: "The recepy could not be saved, try again.",
});
console.error(error);
methods: {
saveEvent(data) {
if (this.RecipeData.id) {
this.$root.directusClient
.updateItem('recepies', data.id, data)
.then(this.notifySuccess)
.catch(this.notifyError);
} else {
this.$root.directusClient
.createItem('recepies', data)
.then(this.notifySuccess)
.catch(this.notifyError);
}
},
notifySuccess() {
this.$root.$emit('notify', {
title: 'Success',
body: 'The recepy has been saved.',
});
},
notifyError(error) {
this.$root.$emit('notify', {
title: 'Error',
body: 'The recepy could not be saved, try again.',
});
console.error(error);
},
},
},
};
</script>


+ 58
- 40
src/views/Recipes.vue View File

@@ -1,37 +1,51 @@
<template>
<div class="Events">
<div v-if="loading" class="loader">Loading..</div>
<div class="Events">
<div v-if="loading" class="loader">Loading..</div>

<div v-if="!loading">
<h1 class="page-title">This is the Recipes page</h1>
<div>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Tags</th>
<th>ingredients</th>
</thead>
<tbody>
<tr
class="li-evenement"
:to="`/recipes/${recipe.id}`"
v-for="recipe in recipes"
:key="recipe.id"
>
<td>{{recipe.id}}</td>
<td>{{recipe.name}}</td>
<td>{{tagsString(recipe)}}</td>
<td>{{recipe.ingredients}}</td>
<td>
<router-link class="table-link" :to="'/edit/EditRecipe/' + recipe.id">Edit</router-link>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="!loading">
<h1 class="page-title">This is the Recipes page</h1>
<div>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Tags</th>
<th>ingredients</th>
</thead>
<tbody>
<tr
class="li-evenement"
:to="`/recipes/${recipe.id}`"
v-for="recipe in recipes"
:key="recipe.id"
>
<td>{{ recipe.id }}</td>
<td>{{ recipe.name }}</td>
<td>{{ tagsString(recipe) }}</td>
<td>
<table>
<tr
v-for="ingredient in recipe.ingredients"
:key="ingredient.name"
>
<td>{{ ingredient.name }}</td>
</tr>
</table>
</td>

<td>
<router-link
class="table-link"
:to="'/edit/EditRecipe/' + recipe.id"
>Edit</router-link
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
@@ -43,7 +57,7 @@ export default {
// console.log(this.events);
// });

this.$root.directusClient.getItems('recepies').then(data => {
this.$root.directusClient.getItems('recepies').then((data) => {
this.recipes = data.data;
this.loading = false;
// console.log(this.recipes);
@@ -70,28 +84,32 @@ export default {
id: '',
name: '',
tags: [],
ingredients: ''
ingredients: [
{
name: '',
},
],
},
};
},
methods: {
tagsString: function (recipe) {
return recipe.tags.join(' ');
}
return recipe.tags.join(' ');
},
},
computed: {},
};
</script>
<style>
.contentdiv {
color: black;
color: black;
}
#sub-nav {
padding: 20px;
padding: 20px;
}

#sub-nav a {
font-weight: bold;
color: #2c3e50;
font-weight: bold;
color: #2c3e50;
}
</style>
</style>

Write Preview
Loading…
Cancel
Save