mensa 0.2.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e79f4a4d3a4be038ed02e0f7dd30fee1abf0b6945b1a5817f05103928c288296
-  data.tar.gz: 888bdc7e9aeead37ec6f0461b7bcedd4a63905eaad8a75a4f57b698c88d8a05f
+  metadata.gz: b7b9a5dec3359255923794b7bdfd7b0cec906b52748b716da89607b808fac351
+  data.tar.gz: 5551eb56bb39d24c96d266d3e18b5869066ea0128ae53f40818f579480b8f747
 SHA512:
-  metadata.gz: 2b8d4acf77c6ed877a58ad145cd522fa50fccf770336f13e657c312c7d04a2a1e0b9eb37c9d6d7a16745c17924d3969deb6777921280834e31fa4a45cd29d644
-  data.tar.gz: b8053f1def913871788a7f3e2530e4ff7946e241af8c258d1a392b637aabad9bc3c40eaa0b71ab34c7454d2b1091346e2683b1a93e1f299af11845e28aecc886
+  metadata.gz: 44287cc7a421ce54a9a7ec8185fa5f73de4e16a69ce930cde7eb2fa72f6f13dc9f86d541851362752f3f45daf5872455775493129e18eef3c38ec5239feed169
+  data.tar.gz: c7f03bdcdb3dbe0640e83097d7f6fca629fe69fa3ec65d6b8315f498fbe0e9fc5e633ef99a94d699fc223fc576c58fb8512dd6ac0684655a43b31b282e5353f9

data/.devcontainer/compose.yaml

@@ -1,7 +1,7 @@
 name: "mensa"
 
 services:
-  rails-app:
+  app:
     cpu_count: 2
     build:
       context: ..

