cm-admin 0.8.9 → 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/.stylelintrc.json +3 -0
  3. data/.github/workflows/linters.yml +31 -0
  4. data/Gemfile +5 -1
  5. data/Gemfile.lock +24 -11
  6. data/app/assets/stylesheets/cm_admin/base/auth.scss +1 -1
  7. data/app/assets/stylesheets/cm_admin/base/common.scss +3 -3
  8. data/app/assets/stylesheets/cm_admin/base/filters.scss +11 -17
  9. data/app/assets/stylesheets/cm_admin/base/form.scss +119 -50
  10. data/app/assets/stylesheets/cm_admin/base/main-nav.scss +3 -7
  11. data/app/assets/stylesheets/cm_admin/base/navbar.scss +3 -2
  12. data/app/assets/stylesheets/cm_admin/base/quicksearch.scss +4 -6
  13. data/app/assets/stylesheets/cm_admin/base/scaffold.scss +47 -2
  14. data/app/assets/stylesheets/cm_admin/base/show.scss +11 -9
  15. data/app/assets/stylesheets/cm_admin/base/sidebar.scss +9 -19
  16. data/app/assets/stylesheets/cm_admin/base/table.scss +258 -325
  17. data/app/assets/stylesheets/cm_admin/base/tabs.scss +1 -2
  18. data/app/assets/stylesheets/cm_admin/components/_buttons.scss +19 -6
  19. data/app/assets/stylesheets/cm_admin/components/_drawer.scss +4 -8
  20. data/app/assets/stylesheets/cm_admin/components/_dropdown-popup.scss +1 -2
  21. data/app/assets/stylesheets/cm_admin/components/_input.scss +1 -1
  22. data/app/assets/stylesheets/cm_admin/components/_status-tag.scss +3 -2
  23. data/app/assets/stylesheets/cm_admin/helpers/_variable.scss +4 -0
  24. data/app/assets/stylesheets/cm_admin/scaffold.scss +2 -2
  25. data/app/controllers/cm_admin/resource_controller.rb +4 -2
  26. data/app/javascript/packs/cm_admin/filters.js +1 -1
  27. data/app/javascript/packs/cm_admin/scaffolds.js +34 -1
  28. data/app/views/cm_admin/main/_actions_dropdown.html.slim +2 -2
  29. data/app/views/cm_admin/main/_associated_table.html.slim +20 -21
  30. data/app/views/cm_admin/main/_member_custom_action_modal.html.slim +1 -1
  31. data/app/views/cm_admin/main/_nested_fields.html.slim +26 -9
  32. data/app/views/cm_admin/main/_nested_table_form.html.slim +9 -10
  33. data/app/views/cm_admin/main/_table.html.slim +13 -14
  34. data/app/views/cm_admin/main/_tabs.html.slim +1 -1
  35. data/app/views/cm_admin/main/associated_index.html.slim +4 -5
  36. data/app/views/cm_admin/main/index.html.slim +13 -14
  37. data/app/views/cm_admin/main/show.html.slim +2 -2
  38. data/app/views/layouts/cm_admin.html.slim +5 -5
  39. data/lib/cm_admin/model.rb +6 -1
  40. data/lib/cm_admin/models/action.rb +1 -1
  41. data/lib/cm_admin/models/column.rb +16 -3
  42. data/lib/cm_admin/models/dsl_method.rb +17 -4
  43. data/lib/cm_admin/models/field.rb +7 -1
  44. data/lib/cm_admin/models/filter.rb +1 -1
  45. data/lib/cm_admin/models/utils/associations.rb +25 -0
  46. data/lib/cm_admin/version.rb +1 -1
  47. data/lib/cm_admin/view_helpers/field_display_helper.rb +21 -1
  48. data/lib/cm_admin/view_helpers/page_info_helper.rb +11 -3
  49. data/package-lock.json +2868 -229
  50. data/package.json +2 -0
  51. data/tmp/cache/webpacker/last-compilation-digest-development +1 -1
  52. data/yarn.lock +1656 -48
  53. metadata +5 -2
data/app/assets/stylesheets/cm_admin/base/table.scss CHANGED
@@ -1,378 +1,311 @@
1
1
  @import "../helpers/index.scss";
2
2
 
