From 96109e0f264d7f15fd468a8e9960f4daa5e8752f Mon Sep 17 00:00:00 2001
From: ralf <rb@egroupware.org>
Date: Sat, 18 Jun 2022 15:06:50 +0200
Subject: [PATCH] Several account or contact edit fixes - fix no groups were
 selected (as they have numeric values) - fix size of country and state
 selection - WIP adding flags to select-country - WIP fixing selecting a
 country set country_code for state selection

---
 addressbook/js/app.ts                   |  7 ++--
 addressbook/templates/default/app.css   |  1 -
 addressbook/templates/default/edit.xet  | 44 ++++++++++-------------
 addressbook/templates/pixelegg/app.css  |  2 --
 addressbook/templates/pixelegg/app.less |  1 -
 api/js/etemplate/Et2Select/Et2Select.ts | 48 +++++++++++++++++++++++--
 6 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/addressbook/js/app.ts b/addressbook/js/app.ts
index 065fa325c7..f78036c6ff 100644
--- a/addressbook/js/app.ts
+++ b/addressbook/js/app.ts
@@ -739,8 +739,7 @@ class AddressbookApp extends EgwApp
 	show_custom_country(selectbox)
 	{
 		if(!selectbox) return;
-		var custom_field_name = selectbox.id.replace("countrycode", "countryname");
-		var custom_field = <HTMLInputElement>document.getElementById(custom_field_name);
+		const custom_field = this.et2.getWidgetById(selectbox.id.replace("countrycode", "countryname"));
 		let display = "inline";
 		if(custom_field && selectbox.value == "-custom-") {
 			display = "inline";
@@ -750,8 +749,6 @@ class AddressbookApp extends EgwApp
 			if((selectbox.value == "" || selectbox.value == null) && custom_field.value != "")
 			{
 				selectbox.value = "-custom-";
-				// Chosen needs this to update
-				jQuery(selectbox).trigger("liszt:updated");
 
 				display = "inline";
 			}
@@ -765,7 +762,7 @@ class AddressbookApp extends EgwApp
 			custom_field.attributeStyleMap.set("display", display);
 		}
 
-		var region = this.et2.getWidgetById(selectbox.name.replace('countrycode', 'region'));
+		var region = this.et2.getWidgetById(selectbox.id.replace('countrycode', 'region'));
 		if(region)
 		{
 			region.set_country_code(selectbox.value);
diff --git a/addressbook/templates/default/app.css b/addressbook/templates/default/app.css
index 0f611df33b..9c691fa4d9 100644
--- a/addressbook/templates/default/app.css
+++ b/addressbook/templates/default/app.css
@@ -132,7 +132,6 @@ select#addressbook-index_col_filter\[tid\] {
 
 #addressbook-index_nm .chzn-drop {width:auto;}
 #addressbook-edit_adr_one_region, #addressbook-edit_adr_two_region {
-	width: 130px;
     vertical-align: middle;
     margin-left: 1px;
 }
diff --git a/addressbook/templates/default/edit.xet b/addressbook/templates/default/edit.xet
index 307e2ebb4e..f5a9fdb274 100644
--- a/addressbook/templates/default/edit.xet
+++ b/addressbook/templates/default/edit.xet
@@ -91,9 +91,8 @@
                            options="tel_fax,&amp;hearts;"/>
                     <description for="adr_one_countryname" value="country"/>
                     <vbox class="city_state_postcode" width="100%">
-                        <select type="select-country" tags="true" width="100%" class="countrySelect"
-                                id="adr_one_countrycode" tabindex="15"
-                                onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1"
+                        <select-country width="100%" class="countrySelect" id="adr_one_countrycode" tabindex="15"
+                                onchange="app.addressbook.show_custom_country(this);" empty_label="Select one"
                                 autocomplete="country"/>
                         <textbox id="adr_one_countryname" class="custom_country"
                                  autocomplete="country-name"/>
@@ -105,9 +104,8 @@
                     <radio statustext="select phone number as prefered way of contact" id="tel_prefer"
                            options="tel_other,&amp;hearts;"/>
                     <description value="Region"/>
-                    <taglist-state class="city_state_postcode" statustext="State" maxSelection="1"
-                                   multiple="toggle" editModeEnabled="false" country_code="$cont[adr_one_countrycode]"
-                                   id="adr_one_region" tabindex="16" maxlength="64"/>
+                    <select-state class="city_state_postcode" statustext="State" country_code="$cont[adr_one_countrycode]"
+                                  empty_label="Select one" id="adr_one_region" tabindex="16" maxlength="64"/>
                 </row>
                 <row disabled="!@addr_format=city_state_postcode">
                     <description for="tel_assistent" value="Assistent phone"/>
@@ -118,9 +116,8 @@
                     <hbox>
                         <textbox statustext="City" id="adr_one_locality" size="30" maxlength="64" tabindex="13"
                                  autocomplete="address-level2"/>
-                        <taglist-state statustext="State" maxSelection="1" multiple="toggle" editModeEnabled="false"
-                                       country_code="$cont[adr_one_countrycode]" id="adr_one_region" tabindex="14"
-                                       width="130"/>
+                        <select-state statustext="State" country_code="$cont[adr_one_countrycode]" id="adr_one_region" tabindex="14"
+                                      empty_label="Select one" width="130"/>
                         <textbox statustext="ZIP Code" id="adr_one_postalcode" size="5" maxlength="64" tabindex="15"
                                  autocomplete="postal-code"/>
                     </hbox>
@@ -132,9 +129,8 @@
                            options="tel_fax,&amp;hearts;"/>
                     <description for="adr_one_countryname" value="country"/>
                     <vbox width="100%" tabindex="16">
-                        <select-country tabindex="16" tags="true" width="100%" class="countrySelect"
-                                        id="adr_one_countrycode" onchange="app.addressbook.show_custom_country(this);"
-                                        options="Select one,0,1" autocomplete="country"/>
+                        <select-country tabindex="16" width="100%" class="countrySelect" id="adr_one_countrycode" onchange="app.addressbook.show_custom_country(this);"
+                                 empty_label="Select one" autocomplete="country"/>
                         <textbox id="adr_one_countryname" class="custom_country" tabindex="16"
                                  autocomplete="country-name"/>
                     </vbox>
@@ -276,9 +272,9 @@
                            options="tel_pager,&amp;hearts;"/>
                     <description for="adr_two_countryname" value="country"/>
                     <vbox width="100%" class="city_state_postcode">
-                        <select-country tabindex="37" tags="true" width="100%" class="countrySelect"
-                                        id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);"
-                                        options="Select one,0,1" autocomplete="section-two country"/>
+                        <select-country tabindex="37" width="100%" class="countrySelect" id="adr_two_countrycode"
+                                 onchange="app.addressbook.show_custom_country(this);"
+                                 empty_label="Select one" autocomplete="section-two country"/>
                         <textbox id="adr_two_countryname" class="custom_country"
                                  autocomplete="section-two country-name"/>
                     </vbox>
