Skip to content
Snippets Groups Projects
Commit da1786b0 authored by Grzegorz Rola's avatar Grzegorz Rola
Browse files

Init

parent 9fe1cf58
No related branches found
No related tags found
1 merge request!1Init
Pipeline #2509 failed
Showing with 33113 additions and 156 deletions
...@@ -48,11 +48,11 @@ table.sender-address input[type="text"] { ...@@ -48,11 +48,11 @@ table.sender-address input[type="text"] {
width: 100%; width: 100%;
} }
table.sender-address thead tr td:first-child { table.sender-address input[type="email"] {
width: 20%; max-width: 100%;
width: 100%;
} }
table.sender-address tbody tr td:first-child select { table.sender-address tbody tr td:first-child select {
width: 100%; width: 100%;
} }
......
fieldset.settings-field-boxes{margin:0;padding:0;boder:0}table.shipping-boxes{position:relative;table-layout:fixed;background:#fff;border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);border-spacing:0;width:100%;clear:both;margin:0}table.shipping-boxes thead td{display:table-cell;padding:1em;vertical-align:top;line-height:1.75em;text-align:left;font-weight:600;text-shadow:none;font-size:14px}table.shipping-boxes tbody td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:middle;border-top:1px solid #e5e5e5}table.shipping-boxes tfoot td{border-top:1px solid #e1e1e1}table.shipping-boxes tbody tr:nth-child(even) td{background:#f9f9f9}table.shipping-boxes input[type="text"]{max-width:100%;width:100%}table.shipping-boxes thead tr td:first-child{width:20%}table.shipping-boxes tbody tr td:first-child select{width:100%}@media only screen and (max-width:600px){table.shipping-boxes tbody tr td:first-child select{width:auto;max-width:100%}table.shipping-boxes,table.shipping-boxes tbody{display:block}table.shipping-boxes thead{display:none}table.shipping-boxes tbody tr td:first-child,table.shipping-boxes thead tr td:first-child{width:100%;display:block}table.shipping-boxes tbody tr,table.shipping-boxes tbody td{display:block;width:100%}} fieldset.settings-field-sender-address{margin:0;padding:0;boder:0}table.sender-address{position:relative;table-layout:fixed;background:#fff;border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);border-spacing:0;width:100%;clear:both;margin:0}table.sender-address thead td{display:table-cell;padding:1em;vertical-align:top;line-height:1.75em;text-align:left;font-weight:600;text-shadow:none;font-size:14px}table.sender-address tbody td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:middle;border-top:1px solid #e5e5e5}table.sender-address tfoot td{border-top:1px solid #e1e1e1}table.sender-address tbody tr:nth-child(even) td{background:#f9f9f9}table.sender-address input[type="text"]{max-width:100%;width:100%}table.sender-address input[type="email"]{max-width:100%;width:100%}table.sender-address tbody tr td:first-child select{width:100%}@media only screen and (max-width:600px){table.sender-address tbody tr td:first-child select{width:auto;max-width:100%}table.sender-address,table.sender-address tbody{display:block}table.sender-address thead{display:none}table.sender-address tbody tr td:first-child,table.sender-address thead tr td:first-child{width:100%;display:block}table.sender-address tbody tr,table.sender-address tbody td{display:block;width:100%}}
\ No newline at end of file \ No newline at end of file
This diff is collapsed.
Source diff could not be displayed: it is too large. Options to address this: view the blob.
import React, { Component } from 'react'; import React, { Component } from 'react';
export default class BoxInput extends React.Component { export default class AddressInput extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
let type = 'text';
if ( props.type ) {
type = props.type;
}
this.state = { this.state = {
box: props.box, address: props.address,
field: props.field, field: props.field,
type: props.type,
name: props.name, name: props.name,
value: props.value, value: props.value,
readOnly: props.readOnly type: type,
}; };
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
...@@ -17,40 +20,30 @@ export default class BoxInput extends React.Component { ...@@ -17,40 +20,30 @@ export default class BoxInput extends React.Component {
componentWillReceiveProps(props){ componentWillReceiveProps(props){
this.setState({ this.setState({
box: props.box, address: props.address,
field: props.field, field: props.field,
type: props.type,
name: props.name, name: props.name,
value: props.value, value: props.value
readOnly: props.readOnly
}); });
} }
handleChange(event) { handleChange(event) {
let state = this.state; let state = this.state;
state.value = event.target.value; state.value = event.target.value;
state.box[state.field] = event.target.value; state.address[state.field] = event.target.value;
this.setState(state); this.setState(state);
} }
render () { render () {
let className = 'input-text regular-input'; let className = 'input-text regular-input';
if ( this.state.type === 'dimension' || this.state.type === 'weight' ) {
className = 'wc_input_decimal input-text dimension';
} else if ( this.state.type === 'weight' ) {
className = 'wc_input_decimal input-text weight';
}
return ( return (
<input <input
className={className} className={className}
type="text" type={this.state.type}
name={this.state.name} name={this.state.name}
value={this.state.value} value={this.state.value}
required="required" required="required"
readOnly={this.state.readOnly}
onChange={this.handleChange} onChange={this.handleChange}
/> />
) )
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import BoxInput from "./box-input.jsx"; import AddressInput from "./address-input.jsx";
import BoxType from "./box-type.jsx";
export default class BoxRow extends React.Component { export default class AddressRow extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
let box = props.box;
let code = box.code;
let builtIn = false;
if ( props.builtInBoxes.filter(box => box.code == code).length ) {
builtIn = true;
}
this.state = { this.state = {
box: props.box, address: props.address,
builtInBoxes: props.builtInBoxes,
builtIn: builtIn,
code: code,
inputNamePrefix: props.name, inputNamePrefix: props.name,
index: props.index, index: props.index,
labels: props.labels, labels: props.labels,
} }
this.handleTypeChange = this.handleTypeChange.bind(this);
}
handleTypeChange(type) {
console.log(this.state);
let builtInBox = this.state.builtInBoxes.filter(box => box.code == type);
this.state.box.code = type;
if ( builtInBox.length ) {
this.state.builtIn = true;
let box = builtInBox[0];
this.state.box.length = box.length;
this.state.box.width = box.width;
this.state.box.height = box.height;
this.state.box.max_weight = box.max_weight;
} else {
this.state.builtIn = false;
}
this.setState(this.state);
} }
render () { render () {
let field_name = this.state.inputNamePrefix + '[' + this.state.index + ']'; let field_name = this.state.inputNamePrefix + '[' + this.state.index + ']';
let address = this.state.address;
let readonly = this.state.builtIn;
let box = this.state.box;
let labels = this.state.labels; let labels = this.state.labels;
return ( return (
<tr id={this.state.inputNamePrefix + '_' + this.state.index} className="shipping-box"> <tr id={this.state.inputNamePrefix + '_' + this.state.index} className="sender-address">
<td>
<AddressInput address={address} field='address_id' name={field_name + '[address_id]'} value={this.state.address.address_id} />
</td>
<td> <td>
<BoxType box={box} name={field_name + '[code]'} value={this.state.box.code} builtInBoxes={this.state.builtInBoxes} handleTypeChange={this.handleTypeChange}/> <AddressInput address={address} field='company' name={field_name + '[company]'} value={this.state.address.company} />
</td> </td>
<td> <td>
<BoxInput box={box} field='length' name={field_name + '[length]'} type="dimension" value={this.state.box.length} readOnly={readonly} /> <AddressInput address={address} field='name' name={field_name + '[name]'} value={this.state.address.name} />
</td> </td>
<td> <td>
<BoxInput box={box} field='width' name={field_name + '[width]'} type="dimension" value={this.state.box.width} readOnly={readonly} /> <AddressInput address={address} field='address' name={field_name + '[address]'} value={this.state.address.name} />
</td> </td>
<td> <td>
<BoxInput box={box} field='height' name={field_name + '[height]'} type="dimension" value={this.state.box.height} readOnly={readonly} /> <AddressInput address={address} field='postal_code' name={field_name + '[postal_code]'} value={this.state.address.postal_code} />
</td> </td>
<td> <td>
<BoxInput box={box} field='max_weight' name={field_name + '[max_weight]'} type="weight" value={this.state.box.max_weight} readOnly={readonly} /> <AddressInput address={address} field='city' name={field_name + '[city]'} value={this.state.address.city} />
</td> </td>
<td> <td>
<BoxInput box={box} field='box_weight' name={field_name + '[box_weight]'} type="weight" value={this.state.box.box_weight} /> <AddressInput address={address} field='phone' name={field_name + '[phone]'} value={this.state.address.phone} />
</td> </td>
<td> <td>
<BoxInput box={box} field='padding' name={field_name + '[padding]'} type="dimension" value={this.state.box.padding} /> <AddressInput address={address} field='email' type='email' name={field_name + '[email]'} value={this.state.address.email} />
</td> </td>
<td> <td>
<button data-index={this.state.index} className="button shipping-boxes-delete" onClick={this.props.handleClickDelete}>{labels.button_delete}</button> <button data-index={this.state.index} className="button shipping-boxes-delete" onClick={this.props.handleClickDelete}>{labels.button_delete}</button>
......
import React, { Component } from 'react';
export default class BoxCheckbox extends React.Component {
constructor (props) {
super(props);
this.state = {
name: props.name,
value: props.value
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let state = this.state;
state.value = !state.value;
this.setState(state);
}
render () {
let className = 'input-text regular-input';
let checked = false;
if ( this.state.value == 1 ) {
checked = true;
}
return (
<input
className={className}
type="checkbox"
name={this.state.name}
value="1"
checked={checked}
onChange={this.handleChange}
/>
)
}
}
import React, { Component } from 'react';
export default class BoxType extends React.Component {
constructor (props) {
super(props);
this.state = {
box: props.box,
name: props.name,
value: props.value,
builtInBoxes: props.builtInBoxes,
handleTypeChange: props.handleTypeChange
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let state = this.state;
state.value = event.target.value;
state.box.code = event.target.value;
this.setState(state);
this.state.handleTypeChange(event.target.value);
}
render () {
let className = 'select ';
let options = [];
options.push({value: 'custom', label: 'Custom box'});
this.state.builtInBoxes.forEach(function(box){
options.push({value: box.code, label: box.name});
});
return (
<select
className={className}
name={this.state.name}
onChange={this.handleChange}
value={this.state.value}
>
{
options.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>;
})
}
</select>
)
}
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import BoxRow from "./box-row.jsx"; import AddressRow from "./address-row.jsx";
export default class SenderAddressTable extends React.Component { export default class SenderAddressTable extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
let elements = 0; let elements = 0;
let boxes = props.boxes; let addresses = props.addresses;
boxes.forEach(function(element){ addresses.forEach(function(element){
element.id = elements; element.id = elements;
elements++; elements++;
}) })
this.state = { this.state = {
boxes: boxes, addresses: addresses,
builtInBoxes: props.builtInBoxes,
name: props.name, name: props.name,
elements: elements, elements: elements,
labels: props.labels, labels: props.labels,
}; };
} }
handleClickAdd(event) { handleClickAdd(event) {
event.preventDefault(); event.preventDefault();
let state = this.state; let state = this.state;
state.elements++; state.elements++;
state.boxes.push({ state.addresses.push({
id: state.elements, id: state.elements,
code: 'custom', address_id: '',
length: '', company: '',
width: '', name: '',
height: '', address: '',
max_weight: '', postal_code: '',
box_weight: 0, city: '',
padding: 0, phone: '',
email: '',
}); });
this.setState( state ); this.setState( state );
} }
handleClickDelete(event) { handleClickDelete(event) {
event.preventDefault(); event.preventDefault();
this.state.boxes = this.state.boxes.filter(box => box.id != event.target.dataset.index); this.state.addresses = this.state.addresses.filter(address => address.id != event.target.dataset.index);
this.setState(this.state); this.setState(this.state);
} }
...@@ -48,27 +47,27 @@ export default class SenderAddressTable extends React.Component { ...@@ -48,27 +47,27 @@ export default class SenderAddressTable extends React.Component {
let labels = this.state.labels; let labels = this.state.labels;
return ( return (
<table className="shipping-boxes"> <table className="sender-address">
<thead> <thead>
<tr> <tr>
<td className="cell-string">{labels.header_type}</td> <td className="cell-string">{labels.address_id}</td>
<td className="cell-number">{labels.header_length}</td> <td className="cell-string">{labels.company}</td>
<td className="cell-number">{labels.header_width}</td> <td className="cell-string">{labels.name}</td>
<td className="cell-number">{labels.header_height}</td> <td className="cell-string">{labels.address}</td>
<td className="cell-number">{labels.header_max_weight}</td> <td className="cell-string">{labels.postal_code}</td>
<td className="cell-number">{labels.header_box_weight}</td> <td className="cell-string">{labels.city}</td>
<td className="cell-number">{labels.header_padding}</td> <td className="cell-string">{labels.phone}</td>
<td className="cell-string">{labels.email}</td>
<td className="cell-action"> </td> <td className="cell-action"> </td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{ {
this.state.boxes.map((box) => this.state.addresses.map((address) =>
<BoxRow <AddressRow
key={box.id} key={address.id}
index={box.id} index={address.id}
builtInBoxes={this.state.builtInBoxes} address={address}
box={box}
name={this.props.name} name={this.props.name}
handleClickDelete={this.handleClickDelete.bind(this)} handleClickDelete={this.handleClickDelete.bind(this)}
labels={labels} labels={labels}
...@@ -79,7 +78,7 @@ export default class SenderAddressTable extends React.Component { ...@@ -79,7 +78,7 @@ export default class SenderAddressTable extends React.Component {
<tfoot> <tfoot>
<tr> <tr>
<td colSpan="8"> <td colSpan="8">
<button className="button shipping-boxes-add" onClick={this.handleClickAdd.bind(this)}>{labels.button_add}</button> <button className="button sender-address-add" onClick={this.handleClickAdd.bind(this)}>{labels.button_add}</button>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
......
...@@ -5,8 +5,7 @@ export default class SenderAddress extends React.Component { ...@@ -5,8 +5,7 @@ export default class SenderAddress extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
boxes: JSON.parse(props.boxes), addresses: JSON.parse(props.addresses),
builtInBoxes: JSON.parse(props.builtinboxes),
name: props.name, name: props.name,
labels: JSON.parse(props.labels), labels: JSON.parse(props.labels),
}; };
...@@ -16,7 +15,7 @@ export default class SenderAddress extends React.Component { ...@@ -16,7 +15,7 @@ export default class SenderAddress extends React.Component {
return ( return (
<div> <div>
<SenderAddressTable <SenderAddressTable
boxes={this.state.boxes} addresses={this.state.addresses}
name={this.state.name} name={this.state.name}
labels={this.state.labels} labels={this.state.labels}
/> />
......
File deleted
...@@ -2,8 +2,8 @@ msgid "" ...@@ -2,8 +2,8 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: \n" "Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2020-01-28 13:08+0100\n" "POT-Creation-Date: 2020-02-18 18:07+0100\n"
"PO-Revision-Date: 2020-01-28 13:08+0100\n" "PO-Revision-Date: 2020-02-18 18:08+0100\n"
"Last-Translator: Krzysztof Dyszczyk <krzysztof.dyszczyk@gmail.com>\n" "Last-Translator: Krzysztof Dyszczyk <krzysztof.dyszczyk@gmail.com>\n"
"Language-Team: Maciej Swoboda <maciej.swoboda@gmail.com>\n" "Language-Team: Maciej Swoboda <maciej.swoboda@gmail.com>\n"
"Language: pl_PL\n" "Language: pl_PL\n"
...@@ -22,6 +22,45 @@ msgstr "" ...@@ -22,6 +22,45 @@ msgstr ""
"X-Poedit-SearchPathExcluded-0: *.js\n" "X-Poedit-SearchPathExcluded-0: *.js\n"
"X-Poedit-SearchPathExcluded-1: vendor\n" "X-Poedit-SearchPathExcluded-1: vendor\n"
#: src/PackerBoxesFactory.php:20 #: src/Labels.php:28
msgid "Custom" msgid "Identifier"
msgstr "Własne" msgstr "Identyfikator"
#: src/Labels.php:29
msgid "Company"
msgstr "Firma"
#: src/Labels.php:30
msgid "Name"
msgstr "Imię i nazwisko"
#: src/Labels.php:31
msgid "Address"
msgstr "Adres"
#: src/Labels.php:32
msgid "Postal code"
msgstr "Kod pocztowy"
#: src/Labels.php:33
msgid "City"
msgstr "Miasto"
#: src/Labels.php:34
msgid "Phone"
msgstr "Telefon"
#: src/Labels.php:35
msgid "Email"
msgstr "E-mail"
#: src/Labels.php:37
msgid "Add"
msgstr "Dodaj"
#: src/Labels.php:38
msgid "Delete"
msgstr "Usuń"
#~ msgid "Custom"
#~ msgstr "Własne"
...@@ -12,7 +12,7 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress; ...@@ -12,7 +12,7 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
*/ */
abstract class AbstractSenderAddress implements \JsonSerializable { abstract class AbstractSenderAddress implements \JsonSerializable {
const ADDRESS_ID = 'id'; const ADDRESS_ID = 'address_id';
const COMPANY = 'company'; const COMPANY = 'company';
const NAME = 'name'; const NAME = 'name';
const ADDRESS = 'address'; const ADDRESS = 'address';
......
...@@ -21,6 +21,9 @@ class Labels { ...@@ -21,6 +21,9 @@ class Labels {
public $phone; public $phone;
public $email; public $email;
public $button_delete;
public $button_add;
public function __construct() { public function __construct() {
$this->address_id = __( 'Identifier', 'wp-settings-field-sender-address' ); $this->address_id = __( 'Identifier', 'wp-settings-field-sender-address' );
$this->company = __( 'Company', 'wp-settings-field-sender-address' ); $this->company = __( 'Company', 'wp-settings-field-sender-address' );
...@@ -30,6 +33,9 @@ class Labels { ...@@ -30,6 +33,9 @@ class Labels {
$this->city = __( 'City', 'wp-settings-field-sender-address' ); $this->city = __( 'City', 'wp-settings-field-sender-address' );
$this->phone = __( 'Phone', 'wp-settings-field-sender-address' ); $this->phone = __( 'Phone', 'wp-settings-field-sender-address' );
$this->email = __( 'Email', 'wp-settings-field-sender-address' ); $this->email = __( 'Email', 'wp-settings-field-sender-address' );
$this->button_add = __( 'Add', 'wp-settings-field-sender-address' );
$this->button_delete = __( 'Delete', 'wp-settings-field-sender-address' );
} }
} }
...@@ -11,7 +11,7 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress; ...@@ -11,7 +11,7 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
*/ */
class SettingsField { class SettingsField {
const FIELD_TYPE = 'sender_address'; const FIELD_TYPE = 'sender_addresses';
/** /**
* Field name. * Field name.
...@@ -32,7 +32,7 @@ class SettingsField { ...@@ -32,7 +32,7 @@ class SettingsField {
/** /**
* Get field value from post as JSON. * Get field value from post as JSON.
* *
* @param array $posted_value . * @param array|string $posted_value .
* *
* @return string * @return string
*/ */
......
...@@ -12,6 +12,44 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress; ...@@ -12,6 +12,44 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
*/ */
trait ShippingMethodRenderSettingsTrait { trait ShippingMethodRenderSettingsTrait {
/**
* Prefix key for settings.
*
* @param string $key Field key.
* @return string
*/
public function get_field_key( $key ) {
return $this->plugin_id . $this->id . '_' . $key;
}
/**
* Get field params
*
* @param string $key Field key.
* @param array $data Data.
*
* @return array
*/
private function get_field_params( $key, $data ) {
$field_key = $this->get_field_key( $key );
$defaults = [
'field_key' => $field_key,
'title' => '',
'disabled' => false,
'class' => '',
'css' => '',
'placeholder' => '',
'type' => 'text',
'desc_tip' => false,
'description' => '',
'custom_attributes' => [],
'value' => '',
];
$data = wp_parse_args( $data, $defaults );
return $data;
}
/** /**
* Generates settings HTML. * Generates settings HTML.
* *
...@@ -20,11 +58,27 @@ trait ShippingMethodRenderSettingsTrait { ...@@ -20,11 +58,27 @@ trait ShippingMethodRenderSettingsTrait {
* *
* @return string * @return string
*/ */
public function generate_sender_address_html( $key, $data ) { public function generate_sender_addresses_html( $key, $data ) {
$settings_field = new SettingsField( $key ); $data['value'] = $this->get_option( $key );
$data = $this->get_field_params( $key, $data );
$settings_field = new SettingsField( $data['field_key'] );
ob_start(); ob_start();
$settings_field->render( $data['title'], '', isset( $data['value'] ) ? $data['value'] : '', null ); $settings_field->render( $data['title'], '', $data['value'], null );
return ob_get_clean(); return ob_get_clean();
} }
/**
* Validate field.
*
* Convert field to json.
*
* @param string $key Field key.
* @param string $value Posted Value.
* @return string
*/
public function validate_sender_addresses_field( $key, $value ) {
$settings_field = new SettingsField( $key );
return $settings_field->get_field_posted_value_as_json( $value );
}
} }
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ShippingBoxes from '../components/sender-address.jsx'; import SenderAddress from '../components/sender-address.jsx';
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
let elements = document.getElementsByClassName("settings-field-sender-address"); let elements = document.getElementsByClassName("settings-field-sender-address");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment