[yoga-19] our.specialities.component.tsx make image editable

yoga-app/src/api/strapi/query/home.json

@@ -140,6 +140,9 @@
         },
         "right4": {
           "fields": ["*"]
+        },
+        "image": {
+          "fields": ["name","mime","url"]
         }
       }
     }

yoga-app/src/api/strapi/query/services.json

@@ -51,6 +51,9 @@
         },
         "right4": {
           "fields": ["*"]
+        },
+        "image": {
+          "fields": ["name","mime","url"]
         }
       }
     },

yoga-app/src/components/our.specialities.component.tsx

@@ -1,6 +1,8 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import OurSpecialitiesItemComponent from "@/components/our.specialities.item.component";
 import {YogaSpecialitiesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-specialities-component";
+import {StrapiFile} from "@/types/types";
+import strapiApi from "@/api/strapi/strapi-api";
 
 export interface Props{
     config: YogaSpecialitiesComponent_Plain
@@ -14,8 +16,14 @@ const OurSpecialitiesComponent = ({ config: { title,header,description,
     right1,
     right2,
     right3,
-    right4
+    right4,
+    image
 } }: Props) => {
+
+
+    const imageFile: StrapiFile = image as StrapiFile;
+    const imageUrl = strapiApi.getImageUrl(imageFile?.url)
+
     return (
 
         <section className="our_specialties_section">
@@ -43,7 +51,7 @@ const OurSpecialitiesComponent = ({ config: { title,header,description,
                     </div>
                     <div className="col-lg-6 col-md-4 col-sm-6 col-xs-12 d-md-block d-none">
                         <figure className="specialties_image mb-0">
-                            <YogaImageComponent src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
+                            <YogaImageComponent src={imageUrl} alt="" className="img-fluid" />
                         </figure>
                     </div>
                     <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">

yoga-app/src/types/generated-strapi-interfaces/api/yoga-specialities-component.ts

@@ -1,7 +1,9 @@
 // Interface automatically generated by schemas-to-ts
 
 import { YogaSingleSpeciality } from './yoga-single-speciality';
+import { Media } from '../components/shared/Media';
 import { YogaSingleSpeciality_Plain } from './yoga-single-speciality';
+import { Media_Plain } from '../components/shared/Media';
 import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
 
 export interface YogaSpecialitiesComponent {
@@ -19,6 +21,7 @@ export interface YogaSpecialitiesComponent {
     right2?: { data: YogaSingleSpeciality };
     right3?: { data: YogaSingleSpeciality };
     right4?: { data: YogaSingleSpeciality };
+    image?: { data: Media };
     locale: string;
     localizations?: { data: YogaSpecialitiesComponent[] };
   };
@@ -37,6 +40,7 @@ export interface YogaSpecialitiesComponent_Plain {
   right2?: YogaSingleSpeciality_Plain;
   right3?: YogaSingleSpeciality_Plain;
   right4?: YogaSingleSpeciality_Plain;
+  image?: Media_Plain;
   locale: string;
   localizations?: YogaSpecialitiesComponent_Plain[];
 }
@@ -55,6 +59,7 @@ export interface YogaSpecialitiesComponent_NoRelations {
   right2?: number;
   right3?: number;
   right4?: number;
+  image?: number;
   locale: string;
   localizations?: YogaSpecialitiesComponent[];
 }
@@ -73,6 +78,7 @@ export interface YogaSpecialitiesComponent_AdminPanelLifeCycle {
   right2?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
   right3?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
   right4?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
+  image?: AdminPanelRelationPropertyModification<Media_Plain>;
   locale: string;
   localizations?: YogaSpecialitiesComponent[];
 }

yoga-cms/auto-gen-queries/about.json

@@ -39,6 +39,9 @@
         specialityRight4: {
           fields: ['*'] ,
         },
+        "image": {
+          "fields": ["name","mime","url"]
+        }
       }
     }
   },

yoga-cms/generated-strapi-interfaces/api/yoga-specialities-component.ts

@@ -1,7 +1,9 @@
 // Interface automatically generated by schemas-to-ts
 
 import { YogaSingleSpeciality } from './yoga-single-speciality';
+import { Media } from '../components/shared/Media';
 import { YogaSingleSpeciality_Plain } from './yoga-single-speciality';
+import { Media_Plain } from '../components/shared/Media';
 import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
 
 export interface YogaSpecialitiesComponent {
@@ -19,6 +21,7 @@ export interface YogaSpecialitiesComponent {
     right2?: { data: YogaSingleSpeciality };
     right3?: { data: YogaSingleSpeciality };
     right4?: { data: YogaSingleSpeciality };
+    image?: { data: Media };
     locale: string;
     localizations?: { data: YogaSpecialitiesComponent[] };
   };
@@ -37,6 +40,7 @@ export interface YogaSpecialitiesComponent_Plain {
   right2?: YogaSingleSpeciality_Plain;
   right3?: YogaSingleSpeciality_Plain;
   right4?: YogaSingleSpeciality_Plain;
+  image?: Media_Plain;
   locale: string;
   localizations?: YogaSpecialitiesComponent_Plain[];
 }
@@ -55,6 +59,7 @@ export interface YogaSpecialitiesComponent_NoRelations {
   right2?: number;
   right3?: number;
   right4?: number;
+  image?: number;
   locale: string;
   localizations?: YogaSpecialitiesComponent[];
 }
@@ -73,6 +78,7 @@ export interface YogaSpecialitiesComponent_AdminPanelLifeCycle {
   right2?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
   right3?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
   right4?: AdminPanelRelationPropertyModification<YogaSingleSpeciality_Plain>;
+  image?: AdminPanelRelationPropertyModification<Media_Plain>;
   locale: string;
   localizations?: YogaSpecialitiesComponent[];
 }

yoga-cms/src/api/yoga-specialities-component/content-types/yoga-specialities-component/schema.json

@@ -87,6 +87,14 @@
       "type": "relation",
       "relation": "oneToOne",
       "target": "api::yoga-single-speciality.yoga-single-speciality"
+    },
+    "image": {
+      "allowedTypes": [
+        "images",
+        "files"
+      ],
+      "type": "media",
+      "multiple": false
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -1976,6 +1976,7 @@ export interface ApiYogaSpecialitiesComponentYogaSpecialitiesComponent
           localized: true;
         };
       }>;
+    image: Schema.Attribute.Media<'images' | 'files'>;
     left1: Schema.Attribute.Relation<
       'oneToOne',
       'api::yoga-single-speciality.yoga-single-speciality'