Upload component (#113)

* unified upload button + download backups

* javascript toolings

* fix vuetur config

* fixed type check error

* refactor: clean up bag javascript

* UI updates + name validation

* docs: changelog + sp

* fixed route links

* changelog

Co-authored-by: Hayden <hay-kot@pm.me>
This commit is contained in:
Hayden
2021-01-22 09:23:25 -09:00
committed by GitHub
parent f35e9c20d6
commit 41e079d423
19 changed files with 204 additions and 139 deletions

View File

@@ -12,65 +12,64 @@
{{ $t("meal-plan.meal-plans") }}
</v-card-title>
<v-divider></v-divider>
<v-row no-gutters>
<v-col
:sm="6"
:md="6"
:lg="4"
:xl="3"
v-for="(mealplan, i) in plannedMeals"
:key="i"
>
<v-card class="ml-2 mt-2 mr-0">
<v-card-title>
{{ formatDate(mealplan.startDate) }} -
{{ formatDate(mealplan.endDate) }}
</v-card-title>
<v-list nav>
<v-list-item-group color="primary">
<v-list-item
v-for="(meal, index) in mealplan.meals"
:key="generateKey(meal.slug, index)"
@click="$router.push(`/recipe/${meal.slug}`)"
>
<v-list-item-avatar
color="primary"
class="headline font-weight-light white--text"
>
<v-img :src="getImage(meal.image)"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="meal.name"></v-list-item-title>
<v-list-item-subtitle v-text="meal.dateText">
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
<v-card-actions class="mt-n5">
<v-spacer></v-spacer>
<v-btn
color="accent lighten-2"
class="mx-0"
text
@click="editPlan(mealplan.uid)"
>
{{ $t("general.edit") }}
</v-btn>
<v-btn
color="error lighten-2"
class="mx-2"
text
@click="deletePlan(mealplan.uid)"
>
{{ $t("general.delete") }}
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-card>
<v-row dense>
<v-col
:sm="6"
:md="6"
:lg="4"
:xl="3"
v-for="(mealplan, i) in plannedMeals"
:key="i"
>
<v-card class="mt-1">
<v-card-title>
{{ formatDate(mealplan.startDate) }} -
{{ formatDate(mealplan.endDate) }}
</v-card-title>
<v-list nav>
<v-list-item-group color="primary">
<v-list-item
v-for="(meal, index) in mealplan.meals"
:key="generateKey(meal.slug, index)"
@click="$router.push(`/recipe/${meal.slug}`)"
>
<v-list-item-avatar
color="primary"
class="headline font-weight-light white--text"
>
<v-img :src="getImage(meal.image)"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="meal.name"></v-list-item-title>
<v-list-item-subtitle v-text="meal.dateText">
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
<v-card-actions class="mt-n5">
<v-spacer></v-spacer>
<v-btn
color="accent lighten-2"
class="mx-0"
text
@click="editPlan(mealplan.uid)"
>
{{ $t("general.edit") }}
</v-btn>
<v-btn
color="error lighten-2"
class="mx-2"
text
@click="deletePlan(mealplan.uid)"
>
{{ $t("general.delete") }}
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>

View File

@@ -23,14 +23,16 @@
<v-card-text> {{ meal.description }} </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
align="center"
color="secondary"
text
@click="$router.push(`/recipe/${meal.slug}`)"
>
{{$t('recipe.view-recipe')}}
{{ $t("recipe.view-recipe") }}
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-col>

View File

@@ -29,7 +29,12 @@
/>
</div>
<RecipeEditor v-else v-model="recipeDetails" @upload="getImage" />
<RecipeEditor
ref="recipeEditor"
v-else
v-model="recipeDetails"
@upload="getImage"
/>
</v-card>
</template>
@@ -85,20 +90,22 @@ export default {
},
async createRecipe() {
this.isLoading = true;
if (this.$refs.recipeEditor.validateRecipe()) {
this.isLoading = true;
if (this.fileObject) {
this.recipeDetails.image = this.fileObject.name;
if (this.fileObject) {
this.recipeDetails.image = this.fileObject.name;
}
let slug = await api.recipes.create(this.recipeDetails);
if (this.fileObject) {
await api.recipes.updateImage(slug, this.fileObject);
}
this.isLoading = false;
this.$router.push(`/recipe/${slug}`);
}
let slug = await api.recipes.create(this.recipeDetails);
if (this.fileObject) {
await api.recipes.updateImage(slug, this.fileObject);
}
this.isLoading = false;
this.$router.push(`/recipe/${slug}`);
},
},
};

View File

@@ -45,7 +45,12 @@
height="1500px"
:options="jsonEditorOptions"
/>
<RecipeEditor v-else v-model="recipeDetails" @upload="getImageFile" />
<RecipeEditor
v-else
v-model="recipeDetails"
ref="recipeEditor"
@upload="getImageFile"
/>
</v-card>
</template>
@@ -101,7 +106,7 @@ export default {
},
watch: {
$route: function () {
$route: function() {
this.getRecipeDetails();
},
},
@@ -138,6 +143,9 @@ export default {
api.recipes.delete(this.recipeDetails.slug);
},
async saveRecipe() {
if (this.$refs.recipeEditor.validateRecipe()) {
console.log("Thank you")
}
let slug = await api.recipes.update(this.recipeDetails);
if (this.fileObject) {