data/.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
 {
   "name": "mensa",
   "dockerComposeFile": "compose.yaml",
-  "service": "rails-app",
+  "service": "app",
   "workspaceFolder": "/workspaces/mensa",
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {

data/.gitignore

@@ -17,4 +17,6 @@ test/dummy/app/assets/stylesheets/application.tailwind.css
 config/tailwind.config.js
 app/assets/builds
 test/dummy/config/tailwind.config.js
+.envrc
 
+**/**/.DS_Store

data/Gemfile

@@ -7,9 +7,18 @@ gemspec
 
 gem "puma"
 gem "sprockets-rails"
-gem "satis", "~> 2", entdec: "satis", branch: "main"
+gem "satis", "~> 2"
 gem "pry"
 gem "capybara", "~> 3.40"
 gem "selenium-webdriver", "~> 4.17"
 gem "slim", "~> 5.2"
 gem "debug"
+gem "overmind", require: false
+gem "rack-mini-profiler"
+
+group :development, :test do
+  gem "standard", require: false
+  gem "rubocop-rails", require: false
+  gem "ruby-lsp", require: false
+  gem "ruby-lsp-rails", require: false
+end

data/Gemfile.lock

@@ -1,23 +1,7 @@
-GIT
-  remote: git@github.com:entdec/satis.git
-  revision: 1ef5f70700a755f01ed49168929200b2aaec792d
-  branch: main
-  specs:
-    satis (2.2.1)
-      browser
-      diffy
-      importmap-rails
-      jsonb_accessor (~> 1.4)
-      rails (>= 6)
-      stimulus-rails
-      tailwindcss-rails
-      turbo-rails
-      view_component
-
 PATH
   remote: .
   specs:
-    mensa (0.2.1)
+    mensa (0.2.3)
       caxlsx_rails (~> 0)
       importmap-rails
       pagy (>= 43)
@@ -27,35 +11,34 @@ PATH
       tailwindcss-rails (~> 3.3)
       textacular (>= 5)
       turbo-rails
+      view_component (~> 3.11)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    action_text-trix (2.1.15)
-      railties
-    actioncable (8.1.1)
-      actionpack (= 8.1.1)
-      activesupport (= 8.1.1)
+    actioncable (8.0.4)
+      actionpack (= 8.0.4)
+      activesupport (= 8.0.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (8.1.1)
-      actionpack (= 8.1.1)
-      activejob (= 8.1.1)
-      activerecord (= 8.1.1)
-      activestorage (= 8.1.1)
-      activesupport (= 8.1.1)
+    actionmailbox (8.0.4)
+      actionpack (= 8.0.4)
+      activejob (= 8.0.4)
+      activerecord (= 8.0.4)
+      activestorage (= 8.0.4)
+      activesupport (= 8.0.4)
       mail (>= 2.8.0)
-    actionmailer (8.1.1)
-      actionpack (= 8.1.1)
-      actionview (= 8.1.1)
-      activejob (= 8.1.1)
-      activesupport (= 8.1.1)
+    actionmailer (8.0.4)
+      actionpack (= 8.0.4)
+      actionview (= 8.0.4)
+      activejob (= 8.0.4)
+      activesupport (= 8.0.4)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (8.1.1)
-      actionview (= 8.1.1)
-      activesupport (= 8.1.1)
+    actionpack (8.0.4)
+      actionview (= 8.0.4)
+      activesupport (= 8.0.4)
       nokogiri (>= 1.8.5)
       rack (>= 2.2.4)
       rack-session (>= 1.0.1)
@@ -63,43 +46,42 @@ GEM
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (8.1.1)
-      action_text-trix (~> 2.1.15)
-      actionpack (= 8.1.1)
-      activerecord (= 8.1.1)
-      activestorage (= 8.1.1)
-      activesupport (= 8.1.1)
+    actiontext (8.0.4)
+      actionpack (= 8.0.4)
+      activerecord (= 8.0.4)
+      activestorage (= 8.0.4)
+      activesupport (= 8.0.4)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (8.1.1)
-      activesupport (= 8.1.1)
+    actionview (8.0.4)
+      activesupport (= 8.0.4)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (8.1.1)
-      activesupport (= 8.1.1)
+    activejob (8.0.4)
+      activesupport (= 8.0.4)
       globalid (>= 0.3.6)
-    activemodel (8.1.1)
-      activesupport (= 8.1.1)
-    activerecord (8.1.1)
-      activemodel (= 8.1.1)
-      activesupport (= 8.1.1)
+    activemodel (8.0.4)
+      activesupport (= 8.0.4)
+    activerecord (8.0.4)
+      activemodel (= 8.0.4)
+      activesupport (= 8.0.4)
       timeout (>= 0.4.0)
-    activestorage (8.1.1)
-      actionpack (= 8.1.1)
-      activejob (= 8.1.1)
-      activerecord (= 8.1.1)
-      activesupport (= 8.1.1)
+    activestorage (8.0.4)
+      actionpack (= 8.0.4)
+      activejob (= 8.0.4)
+      activerecord (= 8.0.4)
+      activesupport (= 8.0.4)
       marcel (~> 1.0)
-    activesupport (8.1.1)
+    activesupport (8.0.4)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
-      json
       logger (>= 1.4.2)
       minitest (>= 5.1)
       securerandom (>= 0.3)
@@ -107,7 +89,9 @@ GEM
       uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
+    ast (2.4.3)
     base64 (0.3.0)
+    benchmark (0.5.0)
     bigdecimal (3.3.1)
     browser (6.2.0)
     builder (3.3.0)
@@ -154,11 +138,13 @@ GEM
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
-    json (2.15.2)
+    json (2.16.0)
     jsonb_accessor (1.4)
       activerecord (>= 6.1)
       activesupport (>= 6.1)
       pg (>= 0.18.1)
+    language_server-protocol (3.17.0.5)
+    lint_roller (1.1.0)
     logger (1.7.0)
     loofah (2.24.1)
       crass (~> 1.0.2)
@@ -173,7 +159,7 @@ GEM
     matrix (0.4.3)
     method_source (1.1.0)
     mini_mime (1.1.5)
-    minitest (5.26.0)
+    minitest (5.26.1)
     net-imap (0.5.12)
       date
       net-protocol
@@ -200,9 +186,18 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.10-x86_64-linux-musl)
       racc (~> 1.4)
-    pagy (43.0.0)
+    overmind (2.5.1)
+    overmind (2.5.1-aarch64-linux)
+    overmind (2.5.1-arm-linux)
+    overmind (2.5.1-arm64-darwin)
+    overmind (2.5.1-x86_64-darwin)
+    pagy (43.0.2)
       json
       yaml
+    parallel (1.27.0)
+    parser (3.3.10.0)
+      ast (~> 2.4.1)
+      racc
     pg (1.6.2)
     pg (1.6.2-aarch64-linux)
     pg (1.6.2-aarch64-linux-musl)
@@ -213,6 +208,7 @@ GEM
     pp (0.6.3)
       prettyprint
     prettyprint (0.2.0)
+    prism (1.6.0)
     pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -224,6 +220,8 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (3.2.4)
+    rack-mini-profiler (4.0.1)
+      rack (>= 1.2.0)
     rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
@@ -231,20 +229,20 @@ GEM
       rack (>= 1.3)
     rackup (2.2.1)
       rack (>= 3)
-    rails (8.1.1)
-      actioncable (= 8.1.1)
-      actionmailbox (= 8.1.1)
-      actionmailer (= 8.1.1)
-      actionpack (= 8.1.1)
-      actiontext (= 8.1.1)
-      actionview (= 8.1.1)
-      activejob (= 8.1.1)
-      activemodel (= 8.1.1)
-      activerecord (= 8.1.1)
-      activestorage (= 8.1.1)
-      activesupport (= 8.1.1)
+    rails (8.0.4)
+      actioncable (= 8.0.4)
+      actionmailbox (= 8.0.4)
+      actionmailer (= 8.0.4)
+      actionpack (= 8.0.4)
+      actiontext (= 8.0.4)
+      actionview (= 8.0.4)
+      activejob (= 8.0.4)
+      activemodel (= 8.0.4)
+      activerecord (= 8.0.4)
+      activestorage (= 8.0.4)
+      activesupport (= 8.0.4)
       bundler (>= 1.15.0)
-      railties (= 8.1.1)
+      railties (= 8.0.4)
     rails-dom-testing (2.3.0)
       activesupport (>= 5.0.0)
       minitest
@@ -252,25 +250,69 @@ GEM
     rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (8.1.1)
-      actionpack (= 8.1.1)
-      activesupport (= 8.1.1)
+    railties (8.0.4)
+      actionpack (= 8.0.4)
+      activesupport (= 8.0.4)
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
       tsort (>= 0.2)
       zeitwerk (~> 2.6)
+    rainbow (3.1.1)
     rake (13.3.1)
+    rbs (3.9.5)
+      logger
     rdoc (6.15.1)
       erb
       psych (>= 4.0.0)
       tsort
     regexp_parser (2.11.3)
-    reline (0.6.2)
+    reline (0.6.3)
       io-console (~> 0.5)
     rexml (3.4.4)
+    rubocop (1.80.2)
+      json (~> 2.3)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
+      parallel (~> 1.10)
+      parser (>= 3.3.0.2)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.46.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.48.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    rubocop-performance (1.25.0)
+      lint_roller (~> 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
+    rubocop-rails (2.33.4)
+      activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
+      rack (>= 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    ruby-lsp (0.26.2)
+      language_server-protocol (~> 3.17.0)
+      prism (>= 1.2, < 2.0)
+      rbs (>= 3, < 5)
+    ruby-lsp-rails (0.4.8)
+      ruby-lsp (>= 0.26.0, < 0.27.0)
+    ruby-progressbar (1.13.0)
     rubyzip (3.2.2)
+    satis (2.3.0)
+      browser
+      diffy
+      importmap-rails
+      jsonb_accessor (~> 1.4)
+      rails (>= 6)
+      stimulus-rails
+      tailwindcss-rails
+      turbo-rails
+      view_component
     securerandom (0.4.1)
     selenium-webdriver (4.38.0)
       base64 (~> 0.2)
@@ -297,6 +339,18 @@ GEM
     sqlite3 (2.8.0-x86_64-darwin)
     sqlite3 (2.8.0-x86_64-linux-gnu)
     sqlite3 (2.8.0-x86_64-linux-musl)
+    standard (1.51.1)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.0)
+      rubocop (~> 1.80.2)
+      standard-custom (~> 1.0.0)
+      standard-performance (~> 1.8)
+    standard-custom (1.0.2)
+      lint_roller (~> 1.0)
+      rubocop (~> 1.50)
+    standard-performance (1.8.0)
+      lint_roller (~> 1.1)
+      rubocop-performance (~> 1.25.0)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.7)
@@ -320,11 +374,15 @@ GEM
       railties (>= 7.1.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.1.0)
     uri (1.1.1)
     useragent (0.16.11)
-    view_component (4.1.0)
-      activesupport (>= 7.1.0, < 8.2)
+    view_component (3.23.2)
+      activesupport (>= 5.2.0, < 8.1)
       concurrent-ruby (~> 1)
+      method_source (~> 1.0)
     websocket (1.2.11)
     websocket-driver (0.8.0)
       base64
@@ -351,13 +409,19 @@ DEPENDENCIES
   capybara (~> 3.40)
   debug
   mensa!
+  overmind
   pry
   puma
-  satis (~> 2)!
+  rack-mini-profiler
+  rubocop-rails
+  ruby-lsp
+  ruby-lsp-rails
+  satis (~> 2)
   selenium-webdriver (~> 4.17)
   slim (~> 5.2)
   sprockets-rails
   sqlite3 (~> 2.8)
+  standard
 
 BUNDLED WITH
    2.6.2

data/Procfile

@@ -1,2 +1,2 @@
-web: bin/rails server
-css: bin/rails app:tailwind_watch
+web: bin/rails server -p 3000 -b 0.0.0.0
+css: cd test/dummy && bin/rails tailwindcss:watch

data/README.md

@@ -2,27 +2,33 @@
 
 Fast and awesome tables, with pagination, sorting, filtering and custom views.
 
-Wanted features:
+![table](./docs/table.png)
+![filters](./docs/filters.png)
+
+Features:
 
 - [x] very fast
 - [x] row-links
 - [x] sorting
 - [x] tables without headers (and without most of the above)
-- [ ] column sorting
 - [x] filtering of multiple columns
+- [X] Hide filter icon in case there are no filters
+
+Still to do:
+- [ ] column sorting
 - [ ] editing of existing filters
 - [ ] view selection and exports per view
+- [ ] multiple selection of rows
 
-optionally:
+Optionally:
 
 - [ ] group by
 - [ ] sum/max/min
 - [ ] tables backed by arrays (of ActiveModel)
 
-Todo:
+Todo/Fixme:
 
-- [X] Hide filter icon in case there are no filters
-- [ ] Search only works on table columns
+- [ ] Search only works on table text columns
 
 ## Usage
 
@@ -67,6 +73,15 @@ class UserTable < ApplicationTable
     view_columns_sorting false # Disabled for now
     view_condensed false # Default false
     view_condensed_toggle true # Whether to show the toggle, default true
+
+    # Add system views
+    view :concept do
+      name "Concept"
+      filter :state do
+        operator :equals
+        value "concept"
+      end
+    end
   end
 end
 ```
@@ -78,9 +93,12 @@ You can show your tables on the page using the following:
   = sts.table :users
 ```
 
-#### Views
+#### Custom views
+
+Custom views are views not defined by the developer (SystemViews) but by the end-user by adding/removing filters.
+
+Initial support for custom-views is there, but pretty rudimentary:
 
-Initial support for views is there, but pretty rudimentary:
 `Mensa::TableView.create(table: "users", name: "Guests", data: {filters: {role: {value: "guest"}}})`
 
 ### Fast
@@ -95,6 +113,40 @@ column :age do
 end
 ```
 
+## Development
+
+### Coding
+
+- Checkout this repo
+- Setup your direnv, add the following to your `.envrc`:
+
+  ```
+  export BUNDLE_RUBYGEMS__PKG__GITHUB__COM=ghp_xxxxxxw
+  export RBENV_VERSION=$(cat .ruby-version)
+  ```
+- Run `direnv allow`
+- Open with Visual Studio Code (or with any other editor) and reopen in container.
+- Run `bin/overmind s`
+
+### Docs
+
+Using the following in your view will render Mensa::Table::Component
+```slim
+  = sts.table :users
+```
+
+The Mensa::Table::Component will render:
+- Mensa::Search::Component
+- Mensa::FilterList::Component
+- Mensa::Views::Component
+  - renders a views list
+  - Mensa::ControlBar::Component
+    - search icon
+    - filter icon
+    - condensed toggle
+    - export icon
+- turbo-frame with the actual table you see  (which is rendered by Mensa::View::Component)
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/app/assets/stylesheets/mensa/application.css

@@ -1,7 +1,7 @@
 @import '../../../components/mensa/add_filter/component.css';
 @import '../../../components/mensa/cell/component.css';
 @import '../../../components/mensa/control_bar/component.css';
-@import '../../../components/mensa/filters/component.css';
+@import '../../../components/mensa/filter_list/component.css';
 @import '../../../components/mensa/header/component.css';
 @import '../../../components/mensa/row_action/component.css';
 @import '../../../components/mensa/search/component.css';

data/app/components/mensa/add_filter/component.html.slim

@@ -1,6 +1,6 @@
 .sts-table__add_filter data-controller="mensa-add-filter" data-mensa-add-filter-mensa-table-outlet=".mensa-table#table-#{table.table_id}"
-  button.relative.w-full.cursor-default.rounded-md.bg-white.dark:bg-gray-800.py-1.5.pl-3.pr-6.text-left.text-gray-900.dark:text-gray-400.shadow-sm.border.border-dashed.focus:outline-none.focus:ring-2.focus:ring-primary-600.sm:text-sm.sm:leading-6 type="button" data-action="mensa-add-filter#toggle"
-    span.block.truncate data-mensa-add-filter-target="description"
+  button.relative.w-full.cursor-default.rounded-md.bg-white.dark:bg-gray-800.py-1.5.pl-3.pr-6.text-left.text-gray-400.dark:text-gray-400.shadow-sm.border.border-dashed.focus:outline-none.focus:ring-2.focus:ring-primary-600.sm:text-sm.sm:leading-6 type="button" data-action="mensa-add-filter#toggle"
+    span.mr-2.block.truncate data-mensa-add-filter-target="description"
       = t('.add_filter')
     span.pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-2
       div class=Mensa.config.icons[:filters_add_filter]

data/app/components/mensa/filter_list/component.html.slim

@@ -9,6 +9,6 @@
               span.block.truncate.pr-6
                 = filter
               span.pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-2
-                .fal.fa-angle-down
+                .fa.fal.fa-angle-down
 
         = render Mensa::AddFilter::Component.new(table: table)

data/app/components/mensa/view/paging.css

@@ -1,6 +1,6 @@
 .mensa-table {
   .paging {
-    @apply flex items-center justify-between border-t border-gray-100 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6;
+    @apply flex items-center justify-between border-t border-gray-100 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6 text-sm;
 
     .pagy {
       @apply isolate inline-flex -space-x-px text-gray-500 dark:text-gray-400;

data/app/components/mensa/views/component.css

@@ -10,4 +10,13 @@
       @apply bg-gray-300 text-gray-800 dark:bg-gray-500 hover:bg-gray-400;
     }
   }
-}
+}
+
+.tippy-box[data-theme~='mensa'] {
+  @apply bg-gray-200 text-gray-800 dark:text-gray-400;
+}
+
+.tippy-box[data-theme~='mensa'] .tippy-arrow {
+  @apply text-gray-200;
+}
+

data/app/components/mensa/views/component.html.slim

@@ -1,4 +1,4 @@
-.mensa-table__views data-mensa-table-target="views"
+.mensa-table__views data-mensa-table-target="views" data-controller="mensa-views"
   .sm:hidden
     label.sr-only[for="tabs"]
       | Select a tab
@@ -9,7 +9,7 @@
     nav.flex.justify-between[aria-label="Tabs"]
       .flex.space-x-2.overflow-x-auto.whitespace-nowrap.scroll-p-0
         - table.all_views.each.with_index do |view, index|
-          = link_to(table.path(table_view_id: view.id, turbo_frame_id: table.table_id), "data-turbo-frame": table.table_id, class: "view #{(view == table.table_view) || (!view.persisted? && table.table_view.blank?) ? 'selected' : ''}") do
+          = link_to(table.path(table_view_id: view.id, turbo_frame_id: table.table_id), "data-turbo-frame": table.table_id, class: "view #{(view.id == table.table_view&.id || view.id == :all && table.table_view.blank?) ? 'selected' : ''}", data: {"mensa-views-target": "view", action: "mensa-views#select", "tippy-content": view.description}) do
             = view.name
 
         - if table.supports_custom_views?

data/app/components/mensa/views/component.rb

@@ -11,4 +11,4 @@ module Mensa
       end
     end
   end
-end
+end

data/app/components/mensa/views/component_controller.js

@@ -0,0 +1,22 @@
+import ApplicationController from 'mensa/controllers/application_controller'
+import tippy from 'tippy.js'
+
+export default class ViewsComponentController extends ApplicationController {
+  static targets = [
+    'view',
+  ]
+
+  connect() {
+    tippy('[data-controller="mensa-views"] [data-tippy-content]', {
+      placement: "top",
+      theme: 'mensa',
+      offset: [0, 8]
+    });
+  }
+
+  select(event) {
+    this.viewTargets.forEach((element) => {
+      (element === event.target) ? element.classList.add('selected') : element.classList.remove('selected')
+    })
+  }
+}