3
3
  .cm-index-page {
4
- .index-page {
5
- background-color: $white;
6
- overflow: auto;
4
+ background-color: $white;
5
+ overflow: auto;
7
6
 
8
- .sticky-container {
9
- .cm-filters-v2 {
10
- padding: 16px 24px 36px 24px;
11
- }
12
- }
7
+ &.associated-index {
8
+ background-color: transparent;
9
+ }
13
10
 
14
- &__filters {
15
- // If you want to overwrite filters styles ---> add styles here
11
+ .sticky-container {
12
+ .cm-filters-v2 {
13
+ padding: 16px 24px;
16
14
  }
15
+ }
17
16
 
18
- &__table-container {
19
- padding: 20px;
20
- }
17
+ &__filters {
18
+ // If you want to overwrite filters styles ---> add styles here
19
+ }
21
20
 
22
- .admin-table {
23
- background-color: $white;
24
- border-radius: $radius-5;
25
- .record-found {
26
- padding: 10px;
27
- color: #31383d;
28
- font-size: 14px;
29
- opacity: 0.5;
30
- }
31
- .cm-table {
32
- width: 100%;
33
- &__header {
34
- tr > th {
35
- width: 20%;
36
- color: #172b4d;
37
- background-color: #fafbfc;
38
- box-shadow: inset 0 1px 0 0 #ebecf0;
39
- font-weight: 600;
40
- font-size: 14px;
41
- border-bottom: none;
42
- height: 40px;
43
- padding: 0 10px;
44
- }
21
+ &__table-container {
22
+ padding-left: 24px;
23
+ }
24
+
25
+ .table-top {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ height: 64px;
30
+ padding: 21px 24px 21px 0;
31
+ background-color: transparent;
32
+ &__total-count {
33
+ @include font($size: $t4-text, $color: $ink-lighter-clr);
34
+ line-height: 22px;
35
+ margin: 0;
36
+ }
37
+ &__column-action {
38
+ .column-btn {
39
+ padding: 4px 8px;
40
+ span:nth-child(2) {
41
+ margin: 0 0 0 4px;
45
42
  }
43
+ }
44
+ }
45
+ }
46
46
 
47
- &__body {
48
- tr {
49
- transition: all 0.2s linear;
50
- &:hover {
51
- background-color: #dfe4e7;
52
- }
47
+ //Table UI styles
48
+ .new-admin-table {
49
+ min-width: 720px;
50
+ max-width: fit-content;
51
+ // max-height: calc(100vh - 240px); Height is dynamic
52
+ overflow: auto;
53
+ .cm-table {
54
+ table-layout: fixed;
55
+ position: relative;
56
+ min-width: 720px;
57
+ border-collapse: collapse;
58
+ border: 1px solid $grey-lighter-clr;
59
+ border-top-width: 0;
60
+ border-radius: $radius-8;
61
+ &__header {
62
+ .header-row {
63
+ display: block;
64
+ width: 100%;
65
+ position: relative;
66
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
67
+ border-top: 1px solid $grey-lighter-clr;
68
+ th {
69
+ @include font($size: $t6-text, $color: $ink-lighter-clr, $weight: bold);
70
+ text-transform: uppercase;
71
+ min-width: 200px;
72
+ max-width: 200px;
73
+ padding: 12px 16px 12px 16px;
53
74
  }
54
-
55
- tr > td {
56
- color: #172b4d;
57
- font-size: 14px;
58
- padding: 8px 10px;
75
+ th:nth-child(1) {
76
+ position: sticky;
77
+ left: 0;
78
+ z-index: 2;
79
+ background-color: $white;
80
+ border-bottom: 1.21px solid rgb(240, 239, 239);
59
81
  }
60
- .edit-icon {
61
- font-size: 20px;
62
- cursor: pointer;
63
- @include transition-linear;
64
- &:hover {
65
- box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
66
- transform: scale(1.2);
82
+ .check-box-space {
83
+ position: sticky;
84
+ left: 0;
85
+ min-width: fit-content;
86
+ max-width: fit-content;
87
+ padding: 12px 8px 12px 16px;
88
+ z-index: 2;
89
+ background-color: $white;
90
+ border-bottom: 1.21px solid rgb(240, 239, 239);
91
+ span {
92
+ vertical-align: text-top;
67
93
  }
68
94
  }
69
95
  }
70
96
  }
71
- }
72
-
73
-
74
- .new-admin-table {
75
- overflow: auto;
76
- margin-top: 40px;
77
- margin-bottom: 50px;
78
- height: calc(100vh - 365px);
79
- .cm-table {
80
- table-layout: fixed;
97
+ &__body {
98
+ display: block;
81
99
  position: relative;
82
- min-width: fit-content;
83
- border-collapse: collapse;
84
- border: 1px solid $grey-lighter-clr;
85
- border-top-width: 0;
86
- border-radius: $radius-8;
87
- &__header {
88
- .header-row {
89
- display: block;
90
- width: 100%;
91
- position: relative;
92
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
93
- border-top: 1px solid $grey-lighter-clr;
94
- th {
95
- @include font($size: $t6-text, $color: $ink-lighter-clr, $weight: bold);
96
- text-transform: uppercase;
97
- min-width: 200px;
98
- max-width: 200px;
99
- padding: 12px 16px 12px 16px;
100
- }
101
- th:nth-child(2){
102
- position: sticky;
103
- left: 38px;
104
- z-index: 2;
105
- background-color: #fff;
106
- border-bottom: 1.21px solid rgb(240, 239, 239);
107
- }
108
- .check-box-space {
109
- position: sticky;
110
- left: 0;
111
- min-width: fit-content;
112
- max-width: fit-content;
113
- padding: 12px 8px 12px 16px;
114
- z-index: 2;
115
- background-color: #fff;
116
- border-bottom: 1.21px solid rgb(240, 239, 239);
117
- span {
118
- vertical-align: text-top;
119
- }
120
- }
100
+ width: 100%;
101
+ background-color: $white;
102
+ .body-row {
103
+ display: flex;
104
+ border-bottom: 1.21px solid rgb(240, 239, 239);
105
+ td:nth-child(1) {
106
+ position: sticky;
107
+ left: 0;
108
+ z-index: 2;
109
+ background-color: $white;
121
110
  }
122
- }
123
- &__body {
124
- // display: block;
125
- // overflow: auto;
126
- // overflow-x: hidden;
127
- // position: relative;
128
- // width: 100%;
129
- // height: 335px;
130
- display: block;
131
- position: relative;
132
- width: 100%;
133
- .body-row {
134
- border-bottom: 1.21px solid rgb(240, 239, 239);
135
- td:nth-child(2){
136
- position: sticky;
137
- left: 38px;
138
- z-index: 2;
139
- background-color: #fff;
140
- }
141
-
142
- &:nth-last-child(1) {
143
- box-shadow: none;
144
- }
145
- &:hover {
111
+ &:nth-last-child(1) {
112
+ box-shadow: none;
113
+ }
114
+ &:hover {
115
+ background-color: $grey-lighter-clr;
116
+ td:nth-child(1) {
146
117
  background-color: $grey-lighter-clr;
147
- td:nth-child(1) {
148
- background-color: $grey-lighter-clr;
149
- }
150
- td:nth-child(2) {
151
- background-color: $grey-lighter-clr;
152
- }
153
- .row-action-cell {
154
- opacity: 1;
155
- }
156
118
  }
157
- .check-box-space {
158
- position: sticky;
159
- left: 0;
160
- min-width: fit-content;
161
- max-width: fit-content;
162
- padding: 16px 8px 16px 16px;
163
- z-index: 2;
164
- background-color: #fff;
165
- span {
166
- vertical-align: text-top;
167
- }
119
+ .row-action-cell {
120
+ display: inline-block;
168
121
  }
169
- td {
170
- @include font($size: $t4-text, $color: $primary-text-clr);
171
- min-width: 200px;
172
- max-width: 200px;
173
- padding: 16px;
122
+ }
123
+ .check-box-space {
124
+ position: sticky;
125
+ left: 0;
126
+ min-width: fit-content;
127
+ max-width: fit-content;
128
+ padding: 16px 8px 16px 16px;
129
+ z-index: 2;
130
+ background-color: $white;
131
+ span {
132
+ vertical-align: text-top;
174
133
  }
175
- .row-action-cell {
176
- position: absolute;
177
- // left: 1225px;
178
- right: 0;
179
- width: 88px;
180
- max-width: inherit;
181
- min-width: inherit;
182
- height: 56px;
183
- padding: 0;
184
- background: linear-gradient(270deg, #F3F4F6 81.75%, rgba(243, 244, 246, 0) 100%);
185
- opacity: 0;
186
- transition: all .1s linear;
187
- .row-action-tool {
188
- display: flex;
189
- align-items: center;
190
- justify-content: center;
191
- height: 100%;
192
- .popup-card {
193
- .popup-option {
194
- a {
195
- font-weight: 500;
196
- font-size: 14px;
197
- line-height: 22px;
198
- color: #1D2129;
199
- }
134
+ }
135
+ td {
136
+ @include font($size: $t4-text, $color: $primary-text-clr);
137
+ min-width: 200px;
138
+ max-width: 200px;
139
+ padding: 16px;
140
+ }
141
+ .row-action-cell {
142
+ position: sticky;
143
+ right: 0;
144
+ width: 88px;
145
+ max-width: inherit;
146
+ min-width: inherit;
147
+ height: 53px;
148
+ padding: 0;
149
+ background: $gradient-one;
150
+ display: none;
151
+ transition: all 0.1s linear;
152
+ .row-action-tool {
153
+ display: flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ height: 100%;
157
+ .popup-card {
158
+ .popup-option {
159
+ a {
160
+ @include font($size: $t4-text, $color: $ink-regular-clr, $weight: 500);
161
+ line-height: 22px;
200
162
  }
201
163
  }
202
- .tool-btn {
203
- background-color: transparent;
204
- border: none;
205
- }
164
+ }
165
+ .tool-btn {
166
+ background-color: transparent;
167
+ border: none;
206
168
  }
207
169
  }
208
170
  }
209
171
  }
210
172
  }
211
- .cm-table > thead {
212
- position: sticky;
213
- top: 0;
214
- background-color: #fff;
215
- z-index: 3;
216
- }
217
173
  }
218
-
219
- .admin-table-index {
220
- position: fixed;
221
- width: calc(100% - 285px);
222
- left: 245px;
223
- background-color: #fff;
174
+ .cm-table > thead {
175
+ position: sticky;
176
+ top: 0;
177
+ background-color: $white;
224
178
  z-index: 3;
225
- .table-sticky-top {
226
- position: sticky;
227
- top: 254px;
228
- }
229
- .table-top {
230
- display: flex;
231
- justify-content: space-between;
232
- align-items: center;
233
- padding-bottom: 16px;
234
- margin-top: -20px;
235
- background-color: #fff;
236
- &__total-count {
237
- font-size: $t4-text;
238
- line-height: 22px;
239
- color: $ink-lighter-clr;
240
- margin: 0;
241
- }
242
- &__column-action {
243
- .column-btn {
244
- padding: 4px 8px;
245
- span:nth-child(2) {
246
- margin: 0 0 0 4px;
247
- }
248
- }
249
- }
250
- }
251
179
  }
180
+ }
252
181
 
253
- // table-column-modal
254
- .table-column-modal {
255
-
256
- //modal overwritten styles
257
- .modal-dialog {
258
- .modal-content {
259
- .modal-header {
260
- position: relative;
261
- padding: 24px 32px 18px;
262
- border: none;
263
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
264
- .modal-title {
265
- @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
266
- line-height: 32px;
267
- }
268
- .close {
269
- position: absolute;
270
- top: 4px;
271
- right: 8px;
272
- padding: 4px;
273
- margin: 0;
274
- }
275
- }
276
- .modal-body {
277
- padding: 0;
182
+ // table-column-modal
183
+ .table-column-modal {
184
+ //modal overwritten styles
185
+ .modal-dialog {
186
+ .modal-content {
187
+ .modal-header {
188
+ position: relative;
189
+ padding: 24px 32px 18px;
190
+ border: none;
191
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
192
+ .modal-title {
193
+ @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
194
+ line-height: 32px;
278
195
  }
279
- .modal-footer {
280
- padding: 16px 32px;
281
- border: none;
282
- box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
196
+ .close {
197
+ position: absolute;
198
+ top: 4px;
199
+ right: 8px;
200
+ padding: 4px;
201
+ margin: 0;
283
202
  }
284
203
  }
204
+ .modal-body {
205
+ padding: 0;
206
+ }
207
+ .modal-footer {
208
+ padding: 16px 32px;
209
+ border: none;
210
+ box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
211
+ }
285
212
  }
213
+ }
286
214
 
287
- .columns-list {
288
- .column-item {
289
- position: relative;
290
- display: flex;
291
- align-items: center;
292
- justify-content: space-between;
293
- padding: 8px 24px;
294
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
295
- &:hover {
296
- .dragger {
297
- display: block;
298
- }
299
- }
300
- &__name {
301
- font-size: $t4-text;
302
- line-height: 22px;
303
- margin-left: 4px;
304
- color: $primary-text-clr;
305
- p {
306
- margin: 0;
307
- }
215
+ .columns-list {
216
+ .column-item {
217
+ position: relative;
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: space-between;
221
+ padding: 8px 24px;
222
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
223
+ &:hover {
224
+ .dragger {
225
+ display: block;
308
226
  }
309
- &__action {
310
- padding: 5px 8px;
311
- font-size: $t4-text;
312
- color: $ink-lightest-clr;
227
+ }
228
+ &__name {
229
+ @include font($size: $t4-text, $color: $primary-text-clr);
230
+ line-height: 22px;
231
+ margin-left: 4px;
232
+ p {
233
+ margin: 0;
313
234
  }
314
- .dragger {
315
- display: none;
316
- position: absolute;
317
- left: 4px;
318
- top: 8px;
319
- padding: 5px;
320
- color: $ink-lightest-clr;
321
- border-radius: $radius-4;
322
- animation: fadeIn .1s ease-in-out;
323
- cursor: grab;
324
- &:hover {
325
- background: $grey-lighter-clr;
326
- }
235
+ }
236
+ &__action {
237
+ padding: 5px 8px;
238
+ @include font($size: $t4-text, $color: $ink-lightest-clr);
239
+ }
240
+ .dragger {
241
+ display: none;
242
+ position: absolute;
243
+ left: 4px;
244
+ top: 8px;
245
+ padding: 5px;
246
+ color: $ink-lightest-clr;
247
+ border-radius: $radius-4;
248
+ animation: fadeIn 0.1s ease-in-out;
249
+ cursor: grab;
250
+ &:hover {
251
+ background: $grey-lighter-clr;
327
252
  }
328
253
  }
329
254
  }
330
255
  }
256
+ }
331
257
 
332
- .cm-pagination {
333
- position: fixed;
334
- background-color: #FFF;
335
- bottom: 0;
336
- width: calc(100% - 225px);
337
- display: flex;
338
- justify-content: space-between;
258
+ .cm-pagination {
259
+ position: sticky;
260
+ bottom: 0;
261
+ left: 0;
262
+ display: flex;
263
+ justify-content: space-between;
264
+ align-items: center;
265
+ width: 100%;
266
+ padding: 16px 24px;
267
+ background-color: $white;
268
+ border: 1px solid $grey-lighter-clr;
269
+ box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.3);
270
+ z-index: 2;
271
+ &__lhs {
272
+ @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: bold);
273
+ line-height: 22px;
274
+ }
275
+ &__rhs {
276
+ display: inline-flex;
339
277
  align-items: center;
340
- padding: 16px 24px;
341
- border: 1px solid $grey-lighter-clr;
342
- &__lhs {
343
- @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: bold);
344
- line-height: 22px;
278
+ .page-move-btn {
279
+ @include font($size: 10px, $color: $primary-text-clr);
280
+ line-height: 12px;
281
+ padding: 10px 11px;
282
+ cursor: pointer;
283
+ &.disabled {
284
+ color: $disabled-clr;
285
+ cursor: initial;
286
+ pointer-events: none;
287
+ }
345
288
  }
346
- &__rhs {
289
+ .page-num-btn {
290
+ @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
347
291
  display: inline-flex;
292
+ justify-content: center;
348
293
  align-items: center;
349
- .page-move-btn {
350
- font-size: 10px;
351
- line-height: 12px;
352
- color: $primary-text-clr;
353
- padding: 10px 11px;
354
- cursor: pointer;
355
- color: #0d6efd;
356
- &.disabled {
357
- color: #9CA7AE;
358
- cursor: initial;
359
- pointer-events: none;
360
- }
294
+ width: 32px;
295
+ height: 32px;
296
+ margin: 0 8px;
297
+ border-radius: 4px;
298
+ cursor: pointer;
299
+ &:hover {
300
+ border: 1px solid $grey-light-clr;
361
301
  }
362
- .page-num-btn {
363
- @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
364
- margin: 0 8px;
365
- padding: 5px 11px;
366
- cursor: pointer;
367
- color: #0d6efd;
368
- &.active {
369
- color: $primary-text-clr;
370
- background-color: $grey-lightest-clr;
371
- border: 1px solid $grey-light-clr;
372
- border-radius: $radius-4;
373
- cursor: initial;
374
- pointer-events: none;
375
- }
302
+ &.active {
303
+ color: $primary-text-clr;
304
+ background-color: $grey-lightest-clr;
305
+ border: 1px solid $grey-light-clr;
306
+ border-radius: $radius-4;
307
+ cursor: initial;
308
+ pointer-events: none;
376
309
  }
377
310
  }
378
311
  }
data/app/assets/stylesheets/cm_admin/base/tabs.scss CHANGED
@@ -13,8 +13,7 @@
13
13
  z-index: 1;
14
14
 
15
15
  .tab-item {
16
- font-size: 14px;
17
- color: $ink-lighter-clr;
16
+ @include font($size: $t4-text, $color: $ink-lightest-clr);
18
17
  padding: 16px 0;
19
18
  margin-right: 24px;
20
19
  cursor: pointer;