DashboardWelcomeQuicklinks::updateFormWithQuicklinks()

Complexity

Conditions	11
Paths	8

Size

Total Lines	154
Code Lines	84

Duplication

Lines	0
Ratio	0 %

Importance

Changes	12
Bugs	0	Features	0

<?php
    public function updateFormWithQuicklinks($form)
    {
        $shortcuts = $this->getLinksFromImplementor();
        $html = '';
        if (count($shortcuts)) {
            $html = '<div class="grid-wrapper">';

            usort(
                $shortcuts,
                function ($a, $b) {
                    ($a['SortOrder'] ?? 0) <=> ($b['SortOrder'] ?? 0);
                }
            );

            foreach ($shortcuts as $groupCode => $groupDetails) {
                $colour = '';
                if (!empty($groupDetails['Colour'])) {
                    $colour = 'style="background-color: ' . $groupDetails['Colour'] . '"';
                }
                $icon = '';
                if (!empty($groupDetails['IconClass'])) {
                    $icon = '<i class="' . $groupDetails['IconClass'] . '"></i> ';
                }
                $html .= '
                <div class="grid-cell" ' . $colour . '>
                    <div class="header">
                    <h1>' . $icon . '' . ($groupDetails['Title'] ?? $groupCode) . '</h1>
                    </div>
                    <div class="entries">';
                $items = $groupDetails['Items'] ?? [];
                if (!empty($entry['Link']) && class_exists($entry['Link'])) {
                    $obj = Injector::inst()->get($entry['Link']);
                    if ($obj instanceof DataObject) {
                        $entry['Link'] = DataObject::get_one($entry['Link'])->CMSEditLink();
                    } else {
                        $entry['Link'] = $obj->Link();
                    }
                }
                foreach ($items as $entry) {
                    $html .= $this->makeShortCut(
                        $entry['Title'],
                        $entry['Link'],
                        $entry['OnClick'] ?? '',
                        $entry['Script'] ?? '',
                        $entry['Style'] ?? '',
                        $entry['IconClass'] ?? '',
                        $entry['Target'] ?? '',
                    )->Field();
                }
                $html .= '</div></div>';
            }
        }
        $kc = (array) $this->Config()->get('colour_options');
        if(empty($kc)) {
            $kc = $this->Config()->get('default_colour_options');
        }
        $kcCount = count($kc);
        $colours = '';
        foreach ($kc as $key => $colour) {
            $colours .= ' .grid-wrapper .grid-cell:nth-child(' . $kcCount . 'n+' . ($key + 1) . ') div.header {background-color: ' . $colour . '; color: '.$this->getFontColor($colour).'!important;}';
        }
        $html .= '</div>';
        $html .= <<<JS
        <script>
            // Function to add the input box and set up the filtering behavior
            function setupInputAndFilter() {
                // Locate the target span element
                const targetSpan = document.querySelector('.cms-content-header-info');

                // Create the input box
                const inputBox = document.createElement('input');
                inputBox.type = 'text';
                inputBox.placeholder = 'Type to filter...';

                // Append the input box to the target span
                targetSpan.appendChild(inputBox);

                // Function to filter grid cells based on input
                function filterGridCells() {
                    const inputValue = inputBox.value.toLowerCase();
                    const gridCells = document.querySelectorAll('div.grid-cell');

                    gridCells.forEach(cell => {
                        // Check if the text in the cell includes the input value
                        if (inputValue === '' || cell.textContent.toLowerCase().includes(inputValue)) {
                            cell.style.display = ''; // Show the cell
                        } else {
                            cell.style.display = 'none'; // Hide the cell
                        }
                    });
                }

                // Add event listener to the input box to filter as the user types
                inputBox.addEventListener('input', filterGridCells);
            }
            window.setTimeout(setupInputAndFilter, 500);
        </script>

JS;

        $html .= '<style>

        .grid-wrapper {
          display: grid;
          grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );;
          grid-gap: 20px;
        }

        .grid-wrapper .grid-cell {
          max-width: 500px;
          font-size: 150%;
          border-radius: 1rem;
          border: 1px solid #004e7f55;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          opacity: 0.8;
          &:hover {
              transform: scale(1.05);
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
              opacity: 1;
          }
        }
        .grid-wrapper .grid-cell > div {
            padding: 20px;
            padding-bottom: 0;
        }
        .grid-wrapper .grid-cell > div.header {
            padding-bottom: 0;
            border-bottom: 1px solid #004e7f55;
        }
        .grid-wrapper .grid-cell > div.header h1 {
            font-weight: 700;
            font-size: 1.3rem!important;
        }
        .grid-wrapper .grid-cell > div.entries {
            background-color: #fff;
            height: 100%;
        }
        ' . $colours . '
        .grid-wrapper .grid-cell div.entries *,
        .grid-wrapper .grid-cell div.entries a:link,
        .grid-wrapper .grid-cell div.entries a:visited {
            color: #222;
        }
        .grid-wrapper .grid-cell div.entries a:link:hover,
        .grid-wrapper .grid-cell div.entries a:visited:hover {
            color: #0071c4;
            text-decoration: none;
        }
        </style>';
        $form->Fields()->push(LiteralField::create('ShortCuts', $html));
    }