cm-admin 0.8.9 → 0.9.1

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 (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;