diff --git a/css/overview.css b/css/overview.css
new file mode 100644
index 0000000..f53c610
--- /dev/null
+++ b/css/overview.css
@@ -0,0 +1,10 @@
+.overview-details {
+ border: 0;
+ margin: 0;
+}
+
+.overview-details summary {
+ font-weight: normal;
+ text-transform: none;
+ padding: 0;
+}
diff --git a/js/overview.js b/js/overview.js
index 623be64..c635b4d 100644
--- a/js/overview.js
+++ b/js/overview.js
@@ -8,42 +8,41 @@
"use strict";
/**
- * Filters the monitoring sensor overview table by input search filters.
+ * Filters the overview table by input search filters.
*
- * Text search input: input.table-filter-text
- * Select sensor type: select.table-filter-select-sensor-type
- * Select group: select.table-filter-select-group
- * Target table: input.table-filter-text[data-table]
- * Source text: .table-filter-text-source, .table-filter-group
+ * Text search input: input.table-filter-text
+ * Select group: select.table-filter-group-select
+ * Target table: input.table-filter-text[data-table]
+ * Source text: .table-filter-text-source
+ * Source group: .table-filter-group-source
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.tableFilterByText = {
attach: function (context, settings) {
- var $input = $('input.table-filter-text').once('table-filter-text');
- var $select_group = $('select.table-filter-select-group').once('table-filter-select-group');
- var $table = $($input.attr('data-table'));
+ var $text_input = $('input.table-filter-text').once('table-filter-text');
+ var $group_select = $('select.table-filter-group-select').once('table-filter-group-select');
+ var $table = $($text_input.attr('data-table'));
var $rows;
var $details;
function filterSensorList() {
- var group_value = $select_group.val().toLowerCase();
- var input_value = $input.val().toLowerCase();
+ var group_value = $group_select.val().toLowerCase();
+ var text_value = $text_input.val().toLowerCase();
function showSensorRow(index, row) {
var $row = $(row);
- var $group_sources = $row.find('.table-filter-group');
- var $input_value_sources = $row.find('.table-filter-text-source');
+ var $group_sources = $row.find('.table-filter-group-source');
+ var $text_sources = $row.find('.table-filter-text-source');
var group_array = $group_sources.map(function() {
return $(this).text().toLowerCase();
- // return $.trim($(this).text().toLowerCase());
}).get();
if (group_value && group_array.indexOf(group_value) == -1) {
$row.hide();
return;
}
- if (input_value && $input_value_sources.text().toLowerCase().indexOf(input_value) == -1) {
+ if (text_value && $text_sources.text().toLowerCase().indexOf(text_value) == -1) {
$row.hide();
return;
}
@@ -54,7 +53,7 @@
// // Filter if the length of the input field is longer than 2 characters
// // or an option is selected.
- // if (group_value || input_value.length >= 2) {
+ // if (group_value || text_value.length >= 2) {
// $rows.each(showSensorRow);
// }
// else {
@@ -65,10 +64,9 @@
if ($table.length) {
$rows = $table.find('tbody tr');
- $input.on('keyup', filterSensorList);
- $select_group.on('change', filterSensorList);
- $select_sensor_type.on('change', filterSensorList);
- $details = $table.find('details');
+ $text_input.on('keyup', filterSensorList);
+ $group_select.on('change', filterSensorList);
+ // $details = $table.find('details');
}
}
};
diff --git a/paragraphs_collection.libraries.yml b/paragraphs_collection.libraries.yml
index 6a869d4..dab5e4f 100644
--- a/paragraphs_collection.libraries.yml
+++ b/paragraphs_collection.libraries.yml
@@ -1,6 +1,14 @@
overview:
+ css:
+# @todo Use "theme", instead?
+ component:
+ css/overview.css: {}
js:
js/overview.js: {}
+ dependencies:
+ - core/drupal
+ - core/jquery
+ - core/jquery.once
background:
css:
diff --git a/src/Controller/OverviewController.php b/src/Controller/OverviewController.php
index 160b1f4..4f38ac9 100644
--- a/src/Controller/OverviewController.php
+++ b/src/Controller/OverviewController.php
@@ -2,6 +2,7 @@
namespace Drupal\paragraphs_collection\Controller;
+use Drupal\Component\Utility\Html;
use Drupal\Core\Controller\ControllerBase;
use Drupal\paragraphs\Entity\ParagraphsType;
use Drupal\paragraphs_collection\GridLayoutDiscoveryInterface;
@@ -193,6 +194,10 @@ class OverviewController extends ControllerBase {
];
$layouts = $this->gridDiscovery->getGridLayouts();
+ uasort($layouts, function ($layout1, $layout2) {
+ return strcasecmp($layout1['title'], $layout2['title']);
+ });
+
$rows =[];
foreach ($layouts as $layout_id => $layout) {
$paragraphs_type_ids = $this->getParagraphsTypesPerLayout($layout_id);
@@ -244,37 +249,82 @@ class OverviewController extends ControllerBase {
public function styles() {
$header = [
'label' => $this->t('Style'),
- 'description' => $this->t('Description'),
- 'groups' => $this->t('Groups'),
+// 'description' => $this->t('Description'),
+ 'details' => $this->t('Details'),
'use' => $this->t('Used in'),
];
$styles = $this->styleDiscovery->getStyles();
+ uasort($styles, function ($style1, $style2) {
+ return strcasecmp($style1['title'], $style2['title']);
+ });
+
$rows =[];
foreach ($styles as $style_id => $style) {
$paragraphs_type_ids = $this->getParagraphsTypesPerStyle($style_id);
- $paragraphs_type_links = [];
+
+ $paragraphs_type_link_list = [];
foreach ($paragraphs_type_ids as $paragraphs_type_id) {
$paragraphs_type = ParagraphsType::load($paragraphs_type_id);
- if($paragraphs_type_links != []) {
- $paragraphs_type_links[] = ['#plain_text' => ', '];
+ if($paragraphs_type_link_list != []) {
+ $paragraphs_type_link_list[] = ['#plain_text' => ', '];
}
- $paragraphs_type_links[] = [
+ $paragraphs_type_link_list[] = [
'#type' => 'link',
'#title' => $paragraphs_type->label(),
'#url' => $paragraphs_type->toUrl(),
- // @todo Figure out what classes and IDs we need. And find good names.
-// '#prefix' => '',
-// '#suffix' => '',
+ '#attributes' => [
+ 'class' => ['table-filter-paragraphs-type-source'],
+ ],
+ ];
+ }
+
+ $group_list = [];
+ foreach ($style['groups'] as $group) {
+ if ($group_list != []) {
+ $group_list[] = ['#plain_text' => ', '];
+ }
+ $group_list[] = [
+ '#type' => 'markup',
+ '#markup' => Html::escape($group),
+ '#prefix' => '',
+ '#suffix' => '',
];
}
- $row['label']['#plain_text'] = $style['title'];
- $row['description']['#plain_text'] = $style['description'];
- $row['groups']['#plain_text'] = implode(', ', $style['groups']);
- $row['use'] = $paragraphs_type_links;
+// $row['label']['#plain_text'] = $style['title'];
+ $row['label'] = [
+ '#type' => 'markup',
+ '#markup' => Html::escape($style['title']),
+ '#prefix' => '',
+ '#suffix' => '',
+ ];
+ $row['details'] = [
+ '#type' => 'details',
+ '#title' => $this->t($style['description']) ?: $this->t('Details'),
+ '#open' => FALSE,
+ '#attributes' => ['class' => ['overview-details']],
+ ];
+ $row['details']['id'] = [
+ '#type' => 'item',
+ '#title' => $this->t('ID'),
+ '#markup' => ''. Html::escape($style_id) . '',
+ '#prefix' => '',
+ '#suffix' => '
',
+ ];
+// $row['details']['groups'] = $group_list;
+ $row['details']['groups'] = [
+ '#type' => 'item',
+ '#title' => $this->t('Groups'),
+ 'data' => $group_list,
+ '#prefix' => '',
+ '#suffix' => '
',
+ ];
+
+
+ $row['use'] = $paragraphs_type_link_list;
$rows[] = $row;
}
@@ -291,10 +341,13 @@ class OverviewController extends ControllerBase {
$table += $rows;
$build['table'] = $table;
+ // @todo Make this class layouts/styles-specific?
$build['table']['#attributes']['class'][] = 'paragraphs-collection-overview';
$build['#attached']['library'] = ['paragraphs_collection/overview'];
- $groups = $this->styleDiscovery->getStyleGroups();
+ $group_options = $this->styleDiscovery->getStyleGroups();
+ asort($group_options);
+ $empty_option = ['' => '- All -'];
$build['filters'] = [
'#type' => 'fieldset',
@@ -304,13 +357,12 @@ class OverviewController extends ControllerBase {
'#weight' => -10,
'#title' => $this->t('Filter'),
];
- $build['filters']['category'] = [
+ $build['filters']['group'] = [
'#type' => 'select',
- '#empty_option' => $this->t('- All -'),
'#title' => $this->t('Group'),
- '#options' => $groups,
+ '#options' => $empty_option + $group_options,
'#attributes' => [
- 'class' => ['table-filter-select-group'],
+ 'class' => ['table-filter-group-select'],
],
];
$build['filters']['text'] = [
@@ -319,6 +371,7 @@ class OverviewController extends ControllerBase {
'#size' => 40,
'#attributes' => [
'class' => ['table-filter-text'],
+ // @todo Make this class layouts/styles-specific?
'data-table' => '.paragraphs-collection-overview',
'autocomplete' => 'off',
'title' => $this->t('Enter a part of the style label or ID to filter by.'),
@@ -326,7 +379,6 @@ class OverviewController extends ControllerBase {
];
return $build;
-// return $this->content(['styles']);
}
// @todo This is currently no longer called. Delete/reuse documentation.
@@ -342,7 +394,7 @@ class OverviewController extends ControllerBase {
public function content($item_types) {
$build = [
'#type' => 'markup',
- '#markup' => t('Hello World! (' . implode('', $item_types) . ')'),
+ '#markup' => t('Hello World! (' . implode(', ', $item_types) . ')'),
];
return $build;