Merge pull request #41 from apuc/fix-request-data

Fix request data

CHANGELOG.md

@@ -85,3 +85,9 @@ Tested in JS and React. Errors in work in React applications are revealed.
 
 - Optimized code.
 - Added error messages when using public methods.
+
+### 04.10.2023 - update 0.3.2
+
+- Added the ability to set the name attribute for further sending data to the server. (\*nameSelect: string)
+- Added a function to POST a request to the server when selecting an item. (\*getRequestUrl: string)
+- Optimized code.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.3.12
+## version ~ 0.3.2
 
 <a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
 
@@ -30,6 +30,7 @@ npm i cg-select
 ```
 <script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
 ```
+
 #### PHP
 
 Repository: <a href="https://git.itguild.info/apuc/php-cg-select-v2">PHP cg-select package integration</a>
@@ -156,8 +157,6 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
 
 <a href="https://cg-select.itguild.info/up_/documentation/index.html">Documentation</a>
 
-
-
 ## Contributing
 
 1. Fork it!

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## Версия ~ 0.3.12
+## Версия ~ 0.3.2
 
 <a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.3.12",
+  "version": "0.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -26,7 +26,7 @@
         "typedoc": "^0.23.28",
         "typescript": "^5.0.2",
         "webpack": "^5.77.0",
-        "webpack-cli": "^5.0.1",
+        "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.13.2"
       }
     },
@@ -2320,9 +2320,9 @@
       }
     },
     "node_modules/@webpack-cli/configtest": {
-      "version": "2.0.1",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
-      "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -2333,9 +2333,9 @@
       }
     },
     "node_modules/@webpack-cli/info": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -2346,9 +2346,9 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "2.0.1",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
-      "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -2959,12 +2959,12 @@
       "dev": true
     },
     "node_modules/commander": {
-      "version": "9.5.0",
+      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
       "dev": true,
       "engines": {
-        "node": "^12.20.0 || >=14"
+        "node": ">=14"
       }
     },
     "node_modules/commondir": {
@@ -6416,17 +6416,17 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "5.0.1",
+      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
-      "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.0.1",
+        "@webpack-cli/configtest": "^2.1.1",
-        "@webpack-cli/info": "^2.0.1",
+        "@webpack-cli/info": "^2.0.2",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
@@ -8482,23 +8482,23 @@
       }
     },
     "@webpack-cli/configtest": {
-      "version": "2.0.1",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
-      "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/info": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/serve": {
-      "version": "2.0.1",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
-      "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
       "dev": true,
       "requires": {}
     },
