series update, image filename url safe

assets/css/tailwind.css

@@ -338,4 +338,19 @@
 .progressbar::-moz-range-progress {
   height: 4px;
   background: rgb(216, 216, 216);
+}
+
+.page-enter-active, 
+.page-enter-leave {
+  transition: all 0.5s;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(100%) scale(0.9); 
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-100%) scale(0.9); 
 }

backend/src/controller/Serie.ts

@@ -0,0 +1,22 @@
+import Serie from "../entities/Serie";
+import { setLastAndFirst } from "../services/serieService";
+import { simpleSave } from "./All";
+import {Request, Response} from "express";
+import { respond } from "../tools/Controller";
+
+export async function updateSerieAfterEpisodeChange(request: Request, response: Response) {
+  try {
+    const body = request.body as any;
+    if (body.hasOwnProperty('id')) {
+      if (body.hasOwnProperty('title')) {
+        simpleSave<Serie>(Serie, request, response)
+      } else {
+        var slug = await setLastAndFirst(body.id)
+        respond(response,200,slug)
+      }
+    } else
+    return respond(response, 501, "nd data");
+  } catch (err) {
+    return respond(response, 500, err.message);
+  }
+}

backend/src/routes.ts

@@ -12,6 +12,7 @@ import { getRouteSlug } from "./tools/Configuration";
 import { getMetadata } from "./controller/Settings";
 import { generateRssAction } from "./controller/Podcast";
 import { migrateEpisode } from "./controller/Migrate";
+import { updateSerieAfterEpisodeChange } from "./controller/Serie";
 
 /**
  * All application routes.
@@ -76,6 +77,11 @@ export const AuthRoutes = [
         path: getRouteSlug("SERIES_AP"),
         method: "post",
         action:  (req, res) => simpleSaveMultiple<Serie>(Serie,req,res)
+    },     
+    {
+        path: getRouteSlug("SERIE_AP"),
+        method: "post",
+        action:  (req, res) => updateSerieAfterEpisodeChange(req,res)
     }, 
     {
         path: getRouteSlug("FETCHLOCAL_AP"),

base/Converters.ts

@@ -62,16 +62,23 @@ export function dateToString(date: Date, locale: string) : string {
     return dateToIsoString(date)
 }
 
+export function urlFriendlyString(text: string) :string {
+  return saveSlugFormText(text)
+}
+
 export function saveSlugFormText(text: string, lowercase = true): string {
   var slug = (lowercase?text.toLowerCase():text);
   return slug
     .replace(/([:;\.,]+\s?)+/g, "_")
     .replace(/([!'/()*"~#@?%&\\:;,<>\*\+\|]|\DE\/EN)+/g, "")
     .replace(" deen", "")
-    .replace("ä", "ae")
-    .replace("ö", "oe")
-    .replace("ü", "ue")
-    .replace("ß", "ss")
+    .replaceAll("ä", "ae")
+    .replaceAll("ö", "oe")
+    .replaceAll("ü", "ue")
+    .replaceAll("Ä", "Ae")
+    .replaceAll("Ö", "Oe")
+    .replaceAll("Ü", "Ue")
+    .replaceAll("ß", "ss")
     .replace(/\s+/g, "_");
 }
 

components/AudioFileSelector.vue

@@ -76,6 +76,7 @@ export default defineComponent({
           audioFile.value.imgblob = array2blob(  
             id3tag.image.data,
             id3tag.image.mime)
+          console.log(audioFile.value.cover_preview)
         }
       }  catch(err) {
         console.log(err)

components/ImageSelector.vue

@@ -55,7 +55,7 @@ export default defineComponent({
 
     const preview = computed(() => {
       if (imgMetadata.value && imgMetadata.value.preview)
-        return imgMetadata.value.preview;
+        return imgMetadata.value.preview // (ContentFile.isQualifiedUrl(imgMetadata.value.preview)?:imgMetadata.value.preview);
       return "";
     })
 
@@ -68,7 +68,15 @@ export default defineComponent({
         imgMetadata.value.imgWidth = img.naturalWidth;
         imgMetadata.value.imgHeight = img.naturalHeight;
         callback();
-      };
+      }
+      img.onerror = () => {
+        imgMetadata.value.preview = undefined;
+        imgMetadata.value.selectedFile = undefined;
+        imgMetadata.value.blob = undefined;
+        imgMetadata.value.imgWidth = 0;
+        imgMetadata.value.imgHeight = 0;
+        callback();
+      }
       img.src = source;
     }
 

components/PodcastDetail.vue

@@ -72,7 +72,7 @@ import type IPostdata from "~~/base/types/IPostdata";
 import validation from "~~/base/PodcastDetailValidation";
 import ImageMetadata from "~~/base/types/ImageMetadata";
 import type IValidationError from "~~/base/types/IValidationError";
-import { saveSlugFormText } from "~~/base/Converters";
+import { getSaveFilename, saveSlugFormText } from "~~/base/Converters";
 
 export default defineComponent({
   props: {
@@ -112,7 +112,7 @@ export default defineComponent({
 
     watch(() => fields.value.title, () => generateSlug())
 
-    function getImageInFormData() {
+    function getImageInFormData(newFilename: string) {
       const fd = new FormData();
       if (imgMetadata.value.selectedFile) {
         fd.append("path", SERVER_IMG_PATH + fields.value.slug);
@@ -121,7 +121,7 @@ export default defineComponent({
           imgMetadata.value.selectedFile,
           imgMetadata.value.selectedFile.name
         );
-        fd.append("filename", imgMetadata.value.selectedFile.name);
+        fd.append("filename", newFilename);
       }
       return fd;
     }
@@ -138,14 +138,17 @@ export default defineComponent({
       event.stopImmediatePropagation();
       
       const myFetch = useFetchApi()
+      
+      var newFilename = ""
+
       if (imgMetadata.value.selectedFile) {
+        newFilename = getSaveFilename(imgMetadata.value.selectedFile.name)
         fields.value.cover_file =
           SERVER_IMG_PATH +
           fields.value.slug +
-          "/" +
-          imgMetadata.value.selectedFile.name
+          "/" + newFilename
       }
-
+      
       errors.value = validation(
         fields.value,
         imgMetadata.value.imgWidth,
@@ -165,7 +168,7 @@ export default defineComponent({
         var postResult: any = { statusCode: 201 }
         try {
           if (imgMetadata.value.selectedFile) {
-            postData.body = getImageInFormData()
+            postData.body = getImageInFormData(newFilename)
             postResult = await myFetch( UPLOAD_AP, postData)
           }
         } catch (err) {

components/SerieDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <PageFormDetail type="serie" :fields="fields" @frmsave="save" @frmremove="remove" @frmcancel="cancel">
-    <ImageSelector filename="fields.cover_file" :preview="imgMetadata.preview" @imageSelected="imageSelected" />
+    <ImageSelector :filename="fields.cover_file" :preview="imgMetadata.preview" @imageSelected="imageSelected" />
     <!-- Fields-->
     <InputArea :name="'title'" :label="'serie.label.title'" :errors="errors" v-model:value="fields.title" />
     <InputArea :name="'subtitle'" :label="'serie.label.subtitle'" :errors="errors" v-model:value="fields.subtitle" />
@@ -30,6 +30,7 @@ import type ISerie from "../base/types/ISerie";
 import ImageMetadata from "~~/base/types/ImageMetadata";
 import type IValidationError from "~~/base/types/IValidationError";
 import { COUNT_AP, SERIES_AP, SERIES_IMG_PATH, SERVER_IMG_PATH, UPLOAD_AP } from "~~/base/Constants";
+import { getSaveFilename } from "~/backend/src/tools/Converters";
 
 export default defineComponent({
   props: {
@@ -68,7 +69,7 @@ export default defineComponent({
       const fd = new FormData();
       if (fileObj) {
         fd.append("cover", fileObj, fileObj.name);
-        fd.append("filename", fileObj.name);
+        fd.append("filename", getSaveFilename(fileObj.name));
         fd.append("path", path)
       }
       return fd;
@@ -87,7 +88,7 @@ export default defineComponent({
         result = await myFetch( UPLOAD_AP, postData) as any;
       }
       if ((result as any).statusCode == 201 && fileObj) {
-        linkToContent = path + "/" + fileObj.name;
+        linkToContent = path + "/" + getSaveFilename(fileObj.name);
       }
       return {
         link: linkToContent,

cypress/e2e/serie-edit.cy.js

@@ -11,7 +11,7 @@ describe('', () => {
   beforeEach('Edit serie Page', () => {
     cy.login().then( ()=> {
       cy.createSerie(slug).then( ser => {
-        cy.visitNuxtDev('/admin/serie/'+ser.slug)
+        cy.visitNuxtDev('/admin/serie/'+slug)
       })
     })
     cy.contains('Serie bearbeiten')

nuxt.config.ts

@@ -51,6 +51,14 @@ export default defineNuxtConfig({
     classSuffix: '',
     classPrefix: '',
   },
+  // css: [ './assets/css/tailwind.css' 
+  // ],
+  // app: {
+  //   pageTransition: {
+  //     name: 'page',
+  //     mode: 'out-in'
+  //   }
+  // },
   runtimeConfig: {
     public: {
       url: process.env.NUXT_PUBLIC_URL,

pages/admin/[episodeslug]/index.vue

@@ -11,9 +11,6 @@ const {on_mounted, on_before, on_user_changed} = useMounted(refresh, user, true)
 onMounted( on_mounted )
 onBeforeMount( on_before )
 watch(user, on_user_changed);
-onBeforeUpdate(()=> {
-  console.log("Hi")
-  refresh()})
 
 const myFetch = useFetchApi()
 const router = useRouter()

pages/admin/new-serie.vue

@@ -21,7 +21,7 @@ const serie = ref(emptyISerieFactory());
 const router = useRouter();
 
 async function save(slug: string) {
-  router.push("/series");
+  router.push("/series?refresh=true");
 }
 
 function cancel() {