cm-admin 0.3.0 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/CODE_OF_CONDUCT.md +74 -0
  3. data/Gemfile +1 -0
  4. data/Gemfile.lock +21 -20
  5. data/README.md +24 -1
  6. data/app/assets/stylesheets/cm_admin/base/auth.scss +0 -12
  7. data/app/assets/stylesheets/cm_admin/base/filters.scss +8 -7
  8. data/app/assets/stylesheets/cm_admin/base/form.scss +7 -72
  9. data/app/assets/stylesheets/cm_admin/base/navbar.scss +1 -3
  10. data/app/assets/stylesheets/cm_admin/base/quicksearch.scss +7 -0
  11. data/app/assets/stylesheets/cm_admin/base/scaffold.scss +38 -3
  12. data/app/assets/stylesheets/cm_admin/base/show.scss +24 -2
  13. data/app/assets/stylesheets/cm_admin/base/table.scss +270 -253
  14. data/app/assets/stylesheets/cm_admin/components/_dropdown-popup.scss +22 -10
  15. data/app/assets/stylesheets/cm_admin/components/_range.scss +13 -2
  16. data/app/assets/stylesheets/cm_admin/components/_status-tag.scss +2 -1
  17. data/app/assets/stylesheets/cm_admin/helpers/_variable.scss +1 -0
  18. data/app/controllers/cm_admin/application_controller.rb +5 -0
  19. data/app/controllers/cm_admin/exports_controller.rb +1 -1
  20. data/app/controllers/cm_admin/static_controller.rb +12 -0
  21. data/app/helpers/cm_admin/custom_helper.rb +4 -0
  22. data/app/javascript/packs/cm_admin/application.js +14 -1
  23. data/app/javascript/packs/cm_admin/filters.js +331 -16
  24. data/app/javascript/packs/cm_admin/quick_search.js +67 -0
  25. data/app/javascript/packs/cm_admin/scaffolds.js +30 -1
  26. data/app/javascript/stylesheets/cm_admin/application.scss +3 -0
  27. data/app/views/cm_admin/main/_associated_table.html.slim +60 -0
  28. data/app/views/cm_admin/main/_cm_pagy_nav.html.slim +6 -6
  29. data/app/views/cm_admin/main/_filters.html.slim +1 -10
  30. data/app/views/cm_admin/main/_nested_fields.html.slim +7 -0
  31. data/app/views/cm_admin/main/_nested_table_form.html.slim +6 -0
  32. data/app/views/cm_admin/main/_table.html.slim +5 -4
  33. data/app/views/cm_admin/main/_tabs.html.slim +5 -0
  34. data/app/views/cm_admin/main/_top_navbar.html.slim +4 -4
  35. data/app/views/cm_admin/main/associated_index.html.slim +6 -0
  36. data/app/views/cm_admin/main/associated_show.html.slim +6 -0
  37. data/app/views/cm_admin/main/index.html.slim +11 -8
  38. data/app/views/cm_admin/main/show.html.slim +12 -13
  39. data/app/views/cm_admin/static/error_401.html.slim +4 -0
  40. data/app/views/layouts/_left_sidebar_nav.html.slim +7 -3
  41. data/app/views/layouts/_quick_links.html.slim +25 -0
  42. data/app/views/layouts/cm_admin.html.slim +24 -1
  43. data/app/views/layouts/static.html.slim +18 -0
  44. data/bin/console +0 -1
  45. data/cm_admin.gemspec +1 -0
  46. data/config/routes.rb +2 -1
  47. data/config/webpack/environment.js +3 -2
  48. data/lib/.DS_Store +0 -0
  49. data/lib/cm_admin/model.rb +57 -167
  50. data/lib/cm_admin/models/action.rb +15 -1
  51. data/lib/cm_admin/models/cm_show_section.rb +20 -0
  52. data/lib/cm_admin/models/column.rb +49 -4
  53. data/lib/cm_admin/models/controller_method.rb +75 -0
  54. data/lib/cm_admin/models/dsl_method.rb +122 -0
  55. data/lib/cm_admin/models/export.rb +16 -5
  56. data/lib/cm_admin/models/field.rb +2 -1
  57. data/lib/cm_admin/models/filter.rb +67 -2
  58. data/lib/cm_admin/models/form_field.rb +21 -0
  59. data/lib/cm_admin/models/tab.rb +13 -0
  60. data/lib/cm_admin/version.rb +1 -1
  61. data/lib/cm_admin/view_helpers/column_field_helper.rb +29 -0
  62. data/lib/cm_admin/view_helpers/field_display_helper.rb +65 -0
  63. data/lib/cm_admin/view_helpers/filter_helper.rb +190 -0
  64. data/lib/cm_admin/view_helpers/form_field_helper.rb +21 -4
  65. data/lib/cm_admin/view_helpers/form_helper.rb +22 -12
  66. data/lib/cm_admin/view_helpers/manage_column_popup_helper.rb +75 -0
  67. data/lib/cm_admin/view_helpers/navigation_helper.rb +22 -6
  68. data/lib/cm_admin/view_helpers/page_info_helper.rb +36 -0
  69. data/lib/cm_admin/view_helpers.rb +3 -1
  70. data/lib/cm_admin.rb +3 -1
  71. data/lib/generators/cm_admin/install_generator.rb +20 -8
  72. data/package.json +6 -1
  73. data/tmp/cache/webpacker/last-compilation-digest-development +1 -0
  74. data/yarn.lock +35 -5
  75. metadata +41 -7
  76. data/app/controllers/cm_admin/main_controller.rb +0 -8
  77. data/lib/c.png +0 -0
  78. data/lib/cm_admin/view_helpers/field_column_helper.rb +0 -23
  79. data/lib/generators/cm_admin/templates/cm_admin_initializer.rb +0 -4
  80. data/yarn-error.log +0 -44
