[yoga-15] improve service list rendering

yoga-app/src/api/strapi/query/service-list.json

@@ -6,6 +6,9 @@
       "populate": {
         "image": {
           "fields": ["name","mime","url" ]
+        },
+        "articleImage": {
+          "fields": ["name","mime","url" ]
         }
       }
     },

yoga-app/src/app/serviceList/page.tsx

@@ -5,6 +5,7 @@ import SubscribeComponent from "@/components/subscribe.component";
 import strapiApi from "@/api/strapi/strapi-api";
 import SubHeaderComponent from "@/components/subHeader.component";
 import SingleServiceComponent from "@/components/single.service.component";
+import {sortServicesByPriority} from "@/util/sorting";
 
 export default async function Services() {
     const {
@@ -15,12 +16,13 @@ export default async function Services() {
         common,
         services
     } = await strapiApi.getServiceListPage();
-    console.info("ServiceListPage", services.length, services.map);
+    let sortedServices = services ? [...services] : [];
+    sortedServices.sort( sortServicesByPriority )
     return (
         <>
             <SubHeaderComponent  header={{header1:header,description}} common={common}/>
             {
-                services && services.length > 0 && services.map( (singleService,index) => {
+                  sortedServices.map( (singleService,index) => {
                     return (
                         <SingleServiceComponent key={singleService.id} config={singleService} index={index}/>
                     )

yoga-app/src/components/block.with.right.image.component.module.css

@@ -0,0 +1,5 @@
+.rightImage {
+    border-top-left-radius: 60px;
+    border-bottom-right-radius: 60px;
+    margin: -150px 0 12px 12px;
+}

yoga-app/src/components/block.with.right.image.component.tsx

@@ -1,6 +1,8 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
 import NextBlocksRenderer from "@/components/next.blocks.renderer";
+import styles from './block.with.right.image.component.module.css';
+import clsx from "clsx";
 
 export default function BlockWithRightImage ({
                                                 title,header, block,button,  image: {
@@ -14,8 +16,11 @@ export default function BlockWithRightImage ({
             <div className="container">
                 <div className="mission_box">
                     <div className="row">
-                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
+                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                             <div className="mission_content">
+                                <div className="mission_image">
+                                    <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-right", styles.rightImage)} /></figure>
+                                </div>
                                 {title && <h5>{title}</h5>}
                                 {header && <h2>{header}</h2>}
                                 <NextBlocksRenderer content={  block } />
@@ -24,11 +29,6 @@ export default function BlockWithRightImage ({
                                 </div>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                            <div className="mission_image">
-                                <figure className="mb-0"><YogaImageComponent src={url} alt="" className="img-fluid" /></figure>
-                            </div>
-                        </div>
                     </div>
                 </div>
                 <figure className="mission_right_shape right_shape mb-0">

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

@@ -6,6 +6,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import Slider ,{Settings} from "react-slick";
 import OurServiceItemComponent from "@/components/our.services.item.component";
+import {sortServicesByPriority} from "@/util/sorting";
 
 
 export interface Props{
@@ -67,6 +68,8 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
             }
         ]
     };
+    let sortedServices = services ? [...services] : [];
+    sortedServices.sort( sortServicesByPriority )
     return (
         <section className="services_section">
             <div className="container">
@@ -88,7 +91,7 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
                 {/*</div>*/}
 
                 <Slider {...settings}>
-                    {services.map(
+                    {sortedServices.map(
                         itemConfig =>
                             <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />
                     )}

yoga-app/src/components/single.service.component.tsx

@@ -11,12 +11,12 @@ export interface Props {
 }
 
 const SingleService = ({config,index}: Props) => {
-    if (!config || !config.article || !config.image) {
+    if (!config || !config.article || !config.articleImage) {
         return null; // or some fallback UI
     }
 
-    const {article, image, id, header } = config;
+    const {article, articleImage, id, header } = config;
-        const strapiFile = image as StrapiFile;
+        const strapiFile = articleImage as StrapiFile;
       const  imageUrl = strapiApi.getImageUrl(strapiFile?.url);
 
     return (

yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -14,6 +14,8 @@ export interface YogaSingleService {
     imageAlt?: string;
     name?: string;
     article?: any;
+    articleImage?: { data: Media };
+    priority?: number;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -27,6 +29,8 @@ export interface YogaSingleService_Plain {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: Media_Plain;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -40,6 +44,8 @@ export interface YogaSingleService_NoRelations {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: number;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -53,6 +59,8 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: AdminPanelRelationPropertyModification<Media_Plain>;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-app/src/util/sorting.ts

@@ -0,0 +1,7 @@
+import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
+
+export function sortServicesByPriority(a: YogaSingleService_Plain, b: YogaSingleService_Plain) {
+  const priorityA = a.priority ?? 0;
+  const priorityB = b.priority ?? 0;
+  return priorityA - priorityB;
+}

yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -14,6 +14,8 @@ export interface YogaSingleService {
     imageAlt?: string;
     name?: string;
     article?: any;
+    articleImage?: { data: Media };
+    priority?: number;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -27,6 +29,8 @@ export interface YogaSingleService_Plain {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: Media_Plain;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -40,6 +44,8 @@ export interface YogaSingleService_NoRelations {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: number;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -53,6 +59,8 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: AdminPanelRelationPropertyModification<Media_Plain>;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json

@@ -74,6 +74,18 @@
     },
     "article": {
       "type": "blocks"
+    },
+    "articleImage": {
+      "allowedTypes": [
+        "images",
+        "files"
+      ],
+      "type": "media",
+      "multiple": false
+    },
+    "priority": {
+      "type": "integer",
+      "default": 100
     }
   }
 }

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

@@ -1840,6 +1840,7 @@ export interface ApiYogaSingleServiceYogaSingleService
   };
   attributes: {
     article: Schema.Attribute.Blocks;
+    articleImage: Schema.Attribute.Media<'images' | 'files'>;
     buttonLink: Schema.Attribute.String &
       Schema.Attribute.SetPluginOptions<{
         i18n: {
@@ -1884,6 +1885,7 @@ export interface ApiYogaSingleServiceYogaSingleService
           localized: true;
         };
       }>;
+    priority: Schema.Attribute.Integer & Schema.Attribute.DefaultTo<100>;
     publishedAt: Schema.Attribute.DateTime;
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &