Unique identifier

assets/css/style.css

@@ -31,7 +31,7 @@ table.sender-address tbody td {
     margin-bottom: 9px;
     padding: 15px 10px;
     line-height: 1.3;
-    vertical-align: middle;
+    vertical-align: top;
     border-top: 1px solid #e5e5e5;
 }
 
@@ -43,6 +43,18 @@ table.sender-address tbody tr:nth-child(even) td {
     background: #f9f9f9;
 }
 
+table.sender-address input.non-unique {
+    background: #d62728;
+}
+
+table.sender-address tbody td span {
+    display: none;
+}
+
+table.sender-address tbody td.non-unique span {
+    display: block;
+}
+
 table.sender-address input[type="text"] {
     max-width: 100%;
     width: 100%;

assets/css/style.min.css

-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
+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:top;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.non-unique{background:#d62728}table.sender-address tbody td span{display:none}table.sender-address tbody td.non-unique span{display:block}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

assets/js/settings-sender-address.js

@@ -32575,9 +32575,17 @@ var SenderAddressTable = function (_React$Component) {
         var elements = 0;
         var addresses = props.addresses;
+        var addresses_ids = {};
         addresses.forEach(function (element) {
             element.id = elements;
             elements++;
+            // Mark non unique address_ids.
+            if (addresses_ids[element.address_id] === undefined) {
+                addresses_ids[element.address_id] = element.address_id;
+                element.unique = true;
+            } else {
+                element.unique = false;
+            }
         });
         /**
          * @type {{addresses: array, elements: number, name: *, labels: ([]|NodeListOf<HTMLLabelElement>|any|*[]|NodeListOf<HTMLLabelElement>)}}
@@ -32604,6 +32612,7 @@ var SenderAddressTable = function (_React$Component) {
             state.elements++;
             state.addresses.push({
                 id: state.elements,
+                unique: true,
                 address_id: '',
                 company: '',
                 name: '',
@@ -32781,7 +32790,7 @@ var AddressRow = function (_React$Component) {
         /**
          * @type {
          *  {
-         *      address: { id: number, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
+         *      address: { id: number, unique: boolean, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
          *      index: number,
          *      inputNamePrefix: string,
          *      labels: {}
@@ -32816,8 +32825,13 @@ var AddressRow = function (_React$Component) {
                 { id: this.state.inputNamePrefix + '_' + this.state.index, className: 'sender-address' },
                 _react2.default.createElement(
                     'td',
+                    { className: address.unique ? '' : 'non-unique' },
+                    _react2.default.createElement(_addressInput2.default, { className: address.unique ? '' : 'non-unique', address: address, field: 'address_id', name: field_name + '[address_id]', value: this.state.address.address_id }),
+                    _react2.default.createElement(
+                        'span',
                         null,
-                    _react2.default.createElement(_addressInput2.default, { address: address, field: 'address_id', name: field_name + '[address_id]', value: this.state.address.address_id })
+                        labels.non_unique_id
+                    )
                 ),
                 _react2.default.createElement(
                     'td',
@@ -32978,7 +32992,7 @@ var AddressInput = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var className = 'input-text regular-input';
+            var className = 'input-text regular-input ' + this.props.className;
             return _react2.default.createElement('input', {
                 className: className,

components/address-input.jsx

@@ -67,7 +67,7 @@ export default class AddressInput extends React.Component {
      * @returns {*}
      */
     render () {
-        let className = 'input-text regular-input';
+        let className = 'input-text regular-input ' + this.props.className;
 
         return (
             <input

components/address-row.jsx

@@ -15,7 +15,7 @@ export default class AddressRow extends React.Component {
         /**
          * @type {
          *  {
-         *      address: { id: number, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
+         *      address: { id: number, unique: boolean, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
          *      index: number,
          *      inputNamePrefix: string,
          *      labels: {}
@@ -39,9 +39,10 @@ export default class AddressRow extends React.Component {
         let labels = this.state.labels;
 
         return (
-            <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} />
+            <tr id={this.state.inputNamePrefix + '_' + this.state.index} className='sender-address'>
+                <td className={address.unique ? '' : 'non-unique'}>
+                    <AddressInput className={address.unique ? '' : 'non-unique'} address={address} field='address_id' name={field_name + '[address_id]'} value={this.state.address.address_id} />
+                    <span>{labels.non_unique_id}</span>
                 </td>
                 <td>
                     <AddressInput address={address} field='company' name={field_name + '[company]'} value={this.state.address.company} />

components/sender-address-table.jsx

@@ -14,9 +14,17 @@ export default class SenderAddressTable extends React.Component {
         super(props);
         let elements = 0;
         let addresses = props.addresses;
+        let addresses_ids = {};
         addresses.forEach(function(element){
             element.id = elements;
             elements++;
+            // Mark non unique address_ids.
+            if ( addresses_ids[element.address_id] === undefined ) {
+                addresses_ids[element.address_id] = element.address_id;
+                element.unique = true;
+            } else {
+                element.unique = false;
+            }
         })
         /**
          * @type {{addresses: array, elements: number, name: *, labels: ([]|NodeListOf<HTMLLabelElement>|any|*[]|NodeListOf<HTMLLabelElement>)}}
@@ -38,6 +46,7 @@ export default class SenderAddressTable extends React.Component {
         state.elements++;
         state.addresses.push({
             id: state.elements,
+            unique: true,
             address_id: '',
             company:  '',
             name:  '',

lang/pl_PL.po

@@ -2,8 +2,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2020-02-18 18:07+0100\n"
-"PO-Revision-Date: 2020-02-18 18:08+0100\n"
+"POT-Creation-Date: 2020-02-24 18:55+0100\n"
+"PO-Revision-Date: 2020-02-24 18:55+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,45 +22,49 @@ msgstr ""
 "X-Poedit-SearchPathExcluded-0: *.js\n"
 "X-Poedit-SearchPathExcluded-1: vendor\n"
 
-#: src/Labels.php:28
+#: src/Labels.php:30
 msgid "Identifier"
 msgstr "Identyfikator"
 
-#: src/Labels.php:29
+#: src/Labels.php:31
 msgid "Company"
 msgstr "Firma"
 
-#: src/Labels.php:30
+#: src/Labels.php:32
 msgid "Name"
 msgstr "Imię i nazwisko"
 
-#: src/Labels.php:31
+#: src/Labels.php:33
 msgid "Address"
 msgstr "Adres"
 
-#: src/Labels.php:32
+#: src/Labels.php:34
 msgid "Postal code"
 msgstr "Kod pocztowy"
 
-#: src/Labels.php:33
+#: src/Labels.php:35
 msgid "City"
 msgstr "Miasto"
 
-#: src/Labels.php:34
+#: src/Labels.php:36
 msgid "Phone"
 msgstr "Telefon"
 
-#: src/Labels.php:35
+#: src/Labels.php:37
 msgid "Email"
 msgstr "E-mail"
 
-#: src/Labels.php:37
+#: src/Labels.php:39
 msgid "Add"
 msgstr "Dodaj"
 
-#: src/Labels.php:38
+#: src/Labels.php:40
 msgid "Delete"
 msgstr "Usuń"
 
+#: src/Labels.php:42
+msgid "Identifier is not unique!"
+msgstr "Identyfikator nie jest unikalny!"
+
 #~ msgid "Custom"
 #~ msgstr "Własne"

src/Labels.php

@@ -24,6 +24,8 @@ class Labels {
 	public $button_delete;
 	public $button_add;
 
+	public $non_unique_id;
+
 	public function __construct() {
 		$this->address_id  = __( 'Identifier', 'wp-settings-field-sender-address' );
 		$this->company     = __( 'Company', 'wp-settings-field-sender-address' );
@@ -36,6 +38,8 @@ class Labels {
 
 		$this->button_add    = __( 'Add', 'wp-settings-field-sender-address' );
 		$this->button_delete = __( 'Delete', 'wp-settings-field-sender-address' );
+
+		$this->non_unique_id = __( 'Identifier is not unique!', 'wp-settings-field-sender-address' );
 	}
 
 }