From 82c2cc0f4076806cec79fcbe9faa1c4c748b76f9 Mon Sep 17 00:00:00 2001 From: Kaibu Date: Mon, 4 Apr 2022 22:53:26 +0200 Subject: [PATCH] ui improvements --- vue/src/apps/ImportView/ImportView.vue | 359 ++++++++++++------ .../apps/ImportView/ImportViewStepEditor.vue | 12 +- vue/src/components/KeywordsComponent.vue | 2 +- vue/src/components/RecipeCard.vue | 3 +- 4 files changed, 255 insertions(+), 121 deletions(-) diff --git a/vue/src/apps/ImportView/ImportView.vue b/vue/src/apps/ImportView/ImportView.vue index 8ad043c8b..bb39f49d9 100644 --- a/vue/src/apps/ImportView/ImportView.vue +++ b/vue/src/apps/ImportView/ImportView.vue @@ -16,86 +16,112 @@ - Website + + Website + - - -
-
- Multiple RecipesSingle Recipe -
-
- -
-
- - - - - - - - - - -
-
- -
-
-
- Clear recent imports - - +
+
+
+
+ Multiple RecipesSingle Recipe
-
- Clear import list -
    -
  • - {{ x }} -
    • -
- - Import +
+ + + + + + + + + +
+
+ +
+ Clear import list +
    +
  • + {{ x }} +
    • +
+ + Import + +
- - - +
+ + + + + - + - Options - + + Options + + - + +
+
+

{{ + recipe_json.name + }}

+ + + + + + + +
+
Click the image you want to import for this recipe -
-
No additional images found in source. - +
+
+ +
+
-
-
- - - - - {{ - k.label - }} +
+
+ + +
+ Keywords + + + + + + +
+ + + + +
+ {{ + k.label + }} + +
- - - - -
-
- - - - {{ - k.label - }} - - - + +
@@ -157,27 +193,35 @@ - + - Import - + + Import + + - + + + + + + + Import & View - Import & Edit - Import & start new import + Import & Edit + + Import & Restart - - + - @@ -250,9 +294,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css' import {resolveDjangoStatic, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"; import axios from "axios"; import {ApiApiFactory} from "@/utils/openapi/api"; -import draggable from "vuedraggable"; import {INTEGRATIONS} from "@/utils/integration"; import ImportViewStepEditor from "@/apps/ImportView/ImportViewStepEditor"; +import RecipeCard from "@/components/RecipeCard"; +import LoadingSpinner from "@/components/LoadingSpinner"; Vue.use(BootstrapVue) @@ -263,8 +308,9 @@ export default { ToastMixin, ], components: { - ImportViewStepEditor, - draggable, + LoadingSpinner, + RecipeCard, + ImportViewStepEditor }, data() { return { @@ -295,7 +341,9 @@ export default { recipe_app: undefined, import_duplicates: false, recipe_files: [], - // Bookmarklet + loading: false, + empty_input: false, + edit_name: false,// Bookmarklet BOOKMARKLET_CODE: window.BOOKMARKLET_CODE } }, @@ -315,6 +363,8 @@ export default { * @param data: if parameter is passed ignore global application state and import form data variable */ importRecipe: function (action, data) { + this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.show)) + let apiFactory = new ApiApiFactory() let recipe_json = data !== undefined ? data : this.recipe_json apiFactory.createRecipe(recipe_json).then(response => { // save recipe @@ -372,6 +422,16 @@ export default { window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls)) } + if (this.website_url === '') { + this.empty_input = true + setTimeout(() => { + this.empty_input = false + }, 1000) + return + } + + this.loading = true + // reset all variables this.recipe_html = undefined this.recipe_json = undefined @@ -389,10 +449,17 @@ export default { } return axios.post(resolveDjangoUrl('api_recipe_from_source'), payload,).then((response) => { + this.loading = false this.recipe_json = response.data['recipe_json']; - this.$set(this.recipe_json, 'unused_keywords', this.recipe_json.keywords.filter(k => k.id === undefined)) - this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.id !== undefined)) + this.recipe_json.keywords.map(x => { + if (x.id === undefined) { + x.show = false + } else { + x.show = true + } + return x + }) this.recipe_tree = response.data['recipe_tree']; this.recipe_html = response.data['recipe_html']; @@ -438,6 +505,22 @@ export default { }) }, /** + * Adds Website to url list, prevents duplicates + */ + addWebsiteToURLList: function (url) { + if (this.website_url_list.indexOf(url) === -1 && url !== '') { + this.website_url_list.push(url) + } + }, + /** + * Handles pasting URLs + */ + onURLPaste: function (evt) { + this.website_url = evt.clipboardData.getData('text') + this.loadRecipe(false, undefined) + return true; + }, + /**loadRecipe(false,undefined) * Clear list of recently imported recipe urls */ clearRecentImports: function () { @@ -459,12 +542,62 @@ export default { `document.body.appendChild(document.createElement("script")).src="${localStorage.getItem('BASE_PATH')}${resolveDjangoStatic('/js/bookmarklet.js')}?r="+Math.floor(Math.random()*999999999)}` + `})()` } - } + }, + directives: { + hover: { + inserted: function (el) { + el.addEventListener("mouseenter", () => { + el.classList.add("shadow") + }) + el.addEventListener("mouseleave", () => { + el.classList.remove("shadow") + }) + }, + }, + }, } diff --git a/vue/src/apps/ImportView/ImportViewStepEditor.vue b/vue/src/apps/ImportView/ImportViewStepEditor.vue index f54002d23..f9983e2e8 100644 --- a/vue/src/apps/ImportView/ImportViewStepEditor.vue +++ b/vue/src/apps/ImportView/ImportViewStepEditor.vue @@ -1,13 +1,13 @@