search and recipe improvements

vue3/src/components/display/RecipeCard.vue

@@ -19,6 +19,10 @@
             <!--            <p class="text-disabled">{{ props.recipe.createdBy.displayName}}</p>-->
             <keywords-component variant="outlined" :keywords="props.recipe.keywords" :max-keywords="3">
                 <template #prepend>
+                     <v-chip class="mb-1 me-1" size="x-small" label variant="outlined" color="info"
+                            v-if="!props.recipe.internal">
+                        {{ $t('External') }}
+                    </v-chip>
                     <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined"
                             v-if="props.recipe.workingTime != undefined && props.recipe.workingTime > 0">
                         {{ recipe.workingTime! + recipe.waitingTime! }}

vue3/src/components/display/RecipeView.vue

@@ -24,7 +24,7 @@
 
             <v-card>
                 <v-sheet class="d-flex align-center">
-                    <span class="ps-2 text-h5  flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
+                    <span class="ps-2 text-h5  flex-grow-1 pa-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
                         {{ props.recipe.name }}
                     </span>
                     <recipe-context-menu :recipe="recipe"></recipe-context-menu>
@@ -37,11 +37,11 @@
                 <v-row class="text-center text-body-2">
                     <v-col class="pt-1 pb-1">
                         <i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
-                        <div class="text-grey">Working Time</div>
+                        <div class="text-grey">{{$t('WorkingTime')}}</div>
                     </v-col>
                     <v-col class="pt-1 pb-1">
                         <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
-                        <div class="text-grey">Waiting Time</div>
+                        <div class="text-grey">{{$t('WaitingTime')}}</div>
                     </v-col>
                     <v-col class="pt-1 pb-1">
 

vue3/src/components/inputs/GlobalSearchDialog.vue

@@ -2,17 +2,21 @@
     <slot name="activator">
         <v-btn @click="dialog = true" variant="plain" density="default" :icon="mobile">
             <v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
-            <span class="d-none d-sm-block">{{$t('Search')}}</span>
-            <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{$t('Ctrl+K')}}</v-chip>
+            <span class="d-none d-sm-block">{{ $t('Search') }}</span>
+            <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{ $t('Ctrl+K') }}</v-chip>
         </v-btn>
     </slot>
 
-    <v-dialog width="90%" max-width="800px" v-model="dialog" location="id_dialog_anchor"
-              location-strategy="connected">
+    <v-dialog v-model="dialog" location="id_dialog_anchor"
+              location-strategy="connected"
+              :max-width="(mobile) ? '100vw': '800px'"
+              :fullscreen="mobile"
+    >
 
         <v-card>
+            <v-closable-card-title :title="$t('Search')" v-model="dialog"></v-closable-card-title>
             <!-- search input -->
-            <v-card-text class="pb-0">
+            <v-card-text class="pt-0 pt-md-2">
                 <v-text-field
                     id="id_global_search_input"
                     v-model="searchQuery"
@@ -22,11 +26,7 @@
                     prepend-inner-icon="fas fa-search"
                     variant="solo"
                 ></v-text-field>
-            </v-card-text>
 
-            <v-divider></v-divider>
-            <!-- search results -->
-            <v-card-text>
                 <v-card :variant="cardVariant(index)" v-for="(item, index) in searchResults" hover class="mt-1" @click="selectedResult = index" :key="index">
                     <v-card-title @click="goToSelectedRecipe(index)">
                         <v-avatar v-if="item.image" :image="item.image"></v-avatar>
@@ -42,14 +42,16 @@
             <v-card-text class="d-none d-sm-block pt-2">
                 <v-chip size="x-small" class="mr-1" label><i class="fas fa-arrow-up"></i></v-chip>
                 <v-chip size="x-small" class="mr-1" label><i class="fas fa-arrow-down"></i></v-chip>
-                <small class="mr-2">{{$t('to_navigate')}}</small>
+                <small class="mr-2">{{ $t('to_navigate') }}</small>
                 <v-chip size="x-small" class="mr-1" label><i class="fas fa-level-down-alt fa-rotate-90"></i></v-chip>
-                <small class="mr-2">{{$t('to_select')}}</small>
+                <small class="mr-2">{{ $t('to_select') }}</small>
                 <v-chip size="x-small" class="mr-1" label> esc</v-chip>
-                <small>{{$t('to_close')}}</small>
-
+                <small>{{ $t('to_close') }}</small>
 
             </v-card-text>
+            <v-card-actions>
+                <v-btn @click="dialog=false" variant="plain">{{$t('Close')}}</v-btn>
+            </v-card-actions>
         </v-card>
 
 
@@ -63,6 +65,7 @@ import {SearchResult} from "@/types/SearchTypes";
 import {ApiApi, Recipe, RecipeFlat} from "@/openapi";
 import {useRouter} from "vue-router";
 import {useDisplay} from "vuetify";
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 
 const router = useRouter()
 const {mobile} = useDisplay()

vue3/src/components/model_editors/RecipeEditor.vue

@@ -158,6 +158,7 @@ onMounted(() => {
     setupState(props.item, props.itemId, {
         newItemFunction: () => {
             editingObj.value.steps = [] as Step[]
+            editingObj.value.internal = true //TODO make database default after v2
         }
     })
 })