Skip to content

Commit

Permalink
Dropdown columns for Table fields
Browse files Browse the repository at this point in the history 
Resolves #811

Signed-off-by: brandonkelly <brandon@pixelandtonic.com>
  • Loading branch information
@brandonkelly
brandonkelly committed Apr 5, 2019
1 parent 584a513 commit 214a570
Show file tree
Hide file tree
Showing 15 changed files with 376 additions and 102 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG-v3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

### Added
- Table fields can now have Dropdown columns. ([#811](https://github.com/craftcms/cms/issues/811))

### Fixed
- Fixed a bug where Control Panel pages that didn’t have a dedicated controller action weren’t ensuring that a user was logged in.

Expand Down
64 changes: 52 additions & 12 deletions src/fields/Table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,19 @@ public function init()

if (!is_array($this->columns)) {
$this->columns = [];
} else {
foreach ($this->columns as $colId => &$column) {
if ($column['type'] === 'select') {
if (!isset($column['options'])) {
$column['options'] = [];
} else if (is_string($column['options'])) {
$column['options'] = Json::decode($column['options']);
}
} else {
unset($column['options']);
}
}
unset($column);
}

if (!is_array($this->defaults)) {
Expand Down Expand Up @@ -161,6 +174,7 @@ public function getSettingsHtml()
'checkbox' => Craft::t('app', 'Checkbox'),
'color' => Craft::t('app', 'Color'),
'date' => Craft::t('app', 'Date'),
'select' => Craft::t('app', 'Dropdown'),
'lightswitch' => Craft::t('app', 'Lightswitch'),
'multiline' => Craft::t('app', 'Multi-line text'),
'number' => Craft::t('app', 'Number'),
Expand Down Expand Up @@ -196,6 +210,38 @@ public function getSettingsHtml()
],
];

$dropdownSettingsCols = [
'label' => [
'heading' => Craft::t('app', 'Option Label'),
'type' => 'singleline',
'autopopulate' => 'value',
'class' => 'option-label',
],
'value' => [
'heading' => Craft::t('app', 'Value'),
'type' => 'singleline',
'class' => 'option-value code',
],
'default' => [
'heading' => Craft::t('app', 'Default?'),
'type' => 'checkbox',
'radioMode' => true,
'class' => 'option-default thin',
],
];

$dropdownSettingsHtml = Craft::$app->getView()->renderTemplateMacro('_includes/forms', 'editableTableField', [
[
'label' => Craft::t('app', 'Dropdown Options'),
'instructions' => Craft::t('app', 'Define the available options.'),
'id' => '__ID__',
'name' => '__NAME__',
'addRowLabel' => Craft::t('app', 'Add an option'),
'cols' => $dropdownSettingsCols,
'initJs' => false,
]
]);

$view = Craft::$app->getView();

$view->registerAssetBundle(TimepickerAsset::class);
Expand All @@ -205,20 +251,14 @@ public function getSettingsHtml()
Json::encode($view->namespaceInputName('defaults'), JSON_UNESCAPED_UNICODE) . ', ' .
Json::encode($this->columns, JSON_UNESCAPED_UNICODE) . ', ' .
Json::encode($this->defaults, JSON_UNESCAPED_UNICODE) . ', ' .
Json::encode($columnSettings, JSON_UNESCAPED_UNICODE) .
Json::encode($columnSettings, JSON_UNESCAPED_UNICODE) . ', ' .
Json::encode($dropdownSettingsHtml, JSON_UNESCAPED_UNICODE) . ', ' .
Json::encode($dropdownSettingsCols, JSON_UNESCAPED_UNICODE) .
');');

