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"] {
width: 100%;
}
table.sender-address thead tr td:first-child {
width: 20%;
table.sender-address input[type="email"] {
max-width: 100%;
width: 100%;
}
table.sender-address tbody tr td:first-child select {
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%}}
\ No newline at end of file
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
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';
export default class BoxInput extends React.Component {
export default class AddressInput extends React.Component {
constructor (props) {
super(props);
let type = 'text';
if ( props.type ) {
type = props.type;
}
this.state = {
box: props.box,
address: props.address,
field: props.field,
type: props.type,
name: props.name,
value: props.value,
readOnly: props.readOnly
type: type,
};
this.handleChange = this.handleChange.bind(this);
......@@ -17,40 +20,30 @@ export default class BoxInput extends React.Component {
componentWillReceiveProps(props){
this.setState({
box: props.box,
address: props.address,
field: props.field,
type: props.type,
name: props.name,
value: props.value,
readOnly: props.readOnly
value: props.value
});
}
handleChange(event) {
let state = this.state;
state.value = event.target.value;
state.box[state.field] = event.target.value;
state.address[state.field] = event.target.value;
this.setState(state);
}
render () {
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 (
<input
className={className}
type="text"
type={this.state.type}
name={this.state.name}
value={this.state.value}
required="required"
readOnly={this.state.readOnly}
onChange={this.handleChange}
/>
)
......
import React, { Component } from 'react';
import BoxInput from "./box-input.jsx";
import BoxType from "./box-type.jsx";
import AddressInput from "./address-input.jsx";
export default class BoxRow extends React.Component {
export default class AddressRow extends React.Component {
constructor (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 = {
box: props.box,
builtInBoxes: props.builtInBoxes,
builtIn: builtIn,
code: code,
address: props.address,
inputNamePrefix: props.name,
index: props.index,
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 () {
let field_name = this.state.inputNamePrefix + '[' + this.state.index + ']';
let readonly = this.state.builtIn;
let box = this.state.box;
let address = this.state.address;
let labels = this.state.labels;
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 BoxRow from "./box-row.jsx";
import AddressRow from "./address-row.jsx";
export default class SenderAddressTable extends React.Component {
constructor (props) {
super(props);
let elements = 0;
let boxes = props.boxes;
boxes.forEach(function(element){
let addresses = props.addresses;
addresses.forEach(function(element){
element.id = elements;
elements++;
})
this.state = {
boxes: boxes,
builtInBoxes: props.builtInBoxes,
addresses: addresses,
name: props.name,
elements: elements,
labels: props.labels,
};
}
handleClickAdd(event) {
event.preventDefault();
let state = this.state;
state.elements++;
state.boxes.push({
state.addresses.push({
id: state.elements,
code: 'custom',
length: '',
width: '',
height: '',
max_weight: '',
box_weight: 0,
padding: 0,
address_id: '',
company: '',
name: '',
address: '',
postal_code: '',
city: '',
phone: '',
email: '',
});
this.setState( state );
}
handleClickDelete(event) {
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);
}
......@@ -48,27 +47,27 @@ export default class SenderAddressTable extends React.Component {
let labels = this.state.labels;
return (
<table className="shipping-boxes">
<table className="sender-address">
<thead>
<tr>
<td className="cell-string">{labels.header_type}</td>
<td className="cell-number">{labels.header_length}</td>
<td className="cell-number">{labels.header_width}</td>
<td className="cell-number">{labels.header_height}</td>
<td className="cell-number">{labels.header_max_weight}</td>
<td className="cell-number">{labels.header_box_weight}</td>
<td className="cell-number">{labels.header_padding}</td>
<td className="cell-string">{labels.address_id}</td>
<td className="cell-string">{labels.company}</td>
<td className="cell-string">{labels.name}</td>
<td className="cell-string">{labels.address}</td>
<td className="cell-string">{labels.postal_code}</td>
<td className="cell-string">{labels.city}</td>
<td className="cell-string">{labels.phone}</td>
<td className="cell-string">{labels.email}</td>
<td className="cell-action"> </td>
</tr>
</thead>
<tbody>
{
this.state.boxes.map((box) =>
<BoxRow
key={box.id}
index={box.id}
builtInBoxes={this.state.builtInBoxes}
box={box}
this.state.addresses.map((address) =>
<AddressRow
key={address.id}
index={address.id}
address={address}
name={this.props.name}
handleClickDelete={this.handleClickDelete.bind(this)}
labels={labels}
......@@ -79,7 +78,7 @@ export default class SenderAddressTable extends React.Component {
<tfoot>
<tr>
<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>
</tr>
</tfoot>
......
......@@ -5,8 +5,7 @@ export default class SenderAddress extends React.Component {
constructor (props) {
super(props);
this.state = {
boxes: JSON.parse(props.boxes),
builtInBoxes: JSON.parse(props.builtinboxes),
addresses: JSON.parse(props.addresses),
name: props.name,
labels: JSON.parse(props.labels),
};
......@@ -16,7 +15,7 @@ export default class SenderAddress extends React.Component {
return (
<div>
<SenderAddressTable
boxes={this.state.boxes}
addresses={this.state.addresses}
name={this.state.name}
labels={this.state.labels}
/>
......
File deleted
......@@ -2,8 +2,8 @@ msgid ""
msgstr ""
"Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2020-01-28 13:08+0100\n"
"PO-Revision-Date: 2020-01-28 13:08+0100\n"
"POT-Creation-Date: 2020-02-18 18:07+0100\n"
"PO-Revision-Date: 2020-02-18 18:08+0100\n"
"Last-Translator: Krzysztof Dyszczyk <krzysztof.dyszczyk@gmail.com>\n"
"Language-Team: Maciej Swoboda <maciej.swoboda@gmail.com>\n"
"Language: pl_PL\n"
......@@ -22,6 +22,45 @@ msgstr ""
"X-Poedit-SearchPathExcluded-0: *.js\n"
"X-Poedit-SearchPathExcluded-1: vendor\n"
#: src/PackerBoxesFactory.php:20
msgid "Custom"
msgstr "Własne"
#: src/Labels.php:28
msgid "Identifier"
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;
*/
abstract class AbstractSenderAddress implements \JsonSerializable {
const ADDRESS_ID = 'id';
const ADDRESS_ID = 'address_id';
const COMPANY = 'company';
const NAME = 'name';
const ADDRESS = 'address';
......
......@@ -21,6 +21,9 @@ class Labels {
public $phone;
public $email;
public $button_delete;
public $button_add;
public function __construct() {
$this->address_id = __( 'Identifier', 'wp-settings-field-sender-address' );
$this->company = __( 'Company', 'wp-settings-field-sender-address' );
......@@ -30,6 +33,9 @@ class Labels {
$this->city = __( 'City', 'wp-settings-field-sender-address' );
$this->phone = __( 'Phone', '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;
*/
class SettingsField {
const FIELD_TYPE = 'sender_address';
const FIELD_TYPE = 'sender_addresses';
/**
* Field name.
......@@ -32,7 +32,7 @@ class SettingsField {
/**
* Get field value from post as JSON.
*
* @param array $posted_value .
* @param array|string $posted_value .
*
* @return string
*/
......
......@@ -12,6 +12,44 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
*/
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.
*
......@@ -20,11 +58,27 @@ trait ShippingMethodRenderSettingsTrait {
*
* @return string
*/
public function generate_sender_address_html( $key, $data ) {
$settings_field = new SettingsField( $key );
public function generate_sender_addresses_html( $key, $data ) {
$data['value'] = $this->get_option( $key );
$data = $this->get_field_params( $key, $data );
$settings_field = new SettingsField( $data['field_key'] );
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();
}
/**
* 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 ReactDOM from 'react-dom';
import ShippingBoxes from '../components/sender-address.jsx';
import SenderAddress from '../components/sender-address.jsx';
document.addEventListener('DOMContentLoaded', function () {
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