@@ -289,9 +285,8 @@
                     <date id="bday" tabindex="31" options="Y-m-d" year_range="c-90:c+2"/>
                     <description/>
                     <description value="Region"/>
-                    <taglist-state statustext="State" maxSelection="1" multiple="toggle" editModeEnabled="false"
-                                   country_code="$cont[adr_two_countrycode]" id="adr_two_region" tabindex="38"
-                                   maxlength="64" class="city_state_postcode"/>
+                    <select-state statustext="State" country_code="$cont[adr_two_countrycode]" id="adr_two_region" tabindex="38"
+                                  empty_label="Select one" maxlength="64" class="city_state_postcode"/>
                     <description/>
                 </row>
                 <row disabled="!@addr_format=city_state_postcode">
@@ -303,9 +298,8 @@
                     <hbox>
                         <textbox statustext="City" id="adr_two_locality" size="30" maxlength="64"
                                  autocomplete="section-two address-level2"/>
-                        <taglist-state maxSelection="1" multiple="toggle" editModeEnabled="false"
-                                       country_code="$cont[adr_one_countrycode]" statustext="State" id="adr_two_region"
-                                       width="130" autocomplete="section-two address-level1"/>
+                        <select-state country_code="$cont[adr_one_countrycode]" statustext="State" id="adr_two_region"
+                                      empty_label="Select one" width="130" autocomplete="section-two address-level1"/>
                         <textbox statustext="ZIP Code" id="adr_two_postalcode" size="5" maxlength="64"
                                  autocomplete="section-two postal-code"/>
                     </hbox>
