mgsdatatable 1.1.1 → 1.1.3
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.
- package/README.md +227 -70
- package/dist/mgsdatatable.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +90 -36
package/README.md
CHANGED
|
@@ -1,20 +1,172 @@
|
|
|
1
|
-
#
|
|
1
|
+
# mgsdatatable
|
|
2
2
|
|
|
3
3
|
A simple, lightweight JavaScript library to create tables with **pagination**, **sorting**, **searching**, and **rows-per-page limits** — all with minimal setup and no external dependencies.
|
|
4
4
|
|
|
5
|
+
All functions are globally accessible via window.
|
|
6
|
+
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
## ✨ Features
|
|
8
10
|
|
|
9
11
|
- 🔍 **Search** — Filter rows you type then enter keyword.
|
|
10
|
-
- ↕
|
|
12
|
+
- ↕ **Sorting** — Click column headers to sort (ascending/descending).
|
|
11
13
|
- 📄 **Pagination** — Navigate between pages easily.
|
|
12
14
|
- 📏 **Rows Limit** — Set how many rows appear per page.
|
|
13
|
-
- 🎨 **
|
|
15
|
+
- 🎨 **Result summary** — (e.g. Showing 1–10 of 50).
|
|
16
|
+
- 🎨 **Custom Serial Number** — (e.g. Sr.No.).
|
|
14
17
|
- 📦 **No Dependencies** — Works in all modern browsers.
|
|
15
18
|
|
|
16
19
|
---
|
|
17
20
|
|
|
21
|
+
## Function Uses
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
<div id="myTable"> </div>
|
|
25
|
+
<script>
|
|
26
|
+
mgsDataTable({
|
|
27
|
+
target: "#myTable", // Required
|
|
28
|
+
url: "http://localhost/mgs/users", // Required
|
|
29
|
+
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
|
|
30
|
+
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
|
|
31
|
+
isLimit: true, // Optional, default: true
|
|
32
|
+
isSearch: true, // Optional, default: true
|
|
33
|
+
isResult: true, // Optional, default: true
|
|
34
|
+
isPagination: true, // Optional, default: true
|
|
35
|
+
isSorting: true, // Optional, default: true
|
|
36
|
+
isSrno: true, // Optional, default: false
|
|
37
|
+
isSrnoText: "ID" // Optional, default: "Sr.No"
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
🔎Explanation of Each Option -
|
|
42
|
+
|
|
43
|
+
1 - target (string) – Required
|
|
44
|
+
|
|
45
|
+
The selector for the table where data will be rendered.
|
|
46
|
+
Example: "#myTable" or ".userTable"
|
|
47
|
+
Without this, the plugin won’t know which table to build.
|
|
48
|
+
|
|
49
|
+
2 - url (string) – Required
|
|
50
|
+
API endpoint to fetch data.
|
|
51
|
+
Example: "http://localhost/mgs/users"
|
|
52
|
+
The API should return a JSON response.
|
|
53
|
+
Response -
|
|
54
|
+
{
|
|
55
|
+
"status": true,
|
|
56
|
+
"data": {
|
|
57
|
+
"column": [
|
|
58
|
+
"name",
|
|
59
|
+
"role",
|
|
60
|
+
"email",
|
|
61
|
+
"mobile",
|
|
62
|
+
"image",
|
|
63
|
+
"status",
|
|
64
|
+
"action"
|
|
65
|
+
],
|
|
66
|
+
"data": [
|
|
67
|
+
{
|
|
68
|
+
"id": 1,
|
|
69
|
+
"name": "Mangesh",
|
|
70
|
+
"role": "superadmin",
|
|
71
|
+
"email": "mangesh@gmail.com",
|
|
72
|
+
"mobile": "1234567890",
|
|
73
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
74
|
+
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
75
|
+
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"id": 2,
|
|
79
|
+
"name": "Ashwani",
|
|
80
|
+
"role": "superadmin",
|
|
81
|
+
"email": "ashwani@gmail.com",
|
|
82
|
+
"mobile": "1234567891",
|
|
83
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
84
|
+
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
85
|
+
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
86
|
+
}
|
|
87
|
+
],
|
|
88
|
+
"from": 1,
|
|
89
|
+
"to": 10,
|
|
90
|
+
"total": 30
|
|
91
|
+
},
|
|
92
|
+
"message": "Data found"
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
3 - data (object) – Optional
|
|
96
|
+
|
|
97
|
+
Extra parameters sent with API requests.
|
|
98
|
+
Examples:
|
|
99
|
+
Laravel CSRF Token-
|
|
100
|
+
data: { token: "{{csrf_token()}}" }
|
|
101
|
+
|
|
102
|
+
Bearer Token (Auth API) -
|
|
103
|
+
data: { bearerToken: "yourAccessTokenHere" }
|
|
104
|
+
|
|
105
|
+
No auth / extra filters -
|
|
106
|
+
data: {}
|
|
107
|
+
|
|
108
|
+
4 - pageLimits (array) – Optional
|
|
109
|
+
|
|
110
|
+
Defines the dropdown options for "Items per page".
|
|
111
|
+
Default: [10, 20, 30, 50, 100]
|
|
112
|
+
Example: [2,3,4,5] → lets user pick 2, 3, 4, or 5 rows per page.
|
|
113
|
+
|
|
114
|
+
5 - isLimit (boolean) – Optional
|
|
115
|
+
|
|
116
|
+
Default: true
|
|
117
|
+
Example:
|
|
118
|
+
true → Shows the page limit dropdown.
|
|
119
|
+
false → Hides the page limit dropdown.
|
|
120
|
+
|
|
121
|
+
6 - isSearch (boolean) – Optional
|
|
122
|
+
|
|
123
|
+
Default: true
|
|
124
|
+
Shows/hides the search bar above the table.
|
|
125
|
+
Example:
|
|
126
|
+
true → search enabled.
|
|
127
|
+
false → no search bar.
|
|
128
|
+
|
|
129
|
+
7 - isResult (boolean) – Optional
|
|
130
|
+
|
|
131
|
+
Default: true
|
|
132
|
+
Shows/hides the result count summary (e.g., Showing 1–10 of 50).
|
|
133
|
+
Example:
|
|
134
|
+
true → Shows the result count summary.
|
|
135
|
+
false → Hides the result count summary.
|
|
136
|
+
|
|
137
|
+
8 - isPagination (boolean) – Optional
|
|
138
|
+
|
|
139
|
+
Default: true
|
|
140
|
+
Shows/hides pagination controls (next/previous buttons, page numbers).
|
|
141
|
+
Example:
|
|
142
|
+
true → Shows the pagination controls.
|
|
143
|
+
false → Hides the pagination controls.
|
|
144
|
+
|
|
145
|
+
9 - isSorting (boolean) – Optional
|
|
146
|
+
|
|
147
|
+
Default: true
|
|
148
|
+
Enables column sorting (clicking on header sorts ASC/DESC).
|
|
149
|
+
Example:
|
|
150
|
+
true → Enables column sorting.
|
|
151
|
+
false → Disables column sorting.
|
|
152
|
+
|
|
153
|
+
10 - isSrno (boolean) – Optional
|
|
154
|
+
|
|
155
|
+
Default: false
|
|
156
|
+
Adds a Serial Number column at the start of the table.
|
|
157
|
+
Numbers auto-increment row by row.
|
|
158
|
+
|
|
159
|
+
11 - isSrnoText (string) – Optional
|
|
160
|
+
|
|
161
|
+
Default: "Sr.No"
|
|
162
|
+
Lets you rename the serial number column header.
|
|
163
|
+
Example:
|
|
164
|
+
isSrno: true,
|
|
165
|
+
isSrnoText: "User ID"
|
|
166
|
+
Column header will show User ID instead of Sr.No.
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
|
|
18
170
|
## 📄 Usage via CDN
|
|
19
171
|
|
|
20
172
|
```
|
|
@@ -22,25 +174,23 @@ A simple, lightweight JavaScript library to create tables with **pagination**, *
|
|
|
22
174
|
<html>
|
|
23
175
|
<head>
|
|
24
176
|
<title>mgsDataTable</title>
|
|
25
|
-
<script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.1.
|
|
177
|
+
<script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.1.3/dist/mgsdatatable.min.js"></script>
|
|
26
178
|
</head>
|
|
27
179
|
<body>
|
|
28
|
-
<
|
|
180
|
+
<div id="myTable"> </div>
|
|
29
181
|
<script>
|
|
30
182
|
mgsDataTable({
|
|
31
183
|
target: "#myTable", // Required
|
|
32
184
|
url: "http://localhost/mgs/users", // Required
|
|
33
|
-
data: {}, // Optional
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
isPagination: true, // Optional, default is true
|
|
43
|
-
isSorting: true // Optional, default is true
|
|
185
|
+
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
|
|
186
|
+
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
|
|
187
|
+
isLimit: true, // Optional, default: true
|
|
188
|
+
isSearch: true, // Optional, default: true
|
|
189
|
+
isResult: true, // Optional, default: true
|
|
190
|
+
isPagination: true, // Optional, default: true
|
|
191
|
+
isSorting: true, // Optional, default: true
|
|
192
|
+
isSrno: true, // Optional, default: false
|
|
193
|
+
isSrnoText: "ID" // Optional, default: "Sr.No"
|
|
44
194
|
});
|
|
45
195
|
</script>
|
|
46
196
|
</body>
|
|
@@ -63,9 +213,8 @@ npm install mgsdatatable
|
|
|
63
213
|
<title>mgsDataTable</title>
|
|
64
214
|
</head>
|
|
65
215
|
<body>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
</div>
|
|
216
|
+
|
|
217
|
+
<div id="myTable"> </div>
|
|
69
218
|
|
|
70
219
|
<script type="module">
|
|
71
220
|
import mgsDataTable from 'mgsdatatable';
|
|
@@ -73,17 +222,15 @@ npm install mgsdatatable
|
|
|
73
222
|
mgsDataTable({
|
|
74
223
|
target: "#myTable", // Required
|
|
75
224
|
url: "http://localhost/mgs/users", // Required
|
|
76
|
-
data: {}, // Optional
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
isPagination: true, // Optional, default is true
|
|
86
|
-
isSorting: true // Optional, default is true
|
|
225
|
+
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
|
|
226
|
+
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
|
|
227
|
+
isLimit: true, // Optional, default: true
|
|
228
|
+
isSearch: true, // Optional, default: true
|
|
229
|
+
isResult: true, // Optional, default: true
|
|
230
|
+
isPagination: true, // Optional, default: true
|
|
231
|
+
isSorting: true, // Optional, default: true
|
|
232
|
+
isSrno: true, // Optional, default: false
|
|
233
|
+
isSrnoText: "ID" // Optional, default: "Sr.No"
|
|
87
234
|
});
|
|
88
235
|
</script>
|
|
89
236
|
</body>
|
|
@@ -94,45 +241,55 @@ npm install mgsdatatable
|
|
|
94
241
|
|
|
95
242
|
## The API endpoint (http://localhost/mgs/users) should return a JSON response in the following format:
|
|
96
243
|
```
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
"
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
"data":
|
|
110
|
-
|
|
111
|
-
"
|
|
112
|
-
"
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
244
|
+
Payload -
|
|
245
|
+
{
|
|
246
|
+
"page": 1,
|
|
247
|
+
"limit": 10,
|
|
248
|
+
"column": "2", //Optional
|
|
249
|
+
"sort": "desc", //Optional
|
|
250
|
+
"search": "" //Optional
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
Response -
|
|
254
|
+
{
|
|
255
|
+
"status": true,
|
|
256
|
+
"data": {
|
|
257
|
+
"column": [
|
|
258
|
+
"name",
|
|
259
|
+
"role",
|
|
260
|
+
"email",
|
|
261
|
+
"mobile",
|
|
262
|
+
"image",
|
|
263
|
+
"status",
|
|
264
|
+
"action"
|
|
265
|
+
],
|
|
266
|
+
"data": [
|
|
267
|
+
{
|
|
268
|
+
"id": 1,
|
|
269
|
+
"name": "Mangesh",
|
|
270
|
+
"role": "superadmin",
|
|
271
|
+
"email": "mangesh@gmail.com",
|
|
272
|
+
"mobile": "1234567890",
|
|
273
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
274
|
+
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
275
|
+
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"id": 2,
|
|
279
|
+
"name": "Ashwani",
|
|
280
|
+
"role": "superadmin",
|
|
281
|
+
"email": "ashwani@gmail.com",
|
|
282
|
+
"mobile": "1234567891",
|
|
283
|
+
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
|
|
284
|
+
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
|
|
285
|
+
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
|
|
286
|
+
}
|
|
287
|
+
],
|
|
288
|
+
"from": 1,
|
|
289
|
+
"to": 10,
|
|
290
|
+
"total": 30
|
|
291
|
+
},
|
|
292
|
+
"message": "Data found"
|
|
293
|
+
}
|
|
137
294
|
|
|
138
295
|
```
|
package/dist/mgsdatatable.min.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).mgsDataTable={})}(this,function(e){"use strict";function n(e,n,t,o,r,a,i){try{var l=e[a](i),c=l.value}catch(e){return void t(e)}l.done?n(c):Promise.resolve(c).then(o,r)}function t(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,o)}return t}function r(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?o(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function a(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(-1!==n.indexOf(o))continue;t[o]=e[o]}return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],-1===n.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}function i(){
|
|
2
2
|
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
3
|
-
var e,n,t="function"==typeof Symbol?Symbol:{},o=t.iterator||"@@iterator",r=t.toStringTag||"@@toStringTag";function a(t,o,r,a){var i=o&&o.prototype instanceof s?o:s,d=Object.create(i.prototype);return l(d,"_invoke",function(t,o,r){var a,i,l,s=0,d=r||[],u=!1,p={p:0,n:0,v:e,a:g,f:g.bind(e,4),d:function(n,t){return a=n,i=0,l=e,p.n=t,c}};function g(t,o){for(i=t,l=o,n=0;!u&&s&&!r&&n<d.length;n++){var r,a=d[n],g=p.p,m=a[2];t>3?(r=m===o)&&(l=a[(i=a[4])?5:(i=3,3)],a[4]=a[5]=e):a[0]<=g&&((r=t<2&&g<a[1])?(i=0,p.v=o,p.n=a[1]):g<m&&(r=t<3||a[0]>o||o>m)&&(a[4]=t,a[5]=o,p.n=m,i=0))}if(r||t>1)return c;throw u=!0,o}return function(r,d,m){if(s>1)throw TypeError("Generator is already running");for(u&&1===d&&g(d,m),i=d,l=m;(n=i<2?e:l)||!u;){a||(i?i<3?(i>1&&(p.n=-1),g(i,l)):p.n=l:p.v=l);try{if(s=2,a){if(i||(r="next"),n=a[r]){if(!(n=n.call(a,l)))throw TypeError("iterator result is not an object");if(!n.done)return n;l=n.value,i<2&&(i=0)}else 1===i&&(n=a.return)&&n.call(a),i<2&&(l=TypeError("The iterator does not provide a '"+r+"' method"),i=1);a=e}else if((n=(u=p.n<0)?l:t.call(o,p))!==c)break}catch(n){a=e,i=1,l=n}finally{s=1}}return{value:n,done:u}}}(t,r,a),!0),d}var c={};function s(){}function d(){}function u(){}n=Object.getPrototypeOf;var p=[][o]?n(n([][o]())):(l(n={},o,function(){return this}),n),g=u.prototype=s.prototype=Object.create(p);function m(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,u):(e.__proto__=u,l(e,r,"GeneratorFunction")),e.prototype=Object.create(g),e}return d.prototype=u,l(g,"constructor",u),l(u,"constructor",d),d.displayName="GeneratorFunction",l(u,r,"GeneratorFunction"),l(g),l(g,r,"Generator"),l(g,o,function(){return this}),l(g,"toString",function(){return"[object Generator]"}),(i=function(){return{w:a,m:m}})()}function l(e,n,t,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}l=function(e,n,t,o){function a(n,t){l(e,n,function(e){return this._invoke(n,t,e)})}n?r?r(e,n,{value:t,enumerable:!o,configurable:!o,writable:!o}):e[n]=t:(a("next",0),a("throw",1),a("return",2))},l(e,n,t,o)}var c=["token","bearerToken"],s=0,d={target:"",url:"",methodType:"post",data:{},pageLimits:[10,20,30,50,100],page:1,limit:10,column:"",sort:"asc",search:"",prevPage:null,nextPage:null,isSearch:!0,isLimit:!0,isResult:!0,isPagination:!0,isSorting:!0},u=function(){var e,o=(e=i().m(function e(n){var o,l,u,g,m,v,f,y,h,b,x,P,w,_,S,L,T,j,O,k,E,A,C,M,I,q,H,D,N,F,z,R,G,B,U,X,J,W,K,Q,V,Y,Z,$,ee,ne,te,oe,re,ae,ie,le,ce,se,de,ue,pe,ge,me,ve,fe,ye,he,be,xe,Pe,we,_e,Se,Le,Te,je,Oe,ke,Ee,Ae,Ce,Me,Ie,qe,He,De,Ne,Fe,ze,Re,Ge,Be,Ue,Xe,Je,We,Ke,Qe,Ve,Ye,Ze,$e;return i().w(function(e){for(;;)switch(e.p=e.n){case 0:if(d=r(r({},d),n),null!==(o=d)&&void 0!==o&&o.target){e.n=1;break}return alert("Target is requied."),e.a(2);case 1:if(null!==(l=d)&&void 0!==l&&l.url){e.n=2;break}return alert("URL is requied."),e.a(2);case 2:return R=null===(u=d)||void 0===u?void 0:u.target,G=null!==(g=null===(m=d)||void 0===m?void 0:m.url)&&void 0!==g?g:"/",B=r({},null===(v=d)||void 0===v?void 0:v.data),U=B.token,X=B.bearerToken,J=a(B,c),W=null===(f=d)||void 0===f?void 0:f.methodType,K=null!==(y=null===(h=d)||void 0===h?void 0:h.page)&&void 0!==y?y:1,Q=null!==(b=null===(x=d)||void 0===x?void 0:x.limit)&&void 0!==b?b:10,V=null!==(P=null===(w=d)||void 0===w?void 0:w.pageLimits)&&void 0!==P?P:[10,20,30,50,100],Y=null===(_=d)||void 0===_?void 0:_.search,Z=null===(S=d)||void 0===S?void 0:S.column,$=null===(L=d)||void 0===L?void 0:L.sort,ee=null!==(T=null===(j=d)||void 0===j?void 0:j.nextPage)&&void 0!==T?T:null,ne=null!==(O=null===(k=d)||void 0===k?void 0:k.prevPage)&&void 0!==O?O:null,te=null===(E=null===(A=d)||void 0===A?void 0:A.isSearch)||void 0===E||E,oe=null===(C=null===(M=d)||void 0===M?void 0:M.isLimit)||void 0===C||C,re=null===(I=null===(q=d)||void 0===q?void 0:q.isResult)||void 0===I||I,ae=null===(H=null===(D=d)||void 0===D?void 0:D.isPagination)||void 0===H||H,ie=null===(N=null===(F=d)||void 0===F?void 0:F.isSorting)||void 0===N||N,J=r(r({},J),{},{page:K,limit:Q}),null!=Y&&null!=Y&&""!=Y.trim()&&(J=r(r({},J),{},{search:Y})),null!=Z&&null!=Z&&""!=Z.trim()&&(J=r(r({},J),{},{column:Z,sort:$})),le="post"===W.toLowerCase(),(ce=new Headers).append("Content-Type","application/json"),le&&U&&ce.append("X-CSRF-Token",U),X&&ce.append("Authorization","Bearer ".concat(X)),se={method:null===(z=d)||void 0===z?void 0:z.methodType,headers:ce,body:JSON.stringify(J)},de=document.querySelector(R),null==(ue=document.querySelector("._mgsErrorMessage"))||ue.remove(),(pe=document.createElement("div")).className="_mgsSpinner",pe.innerHTML='<i class="fa fa-spinner fa-spin"></i> Loading...',pe.style.cssText="\n position: fixed;\n z-index: 1031;\n width: 70%;\n height: 30%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n ",de.insertAdjacentElement("beforebegin",pe),e.p=3,e.n=4,fetch(G,se);case 4:return ye=e.v,e.n=5,ye.json();case 5:if(he=e.v,be=null!==(ge=null==he?void 0:he.data)&&void 0!==ge?ge:[],xe=null!==(me=null==he||null===(ve=he.data)||void 0===ve?void 0:ve.data)&&void 0!==me?me:[],Pe=null!==(fe=null==he?void 0:he.column)&&void 0!==fe?fe:[],we=null!=(null==be?void 0:be.from)&&null!=(null==be?void 0:be.from)&&""!=(null==be?void 0:be.from)?null==be?void 0:be.from:0,_e=null!=(null==be?void 0:be.to)&&null!=(null==be?void 0:be.to)&&""!=(null==be?void 0:be.to)?null==be?void 0:be.to:0,Se=null!=(null==be?void 0:be.total)&&null!=(null==be?void 0:be.total)&&""!=(null==be?void 0:be.total)?null==be?void 0:be.total:0,Le=Math.ceil(Se/Q),Te=Le+2,ee=Le>1&&null==ee&&null==ne?2:ee,(je=document.querySelector("._mgsPaginateResult"))&&je.remove(),(Oe=de.querySelector("tbody"))&&(null==xe?void 0:xe.length)>0&&Oe.remove(),0==s&&(te||oe)&&(ke="",oe&&V.forEach(function(e){ke+='<option value="'.concat(e,'">').concat(e,"</option>")}),Ee='\n <div class="_mgsPerPageSearch"> \n '.concat(oe?'<div class="_mgsPerPageStyle">\n <span>Show</span> \n <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;">'.concat(ke,"</select>\n </div>"):"","\n ").concat(te?'<div class="_mgsSearchStyle"> \n <span>Search</span> \n <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="'.concat(Y,'" placeholder="Search any field..." style="width:195px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;">\n </div> '):"","\n </div>\n "),de.insertAdjacentHTML("beforebegin",Ee),(Ae=document.querySelector("._mgsPerPageSearch"))&&(Ae.style.display="flex",Ae.style.justifyContent="space-between",Ae.style.alignItems="center",Ae.style.gap="10px",Ae.style.marginBottom="10px")),(Ce=document.createElement("table")).style.cssText="\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n padding: 10px 5px;\n vertical-align: top;\n border: 1px solid rgb(222, 226, 230);\n background-color: #fff;\n color: #212529;\n border-collapse: collapse;\n ",Me=document.createElement("thead"),Ie=document.createElement("tr"),Pe.forEach(function(e,n){e=p(e);var t=document.createElement("th");(null==xe?void 0:xe.length)>0&&ie&&"Action"!=e&&t.classList.add("_mgsSort"),ie&&"Action"!=e?(t.setAttribute("data-column",n),Z&&n==Z&&"desc"==$?(t.setAttribute("data-sort","desc"),t.innerHTML="".concat(e,' <span style="font-size:14px !important">▼</span>')):(t.setAttribute("data-sort","asc"),t.innerHTML="".concat(e,' <span style="font-size:14px !important">▲</span>'))):t.innerHTML=e,t.style.cssText="\n background-color: #f8f9fa;\n font-weight: bold;\n cursor: ".concat((null==xe?void 0:xe.length)>0?"pointer":"not-allowed",";\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align:left;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n "),Ie.appendChild(t)}),Me.appendChild(Ie),Ce.appendChild(Me),qe=document.createElement("tbody"),(null==xe?void 0:xe.length)>0?xe.forEach(function(e,n){var t=document.createElement("tr");Pe.forEach(function(n){var o=document.createElement("td");o.style.cssText="\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n ",o.innerHTML=e[n],o.title=e[n],t.appendChild(o)}),qe.appendChild(t)}):(He=document.createElement("tr"),(De=document.createElement("td")).innerHTML="Data not Found",De.setAttribute("colspan",null==Pe?void 0:Pe.length),De.style.cssText="\n width: 100%;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n text-align: center;\n color:red;\n ",He.appendChild(De),qe.appendChild(He)),Ce.appendChild(qe),de.innerHTML="",de.appendChild(Ce),de&&(de.style.width="100%",de.style.overflowX="auto"),(Ne=document.querySelector(R+" table"))&&(Ne.style.borderCollapse="collapse",Ne.style.minWidth="100%"),document.querySelectorAll(R+" th, "+R+" td").forEach(function(e){e.style.padding="16px 8px",e.style.borderTop="1px solid #ddd",e.style.whiteSpace="nowrap"}),Fe="",Te>0)for((ze=document.createElement("style")).textContent="\n ._mgsPagination {\n display: flex;\n list-style: none;\n padding: 0;\n gap: 6px;\n }\n ._mgsPageItem {\n display: inline-block;\n }\n ._mgsPageLink {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n padding: 0 10px;\n border: 1px solid #0ec6d5;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #0ec6d5;\n text-decoration: none;\n transition: all 0.2s ease-in-out;\n }\n ._mgsPageLink:hover {\n background-color: #0ec6d5;\n color: #fff;\n }\n ._mgsPageItem.active ._mgsPageLink {\n background-color: #0ec6d5;\n color: #fff;\n border-color: #0ec6d5;\n }\n ._mgsPageItem.disabled ._mgsPageLink {\n border-color: #ccc;\n color: #ccc;\n pointer-events: none;\n cursor: not-allowed;\n }\n ",document.head.appendChild(ze),Re=!0,Ge=0;Ge<Te;Ge++)Be=t({0:"« Previous"},Te-1,"Next »"),Ue=Be[Ge]?Be[Ge]:Ge,Xe="« Previous"==Be[Ge]?ne:"Next »"==Be[Ge]?ee:Ge,Je=null==Xe?"cursor: not-allowed !important;":"cursor: pointer !important;",We=null==Xe?"disabled":Xe==K?"active":"",Ke=Ue,2==Te&&(Xe=null,We="disabled"),Le>5&&["« Previous",1,2,3,"Next »"].includes(Ue)&&K<3?(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>")):Le>5&&K>2?(We=null==Xe?"disabled":Xe+1==K?"active":"",Ke=K>=3&&!["« Previous","Next »"].includes(Ue)?Ue+1:Ue,1==Ge?Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="1">1</a>\n </li>'):K-1<=Ge&&K>=Ge&&Ge<=K+1&&Ge<Le-2&&!["« Previous","Next »"].includes(Ue)?Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe+1,'">').concat(Ke,"</a>\n </li>"):Le>5&&Ge>3&&Ge<Le-1&&!["« Previous","Next »"].includes(Ue)?Re&&(Re=!1,Ke="...",Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe+1,'">').concat(Ke,"</a>\n </li>")):(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We=null==Xe?"disabled":Xe==K?"active":"",'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>"))):Le>5&&Ge>3&&Ge<Le-1&&!["« Previous","Next »"].includes(Ue)?Re&&(Re=!1,Ke="...",Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>")):(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>"));Qe='\n <div class="_mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(we," to ").concat(_e," of ").concat(Se," results</div>"):"","\n ").concat(ae?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(Fe,"\n </ul> \n </div> "):"","\n </div>"),de.insertAdjacentHTML("afterend",Qe),(Ve=document.querySelector("._mgsPaginateResult"))&&(Ve.style.display="flex",Ve.style.justifyContent="space-between",Ve.style.alignItems="center",Ve.style.gap="10px"),(null==xe?void 0:xe.length)>0&&s++,setTimeout(function(){pe.remove()},500),e.n=7;break;case 6:e.p=6,$e=e.v,Ye='\n <div class="_mgsErrorMessage" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> \n <p>Error Message : <span style=\'color: red; margin-left:10px;\'>'.concat($e.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",Ye),null==(Ze=document.querySelector("._mgsSpinner"))||Ze.remove();case 7:return e.a(2)}},e,null,[[3,6]])}),function(){var t=this,o=arguments;return new Promise(function(r,a){var i=e.apply(t,o);function l(e){n(i,r,a,l,c,"next",e)}function c(e){n(i,r,a,l,c,"throw",e)}l(void 0)})});return function(e){return o.apply(this,arguments)}}();function p(e){return e.replace(/_/g," ").replace(/\b\w/g,function(e){return e.toUpperCase()})}document.addEventListener("click",function(e){var n=e.target.closest("._mgsPageItem");if(n){e.preventDefault(),n.textContent.trim();var t=n.querySelector("._mgsPageLink"),o=null==t?void 0:t.getAttribute("href"),r=null==t?void 0:t.getAttribute("data-mxpage");if(!o||"null"===o)return t.setAttribute("disabled",!0),void(t.style.cssText="cursor: not-allowed !important;");var a=parseInt(o),i=a>=r?null:a+1,l=a<=1?null:a-1;null==t||t.setAttribute("href",i),t.style.cssText=null==i||null==l?"cursor: not-allowed !important;":"cursor: pointer !important;",u({page:a,prevPage:l,nextPage:i})}}),document.addEventListener("change",function(e){var n=e.target;if(n.classList.contains("_mgsPerPageLimit")){e.preventDefault();var t=parseInt(n.value,10);u({page:1,limit:t,prevPage:null,nextPage:null})}}),document.addEventListener("keyup",function(e){var n=e.target;if(n.classList.contains("_mgsSearchAnyField")&&(e.preventDefault(),"Enter"===e.key)){var t=n.value;document.querySelectorAll("._mgsSort").forEach(function(e){var n=p(e.textContent.trim());e.innerHTML="".concat(n,' <span style="font-size:14px !important">▲</span>'),e.setAttribute("data-sort","asc")});u({page:1,column:"",sort:"",search:t,prevPage:null,nextPage:null})}}),document.addEventListener("click",function(e){var n=e.target.closest("._mgsSort");if(n){e.preventDefault();var t=n.getAttribute("data-column"),o=n.getAttribute("data-sort");u({page:1,column:t,sort:"asc"===o?"desc":"asc"})}}),window.mgsDataTable=u,window._mgsCapitalizeFirstLetter=p,e._mgsCapitalizeFirstLetter=p,e.mgsDataTable=u,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
3
|
+
var e,n,t="function"==typeof Symbol?Symbol:{},o=t.iterator||"@@iterator",r=t.toStringTag||"@@toStringTag";function a(t,o,r,a){var i=o&&o.prototype instanceof s?o:s,d=Object.create(i.prototype);return l(d,"_invoke",function(t,o,r){var a,i,l,s=0,d=r||[],u=!1,p={p:0,n:0,v:e,a:g,f:g.bind(e,4),d:function(n,t){return a=n,i=0,l=e,p.n=t,c}};function g(t,o){for(i=t,l=o,n=0;!u&&s&&!r&&n<d.length;n++){var r,a=d[n],g=p.p,m=a[2];t>3?(r=m===o)&&(l=a[(i=a[4])?5:(i=3,3)],a[4]=a[5]=e):a[0]<=g&&((r=t<2&&g<a[1])?(i=0,p.v=o,p.n=a[1]):g<m&&(r=t<3||a[0]>o||o>m)&&(a[4]=t,a[5]=o,p.n=m,i=0))}if(r||t>1)return c;throw u=!0,o}return function(r,d,m){if(s>1)throw TypeError("Generator is already running");for(u&&1===d&&g(d,m),i=d,l=m;(n=i<2?e:l)||!u;){a||(i?i<3?(i>1&&(p.n=-1),g(i,l)):p.n=l:p.v=l);try{if(s=2,a){if(i||(r="next"),n=a[r]){if(!(n=n.call(a,l)))throw TypeError("iterator result is not an object");if(!n.done)return n;l=n.value,i<2&&(i=0)}else 1===i&&(n=a.return)&&n.call(a),i<2&&(l=TypeError("The iterator does not provide a '"+r+"' method"),i=1);a=e}else if((n=(u=p.n<0)?l:t.call(o,p))!==c)break}catch(n){a=e,i=1,l=n}finally{s=1}}return{value:n,done:u}}}(t,r,a),!0),d}var c={};function s(){}function d(){}function u(){}n=Object.getPrototypeOf;var p=[][o]?n(n([][o]())):(l(n={},o,function(){return this}),n),g=u.prototype=s.prototype=Object.create(p);function m(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,u):(e.__proto__=u,l(e,r,"GeneratorFunction")),e.prototype=Object.create(g),e}return d.prototype=u,l(g,"constructor",u),l(u,"constructor",d),d.displayName="GeneratorFunction",l(u,r,"GeneratorFunction"),l(g),l(g,r,"Generator"),l(g,o,function(){return this}),l(g,"toString",function(){return"[object Generator]"}),(i=function(){return{w:a,m:m}})()}function l(e,n,t,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}l=function(e,n,t,o){function a(n,t){l(e,n,function(e){return this._invoke(n,t,e)})}n?r?r(e,n,{value:t,enumerable:!o,configurable:!o,writable:!o}):e[n]=t:(a("next",0),a("throw",1),a("return",2))},l(e,n,t,o)}var c=["token","bearerToken"],s=0,d={target:"",url:"",methodType:"post",data:{},pageLimits:[10,20,30,50,100],page:1,limit:10,column:"",sort:"asc",search:"",prevPage:null,nextPage:null,isSearch:!0,isLimit:!0,isResult:!0,isPagination:!0,isSorting:!0},u=function(){var e,o=(e=i().m(function e(n){var o,l,u,g,m,v,f,y,h,b,x,P,w,_,S,L,T,j,O,k,E,A,C,M,I,q,H,D,N,F,z,R,G,B,U,X,J,W,K,Q,V,Y,Z,$,ee,ne,te,oe,re,ae,ie,le,ce,se,de,ue,pe,ge,me,ve,fe,ye,he,be,xe,Pe,we,_e,Se,Le,Te,je,Oe,ke,Ee,Ae,Ce,Me,Ie,qe,He,De,Ne,Fe,ze,Re,Ge,Be,Ue,Xe,Je,We,Ke,Qe,Ve,Ye,Ze,$e;return i().w(function(e){for(;;)switch(e.p=e.n){case 0:if(d=r(r({},d),n),null!==(o=d)&&void 0!==o&&o.target){e.n=1;break}return alert("Target is requied."),e.a(2);case 1:if(null!==(l=d)&&void 0!==l&&l.url){e.n=2;break}return alert("URL is requied."),e.a(2);case 2:return R=null===(u=d)||void 0===u?void 0:u.target,G=null!==(g=null===(m=d)||void 0===m?void 0:m.url)&&void 0!==g?g:"/",B=r({},null===(v=d)||void 0===v?void 0:v.data),U=B.token,X=B.bearerToken,J=a(B,c),W=null===(f=d)||void 0===f?void 0:f.methodType,K=null!==(y=null===(h=d)||void 0===h?void 0:h.page)&&void 0!==y?y:1,Q=null!==(b=null===(x=d)||void 0===x?void 0:x.limit)&&void 0!==b?b:10,V=null!==(P=null===(w=d)||void 0===w?void 0:w.pageLimits)&&void 0!==P?P:[10,20,30,50,100],Y=null===(_=d)||void 0===_?void 0:_.search,Z=null===(S=d)||void 0===S?void 0:S.column,$=null===(L=d)||void 0===L?void 0:L.sort,ee=null!==(T=null===(j=d)||void 0===j?void 0:j.nextPage)&&void 0!==T?T:null,ne=null!==(O=null===(k=d)||void 0===k?void 0:k.prevPage)&&void 0!==O?O:null,te=null===(E=null===(A=d)||void 0===A?void 0:A.isSearch)||void 0===E||E,oe=null===(C=null===(M=d)||void 0===M?void 0:M.isLimit)||void 0===C||C,re=null===(I=null===(q=d)||void 0===q?void 0:q.isResult)||void 0===I||I,ae=null===(H=null===(D=d)||void 0===D?void 0:D.isPagination)||void 0===H||H,ie=null===(N=null===(F=d)||void 0===F?void 0:F.isSorting)||void 0===N||N,J=r(r({},J),{},{page:K,limit:Q}),null!=Y&&null!=Y&&""!=Y.trim()&&(J=r(r({},J),{},{search:Y})),null!=Z&&null!=Z&&""!=Z.trim()&&(J=r(r({},J),{},{column:Z,sort:$})),le="post"===W.toLowerCase(),(ce=new Headers).append("Content-Type","application/json"),le&&U&&ce.append("X-CSRF-Token",U),X&&ce.append("Authorization","Bearer ".concat(X)),se={method:null===(z=d)||void 0===z?void 0:z.methodType,headers:ce,body:JSON.stringify(J)},de=document.querySelector(R),null==(ue=document.querySelector("._mgsErrorMessage"))||ue.remove(),(pe=document.createElement("div")).className="_mgsSpinner",pe.innerHTML='<i class="fa fa-spinner fa-spin"></i> Loading...',pe.style.cssText="\n position: fixed;\n z-index: 1031;\n width: 70%;\n height: 30%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n ",de.insertAdjacentElement("beforebegin",pe),e.p=3,e.n=4,fetch(G,se);case 4:return ye=e.v,e.n=5,ye.json();case 5:if(he=e.v,be=null!==(ge=null==he?void 0:he.data)&&void 0!==ge?ge:[],xe=null!==(me=null==he||null===(ve=he.data)||void 0===ve?void 0:ve.data)&&void 0!==me?me:[],Pe=null!==(fe=null==he?void 0:he.column)&&void 0!==fe?fe:[],we=null!=(null==be?void 0:be.from)&&null!=(null==be?void 0:be.from)&&""!=(null==be?void 0:be.from)?null==be?void 0:be.from:0,_e=null!=(null==be?void 0:be.to)&&null!=(null==be?void 0:be.to)&&""!=(null==be?void 0:be.to)?null==be?void 0:be.to:0,Se=null!=(null==be?void 0:be.total)&&null!=(null==be?void 0:be.total)&&""!=(null==be?void 0:be.total)?null==be?void 0:be.total:0,Le=Math.ceil(Se/Q),Te=Le+2,ee=Le>1&&null==ee&&null==ne?2:ee,(je=document.querySelector("._mgsPaginateResult"))&&je.remove(),(Oe=de.querySelector("tbody"))&&(null==xe?void 0:xe.length)>0&&Oe.remove(),0==s&&(te||oe)&&(ke="",oe&&V.forEach(function(e){ke+='<option value="'.concat(e,'">').concat(e,"</option>")}),Ee='\n <div class="_mgsPerPageSearch"> \n '.concat(oe?'<div class="_mgsPerPageStyle">\n <span>Show</span> \n <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;">'.concat(ke,"</select>\n </div>"):"","\n ").concat(te?'<div class="_mgsSearchStyle"> \n <span>Search</span> \n <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="'.concat(Y,'" placeholder="Search any field..." style="width:195px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;">\n </div> '):"","\n </div>\n "),de.insertAdjacentHTML("beforebegin",Ee),(Ae=document.querySelector("._mgsPerPageSearch"))&&(Ae.style.display="flex",Ae.style.justifyContent="space-between",Ae.style.alignItems="center",Ae.style.gap="10px",Ae.style.marginBottom="10px")),(Ce=document.createElement("table")).style.cssText="\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n padding: 10px 5px;\n vertical-align: top;\n border: 1px solid rgb(222, 226, 230);\n background-color: #fff;\n color: #212529;\n border-collapse: collapse;\n ",Me=document.createElement("thead"),Ie=document.createElement("tr"),Pe.forEach(function(e,n){e=p(e);var t=document.createElement("th");(null==xe?void 0:xe.length)>0&&ie&&"Action"!=e&&t.classList.add("_mgsSort"),ie&&"Action"!=e?(t.setAttribute("data-column",n),Z&&n==Z&&"desc"==$?(t.setAttribute("data-sort","desc"),t.innerHTML="".concat(e,' <span style="font-size:14px !important">▼</span>')):(t.setAttribute("data-sort","asc"),t.innerHTML="".concat(e,' <span style="font-size:14px !important">▲</span>'))):t.innerHTML=e,t.style.cssText="\n background-color: #f8f9fa;\n font-weight: bold;\n cursor: ".concat((null==xe?void 0:xe.length)>0?"pointer":"not-allowed",";\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align:left;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n "),Ie.appendChild(t)}),Me.appendChild(Ie),Ce.appendChild(Me),qe=document.createElement("tbody"),(null==xe?void 0:xe.length)>0?xe.forEach(function(e,n){var t=document.createElement("tr");Pe.forEach(function(n){var o=document.createElement("td");o.style.cssText="\n width: 150px;\n min-width: 150px;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n ",o.innerHTML=e[n],o.title=e[n],t.appendChild(o)}),qe.appendChild(t)}):(He=document.createElement("tr"),(De=document.createElement("td")).innerHTML="Data not Found",De.setAttribute("colspan",null==Pe?void 0:Pe.length),De.style.cssText="\n width: 100%;\n padding: 2px;\n border-top: 1px solid rgb(222, 226, 230);\n text-align: center;\n color:red;\n ",He.appendChild(De),qe.appendChild(He)),Ce.appendChild(qe),de.innerHTML="",de.appendChild(Ce),de&&(de.style.width="100%",de.style.overflowX="auto"),(Ne=document.querySelector(R+" table"))&&(Ne.style.borderCollapse="collapse",Ne.style.minWidth="100%"),document.querySelectorAll(R+" th, "+R+" td").forEach(function(e){e.style.padding="16px 8px",e.style.borderTop="1px solid #ddd",e.style.whiteSpace="nowrap"}),Fe="",Te>0)for((ze=document.createElement("style")).textContent="\n ._mgsPagination {\n display: flex;\n list-style: none;\n padding: 0;\n gap: 6px;\n }\n ._mgsPageItem {\n display: inline-block;\n }\n ._mgsPageLink {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n padding: 0 10px;\n border: 1px solid #0ec6d5;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #0ec6d5;\n text-decoration: none;\n transition: all 0.2s ease-in-out;\n }\n ._mgsPageLink:hover {\n background-color: #0ec6d5;\n color: #fff;\n }\n ._mgsPageItem.active ._mgsPageLink {\n background-color: #0ec6d5;\n color: #fff;\n border-color: #0ec6d5;\n }\n ._mgsPageItem.disabled ._mgsPageLink {\n border-color: #ccc;\n color: #ccc;\n pointer-events: none;\n cursor: not-allowed;\n }\n ",document.head.appendChild(ze),Re=!0,Ge=0;Ge<Te;Ge++)Be=t({0:"« Previous"},Te-1,"Next »"),Ue=Be[Ge]?Be[Ge]:Ge,Xe="« Previous"==Be[Ge]?ne:"Next »"==Be[Ge]?ee:Ge,Je=null==Xe?"cursor: not-allowed !important;":"cursor: pointer !important;",We=null==Xe?"disabled":Xe==K?"active":"",Ke=Ue,2==Te&&(Xe=null,We="disabled"),Le>5&&["« Previous",1,2,3,"Next »"].includes(Ue)&&K<3?(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>")):Le>5&&K>2?(We=null==Xe?"disabled":Xe+1==K?"active":"",Ke=K>=3&&!["« Previous","Next »"].includes(Ue)?Ue+1:Ue,1==Ge?Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="1">1</a>\n </li>'):K-1<=Ge&&K>=Ge&&Ge<=K+1&&Ge<Le-2&&!["« Previous","Next »"].includes(Ue)?Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe+1,'">').concat(Ke,"</a>\n </li>"):Le>5&&Ge>3&&Ge<Le-1&&!["« Previous","Next »"].includes(Ue)?Re&&(Re=!1,Ke="...",Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe+1,'">').concat(Ke,"</a>\n </li>")):(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We=null==Xe?"disabled":Xe==K?"active":"",'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>"))):Le>5&&Ge>3&&Ge<Le-1&&!["« Previous","Next »"].includes(Ue)?Re&&(Re=!1,Ke="...",Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>")):(Ke=Ue,Fe+='<li class="_mgsPageItem '.concat(We,'" style="').concat(Je,'">\n <a class="_mgsPageLink" data-mxpage="').concat(Le,'" href="').concat(Xe,'">').concat(Ke,"</a>\n </li>"));Qe='\n <div class="_mgsPaginateResult">\n '.concat(re?"<div>Showing ".concat(we," to ").concat(_e," of ").concat(Se," results</div>"):"","\n ").concat(ae?'<div style="margin-top:10px;"> \n <ul class="mgsPagination" style="margin-left: auto !important"> \n '.concat(Fe,"\n </ul> \n </div> "):"","\n </div>"),de.insertAdjacentHTML("afterend",Qe),(Ve=document.querySelector("._mgsPaginateResult"))&&(Ve.style.display="flex",Ve.style.justifyContent="space-between",Ve.style.alignItems="center",Ve.style.gap="10px"),(null==xe?void 0:xe.length)>0&&s++,setTimeout(function(){pe.remove()},500),e.n=7;break;case 6:e.p=6,$e=e.v,Ye='\n <div class="_mgsErrorMessage" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> \n <p>Error Message : <span style=\'color: red; margin-left:10px;\'>'.concat($e.message,"</span></p>\n </div>\n "),de.innerHTML="",de.insertAdjacentHTML("beforebegin",Ye),null==(Ze=document.querySelector("._mgsSpinner"))||Ze.remove();case 7:return e.a(2)}},e,null,[[3,6]])}),function(){var t=this,o=arguments;return new Promise(function(r,a){var i=e.apply(t,o);function l(e){n(i,r,a,l,c,"next",e)}function c(e){n(i,r,a,l,c,"throw",e)}l(void 0)})});return function(e){return o.apply(this,arguments)}}();function p(e){return e.replace(/_/g," ").replace(/\b\w/g,function(e){return e.toUpperCase()})}document.addEventListener("click",function(e){var n=e.target.closest("._mgsPageItem");if(n){e.preventDefault(),n.textContent.trim();var t=n.querySelector("._mgsPageLink"),o=null==t?void 0:t.getAttribute("href"),r=null==t?void 0:t.getAttribute("data-mxpage");if(!o||"null"===o)return t.setAttribute("disabled",!0),void(t.style.cssText="cursor: not-allowed !important;");var a=parseInt(o),i=a>=r?null:a+1,l=a<=1?null:a-1;null==t||t.setAttribute("href",i),t.style.cssText=null==i||null==l?"cursor: not-allowed !important;":"cursor: pointer !important;",u({page:a,prevPage:l,nextPage:i})}}),document.addEventListener("change",function(e){var n=e.target;if(n.classList.contains("_mgsPerPageLimit")){e.preventDefault();var t=parseInt(n.value,10);u({page:1,limit:t,prevPage:null,nextPage:null})}}),document.addEventListener("keyup",function(e){var n=e.target;if(n.classList.contains("_mgsSearchAnyField")&&(e.preventDefault(),"Enter"===e.key)){var t=n.value;document.querySelectorAll("._mgsSort").forEach(function(e){var n=p(e.textContent.trim());e.innerHTML="".concat(n,' <span style="font-size:14px !important">▲</span>'),e.setAttribute("data-sort","asc")});u({page:1,column:"",sort:"",search:t,prevPage:null,nextPage:null})}}),document.addEventListener("click",function(e){var n=e.target.closest("._mgsSort");if(n){e.preventDefault();var t=n.getAttribute("data-column"),o=n.getAttribute("data-sort");u({page:1,column:t,sort:"asc"===o?"desc":"asc"})}}),window.mgsDataTable=u,window.mgsCapitalizeFirstLetter=p,e.mgsCapitalizeFirstLetter=p,e.mgsDataTable=u,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -7,7 +7,7 @@ let _mgsCommonData = {
|
|
|
7
7
|
data : {},
|
|
8
8
|
pageLimits : [10,20,30,50,100],
|
|
9
9
|
page : 1,
|
|
10
|
-
limit :
|
|
10
|
+
limit : null,
|
|
11
11
|
column : '',
|
|
12
12
|
sort : 'asc',
|
|
13
13
|
search: '',
|
|
@@ -18,15 +18,17 @@ let _mgsCommonData = {
|
|
|
18
18
|
isResult: true,
|
|
19
19
|
isPagination: true,
|
|
20
20
|
isSorting: true,
|
|
21
|
+
isSrno: false,
|
|
22
|
+
isSrnoText:'Sr.No.'
|
|
21
23
|
}
|
|
22
24
|
const mgsDataTable = async (_mgsData) => {
|
|
23
25
|
_mgsCommonData = {..._mgsCommonData, ..._mgsData};
|
|
24
26
|
if(!_mgsCommonData?.target){
|
|
25
|
-
|
|
27
|
+
mgsNotifyMessage('Target is requied in function mgsDataTable', 'error');
|
|
26
28
|
return;
|
|
27
29
|
}
|
|
28
30
|
if(!_mgsCommonData?.url){
|
|
29
|
-
|
|
31
|
+
mgsNotifyMessage('URL is required in function mgsDataTable', 'error')
|
|
30
32
|
return;
|
|
31
33
|
}
|
|
32
34
|
let _mgsTarget = _mgsCommonData?.target;
|
|
@@ -34,8 +36,8 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
34
36
|
let { token, bearerToken, ...allData} = {..._mgsCommonData?.data};
|
|
35
37
|
let methodType = _mgsCommonData?.methodType;
|
|
36
38
|
let page = _mgsCommonData?.page ?? 1;
|
|
37
|
-
let limit = _mgsCommonData?.limit ?? 10;
|
|
38
39
|
let pageLimits = _mgsCommonData?.pageLimits ?? [10,20,30,50,100];
|
|
40
|
+
let limit = (_mgsCommonData?.limit) ? _mgsCommonData?.limit : pageLimits[0] ?? 10;
|
|
39
41
|
let search = _mgsCommonData?.search;
|
|
40
42
|
let column = _mgsCommonData?.column;
|
|
41
43
|
let sort = _mgsCommonData?.sort;
|
|
@@ -46,13 +48,15 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
46
48
|
let isResult = _mgsCommonData?.isResult ?? true;
|
|
47
49
|
let isPagination = _mgsCommonData?.isPagination ?? true;
|
|
48
50
|
let isSorting = _mgsCommonData?.isSorting ?? true;
|
|
51
|
+
let isSrno = _mgsCommonData?.isSrno ?? false;
|
|
52
|
+
let isSrnoText = _mgsCommonData?.isSrnoText ?? 'Sr.No.';
|
|
49
53
|
|
|
50
54
|
allData = { ...allData, page, limit }
|
|
51
55
|
if (search != null && search != undefined && search.trim() != '') {
|
|
52
56
|
allData = { ...allData, search }
|
|
53
57
|
}
|
|
54
58
|
if (column != null && column != undefined && column.trim() != '') {
|
|
55
|
-
allData = { ...allData, column, sort }
|
|
59
|
+
allData = { ...allData, column : (isSrno)?column-1:column, sort }
|
|
56
60
|
}
|
|
57
61
|
|
|
58
62
|
const _mgsIsPost = methodType.toLowerCase() === 'post';
|
|
@@ -79,12 +83,13 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
79
83
|
_mgsSpinner.style.cssText = `
|
|
80
84
|
position: fixed;
|
|
81
85
|
z-index: 1031;
|
|
82
|
-
width:
|
|
86
|
+
width: 80%;
|
|
83
87
|
height: 30%;
|
|
84
88
|
display: flex;
|
|
85
89
|
justify-content: center;
|
|
86
90
|
align-items: center;
|
|
87
|
-
font-size:
|
|
91
|
+
font-size: 25px;
|
|
92
|
+
color: #0ec6d5;
|
|
88
93
|
`;
|
|
89
94
|
_mgsContainer.insertAdjacentElement('beforebegin', _mgsSpinner);
|
|
90
95
|
try {
|
|
@@ -92,7 +97,7 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
92
97
|
const _mgsResp = await _mgsResponse.json();
|
|
93
98
|
const _mgsResult = _mgsResp?.data ?? [];
|
|
94
99
|
const _mgsOutput = _mgsResp?.data?.data ?? [];
|
|
95
|
-
|
|
100
|
+
let _mgsColumn = _mgsResp?.column ?? [];
|
|
96
101
|
const _from = (_mgsResult?.from != undefined && _mgsResult?.from != null && _mgsResult?.from != '')?_mgsResult?.from :0;
|
|
97
102
|
const _to = (_mgsResult?.to != undefined && _mgsResult?.to != null && _mgsResult?.to != '')?_mgsResult?.to :0;
|
|
98
103
|
const _total = (_mgsResult?.total != undefined && _mgsResult?.total != null && _mgsResult?.total != '')?_mgsResult?.total :0;
|
|
@@ -136,8 +141,6 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
136
141
|
target.style.justifyContent = 'space-between';
|
|
137
142
|
target.style.alignItems = 'center';
|
|
138
143
|
target.style.gap = '10px';
|
|
139
|
-
// target.style.paddingLeft = '14px';
|
|
140
|
-
// target.style.paddingRight = '14px';
|
|
141
144
|
target.style.marginBottom = '10px';
|
|
142
145
|
}
|
|
143
146
|
}
|
|
@@ -159,24 +162,16 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
159
162
|
// Create thead
|
|
160
163
|
const _mgsThead = document.createElement('thead');
|
|
161
164
|
const _mgsHeadRow = document.createElement('tr');
|
|
165
|
+
if(isSrno){
|
|
166
|
+
_mgsColumn.unshift(isSrnoText);
|
|
167
|
+
}
|
|
162
168
|
_mgsColumn.forEach((text, key) => {
|
|
163
|
-
text =
|
|
169
|
+
text = mgsCapitalizeFirstLetter (text);
|
|
164
170
|
const th = document.createElement('th');
|
|
165
|
-
if(_mgsOutput?.length > 0 && isSorting &&
|
|
171
|
+
if(_mgsOutput?.length > 0 && isSorting && !['Action',isSrnoText].includes(text)){
|
|
166
172
|
th.classList.add('_mgsSort');
|
|
167
173
|
}
|
|
168
|
-
|
|
169
|
-
th.setAttribute('data-column', key); // or actual key if mapping to backend
|
|
170
|
-
if (column && key == column && sort == 'desc') {
|
|
171
|
-
th.setAttribute('data-sort', 'desc');
|
|
172
|
-
th.innerHTML = `${text} <span style="font-size:14px !important">▼</span>`;
|
|
173
|
-
}else{
|
|
174
|
-
th.setAttribute('data-sort', 'asc');
|
|
175
|
-
th.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
176
|
-
}
|
|
177
|
-
}else{
|
|
178
|
-
th.innerHTML = text;
|
|
179
|
-
}
|
|
174
|
+
th.title = text;
|
|
180
175
|
th.style.cssText = `
|
|
181
176
|
background-color: #f8f9fa;
|
|
182
177
|
font-weight: bold;
|
|
@@ -190,7 +185,44 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
190
185
|
text-align:left;
|
|
191
186
|
padding: 2px;
|
|
192
187
|
border-top: 1px solid rgb(222, 226, 230);
|
|
188
|
+
position:relative;
|
|
193
189
|
`;
|
|
190
|
+
if(isSorting && !['Action',isSrnoText].includes(text)){
|
|
191
|
+
th.setAttribute('data-column', key); // or actual key if mapping to backend
|
|
192
|
+
th.innerHTML = `${text} `;
|
|
193
|
+
// Add sort icon
|
|
194
|
+
const _mgsSortIcon = document.createElement("span");
|
|
195
|
+
_mgsSortIcon.style.position = "absolute";
|
|
196
|
+
_mgsSortIcon.style.display = "none";
|
|
197
|
+
_mgsSortIcon.style.fontSize = "12px";
|
|
198
|
+
if (column && key == column && sort == 'desc') {
|
|
199
|
+
th.setAttribute('data-sort', 'desc');
|
|
200
|
+
_mgsSortIcon.innerHTML = "▼";
|
|
201
|
+
}else{
|
|
202
|
+
th.setAttribute('data-sort', 'asc');
|
|
203
|
+
_mgsSortIcon.innerHTML = "▲";
|
|
204
|
+
}
|
|
205
|
+
th.addEventListener("mouseenter", () => {
|
|
206
|
+
_mgsSortIcon.style.display = "inline";
|
|
207
|
+
});
|
|
208
|
+
th.addEventListener("mouseleave", () => {
|
|
209
|
+
if(column && key == column){
|
|
210
|
+
_mgsSortIcon.style.display = "inline";
|
|
211
|
+
}else{
|
|
212
|
+
_mgsSortIcon.style.display = "none";
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
if(column && key == column ){
|
|
216
|
+
th.style.color = "#0ec6d5";
|
|
217
|
+
_mgsSortIcon.style.display = "inline";
|
|
218
|
+
}else{
|
|
219
|
+
th.style.color = "default";
|
|
220
|
+
}
|
|
221
|
+
th.appendChild(_mgsSortIcon);
|
|
222
|
+
}else{
|
|
223
|
+
th.innerHTML = text;
|
|
224
|
+
th.style.cursor = 'default'
|
|
225
|
+
}
|
|
194
226
|
_mgsHeadRow.appendChild(th);
|
|
195
227
|
});
|
|
196
228
|
_mgsThead.appendChild(_mgsHeadRow);
|
|
@@ -201,7 +233,7 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
201
233
|
if(_mgsOutput?.length > 0){
|
|
202
234
|
_mgsOutput.forEach((text, key) => {
|
|
203
235
|
let _createRow = document.createElement('tr');
|
|
204
|
-
_mgsColumn.forEach(col => {
|
|
236
|
+
_mgsColumn.forEach((col, ky) => {
|
|
205
237
|
let td = document.createElement('td');
|
|
206
238
|
td.style.cssText = `
|
|
207
239
|
width: 150px;
|
|
@@ -213,7 +245,7 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
213
245
|
padding: 2px;
|
|
214
246
|
border-top: 1px solid rgb(222, 226, 230);
|
|
215
247
|
`;
|
|
216
|
-
td.innerHTML = text[col];
|
|
248
|
+
td.innerHTML = (isSrno && ky == 0)?(_from+key):text[col];
|
|
217
249
|
td.title = text[col];
|
|
218
250
|
_createRow.appendChild(td);
|
|
219
251
|
});
|
|
@@ -383,8 +415,6 @@ const mgsDataTable = async (_mgsData) => {
|
|
|
383
415
|
target.style.justifyContent = 'space-between';
|
|
384
416
|
target.style.alignItems = 'center';
|
|
385
417
|
target.style.gap = '10px';
|
|
386
|
-
// target.style.paddingLeft = '14px';
|
|
387
|
-
// target.style.paddingRight = '14px';
|
|
388
418
|
}
|
|
389
419
|
if(_mgsOutput?.length > 0){
|
|
390
420
|
_mgsCountsCheck++;
|
|
@@ -455,11 +485,6 @@ document.addEventListener('keyup', function (e) {
|
|
|
455
485
|
let page = 1;
|
|
456
486
|
let column = '';
|
|
457
487
|
let sort = '';
|
|
458
|
-
document.querySelectorAll('._mgsSort').forEach((el) => {
|
|
459
|
-
const text = _mgsCapitalizeFirstLetter (el.textContent.trim());
|
|
460
|
-
el.innerHTML = `${text} <span style="font-size:14px !important">▲</span>`;
|
|
461
|
-
el.setAttribute('data-sort', 'asc');
|
|
462
|
-
});
|
|
463
488
|
let prevPage = null;
|
|
464
489
|
let nextPage = null;
|
|
465
490
|
mgsDataTable({page,column, sort, search, prevPage, nextPage});
|
|
@@ -480,14 +505,43 @@ document.addEventListener('click', function (e) {
|
|
|
480
505
|
});
|
|
481
506
|
|
|
482
507
|
// string to convert first letter of a string to uppercase
|
|
483
|
-
function
|
|
508
|
+
function mgsCapitalizeFirstLetter(str) {
|
|
484
509
|
const capitalized = str.replace(/_/g,' ').replace(/\b\w/g, function(match) {return match.toUpperCase();});
|
|
485
510
|
return capitalized;
|
|
486
511
|
}
|
|
487
512
|
|
|
513
|
+
//show message
|
|
514
|
+
function mgsNotifyMessage(message, type = 'success', time=4000) {
|
|
515
|
+
let mgsMessageBox = document.getElementById('_mgsMessage');
|
|
516
|
+
if (!mgsMessageBox) {
|
|
517
|
+
mgsMessageBox = document.createElement('div');
|
|
518
|
+
mgsMessageBox.id = '_mgsMessage';
|
|
519
|
+
mgsMessageBox.style.position = 'fixed';
|
|
520
|
+
mgsMessageBox.style.top = '20px';
|
|
521
|
+
mgsMessageBox.style.right = '20px';
|
|
522
|
+
mgsMessageBox.style.zIndex = '99999';
|
|
523
|
+
mgsMessageBox.style.padding = '15px 20px';
|
|
524
|
+
mgsMessageBox.style.borderRadius = '5px';
|
|
525
|
+
mgsMessageBox.style.minWidth = '200px';
|
|
526
|
+
mgsMessageBox.style.mgsMessageBoxShadow = '0 2px 8px rgba(0,0,0,0.15)';
|
|
527
|
+
mgsMessageBox.style.fontFamily = 'Arial, sans-serif';
|
|
528
|
+
document.body.appendChild(mgsMessageBox);
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
mgsMessageBox.style.display = 'block';
|
|
532
|
+
mgsMessageBox.innerText = message;
|
|
533
|
+
mgsMessageBox.style.background = type === 'success' ? '#03741dff' : '#b30b1bff';
|
|
534
|
+
mgsMessageBox.style.color = '#ffff';
|
|
535
|
+
mgsMessageBox.style.border = type === 'success' ? '1px solid #03741dff' : '1px solid #b30b1bff';
|
|
536
|
+
setTimeout(() => {
|
|
537
|
+
mgsMessageBox.style.display = 'none';
|
|
538
|
+
}, time);
|
|
539
|
+
}
|
|
540
|
+
|
|
488
541
|
// Export globally for UMD/IIFE
|
|
489
542
|
window.mgsDataTable = mgsDataTable;
|
|
490
|
-
window.
|
|
543
|
+
window.mgsCapitalizeFirstLetter = mgsCapitalizeFirstLetter;
|
|
544
|
+
window.mgsNotifyMessage = mgsNotifyMessage;
|
|
491
545
|
|
|
492
546
|
// If using modules
|
|
493
|
-
export { mgsDataTable,
|
|
547
|
+
export { mgsDataTable, mgsCapitalizeFirstLetter, mgsNotifyMessage };
|