yatra / resources / js / blocks / trip-category / edit.tsx

edit.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.5, at resources/js/blocks/trip-category/edit.tsx

201 lines 6.0 KB

Raw Download Zip

1	import { InspectorControls } from "@wordpress/block-editor";
2	import {
3	PanelBody,
4	TextControl,
5	RangeControl,
6	SelectControl,
7	ToggleControl,
8	} from "@wordpress/components";
9	import { __ } from "@wordpress/i18n";
10	import { useEffect, useRef } from "@wordpress/element";
11	import ServerSideRender from "@wordpress/server-side-render";
12	import { ClassificationMultiSelect } from "../components/ClassificationMultiSelect";
13	import { migrateNumericCsvPairToIds } from "../utils/migrateTaxonomyIds";
14
15	export interface TripCategoryBlockAttributes {
16	order: "asc" \| "desc";
17	columns: number;
18	per_page: number;
19	title: string;
20	show_pagination: boolean;
21	categoryIds: number[];
22	category?: string;
23	category_ids?: string;
24	show_trip_count: boolean;
25	show_description: boolean;
26	show_image: boolean;
27	hide_empty: boolean;
28	featured_only: boolean;
29	}
30
31	interface EditProps {
32	attributes: TripCategoryBlockAttributes;
33	setAttributes: (attrs: Partial<TripCategoryBlockAttributes>) => void;
34	}
35
36	function normalizeIds(arr: number[] \| undefined): number[] {
37	return Array.isArray(arr)
38	? [...new Set(arr.map((n) => parseInt(String(n), 10)).filter((n) => n > 0))]
39	: [];
40	}
41
42	export default function Edit({ attributes, setAttributes }: EditProps) {
43	const migratedOnce = useRef(false);
44
45	useEffect(() => {
46	if (migratedOnce.current) {
47	return;
48	}
49	migratedOnce.current = true;
50
51	let ids = normalizeIds(attributes.categoryIds);
52	if (ids.length === 0) {
53	ids = migrateNumericCsvPairToIds(
54	attributes.category_ids,
55	attributes.category,
56	);
57	}
58	if (ids.length === 0) {
59	return;
60	}
61	setAttributes({
62	categoryIds: ids,
63	category: "",
64	category_ids: "",
65	});
66	// eslint-disable-next-line react-hooks/exhaustive-deps
67	}, [setAttributes]);
68
69	const {
70	order,
71	columns,
72	per_page,
73	title,
74	show_pagination,
75	show_trip_count,
76	show_description,
77	show_image,
78	hide_empty,
79	featured_only,
80	} = attributes;
81
82	const categoryIds = normalizeIds(attributes.categoryIds);
83
84	return (
85	<>
86	<InspectorControls>
87	<PanelBody
88	title={__("Trip category settings", "yatra")}
89	initialOpen={true}
90	>
91	<TextControl
92	label={__("Title", "yatra")}
93	value={title}
94	onChange={(value: string) => setAttributes({ title: value })}
95	/>
96	<ClassificationMultiSelect
97	taxonomy="trip_category"
98	label={__("Trip categories to show", "yatra")}
99	help={__(
100	"All published lists every category; narrow with search and checkboxes. Yatra trip types only.",
101	"yatra",
102	)}
103	value={categoryIds}
104	onChange={(ids) => setAttributes({ categoryIds: ids })}
105	/>
106	<SelectControl
107	label={__("Order", "yatra")}
108	value={order}
109	options={[
110	{ label: __("Ascending", "yatra"), value: "asc" },
111	{ label: __("Descending", "yatra"), value: "desc" },
112	]}
113	onChange={(value: string) =>
114	setAttributes({ order: value as "asc" \| "desc" })
115	}
116	/>
117	<RangeControl
118	label={__("Number of categories", "yatra")}
119	value={per_page}
120	onChange={(value: number \| undefined) =>
121	setAttributes({
122	per_page: value !== undefined && value !== null ? value : 10,
123	})
124	}
125	min={1}
126	max={50}
127	/>
128	<RangeControl
129	label={__("Columns", "yatra")}
130	value={columns}
131	onChange={(value: number \| undefined) =>
132	setAttributes({
133	columns: value !== undefined && value !== null ? value : 3,
134	})
135	}
136	min={1}
137	max={6}
138	/>
139	<ToggleControl
140	label={__("Show pagination", "yatra")}
141	checked={show_pagination}
142	onChange={(value: boolean) =>
143	setAttributes({ show_pagination: value })
144	}
145	/>
146	</PanelBody>
147
148	<PanelBody title={__("Display options", "yatra")} initialOpen={false}>
149	<ToggleControl
150	label={__("Show trip count", "yatra")}
151	checked={show_trip_count}
152	onChange={(value: boolean) =>
153	setAttributes({ show_trip_count: value })
154	}
155	/>
156	<ToggleControl
157	label={__("Show description", "yatra")}
158	checked={show_description}
159	onChange={(value: boolean) =>
160	setAttributes({ show_description: value })
161	}
162	/>
163	<ToggleControl
164	label={__("Show image", "yatra")}
165	checked={show_image}
166	onChange={(value: boolean) => setAttributes({ show_image: value })}
167	/>
168	<ToggleControl
169	label={__("Hide empty categories", "yatra")}
170	help={__(
171	"Skip categories that have no published trips assigned. Off by default — turn on for a tighter live catalog, leave off for editorial / onboarding views.",
172	"yatra",
173	)}
174	checked={hide_empty}
175	onChange={(value: boolean) => setAttributes({ hide_empty: value })}
176	/>
177	<ToggleControl
178	label={__("Featured only (filter list)", "yatra")}
179	help={__(
180	"When on, only categories with “Featured category” enabled in Yatra → Trips → Categories are listed. The red “Featured” badge on each card is controlled per category there—not by this toggle.",
181	"yatra",
182	)}
183	checked={featured_only}
184	onChange={(value: boolean) =>
185	setAttributes({ featured_only: value })
186	}
187	/>
188	</PanelBody>
189	</InspectorControls>
190
191	<div className="yatra-block-editor-preview">
192	<ServerSideRender
193	block="yatra/trip-category"
194	attributes={attributes}
195	key={JSON.stringify(attributes)}
196	/>
197	</div>
198	</>
199	);
200	}
201