improved code quality of start page scrollers

cookbook/views/views.py

@@ -34,25 +34,12 @@
 
 
 def index(request):
-    return HttpResponseRedirect(reverse('vue3'))
-
     with scopes_disabled():
         if not request.user.is_authenticated:
             if User.objects.count() < 1 and 'django.contrib.auth.backends.RemoteUserBackend' not in settings.AUTHENTICATION_BACKENDS:
                 return HttpResponseRedirect(reverse_lazy('view_setup'))
-            return HttpResponseRedirect(reverse_lazy('view_search'))
-
-    try:
-        page_map = {
-            UserPreference.SEARCH: reverse_lazy('view_search'),
-            UserPreference.PLAN: reverse_lazy('view_plan'),
-            UserPreference.BOOKS: reverse_lazy('view_books'),
-            UserPreference.SHOPPING: reverse_lazy('view_shopping'),
-        }
 
-        return HttpResponseRedirect(page_map.get(request.user.userpreference.default_page))
-    except UserPreference.DoesNotExist:
-        return HttpResponseRedirect(reverse('view_search'))
+    return HttpResponseRedirect(reverse('vue3'))
 
 
 def search(request):

vue3/src/apps/tandoor/Tandoor.vue

@@ -6,6 +6,15 @@
             </router-link>
             <v-spacer></v-spacer>
             <global-search-dialog></global-search-dialog>
+            <v-btn icon="$add">
+                <v-icon icon="$add"></v-icon>
+                <v-menu activator="parent">
+                    <v-list>
+                        <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'Recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
+                        <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-btn>
 
             <v-avatar color="primary" class="me-2">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
                 <v-menu activator="parent">

vue3/src/components/display/HorizontalRecipeWindow.vue

@@ -1,71 +1,159 @@
 <template>
-    <v-row justify="space-between">
-        <v-col>
-            <h4><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i> {{ title }}</h4>
-        </v-col>
-    </v-row>
-
-    <v-row class="mt-0" v-if="recipeWindows.length > 0">
-        <v-col>
-            <v-window show-arrows>
-                <v-window-item v-for="w in recipeWindows" class="pt-1 pb-1">
-                    <v-row>
-                        <v-col v-for="r in w" :key="r.id">
-                            <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 20vh"></recipe-card>
-                        </v-col>
-                    </v-row>
-                </v-window-item>
-            </v-window>
-        </v-col>
-    </v-row>
-    <v-row v-if="recipeWindows.length == 0 && skeletons > 0">
-        <v-col>
-            <v-window>
-                <v-window-item>
-                    <v-row>
-                        <v-col v-for="n in skeletons">
-                            <v-skeleton-loader :elevation="3" type="card"></v-skeleton-loader>
-                        </v-col>
-                    </v-row>
-                </v-window-item>
-            </v-window>
-        </v-col>
-    </v-row>
+    <template v-if="loading || recipes.length > 0">
+        <v-row justify="space-between">
+            <v-col>
+                <h4><i :class="icon + ' fa-fw'"></i> {{ title }}</h4>
+            </v-col>
+        </v-row>
 
+        <v-row class="mt-0" v-if="recipeWindows.length > 0">
+            <v-col>
+                <v-window show-arrows>
+                    <v-window-item v-for="w in recipeWindows" class="pt-1 pb-1">
+                        <v-row>
+                            <v-col v-for="r in w" :key="r.id">
+                                <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 20vh"></recipe-card>
+                            </v-col>
+                        </v-row>
+                    </v-window-item>
+                </v-window>
+            </v-col>
+        </v-row>
+
+        <v-row v-if="skeletons > 0 && loading">
+            <v-col>
+                <v-window>
+                    <v-window-item>
+                        <v-row>
+                            <v-col v-for="n in skeletons">
+                                <v-skeleton-loader :elevation="3" type="card"></v-skeleton-loader>
+                            </v-col>
+                        </v-row>
+                    </v-window-item>
+                </v-window>
+            </v-col>
+        </v-row>
+    </template>
 </template>
 
 
 <script lang="ts" setup>
-import {computed, PropType, toRefs} from 'vue'
+import {computed, onMounted, PropType, ref, toRefs} from 'vue'
 import RecipeCard from "@/components/display/RecipeCard.vue";
 import {DisplayBreakpoint, useDisplay} from "vuetify";