@@ -318,9 +312,9 @@
                            options="tel_pager,&amp;hearts;"/>
                     <description for="adr_two_countryname" value="country"/>
                     <vbox width="100%">
-                        <select-country class="countrySelect" tags="true" width="100%"
-                                        id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);"
-                                        options="Select one,0,1" autocomplete="section-two country"/>
+                        <select-country class="countrySelect" width="100%" id="adr_two_countrycode"
+                                 onchange="app.addressbook.show_custom_country(this);"
+                                 empty_label="Select one" autocomplete="section-two country"/>
                         <textbox id="adr_two_countryname" class="custom_country"
                                  autocomplete="section-two country-name"/>
                     </vbox>
@@ -522,4 +516,4 @@
 			</rows>
 		</grid>
 	</template>
-</overlay>
+</overlay>
\ No newline at end of file
diff --git a/addressbook/templates/pixelegg/app.css b/addressbook/templates/pixelegg/app.css
index 72346e6899..76c247c440 100755
--- a/addressbook/templates/pixelegg/app.css
+++ b/addressbook/templates/pixelegg/app.css
@@ -9,7 +9,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
  * @package addressbook
- * @version $Id$
  */
 /**
  * CRM view with contact data in sidebox
@@ -157,7 +156,6 @@ select#addressbook-index_col_filter\[tid\] {
 }
 #addressbook-edit_adr_one_region,
 #addressbook-edit_adr_two_region {
-  width: 130px;
   vertical-align: middle;
   margin-left: 1px;
 }
diff --git a/addressbook/templates/pixelegg/app.less b/addressbook/templates/pixelegg/app.less
index 6ee97ecef7..e95ce497d2 100755
--- a/addressbook/templates/pixelegg/app.less
+++ b/addressbook/templates/pixelegg/app.less
@@ -9,7 +9,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
  * @package addressbook
- * @version $Id$
  */
 
 
diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 4cde4c97e3..cf27a63184 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -187,12 +187,16 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
 		this.multiple = multi;
 	}
 
-	set_value(val : string | string[] | number)
+	set_value(val : string | string[] | number | number[])
 	{
 		if (typeof val === 'number')
 		{
 			val = val.toString();
 		}
+		if (Array.isArray(val))
+		{
+			val = val.map(v => typeof v === 'number' ? v.toString() : v || '');
+		}
 		this.value = val || '';
 	}
 
@@ -609,7 +613,16 @@ export class Et2SelectCountry extends Et2Select
 	{
 		super();
 
-		this.select_options = so.country(this, {});
+		this.search = true;
+
+		this.select_options = so.country(this, {}).map((country) => {
+			if (country.value[0] !== '-')
+			{
+				country.icon = egw.image('flags');
+				country.class = 'flag-'+country.value.toLowerCase();
+			}
+			return country;
+		});
 	}
 }
 
@@ -747,11 +760,40 @@ customElements.define("et2-select-priority", Et2SelectPriority);
 
 export class Et2SelectState extends Et2Select
 {
+	/**
+	 * Two-letter ISO country code
+	 */
+	protected __country_code;
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			country_code: String,
+		}
+	}
+
 	constructor()
 	{
 		super();
 
-		this.select_options = so.state(this, {other: this.other || []});
+		this.country_code = 'DE';
+	}
+
+	get country_code()
+	{
+		return this.__country_code;
+	}
+
+	set country_code(code : string)
+	{
+		this.__country_code = code;
+		this.select_options = so.state(this, {country_code: this.__country_code});
+	}
+
+	set_country_code(code)
+	{
+		this.country_code = code;
 	}
 }