@@ -8945,9 +8945,9 @@
       "dev": true
     },
     "commander": {
-      "version": "9.5.0",
+      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
       "dev": true
     },
     "commondir": {
@@ -11503,17 +11503,17 @@
       }
     },
     "webpack-cli": {
-      "version": "5.0.1",
+      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
-      "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.0.1",
+        "@webpack-cli/configtest": "^2.1.1",
-        "@webpack-cli/info": "^2.0.1",
+        "@webpack-cli/info": "^2.0.2",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.3.12",
+  "version": "0.3.2",
   "source": "index.js",
   "main": "dist/main.js",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
@@ -40,7 +40,7 @@
     "typedoc": "^0.23.28",
     "typescript": "^5.0.2",
     "webpack": "^5.77.0",
-    "webpack-cli": "^5.0.1",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.13.2"
   },
   "keywords": [

src/cg-select.ts

@@ -46,6 +46,8 @@ export default class CGSelect implements ICgSelect {
   label?: string;
   styles?: IStyle;
   event?: string;
+  nameSelect?: string;
+  getRequestUrl?: string;
   url?: string;
   multiselect?: boolean;
   multiselectTag?: boolean;
@@ -95,6 +97,11 @@ export default class CGSelect implements ICgSelect {
    * @type {Element | null}
    */
   private buttonAction?: Element | null;
+  /**
+   * Array for request
+   * @type {IItems}
+   */
+  private forUrlSelectedItems: IItems[] = [];
 
   /**
    * @param {ICgSelect} setting Object accepting select settings.
@@ -113,6 +120,8 @@ export default class CGSelect implements ICgSelect {
       nativeSelectMode: true/false,
       listDisplayMode: true/false,
       language: 'ru/en',
+      nameSelect: "titleYouSelect";
+      getRequestUrl: "/endpoint/123";
       styles: {
         head: {
           background: '...',
@@ -197,6 +206,8 @@ export default class CGSelect implements ICgSelect {
       styles,
       label,
       event,
+      nameSelect,
+      getRequestUrl,
       selected,
       placeholder,
       theme,
@@ -216,6 +227,8 @@ export default class CGSelect implements ICgSelect {
     this.styles = styles;
     this.label = label;
     this.event = event;
+    this.nameSelect = nameSelect;
+    this.getRequestUrl = getRequestUrl;
     this.selected = selected;
     this.placeholder = placeholder;
     this.theme = theme;
@@ -283,7 +296,7 @@ export default class CGSelect implements ICgSelect {
     }
 
     const ulList = document.createElement('ul');
-    const nativeSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect(this.nameSelect);
 
     let inputSearch: HTMLInputElement;
     let textNode: Text;
@@ -384,7 +397,7 @@ export default class CGSelect implements ICgSelect {
     const response = await fetch(this.url!);
     const dataUrl = await response.json();
 
-    const nativeSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect(this.nameSelect!);
 
     dataUrl.forEach((dataItem: IItems, index: number) => {
       const item = {
@@ -613,6 +626,17 @@ export default class CGSelect implements ICgSelect {
                   select!.innerText = this.selectedItems.join(',');
                 }
               }
+
+              if (this.getRequestUrl!) {
+                this.forUrlSelectedItems.push(item);
+                fetch(this.getRequestUrl, {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json;charset=utf-8',
+                  },
+                  body: JSON.stringify(this.forUrlSelectedItems),
+                });
+              }
             } else {
               if (this.multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
@@ -622,6 +646,17 @@ export default class CGSelect implements ICgSelect {
               if (Array.isArray(this.selectedItems)) {
                 this.selectedItems.splice(checkIndex, 1);
                 this.indexes.splice(checkIndex, 1);
+
+                if (this.getRequestUrl! && this.forUrlSelectedItems.length > 0) {
+                  this.forUrlSelectedItems.splice(checkIndex, 1);
+                  fetch(this.getRequestUrl, {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json;charset=utf-8',
+                    },
+                    body: JSON.stringify(this.forUrlSelectedItems),
+                  });
+                }
                 nativeOptionMultiple(nativeOption, item.title, false);
               }
             }
@@ -648,6 +683,16 @@ export default class CGSelect implements ICgSelect {
             option.classList.remove('active');
           });
           option.classList.add('active');
+
+          if (this.getRequestUrl!) {
+            fetch(this.getRequestUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json;charset=utf-8',
+              },
+              body: JSON.stringify(item),
+            });
+          }
         }
 
         clearSelect(select!, this.element!, selectedItemsClear);

src/components/create-element/create-element.ts

@@ -5,10 +5,14 @@ import { ICreateBreadCrumb } from './create-element.interface';
  * The method that creates the native select.
  * @returns {HTMLSelectElement} Returns the created native select.
  */
-export function createNativeSelect(): HTMLSelectElement {
+export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement {
   const nativeSelect = document.createElement('select');
 
-  nativeSelect.setAttribute('name', 'dataSelect');
+  if (nameSelect == undefined) {
+    nativeSelect.setAttribute('name', 'CgSelect');
+  } else {
+    nativeSelect.setAttribute('name', nameSelect!);
+  }
   nativeSelect.classList.add('nativeSelect');
   return nativeSelect;
 }

src/interfaces/cg-select.interface.ts

@@ -75,6 +75,18 @@ export interface ICgSelect {
    * @type {string}
    */
   event?: string;
+
+  /**
+   * Optional parameter responsible for the native select attribute.
+   * @type {string}
+   */
+  nameSelect?: string;
+
+  /**
+   * Optional parameter responsible for the sending address when selected in the select.
+   * @type {string}
+   */
+  getRequestUrl?: string;
   /**
    * Required parameter (if no other way to get data (items) is specified),
    * data that comes from the backend in the format { id: "", title: "", value: ""}.