-import {Recipe, RecipeOverview} from "@/openapi";
+import {ApiApi, ApiRecipeListRequest, Keyword, Recipe, RecipeOverview} from "@/openapi";
 import {homePageCols} from "@/utils/breakpoint_utils";
+import {useI18n} from "vue-i18n";
 
-
+//TODO mode ideas "last year/month/cooked long ago"
 const props = defineProps(
     {
-        title: {type: String as PropType<undefined | String>, required: true},
-        icon: {type: String, required: false},
+        mode: {type: String as PropType<'recent' | 'new' | 'keyword' | 'rating'>, required: true},
         skeletons: {type: Number, default: 0},
-        recipes: {
-            type: Array as PropType<Recipe[] | RecipeOverview[]>,
-            required: true
-        },
     }
 )
-const {title, recipes} = toRefs(props)
 
-let numberOfCols = computed(() => {
-    const {name} = useDisplay()
+const {t} = useI18n()
+const {name} = useDisplay()
+
+const loading = ref(true)
+const recipes = ref([] as Recipe[] | RecipeOverview[])
+const keyword = ref({} as Keyword)
+
+/**
+ * determine title based on type
+ */
+const title = computed(() => {
+    switch (props.mode) {
+        case 'recent':
+            return t('Recently_Viewed')
+        case 'new':
+            return t('New')
+        case 'rating':
+            return t('Rating')
+        case 'keyword':
+            if (Object.keys(keyword.value).length > 0) {
+                return keyword.value.label
+            }
+            return t('Keyword')
+    }
+})
+
+/**
+ * determine icon based on type
+ */
+const icon = computed(() => {
+    switch (props.mode) {
+        case 'recent':
+            return 'fa-solid fa-eye'
+        case 'new':
+            return 'fa-solid fa-calendar-alt'
+        case 'rating':
+            return 'fa-solid fa-star'
+        case 'keyword':
+            return 'fa-solid fa-tags'
+    }
+})
+
+/**
+ * number of columns to show depending on display size
+ */
+const numberOfCols = computed(() => {
     return homePageCols(name.value)
 })
 
-type CustomWindow = {
-    id: number,
-    recipes: Array<Recipe | RecipeOverview>
+onMounted(() => {
+    loadRecipes()
+})
+
+/**
+ * load recipes depending on type by creating request parameters and executing request function
+ */
+function loadRecipes() {
+    let api = new ApiApi()
+    let requestParameters = {pageSize: 16} as ApiRecipeListRequest
+
+    switch (props.mode) {
+        case 'recent':
+            // TODO implement correct parameter
+            requestParameters._new = 'true'
+            break;
+        case 'new':
+            requestParameters._new = 'true'
+            break;
+        case 'rating':
+            requestParameters.rating = 4
+            break;
+        case 'keyword':
+            api.apiKeywordList({random: "true", limit: "1"}).then((r) => {
+                if (r.count > 0) {
+                    keyword.value = r.results[0]
+                    requestParameters.keywords = [keyword.value.id!]
+                    doRecipeRequest(requestParameters)
+                }
+            })
+            return;
+    }
+    doRecipeRequest(requestParameters)
+}
+
+/**
+ * actual request function requesting the recipes from the server based on the given parameters
+ * @param params
+ */
+function doRecipeRequest(params: ApiRecipeListRequest) {
+    let api = new ApiApi()
+
+    api.apiRecipeList(params).then((r) => {
+        recipes.value = r.results
+    }).finally(() => {
+        loading.value = false
+    })
 }
 
+/**
+ * split the list of recipes into windows for display based on column count
+ */
 let recipeWindows = computed(() => {
     let windows = []
     let current_window = []

vue3/src/locales/ar.json

@@ -113,6 +113,7 @@
   "Food_Alias": "",
   "Foods": "",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "",
   "Hide_Food": "",
   "Hide_Keyword": "",

vue3/src/locales/bg.json

@@ -110,6 +110,7 @@
   "Food_Alias": "Псевдоним на храната",
   "Foods": "Храни",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Групирай по",
   "Hide_Food": "Скриване на храна",
   "Hide_Keyword": "Скриване на ключови думи",

vue3/src/locales/ca.json

@@ -153,6 +153,7 @@
   "Food_Replace": "",
   "Foods": "",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "",
   "Hide_Food": "",
   "Hide_Keyword": "",

vue3/src/locales/cs.json

@@ -153,6 +153,7 @@
   "Food_Replace": "Nahrazení v potravině",
   "Foods": "Potraviny",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Seskupit podle",
   "Hide_Food": "Skrýt potravinu",
   "Hide_Keyword": "Skrýt štítky",

vue3/src/locales/da.json

@@ -141,6 +141,7 @@
   "Food_Replace": "Erstat ingrediens",
   "Foods": "Mad",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Grupper efter",
   "Hide_Food": "Skjul mad",
   "Hide_Keyword": "Skjul nøgleord",

vue3/src/locales/de.json

@@ -155,6 +155,7 @@
   "Food_Replace": "Essen Ersetzen",
   "Foods": "Lebensmittel",
   "Friday": "Freitag",
+  "GettingStarted": "Erste Schritte",
   "GroupBy": "Gruppieren nach",
   "Hide_Food": "Lebensmittel verbergen",
   "Hide_Keyword": "Schlüsselwörter verbergen",

vue3/src/locales/el.json

@@ -136,6 +136,7 @@
   "Food_Alias": "Ψευδώνυμο φαγητού",
   "Foods": "Φαγητά",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Ομαδοποίηση κατά",
   "Hide_Food": "Απόκρυψη φαγητού",
   "Hide_Keyword": "Απόκρυψη λέξεων-κλειδί",

vue3/src/locales/en.json

@@ -154,6 +154,7 @@
   "Food_Replace": "Food Replace",
   "Foods": "Foods",
   "Friday": "Friday",
+  "GettingStarted": "Getting Started",
   "GroupBy": "Group By",
   "Hide_Food": "Hide Food",
   "Hide_Keyword": "Hide keywords",

vue3/src/locales/es.json

@@ -154,6 +154,7 @@
   "Food_Replace": "Sustituir Alimento",
   "Foods": "Comida",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Agrupar por",
   "Hide_Food": "Esconder ingrediente",
   "Hide_Keyword": "Esconder Palabras Clave",

vue3/src/locales/fi.json

@@ -83,6 +83,7 @@
   "Food": "Ruoka",
   "Food_Alias": "Ruoan nimimerkki",
   "Friday": "",
+  "GettingStarted": "",
   "Hide_Food": "Piilota ruoka",
   "Hide_Keyword": "Piilota avainsana",
   "Hide_Keywords": "Piilota Avainsana",

vue3/src/locales/fr.json

@@ -153,6 +153,7 @@
   "Food_Replace": "Remplacer l'aliment",
   "Foods": "Aliments",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Grouper par",
   "Hide_Food": "Cacher l’aliment",
   "Hide_Keyword": "masquer les mots clefs",

vue3/src/locales/he.json

@@ -154,6 +154,7 @@
   "Food_Replace": "החלף אוכל",
   "Foods": "מאכלים",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "אסוף לפי",
   "Hide_Food": "הסתר אוכל",
   "Hide_Keyword": "הסתר מילות מפתח",

vue3/src/locales/hu.json

@@ -137,6 +137,7 @@
   "Food_Replace": "Étel cseréje",
   "Foods": "Alapanyagok",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Csoportosítva",
   "Hide_Food": "Alapanyag elrejtése",
   "Hide_Keyword": "Kulcsszavak elrejtése",

vue3/src/locales/hy.json

@@ -62,6 +62,7 @@
   "Files": "",
   "Food": "Սննդամթերք",
   "Friday": "",
+  "GettingStarted": "",
   "Hide_Food": "Թաքցնել սննդամթերքը",
   "Hide_Keywords": "Թաքցնել բանալի բառը",
   "Hide_Recipes": "Թաքցնել բաղադրատոմսերը",

vue3/src/locales/id.json

@@ -125,6 +125,7 @@
   "Food_Alias": "",
   "Foods": "",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "",
   "Hide_Food": "",
   "Hide_Keyword": "",

vue3/src/locales/is.json

@@ -153,6 +153,7 @@
   "Food_Replace": "",
   "Foods": "",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "",
   "Hide_Food": "",
   "Hide_Keyword": "",

vue3/src/locales/it.json

@@ -130,6 +130,7 @@
   "Food_Alias": "Alias Alimento",
   "Foods": "Alimenti",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "Raggruppa per",
   "Hide_Food": "Nascondi alimento",
   "Hide_Keyword": "Nascondi parole chiave",

vue3/src/locales/lt.json

@@ -139,6 +139,7 @@
   "Food_Replace": "",
   "Foods": "",
   "Friday": "",
+  "GettingStarted": "",
   "GroupBy": "",
   "Hide_Food": "",
   "Hide_Keyword": "",