$columnsField = $view->renderTemplateMacro('_includes/forms', 'editableTableField', [
[
'label' => Craft::t('app', 'Table Columns'),
'instructions' => Craft::t('app', 'Define the columns your table should have.'),
'id' => 'columns',
'name' => 'columns',
'cols' => $columnSettings,
'rows' => $this->columns,
'addRowLabel' => Craft::t('app', 'Add a column'),
'initJs' => false
]
$columnsField = $view->renderTemplate('_components/fieldtypes/Table/columntable', [
'cols' => $columnSettings,
'rows' => $this->columns,
]);

$defaultsField = $view->renderTemplateMacro('_includes/forms', 'editableTableField', [
Expand Down
2 changes: 1 addition & 1 deletion src/services/Sections.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@ public function handleChangedSection(ConfigEvent $event)
$sectionRecord->handle = $data['handle'];
$sectionRecord->type = $data['type'];
$sectionRecord->enableVersioning = (bool)$data['enableVersioning'];
$sectionRecord->propagationMethod = $data['propagationMethod'];
$sectionRecord->propagationMethod = $data['propagationMethod'] ?? Section::PROPAGATION_METHOD_ALL;

$isNewSection = $sectionRecord->getIsNewRecord();

Expand Down
29 changes: 29 additions & 0 deletions src/templates/_components/fieldtypes/Table/columntable.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{% from '_includes/forms' import field %}

{% set input %}
{% embed '_includes/forms/editableTable' with {
id: 'columns',
name: 'columns',
cols: cols,
rows: rows,
addRowLabel: 'Add a column'|t('app'),
initJs: false,
} %}
{% block tablecell %}
{% if colId == 'type' %}
<div class="flex flex-nowrap">
{{ parent() }}
<a class="settings light{% if value != 'select' %} invisible{% endif %}" role="button" data-icon="settings"></a>
</div>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{% endembed %}
{% endset %}

{{ field({
label: 'Table Columns'|t('app'),
instructions: 'Define the columns your table should have.'|t('app'),
id: 'columns',
}, input) }}
108 changes: 55 additions & 53 deletions src/templates/_includes/forms/editableTable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,59 +50,61 @@
{% set textual = (col.type in ['color', 'date', 'multiline', 'number', 'singleline', 'template', 'time']) %}
{% set isCode = col.code is defined or col.type == 'color' %}
<td class="{% if textual %}textual{% endif %} {% if col.class is defined %}{{ col.class }}{% endif %} {% if isCode %}code{% endif %} {% if hasErrors %}error{% endif %}"{% if col.width is defined %} width="{{ col.width }}"{% endif %}>
{%- switch col.type -%}
{%- case 'checkbox' -%}
{% include "_includes/forms/checkbox" with {
name: cellName,
value: col.value ?? 1,
checked: value is not empty,
disabled: static
} only %}
{%- case 'color' -%}
{% include "_includes/forms/color" with {
name: cellName,
value: value,
small: true,
disabled: static
} only %}
{%- case 'date' -%}
{% include "_includes/forms/date" with {
name: cellName,
value: value,
disabled: static
} only %}
{%- case 'lightswitch' -%}
{% include "_includes/forms/lightswitch" with {
name: cellName,
on: value,
value: col.value ?? 1,
small: true,
disabled: static
} only %}
{% case 'select' -%}
{% include "_includes/forms/select" with {
class: 'small',
name: cellName,
options: cell.options ?? col.options,
value: value,
disabled: static
} only %}
{%- case 'time' -%}
{% include "_includes/forms/time" with {
name: cellName,
value: value,
disabled: static
} only %}
{%- case 'template' -%}
{% include "_includes/forms/autosuggest" with {
name: cellName,
suggestions: craft.cp.getTemplateSuggestions(),
value: value,
disabled: static
} only %}
{%- default -%}
<textarea name="{{ cellName }}" rows="1"{% if static %} disabled{% endif %}{% if col.placeholder is defined %} placeholder="{{ col.placeholder }}"{% endif %}>{{ value }}</textarea>
{%- endswitch -%}
{% block tablecell %}
{%- switch col.type -%}
{%- case 'checkbox' -%}
{% include "_includes/forms/checkbox" with {
name: cellName,
value: col.value ?? 1,
checked: value is not empty,
disabled: static
} only %}
{%- case 'color' -%}
{% include "_includes/forms/color" with {
name: cellName,
value: value,
small: true,
disabled: static
} only %}
{%- case 'date' -%}
{% include "_includes/forms/date" with {
name: cellName,
value: value,
disabled: static
} only %}
{%- case 'lightswitch' -%}
{% include "_includes/forms/lightswitch" with {
name: cellName,
on: value,
value: col.value ?? 1,
small: true,
disabled: static
} only %}
{% case 'select' -%}
{% include "_includes/forms/select" with {
class: 'small',
name: cellName,
options: cell.options ?? col.options,
value: value,
disabled: static
} only %}
{%- case 'time' -%}
{% include "_includes/forms/time" with {
name: cellName,
value: value,
disabled: static
} only %}
{%- case 'template' -%}
{% include "_includes/forms/autosuggest" with {
name: cellName,
suggestions: craft.cp.getTemplateSuggestions(),
value: value,
disabled: static
} only %}
{%- default -%}
<textarea name="{{ cellName }}" rows="1"{% if static %} disabled{% endif %}{% if col.placeholder is defined %} placeholder="{{ col.placeholder }}"{% endif %}>{{ value }}</textarea>
{%- endswitch -%}
{% endblock %}
</td>
{% endif %}
{% endfor %}
Expand Down
17 changes: 16 additions & 1 deletion src/web/assets/cp/dist/css/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -835,7 +835,10 @@ ul.icons li a:hover {
display: flex;
align-items: center;
align-content: stretch;
flex-wrap: wrap;

&:not(.flex-nowrap) {
flex-wrap: wrap;
}

& > * {
margin-bottom: 7px;
Expand Down Expand Up @@ -2220,6 +2223,10 @@ table.editable {
@include sans-serif-font;
}
}

.flex > * {
margin-bottom: 0;
}
}
}

Expand Down Expand Up @@ -3211,6 +3218,14 @@ ul.tree,
}
}

.dropdownsettingsmodal {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
max-width: 400px;
}

/* ----------------------------------------
/* Menus
/* ----------------------------------------*/
Expand Down
6 changes: 5 additions & 1 deletion src/web/assets/cp/dist/css/craft.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/web/assets/cp/dist/css/craft.css.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 214a570

Please sign in to comment.