rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[yoga-15] improve service list rendering

Browse Source
This commit is contained in:
Schneider Roland 2025-09-10 10:49:34 +02:00
parent c0ca7108c7
commit 8fc0f924b8
11 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
yoga-app/src/app/serviceList/page.tsx
View File

@ -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}/>
)

5
yoga-app/src/components/block.with.right.image.component.module.css Normal file
View File

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

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

@ -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">

5
yoga-app/src/components/our.services.component.tsx
View File

@ -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} />
)}

6
yoga-app/src/components/single.service.component.tsx
View File

@ -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 strapiFile = image as StrapiFile;
const {article, articleImage, id, header } = config;
const strapiFile = articleImage as StrapiFile;
const imageUrl = strapiApi.getImageUrl(strapiFile?.url);
return (

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

@ -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[];
}

7
yoga-app/src/util/sorting.ts Normal file
View File

@ -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;
}

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

@ -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[];
}

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

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

2
yoga-cms/types/generated/contentTypes.d.ts vendored
View File

@ -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'> &