beta test: added quick search box for customers, projects and activities (#392)

config/packages/kimai.yaml

@@ -96,6 +96,9 @@ kimai:
     # theme related settings, will be available as twig globals at "kimai_context.*"
     # please see documentation at var/docs/theme.md
     theme:
+        # BETA test: If you set this to 'selectpicker' the customer/project/activity select boxes will be transformed
+        # into a searchable and javascript enhanced input type
+        select_type: ~
         # display a warning color if the user has at least X active recordings
         active_warning: 3
         # fallback color for all widgets that don't have a dedicated color

config/services.yaml

@@ -88,6 +88,11 @@ services:
         tags:
             - { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\FormType }
 
+    App\Form\Extension\EnhancedChoiceTypeExtension:
+        arguments: ["%kimai.theme.select_type%"]
+        tags:
+            - { name: form.type_extension, extended_type: Symfony\Bridge\Doctrine\Form\Type\EntityType }
+
     # ================================================================================
     # THEME
     # ================================================================================

src/DependencyInjection/AppExtension.php

@@ -35,47 +35,57 @@ class AppExtension extends Extension implements PrependExtensionInterface
 
         $container->setParameter('kimai.languages', $config['languages']);
         $container->setParameter('kimai.calendar', $config['calendar']);
-        $container->setParameter('kimai.theme', $config['theme']);
         $container->setParameter('kimai.dashboard', $config['dashboard']);
         $container->setParameter('kimai.widgets', $config['widgets']);
         $container->setParameter('kimai.invoice.documents', $config['invoice']['documents']);
         $container->setParameter('kimai.defaults', $config['defaults']);
 
-        $this->createUserParameter($config, $container);
-        $this->createTimesheetParameter($config, $container);
+        $this->createThemeParameter($config['theme'], $container);
+        $this->createUserParameter($config['user'], $container);
+        $this->createTimesheetParameter($config['timesheet'], $container);
     }
 
     /**
      * @param array $config
      * @param ContainerBuilder $container
      */