data/app/assets/stylesheets/cm_admin/base/show.scss CHANGED
@@ -1,11 +1,33 @@
1
1
  @import "../helpers/index.scss";
2
2
 
3
3
  .show-page {
4
- margin-top: 194px;
4
+ overflow: auto;
5
5
 
6
6
  &__tabs {
7
7
  .cm-tabs-bar {
8
- // If you want to overwrite tabs styles ---> add styles here
8
+ background-color: #FFF;
9
+ width: 100%;
10
+ .nav-pills {
11
+ margin-left: 20px;
12
+ }
13
+ .nav-link {
14
+ position: static;
15
+ left: 0%;
16
+ right: 0%;
17
+ font-size: 14px;
18
+ line-height: 22px;
19
+ flex: none;
20
+ order: 0;
21
+ flex-grow: 0;
22
+ color: #6B7586;
23
+ background-color: #FFF;
24
+ border-radius: 0px;
25
+ }
26
+ .nav-link.active {
27
+ color: #6554E0;
28
+ border-bottom: 3px #6554E0 solid;
29
+ background-color: #FFF;
30
+ }
9
31
  }
10
32
  }
11
33
 
data/app/assets/stylesheets/cm_admin/base/table.scss CHANGED
@@ -1,303 +1,320 @@
1
1
  @import "../helpers/index.scss";
2
2
 
3
- .index-page {
4
- margin-top: 204px;
5
- background-color: $white;
6
-
7
- &__filters {
8
- // If you want to overwrite filters styles ---> add styles here
9
- }
3
+ .cm-index-page {
4
+ .index-page {
5
+ background-color: $white;
6
+ overflow: auto;
10
7
 
11
- &__table-container {
12
- margin-top: 174px; //This should be height of the filters + navbar height
13
- padding: 20px;
14
- }
8
+ &__filters {
9
+ // If you want to overwrite filters styles ---> add styles here
10
+ }
15
11
 
16
- .admin-table {
17
- background-color: $white;
18
- border-radius: $radius-5;
19
- .record-found {
20
- padding: 10px;
21
- color: #31383d;
22
- font-size: 14px;
23
- opacity: 0.5;
12
+ &__table-container {
13
+ padding: 20px;
14
+ height: 100%;
24
15
  }
25
- .cm-table {
26
- width: 100%;
27
- &__header {
28
- tr > th {
29
- width: 20%;
30
- color: #172b4d;
31
- background-color: #fafbfc;
32
- box-shadow: inset 0 1px 0 0 #ebecf0;
33
- font-weight: 600;
34
- font-size: 14px;
35
- border-bottom: none;
36
- height: 40px;
37
- padding: 0 10px;
38
- }
39
- }
40
16
 
41
- &__body {
42
- tr {
43
- transition: all 0.2s linear;
44
- &:hover {
45
- background-color: #dfe4e7;
17
+ .admin-table {
18
+ background-color: $white;
19
+ border-radius: $radius-5;
20
+ .record-found {
21
+ padding: 10px;
22
+ color: #31383d;
23
+ font-size: 14px;
24
+ opacity: 0.5;
25
+ }
26
+ .cm-table {
27
+ width: 100%;
28
+ &__header {
29
+ tr > th {
30
+ width: 20%;
31
+ color: #172b4d;
32
+ background-color: #fafbfc;
33
+ box-shadow: inset 0 1px 0 0 #ebecf0;
34
+ font-weight: 600;
35
+ font-size: 14px;
36
+ border-bottom: none;
37
+ height: 40px;
38
+ padding: 0 10px;
46
39
  }
47
40
  }
48
41
 
49
- tr > td {
50
- color: #172b4d;
51
- font-size: 14px;
52
- padding: 8px 10px;
53
- }
54
- .edit-icon {
55
- font-size: 20px;
56
- cursor: pointer;
57
- @include transition-linear;
58
- &:hover {
59
- box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
60
- transform: scale(1.2);
42
+ &__body {
43
+ tr {
44
+ transition: all 0.2s linear;
45
+ &:hover {
46
+ background-color: #dfe4e7;
47
+ }
61
48
  }
62
- }
63
- }
64
- }
65
- }
66
49
 
67
- .new-admin-table {
68
- overflow: auto;
69
- .cm-table {
70
- table-layout: fixed;
71
- position: relative;
72
- min-width: fit-content;
73
- border-collapse: collapse;
74
- white-space: nowrap;
75
- border: 1px solid $grey-lighter-clr;
76
- border-radius: $radius-8;
77
- &__header {
78
- .header-row {
79
- display: block;
80
- position: relative;
81
- width: 100%;
82
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
83
- th {
84
- @include font($size: $t6-text, $color: $ink-lighter-clr, $weight: bold);
85
- text-transform: uppercase;
86
- min-width: 200px;
87
- max-width: 200px;
88
- padding: 12px 16px 12px 16px;
50
+ tr > td {
51
+ color: #172b4d;
52
+ font-size: 14px;
53
+ padding: 8px 10px;
89
54
  }
90
- .check-box-space {
91
- min-width: fit-content;
92
- max-width: fit-content;
93
- padding: 12px 8px 12px 16px;
94
- span {
95
- vertical-align: text-top;
55
+ .edit-icon {
56
+ font-size: 20px;
57
+ cursor: pointer;
58
+ @include transition-linear;
59
+ &:hover {
60
+ box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
61
+ transform: scale(1.2);
96
62
  }
97
63
  }
98
64
  }
99
65
  }
100
- &__body {
101
- display: block;
102
- overflow: auto;
103
- overflow-x: hidden;
66
+ }
67
+
68
+ .new-admin-table {
69
+ overflow: auto;
70
+ margin-top: 40px;
71
+ margin-bottom: 50px;
72
+ .cm-table {
73
+ table-layout: fixed;
104
74
  position: relative;
105
- width: 100%;
106
- height: 335px;
107
- .body-row {
108
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
109
- transition: all .2s linear;
110
- &:nth-last-child(1) {
111
- box-shadow: none;
112
- }
113
- &:hover {
114
- background-color: $grey-lighter-clr;
115
- .row-action-cell {
116
- opacity: 1;
75
+ min-width: fit-content;
76
+ border-collapse: collapse;
77
+ white-space: nowrap;
78
+ border: 1px solid $grey-lighter-clr;
79
+ border-radius: $radius-8;
80
+ &__header {
81
+ .header-row {
82
+ display: block;
83
+ position: relative;
84
+ width: 100%;
85
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
86
+ th {
87
+ @include font($size: $t6-text, $color: $ink-lighter-clr, $weight: bold);
88
+ text-transform: uppercase;
89
+ min-width: 200px;
90
+ max-width: 200px;
91
+ padding: 12px 16px 12px 16px;
117
92
  }
118
- }
119
- .check-box-space {
120
- min-width: fit-content;
121
- max-width: fit-content;
122
- padding: 16px 8px 16px 16px;
123
- span {
124
- vertical-align: text-top;
93
+ .check-box-space {
94
+ min-width: fit-content;
95
+ max-width: fit-content;
96
+ padding: 12px 8px 12px 16px;
97
+ span {
98
+ vertical-align: text-top;
99
+ }
125
100
  }
126
101
  }
127
- td {
128
- @include font($size: $t4-text, $color: $primary-text-clr);
129
- min-width: 200px;
130
- max-width: 200px;
131
- padding: 16px;
132
- }
133
- .row-action-cell {
134
- position: absolute;
135
- // left: 1225px;
136
- right: 0;
137
- width: 88px;
138
- max-width: inherit;
139
- min-width: inherit;
140
- height: 56px;
141
- padding: 0;
142
- background: linear-gradient(270deg, #F3F4F6 81.75%, rgba(243, 244, 246, 0) 100%);
143
- opacity: 0;
144
- transition: all .1s linear;
145
- .row-action-tool {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- height: 100%;
150
- .tool-btn {
151
- background-color: transparent;
152
- border: none;
102
+ }
103
+ &__body {
104
+ display: block;
105
+ position: relative;
106
+ width: 100%; .body-row {
107
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
108
+ transition: all .2s linear;
109
+ &:nth-last-child(1) {
110
+ box-shadow: none;
111
+ }
112
+ &:hover {
113
+ background-color: $grey-lighter-clr;
114
+ .row-action-cell {
115
+ opacity: 1;
116
+ }
117
+ }
118
+ .check-box-space {
119
+ min-width: fit-content;
120
+ max-width: fit-content;
121
+ padding: 16px 8px 16px 16px;
122
+ span {
123
+ vertical-align: text-top;
124
+ }
125
+ }
126
+ td {
127
+ @include font($size: $t4-text, $color: $primary-text-clr);
128
+ min-width: 200px;
129
+ max-width: 200px;
130
+ padding: 16px;
131
+ }
132
+ .row-action-cell {
133
+ position: absolute;
134
+ // left: 1225px;
135
+ right: 0;
136
+ width: 88px;
137
+ max-width: inherit;
138
+ min-width: inherit;
139
+ height: 56px;
140
+ padding: 0;
141
+ background: linear-gradient(270deg, #F3F4F6 81.75%, rgba(243, 244, 246, 0) 100%);
142
+ opacity: 0;
143
+ transition: all .1s linear;
144
+ .row-action-tool {
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ height: 100%;
149
+ .tool-btn {
150
+ background-color: transparent;
151
+ border: none;
152
+ }
153
153
  }
154
154
  }
155
155
  }
156
156
  }
157
157
  }
158
158
  }
159
- }
160
159
 
161
- .admin-table-index {
162
- .table-sticky-top {
163
- position: sticky;
164
- top: 254px;
165
- }
166
- .table-top {
167
- display: flex;
168
- justify-content: space-between;
169
- align-items: center;
170
- padding-bottom: 16px;
171
- &__total-count {
172
- font-size: $t4-text;
173
- line-height: 22px;
174
- color: $ink-lighter-clr;
175
- margin: 0;
160
+ .admin-table-index {
161
+
162
+ position: fixed;
163
+ width: calc(100% - 285px);
164
+ left: 245px;
165
+ background-color: #fff;
166
+ z-index: 1;
167
+ .table-sticky-top {
168
+ position: sticky;
169
+ top: 254px;
176
170
  }
177
- &__column-action {
178
- .column-btn {
179
- padding: 4px 8px;
180
- span:nth-child(2) {
181
- margin: 0 0 0 4px;
171
+ .table-top {
172
+ display: flex;
173
+ justify-content: space-between;
174
+ align-items: center;
175
+ padding-bottom: 16px;
176
+ &__total-count {
177
+ font-size: $t4-text;
178
+ line-height: 22px;
179
+ color: $ink-lighter-clr;
180
+ margin: 0;
181
+ }
182
+ &__column-action {
183
+ .column-btn {
184
+ padding: 4px 8px;
185
+ span:nth-child(2) {
186
+ margin: 0 0 0 4px;
187
+ }
182
188
  }
183
189
  }
184
190
  }
185
191
  }
186
- }
187
192
 
188
- // table-column-modal
189
- .table-column-modal {
193
+ // table-column-modal
194
+ .table-column-modal {
195
+
196
+ //modal overwritten styles
197
+ .modal-dialog {
198
+ .modal-content {
199
+ .modal-header {
200
+ position: relative;
201
+ padding: 24px 32px 18px;
202
+ border: none;
203
+ box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
204
+ .modal-title {
205
+ @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
206
+ line-height: 32px;
207
+ }
208
+ .close {
209
+ position: absolute;
210
+ top: 4px;
211
+ right: 8px;
212
+ padding: 4px;
213
+ margin: 0;
214
+ }
215
+ }
216
+ .modal-body {
217
+ padding: 0;
218
+ }
219
+ .modal-footer {
220
+ padding: 16px 32px;
221
+ border: none;
222
+ box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
223
+ }
224
+ }
225
+ }
190
226
 
191
- //modal overwritten styles
192
- .modal-dialog {
193
- .modal-content {
194
- .modal-header {
227
+ .columns-list {
228
+ .column-item {
195
229
  position: relative;
196
- padding: 24px 32px 18px;
197
- border: none;
230
+ display: flex;
231
+ align-items: center;
232
+ justify-content: space-between;
233
+ padding: 8px 24px;
198
234
  box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
199
- .modal-title {
200
- @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
201
- line-height: 32px;
235
+ &:hover {
236
+ .dragger {
237
+ display: block;
238
+ }
239
+ }
240
+ &__name {
241
+ font-size: $t4-text;
242
+ line-height: 22px;
243
+ margin-left: 4px;
244
+ color: $primary-text-clr;
245
+ p {
246
+ margin: 0;
247
+ }
248
+ }
249
+ &__action {
250
+ padding: 5px 8px;
251
+ font-size: $t4-text;
252
+ color: $ink-lightest-clr;
202
253
  }
203
- .close {
254
+ .dragger {
255
+ display: none;
204
256
  position: absolute;
205
- top: 4px;
206
- right: 8px;
207
- padding: 4px;
208
- margin: 0;
257
+ left: 4px;
258
+ top: 8px;
259
+ padding: 5px;
260
+ color: $ink-lightest-clr;
261
+ border-radius: $radius-4;
262
+ animation: fadeIn .1s ease-in-out;
263
+ cursor: grab;
264
+ &:hover {
265
+ background: $grey-lighter-clr;
266
+ }
209
267
  }
210
268
  }
211
- .modal-body {
212
- padding: 0;
213
- }
214
- .modal-footer {
215
- padding: 16px 32px;
216
- border: none;
217
- box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
218
- }
219
- }
220
- }
269
+ }
270
+ }
221
271
 
222
- .columns-list {
223
- .column-item {
224
- position: relative;
225
- display: flex;
272
+ .cm-pagination {
273
+ position: fixed;
274
+ background-color: #FFF;
275
+ bottom: 0;
276
+ width: calc(100% - 225px);
277
+ display: flex;
278
+ justify-content: space-between;
279
+ align-items: center;
280
+ padding: 16px 24px;
281
+ border: 1px solid $grey-lighter-clr;
282
+ &__lhs {
283
+ @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: bold);
284
+ line-height: 22px;
285
+ }
286
+ &__rhs {
287
+ display: inline-flex;
226
288
  align-items: center;
227
- justify-content: space-between;
228
- padding: 8px 24px;
229
- box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
230
- &:hover {
231
- .dragger {
232
- display: block;
233
- }
234
- }
235
- &__name {
236
- font-size: $t4-text;
237
- line-height: 22px;
238
- margin-left: 4px;
289
+ .page-move-btn {
290
+ font-size: 10px;
291
+ line-height: 12px;
239
292
  color: $primary-text-clr;
240
- p {
241
- margin: 0;
293
+ padding: 10px 11px;
294
+ cursor: pointer;
295
+ color: #0d6efd;
296
+ &.disabled {
297
+ color: #9CA7AE;
298
+ cursor: initial;
299
+ pointer-events: none;
242
300
  }
243
301
  }
244
- &__action {
245
- padding: 5px 8px;
246
- font-size: $t4-text;
247
- color: $ink-lightest-clr;
248
- }
249
- .dragger {
250
- display: none;
251
- position: absolute;
252
- left: 4px;
253
- top: 8px;
254
- padding: 5px;
255
- color: $ink-lightest-clr;
256
- border-radius: $radius-4;
257
- animation: fadeIn .1s ease-in-out;
258
- cursor: grab;
259
- &:hover {
260
- background: $grey-lighter-clr;
302
+ .page-num-btn {
303
+ @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
304
+ margin: 0 8px;
305
+ padding: 5px 11px;
306
+ cursor: pointer;
307
+ color: #0d6efd;
308
+ &.active {
309
+ color: $primary-text-clr;
310
+ background-color: $grey-lightest-clr;
311
+ border: 1px solid $grey-light-clr;
312
+ border-radius: $radius-4;
313
+ cursor: initial;
314
+ pointer-events: none;
261
315
  }
262
316
  }
263
317
  }
264
- }
265
- }
266
-
267
- .cm-pagination {
268
- display: flex;
269
- justify-content: space-between;
270
- align-items: center;
271
- padding: 16px 24px;
272
- border: 1px solid $grey-lighter-clr;
273
- &__lhs {
274
- @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: bold);
275
- line-height: 22px;
276
- }
277
- &__rhs {
278
- display: inline-flex;
279
- align-items: center;
280
- .page-move-btn {
281
- font-size: 10px;
282
- line-height: 12px;
283
- color: $primary-text-clr;
284
- padding: 10px 11px;
285
- cursor: pointer;
286
- &.disabled {
287
- color: #9CA7AE;
288
- }
289
- }
290
- .page-num-btn {
291
- @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
292
- margin: 0 8px;
293
- padding: 5px 11px;
294
- cursor: pointer;
295
- &.active {
296
- background-color: $grey-lightest-clr;
297
- border: 1px solid $grey-light-clr;
298
- border-radius: $radius-4;
299
- }
300
- }
301
318
  }
302
319
  }
303
- }
320
+ }