hamzus-ui 0.0.231 → 0.0.233

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/Form/Form.svelte +59 -99
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.231",
3
+ "version": "0.0.233",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Form/Form.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>
2
+ import { sendRequest } from '@utils/request';
2
3
  import { onMount } from 'svelte';
3
4
 
4
5
  export let afterSubmit = () => {};
@@ -10,13 +11,13 @@
10
11
  export let successMessage = null;
11
12
  export let errorMessage = null;
12
13
  export let includeToken = true;
13
- export let appendData = undefined
14
- export let alterData = undefined
15
- export let preventQuit = true
14
+ export let appendData = undefined;
15
+ export let alterData = undefined;
16
+ export let preventQuit = true;
16
17
 
17
18
  import { getCookie } from './clientCookie';
18
19
  import { beforeNavigate } from '$app/navigation';
19
- import { config } from '../../../utils/hamzus.config.js';
20
+ import { config } from '../../../utils/hamzus.config.js';
20
21
 
21
22
  let form;
22
23
  let isFormDirty = false;
@@ -54,118 +55,77 @@
54
55
 
55
56
  beforeNavigate(({ cancel }) => {
56
57
  if (isFormDirty && preventQuit) {
57
- let confiramtion = confirm("Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?")
58
- if (!confiramtion) {
59
- cancel();
60
- }
58
+ let confiramtion = confirm(
59
+ 'Vos modifications pourraient être perdues. Êtes-vous sûr de vouloir quitter cette page ?'
60
+ );
61
+ if (!confiramtion) {
62
+ cancel();
63
+ }
61
64
  }
62
65
  });
63
66
 
64
- function handleSubmit(event) {
65
- if (sending) {
66
- return
67
- }
68
67
 
68
+ async function handleSubmit(event) {
69
+ if (sending) return;
69
70
  sending = true;
70
71
 
71
72
  let formData = new FormData(event.target);
72
73
 
73
- // inclure le token
74
- if (includeToken) {
75
- const token = getCookie(config['sessionTokenName']);
76
- formData.append(config['sessionTokenName'], token);
74
+ if (appendData !== undefined) {
75
+ let moreData = appendData();
76
+ for (const key in moreData) {
77
+ formData.append(key, moreData[key]);
78
+ }
77
79
  }
78
80
 
79
- // inclure les données
80
- if (appendData !== undefined) {
81
- let moreData = appendData();
82
-
83
- for (const key in moreData) {
84
- formData.append(key, moreData[key])
85
- }
86
- }
87
-
88
- // alterer si possible les donné
89
- if (alterData !== undefined) {
90
- const alteredData = alterData(Object.fromEntries(formData.entries())) // passer les données du formulaire acutelle en parametre
91
-
92
- formData = new FormData();
93
-
94
- for (const key in alteredData) {
95
- formData.append(key, alteredData[key])
96
- }
97
- }
98
-
99
-
100
- // Création de la requête XHR
101
- var scriptPath = (url || config['url']) + path;
102
- const xhr = new XMLHttpRequest();
103
- xhr.open('POST', scriptPath, true);
104
-
105
- xhr.withCredentials = config.requestWithCredentials || false;
106
-
107
- xhr.onload = function () {
108
- sending = false;
109
-
110
- if (form.querySelectorAll(`input.invalid`).length > 0) {
111
- const inputs = form.querySelectorAll(`input.invalid`);
112
- for (const input of inputs) {
113
- input.classList.remove('invalid');
114
- }
81
+ if (alterData !== undefined) {
82
+ const alteredData = alterData(Object.fromEntries(formData.entries()));
83
+ formData = new FormData();
84
+ for (const key in alteredData) {
85
+ formData.append(key, alteredData[key]);
115
86
  }
87
+ }
116
88
 
117
- try {
118
- const response = JSON.parse(xhr.responseText);
119
- if (response.statusType == 'success') {
120
- // desaactiver le invcalid
121
- isFormDirty = false
122
- errorMessage = null;
123
- if (!avoidAutoMessage) {
124
- successMessage = response.message;
125
- setInterval(() => {
126
- successMessage = null;
127
- }, 5000);
128
- }
129
- } else {
130
- successMessage = null;
131
- if (!avoidAutoMessage) {
132
- errorMessage = response.message;
133
- }
134
-
135
- // verifier si il y a des input manquant
136
- if (response.requiredField && response.requiredField.length > 0) {
137
- for (const inputName of response.requiredField) {
138
- if (form.querySelector(`input[name="${inputName}"]`)) {
139
- const input = form.querySelector(`input[name="${inputName}"]`);
140
- input.classList.add('invalid');
141
- }
142
- }
143
- }
144
- if (response.invalidField && response.invalidField.length > 0) {
145
- for (const inputName of response.invalidField) {
146
- if (form.querySelector(`input[name="${inputName}"]`)) {
147
- const input = form.querySelector(`input[name="${inputName}"]`);
148
- input.classList.add('invalid');
149
- }
150
- }
151
- }
152
- }
153
- } catch (error) {
154
- console.error(error);
155
- return;
89
+ const response = await sendRequest({
90
+ url: url,
91
+ path,
92
+ includeToken,
93
+ formData
94
+ });
95
+
96
+ sending = false;
97
+
98
+ if (!response) return;
99
+
100
+ // nettoyer les invalids
101
+ if (form.querySelectorAll('input.invalid').length > 0) {
102
+ for (const input of form.querySelectorAll('input.invalid')) {
103
+ input.classList.remove('invalid');
156
104
  }
105
+ }
157
106
 
158
- if (afterSubmit) {
159
- afterSubmit(JSON.parse(xhr.responseText));
107
+ if (response.statusType === 'success') {
108
+ isFormDirty = false;
109
+ errorMessage = null;
110
+ if (!avoidAutoMessage) {
111
+ successMessage = response.message;
112
+ setInterval(() => {
113
+ successMessage = null;
114
+ }, 5000);
160
115
  }
161
- };
116
+ } else {
117
+ successMessage = null;
118
+ if (!avoidAutoMessage) errorMessage = response.message;
162
119
 
163
- xhr.onerror = function () {
164
- sending = false
165
- };
120
+ for (const inputName of response.requiredField || []) {
121
+ form.querySelector(`input[name="${inputName}"]`)?.classList.add('invalid');
122
+ }
123
+ for (const inputName of response.invalidField || []) {
124
+ form.querySelector(`input[name="${inputName}"]`)?.classList.add('invalid');
125
+ }
126
+ }
166
127
 
167
- // Envoi des données sous forme JSON
168
- xhr.send(formData);
128
+ if (afterSubmit) afterSubmit(response);
169
129
  }
170
130
  </script>
171
131