Re-Implemented the group function for crud; Updated card styles to su…

…pport toggle icon; Closes #1455

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Fixed
 
+- [#1455](https://github.com/luyadev/luya/issues/1455) Re-Implemented the group function for crud; Updated card styles to support toggle icon
 - [#1504](https://github.com/luyadev/luya/issues/1504) Added is-empty class to zaa-list directives and updated flag positions based on this class.
 - [#1503](https://github.com/luyadev/luya/issues/1503) Deleted news are now hidden in getAvailableNews() method.
 - [#1486](https://github.com/luyadev/luya/issues/1486) Toast messages displayed correctly with multiple lines.

modules/admin/src/resources/scss/components/_card.scss

@@ -0,0 +1,30 @@
+.card-body > *:last-child {
+ margin-bottom: 0;
+
+ .form-group {
+ margin-bottom: 0;
+ }
+}
+
+.card-header {
+ span {
+ vertical-align: middle;
+ }
+}
+
+.card-toggle-indicator {
+ position: relative;
+ font-size: 24px !important;
+ transition: .25s ease-in-out color, .2s ease-in-out transform;
+
+ .card-closed & {
+ transform: rotate(-90deg);
+ }
+}
+
+.card-body {
+
+ .card-closed & {
+ display: none;
+ }
+}

modules/admin/src/resources/scss/components/_crud.scss

@@ -45,6 +45,10 @@
  }
 }
 
+.crud-card {
+ margin-bottom: 25px;
+}
+
 .crud-toolbar {
 
  .btn-group {

modules/admin/src/views/ngrest/_crudform.php

@@ -8,11 +8,29 @@
 <div class="tab-pane tab-padded" role="tabpanel" ng-if="crudSwitchType==<?= $type; ?>" ng-class="{'active' : crudSwitchType==<?= $type; ?>}" <?php if (!$isInline): ?>zaa-esc="closeUpdate()"<?php endif; ?>>
  <form name="formCreate" class="js-form-side-by-side" ng-submit="<?php if ($type==2):?>submitUpdate()<?php else: ?>submitCreate()<?php endif; ?>">
  <?php foreach ($this->context->forEachGroups($renderer) as $key => $group): ?>
- <?php foreach ($group['fields'] as $field => $fieldItem): ?>
- <?php foreach ($this->context->createElements($fieldItem, $renderer) as $element): ?>
- <?= $element['html']; ?>
- <?php endforeach; ?>
- <?php endforeach; ?>
+
+ <?php if (!$group['is_default']): ?>
+ <div class="card crud-card" ng-init="groupToggler[<?= $key; ?>] = <?= (int) !$group['collapsed']; ?>" ng-class="{'card-closed': !groupToggler[<?= $key; ?>]}">
+ <div class="card-header" ng-click="groupToggler[<?= $key; ?>] = !groupToggler[<?= $key; ?>]">
+ <span class="material-icons card-toggle-indicator">keyboard_arrow_down</span>
+ <?= $group['name']; ?>
+ </div>
+ <div class="card-body">
+ <?php endif; ?>
+
+
+ <?php foreach ($group['fields'] as $field => $fieldItem): ?>
+ <?php foreach ($this->context->createElements($fieldItem, $renderer) as $element): ?>
+ <?= $element['html']; ?>
+ <?php endforeach; ?>
+ <?php endforeach; ?>
+
+
+ <?php if (!$group['is_default']): ?>
+ </div> <!-- /.card-body -->
+ </div> <!-- /.card -->
+ <?php endif; ?>
+
  <?php endforeach; ?>
  <button type="submit" class="btn btn-save btn-icon"><?= Module::t($type == 2 ? 'button_save' : 'ngrest_crud_btn_create'); ?></button>
  </form>