-    public function createUserParameter(array $config, ContainerBuilder $container)
+    protected function createThemeParameter(array $config, ContainerBuilder $container)
     {
-        if (!$config['user']['registration']) {
+        $container->setParameter('kimai.theme', $config);
+        $container->setParameter('kimai.theme.select_type', $config['select_type']);
+    }
+
+    /**
+     * @param array $config
+     * @param ContainerBuilder $container
+     */
+    protected function createUserParameter(array $config, ContainerBuilder $container)
+    {
+        if (!$config['registration']) {
             $routes = $container->getParameter('admin_lte_theme.routes');
             $routes['adminlte_registration'] = null;
             $container->setParameter('admin_lte_theme.routes', $routes);
         }
 
-        if (!$config['user']['password_reset']) {
+        if (!$config['password_reset']) {
             $routes = $container->getParameter('admin_lte_theme.routes');
             $routes['adminlte_password_reset'] = null;
             $container->setParameter('admin_lte_theme.routes', $routes);
         }
 
-        $container->setParameter('kimai.fosuser', $config['user']);
+        $container->setParameter('kimai.fosuser', $config);
     }
 
     /**
      * @param array $config
      * @param ContainerBuilder $container
      */
-    public function createTimesheetParameter(array $config, ContainerBuilder $container)
+    protected function createTimesheetParameter(array $config, ContainerBuilder $container)
     {
-        $container->setParameter('kimai.timesheet.rates', $config['timesheet']['rates']);
-        $container->setParameter('kimai.timesheet.rounding', $config['timesheet']['rounding']);
-        $container->setParameter('kimai.timesheet.duration_only', $config['timesheet']['duration_only']);
-        $container->setParameter('kimai.timesheet.markdown', $config['timesheet']['markdown_content']);
+        $container->setParameter('kimai.timesheet.rates', $config['rates']);
+        $container->setParameter('kimai.timesheet.rounding', $config['rounding']);
+        $container->setParameter('kimai.timesheet.duration_only', $config['duration_only']);
+        $container->setParameter('kimai.timesheet.markdown', $config['markdown_content']);
     }
 
     /**

src/DependencyInjection/Configuration.php

@@ -215,6 +215,9 @@ class Configuration implements ConfigurationInterface
                 ->scalarNode('box_color')
                     ->defaultValue('green')
                 ->end()
+                ->scalarNode('select_type')
+                    ->defaultNull()
+                ->end()
             ->end()
         ;
 

src/Form/Extension/EnhancedChoiceTypeExtension.php

@@ -0,0 +1,65 @@
+<?php
+
+/*
+ * This file is part of the Kimai time-tracking app.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Form\Extension;
+
+use Symfony\Bridge\Doctrine\Form\Type\EntityType;
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+
+/**
+ * Converts normal select boxes into javascript enhanced versions.
+ */
+class EnhancedChoiceTypeExtension extends AbstractTypeExtension
+{
+    public const TYPE_SELECTPICKER = 'selectpicker';
+
+    /**
+     * @var string|null
+     */
+    protected $type = null;
+
+    /**
+     * @param null|string $type
+     */
+    public function __construct(?string $type)
+    {
+        $this->type = $type;
+    }
+
+    /**
+     * @return string
+     */
+    public function getExtendedType()
+    {
+        return EntityType::class;
+    }
+
+    /**
+     * @param FormView $view
+     * @param FormInterface $form
+     * @param array $options
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        if ($this->type !== self::TYPE_SELECTPICKER) {
+            return;
+        }
+
+        if (!isset($view->vars['attr'])) {
+            $view->vars['attr'] = [];
+        }
+
+        $view->vars['attr'] = array_merge(
+            $view->vars['attr'],
+            ['class' => 'selectpicker', 'data-live-search' => true, 'data-width' => '100%']
+        );
+    }
+}

var/docs/docker.md

@@ -59,4 +59,4 @@ They were built by the community, we do not support them - for question please a
 
 - [dysonspherelab](https://hub.docker.com/r/dysonsphere/kimai2/) (for more infos [read this issue](https://github.com/kevinpapst/kimai2/issues/284))
 - [felixhummel](https://github.com/felixhummel/kimai-in-docker/tree/kimai2)
-- [Haidy777](https://github.com/Haidy777/kimai2/blob/docker/Dockerfile) 
+- [Haidy777](https://github.com/Haidy777/kimai2/blob/docker/Dockerfile) (for more infos [read this issue](https://github.com/kevinpapst/kimai2/pull/311))

var/docs/theme.md

@@ -9,6 +9,24 @@ All Kimai specific theme settings will be available in the twig templates with t
 {{ kimai_context.box_color }}
 ``` 
 
+## Searchable input types
+
+The select boxes for customer, project and activity are by default the OS standard UI elements. 
+This might be a limit for users with a long list of active and non-hidden elements.
+
+Therefor a test is currently running, which can be activated setting the the following configuration:  
+
+```yaml
+kimai:
+    theme:
+        select_type: selectpicker
+```
+
+This will turn the select boxes into javascript elements with quick search option. 
+
+Why is this a beta test? It's not clear, if we keep on using this javascript library or activate it by default.
+Therefor your feedback is highly welcome, please post your opinion at GitHub.   
+
 ## Active entries warning
 
 A small colored warning sign will be shown, if a user has more than 3 active timesheet entries.
@@ -61,39 +79,14 @@ with a pre-defined list of icon aliases to guarantee a consistent look.
 
 The pre-defined icons aliases are:
 
-- `activity`
-- `admin`
-- `calendar`
-- `customer`
-- `create`
-- `dashboard`
-- `delete`
-- `download`
-- `duration`
-- `edit`
-- `filter`
-- `help`
-- `invoice`
-- `list`
-- `logout`
-- `manual`
-- `money`
-- `print`
-- `project`
-- `repeat`
-- `start`
-- `start-small`
-- `stop`
-- `stop-small`
-- `timesheet`
-- `trash`
-- `user`
-- `visibility`
+`activity`, `admin`, `calendar`, `customer`, `create`,`dashboard`, `delete`, `download`, `duration`, `edit`, `filter`, 
+`help`, `invoice`, `list`, `logout`, `manual`, `money`, `print`, `project`, `repeat`, `start`, `start-small`, `stop`, 
+`stop-small`, `timesheet`, `trash`, `user`, `visibility`
+
+The full list can be found in this [TwigExtension](https://github.com/kevinpapst/kimai2/blob/master/src/Twig/Extensions.php).
 
 Icon aliases can be used by applying the `icon` filter, e.g.
 
 ```
 <i class="{{ 'money'|icon }}"></i>
 ```
-
-