phyks/cuizin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Attempt to improve ingredients edition

Browse Source
This commit is contained in:
Lucas Verney 2018-03-11 18:13:16 +01:00
parent f529619c99
commit 9b86a4d827
2 changed files with 61 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
cuizin/js_src/components/EditForm.vue
View File

@ -23,7 +23,7 @@
<v-text-field <v-text-field
:label="$t('new.short_description')" :label="$t('new.short_description')"
v-model="short_description" v-model="short_description"
textarea multi-line
></v-text-field> ></v-text-field>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12 md5> <v-flex xs12 md5>
@ -51,16 +51,12 @@
<v-flex xs12 class="text-xs-left"> <v-flex xs12 class="text-xs-left">
<h3>{{ $t('new.ingredients') }}</h3> <h3>{{ $t('new.ingredients') }}</h3>
<v-list v-if="ingredients.length" class="transparent"> <v-list v-if="ingredients.length" class="transparent">
<v-list-tile v-for="ingredient in ingredients" :key="ingredient"> <IngredientListTile
<v-list-tile-action> v-for="(ingredient, index) in ingredients" :key="index"
<v-btn flat icon color="red" v-on:click="() => removeIngredient(ingredient)"> :ingredient="ingredient"
<v-icon>delete</v-icon> :onDelete="() => removeIngredient(index)"
</v-btn> :onEdit="(value) => editIngredient(index, value)"
</v-list-tile-action> ></IngredientListTile>
<v-list-tile-content>
<v-list-tile-title>{{ ingredient }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list> </v-list>
<p class="ml-5 my-3" v-else>{{ $t('new.none') }}</p> <p class="ml-5 my-3" v-else>{{ $t('new.none') }}</p>
<v-text-field <v-text-field
@ -74,7 +70,7 @@
:label="$t('new.instructions')" :label="$t('new.instructions')"
v-model="instructions" v-model="instructions"
:rules="[v => !!v || $t('new.instructions_are_required')]" :rules="[v => !!v || $t('new.instructions_are_required')]"
textarea multi-line
required required
></v-text-field> ></v-text-field>
@ -97,14 +93,18 @@
</template> </template>
<script> <script>
import Vue from 'vue';
import * as api from '@/api'; import * as api from '@/api';
import * as rules from '@/rules'; import * as rules from '@/rules';
import ErrorDialog from '@/components/ErrorDialog'; import ErrorDialog from '@/components/ErrorDialog';
import IngredientListTile from '@/components/IngredientListTile';
export default { export default {
components: { components: {
ErrorDialog, ErrorDialog,
IngredientListTile,
}, },
props: { props: {
recipe: { recipe: {
@ -157,11 +157,11 @@ export default {
this.ingredients.push(this.new_ingredient); this.ingredients.push(this.new_ingredient);
this.new_ingredient = null; this.new_ingredient = null;
}, },
removeIngredient(ingredient) { removeIngredient(index) {
const index = this.ingredients.indexOf(ingredient); Vue.delete(this.ingredients, index);
if (index !== -1) { },
this.ingredients.splice(index, 1); editIngredient(index, value) {
} Vue.set(this.ingredients, index, value);
}, },
submitAdd() { submitAdd() {
this.isImporting = true; this.isImporting = true;

44
cuizin/js_src/components/IngredientListTile.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<v-list-tile>
<v-list-tile-action>
<v-btn flat icon color="red" v-on:click="onDelete">
<v-icon>delete</v-icon>
</v-btn>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-on:click="(editable === false) && (editable = true)">
<v-text-field v-if="editable"
v-model="updatedIngredient"
single-line
solo
@keyup.enter.native="editIngredient"
></v-text-field>
<template v-else>
{{ ingredient }}
</template>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<script>
export default {
props: {
ingredient: String,
onDelete: Function,
onEdit: Function,
},
data() {
return {
editable: false,
updatedIngredient: this.ingredient,
};
},
methods: {
editIngredient() {
this.editable = !this.editable;
this.onEdit(this.updatedIngredient);
},
},
};
</script>