AlkantarClanX12
Your IP : 216.73.217.24
import './editor.scss';
import './style.scss';
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const { TextControl, PanelBody, Button, CheckboxControl, SelectControl } = wp.components;
const { PlainText, InspectorControls } = wp.editor;
import { toOptions, fromSliderValues, toSliderValues, resetAll, resetSlider, resetSelect, resetSort, setFlags, resetFlags } from './utils.js';
import { CustomSelect, CustomRange, CustomFromToken, Sort, CheckboxList } from './components';
registerBlockType('leadbox/inventory-block', {
title: 'Inventory',
icon: 'excerpt-view',
category: 'leadbox',
keywords: ['leadbox', 'inventory'],
edit: (props) => {
const { sort_models,sort_makes, sort_locations, sort_stocks, sort_by, sort_by_items, sort_by_condition, sort_by_condition_items,
sort_by_secondary, sort_by_condition_secondary, make_items, model_items,
trim_items, location_items, type_items, status_items, tags_items, stock_items, filter, slick,
limit, status, status_selected, year, year_from, year_to, year_min,
year_max, make, make_selected, model, model_selected, trim, trim_selected, location, location_selected,
price, price_from, price_to, price_min, price_max, mileage, mileage_from,
mileage_to, mileage_min, mileage_max, type, type_selected,
tags, tags_selected, stock, stock_selected, flags, flags_items, flags_selected, layout, layout_items, vehicle_card, exclude_tags_items, exclude_tags, exclude_tags_selected,
listing_image_group, listing_image_group_items } = props.attributes;
const optionValueToLower = item => item.value = item.value.toLowerCase();
const sortByOptions = toOptions(sort_by_items, optionValueToLower);
const sortByConditionOptions = toOptions(sort_by_condition_items, optionValueToLower);
const makeOptions = toOptions(make_items);
const modelOptions = toOptions(model_items);
const trimOptions = toOptions(trim_items);
const locationOptions = toOptions(location_items);
const typeOptions = toOptions(type_items);
const statusOptions = toOptions(status_items);
const tagsSuggestions = tags_items;
const noTagsSuggestions = exclude_tags_items;
const stockSuggestions = stock_items;
const flagsOptions = toOptions(flags_items, (item, key) => item.value = key);
const layoutOptions = toOptions(layout_items);
// LBT-1462: options for the "Listing image group" select. First entry clears
// the selection (no promotional images are inserted on the SRP).
const listingGroupOptions = [
{ label: '— None (no images) —', value: '' },
...(Array.isArray(listing_image_group_items) ? listing_image_group_items : []).map(g => ({
label: g.active ? g.name : `${g.name} (inactive)`,
value: g.id,
})),
];
const shortcode = `[inventory filter="${filter}" slick="${slick}" layout="${layout}" limit="${limit}" sort="${sort_by} ${sort_by_condition}" sort_secondary="${sort_by_secondary} ${sort_by_condition_secondary}" sort_makes="${sort_makes}" sort_models="${sort_models}" sort_locations="${sort_locations}" sort_stocks="${sort_stocks}" year="${year}" make="${make}" model="${model}" trim="${trim}" location="${location}" price="${price}" mileage="${mileage}" type="${type}" status="${status}" tags="${tags}" exclude-tags="${exclude_tags}" stock="${stock}" flags="${flags}" vehicle-card="${vehicle_card}" listing-image-group="${listing_image_group}"]`;
return (
<div className="leadbox-inventory-block">
<div className="block">
<h3>Inventory shortcode</h3>
<div>This block will render on the frontend as a graphical inventory generated by the following shortcode:</div>
<pre>
<PlainText
className="shortcode"
value={shortcode} />
</pre>
<div>Configure this block on the right panel.</div>
</div>
<Fragment>
<InspectorControls>
<PanelBody title="Reset">
<Button
isPrimary={true}
isLarge={true}
onClick={() => resetAll(props)}
>Reset configuration</Button>
<span className="leadbox-inventory-hint">
Press this button to reset all controls to their original values.
</span>
</PanelBody>
<PanelBody title="UI">
<CheckboxControl
label="Include filter"
checked={filter}
onChange={filter => props.setAttributes({ filter })} />
<CheckboxControl
className="leadbox-inventory-activate-slick"
label="Activate Slick"
checked={slick}
onChange={slick => props.setAttributes({ slick })} />
<SelectControl
label="Layout"
value={layout}
options={layoutOptions}
onChange={layout => props.setAttributes({ layout })} />
</PanelBody>
<PanelBody title="Listing Images">
<SelectControl
label="Image group"
help="Insert a reusable group of promotional images between the vehicle cards. Manage groups under LBX Listing Images → Image Groups. Leave as None to insert no images."
value={listing_image_group}
options={listingGroupOptions}
onChange={listing_image_group => props.setAttributes({ listing_image_group })} />
</PanelBody>
<Sort
value={[sort_by, sort_by_condition, sort_makes, sort_models, sort_locations, sort_stocks, sort_by_secondary, sort_by_condition_secondary]}
options={[sortByOptions, sortByConditionOptions]}
onChange={([sort_by, sort_by_condition, sort_makes, sort_models, sort_locations, sort_stocks, sort_by_secondary, sort_by_condition_secondary]) => props.setAttributes({ sort_by, sort_by_condition, sort_makes, sort_models, sort_locations, sort_stocks, sort_by_secondary, sort_by_condition_secondary })}
onReset={() => resetSort(props)}
/>
<PanelBody title="Limit">
<TextControl
label="Limit"
type="number"
value={parseInt(limit)}
onChange={value => {
const limit = (!value && value !== 0 || value < 0) ? 0 : value;
props.setAttributes({ limit: limit.toString() });
}} />
</PanelBody>
<CustomSelect
title="Status"
propName="status"
value={status_selected}
options={statusOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'status')} />
<CustomRange
title="Year"
icon="calendar-alt"
propName="year"
fromValue={year_from}
toValue={year_to}
min={year_min}
max={year_max}
onChangeFrom={value => fromSliderValues(props, 'year', value)}
onChangeTo={value => toSliderValues(props, 'year', value)}
onReset={() => resetSlider(props, 'year')} />
<CustomSelect
title="Make"
propName="make"
value={make_selected}
options={makeOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'make')} />
<CustomSelect
title="Model"
propName="model"
value={model_selected}
options={modelOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'model')} />
<CustomSelect
title="Trim"
propName="trim"
value={trim_selected}
options={trimOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'trim')} />
<CustomSelect
title="Location"
propName="location"
value={location_selected}
options={locationOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'location')} />
<CustomRange
title="Price"
propName="price"
fromValue={price_from}
toValue={price_to}
min={price_min}
max={price_max}
onChangeFrom={value => fromSliderValues(props, 'price', value)}
onChangeTo={value => toSliderValues(props, 'price', value)}
onReset={() => resetSlider(props, 'price')} />
<CustomRange
title="Mileage"
propName="mileage"
fromValue={mileage_from}
toValue={mileage_to}
min={mileage_min}
max={mileage_max}
onChangeFrom={value => fromSliderValues(props, 'mileage', value)}
onChangeTo={value => toSliderValues(props, 'mileage', value)}
onReset={() => resetSlider(props, 'mileage')} />
<CustomSelect
title="Type"
propName="type"
value={type_selected}
options={typeOptions}
onChange={props.setAttributes}
onReset={() => resetSelect(props, 'type')} />
<CustomFromToken
title="Tags"
propName="tags"
value={tags_selected}
suggestions={tagsSuggestions}
onChange={props.setAttributes} />
<CustomFromToken
title="Exclude Tags"
propName="exclude_tags"
value={exclude_tags_selected}
suggestions={noTagsSuggestions}
onChange={props.setAttributes} />
<CustomFromToken
title="Stock Number"
propName="stock"
value={stock_selected}
suggestions={stockSuggestions}
onChange={props.setAttributes} />
<CheckboxList
title="Flags"
options={flagsOptions}
values={flags_selected}
onChange={(key, value) => setFlags(props, key, value)}
onReset={() => resetFlags(props)} />
</InspectorControls>
</Fragment>
</div>
);
},
save: (props) => {
return null;
},
});