cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basics of v2 search working

Browse Source
This commit is contained in:
vabene1111 2021-04-17 12:57:02 +02:00
parent 17c5084bc0
commit 3194a7580d
9 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/recipes.iml
View File

@ -6,7 +6,7 @@
<option name="rootFolder" value="$MODULE_DIR$" />
<option name="settingsModule" value="recipes/settings.py" />
<option name="manageScript" value="$MODULE_DIR$/manage.py" />
<option name="environment" value="&lt;map&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;POSTGRES_USER&lt;/string&gt;&#10; &lt;string&gt;postgres&lt;/string&gt;&#10; &lt;/entry&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;POSTGRES_HOST&lt;/string&gt;&#10; &lt;string&gt;localhost&lt;/string&gt;&#10; &lt;/entry&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;DB_ENGINE&lt;/string&gt;&#10; &lt;string&gt;django.db.backends.postgresql_psycopg2&lt;/string&gt;&#10; &lt;/entry&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;POSTGRES_PORT&lt;/string&gt;&#10; &lt;string&gt;5432&lt;/string&gt;&#10; &lt;/entry&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;POSTGRES_PASSWORD&lt;/string&gt;&#10; &lt;string&gt;Computer1234&lt;/string&gt;&#10; &lt;/entry&gt;&#10; &lt;entry&gt;&#10; &lt;string&gt;POSTGRES_DB&lt;/string&gt;&#10; &lt;string&gt;recipes_db&lt;/string&gt;&#10; &lt;/entry&gt;&#10;&lt;/map&gt;" />
<option name="environment" value="&lt;map/&gt;" />
<option name="doNotUseTestRunner" value="false" />
<option name="trackFilePattern" value="migrations" />
</configuration>

2
cookbook/static/vue/js/import_response_view.js
View File

File diff suppressed because one or more lines are too long

2
cookbook/static/vue/js/offline_view.js
View File

File diff suppressed because one or more lines are too long

2
cookbook/static/vue/js/recipe_search_view.js
View File

File diff suppressed because one or more lines are too long

2
cookbook/static/vue/js/recipe_view.js
View File

File diff suppressed because one or more lines are too long

4
cookbook/templates/search.html
View File

@ -8,7 +8,7 @@
{% block content_fluid %}
<div id="app">
<div id="app" >
<recipe-search-view></recipe-search-view>
</div>
@ -24,7 +24,7 @@
{% endif %}
<script type="application/javascript">
window.IMAGE_PLACEHOLDER = "{% static 'assets/recipe_no_image.svg' %}"
</script>
{% render_bundle 'chunk-vendors' %}

15
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="app">
<div id="app" style="margin-bottom: 4vh">
<div class="row">
<div class="col-xl-2 d-none d-xl-block">
@ -10,19 +10,18 @@
<div class="row">
<div class="col col-md-12">
<b-input class="form-control" v-model="search_input" @keyup="refreshData"></b-input>
<b-input class="form-control" v-model="search_input" @keyup="refreshData" v-bind:placeholder="$t('Search')"></b-input>
</div>
</div>
<div class="row">
<div class="row" style="margin-top: 2vh">
<div class="col col-md-12">
<b-card-group deck>
<recipe-card style="max-width: 15vw; height: 30vh" v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
</b-card-group>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
</div>
</div>
</div>
</div>
<div class="col-xl-2 d-none d-xl-block">
@ -68,7 +67,7 @@ export default {
refreshData: function () {
let apiClient = new ApiApiFactory()
apiClient.listRecipes({query: {query: this.search_input, limit: 10}}).then(result => {
apiClient.listRecipes({query: {query: this.search_input, limit: 20}}).then(result => {
this.recipes = result.data
})
}

2
vue/src/components/Keywords.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="recipe.keywords.length > 0">
<small :key="k.id" v-for="k in recipe.keywords" style="padding: 2px">
{{k.icon}} {{k.name}}
<b-badge pill variant="light">{{k.label}}</b-badge>
</small>
</div>
</template>

39
vue/src/components/RecipeCard.vue
View File

@ -1,31 +1,52 @@
<template>
<div>
<div>
<b-card no-body>
<b-card-img-lazy style="height: 15vh; object-fit: cover" :src=recipe_image v-bind:alt="$t('Recipe_Image')"
top></b-card-img-lazy>
<b-card-img-lazy :src=recipe.image v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
<recipe-context-menu :recipe="recipe" style="float:right"></recipe-context-menu>
</div>
<b-card-body :title=recipe.name>
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
<b-card-text>
<b-card-body :title=recipe.name title-tag="h5">
<b-card-text style="text-overflow: ellipsis">
{{ recipe.description }}
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
</b-card-text>
</b-card-body>
</b-card>
</div>
</div>
</template>
<script>
import RecipeContextMenu from "@/components/RecipeContextMenu";
import Keywords from "@/components/Keywords";
export default {
name: "RecipeCard",
components: {RecipeContextMenu},
components: {Keywords, RecipeContextMenu},
props: {
recipe: Object,
},
data() {
return {
recipe_image: '',
}
},
mounted() {
if (this.recipe.image === null) {
this.recipe_image = window.IMAGE_PLACEHOLDER
} else {
this.recipe_image = this.recipe.image
}
}
}
</script>