@@ -28,7 +28,11 @@
type: Boolean,
default: false
},
- title: String
+ title: String,
+ wide: {
+ type: Boolean,
+ default: false
+ }
},
mounted() {
diff --git a/app/javascript/components/RecipeEdit.vue b/app/javascript/components/RecipeEdit.vue
index 30978c8..1ada677 100644
--- a/app/javascript/components/RecipeEdit.vue
+++ b/app/javascript/components/RecipeEdit.vue
@@ -120,9 +120,6 @@
\ No newline at end of file
diff --git a/app/javascript/components/RecipeEditIngredientItem.vue b/app/javascript/components/RecipeEditIngredientItem.vue
index b1647e1..8b6310e 100644
--- a/app/javascript/components/RecipeEditIngredientItem.vue
+++ b/app/javascript/components/RecipeEditIngredientItem.vue
@@ -1,5 +1,5 @@
-
+
@@ -99,4 +99,16 @@
\ No newline at end of file
diff --git a/app/javascript/components/TheIngredientList.vue b/app/javascript/components/TheIngredientList.vue
index fe9e3d0..fc019fb 100644
--- a/app/javascript/components/TheIngredientList.vue
+++ b/app/javascript/components/TheIngredientList.vue
@@ -38,7 +38,7 @@
-
+
+
@@ -64,6 +66,7 @@
data() {
return {
ingredientData: null,
+ ingredientForDeletion: null,
search: {
page: 1,
per: 25,
@@ -93,6 +96,18 @@
return this.ingredientData.current_page
}
return 0;
+ },
+
+ showConfirmIngredientDelete() {
+ return this.ingredientForDeletion !== null;
+ },
+
+ confirmIngredientDeleteMessage() {
+ if (this.ingredientForDeletion !== null) {
+ return `Are you sure you want to delete ${this.ingredientForDeletion.name}?`;
+ } else {
+ return "??";
+ }
}
},
@@ -102,11 +117,33 @@
},
getList: debounce(function() {
- this.loadResource(
+ return this.loadResource(
api.getIngredientList(this.search.page, this.search.per, this.search.name)
.then(data => this.ingredientData = data)
);
- }, 500, {leading: true, trailing: true})
+ }, 500, {leading: true, trailing: true}),
+
+ deleteIngredient(ingredient) {
+ this.ingredientForDeletion = ingredient;
+ },
+
+ ingredientDeleteCancel() {
+ this.ingredientForDeletion = null;
+ },
+
+ ingredientDeleteConfirm() {
+ if (this.ingredientForDeletion !== null) {
+ this.loadResource(
+ api.deleteIngredient(this.ingredientForDeletion.id).then(res => {
+ this.ingredientForDeletion = null;
+ return this.getList();
+ })
+ );
+
+ console.log("This is where the thing happens!!");
+ this.ingredientForDeletion = null;
+ }
+ }
},
created() {
diff --git a/app/javascript/components/TheRecipeEditor.vue b/app/javascript/components/TheRecipeEditor.vue
index 7a22e0d..af4a9ff 100644
--- a/app/javascript/components/TheRecipeEditor.vue
+++ b/app/javascript/components/TheRecipeEditor.vue
@@ -48,7 +48,7 @@
created() {
this.loadResource(
- api.getRecipe(this.recipeId, data => { this.recipe = data; return data; })
+ api.getRecipe(this.recipeId, null, null, null, data => { this.recipe = data; return data; })
);
},
diff --git a/app/javascript/components/TheRecipeList.vue b/app/javascript/components/TheRecipeList.vue
index 9d4597c..3f1b2ef 100644
--- a/app/javascript/components/TheRecipeList.vue
+++ b/app/javascript/components/TheRecipeList.vue
@@ -58,7 +58,7 @@
-
+
@@ -68,6 +68,8 @@
+
+
@@ -80,6 +82,7 @@
data() {
return {
recipeData: null,
+ recipeForDeletion: null,
search: {
sortColumn: 'created_at',
sortDirection: 'desc',
@@ -123,6 +126,18 @@
return this.recipeData.current_page;
}
return 0;
+ },
+
+ showConfirmRecipeDelete() {
+ return this.recipeForDeletion !== null;
+ },
+
+ confirmRecipeDeleteMessage() {
+ if (this.showConfirmRecipeDelete) {
+ return `Are you sure you want to delete ${this.recipeForDeletion.name}?`;
+ } else {
+ return "??";
+ }
}
},
@@ -140,8 +155,27 @@
}
},
+ deleteRecipe(recipe) {
+ this.recipeForDeletion = recipe;
+ },
+
+ recipeDeleteConfirm() {
+ if (this.recipeForDeletion !== null) {
+ this.loadResource(
+ api.deleteRecipe(this.recipeForDeletion.id).then(() => {
+ this.recipeForDeletion = null;
+ return this.getList();
+ })
+ );
+ }
+ },
+
+ recipeDeleteCancel() {
+ this.recipeForDeletion = null;
+ },
+
getList: debounce(function() {
- this.loadResource(
+ return this.loadResource(
api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags, data => this.recipeData = data)
);
}, 500, {leading: true, trailing: true}),
diff --git a/app/javascript/components/UserLogin.vue b/app/javascript/components/UserLogin.vue
index e1add90..12bf320 100644
--- a/app/javascript/components/UserLogin.vue
+++ b/app/javascript/components/UserLogin.vue
@@ -1,7 +1,7 @@
-
+
Login
@@ -16,7 +16,7 @@
@@ -71,8 +71,13 @@
'setUser'
]),
+ openDialog() {
+ this.showLogin = true;
+ this.$nextTick(() => this.$refs.usernameInput.focus());
+ },
+
login() {
- if (this.username !== '' && this.password != '') {
+ if (this.username !== '' && this.password !== '') {
this.loadResource(api.postLogin(this.username, this.password).then(data => {
if (data.success) {
this.setUser(data.user);
diff --git a/app/javascript/lib/Api.js b/app/javascript/lib/Api.js
index 7a5ef6f..dba6f46 100644
--- a/app/javascript/lib/Api.js
+++ b/app/javascript/lib/Api.js
@@ -187,6 +187,10 @@ class Api {
return this.post("/recipes/", this.buildRecipeParams(recipe));
}
+ deleteRecipe(id) {
+ return this.del("/recipes/" + id);
+ }
+
postPreviewSteps(step_text) {
const params = {
step_text: step_text
@@ -284,6 +288,10 @@ class Api {
return this.patch("/ingredients/" + ingredient.id, this.buildIngredientParams(ingredient));
}
+ deleteIngredient(id) {
+ return this.del("/ingredients/" + id);
+ }
+
postIngredientSelectNdbn(ingredient) {
const url = ingredient.id ? "/ingredients/" + ingredient.id + "/select_ndbn" : "/ingredients/select_ndbn";
return this.post(url, this.buildIngredientParams(ingredient));
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 850c0d6..ea5db56 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -11,6 +11,7 @@ import '../lib/GlobalMixins';
import App from '../components/App';
import AppAutocomplete from "../components/AppAutocomplete";
+import AppConfirm from "../components/AppConfirm";
import AppDateTime from "../components/AppDateTime";
import AppDatePicker from "../components/AppDatePicker";
import AppIcon from "../components/AppIcon";
@@ -22,6 +23,7 @@ import AppTagEditor from "../components/AppTagEditor";
import AppTextField from "../components/AppTextField";
Vue.component("AppAutocomplete", AppAutocomplete);
+Vue.component("AppConfirm", AppConfirm);
Vue.component("AppDateTime", AppDateTime);
Vue.component("AppDatePicker", AppDatePicker);
Vue.component("AppIcon", AppIcon);
diff --git a/app/javascript/styles/_wide_modal.scss b/app/javascript/styles/_wide_modal.scss
new file mode 100644
index 0000000..c19d548
--- /dev/null
+++ b/app/javascript/styles/_wide_modal.scss
@@ -0,0 +1,18 @@
+
+@include until($desktop) {
+ .modal.is-wide {
+ .modal-content, .modal-card {
+ margin: 0 20px;
+ width: 100%;
+ }
+ }
+}
+
+@include from($desktop) {
+ .modal.is-wide {
+ .modal-content, .modal-card {
+ margin: 0 auto;
+ width: 1000px;
+ }
+ }
+}
diff --git a/app/javascript/styles/index.scss b/app/javascript/styles/index.scss
index 133ec82..90f7559 100644
--- a/app/javascript/styles/index.scss
+++ b/app/javascript/styles/index.scss
@@ -12,6 +12,7 @@
@import "~bulma/sass/layout/section";
@import "./responsive_controls";
+@import "./wide_modal";
html {
height: 100%;