various improvements

vue3/src/pages/ModelEditPage.vue

@@ -5,6 +5,7 @@
                 <v-card>
                     <v-card-text class="pt-2 pb-2">
                         <v-btn variant="flat" @click="router.go(-1)" prepend-icon="fa-solid fa-arrow-left">{{ $t('Back') }}</v-btn>
+                        <v-btn variant="flat" @click="router.push({name : 'RecipeViewPage', params: {id: props.id}})" class="float-right" prepend-icon="fa-solid fa-eye" v-if="props.id && model.toLowerCase() == 'recipe'">{{$t('View')}}</v-btn>
                     </v-card-text>
                 </v-card>
             </v-col>
@@ -21,7 +22,7 @@
 
 import {useRouter} from "vue-router";
 import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
-import {defineAsyncComponent, onMounted, PropType, shallowRef} from "vue";
+import {defineAsyncComponent, onMounted, PropType, shallowRef, watch} from "vue";
 import {useI18n} from "vue-i18n";
 
 const {t} = useI18n()
@@ -35,6 +36,13 @@ const editorComponent = shallowRef(defineAsyncComponent(() => import(`@/componen
 
 const router = useRouter()
 
+//TODO quick hack for some edge cases, move to proper reinitialization of all model editors should this case occur (currently only recipe editor create new via navigation btn)
+watch(() => props.id, (newValue, oldValue) => {
+    if(newValue != oldValue){
+        location.reload()
+    }
+})
+
 /**
  * after creation open object with correct URL in edit mode
  * @param obj obj that was created

vue3/src/pages/TestPage.vue

@@ -1,27 +1,16 @@
 <template>
     <v-container>
-
         <v-row>
             <v-col>
-                <v-text-field v-model="dateTest1" label="Test 1 - text field type date" type="date"></v-text-field>
+                <p>Test P1</p>
+                <p>Test 2P</p>
+                <ol>
+                    <li>Test 1</li>
+                    <li>Test 2</li>
+                    <li>Test 3</li>
+                </ol>
+                <p>Text Bla Bla3</p>
             </v-col>
-            <v-col>
-                {{ dateTest1 }}
-            </v-col>
-        </v-row>
-
-        <v-row>
-            <v-col>
-                <v-date-input v-model="dateTest2" label="Test 2 - date input"></v-date-input>
-            </v-col>
-            <v-col> {{ dateTest2 }}</v-col>
-        </v-row>
-
-        <v-row>
-            <v-col>
-                <v-date-input v-model="dateTest3" label="Test 3 - date input with routeQueryModel"></v-date-input>
-            </v-col>
-            <v-col> {{ dateTest3 }}</v-col>
         </v-row>
 
 
@@ -36,50 +25,6 @@ import {useRouteQuery} from "@vueuse/router";
 import {DateTime} from "luxon";
 
 
-const dateTest1 = ref(null)
-const dateTest2 = ref(null)
-
-const dateTest3 = useRouteQuery('cookedonGte', null, {
-    transform: {
-        get: (value: string | null | Date) => {
-
-            if (value == null) {
-                console.log('get null')
-                return null
-            } else {
-                console.log('get', new Date(value), (new Date(value)).getMonth())
-                return new Date(value)
-            }
-        },
-        set: value => {
-
-            if (value == null) {
-                console.log('-- set null')
-                return null
-            } else {
-                console.log('-- set', DateTime.fromJSDate(new Date(value)).toISODate())
-                return DateTime.fromJSDate(new Date(value)).toISODate()
-            }
-        }
-    }
-})
-
-const typeOfDateTest1 = computed(() => {
-    return dateTest1 instanceof Date
-})
-
-const typeOfDateTest2 = computed(() => {
-    return dateTest2 instanceof Date
-})
-
-watch(dateTest1, () => {
-    console.log(dateTest1.value, dateTest1.value.getMonth())
-})
-
-watch(dateTest2, () => {
-    console.log(dateTest2.value, dateTest2.value.getMonth())
-})
-
 </script>