[yoga-20] subscribe.component.tsx: make image editable
This commit is contained in:
parent
917918d742
commit
622f2a7686
2
api.http
2
api.http
@ -29,7 +29,7 @@ GET {{domain}}/api/yoga-single-services?filters[name][$eq]=service4
|
||||
Accept: application/json
|
||||
|
||||
### GET service page
|
||||
GET {{domain}}/api/service-list-page?fields[0]=*&populate[services][fields][0]=*&populate[services][populate][image][fields][0]=name&populate[services][populate][image][fields][1]=mime&populate[services][populate][image][fields][2]=url&populate[common][fields][0]=*&populate[common][populate][logoImage][fields][0]=name&populate[common][populate][logoImage][fields][1]=mime&populate[common][populate][logoImage][fields][2]=url&populate[subscribeNow][fields][0]=*&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=*
|
||||
GET {{domain}}/api/service-list-page?fields[0]=*&populate[services][fields][0]=*&populate[services][populate][image][fields][0]=name&populate[services][populate][image][fields][1]=mime&populate[services][populate][image][fields][2]=url&populate[common][fields][0]=*&populate[common][populate][logoImage][fields][0]=name&populate[common][populate][logoImage][fields][1]=mime&populate[common][populate][logoImage][fields][2]=url&populate[subscribeNow][fields][0]=*&populate[subscribeNow][populate][image][fields][0]=name&populate[subscribeNow][populate][image][fields][1]=mime&populate[subscribeNow][populate][image][fields][2]=url&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=*&populate[footer][populate][logo][fields][0]=name&populate[footer][populate][logo][fields][1]=mime&populate[footer][populate][logo][fields][2]=url
|
||||
Accept: application/json
|
||||
|
||||
|
||||
|
||||
@ -72,7 +72,16 @@
|
||||
}
|
||||
},
|
||||
"subscribeNow": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -16,7 +16,16 @@
|
||||
"fields": ["*"]
|
||||
},
|
||||
"subscribe": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -51,7 +51,16 @@
|
||||
}
|
||||
},
|
||||
"subscribe": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -43,7 +43,16 @@
|
||||
}
|
||||
},
|
||||
"subscribeNow": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"blogs": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -48,7 +48,16 @@
|
||||
}
|
||||
},
|
||||
"subscribe": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -18,7 +18,16 @@
|
||||
}
|
||||
},
|
||||
"subscribeNow": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -10,7 +10,16 @@
|
||||
}
|
||||
},
|
||||
"subscribeNow": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -90,7 +90,16 @@
|
||||
}
|
||||
},
|
||||
"subscribe": {
|
||||
"fields": ["*"]
|
||||
"fields": ["*"],
|
||||
"populate": {
|
||||
"image": {
|
||||
"fields": [
|
||||
"name",
|
||||
"mime",
|
||||
"url"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"fields": ["*"],
|
||||
|
||||
@ -7,16 +7,31 @@ class StrapiClient{
|
||||
|
||||
constructor(private strapiUrl: string = "http://localhost:1337") {
|
||||
}
|
||||
|
||||
public getImageUrl(imagePath: string) {
|
||||
if (!imagePath) {
|
||||
return "dummy.png"
|
||||
}
|
||||
return '/image/' + imagePath;
|
||||
}
|
||||
|
||||
public async httpGet(path: string) {
|
||||
console.info("httpGet", path);
|
||||
return await httpClient.httpGet(this.strapiUrl + path);
|
||||
let result = undefined;
|
||||
try {
|
||||
const absoluteUrl = this.strapiUrl + path;
|
||||
console.info("httpGet", {path,absoluteUrl});
|
||||
result = await httpClient.httpGet(this.strapiUrl + path);
|
||||
} catch (e) {
|
||||
console.log("httpGet error", e);
|
||||
throw e;
|
||||
}
|
||||
if (!result.ok) {
|
||||
console.info("httpGet not ok", result);
|
||||
throw new Error(result.statusText);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
public async httpGetJson<T>(url: string): Promise<Payload<T>> {
|
||||
const response = await this.httpGet(url);
|
||||
return await response.json();
|
||||
@ -32,7 +47,6 @@ class StrapiClient{
|
||||
}
|
||||
|
||||
|
||||
|
||||
const response = await this.httpGet("/api/" + contentType + "?" + searchParams.toString());
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export default async function Home() {
|
||||
{ contactUs && <ContactUsComponent contactUs={contactUs} /> }
|
||||
{ prices && <PricingComponent config={prices}/> }
|
||||
{ feedbacks && <FeedbackComponent config={feedbacks} /> }
|
||||
{ blogs && <BlogPostsComponent config={blogs} /> }
|
||||
{ blogs && blogs.posts?.length && <BlogPostsComponent config={blogs} /> }
|
||||
{ subscribeNow && <SubscribeComponent config={subscribeNow} /> }
|
||||
{ footer && <FooterComponent config={footer} /> }
|
||||
<AosComponent />
|
||||
|
||||
@ -12,7 +12,7 @@ import SubHeaderComponent from "@/components/subHeader.component";
|
||||
|
||||
export default async function Services() {
|
||||
const {
|
||||
header,
|
||||
header = undefined,
|
||||
description,
|
||||
ourServices,
|
||||
contactUs,
|
||||
@ -22,7 +22,7 @@ export default async function Services() {
|
||||
footer,
|
||||
subscribe,
|
||||
common
|
||||
} = await strapiApi.getServicesPage();
|
||||
} = await strapiApi.getServicesPage()
|
||||
return (
|
||||
<>
|
||||
<SubHeaderComponent header={{header1:header,description}} common={common}/>
|
||||
|
||||
4
yoga-app/src/components/subscribe.component.module.css
Normal file
4
yoga-app/src/components/subscribe.component.module.css
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
.roundedImage img{
|
||||
border-bottom-right-radius: 60px;
|
||||
}
|
||||
@ -3,14 +3,22 @@ import {
|
||||
YogaSubscribeNowComponent_Plain
|
||||
} from "@/types/generated-strapi-interfaces/api/yoga-subscribe-now-component";
|
||||
import clsx from "clsx";
|
||||
import {StrapiFile} from "@/types/types";
|
||||
import strapiApi from "@/api/strapi/strapi-api";
|
||||
import styles from './subscribe.component.module.css'
|
||||
|
||||
export interface Props{
|
||||
config: YogaSubscribeNowComponent_Plain,
|
||||
styleClass?: string
|
||||
styleClass?: string,
|
||||
}
|
||||
const SubscribeComponent = ({
|
||||
config: {title,header,placeHolderEmail,buttonSubscribeLabel},
|
||||
config: {title,header,placeHolderEmail,buttonSubscribeLabel, image = undefined},
|
||||
styleClass
|
||||
}: Props) => {
|
||||
const imageFile: StrapiFile = image as StrapiFile;
|
||||
if (!imageFile || !imageFile.url) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<section className={clsx("subscribe_section",styleClass)}>
|
||||
<div className="container">
|
||||
@ -32,8 +40,8 @@ const SubscribeComponent = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
|
||||
<figure className="subscribe_image mb-0">
|
||||
<YogaImageComponent src="/assets/images/subscribe_image.png" alt=""/>
|
||||
<figure className={clsx(styles.roundedImage,"subscribe_image","mb-0",)}>
|
||||
<YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt=""/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
// Interface automatically generated by schemas-to-ts
|
||||
|
||||
import { Media } from '../components/shared/Media';
|
||||
import { Media_Plain } from '../components/shared/Media';
|
||||
import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
|
||||
|
||||
export interface YogaSubscribeNowComponent {
|
||||
id: number;
|
||||
attributes: {
|
||||
@ -7,6 +11,7 @@ export interface YogaSubscribeNowComponent {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: { data: Media };
|
||||
};
|
||||
}
|
||||
export interface YogaSubscribeNowComponent_Plain {
|
||||
@ -15,6 +20,7 @@ export interface YogaSubscribeNowComponent_Plain {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: Media_Plain;
|
||||
}
|
||||
|
||||
export interface YogaSubscribeNowComponent_NoRelations {
|
||||
@ -23,6 +29,7 @@ export interface YogaSubscribeNowComponent_NoRelations {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: number;
|
||||
}
|
||||
|
||||
export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
|
||||
@ -31,4 +38,5 @@ export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: AdminPanelRelationPropertyModification<Media_Plain>;
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
// Interface automatically generated by schemas-to-ts
|
||||
|
||||
import { Media } from '../components/shared/Media';
|
||||
import { Media_Plain } from '../components/shared/Media';
|
||||
import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
|
||||
|
||||
export interface YogaSubscribeNowComponent {
|
||||
id: number;
|
||||
attributes: {
|
||||
@ -7,6 +11,7 @@ export interface YogaSubscribeNowComponent {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: { data: Media };
|
||||
};
|
||||
}
|
||||
export interface YogaSubscribeNowComponent_Plain {
|
||||
@ -15,6 +20,7 @@ export interface YogaSubscribeNowComponent_Plain {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: Media_Plain;
|
||||
}
|
||||
|
||||
export interface YogaSubscribeNowComponent_NoRelations {
|
||||
@ -23,6 +29,7 @@ export interface YogaSubscribeNowComponent_NoRelations {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: number;
|
||||
}
|
||||
|
||||
export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
|
||||
@ -31,4 +38,5 @@ export interface YogaSubscribeNowComponent_AdminPanelLifeCycle {
|
||||
header?: string;
|
||||
placeHolderEmail?: string;
|
||||
buttonSubscribeLabel?: string;
|
||||
image?: AdminPanelRelationPropertyModification<Media_Plain>;
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
"info": {
|
||||
"singularName": "yoga-subscribe-now-component",
|
||||
"pluralName": "yoga-subscribe-now-components",
|
||||
"displayName": "YogaSubscribeNowComponent"
|
||||
"displayName": "YogaSubscribeNowComponent",
|
||||
"description": ""
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": true
|
||||
@ -22,6 +23,14 @@
|
||||
},
|
||||
"buttonSubscribeLabel": {
|
||||
"type": "string"
|
||||
},
|
||||
"image": {
|
||||
"allowedTypes": [
|
||||
"images",
|
||||
"files"
|
||||
],
|
||||
"type": "media",
|
||||
"multiple": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
2
yoga-cms/types/generated/contentTypes.d.ts
vendored
2
yoga-cms/types/generated/contentTypes.d.ts
vendored
@ -2038,6 +2038,7 @@ export interface ApiYogaSubscribeNowComponentYogaSubscribeNowComponent
|
||||
extends Struct.CollectionTypeSchema {
|
||||
collectionName: 'yoga_subscribe_now_components';
|
||||
info: {
|
||||
description: '';
|
||||
displayName: 'YogaSubscribeNowComponent';
|
||||
pluralName: 'yoga-subscribe-now-components';
|
||||
singularName: 'yoga-subscribe-now-component';
|
||||
@ -2051,6 +2052,7 @@ export interface ApiYogaSubscribeNowComponentYogaSubscribeNowComponent
|
||||
createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
|
||||
Schema.Attribute.Private;
|
||||
header: Schema.Attribute.String;
|
||||
image: Schema.Attribute.Media<'images' | 'files'>;
|
||||
locale: Schema.Attribute.String & Schema.Attribute.Private;
|
||||
localizations: Schema.Attribute.Relation<
|
||||
'oneToMany',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user