nginx config

.dockerignore

@@ -4,6 +4,4 @@ db/*.sqlite*
 tmp/*.*
 public/assets
 public/packs
-node_modules/
+node_modules/
-.yarn
-.pnp.*

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -9,7 +9,7 @@
 
 # Ignore the default SQLite database.
 /db/*.sqlite3
-/db/*.sqlite3*
+/db/*.sqlite3-journal
 
 # Ignore all logfiles and tempfiles.
 /log/*
@@ -20,6 +20,7 @@
 .byebug_history
 
 /public/assets
+/dist
 
 .DS_Store
 /public/packs
@@ -27,13 +28,3 @@
 /node_modules
 yarn-debug.log*
 .yarn-integrity
-/dist
-
-/public/packs
-/public/packs-test
-/node_modules
-/yarn-error.log
-yarn-debug.log*
-.yarn-integrity
-.yarn
-.pnp.*

.ruby-version

@@ -1 +1 @@
-3.3.5
+3.0.3

Dockerfile

@@ -1,14 +1,17 @@
-FROM ruby:3.3.5-bookworm
+FROM ruby:3.0.3-bullseye
 
 RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash - && \
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
+    echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && \
     apt-get update && apt-get dist-upgrade -y && \
     apt-get install -y \
         nodejs \
+        yarn \
         nginx && \
+    yarn global add @vue/cli && \
+    gem update --system && gem install bundler && \
     apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/*
 
-RUN gem update --no-document --system && gem install bundler --no-document && corepack enable
-
 # Install nginx config files
 RUN rm /etc/nginx/sites-enabled/default
 ADD docker/nginx_server.conf /etc/nginx/sites-enabled/parsley.conf
@@ -28,12 +31,12 @@ COPY Gemfile* ./
 RUN bundle install
 
 COPY package.json yarn.lock ./
-RUN yarn install --immutable
+RUN yarn install --frozen-lockfile
 
 COPY . .
 
 # Compile assets
-RUN env RAILS_ENV=production bundle exec rails shakapacker:clobber shakapacker:compile
+RUN yarn build
 
 ENV PORT=80
 EXPOSE 80

Gemfile

@@ -1,30 +1,28 @@
 source 'https://rubygems.org'
 
-gem 'rails', '7.2.1'
+gem 'rails', '6.1.4.1'
-gem 'pg', '~> 1.5.8'
+gem 'pg', '~> 1.2.3'
 
-gem 'shakapacker', '8.0.2'
 gem 'bootsnap', '>= 1.1.0', require: false
 
-gem 'oj', '~> 3.16.6'
+gem 'oj', '~> 3.13.9'
-gem 'csv', '~> 3.3'
 
-gem 'kaminari', '~> 1.2.2'
+gem 'kaminari', '~> 1.2.1'
-gem 'unitwise', '~> 2.3.0'
+gem 'unitwise', '~> 2.2.0'
-gem 'redcarpet', '~> 3.6.0'
+gem 'redcarpet', '~> 3.5.1'
 
-gem 'dalli', '~> 3.2.8'
+gem 'dalli', '~> 3.0.4'
-gem 'puma', '~> 6.4'
+gem 'puma', '~> 5.5'
-gem 'bcrypt', '~> 3.1.18'
+gem 'bcrypt', '~> 3.1.16'
 gem 'tzinfo-data'
 
 group :development, :test do
-  gem 'sqlite3', '~> 2.1.0'
+  gem 'sqlite3', '~> 1.4.2'
 
-  gem 'guard', '~> 2.18.0'
+  gem 'listen', '~> 3.3'
-  gem 'guard-rspec', require: false
+  gem 'rspec-rails', '~> 5.0.2'
-  gem 'rspec-rails', '~> 7.0.1'
   gem 'rails-controller-testing'
-  gem 'factory_bot_rails', '~> 6.4.3'
+  gem 'factory_bot_rails', '~> 6.2.0'
-  gem 'database_cleaner', '~> 2.0.2'
+  gem 'database_cleaner', '~> 2.0.1'
 end
+

Gemfile.lock

@@ -1,322 +1,230 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.2.1)
+    actioncable (6.1.4.1)
-      actionpack (= 7.2.1)
+      actionpack (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      activesupport (= 6.1.4.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-      zeitwerk (~> 2.6)
+    actionmailbox (6.1.4.1)
-    actionmailbox (7.2.1)
+      actionpack (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      activejob (= 6.1.4.1)
-      activejob (= 7.2.1)
+      activerecord (= 6.1.4.1)
-      activerecord (= 7.2.1)
+      activestorage (= 6.1.4.1)
-      activestorage (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      mail (>= 2.7.1)
-      mail (>= 2.8.0)
+    actionmailer (6.1.4.1)
-    actionmailer (7.2.1)
+      actionpack (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      actionview (= 6.1.4.1)
-      actionview (= 7.2.1)
+      activejob (= 6.1.4.1)
-      activejob (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      mail (~> 2.5, >= 2.5.4)
-      mail (>= 2.8.0)
+      rails-dom-testing (~> 2.0)
-      rails-dom-testing (~> 2.2)
+    actionpack (6.1.4.1)
-    actionpack (7.2.1)
+      actionview (= 6.1.4.1)
-      actionview (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      rack (~> 2.0, >= 2.0.9)
-      nokogiri (>= 1.8.5)
-      racc
-      rack (>= 2.2.4, < 3.2)
-      rack-session (>= 1.0.1)
       rack-test (>= 0.6.3)
-      rails-dom-testing (~> 2.2)
+      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.6)
+      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-      useragent (~> 0.16)
+    actiontext (6.1.4.1)
-    actiontext (7.2.1)
+      actionpack (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      activerecord (= 6.1.4.1)
-      activerecord (= 7.2.1)
+      activestorage (= 6.1.4.1)
-      activestorage (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
-      globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.1)
+    actionview (6.1.4.1)
-      activesupport (= 7.2.1)
+      activesupport (= 6.1.4.1)
       builder (~> 3.1)
-      erubi (~> 1.11)
+      erubi (~> 1.4)
-      rails-dom-testing (~> 2.2)
+      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.6)
+      rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (7.2.1)
+    activejob (6.1.4.1)
-      activesupport (= 7.2.1)
+      activesupport (= 6.1.4.1)
       globalid (>= 0.3.6)
-    activemodel (7.2.1)
+    activemodel (6.1.4.1)
-      activesupport (= 7.2.1)
+      activesupport (= 6.1.4.1)
-    activerecord (7.2.1)
+    activerecord (6.1.4.1)
-      activemodel (= 7.2.1)
+      activemodel (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      timeout (>= 0.4.0)
+    activestorage (6.1.4.1)
-    activestorage (7.2.1)
+      actionpack (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      activejob (= 6.1.4.1)
-      activejob (= 7.2.1)
+      activerecord (= 6.1.4.1)
-      activerecord (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      marcel (~> 1.0.0)
-      marcel (~> 1.0)
+      mini_mime (>= 1.1.0)
-    activesupport (7.2.1)
+    activesupport (6.1.4.1)
-      base64
+      concurrent-ruby (~> 1.0, >= 1.0.2)
-      bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.3.1)
-      connection_pool (>= 2.2.5)
-      drb
       i18n (>= 1.6, < 2)
-      logger (>= 1.4.2)
       minitest (>= 5.1)
-      securerandom (>= 0.3)
+      tzinfo (~> 2.0)
-      tzinfo (~> 2.0, >= 2.0.5)
+      zeitwerk (~> 2.3)
-    base64 (0.2.0)
+    bcrypt (3.1.16)
-    bcrypt (3.1.20)
+    bootsnap (1.9.3)
-    bigdecimal (3.1.8)
+      msgpack (~> 1.0)
-    bootsnap (1.18.4)
+    builder (3.2.4)
-      msgpack (~> 1.2)
+    concurrent-ruby (1.1.9)
-    builder (3.3.0)
-    coderay (1.1.3)
-    concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
     crass (1.0.6)
-    csv (3.3.0)
+    dalli (3.0.4)
-    dalli (3.2.8)
+    database_cleaner (2.0.1)
-    database_cleaner (2.0.2)
+      database_cleaner-active_record (~> 2.0.0)
-      database_cleaner-active_record (>= 2, < 3)
+    database_cleaner-active_record (2.0.1)
-    database_cleaner-active_record (2.2.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.3.4)
+    diff-lcs (1.4.4)
-    diff-lcs (1.5.1)
+    erubi (1.10.0)
-    drb (2.2.1)
+    factory_bot (6.2.0)
-    erubi (1.13.0)
-    factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.3)
+    factory_bot_rails (6.2.0)
-      factory_bot (~> 6.4)
+      factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
-    ffi (1.17.0)
+    ffi (1.15.4)
-    formatador (1.1.0)
+    globalid (1.0.0)
-    globalid (1.2.1)
+      activesupport (>= 5.0)
-      activesupport (>= 6.1)
+    i18n (1.8.11)
-    guard (2.18.1)
-      formatador (>= 0.2.4)
-      listen (>= 2.7, < 4.0)
-      lumberjack (>= 1.0.12, < 2.0)
-      nenv (~> 0.1)
-      notiffany (~> 0.0)
-      pry (>= 0.13.0)
-      shellany (~> 0.0)
-      thor (>= 0.18.1)
-    guard-compat (1.2.1)
-    guard-rspec (4.7.3)
-      guard (~> 2.1)
-      guard-compat (~> 1.1)
-      rspec (>= 2.99.0, < 4.0)
-    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    io-console (0.7.2)
+    kaminari (1.2.1)
-    irb (1.14.1)
-      rdoc (>= 4.0.0)
-      reline (>= 0.4.2)
-    kaminari (1.2.2)
       activesupport (>= 4.1.0)
-      kaminari-actionview (= 1.2.2)
+      kaminari-actionview (= 1.2.1)
-      kaminari-activerecord (= 1.2.2)
+      kaminari-activerecord (= 1.2.1)
-      kaminari-core (= 1.2.2)
+      kaminari-core (= 1.2.1)
-    kaminari-actionview (1.2.2)
+    kaminari-actionview (1.2.1)
       actionview
-      kaminari-core (= 1.2.2)
+      kaminari-core (= 1.2.1)
-    kaminari-activerecord (1.2.2)
+    kaminari-activerecord (1.2.1)
       activerecord
-      kaminari-core (= 1.2.2)
+      kaminari-core (= 1.2.1)
-    kaminari-core (1.2.2)
+    kaminari-core (1.2.1)
     liner (0.2.4)
-    listen (3.9.0)
+    listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    logger (1.6.1)
+    loofah (2.12.0)
-    loofah (2.22.0)
       crass (~> 1.0.2)
-      nokogiri (>= 1.12.0)
+      nokogiri (>= 1.5.9)
-    lumberjack (1.2.10)
+    mail (2.7.1)
-    mail (2.8.1)
       mini_mime (>= 0.1.1)
-      net-imap
+    marcel (1.0.2)
-      net-pop
-      net-smtp
-    marcel (1.0.4)
     memoizable (0.4.2)
       thread_safe (~> 0.3, >= 0.3.1)
-    method_source (1.1.0)
+    method_source (1.0.0)
-    mini_mime (1.1.5)
+    mini_mime (1.1.2)
-    mini_portile2 (2.8.7)
+    mini_portile2 (2.6.1)
-    minitest (5.25.1)
+    minitest (5.14.4)
-    msgpack (1.7.2)
+    msgpack (1.4.2)
-    nenv (0.3.0)
+    nio4r (2.5.8)
-    net-imap (0.4.16)
+    nokogiri (1.12.5)
-      date
+      mini_portile2 (~> 2.6.1)
-      net-protocol
-    net-pop (0.1.2)
-      net-protocol
-    net-protocol (0.2.2)
-      timeout
-    net-smtp (0.5.0)
-      net-protocol
-    nio4r (2.7.3)
-    nokogiri (1.16.7)
-      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    notiffany (0.1.3)
+    oj (3.13.9)
-      nenv (~> 0.1)
+    parslet (1.8.2)
-      shellany (~> 0.0)
+    pg (1.2.3)
-    oj (3.16.6)
+    puma (5.5.2)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
-    ostruct (0.6.0)
-    package_json (0.1.0)
-    parslet (2.0.0)
-    pg (1.5.8)
-    pry (0.14.2)
-      coderay (~> 1.1)
-      method_source (~> 1.0)
-    psych (5.1.2)
-      stringio
-    puma (6.4.3)
       nio4r (~> 2.0)
-    racc (1.8.1)
+    racc (1.6.0)
-    rack (3.1.7)
+    rack (2.2.3)
-    rack-proxy (0.7.7)
+    rack-test (1.1.0)
-      rack
+      rack (>= 1.0, < 3)
-    rack-session (2.0.0)
+    rails (6.1.4.1)
-      rack (>= 3.0.0)
+      actioncable (= 6.1.4.1)
-    rack-test (2.1.0)
+      actionmailbox (= 6.1.4.1)
-      rack (>= 1.3)
+      actionmailer (= 6.1.4.1)
-    rackup (2.1.0)
+      actionpack (= 6.1.4.1)
-      rack (>= 3)
+      actiontext (= 6.1.4.1)
-      webrick (~> 1.8)
+      actionview (= 6.1.4.1)
-    rails (7.2.1)
+      activejob (= 6.1.4.1)
-      actioncable (= 7.2.1)
+      activemodel (= 6.1.4.1)
-      actionmailbox (= 7.2.1)
+      activerecord (= 6.1.4.1)
-      actionmailer (= 7.2.1)
+      activestorage (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      actiontext (= 7.2.1)
-      actionview (= 7.2.1)
-      activejob (= 7.2.1)
-      activemodel (= 7.2.1)
-      activerecord (= 7.2.1)
-      activestorage (= 7.2.1)
-      activesupport (= 7.2.1)
       bundler (>= 1.15.0)
-      railties (= 7.2.1)
+      railties (= 6.1.4.1)
+      sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.5)
       actionpack (>= 5.0.1.rc1)
       actionview (>= 5.0.1.rc1)
       activesupport (>= 5.0.1.rc1)
-    rails-dom-testing (2.2.0)
+    rails-dom-testing (2.0.3)
-      activesupport (>= 5.0.0)
+      activesupport (>= 4.2.0)
-      minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.4.2)
-      loofah (~> 2.21)
+      loofah (~> 2.3)
-      nokogiri (~> 1.14)
+    railties (6.1.4.1)
-    railties (7.2.1)
+      actionpack (= 6.1.4.1)
-      actionpack (= 7.2.1)
+      activesupport (= 6.1.4.1)
-      activesupport (= 7.2.1)
+      method_source
-      irb (~> 1.13)
+      rake (>= 0.13)
-      rackup (>= 1.0.0)
+      thor (~> 1.0)
-      rake (>= 12.2)
+    rake (13.0.6)
-      thor (~> 1.0, >= 1.2.2)
+    rb-fsevent (0.11.0)
-      zeitwerk (~> 2.6)
+    rb-inotify (0.10.1)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rdoc (6.7.0)
+    redcarpet (3.5.1)
-      psych (>= 4.0.0)
+    rspec-core (3.10.1)
-    redcarpet (3.6.0)
+      rspec-support (~> 3.10.0)
-    reline (0.5.10)
+    rspec-expectations (3.10.1)
-      io-console (~> 0.5)
-    rspec (3.13.0)
-      rspec-core (~> 3.13.0)
-      rspec-expectations (~> 3.13.0)
-      rspec-mocks (~> 3.13.0)
-    rspec-core (3.13.1)
-      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
+      rspec-support (~> 3.10.0)
-    rspec-mocks (3.13.1)
+    rspec-mocks (3.10.2)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
+      rspec-support (~> 3.10.0)
-    rspec-rails (7.0.1)
+    rspec-rails (5.0.2)
-      actionpack (>= 7.0)
+      actionpack (>= 5.2)
-      activesupport (>= 7.0)
-      railties (>= 7.0)
-      rspec-core (~> 3.13)
-      rspec-expectations (~> 3.13)
-      rspec-mocks (~> 3.13)
-      rspec-support (~> 3.13)
-    rspec-support (3.13.1)
-    securerandom (0.3.1)
-    semantic_range (3.0.0)
-    shakapacker (8.0.2)
       activesupport (>= 5.2)
-      package_json
-      rack-proxy (>= 0.6.1)
       railties (>= 5.2)
-      semantic_range (>= 2.3.0)
+      rspec-core (~> 3.10)
-    shellany (0.0.1)
+      rspec-expectations (~> 3.10)
+      rspec-mocks (~> 3.10)
+      rspec-support (~> 3.10)
+    rspec-support (3.10.3)
     signed_multiset (0.2.1)
-    sqlite3 (2.1.0)
+    sprockets (4.0.2)
-      mini_portile2 (~> 2.8.0)
-    stringio (3.1.1)
-    thor (1.3.2)
-    thread_safe (0.3.6)
-    timeout (0.4.1)
-    tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2024.2)
+      rack (> 1, < 3)
+    sprockets-rails (3.4.1)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.4.2)
+    thor (1.1.0)
+    thread_safe (0.3.6)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2021.5)
       tzinfo (>= 1.0.0)
-    unitwise (2.3.0)
+    unitwise (2.2.0)
       liner (~> 0.2)
       memoizable (~> 0.4)
-      parslet (~> 2.0)
+      parslet (~> 1.5)
       signed_multiset (~> 0.2)
-    useragent (0.16.10)
+    websocket-driver (0.7.5)
-    webrick (1.8.2)
-    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    zeitwerk (2.6.18)
+    zeitwerk (2.5.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bcrypt (~> 3.1.18)
+  bcrypt (~> 3.1.16)
   bootsnap (>= 1.1.0)
-  csv (~> 3.3)
+  dalli (~> 3.0.4)
-  dalli (~> 3.2.8)
+  database_cleaner (~> 2.0.1)
-  database_cleaner (~> 2.0.2)
+  factory_bot_rails (~> 6.2.0)
-  factory_bot_rails (~> 6.4.3)
+  kaminari (~> 1.2.1)
-  guard (~> 2.18.0)
+  listen (~> 3.3)
-  guard-rspec
+  oj (~> 3.13.9)
-  kaminari (~> 1.2.2)
+  pg (~> 1.2.3)
-  oj (~> 3.16.6)
+  puma (~> 5.5)
-  pg (~> 1.5.8)
+  rails (= 6.1.4.1)
-  puma (~> 6.4)
-  rails (= 7.2.1)
   rails-controller-testing
-  redcarpet (~> 3.6.0)
+  redcarpet (~> 3.5.1)
-  rspec-rails (~> 7.0.1)
+  rspec-rails (~> 5.0.2)
-  shakapacker (= 8.0.2)
+  sqlite3 (~> 1.4.2)
-  sqlite3 (~> 2.1.0)
   tzinfo-data
-  unitwise (~> 2.3.0)
+  unitwise (~> 2.2.0)
 
 BUNDLED WITH
-   2.5.20
+   2.2.32

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 Dan Elbert
+Copyright (c) 2020 Dan Elbert
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Procfile

@@ -1,2 +1,2 @@
+frontend: yarn serve
 rails: bundle exec rails s -b 0.0.0.0
-shakapacker: bin/shakapacker-dev-server

README.md

@@ -5,7 +5,7 @@ A self hosted cookbook
 
 Parsley is released under the MIT License.
 
-Copyright (C) 2024  Dan Elbert
+Copyright (C) 2021 Dan Elbert
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/channels/application_cable/channel.rb

@@ -1,4 +0,0 @@
-module ApplicationCable
-  class Channel < ActionCable::Channel::Base
-  end
-end

app/channels/application_cable/connection.rb

@@ -1,18 +0,0 @@
-module ApplicationCable
-  class Connection < ActionCable::Connection::Base
-    identified_by :current_user
-
-    def connect
-      self.current_user = find_verified_user
-    end
-
-    private
-    def find_verified_user
-      if verified_user = User.find_by(id: cookies.encrypted['_parsley_session']['user_id'])
-        verified_user
-      else
-        reject_unauthorized_connection
-      end
-    end
-  end
-end

app/channels/task_channel.rb

@@ -1,12 +0,0 @@
-class TaskChannel < ApplicationCable::Channel
-
-  def subscribed
-    stream_for current_user.id
-  end
-
-  def self.update_task_list(task_list)
-    task_list.reload
-    self.broadcast_to task_list.user_id, { task_list: TaskListSerializer.for(task_list), action: 'updated' }
-  end
-
-end

app/controllers/application_controller.rb

@@ -4,7 +4,7 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
 
   def verified_request?
-    if request.media_type == "application/json"
+    if request.content_type == "application/json"
       true
     else
       super()
@@ -42,18 +42,8 @@ class ApplicationController < ActionController::Base
     if owner
       yield if block_given?
     else
-      respond_to do |format|
+      flash[:warning] = "Operation Not Permitted"
-        format.html do
+      redirect_to root_path
-          flash[:warning] = "Operation Not Permitted"
-          redirect_to root_path
-        end
-
-        format.json do
-          render json: { error: "Operation Not Permitted" }, status: current_user.nil? ? :unauthorized : :forbidden
-        end
-      end
-
-
     end
   end
 

app/controllers/calculator_controller.rb

@@ -34,10 +34,8 @@ class CalculatorController < ApplicationController
 
       begin
         input_unit = UnitConversion.parse(input)
-        input_unit.unitwise
       rescue UnitConversion::UnparseableUnitError => e
-        data[:errors][:input] << e.message
+        data[:errors][:input] << 'invalid string'
-        input_unit = nil
       end
 
       if !input_unit.nil?

app/controllers/notes_controller.rb

@@ -1,5 +1,5 @@
 class NotesController < ApplicationController
-  before_action :set_note, only: [:show, :update, :destroy]
+  before_action :set_note, only: [:show, :edit, :update, :destroy]
   before_action :ensure_valid_user
 
   # GET /notes

app/controllers/task_items_controller.rb

@@ -9,7 +9,6 @@ class TaskItemsController < ApplicationController
     @task_item.task_list = @task_list
 
     if @task_item.save
-      TaskChannel.update_task_list(@task_list)
       render json: TaskItemSerializer.for(@task_item), status: :created, location: [@task_list, @task_item]
     else
       render json: @task_item.errors, status: :unprocessable_entity
@@ -18,7 +17,6 @@ class TaskItemsController < ApplicationController
 
   def update
     if @task_item.update(task_item_params)
-      TaskChannel.update_task_list(@task_list)
       render json: TaskItemSerializer.for(@task_item), status: :ok, location: [@task_list, @task_item]
     else
       render json: @task_item.errors, status: :unprocessable_entity
@@ -32,8 +30,6 @@ class TaskItemsController < ApplicationController
       @task_items.each { |i| i.destroy }
     end
 
-    TaskChannel.update_task_list(@task_list)
-
     head :no_content
   end
 
@@ -45,8 +41,6 @@ class TaskItemsController < ApplicationController
       @task_items.each { |i| i.update_attribute(:completed, new_status) }
     end
 
-    TaskChannel.update_task_list(@task_list)
-
     head :no_content
   end
 
@@ -65,4 +59,4 @@ class TaskItemsController < ApplicationController
     @task_item = @task_list.task_items.find(params[:id])
   end
 
-end
+end

app/controllers/task_lists_controller.rb

@@ -27,7 +27,6 @@ class TaskListsController < ApplicationController
   def update
     ensure_owner(@task_list) do
       if @task_list.update(task_list_params)
-        TaskChannel.update_task_list(@task_list)
         render json: TaskListSerializer.for(@task_list), status: :ok, location: @task_list
       else
         render json: @task_list.errors, status: :unprocessable_entity
@@ -41,14 +40,13 @@ class TaskListsController < ApplicationController
       head :no_content
     end
   end
-
+  
   def add_recipe
     ensure_owner(@task_list) do
       recipe = Recipe.find(params[:recipe_id])
-
+      
       @task_list.add_recipe_ingredients(recipe)
-      TaskChannel.update_task_list(@task_list)
+      
-
       head :no_content
     end
   end
@@ -63,4 +61,4 @@ class TaskListsController < ApplicationController
     @task_list = TaskList.find(params[:id])
   end
 
-end
+end

app/controllers/users_controller.rb

@@ -50,7 +50,7 @@ class UsersController < ApplicationController
       if @user.save
         set_current_user(@user)
         format.html { redirect_to root_path, notice: 'User created.' }
-        format.json { render json: UserSerializer.for(@user), status: :created, location: @user }
+        format.json { render :show, status: :created, location: @user }
       else
         format.html { render :new }
         format.json { render json: @user.errors, status: :unprocessable_entity }
@@ -68,7 +68,7 @@ class UsersController < ApplicationController
     respond_to do |format|
       if @user.update(user_params)
         format.html { redirect_to root_path, notice: 'User updated.' }
-        format.json { render json: UserSerializer.for(@user) , status: :created, location: @user }
+        format.json { render :show, status: :created, location: @user }
       else
         format.html { render :edit }
         format.json { render json: @user.errors, status: :unprocessable_entity }

app/javascript/components/App.vue

@@ -1,67 +1,83 @@
 <template>
   <div id="app">
-    <app-progress-bar></app-progress-bar>
+    <vue-progress-bar></vue-progress-bar>
     <app-navbar></app-navbar>
     <section id="main" class="">
       <div class="container">
-        <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
-          <transition name="fade" mode="out-in">
+          <router-view v-if="!hasError"></router-view>
-            <component v-if="!hasError" :is="Component" />
+          <div v-else>
-            <div v-else>
+            <h1>Error!</h1>
-              <h1>Error!</h1>
+            <p>{{error}}</p>
-              <p>{{ appConfig.error }}</p>
+          </div>
-            </div>
+        </transition>
-          </transition>
-        </router-view>
       </div>
     </section>
   </div>
 </template>
 
-<script setup>
+<script>
-  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
-  import { useAppConfigStore } from "../stores/appConfig";
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
-  import AppProgressBar from "./AppProgressBar.vue";
 
-  const globalTweenGroup = useGlobalTweenGroup();
+  import { mapMutations, mapState } from "vuex";
-  let animationLoop = true;
+  import api from "../lib/Api";
+  import TWEEN from '@tweenjs/tween.js';
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const hasError = computed(() => appConfig.error !== null);
+    data() {
+      return {
+        api: api
+      };
+    },
+    computed: {
+      ...mapState({
+        hasError: state => state.error !== null,
+        error: state => state.error,
+        authChecked: state => state.authChecked,
+        initialLoad: state => state.initialLoad
+      })
+    },
 
-  const { loadResource } = useLoadResource();
+    watch: {
-  const { checkAuthentication } = useCheckAuthentication(loadResource);
+      isLoading(val) {
-
-  watch(
-      () => appConfig.initialLoad,
-      (val) => {
         if (val) {
-          nextTick(() => document.body.classList.remove("loading"));
+          this.$Progress.start();
+        } else {
+          this.$Progress.finish();
         }
       },
-      { immediate: true }
-  );
 
-  onMounted(() => {
+      initialLoad(val) {
-    // Setup global animation loop
+        if (val) {
-    function animate() {
+          this.$nextTick(() => {
-      if (animationLoop) {
+            document.body.classList.remove("loading");
-        globalTweenGroup.update();
+          });
+        }
+      }
+    },
+
+    created() {
+      // Setup global animation loop
+      function animate () {
+        TWEEN.update();
         requestAnimationFrame(animate);
       }
-    }
+      animate();
-    animate();
 
-    if (appConfig.user === null && appConfig.authChecked === false) {
+      if (this.user === null && this.authChecked === false) {
-      checkAuthentication();
+        this.checkAuthentication();
-    }
+      }
-  });
+    },
 
-  onUnmounted(() => {
+    mounted() {
-    animationLoop = false;
+      if (this.initialLoad) {
-  });
+        this.$nextTick(() => {
+          document.body.classList.remove("loading");
+        });
+      }
+    },
+
+    components: {
+    }
+  }
 
 </script>

app/javascript/components/AppAutocomplete.vue

@@ -27,190 +27,206 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref, watch } from "vue";
   import debounce from 'lodash/debounce';
 
-  const emit = defineEmits(["update:modelValue", "inputClick", "optionSelected"]);
+  export default {
+    props: {
+      value: String,
+      id: String,
+      placeholder: String,
+      name: String,
+      inputClass: {
+        type: [String, Object, Array],
+        required: false,
+        default: null
+      },
+      minLength: {
+        type: Number,
+        default: 0
+      },
+      debounce: {
+        type: Number,
+        required: false,
+        default: 250
+      },
 
-  const props = defineProps({
+      valueAttribute: String,
-    modelValue: String,
+      labelAttribute: String,
-    id: String,
+      keyAttribute: String,
-    placeholder: String,
+
-    name: String,
+      onGetOptions: Function,
-    inputClass: {
+      searchOptions: Array
-      type: [String, Object, Array],
-      required: false,
-      default: null
-    },
-    minLength: {
-      type: Number,
-      default: 0
-    },
-    debounce: {
-      type: Number,
-      required: false,
-      default: 250
     },
 
-    valueAttribute: String,
+    data() {
-    labelAttribute: String,
+      return {
-    keyAttribute: String,
+        options: [],
+        rawValue: "",
+        isListOpen: false,
+        activeListIndex: 0
+      }
+    },
 
-    onGetOptions: Function,
+    created() {
-    searchOptions: Array
+      this.rawValue = this.value;
-  });
 
-  const options = ref([]);
+    },
-  const rawValue = ref("");
-  const isListOpen = ref(false);
-  const activeListIndex = ref(0);
 
-  const finalInputClass = computed(() => {
+    watch: {
-    let cls = ['input'];
+      value(newValue) {
-    if (props.inputClass === null) {
+        this.rawValue = newValue;
-      return cls;
+      }
-    } else if (Array.isArray(props.inputClass)) {
+    },
-      return cls.concat(props.inputClass);
-    } else {
-      cls.push(props.inputClass);
-      return cls;
-    }
-  });
 
-  watch(
+    computed: {
-      () => props.modelValue,
+      finalInputClass() {
-      (newValue) => { rawValue.value = newValue; },
+        let cls = ['input'];
-      { immediate: true }
+        if (this.inputClass === null) {
-  );
+          return cls;
+        } else if (Array.isArray(this.inputClass)) {
+          return cls.concat(this.inputClass);
+        } else {
+          cls.push(this.inputClass);
+          return cls;
+        }
+      },
 
-  function optionClass(idx) {
+      debouncedUpdateOptions() {
-    return activeListIndex.value === idx ? 'option active' : 'option';
+        return debounce(this.updateOptions, this.debounce);
-  }
+      }
+    },
 
-  function optionClick(opt) {
+    methods: {
-    selectOption(opt);
+      optionClass(idx) {
-  }
+        return this.activeListIndex === idx ? 'option active' : 'option';
+      },
 
-  function optionKey(opt) {
+      optionClick(opt) {
-    if (props.keyAttribute) {
+        this.selectOption(opt);
-      return opt[props.keyAttribute]
+      },
-    } else if (props.valueAttribute) {
-      return opt[props.valueAttribute];
-    } else {
-      return opt.toString();
-    }
-  }
 
-  function optionValue(opt) {
+      optionKey(opt) {
-    if (props.valueAttribute) {
+        if (this.keyAttribute) {
-      return opt[props.valueAttribute];
+          return opt[this.keyAttribute]
-    } else {
+        } else if (this.valueAttribute) {
-      return opt.toString();
+          return opt[this.valueAttribute];
-    }
+        } else {
-  }
+          return opt.toString();
+        }
+      },
 
-  function optionLabel(opt) {
+      optionValue(opt) {
-    if (props.labelAttribute) {
+        if (this.valueAttribute) {
-      return opt[props.labelAttribute];
+          return opt[this.valueAttribute];
-    } else {
+        } else {
-      return null;
+          return opt.toString();
-    }
+        }
-  }
+      },
 
-  function optionMousemove(idx) {
+      optionLabel(opt) {
-    activeListIndex.value = idx;
+        if (this.labelAttribute) {
-  }
+          return opt[this.labelAttribute];
+        } else {
+          return null;
+        }
+      },
 
-  function clickHandler(evt) {
+      optionMousemove(idx) {
-    emit('inputClick', evt);
+        this.activeListIndex = idx;
-  }
+      },
 
-  function blurHandler(evt) {
+      clickHandler(evt) {
-    // blur fires before click.  If the blur was fired because the user clicked a list item, immediately hiding the list here
+        this.$emit("inputClick", evt);
-    // would prevent the click event from firing
+      },
-    setTimeout(() => {
-      isListOpen.value = false;
-    },250);
-  }
 
-  function inputHandler(evt) {
+      blurHandler(evt) {
-    const newValue = evt.target.value;
+        // blur fires before click.  If the blur was fired because the user clicked a list item, immediately hiding the list here
+        // would prevent the click event from firing
+        setTimeout(() => {
+          this.isListOpen = false;
+        },250);
+      },
 
-    if (rawValue.value !== newValue) {
+      inputHandler(evt) {
+        const newValue = evt.target.value;
 
-      rawValue.value = newValue;
+        if (this.rawValue !== newValue) {
 
-      emit("update:modelValue", newValue);
+          this.rawValue = newValue;
 
-      if (newValue.length >= Math.max(1, props.minLength)) {
+          this.$emit("input", newValue);
-        updateOptions(newValue);
+
-      } else {
+          if (newValue.length >= Math.max(1, this.minLength)) {
-        isListOpen.value = false;
+            this.debouncedUpdateOptions(newValue);
+          } else {
+            this.isListOpen = false;
+          }
+        }
+      },
+
+      keydownHandler(evt) {
+        if (this.isListOpen === false)
+          return;
+
+        switch (evt.key) {
+          case "ArrowUp":
+            evt.preventDefault();
+            this.activeListIndex = Math.max(0, this.activeListIndex - 1);
+            break;
+          case "ArrowDown":
+            evt.preventDefault();
+            this.activeListIndex = Math.min(this.options.length - 1, this.activeListIndex + 1);
+            break;
+          case "Enter":
+            evt.preventDefault();
+            this.selectOption(this.options[this.activeListIndex]);
+            break;
+          case "Escape":
+            evt.preventDefault();
+            this.isListOpen = false;
+            break;
+        }
+      },
+
+      selectOption(opt) {
+        this.rawValue = this.optionValue(opt);
+        this.$emit("input", this.rawValue);
+        this.$emit("optionSelected", opt);
+        this.isListOpen = false;
+      },
+
+      updateOptions(value) {
+        let p = null;
+        if (this.searchOptions) {
+          const reg = new RegExp("^" + value, "i");
+          const matcher = o => reg.test(this.optionValue(o));
+          p = Promise.resolve(this.searchOptions.filter(matcher));
+        } else {
+          p = this.onGetOptions(value)
+        }
+
+        p.then(opts => {
+          this.options = opts;
+          this.isListOpen = opts.length > 0;
+          this.activeListIndex = 0;
+        })
       }
     }
   }
 
-  function keydownHandler(evt) {
-    if (isListOpen.value === false)
-      return;
-
-    switch (evt.key) {
-      case "ArrowUp":
-        evt.preventDefault();
-        activeListIndex.value = Math.max(0, activeListIndex.value - 1);
-        break;
-      case "ArrowDown":
-        evt.preventDefault();
-        activeListIndex.value = Math.min(options.value.length - 1, activeListIndex.value + 1);
-        break;
-      case "Enter":
-        evt.preventDefault();
-        selectOption(options.value[activeListIndex.value]);
-        break;
-      case "Escape":
-        evt.preventDefault();
-        isListOpen.value = false;
-        break;
-    }
-  }
-
-  function selectOption(opt) {
-    rawValue.value = optionValue(opt);
-    emit("update:modelValue", rawValue.value);
-    emit("optionSelected", opt);
-    isListOpen.value = false;
-  }
-
-  const updateOptions = debounce(function(value) {
-    let p = null;
-    if (props.searchOptions) {
-      const reg = new RegExp("^" + value, "i");
-      const matcher = o => reg.test(optionValue(o));
-      p = Promise.resolve(props.searchOptions.filter(matcher));
-    } else {
-      p = props.onGetOptions(value)
-    }
-
-    p.then(opts => {
-      options.value = opts;
-      isListOpen.value = opts.length > 0;
-      activeListIndex.value = 0;
-    })
-  }, props.debounce);
-
 </script>
 
 <style lang="scss" scoped>
 
-  @use "bulma/sass/utilities" as bulma;
+  @import "../styles/variables";
 
   $labelLineHeight: 0.8rem;
 
   input.input {
     &::placeholder {
-      color: bulma.$grey-darker;
+      color: $grey-darker;
     }
   }
 
@@ -235,7 +251,7 @@
 
     &.active {
       color: white;
-      background-color: bulma.$turquoise;
+      background-color: $turquoise;
     }
 
     .opt_value {

app/javascript/components/AppConfirm.vue

@@ -1,45 +1,47 @@
 <template>
-  <app-modal :open="open" :title="title" @dismiss="runCancel">
+  <app-modal :open="open" :title="message" @dismiss="runCancel">
-    <p class="is-size-5">{{ message }}</p>
+    <div class="buttons">
-
+      <button type="button" class="button is-primary" @click="runConfirm">OK</button>
-    <template #footer>
+      <button type="button" class="button" @click="runCancel">Cancel</button>
-      <div class="buttons">
+    </div>
-        <button type="button" class="button is-primary" @click="runConfirm">OK</button>
-        <button type="button" class="button" @click="runCancel">Cancel</button>
-      </div>
-    </template>
   </app-modal>
 </template>
 
-<script setup>
+<script>
 
-const emit = defineEmits(["cancel", "confirm"]);
+  export default {
+    props: {
+      cancel: {
+        type: Function,
+        required: true
+      },
 
-const props = defineProps({
+      confirm: {
-  message: {
+        type: Function,
-    type: String,
+        required: true
-    required: false,
+      },
-    default: 'Are you sure?'
-  },
 
-  title: {
+      message: {
-    type: String,
+        type: String,
-    required: false,
+        required: false,
-    default: "Confirm"
+        default: 'Are you sure?'
-  },
+      },
 
-  open: {
+      open: {
-    type: Boolean,
+        type: Boolean,
-    required: true
+        required: true
+      }
+    },
+
+    methods: {
+      runConfirm() {
+        this.confirm();
+      },
+
+      runCancel() {
+        this.cancel();
+      }
+    }
   }
-});
-
-function runConfirm() {
-  emit("confirm");
-}
-
-function runCancel() {
-  emit("cancel");
-}
 
 </script>

app/javascript/components/AppDatePicker.vue

@@ -1,34 +1,38 @@
 <template>
-  <app-text-field :value="stringValue" @update:modelValue="input" :label="label" type="date"></app-text-field>
+  <app-text-field :value="stringValue" @input="input" :label="label" type="date"></app-text-field>
 </template>
 
-<script setup>
+<script>
 
-  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  const emit = defineEmits(["update:modelValue"]);
+  export default {
-  const props = defineProps({
+    props: {
-    modelValue: {
+      value: {
-      required: false,
+        required: false,
-      type: [Date, String]
+        type: [Date, String]
+      },
+
+      label: {
+        required: false,
+        type: String,
+        default: null
+      }
     },
 
-    label: {
+    computed: {
-      required: false,
+      stringValue() {
-      type: String,
+        const d = DateTimeUtils.toDate(this.value);
-      default: null
+        return DateTimeUtils.formatDateForEdit(d);
+      }
+    },
+
+    methods: {
+      input(val) {
+        let d = DateTimeUtils.toDate(val + " 00:00");
+        this.$emit("input", d);
+      }
     }
-  });
-
-  const stringValue = computed(() => {
-    const d = DateTimeUtils.toDate(props.modelValue);
-    return DateTimeUtils.formatDateForEdit(d);
-  });
-
-  function input(val) {
-    let d = DateTimeUtils.toDate(val + " 00:00");
-    emit("update:modelValue", d);
   }
 
 </script>

app/javascript/components/AppDateTime.vue

@@ -5,49 +5,57 @@
   </span>
 </template>
 
-<script setup>
+<script>
 
-  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  const props = defineProps({
+  export default {
-    dateTime: {
+    props: {
-      required: true,
+      dateTime: {
-      type: [Date, String]
+        required: true,
+        type: [Date, String]
+      },
+
+      showDate: {
+        required: false,
+        type: Boolean,
+        default: true
+      },
+
+      showTime: {
+        required: false,
+        type: Boolean,
+        default: true
+      },
+
+      useInput: {
+        required: false,
+        type: Boolean,
+        default: false
+      }
     },
 
-    showDate: {
+    computed: {
-      required: false,
+      dateObj() {
-      type: Boolean,
+        return DateTimeUtils.toDate(this.dateTime);
-      default: true
+      },
-    },
 
-    showTime: {
+      friendlyString() {
-      required: false,
+        const parts = [];
-      type: Boolean,
+        if (this.showDate) {
-      default: true
+          parts.push(DateTimeUtils.formatDate(this.dateObj));
-    },
+        }
+        if (this.showTime) {
+          parts.push(DateTimeUtils.formatTime(this.dateObj, true));
+        }
+        return parts.join(" ");
+      },
 
-    useInput: {
+      fullString() {
-      required: false,
+        return DateTimeUtils.formatTimestamp(this.dateObj);
-      type: Boolean,
+      }
-      default: false
     }
-  });
+  }
-
-  const dateObj = computed(() => DateTimeUtils.toDate(props.dateTime));
-  const fullString = computed(() => DateTimeUtils.formatTimestamp(dateObj.value));
-
-  const friendlyString = computed(() => {
-    const parts = [];
-    if (props.showDate) {
-      parts.push(DateTimeUtils.formatDate(dateObj.value));
-    }
-    if (props.showTime) {
-      parts.push(DateTimeUtils.formatTime(dateObj.value, true));
-    }
-    return parts.join(" ");
-  });
 
 </script>
 

app/javascript/components/AppDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="dropdown" class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
+  <div class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
     <div class="dropdown-trigger">
       <slot name="button">
         <button type="button" class="button" :class="buttonClass" @click="toggle">
@@ -19,63 +19,67 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-import { useTemplateRef } from "vue";
+  export default {
-import { onClickOutside } from '@vueuse/core'
+    props: {
+      open: {
+        required: false,
+        type: Boolean,
+        default: false
+      },
 
-const emit = defineEmits(["close", "open"]);
+      hover: {
-const props = defineProps({
+        required: false,
-  open: {
+        type: Boolean,
-    required: false,
+        default: false
-    type: Boolean,
+      },
-    default: false
-  },
 
-  hover: {
+      label: {
-    required: false,
+        required: false,
-    type: Boolean,
+        type: String,
-    default: false
+        default: 'Select'
-  },
+      },
 
-  label: {
+      buttonClass: {
-    required: false,
+        required: false,
-    type: String,
+        default: ""
-    default: 'Select'
+      }
-  },
+    },
 
-  buttonClass: {
+    methods: {
-    required: false,
+      toggle() {
-    default: ""
+        if (this.open) {
-  }
+          this.triggerClose();
-});
+        } else {
+          this.triggerOpen();
+        }
+      },
 
-const dropdownElement = useTemplateRef("dropdown");
+      triggerOpen() {
+        this.$emit("open");
+      },
 
-onClickOutside(dropdownElement, event => handleOutsideClick(event))
+      triggerClose() {
+        this.$emit("close");
+      },
 
-function toggle() {
+      handleOutsideClick(evt) {
-  if (props.open) {
+        if (this.open) {
-    triggerClose();
+          if (!this.$el.contains(evt.target)) {
-  } else {
+            this.triggerClose();
-    triggerOpen();
+          }
-  }
+        }
-}
+      }
+    },
 
-function triggerOpen() {
+    mounted() {
-  emit("open");
+      document.addEventListener("click", this.handleOutsideClick);
-}
+    },
 
-function triggerClose() {
+    beforeDestroy() {
-  emit("close");
+      document.removeEventListener("click", this.handleOutsideClick);
-}
-
-function handleOutsideClick(evt) {
-  if (props.open) {
-    if (!dropdownElement.value.contains(evt.target)) {
-      triggerClose();
     }
   }
-}
 
 </script>

app/javascript/components/AppExpandTransition.vue

@@ -9,87 +9,92 @@
   </transition>
 </template>
 
-<script setup>
+<script>
 
   import TWEEN from '@tweenjs/tween.js';
-  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
 
-  const props = defineProps({
+  export default {
-    expandTime: {
+    props: {
-      type: Number,
+      expandTime: {
-      default: 250
+        type: Number,
+        default: 250
+      }
+    },
+
+    data() {
+      return {
+        animation: null
+      }
+    },
+
+    methods: {
+      cancel () {
+        if (this.animation) {
+          this.animation.stop();
+          this.animation = null;
+        }
+      },
+
+      enter(element, done) {
+        const width = parseInt(getComputedStyle(element).width);
+        const paddingTop = parseInt(getComputedStyle(element).paddingTop);
+        const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
+
+        element.style.width = width;
+        element.style.position = 'absolute';
+        element.style.visibility = 'hidden';
+        element.style.height = 'auto';
+
+        const height = parseInt(getComputedStyle(element).height);
+
+        element.style.width = null;
+        element.style.position = null;
+        element.style.visibility = null;
+        element.style.overflow = 'hidden';
+        element.style.height = 0;
+
+        this.animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
+          .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, this.expandTime)
+          .onUpdate(obj => {
+            element.style.height = obj.height + "px";
+            element.style.paddingBottom = obj.paddingBottom + "px";
+            element.style.paddingTop = obj.paddingTop + "px";
+          })
+          .onComplete(() => {
+            this.animation = null;
+            element.removeAttribute('style');
+            element.style.opacity = 0.99;
+            setTimeout(() => {
+              // Fixes odd drawing bug in Chrome
+              element.style.opacity = 1.0;
+            }, 1000);
+            done();
+          })
+          .start();
+      },
+
+      leave(element, done) {
+        const height = parseInt(getComputedStyle(element).height);
+        const paddingTop = parseInt(getComputedStyle(element).paddingTop);
+        const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
+
+        element.style.overflow = 'hidden';
+
+        this.animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
+          .to({height: 0, paddingTop: 0, paddingBottom: 0}, this.expandTime)
+          .onUpdate(obj => {
+            element.style.height = obj.height + "px";
+            element.style.paddingBottom = obj.paddingBottom + "px";
+            element.style.paddingTop = obj.paddingTop + "px";
+          })
+          .onComplete(() => {
+            this.animation = null;
+            element.removeAttribute('style');
+            done();
+          })
+          .start();
+      }
     }
-  });
-
-  let animation = null;
-
-  function cancel () {
-    if (animation) {
-      animation.stop();
-      animation = null;
-    }
-  }
-
-  function enter(element, done) {
-    const width = parseInt(getComputedStyle(element).width);
-    const paddingTop = parseInt(getComputedStyle(element).paddingTop);
-    const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
-
-    element.style.width = width;
-    element.style.position = 'absolute';
-    element.style.visibility = 'hidden';
-    element.style.height = 'auto';
-
-    const height = parseInt(getComputedStyle(element).height);
-
-    element.style.width = null;
-    element.style.position = null;
-    element.style.visibility = null;
-    element.style.overflow = 'hidden';
-    element.style.height = 0;
-
-    animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
-        .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, props.expandTime)
-        .onUpdate(obj => {
-          element.style.height = obj.height + "px";
-          element.style.paddingBottom = obj.paddingBottom + "px";
-          element.style.paddingTop = obj.paddingTop + "px";
-        })
-        .onComplete(() => {
-          animation = null;
-          element.removeAttribute('style');
-          element.style.opacity = 0.99;
-          setTimeout(() => {
-            // Fixes odd drawing bug in Chrome
-            element.style.opacity = 1.0;
-          }, 1000);
-          done();
-        })
-        .group(useGlobalTweenGroup())
-        .start();
-  }
-
-  function leave(element, done) {
-    const height = parseInt(getComputedStyle(element).height);
-    const paddingTop = parseInt(getComputedStyle(element).paddingTop);
-    const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
-
-    element.style.overflow = 'hidden';
-
-    animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
-        .to({height: 0, paddingTop: 0, paddingBottom: 0}, props.expandTime)
-        .onUpdate(obj => {
-          element.style.height = obj.height + "px";
-          element.style.paddingBottom = obj.paddingBottom + "px";
-          element.style.paddingTop = obj.paddingTop + "px";
-        })
-        .onComplete(() => {
-          animation = null;
-          element.removeAttribute('style');
-          done();
-        })
-        .group(useGlobalTweenGroup())
-        .start();
   }
 
 </script>

app/javascript/components/AppIcon.vue

@@ -6,8 +6,6 @@
 
 <script>
 
-  import { computed } from "vue";
-
   class IconData {
     constructor(iconicIcon, dataAttributes) {
       this.iconicIcon = iconicIcon;
@@ -51,7 +49,6 @@
   };
 
   export default {
-    emits: ["click"],
     props: {
       icon: {
         validator: (i) => iconMap[i] !== undefined
@@ -69,21 +66,38 @@
       }
     },
 
-    setup(props) {
+    data() {
-      const iconData = computed(() => iconMap[props.icon]);
-      const sizeData = computed(() => sizeMap[props.size]);
-      const iconClasses = computed(() => [sizeData.value.bulmaIconClass, sizeData.value.customIconClass]);
-      const iconicSize = computed(() => sizeData.value.iconicSize);
-      const iconicIcon = computed(() => iconData.value.iconicIcon);
-      const iconicAttributes = computed(() => iconData.value.dataAttributes);
-
       return {
-        iconClasses,
+        injectedSvg: null
-        iconData,
+      }
-        sizeData,
+    },
-        iconicAttributes,
+
-        iconicIcon,
+    computed: {
-        iconicSize
+      iconData() {
+        return iconMap[this.icon];
+      },
+
+      sizeData() {
+        return sizeMap[this.size];
+      },
+
+      iconClasses() {
+        return [
+          this.sizeData.bulmaIconClass,
+          this.sizeData.customIconClass
+        ]
+      },
+
+      iconicSize() {
+        return this.sizeData.iconicSize;
+      },
+
+      iconicIcon() {
+        return this.iconData.iconicIcon;
+      },
+
+      iconicAttributes() {
+        return this.iconData.dataAttributes;
       }
     }
   }

app/javascript/components/AppIconicIcon.vue

@@ -1,11 +1,9 @@
 <template>
-  <svg ref="svg" v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
+  <svg v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
 </template>
 
 <script>
 
-  import { computed, nextTick, onMounted, onUpdated, useTemplateRef } from "vue";
-
   import Caret from "../iconic/svg/smart/caret";
   import Check from "../iconic/svg/smart/check";
   import CircleCheck from "../iconic/svg/smart/circle-check";
@@ -70,15 +68,29 @@
       }
     },
 
-    setup(props) {
+    data() {
-      const svgElement = useTemplateRef("svg");
+      return {
-      const svgData = computed(() => iconMap[props.icon]);
+        calculatedClasses: []
-      const svgAttributes = computed(() => svgData.value.attributes);
+      }
-      const svgName = computed(() => svgAttributes.value['data-icon']);
+    },
-      const svgContent = computed(() => {
-        let content = String(svgData.value.content);
 
-        for (let idRep of svgData.value.idReplacements) {
+    computed: {
+      svgData() {
+        return iconMap[this.icon];
+      },
+
+      svgAttributes() {
+        return this.svgData.attributes;
+      },
+
+      svgName() {
+        return this.svgAttributes['data-icon'];
+      },
+
+      svgContent() {
+        let content = String(this.svgData.content);
+
+        for (let idRep of this.svgData.idReplacements) {
           let newId = `__new_id_${globalIdCounter}`;
           globalIdCounter += 1;
 
@@ -86,70 +98,57 @@
         }
 
         return content;
-      });
-
-      const calculatedClasses = computed(() => {
-        const classes = (svgAttributes.value.class || "").split(" ");
-
-        classes.push(`iconic-${props.size}`);
-
-        if (props.iconSizeOverride) {
-          classes.push(`iconic-icon-${props.iconSizeOverride}`);
-        }
-
-        if (props.displaySizeOverride) {
-          classes.push(`iconic-size-${props.displaySizeOverride}`);
-        }
-
-        return classes;
-      });
-
-      function ensureSvgApi(name, scripts) {
-        if (!name) { return; }
-        if (LOADED_APIS[name] !== true) {
-          for (let sb of scripts) {
-            try {
-              new Function(sb)(window);
-            } catch (e) {
-              console.log(sb);
-              console.log(e);
-            }
-          }
-          LOADED_APIS[name] = true;
-        }
       }
+    },
 
-      function setupSvgApi(name) {
+    methods: {
+
+      rebind() {
         const apis = APIS;
-        if (apis && apis[name]) {
+
-          const iconApi = apis[name](svgElement.value);
+        if (apis && this.svgName && apis[this.svgName]) {
-          for (let func in iconApi) svgElement.value[func] = iconApi[func]
+          const iconApi = apis[this.svgName](this.$el);
+          for (let func in iconApi) this.$el[func] = iconApi[func]
         } else {
-          svgElement.value.update = function() {}
+          this.$el.update = function() {}
         }
-        svgElement.value.update();
+
+        this.calculatedClasses = (this.svgAttributes.class || "").split(" ");
+
+        this.calculatedClasses.push(`iconic-${this.size}`);
+
+        if (this.iconSizeOverride) {
+          this.calculatedClasses.push(`iconic-icon-${this.iconSizeOverride}`);
+        }
+
+        if (this.displaySizeOverride) {
+          this.calculatedClasses.push(`iconic-size-${this.displaySizeOverride}`);
+        }
+
+        this.$el.update();
       }
+    },
 
-      function updateScripts() {
+    created() {
-        ensureSvgApi(svgName.value, svgData.value.scriptBlocks);
+      if (LOADED_APIS[this.svgName] !== true) {
-        setupSvgApi(svgName.value);
+        for (let sb of this.svgData.scriptBlocks) {
+          new Function(sb)(window);
+        }
+        LOADED_APIS[this.svgName] = true;
       }
+    },
 
-      onMounted(() => {
+    mounted() {
-        updateScripts();
-      });
 
-      onUpdated(() => {
+      this.$watch(
-        updateScripts();
+        function() { return [this.$attrs, this.icon, this.fluid] },
-      });
+        function() {
-
+          this.rebind()
-      return {
+        },
-        svgData,
+        {
-        svgAttributes,
+          immediate: true
-        svgName,
+        }
-        svgContent,
+      );
-        calculatedClasses
-      };
     }
   }
   

app/javascript/components/AppLoading.vue

@@ -4,7 +4,10 @@
   </div>
 </template>
 
-<script setup>
+<script>
+  export default {
+
+  }
 </script>
 
 <style lang="scss" scoped>

app/javascript/components/AppModal.vue

@@ -1,6 +1,6 @@
 <template>
-  <Teleport to="body">
+  <div ref="container">
-    <div :class="['modal', { 'is-wide': wide, 'is-active': open && error === null }]">
+    <div ref="modal" :class="['popup', 'modal', { 'is-wide': wide, 'is-active': open && error === null }]">
       <div class="modal-background" @click="close"></div>
       <div class="modal-card">
         <header class="modal-card-head">
@@ -13,40 +13,50 @@
         <section class="modal-card-body">
           <slot></slot>
         </section>
-
-        <footer class="modal-card-foot">
-          <slot name="footer">
-          </slot>
-        </footer>
       </div>
     </div>
-  </Teleport>
+  </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed } from "vue";
+  import { mapState } from "vuex";
-  import { useAppConfigStore } from "../stores/appConfig";
 
-  const emit = defineEmits(["dismiss"]);
+  export default {
-
+    props: {
-  const props = defineProps({
+      open: {
-    open: {
+        type: Boolean,
-      type: Boolean,
+        default: false
-      default: false
+      },
+      title: String,
+      wide: {
+        type: Boolean,
+        default: false
+      }
     },
-    title: String,
+
-    wide: {
+    mounted() {
-      type: Boolean,
+      this.$root.$el.appendChild(this.$refs.modal);
-      default: false
+    },
+
+    beforeDestroy() {
+      this.$refs.container.appendChild(this.$refs.modal);
+    },
+
+    computed: {
+      ...mapState([
+        'error'
+      ])
+    },
+
+    methods: {
+      close() {
+        this.$emit("dismiss");
+      }
+    },
+
+    components: {
     }
-  });
-
-  const appConfig = useAppConfigStore();
-  const error = computed(() => appConfig.error);
-
-  function close() {
-    emit("dismiss");
   }
 
 </script>

app/javascript/components/AppNavbar.vue

@@ -51,27 +51,46 @@
   </nav>
 </template>
 
-<script setup>
+<script>
 
-  import { ref, watch } from "vue";
   import UserLogin from "./UserLogin";
-  import { storeToRefs } from "pinia";
+  import { mapState } from "vuex";
-  import { useAppConfigStore } from "../stores/appConfig";
   import { swUpdate } from "../lib/ServiceWorker";
-  import { useRoute } from "vue-router";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const menuActive = ref(false);
+    data() {
-  const route = useRoute();
+      return {
-  const { isAdmin, isLoggedIn, updateAvailable, user } = storeToRefs(appConfig);
+        menuActive: false
+      };
+    },
 
-  function updateApp() {
+    computed: {
-    swUpdate();
+      ...mapState([
+        'route',
+        'user',
+        'updateAvailable'
+      ])
+    },
+
+    methods: {
+      updateApp() {
+        swUpdate();
+      }
+    },
+
+    watch: {
+      route() {
+        this.menuActive = false;
+      },
+
+      user() {
+        this.menuActive = false;
+      }
+    },
+
+    components: {
+      UserLogin
+    }
   }
 
-  watch(
-      () => [route, appConfig.user],
-      () => menuActive.value = false
-  );
-
 </script>

app/javascript/components/AppPager.vue

@@ -1,7 +1,7 @@
 <template>
   <nav v-show="totalPages > 1 || showWithSinglePage" class="pagination" role="navigation" :aria-label="pagedItemName + ' page navigation'">
-    <a :class="{'pagination-previous': true, 'is-disabled': isFirstPage}" :title="isFirstPage ? 'This is the first page' : ''" @click.prevent="changePage(currentPage - 1)">Previous</a>
+    <a class="pagination-previous" :title="isFirstPage ? 'This is the first page' : ''" :disabled="isFirstPage" @click.prevent="changePage(currentPage - 1)">Previous</a>
-    <a :class="{'pagination-next': true, 'is-disabled': isLastPage}" :title="isLastPage ? 'This is the last page' : ''" @click.prevent="changePage(currentPage + 1)">Next page</a>
+    <a class="pagination-next" :title="isLastPage ? 'This is the last page' : ''" :disabled="isLastPage" @click.prevent="changePage(currentPage + 1)">Next page</a>
     <ul class="pagination-list">
       <li v-for="page in pageItems" :key="page">
         <a v-if="page > 0" class="pagination-link" :class="{'is-current': page === currentPage}" href="#" @click.prevent="changePage(page)">{{page}}</a>
@@ -11,81 +11,96 @@
   </nav>
 </template>
 
-<script setup>
+<script>
 
-import { computed } from "vue";
+  export default {
+    props: {
+      pagedItemName: {
+        required: false,
+        type: String,
+        default: ''
+      },
 
-const emit = defineEmits(["changePage"]);
+      currentPage: {
+        required: true,
+        type: Number
+      },
 
-const props = defineProps({
+      totalPages: {
-  pagedItemName: {
+        required: true,
-    required: false,
+        type: Number
-    type: String,
+      },
-    default: ''
-  },
 
-  currentPage: {
+      pageWindow: {
-    required: true,
+        required: false,
-    type: Number
+        type: Number,
-  },
+        default: 4
+      },
 
-  totalPages: {
+      pageOuterWindow: {
-    required: true,
+        required: false,
-    type: Number
+        type: Number,
-  },
+        default: 1
+      },
 
-  pageWindow: {
+      showWithSinglePage: {
-    required: false,
+        required: false,
-    type: Number,
+        type: Boolean,
-    default: 4
+        default: false
-  },
+      }
+    },
 
-  pageOuterWindow: {
+    computed: {
-    required: false,
+      pageItems() {
-    type: Number,
+        const items = new Set();
-    default: 1
-  },
 
-  showWithSinglePage: {
+        for (let x = 0; x < this.pageOuterWindow; x++) {
-    required: false,
+          items.add(x + 1);
-    type: Boolean,
+          items.add(this.totalPages - x);
-    default: false
+        }
-  }
-});
 
-const pageItems = computed(() => {
+        const start = this.currentPage - Math.ceil(this.pageWindow / 2);
-  const items = new Set();
+        const end = this.currentPage + Math.floor(this.pageWindow / 2);
 
-  for (let x = 0; x < props.pageOuterWindow; x++) {
+        for (let x = start; x <= end; x++) {
-    items.add(x + 1);
+          items.add(x);
-    items.add(props.totalPages - x);
+        }
-  }
 
-  const start = props.currentPage - Math.ceil(props.pageWindow / 2);
+        let emptySpace = -1;
-  const end = props.currentPage + Math.floor(props.pageWindow / 2);
+        const finalList = [];
 
-  for (let x = start; x <= end; x++) {
+        [...items.values()].filter(p => p > 0 && p <= this.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
-    items.add(x);
+          finalList.push(p);
-  }
+          if (list[idx + 1] && list[idx + 1] !== p + 1) {
+            finalList.push(emptySpace--);
+          }
+        });
 
-  let emptySpace = -1;
+        return finalList;
-  const finalList = [];
+      },
 
-  [...items.values()].filter(p => p > 0 && p <= props.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
+      isLastPage() {
-    finalList.push(p);
+        return this.currentPage === this.totalPages;
-    if (list[idx + 1] && list[idx + 1] !== p + 1) {
+      },
-      finalList.push(emptySpace--);
+
+      isFirstPage() {
+        return this.currentPage === 1;
+      }
+    },
+
+    methods: {
+      changePage(idx) {
+        this.$emit("changePage", idx);
+      }
     }
-  });
+  }
-
-  return finalList;
-});
-
-const isLastPage = computed(() => props.currentPage === props.totalPages);
-const isFirstPage = computed(() => props.currentPage === 1);
-
-function changePage(idx) {
-  emit("changePage", idx);
-}
 
 </script>
+
+<style lang="scss" scoped>
+
+  ul.pagination {
+
+  }
+
+</style>

app/javascript/components/AppProgressBar.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="progress-bar" :style="progressStyle"></div>
-</template>
-
-<script setup>
-
-import { computed, ref, watch } from "vue";
-import { useAppConfigStore } from "../stores/appConfig";
-import TWEEN from '@tweenjs/tween.js';
-import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
-
-const appConfig = useAppConfigStore();
-
-const showProgress = ref(false);
-const loadingPercent = ref(0);
-let animation = null;
-
-const progressStyle = computed(() => {
-  return {
-    opacity: showProgress.value ? "1" : "0",
-    width: `${loadingPercent.value}%`,
-    height: "4px"
-  };
-});
-
-watch(() => appConfig.isLoading, val => {
-  if (val) {
-    start();
-  } else {
-    stop();
-  }
-});
-
-function start() {
-  if (!animation) {
-    showProgress.value = true;
-    animation = new TWEEN.Tween({ percent: 0 }, useGlobalTweenGroup())
-        .to({ percent: 90 })
-        .easing(TWEEN.Easing.Quartic.Out)
-        .duration(3000)
-        .onUpdate(({ percent }) => { loadingPercent.value = percent; })
-        .onComplete(({ percent }) => {})
-        .start();
-  }
-}
-
-function stop() {
-  if (animation) {
-    showProgress.value = false;
-    animation.stop();
-    animation = null;
-  }
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-  @use "bulma/sass/utilities" as bulma;
-
-  .progress-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999999;
-    background-color: bulma.$blue;
-    transition: width 0.1s, opacity 0.3s;
-  }
-</style>

app/javascript/components/AppRating.vue

@@ -9,91 +9,103 @@
   </span>
 </template>
 
-<script setup>
+<script>
 
-import { computed, ref, useTemplateRef } from "vue";
 
-const emit = defineEmits(["update:modelValue"]);
+  export default {
+    props: {
+      starCount: {
+        required: false,
+        type: Number,
+        default: 5
+      },
 
-const props = defineProps({
+      readonly: {
-  starCount: {
+        required: false,
-    required: false,
+        type: Boolean,
-    type: Number,
+        default: false
-    default: 5
+      },
-  },
 
-  readonly: {
+      step: {
-    required: false,
+        required: false,
-    type: Boolean,
+        type: Number,
-    default: false
+        default: 0.5
-  },
+      },
 
-  step: {
+      value: {
-    required: false,
+        required: false,
-    type: Number,
+        type: Number,
-    default: 0.5
+        default: 0
-  },
+      }
+    },
 
-  modelValue: {
+    data() {
-    required: false,
+      return {
-    type: Number,
+        temporaryValue: null
-    default: 0
+      };
+    },
+
+    computed: {
+      ratingPercent() {
+        return ((this.value || 0) / this.starCount) * 100.0;
+      },
+
+      temporaryPercent() {
+        if (this.temporaryValue !== null) {
+          return (this.temporaryValue / this.starCount) * 100.0;
+        } else {
+          return null;
+        }
+      },
+
+      filledStyle() {
+        const width = this.temporaryPercent || this.ratingPercent;
+        return {
+          width: width + "%"
+        };
+      }
+    },
+
+    methods: {
+      handleClick(evt) {
+        if (this.temporaryValue !== null) {
+          this.$emit("input", this.temporaryValue);
+        }
+      },
+
+      handleMousemove(evt) {
+        if (this.readonly) {
+          return;
+        }
+
+        const wrapperBox = this.$refs.wrapper.getBoundingClientRect();
+        const wrapperWidth = wrapperBox.right - wrapperBox.left;
+        const mousePosition = evt.clientX;
+
+        if (mousePosition > wrapperBox.left && mousePosition < wrapperBox.right) {
+          const filledRatio = ((mousePosition - wrapperBox.left) / wrapperWidth);
+
+          const totalSteps = this.starCount / this.step;
+          const filledSteps = Math.round(totalSteps * filledRatio);
+
+          this.temporaryValue = filledSteps * this.step;
+        }
+      },
+
+      handleMouseleave(evt) {
+        this.temporaryValue = null;
+      }
+    },
+
+    components: {
+    }
   }
-});
-
-const temporaryValue = ref(null);
-const ratingPercent = computed(() => ((props.modelValue || 0) / props.starCount) * 100.0);
-const wrapperEl = useTemplateRef("wrapper");
-
-const temporaryPercent = computed(() => {
-  if (temporaryValue.value !== null) {
-    return (temporaryValue.value / props.starCount) * 100.0;
-  } else {
-    return null;
-  }
-});
-
-const filledStyle = computed(() => {
-  const width = temporaryPercent.value || ratingPercent.value;
-  return {
-    width: width + "%"
-  };
-});
-
-function handleClick(evt) {
-  if (temporaryValue.value !== null) {
-    emit("update:modelValue", temporaryValue.value);
-  }
-}
-
-function handleMousemove(evt) {
-  if (props.readonly) {
-    return;
-  }
-
-  const wrapperBox = wrapperEl.value.getBoundingClientRect();
-  const wrapperWidth = wrapperBox.right - wrapperBox.left;
-  const mousePosition = evt.clientX;
-
-  if (mousePosition > wrapperBox.left && mousePosition < wrapperBox.right) {
-    const filledRatio = ((mousePosition - wrapperBox.left) / wrapperWidth);
-
-    const totalSteps = props.starCount / props.step;
-    const filledSteps = Math.round(totalSteps * filledRatio);
-
-    temporaryValue.value = filledSteps * props.step;
-  }
-}
-
-function handleMouseleave(evt) {
-  temporaryValue.value = null;
-}
 
 </script>
 
 <style lang="scss" scoped>
 
-  @use "bulma/sass/utilities" as bulma;
+  @import "../styles/variables";
 
   span.rating {
     position: relative;
@@ -113,7 +125,7 @@ function handleMouseleave(evt) {
     }
 
     .filled-set {
-      color: bulma.$yellow;
+      color: $yellow;
       position: absolute;
       top: 0;
       left: 0;

app/javascript/components/AppSearchText.vue

@@ -6,45 +6,61 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-import { ref } from "vue";
 import debounce from "lodash/debounce";
 
-const emit = defineEmits(["update:modelValue"]);
+export default {
+  props: {
+    placeholder: {
+      required: false,
+      type: String,
+      default: ""
+    },
 
-const props = defineProps({
+    value: {
-  placeholder: {
+      required: false,
-    required: false,
+      type: String,
-    type: String,
+      default: ""
-    default: ""
+    }
   },
 
-  modelValue: {
+  data() {
-    required: false,
+    return {
-    type: String,
+      text: null
-    default: ""
+    };
-  }
+  },
-});
 
-const text = ref(null);
+  computed: {
 
-const triggerInput = debounce(function() {
+  },
-      emit("update:modelValue", text.value);
+
+  methods: {
+    triggerInput: debounce(function() {
+      this.$emit("input", this.text);
+    }, 250, {leading: false, trailing: true}),
+
+    userUpdateText(text) {
+      if (this.text !== text) {
+        this.text = text;
+        this.triggerInput();
+      }
     },
-    250,
-    { leading: false, trailing: true })
 
-function userUpdateText(newText) {
+    propUpdateText(text) {
-  if (text.value !== newText) {
+      if (this.text === null && this.text !== text) {
-    text.value = newText;
+        this.text = text;
-    triggerInput();
+      }
-  }
+    }
-}
+  },
 
-function propUpdateText(newText) {
+  created() {
-  if (text.value === null && text.value !== newText) {
+    this.$watch("value",
-    text.value = newText;
+      val => this.propUpdateText(val),
+      {
+        immediate: true
+      }
+    );
   }
 }
 

app/javascript/components/AppTagEditor.vue

@@ -2,71 +2,84 @@
   <div class="tag-editor control">
     <input ref="input" type="text" class="input" :value="tagText" @input="inputHandler" @focus="getFocus" @blur="loseFocus">
     <div class="tags">
-      <span v-for="t in modelValue" :key="t" class="tag">{{t}}</span>
+      <span v-for="t in value" :key="t" class="tag">{{t}}</span>
     </div>
   </div>
 </template>
 
-<script setup>
+<script>
 
-import {computed, nextTick, ref, useTemplateRef} from "vue";
+  export default {
+    props: {
+      value: {
+        required: true,
+        type: Array
+      }
+    },
 
-const emit = defineEmits(["update:modelValue"]);
+    data() {
+      return {
+        hasFocus: false
+      };
+    },
 
-const props = defineProps({
+    computed: {
-  modelValue: {
+      tagText() {
-    required: true,
+        return this.value.join(" ");
-    type: Array
+      }
-  }
+    },
-});
 
-const hasFocus = ref(false);
+    watch: {
-const tagText = computed(() => props.modelValue.join(" "));
+    },
-const inputElement = useTemplateRef("input");
 
-function inputHandler(el) {
+    methods: {
-  let str = el.target.value;
+      inputHandler(el) {
-  checkInput(str);
+        let str = el.target.value;
-  nextTick(() => {
+        this.checkInput(str);
-    el.target.value = str;
+        this.$nextTick(() => {
-  });
+          el.target.value = str;
-}
+        });
+      },
 
-function checkInput(str) {
+      checkInput(str) {
-  if (hasFocus.value) {
+        if (this.hasFocus) {
-    const m = str.match(/\S\s+\S*$/);
+          const m = str.match(/\S\s+\S*$/);
 
-    if (m !== null) {
+          if (m !== null) {
-      str = str.substring(0, m.index + 1);
+            str = str.substring(0, m.index + 1);
-    } else {
+          } else {
-      str = "";
+            str = "";
+          }
+        }
+
+        const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
+
+        if (!this.arraysEqual(newTags, this.value)) {
+          this.$emit("input", newTags);
+        }
+      },
+
+      getFocus() {
+        this.hasFocus = true;
+      },
+
+      loseFocus() {
+        this.hasFocus = false;
+        this.checkInput(this.$refs.input.value);
+
+      },
+
+      arraysEqual(arr1, arr2) {
+        if(arr1.length !== arr2.length)
+          return false;
+        for(let i = arr1.length; i--;) {
+          if(arr1[i] !== arr2[i])
+            return false;
+        }
+
+        return true;
+      }
     }
   }
 
-  const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
-
-  if (!arraysEqual(newTags, props.modelValue)) {
-    emit("update:modelValue", newTags);
-  }
-}
-
-function getFocus() {
-  hasFocus.value = true;
-}
-
-function loseFocus() {
-  hasFocus.value = false;
-  checkInput(inputElement.value.value);
-}
-
-function arraysEqual(arr1, arr2) {
-  if(arr1.length !== arr2.length)
-    return false;
-  for(let i = arr1.length; i--;) {
-    if(arr1[i] !== arr2[i])
-      return false;
-  }
-
-  return true;
-}
 </script>

app/javascript/components/AppTextField.vue

@@ -2,8 +2,8 @@
   <div class="field">
     <label v-if="label.length" class="label is-small-mobile">{{ label }}</label>
     <div :class="controlClasses">
-      <textarea v-if="isTextarea" :class="inputClasses" v-model="model" :disabled="disabled"></textarea>
+      <textarea v-if="isTextarea" :class="inputClasses" :value="value" @input="input" :disabled="disabled"></textarea>
-      <input v-else :type="type" :class="inputClasses" v-model="model" :disabled="disabled">
+      <input v-else :type="type" :class="inputClasses" :value="value" @input="input" :disabled="disabled">
       <app-icon class="is-right" icon="warning" v-if="validationError !== null"></app-icon>
     </div>
     <p v-if="helpMessage !== null" :class="helpClasses">
@@ -12,67 +12,81 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-import { computed } from "vue";
+  export default {
+    props: {
+      label: {
+        required: false,
+        type: String,
+        default: ""
+      },
+      value: {
+        required: false,
+        type: [String, Number],
+        default: ""
+      },
+      type: {
+        required: false,
+        type: String,
+        default: "text"
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      validationError: {
+        required: false,
+        type: String,
+        default: null
+      }
+    },
 
-const props = defineProps({
+    computed: {
-  label: {
+      isTextarea() {
-    required: false,
+        return this.type === "textarea";
-    type: String,
+      },
-    default: ""
-  },
-  modelValue: {
-    required: false,
-    type: [String, Number],
-    default: ""
-  },
-  type: {
-    required: false,
-    type: String,
-    default: "text"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  validationError: {
-    required: false,
-    type: String,
-    default: null
-  }
-});
 
-const model = defineModel({
+      controlClasses() {
-  type: [String, Number],
+        return [
-  default: ""
+          "control",
-});
+          {
+            "has-icons-right": this.validationError !== null
+          }
+        ]
+      },
 
-const isTextarea = computed(() => props.type === "textarea");
+      inputClasses() {
-const controlClasses = computed(() => [
+        return [
-    "control",
+          "is-small-mobile",
-    {
+          {
-      "has-icons-right": props.validationError !== null
+            "textarea": this.isTextarea,
+            "input": !this.isTextarea,
+            "is-danger": this.validationError !== null
+          }
+        ]
+      },
+
+      helpMessage() {
+        return this.validationError;
+      },
+
+      helpClasses() {
+        return [
+          "help",
+          {
+            "is-danger": this.validationError !== null
+          }
+        ];
+      }
+    },
+
+    methods: {
+      input(evt) {
+        this.$emit("input", evt.target.value);
+      }
     }
-  ]);
-
-const inputClasses = computed(() =>[
-    "is-small-mobile",
-    {
-      "textarea": isTextarea.value,
-      "input": !isTextarea.value,
-      "is-danger": props.validationError !== null
-    }
-  ]);
-
-const helpMessage = computed(() => props.validationError);
-const helpClasses = computed(() => [
-  "help",
-  {
-    "is-danger": props.validationError !== null
   }
-]);
-
 
 </script>
 

app/javascript/components/AppValidationErrors.vue

@@ -6,14 +6,16 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-const props = defineProps({
+  export default {
-  errors: {
+    props: {
-    required: false,
+      errors: {
-    type: Object,
+        required: false,
-    default: {}
+        type: Object,
+        default: {}
+      }
+    }
   }
-});
 
 </script>

app/javascript/components/FoodEdit.vue

@@ -62,14 +62,11 @@
             <button class="button" type="button" @click="addUnit">Add Unit</button>
 
             <table class="table">
-              <thead>
               <tr>
                 <th>Name</th>
                 <th>Grams</th>
                 <th></th>
               </tr>
-              </thead>
-              <tbody>
               <tr v-for="unit in visibleFoodUnits" :key="unit.id">
                 <td>
                   <div class="control">
@@ -85,7 +82,6 @@
                   <button type="button" class="button is-danger" @click="removeUnit(unit)">X</button>
                 </td>
               </tr>
-              </tbody>
             </table>
           </div>
         </div>
@@ -100,18 +96,14 @@
           <div class="message-body">
 
             <table class="table">
-              <thead>
               <tr>
                 <th>Name</th>
                 <th>Grams</th>
               </tr>
-              </thead>
-              <tbody>
               <tr v-for="unit in food.ndbn_units">
                 <td>{{unit.description}}</td>
                 <td>{{unit.gram_weight}}</td>
               </tr>
-              </tbody>
             </table>
 
           </div>
@@ -144,82 +136,99 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed } from "vue";
   import api from "../lib/Api";
-  import { mapState } from "pinia";
+  import { mapState } from "vuex";
-  import { useNutrientStore } from "../stores/nutrient";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const nutrientStore = useNutrientStore();
+  export default {
-  const nutrients = computed(() => nutrientStore.nutrientList);
+    props: {
-  const { loadResource } = useLoadResource();
+      food: {
-
+        required: true,
-  const props = defineProps({
+        type: Object
-    food: {
+      },
-      required: true,
+      validationErrors: {
-      type: Object
+        required: false,
+        type: Object,
+        default: {}
+      },
+      action: {
+        required: false,
+        type: String,
+        default: "Editing"
+      }
     },
-    validationErrors: {
+
-      required: false,
+    data() {
-      type: Object,
+      return {
-      default: {}
+
+      };
     },
-    action: {
+
-      required: false,
+    computed: {
-      type: String,
+      ...mapState({
-      default: "Editing"
+        nutrients: 'nutrientList'
+      }),
+
+      visibleFoodUnits() {
+        return this.food.food_units.filter(iu => iu._destroy !== true);
+      },
+
+      hasNdbn() {
+        return this.food.ndbn !== null;
+      }
+    },
+
+    methods: {
+      addUnit() {
+        this.food.food_units.push({
+          id: null,
+          name: null,
+          gram_weight: null
+        });
+      },
+
+      removeUnit(unit) {
+        if (unit.id) {
+          unit._destroy = true;
+        } else {
+          const idx = this.food.food_units.findIndex(i => i === unit);
+          this.food.food_units.splice(idx, 1);
+        }
+      },
+
+      removeNdbn() {
+        this.food.ndbn = null;
+        this.food.usda_food_name = null;
+        this.food.ndbn_units = [];
+      },
+
+      updateSearchItems(text) {
+        return api.getUsdaFoodSearch(text)
+          .then(data => data.map(f => {
+            return {
+              name: f.name,
+              ndbn: f.ndbn,
+              description: ["#", f.ndbn, ", Cal:", f.kcal, ", Carbs:", f.carbohydrates, ", Fat:", f.lipid, ", Protein:", f.protein].join("")
+            }
+          }));
+      },
+
+      searchItemSelected(food) {
+        this.food.ndbn = food.ndbn;
+        this.food.usda_food_name = food.name;
+        this.food.ndbn_units = [];
+
+        this.loadResource(
+          api.postIngredientSelectNdbn(this.food)
+            .then(i => Object.assign(this.food, i))
+        );
+
+      },
+    },
+
+    components: {
     }
-  });
-
-  const visibleFoodUnits = computed(() => props.food.food_units.filter(iu => iu._destroy !== true));
-  const hasNdbn = computed(() => props.food.ndbn !== null);
-
-  function addUnit() {
-    props.food.food_units.push({
-      id: null,
-      name: null,
-      gram_weight: null
-    });
-  }
-
-  function removeUnit(unit) {
-    if (unit.id) {
-      unit._destroy = true;
-    } else {
-      const idx = props.food.food_units.findIndex(i => i === unit);
-      props.food.food_units.splice(idx, 1);
-    }
-  }
-
-  function removeNdbn() {
-    props.food.ndbn = null;
-    props.food.usda_food_name = null;
-    props.food.ndbn_units = [];
-  }
-
-  function updateSearchItems(text) {
-    return api.getUsdaFoodSearch(text)
-        .then(data => data.map(f => {
-          return {
-            name: f.name,
-            ndbn: f.ndbn,
-            description: ["#", f.ndbn, ", Cal:", f.kcal, ", Carbs:", f.carbohydrates, ", Fat:", f.lipid, ", Protein:", f.protein].join("")
-          }
-        }));
-  }
-
-  function searchItemSelected(food) {
-    props.food.ndbn = food.ndbn;
-    props.food.usda_food_name = food.name;
-    props.food.ndbn_units = [];
-
-    loadResource(
-        api.postIngredientSelectNdbn(props.food)
-            .then(i => Object.assign(props.food, i))
-    );
-
   }
 
 </script>

app/javascript/components/FoodShow.vue

@@ -53,20 +53,24 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed } from "vue";
+  import { mapState } from "vuex";
-  import { useNutrientStore } from "../stores/nutrient";
 
-  const props = defineProps({
+  export default {
-    food: {
+    props: {
-      required: true,
+      food: {
-      type: Object
+        required: true,
+        type: Object
+      }
+    },
+
+    computed: {
+      ...mapState({
+        nutrients: 'nutrientList'
+      }),
     }
-  });
+  }
-
-  const nutrientStore = useNutrientStore();
-  const nutrients = computed(() => nutrientStore.nutrientList);
 
 </script>
 

app/javascript/components/LogEdit.vue

@@ -31,21 +31,27 @@
 
 </template>
 
-<script setup>
+<script>
 
   import RecipeEdit from "./RecipeEdit";
 
-  const props = defineProps({
+  export default {
-    log: {
+    props: {
-      required: true,
+      log: {
-      type: Object
+        required: true,
+        type: Object
+      },
+      validationErrors: {
+        required: false,
+        type: Object,
+        default: {}
+      },
     },
-    validationErrors: {
+
-      required: false,
+    components: {
-      type: Object,
+      RecipeEdit
-      default: {}
+    }
-    },
+  }
-  });
 
 </script>
 

app/javascript/components/LogShow.vue

@@ -21,7 +21,7 @@
           </div>
           <div class="field-body">
             <div class="field">
-              <app-rating readonly :model-value="log.rating"></app-rating>
+              <app-rating readonly :value="log.rating"></app-rating>
             </div>
           </div>
         </div>
@@ -44,16 +44,22 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
   import RecipeShow from "./RecipeShow";
 
-  const props = defineProps({
+  export default {
-    log: {
+    props: {
-      required: true,
+      log: {
-      type: Object
+        required: true,
+        type: Object
+      }
+    },
+
+    components: {
+      RecipeShow
     }
-  });
+  }
 
 </script>
 

app/javascript/components/NoteEdit.vue

@@ -19,27 +19,37 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-import { computed } from "vue";
+  export default {
+    props: {
+      note: {
+        required: true,
+        type: Object
+      }
+    },
 
-const emit = defineEmits(["save", "cancel"]);
+    data() {
-const props = defineProps({
+      return {
-  note: {
+      };
-    required: true,
+    },
-    type: Object
+
+    computed: {
+      canSave() {
+        return this.note && this.note.content && this.note.content.length;
+      }
+    },
+
+    methods: {
+      save() {
+        this.$emit("save", this.note);
+      },
+
+      cancel() {
+        this.$emit("cancel");
+      }
+    }
   }
-});
-
-const canSave = computed(() => props.note?.content?.length);
-
-function save() {
-  emit("save", props.note);
-}
-
-function cancel() {
-  emit("cancel");
-}
 
 </script>
 

app/javascript/components/RecipeEdit.vue

@@ -71,7 +71,6 @@
           <th>Result</th>
         </tr>
         </thead>
-        <tbody>
         <tr>
           <td>Heading</td>
           <td>
@@ -156,7 +155,6 @@ _underline_
             </p>
           </td>
         </tr>
-        </tbody>
       </table>
 
       <h3 class="title is-3">Basic Example</h3>
@@ -206,50 +204,67 @@ _underline_
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref, useTemplateRef, watch } from "vue";
+  import autosize from "autosize";
-  import { useAutosize } from "../lib/useAutosize";
   import debounce from "lodash/debounce";
   import api from "../lib/Api";
+
   import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
 
-  const props = defineProps({
+  export default {
-    recipe: {
+    props: {
-      required: true,
+      recipe: {
-      type: Object
+        required: true,
+        type: Object
+      },
+      forLogging: {
+        required: false,
+        type: Boolean,
+        default: false
+      }
     },
-    forLogging: {
+
-      required: false,
+    data() {
-      type: Boolean,
+      return {
-      default: false
+        stepPreviewCache: null,
+        isDescriptionHelpOpen: false
+      };
+    },
+
+    computed: {
+      stepPreview() {
+        if (this.stepPreviewCache === null) {
+          return this.recipe.rendered_steps;
+        } else {
+          return this.stepPreviewCache;
+        }
+      }
+    },
+
+    methods: {
+
+      updatePreview: debounce(function() {
+        api.postPreviewSteps(this.recipe.step_text)
+          .then(data => this.stepPreviewCache = data.rendered_steps)
+          .catch(err => this.stepPreviewCache = "?? Error ??");
+      }, 750)
+    },
+
+    watch: {
+      'recipe.step_text': function() {
+        this.updatePreview();
+      }
+    },
+
+    mounted() {
+      //autosize(this.$refs.step_text_area);
+    },
+
+    components: {
+      RecipeEditIngredientEditor
     }
-  });
+  }
-
-  const stepTextArea = useTemplateRef("step_text_area");
-  const stepPreviewCache = ref(null);
-  const isDescriptionHelpOpen = ref(false);
-
-  useAutosize(stepTextArea);
-
-  const stepPreview = computed(() => {
-    if (stepPreviewCache.value === null) {
-      return props.recipe.rendered_steps;
-    } else {
-      return stepPreviewCache.value;
-    }
-  });
-
-  const updatePreview = debounce(function() {
-    api.postPreviewSteps(props.recipe.step_text)
-        .then(data => stepPreviewCache.value = data.rendered_steps)
-        .catch(err => stepPreviewCache.value = "?? Error ??");
-  }, 750);
-
-  watch(
-      () => props.recipe.step_text,
-      () => updatePreview()
-  );
 
 </script>
 

app/javascript/components/RecipeEditIngredientEditor.vue

@@ -12,22 +12,18 @@
         </div>
         <div class="column is-half">
           <table class="table is-bordered is-narrow is-size-7">
-            <thead>
             <tr>
               <th>#</th>
               <th>Unit</th>
               <th>Name</th>
               <th>Prep</th>
             </tr>
-            </thead>
-            <tbody>
             <tr v-for="i in bulkIngredientPreview">
               <td>{{i.quantity}}</td>
               <td>{{i.units}}</td>
               <td>{{i.name}}</td>
               <td>{{i.preparation}}</td>
             </tr>
-            </tbody>
           </table>
         </div>
       </div>
@@ -43,155 +39,172 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref } from "vue";
-  import { useMediaQueryStore } from "../stores/mediaQuery";
   import RecipeEditIngredientItem from "./RecipeEditIngredientItem";
 
-  const mediaQueryStore = useMediaQueryStore();
+  import { mapState } from "vuex";
 
-  const props = defineProps({
+  export default {
-    ingredients: {
+    props: {
-      required: true,
+      ingredients: {
-      type: Array
+        required: true,
-    }
+        type: Array
-  });
-
-  const isBulkEditing = ref(false);
-  const bulkEditText = ref(null);
-  const isMobile = computed(() => mediaQueryStore.mobile);
-  const visibleIngredients = computed(() => props.ingredients.filter(i => i._destroy !== true));
-
-  const bulkIngredientPreview = computed(() => {
-    if (bulkEditText.value === null || bulkEditText.value === "") {
-      return [];
-    }
-
-    const regex = /^\s*(?:([\d\/.]+(?:\s+[\d\/]+)?)\s+)?(?:([\w-]+)(?:\s+of)?\s+)?([^,|]+?|.+\|)(?:,\s*([^|]*?))?(?:\s*\[(\d+)\]\s*)?$/i;
-
-    const magicFunc = function(str) {
-      if (str === "-") {
-        return "";
-      } else {
-        return str;
       }
-    };
+    },
 
-    const parsed = [];
+    data() {
-    const lines = bulkEditText.value.replace("\r", "").split("\n");
+      return {
+        isBulkEditing: false,
+        bulkEditText: null
+      };
+    },
 
-    for (let line of lines) {
+    computed: {
-      if (line.length === 0) { continue; }
+      ...mapState({
+        isMobile: state => state.mediaQueries.mobile
+      }),
+      bulkIngredientPreview() {
+        if (this.bulkEditText === null) {
+          return [];
+        }
 
-      const match = line.match(regex);
+        const regex = /^\s*(?:([\d\/.]+(?:\s+[\d\/]+)?)\s+)?(?:([\w-]+)(?:\s+of)?\s+)?([^,|]+?|.+\|)(?:,\s*([^|]*?))?(?:\s*\[(\d+)\]\s*)?$/i;
 
-      if (match) {
+        const magicFunc = function(str) {
-        const matchedName = match[3].replace(/\|\s*$/, "");
+          if (str === "-") {
-        let item = {quantity: magicFunc(match[1]), units: magicFunc(match[2]), name: magicFunc(matchedName), preparation: magicFunc(match[4]), id: match[5] || null};
+            return "";
-        parsed.push(item);
+          } else {
-      } else {
+            return str;
-        parsed.push(null);
+          }
-      }
+        };
-    }
 
-    return parsed;
+        const parsed = [];
-  });
+        const lines = this.bulkEditText.replace("\r", "").split("\n");
 
-  function createIngredient() {
+        for (let line of lines) {
-    const sort_orders = props.ingredients.map(i => i.sort_order);
+          if (line.length === 0) { continue; }
-    sort_orders.push(0);
-    const next_sort_order = Math.max(...sort_orders) + 5;
 
-    return {
+          const match = line.match(regex);
-      id: null,
-      quantity: null,
-      units: null,
-      name: null,
-      preparation: null,
-      ingredient_id: null,
-      sort_order: next_sort_order
-    };
-  }
 
-  function addIngredient() {
+          if (match) {
-    props.ingredients.push(createIngredient());
+            const matchedName = match[3].replace(/\|\s*$/, "");
-  }
+            let item = {quantity: magicFunc(match[1]), units: magicFunc(match[2]), name: magicFunc(matchedName), preparation: magicFunc(match[4]), id: match[5] || null};
-
+            parsed.push(item);
-  function deleteFood(food) {
+          } else {
-    if (food.id) {
+            parsed.push(null);
-      food._destroy = true;
-    } else {
-      const idx = props.ingredients.findIndex(i => i === food);
-      props.ingredients.splice(idx, 1);
-    }
-  }
-
-  function bulkEditIngredients() {
-    isBulkEditing.value = true;
-
-    let text = [];
-
-    for (let item of visibleIngredients.value) {
-      text.push(
-          item.quantity + " " +
-          (item.units || "-") + " " +
-          (item.name.indexOf(",") >= 0 ? item.name + "|" : item.name) +
-          (item.preparation ? (", " + item.preparation) : "") +
-          (item.id ? (" [" + item.id + "]") : "")
-      );
-    }
-
-    bulkEditText.value = text.join("\n");
-  }
-
-  function cancelBulkEditing() {
-    isBulkEditing.value = false;
-  }
-
-  function saveBulkEditing() {
-    const parsed = bulkIngredientPreview.value.filter(i => i !== null);
-    const existing = [...props.ingredients];
-    const newList = [];
-
-    for (let parsedIngredient of parsed) {
-      let newIngredient = null;
-
-      if (parsedIngredient.id !== null) {
-        let intId = parseInt(parsedIngredient.id);
-        let exIdx = existing.findIndex(i => i.id === intId);
-        if (exIdx >= 0) {
-          let ex = existing[exIdx];
-          if (ex.name === parsedIngredient.name) {
-            newIngredient = ex;
-            existing.splice(exIdx, 1);
           }
         }
+
+        return parsed;
+      },
+
+      visibleIngredients() {
+        return this.ingredients.filter(i => i._destroy !== true);
       }
+    },
 
-      if (newIngredient === null) {
+    methods: {
-        newIngredient = createIngredient();
+      createIngredient() {
+        const sort_orders = this.ingredients.map(i => i.sort_order);
+        sort_orders.push(0);
+        const next_sort_order = Math.max(...sort_orders) + 5;
+
+        return {
+          id: null,
+          quantity: null,
+          units: null,
+          name: null,
+          preparation: null,
+          ingredient_id: null,
+          sort_order: next_sort_order
+        };
+      },
+
+      addIngredient() {
+        this.ingredients.push(this.createIngredient());
+      },
+
+      deleteFood(food) {
+        if (food.id) {
+          food._destroy = true;
+        } else {
+          const idx = this.ingredients.findIndex(i => i === food);
+          this.ingredients.splice(idx, 1);
+        }
+      },
+
+      bulkEditIngredients() {
+        this.isBulkEditing = true;
+
+        let text = [];
+
+        for (let item of this.visibleIngredients) {
+          text.push(
+            item.quantity + " " +
+            (item.units || "-") + " " +
+            (item.name.indexOf(",") >= 0 ? item.name + "|" : item.name) +
+            (item.preparation ? (", " + item.preparation) : "") +
+            (item.id ? (" [" + item.id + "]") : "")
+          );
+        }
+
+        this.bulkEditText = text.join("\n");
+      },
+
+      cancelBulkEditing() {
+        this.isBulkEditing = false;
+      },
+
+      saveBulkEditing() {
+        const parsed = this.bulkIngredientPreview.filter(i => i !== null);
+        const existing = [...this.ingredients];
+        const newList = [];
+
+        for (let parsedIngredient of parsed) {
+          let newIngredient = null;
+
+          if (parsedIngredient.id !== null) {
+            let intId = parseInt(parsedIngredient.id);
+            let exIdx = existing.findIndex(i => i.id === intId);
+            if (exIdx >= 0) {
+              let ex = existing[exIdx];
+              if (ex.name === parsedIngredient.name) {
+                newIngredient = ex;
+                existing.splice(exIdx, 1);
+              }
+            }
+          }
+
+          if (newIngredient === null) {
+            newIngredient = this.createIngredient();
+          }
+
+          newIngredient.quantity = parsedIngredient.quantity;
+          newIngredient.units = parsedIngredient.units;
+          newIngredient.name = parsedIngredient.name;
+          newIngredient.preparation = parsedIngredient.preparation;
+          newList.push(newIngredient);
+        }
+
+        for (let oldExisting of existing.filter(i => i.id !== null)) {
+          newList.push({id: oldExisting.id, _destroy: true});
+        }
+
+        this.ingredients.splice(0);
+        let sortIdx = 0;
+        for (let n of newList) {
+          n.sort_order = sortIdx++;
+          this.ingredients.push(n);
+        }
+
+        this.isBulkEditing = false;
       }
+    },
 
-      newIngredient.quantity = parsedIngredient.quantity;
+    components: {
-      newIngredient.units = parsedIngredient.units;
+      RecipeEditIngredientItem
-      newIngredient.name = parsedIngredient.name;
-      newIngredient.preparation = parsedIngredient.preparation;
-      newList.push(newIngredient);
     }
-
-    for (let oldExisting of existing.filter(i => i.id !== null)) {
-      newList.push({id: oldExisting.id, _destroy: true});
-    }
-
-    props.ingredients.splice(0);
-    let sortIdx = 0;
-    for (let n of newList) {
-      n.sort_order = sortIdx++;
-      props.ingredients.push(n);
-    }
-
-    isBulkEditing.value = false;
   }
 
 </script>

app/javascript/components/RecipeEditIngredientItem.vue

@@ -44,50 +44,55 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { useTemplateRef, watch } from "vue";
   import api from "../lib/Api";
 
-  const emit = defineEmits(["deleteFood"]);
+  export default {
-  const props = defineProps({
+    props: {
-    ingredient: {
+      ingredient: {
-      required: true,
+        required: true,
-      type: Object
+        type: Object
+      },
+      showLabels: {
+        required: false,
+        type: Boolean,
+        default: false
+      }
     },
-    showLabels: {
-      required: false,
-      type: Boolean,
-      default: false
-    }
-  });
 
-  const autocompleteElement = useTemplateRef("autocomplete");
+    methods: {
+      deleteFood(ingredient) {
+        this.$emit("deleteFood", ingredient);
+      },
 
-  watch(props.ingredient, (val) => {
+      updateSearchItems(text) {
-    if (props.ingredient.ingredient && props.ingredient.ingredient.name !== val) {
+        return api.getSearchIngredients(text);
-      props.ingredient.ingredient_id = null;
+      },
-      props.ingredient.ingredient = null;
-    }
-  });
 
-  function deleteFood(ingredient) {
+      searchItemSelected(ingredient) {
-    emit("deleteFood", ingredient);
+        this.ingredient.ingredient_id = ingredient.id;
-  }
+        this.ingredient.ingredient = ingredient;
+        this.ingredient.name = ingredient.name;
+      },
 
-  function updateSearchItems(text) {
+      nameClick() {
-    return api.getSearchIngredients(text);
+        if (this.ingredient.ingredient_id === null && this.ingredient.name !== null && this.ingredient.name.length > 2) {
-  }
+          this.$refs.autocomplete.updateOptions(this.ingredient.name);
+        }
+      }
+    },
 
-  function searchItemSelected(ingredient) {
+    watch: {
-    props.ingredient.ingredient_id = ingredient.id;
+      'ingredient.name': function(val) {
-    props.ingredient.ingredient = ingredient;
+        if (this.ingredient.ingredient && this.ingredient.ingredient.name !== val) {
-    props.ingredient.name = ingredient.name;
+          this.ingredient.ingredient_id = null;
-  }
+          this.ingredient.ingredient = null;
+        }
+      }
+    },
 
-  function nameClick() {
+    components: {
-    if (props.ingredient.ingredient_id === null && props.ingredient.name !== null && props.ingredient.name.length > 2) {
-      autocompleteElement.updateOptions(props.ingredient.name);
     }
   }
 
@@ -95,10 +100,10 @@
 
 <style lang="scss" scoped>
 
-  @use "bulma/sass/utilities" as bulma;
+  @import "../styles/variables";
 
   .edit-ingredient-item {
-    border-bottom: solid 1px bulma.$grey-light;
+    border-bottom: solid 1px $grey-light;
     margin-bottom: 1.25rem;
 
     &:last-child {

app/javascript/components/RecipeShow.vue

@@ -38,7 +38,7 @@
               Ingredients
               <button class="button is-small is-primary" type="button" @click="showConvertDialog = true">Convert</button>
               <app-dropdown :open="addToTasksMenuOpen" label="Add to list" button-class="is-small is-primary" @open="addToTasksMenuOpen = true" @close="addToTasksMenuOpen = false">
-                <button class="button primary" v-for="tl in taskStore.taskLists" :key="tl.id" @click="addRecipeToList(tl)">
+                <button class="button primary" v-for="tl in taskLists" :key="tl.id" @click="addRecipeToList(tl)">
                   {{tl.name}}
                 </button>
               </app-dropdown>
@@ -65,18 +65,14 @@
         <div class="message-header" @click="showNutrition = !showNutrition">Nutrition Data</div>
         <div class="message-body" v-show="showNutrition">
           <table class="table">
-            <thead>
             <tr>
               <th>Item</th>
               <th>Value</th>
             </tr>
-            </thead>
-            <tbody>
             <tr v-for="nutrient in recipe.nutrition_data.nutrients" :key="nutrient.name">
               <td>{{nutrient.label}}</td>
               <td>{{ roundValue(nutrient.value) }}</td>
             </tr>
-            </tbody>
           </table>
 
           <h3 class="title is-5">Nutrition Calculation Warnings</h3>
@@ -150,122 +146,154 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onMounted, ref, watch } from "vue";
-  import { useRouter } from "vue-router";
   import api from "../lib/Api";
-  import { useTaskStore } from "../stores/task";
+  import { mapActions, mapMutations, mapState } from "vuex";
 
-  const taskStore = useTaskStore();
+  export default {
-  const router = useRouter();
+    props: {
+      recipe: {
+        required: true,
+        type: Object
+      }
+    },
 
-  const props = defineProps({
+    data() {
-    recipe: {
+      return {
-      required: true,
+        showNutrition: false,
-      type: Object
+        showConvertDialog: false,
-    }
+        addToTasksMenuOpen: false,
-  });
 
-  const showNutrition = ref(false);
+        scaleValue: '1',
-  const showConvertDialog = ref(false);
+        systemConvertValue: "",
-  const addToTasksMenuOpen = ref(false);
+        unitConvertValue: "",
 
-  const scaleValue = ref('1');
+        scaleOptions: [
-  const systemConvertValue = ref('');
+          '1/4',
-  const unitConvertValue = ref('');
+          '1/3',
+          '1/2',
+          '2/3',
+          '3/4',
+          '1',
+          '1 1/2',
+          '2',
+          '3',
+          '4'
+        ]
+      };
+    },
 
-  const scaleOptions = [
+    computed: {
-    '1/4',
+      ...mapState([
-    '1/3',
+          'taskLists'
-    '1/2',
+      ]),
-    '2/3',
+      
-    '3/4',
+      timeDisplay() {
-    '1',
+        let a = this.formatMinutes(this.recipe.active_time);
-    '1 1/2',
+        const t = this.formatMinutes(this.recipe.total_time);
-    '2',
-    '3',
-    '4'
-  ];
 
-  const timeDisplay = computed(() => {
+        if (a) {
-    let a = formatMinutes(props.recipe.active_time);
+          a = ` (${a} active)`;
-    const t = formatMinutes(props.recipe.total_time);
+        }
 
-    if (a) {
+        return t + a;
-      a = ` (${a} active)`;
+      },
-    }
 
-    return t + a;
+      sourceUrl() {
-  });
+        try {
+          return new URL(this.recipe.source);
+        } catch(err) {
+          return null;
+        }
+      },
 
-  const sourceUrl = computed(() => {
+      isSourceUrl() {
-    try {
+        return this.sourceUrl !== null;
-      return new URL(props.recipe.source);
+      },
-    } catch(err) {
-      return null;
-    }
-  });
 
-  const isSourceUrl = computed(() => sourceUrl.value !== null);
+      sourceText() {
-  const sourceText = computed(() => isSourceUrl.value ? sourceUrl.value.host : props.recipe.source);
+        if (this.isSourceUrl) {
-
+          return this.sourceUrl.host;
-  watch(props.recipe, (r) => {
+        } else {
-    if (r) {
+          return this.source;
-      scaleValue.value = r.converted_scale || '1';
-      systemConvertValue.value = r.converted_system;
-      unitConvertValue.value = r.converted_unit;
-    }
-  }, { immediate: true });
-
-  onMounted(() => {
-    taskStore.ensureTaskLists();
-  });
-
-  function addRecipeToList(list) {
-    api.addRecipeToTaskList(list.id, props.recipe.id)
-        .then(() => {
-          taskStore.setCurrentTaskList(list);
-          router.push({name: 'task_lists'})
-        });
-  }
-
-  function convert() {
-    showConvertDialog.value = false;
-    router.push({name: 'recipe', query: { scale: scaleValue.value, system: systemConvertValue.value, unit: unitConvertValue.value }});
-  }
-
-  function roundValue(v) {
-    return parseFloat(v).toFixed(2);
-  }
-
-  function formatMinutes(min) {
-    if (min) {
-      const partUnits = [
-        {unit: "d", minutes: 60 * 24},
-        {unit: "h", minutes: 60},
-        {unit: "m", minutes: 1}
-      ];
-
-      const parts = [];
-      let remaining = min;
-
-      for (let unit of partUnits) {
-        let val = Math.floor(remaining / unit.minutes);
-        remaining = remaining % unit.minutes;
-
-        if (val > 0) {
-          parts.push(`${val} ${unit.unit}`);
         }
       }
+    },
 
-      return parts.join(" ");
+    watch: {
-    } else {
+      recipe: {
-      return "";
+        handler: function(r) {
+          if (r) {
+            this.scaleValue = r.converted_scale || '1';
+            this.systemConvertValue = r.converted_system;
+            this.unitConvertValue = r.converted_unit;
+          }
+        },
+        immediate: true
+      }
+    },
+
+    methods: {
+      ...mapActions([
+          'ensureTaskLists'
+      ]),
+      
+      ...mapMutations([
+          'setCurrentTaskList'
+      ]),
+
+      addRecipeToList(list) {
+        console.log(list);
+        api.addRecipeToTaskList(list.id, this.recipe.id)
+        .then(() => {
+          this.setCurrentTaskList(list);
+          this.$router.push({name: 'task_lists'})
+        });
+      },
+      
+      convert() {
+        this.showConvertDialog = false;
+        this.$router.push({name: 'recipe', query: { scale: this.scaleValue, system: this.systemConvertValue, unit: this.unitConvertValue }});
+      },
+
+      roundValue(v) {
+        return parseFloat(v).toFixed(2);
+      },
+
+      formatMinutes(min) {
+        if (min) {
+          const partUnits = [
+            {unit: "d", minutes: 60 * 24},
+            {unit: "h", minutes: 60},
+            {unit: "m", minutes: 1}
+          ];
+
+          const parts = [];
+          let remaining = min;
+
+          for (let unit of partUnits) {
+            let val = Math.floor(remaining / unit.minutes);
+            remaining = remaining % unit.minutes;
+
+            if (val > 0) {
+              parts.push(`${val} ${unit.unit}`);
+            }
+          }
+
+          return parts.join(" ");
+        } else {
+          return "";
+        }
+      }
+    },
+    
+    mounted() {
+      this.ensureTaskLists();
     }
   }
 
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

app/javascript/components/TaskItemEdit.vue

@@ -24,42 +24,39 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { onMounted, useTemplateRef } from "vue";
+  export default {
+    props: {
+      taskItem: {
+        required: true,
+        type: Object
+      }
+    },
 
-  const emit = defineEmits(["save"]);
+    methods: {
-  const props = defineProps({
+      inputKeydown(evt) {
-    taskItem: {
+        switch (evt.key) {
-      required: true,
+          case "Enter":
-      type: Object
+            evt.preventDefault();
-    }
+            this.save();
-  });
+        }
+      },
 
-  const nameElement = useTemplateRef("nameInput");
+      save() {
+        this.$emit("save", this.taskItem);
+      },
 
-  onMounted(() => focus());
+      focus() {
+        this.$refs.nameInput.focus();
+      }
+    },
 
-  function inputKeydown(evt) {
+    mounted() {
-    switch (evt.key) {
+      this.focus();
-      case "Enter":
-        evt.preventDefault();
-        save();
     }
   }
 
-  function save() {
-    emit("save", props.taskItem);
-  }
-
-  function focus() {
-    nameElement.value.focus();
-  }
-
-  defineExpose({
-    focus
-  });
-
 </script>
 
 <style lang="scss" scoped>

app/javascript/components/TaskItemList.vue

@@ -60,106 +60,138 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref, useTemplateRef } from "vue";
   import * as Errors from '../lib/Errors';
-  import { useTaskStore } from "../stores/task";
+  import { mapActions } from "vuex";
-  import { useLoadResource } from "../lib/useLoadResource";
+  import cloneDeep from "lodash/cloneDeep";
+
   import TaskItemEdit from "./TaskItemEdit";
 
-  const { loadResource } = useLoadResource();
+  const newItemTemplate = function(listId) {
-  const taskStore = useTaskStore();
-  const itemEditElement = useTemplateRef("itemEdit");
-
-  const props = defineProps({
-    taskList: {
-      required: true,
-      type: Object
-    }
-  });
-
-  const showAddItem = ref(false);
-  const newItem = ref(null);
-  const newItemValidationErrors = ref({});
-
-  const completedTaskItems = computed(() => (props.taskList ? props.taskList.task_items : []).filter(i => i.completed));
-  const uncompletedTaskItems = computed(() => (props.taskList ? props.taskList.task_items : []).filter(i => !i.completed));
-  const completedItemCount = computed(() => completedTaskItems.value.length);
-  const uncompletedItemCount = computed(() => uncompletedTaskItems.value.length);
-  const taskItems = computed(() => uncompletedTaskItems.value.concat(completedTaskItems.value));
-
-  function newItemTemplate() {
     return {
-      task_list_id: null,
+      task_list_id: listId,
       name: '',
       quantity: '',
       completed: false
     };
-  }
+  };
 
-  function save() {
+  export default {
-    newItem.value.task_list_id = props.taskList.id;
+    props: {
-    loadResource(
+      taskList: {
-        taskStore.createTaskItem(newItem.value)
+        required: true,
+        type: Object
+      }
+    },
+
+    data() {
+      return {
+        showAddItem: false,
+        newItem: null,
+        newItemValidationErrors: {}
+      };
+    },
+
+    computed: {
+      completedItemCount() {
+        return this.taskList === null ? 0 : this.taskList.task_items.filter(i => i.completed).length;
+      },
+
+      uncompletedItemCount() {
+        return this.taskList === null ? 0 : this.taskList.task_items.filter(i => !i.completed).length;
+      },
+      completedTaskItems() {
+        return (this.taskList ? this.taskList.task_items : []).filter(i => i.completed);
+      },
+
+      uncompletedTaskItems() {
+        return (this.taskList ? this.taskList.task_items : []).filter(i => !i.completed);
+      },
+
+      taskItems() {
+        return this.uncompletedTaskItems.concat(this.completedTaskItems);
+      }
+    },
+
+    methods: {
+      ...mapActions([
+        'createTaskItem',
+        'updateTaskItem',
+        'deleteTaskItems',
+        'completeTaskItems'
+      ]),
+
+      save() {
+        this.loadResource(
+          this.createTaskItem(this.newItem)
             .then(() => {
-              newItem.value = newItemTemplate();
+              this.newItem = newItemTemplate(this.taskList.id);
-              itemEditElement.value.focus();
+              this.$refs.itemEdit.focus();
             })
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => newItemValidationErrors.value = err.validationErrors()))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newItemValidationErrors = err.validationErrors()))
-    )
+        )
-  }
+      },
 
-  function toggleItem(i) {
+      toggleItem(i) {
-    loadResource(
+        this.loadResource(
-        taskStore.completeTaskItems({
+          this.completeTaskItems({
-          taskList: props.taskList,
+            taskList: this.taskList,
-          taskItems: [i],
+            taskItems: [i],
-          completed: !i.completed
+            completed: !i.completed
-        })
+          })
-    );
+        );
-  }
+      },
 
-  function toggleShowAddItem() {
+      toggleShowAddItem() {
-    newItem.value = newItemTemplate();
+        this.newItem = newItemTemplate(this.taskList.id);
-    showAddItem.value = !showAddItem.value;
+        this.showAddItem = !this.showAddItem;
-  }
+      },
 
-  function completeAllItems() {
+      completeAllItems() {
-    const toComplete = props.taskList.task_items.filter(i => !i.completed);
+        const toComplete = this.taskList.task_items.filter(i => !i.completed);
-    loadResource(
+        this.loadResource(
-        taskStore.completeTaskItems({
+          this.completeTaskItems({
-          taskList: props.taskList,
+            taskList: this.taskList,
-          taskItems: toComplete,
+            taskItems: toComplete,
-          completed: true
+            completed: true
-        })
+          })
-    )
+        )
-  }
+      },
 
-  function unCompleteAllItems() {
+      unCompleteAllItems() {
-    const toUnComplete = props.taskList.task_items.filter(i => i.completed);
+        const toUnComplete = this.taskList.task_items.filter(i => i.completed);
-    loadResource(
+        this.loadResource(
-        taskStore.completeTaskItems({
+          this.completeTaskItems({
-          taskList: props.taskList,
+            taskList: this.taskList,
-          taskItems: toUnComplete,
+            taskItems: toUnComplete,
-          completed: false
+            completed: false
-        })
+          })
-    )
+        )
-  }
+      },
 
-  function deleteCompletedItems() {
+      deleteCompletedItems() {
-    loadResource(
+        this.loadResource(
-        taskStore.deleteTaskItems({
+          this.deleteTaskItems({
-          taskList: props.taskList,
+            taskList: this.taskList,
-          taskItems: props.taskList.task_items.filter(i => i.completed)
+            taskItems: this.taskList.task_items.filter(i => i.completed)
-        })
+          })
-    );
+        );
+      },
+
+    },
+
+    components: {
+      TaskItemEdit
+    }
   }
 
 </script>
 
 <style lang="scss" scoped>
 
+  @import "../styles/variables";
+
   .columns {
     margin-top: 0;
     margin-bottom: 0;

app/javascript/components/TaskListDropdownItem.vue

@@ -14,55 +14,58 @@
 
 </template>
 
-<script setup>
+<script>
 
-  import { ref } from "vue";
+  export default {
+    props: {
+      taskList: {
+        type: Object,
+        required: true
+      },
 
-  const emit = defineEmits(["select", "delete"]);
+      active: {
-
+        type: Boolean,
-  const props = defineProps({
+        required: false,
-    taskList: {
+        default: false
-      type: Object,
+      }
-      required: true
     },
 
-    active: {
+    data() {
-      type: Boolean,
+      return {
-      required: false,
+        hovering: false,
-      default: false
+        confirmingDelete: false
+      };
+    },
+
+    methods: {
+      selectList() {
+        this.$emit("select", this.taskList);
+      },
+
+      deleteList() {
+        this.confirmingDelete = false;
+        this.$emit("delete", this.taskList);
+      }
     }
-  });
-
-  const hovering = ref(false);
-  const confirmingDelete = ref(false);
-
-  function selectList() {
-    emit("select", props.taskList);
-  }
-
-  function deleteList() {
-    confirmingDelete.value = false;
-    emit("delete", props.taskList);
   }
 
 </script>
 
 <style lang="scss" scoped>
 
-  @use "bulma/sass/utilities" as bulma;
+  @import "~styles/variables";
-  @use 'sass:color';
 
   div.dropdown-item {
     cursor: pointer;
 
     &.hovered {
-      color: bulma.$black;
+      color: $black;
-      background-color: bulma.$background;
+      background-color: $background;
     }
 
     &.is-active {
-      color: color.invert(bulma.$link);
+      color: $link-invert;
-      background-color: bulma.$link;
+      background-color: $link;
     }
   }
 

app/javascript/components/TaskListMiniForm.vue

@@ -14,32 +14,34 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  const emit = defineEmits(["save"]);
+  export default {
+    props: {
+      taskList: {
+        required: true,
+        type: Object
+      },
 
-  const props = defineProps({
+      validationErrors: {
-    taskList: {
+        required: false,
-      required: true,
+        type: Object,
-      type: Object
+        default: function() { return {}; }
+      }
     },
 
-    validationErrors: {
+    methods: {
-      required: false,
+      save() {
-      type: Object,
+        this.$emit("save");
-      default: function() { return {}; }
+      },
-    }
-  });
 
-  function save() {
+      nameKeydownHandler(evt) {
-    emit("save");
+        switch (evt.key) {
-  }
+          case "Enter":
-
+            evt.preventDefault();
-  function nameKeydownHandler(evt) {
+            this.save();
-    switch (evt.key) {
+        }
-      case "Enter":
+      }
-        evt.preventDefault();
-        save();
     }
   }
 

app/javascript/components/The404Page.vue

@@ -5,7 +5,10 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
+  export default {
+
+  }
 
 </script>

app/javascript/components/TheAboutPage.vue

@@ -7,7 +7,7 @@
     </p>
 
     <p>
-      Parsley is released under the MIT License.  All code &copy; Dan Elbert 2024.
+      Parsley is released under the MIT License.  All code &copy; Dan Elbert 2020.
     </p>
 
     <p>
@@ -19,7 +19,11 @@
   </div>
 </template>
 
-<script setup>
+<script>
+
+  export default {
+
+  }
 
 </script>
 

app/javascript/components/TheAdminUserEditor.vue

@@ -2,8 +2,11 @@
 
 </template>
 
-<script setup>
+<script>
 
+  export default {
+
+  }
 
 </script>
 

app/javascript/components/TheAdminUserList.vue

@@ -29,21 +29,24 @@
 
 </template>
 
-<script setup>
+<script>
 
-  import { onBeforeMount, ref } from "vue";
-  import { useLoadResource } from "../lib/useLoadResource";
   import api from "../lib/Api";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const userList = ref([]);
+    data() {
+      return {
+        userList: []
+      };
+    },
 
-  onBeforeMount(() => {
+    created() {
-    loadResource(
+      this.loadResource(
         api.getAdminUserList()
-            .then(list => userList.value = list)
+          .then(list => this.userList = list)
-    );
+      );
-  });
+    }
+  }
 
 </script>
 

app/javascript/components/TheCalculator.vue

@@ -40,64 +40,93 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
+    data() {
+      return {
+        input: '',
+        outputUnit: '',
+        ingredient_name: '',
+        ingredient: null,
+        density: '',
+        output: '',
+        errors: {}
+      };
+    },
 
-  const input = ref("");
+    computed: {
-  const outputUnit = ref("");
+      inputErrors() {
-  const ingredient_name = ref("");
+        if (this.errors.input && this.errors.input.length > 0) {
-  const ingredient = ref(null);
+          return this.errors.input.join(", ");
-  const density = ref("");
+        } else {
-  const output = ref("");
+          return null;
-  const errors = ref({});
+        }
+      },
 
-  const inputErrors = computed(() => getErrors("input"));
+      outputUnitErrors() {
-  const outputUnitErrors = computed(() => getErrors("output_unit"));
+        if (this.errors.output_unit && this.errors.output_unit.length > 0) {
-  const densityErrors = computed(() => getErrors("density"));
+          return this.errors.output_unit.join(", ");
+        } else {
+          return null;
+        }
+      },
 
-  const updateOutput = debounce(function() {
+      densityErrors() {
-    if (input.value && input.value.length > 0) {
+        if (this.errors.density && this.errors.density.length > 0) {
-      loadResource(api.getCalculate(input.value, outputUnit.value, ingredient.value ? ingredient.value.ingredient_id : null, density.value)
+          return this.errors.density.join(", ");
-          .then(data => {
+        } else {
-            output.value = data.output;
+          return null;
-            errors.value = data.errors;
+        }
-          })
+      }
-      );
+    },
-    }
-  }, 500);
 
-  watch(ingredient_name, function(val) {
+    methods: {
-    if (ingredient.value && ingredient.value.name !== val) {
+      updateSearchItems(text) {
-      ingredient.value = null;
+        return api.getSearchIngredients(text);
-    }
+      },
-  });
 
-  watch(
+      searchItemSelected(ingredient) {
-      [input, outputUnit, density, ingredient],
+        this.ingredient = ingredient || null;
-      () => updateOutput()
+        this.ingredient_name = ingredient.name || null;
-  );
+        this.density = ingredient.density || null;
+      },
 
-  function updateSearchItems(text) {
+      updateOutput: debounce(function() {
-    return api.getSearchIngredients(text);
+        if (this.input && this.input.length > 0) {
-  }
+          this.loadResource(api.getCalculate(this.input, this.outputUnit, this.ingredient ? this.ingredient.ingredient_id : null, this.density)
+            .then(data => {
+              this.output = data.output;
+              this.errors = data.errors;
+            })
+          );
+        }
+      }, 500)
+    },
 
-  function searchItemSelected(ingredient) {
+    watch: {
-    ingredient.value = ingredient || null;
+      'ingredient_name': function(val) {
-    ingredient_name.value = ingredient.name || null;
+        if (this.ingredient && this.ingredient.name !== val) {
-    density.value = ingredient.density || null;
+          this.ingredient = null;
-  }
+        }
+      }
+    },
 
-  function getErrors(type) {
+    created() {
-    if (errors.value[type] && errors.value[type].length > 0) {
+      this.$watch(
-      return errors.value[type].join(", ");
+        function() {
-    } else {
+          return [this.input, this.outputUnit, this.density, this.ingredient];
-      return null;
+        },
+        function() {
+          this.updateOutput();
+        }
+      )
+    },
+
+    components: {
     }
   }
 

app/javascript/components/TheFood.vue

@@ -7,33 +7,41 @@
       <food-show :food="food"></food-show>
     </div>
 
-    <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: foodId }}">Edit</router-link>
+    <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: foodId }}">Edit</router-link>
     <router-link class="button" to="/foods">Back</router-link>
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref } from "vue";
-  import { useRoute } from "vue-router";
   import FoodShow from "./FoodShow";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useAppConfigStore } from "../stores/appConfig";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const appConfig = useAppConfigStore();
+    data: function () {
-  const route = useRoute();
+      return {
+        food: null
+      }
+    },
 
-  const food = ref(null);
+    computed: {
-  const foodId = computed(() => route.params.id);
+      ...mapState({
+        foodId: state => state.route.params.id,
+      })
+    },
 
-  onBeforeMount(() => {
+    created() {
-    loadResource(
+      this.loadResource(
-        api.getFood(foodId.value)
+        api.getFood(this.foodId)
-            .then(data => { food.value = data; return data; })
+          .then(data => { this.food = data; return data; })
-    );
+      );
-  });
+    },
+
+    components: {
+      FoodShow
+    }
+  }
 
 </script>
 

app/javascript/components/TheFoodCreator.vue

@@ -9,59 +9,66 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { reactive, ref } from "vue";
-  import { useRouter } from "vue-router";
   import FoodEdit from "./FoodEdit";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const router = useRouter();
+    data() {
+      return {
+        food: {
+          name: null,
+          notes: null,
+          ndbn: null,
+          density: null,
+          water: null,
+          ash: null,
+          protein: null,
+          kcal: null,
+          fiber: null,
+          sugar: null,
+          carbohydrates: null,
+          calcium: null,
+          iron: null,
+          magnesium: null,
+          phosphorus: null,
+          potassium: null,
+          sodium: null,
+          zinc: null,
+          copper: null,
+          manganese: null,
+          vit_c: null,
+          vit_b6: null,
+          vit_b12: null,
+          vit_a: null,
+          vit_e: null,
+          vit_d: null,
+          vit_k: null,
+          cholesterol: null,
+          lipids: null,
+          food_units: []
+        },
+        validationErrors: {}
+      }
+    },
 
-  const validationErrors = ref({});
+    methods: {
-  const food = reactive({
+      save() {
-    name: null,
+        this.validationErrors = {}
-    notes: null,
+        this.loadResource(
-    ndbn: null,
+          api.postFood(this.food)
-    density: null,
+            .then(() => this.$router.push('/foods'))
-    water: null,
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
-    ash: null,
+        );
-    protein: null,
+      }
-    kcal: null,
+    },
-    fiber: null,
-    sugar: null,
-    carbohydrates: null,
-    calcium: null,
-    iron: null,
-    magnesium: null,
-    phosphorus: null,
-    potassium: null,
-    sodium: null,
-    zinc: null,
-    copper: null,
-    manganese: null,
-    vit_c: null,
-    vit_b6: null,
-    vit_b12: null,
-    vit_a: null,
-    vit_e: null,
-    vit_d: null,
-    vit_k: null,
-    cholesterol: null,
-    lipids: null,
-    food_units: []
-  });
 
-  function save() {
+    components: {
-    validationErrors.value = {}
+      FoodEdit
-    loadResource(
+    }
-        api.postFood(food)
-            .then(() => router.push('/foods'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
-    );
   }
 
 </script>

app/javascript/components/TheFoodEditor.vue

@@ -14,37 +14,48 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref } from "vue";
-  import { useRoute, useRouter } from "vue-router";
   import FoodEdit from "./FoodEdit";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const router = useRouter();
+    data: function () {
-  const route = useRoute();
+      return {
+        food: null,
+        validationErrors: {}
+      };
+    },
 
-  const food = ref(null);
+    computed: {
-  const validationErrors = ref({});
+      ...mapState({
-  const foodId = computed(() => route.params.id);
+        foodId: state => state.route.params.id,
+      })
+    },
 
-  onBeforeMount(() => {
+    methods: {
-    loadResource(
+      save() {
-        api.getFood(foodId.value)
+        this.validationErrors = {};
-            .then(data => { food.value = data; return data; })
+        this.loadResource(
-    );
+          api.patchFood(this.food)
-  });
+            .then(() => this.$router.push({name: 'food', params: {id: this.foodId }}))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
 
-  function save() {
+    created() {
-    validationErrors.value = {};
+      this.loadResource(
-    loadResource(
+        api.getFood(this.foodId)
-        api.patchFood(food.value)
+          .then(data => { this.food = data; return data; })
-            .then(() => router.push({name: 'food', params: {id: foodId.value }}))
+      );
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
+    },
-    );
+
+    components: {
+      FoodEdit
+    }
   }
 
 </script>

app/javascript/components/TheFoodList.vue

@@ -3,7 +3,7 @@
     <h1 class="title">Ingredients</h1>
 
     <div class="buttons">
-      <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
+      <router-link v-if="isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
     </div>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="food" @changePage="changePage"></app-pager>
@@ -35,14 +35,12 @@
         <td>{{i.kcal}}</td>
         <td>{{i.density}}</td>
         <td>
-          <template v-if="appConfig.isLoggedIn">
+          <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: i.id } }">
-            <router-link class="button" :to="{name: 'edit_food', params: { id: i.id } }">
+            <app-icon icon="pencil"></app-icon>
-              <app-icon icon="pencil"></app-icon>
+          </router-link>
-            </router-link>
+          <button v-if="isLoggedIn" type="button" class="button is-danger" @click="deleteFood(i)">
-            <button type="button" class="button is-danger" @click="deleteFood(i)">
+            <app-icon icon="x"></app-icon>
-              <app-icon icon="x"></app-icon>
+          </button>
-            </button>
-          </template>
         </td>
       </tr>
       </transition-group>
@@ -51,80 +49,114 @@
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="food" @changePage="changePage"></app-pager>
 
     <div class="buttons">
-      <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
+      <router-link v-if="isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
     </div>
 
-    <app-confirm :open="showConfirmFoodDelete" title="Delete Ingredient?" :message="confirmFoodDeleteMessage" @cancel="foodDeleteCancel" @confirm="foodDeleteConfirm"></app-confirm>
+    <app-confirm :open="showConfirmFoodDelete" :message="confirmFoodDeleteMessage" :cancel="foodDeleteCancel" :confirm="foodDeleteConfirm"></app-confirm>
 
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, reactive, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
-  import { useAppConfigStore } from "../stores/appConfig";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const { loadResource } = useLoadResource();
+    data() {
+      return {
+        foodData: null,
+        foodForDeletion: null,
+        search: {
+          page: 1,
+          per: 25,
+          name: null
+        }
+      };
+    },
 
-  const foodData = ref(null);
+    computed: {
-  const foodForDeletion = ref(null);
+      foods() {
-  const search = reactive({
+        if (this.foodData) {
-    page: 1,
+          return this.foodData.foods;
-    per: 25,
+        } else {
-    name: null
+          return [];
-  });
+        }
+      },
 
-  const foods = computed(() => foodData.value?.foods || []);
+      totalPages() {
-  const totalPages = computed(() => foodData.value?.total_pages || 0);
+        if (this.foodData) {
-  const currentPage = computed(() => foodData.value?.current_page || 0);
+          return this.foodData.total_pages
-  const showConfirmFoodDelete = computed(() => foodForDeletion.value !== null);
+        }
-  const confirmFoodDeleteMessage = computed(() => {
+        return 0;
-    if (foodForDeletion.value !== null) {
+      },
-      return `Are you sure you want to delete ${foodForDeletion.value.name}?`;
-    } else {
-      return "??";
-    }
-  });
 
-  const getList = debounce(function() {
+      currentPage() {
-    return loadResource(
+        if (this.foodData) {
-        api.getFoodList(search.page, search.per, search.name)
+          return this.foodData.current_page
-            .then(data => foodData.value = data)
+        }
-    );
+        return 0;
-  }, 500, {leading: true, trailing: true});
+      },
 
-  watch(search,
+      showConfirmFoodDelete() {
-      () => getList(),
+        return this.foodForDeletion !== null;
-      {
+      },
-        deep: true,
+
-        immediate: true
+      confirmFoodDeleteMessage() {
+        if (this.foodForDeletion !== null) {
+          return `Are you sure you want to delete ${this.foodForDeletion.name}?`;
+        } else {
+          return "??";
+        }
       }
-  );
+    },
 
-  function changePage(idx) {
+    methods: {
-    search.page = idx;
+      changePage(idx) {
-  }
+        this.search.page = idx;
+      },
 
-  function deleteFood(food) {
+      getList: debounce(function() {
-    foodForDeletion.value = food;
+        return this.loadResource(
-  }
+          api.getFoodList(this.search.page, this.search.per, this.search.name)
+            .then(data => this.foodData = data)
+        );
+      }, 500, {leading: true, trailing: true}),
 
-  function foodDeleteCancel() {
+      deleteFood(food) {
-    foodForDeletion.value = null;
+        this.foodForDeletion = food;
-  }
+      },
 
-  function foodDeleteConfirm() {
+      foodDeleteCancel() {
-    if (foodForDeletion.value !== null) {
+        this.foodForDeletion = null;
-      loadResource(
+      },
-          api.deleteFood(foodForDeletion.value.id).then(res => {
+
-            foodForDeletion.value = null;
+      foodDeleteConfirm() {
-            return getList();
+        if (this.foodForDeletion !== null) {
-          })
+          this.loadResource(
+            api.deleteFood(this.foodForDeletion.id).then(res => {
+              this.foodForDeletion = null;
+              return this.getList();
+            })
+          );
+
+          console.log("This is where the thing happens!!");
+          this.foodForDeletion = null;
+        }
+      }
+    },
+
+    created() {
+      this.$watch("search",
+        () => this.getList(),
+        {
+          deep: true,
+          immediate: true
+        }
       );
+    },
+
+    components: {
     }
   }
 

app/javascript/components/TheLog.vue

@@ -8,34 +8,42 @@
     </div>
 
     <div class="buttons">
-      <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
+      <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
       <router-link class="button" to="/logs">Back</router-link>
     </div>
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref } from "vue";
-  import { useRoute } from "vue-router";
   import LogShow from "./LogShow";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useAppConfigStore } from "../stores/appConfig";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const route = useRoute();
+    data: function () {
-  const appConfig = useAppConfigStore();
+      return {
+        log: null
+      }
+    },
 
-  const log = ref(null);
+    computed: {
-  const logId = computed(() => route.params.id);
+      ...mapState({
+        logId: state => state.route.params.id,
+      })
+    },
 
-  onBeforeMount(() => {
+    created() {
-    loadResource(
+      this.loadResource(
-        api.getLog(logId.value)
+        api.getLog(this.logId)
-            .then(data => { log.value = data; return data; })
+          .then(data => { this.log = data; return data; })
-    );
+      );
-  });
+    },
+
+    components: {
+      LogShow
+    }
+  }
 
 </script>
 

app/javascript/components/TheLogCreator.vue

@@ -16,44 +16,54 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, reactive, ref } from "vue";
-  import { useRoute, useRouter } from "vue-router";
   import LogEdit from "./LogEdit";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const route = useRoute();
+    data() {
-  const router = useRouter();
+      return {
+        validationErrors: {},
+        log: {
+          date: null,
+          rating: null,
+          notes: null,
+          recipe: null
+        }
+      }
+    },
 
-  const validationErrors = ref({});
+    computed: {
-  const log = reactive({
+      ...mapState({
-    date: null,
+        recipeId: state => state.route.params.recipeId,
-    rating: null,
+      })
-    notes: null,
+    },
-    recipe: null
-  });
 
-  const recipeId = computed(() => route.params.recipeId);
+    methods: {
+      save() {
+        this.log.original_recipe_id = this.recipeId;
+        this.validationErrors = {};
 
-  onBeforeMount(() => {
+        this.loadResource(
-    loadResource(
+          api.postLog(this.log)
-        api.getRecipe(recipeId.value, null, null, null, data => log.recipe = data)
+            .then(() => this.$router.push('/'))
-    );
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
-  });
+        );
+      }
+    },
 
-  function save() {
+    created() {
-    log.original_recipe_id = recipeId.value;
+      this.loadResource(
-    validationErrors.value = {};
+        api.getRecipe(this.recipeId, null, null, null, data => this.log.recipe = data)
+      );
+    },
 
-    loadResource(
+    components: {
-        api.postLog(log)
+      LogEdit
-            .then(() => router.push('/'))
+    }
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
-    );
   }
 
 </script>

app/javascript/components/TheLogEditor.vue

@@ -16,38 +16,48 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref, watch } from "vue";
+  import { mapState } from "vuex";
-  import { useRoute, useRouter } from "vue-router";
   import api from "../lib/Api";
   import * as Errors from "../lib/Errors";
   import LogEdit from "./LogEdit";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const route = useRoute();
+    data() {
-  const router = useRouter();
+      return {
+        validationErrors: {},
+        log: null
+      }
+    },
 
-  const validationErrors = ref({});
+    computed: {
-  const log = ref(null);
+      ...mapState({
+        logId: state => state.route.params.id,
+      })
+    },
 
-  const logId = computed(() => route.params.id);
+    methods: {
+      save() {
+        this.validationErrors = {};
+        this.loadResource(
+          api.patchLog(this.log)
+            .then(() => this.$router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
 
-  onBeforeMount(() => {
+    created() {
-    loadResource(
+      this.loadResource(
-        api.getLog(logId.value)
+        api.getLog(this.logId)
-            .then(data => { log.value = data; return data; })
+          .then(data => { this.log = data; return data; })
-    );
+      );
-  });
+    },
 
-  function save() {
+    components: {
-    validationErrors.value = {};
+      LogEdit
-    loadResource(
+    }
-        api.patchLog(log.value)
-            .then(() => router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
-    );
   }
 
 </script>

app/javascript/components/TheLogList.vue

@@ -5,64 +5,86 @@
     </h1>
 
     <table class="table">
-      <thead>
       <tr>
         <th>Recipe</th>
         <th>Date</th>
         <th>Rating</th>
         <th>Notes</th>
       </tr>
-      </thead>
 
-      <tbody>
       <tr v-for="l in logs" :key="l.id">
         <td> <router-link :to="{name: 'log', params: {id: l.id}}">{{l.recipe.name}}</router-link></td>
         <td><app-date-time :date-time="l.date" :show-time="false"></app-date-time> </td>
-        <td><app-rating :model-value="l.rating" readonly></app-rating></td>
+        <td><app-rating :value="l.rating" readonly></app-rating></td>
         <td>{{l.notes}}</td>
       </tr>
-      </tbody>
 
     </table>
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, reactive, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
+    data() {
+      return {
+        logData: null,
+        search: {
+          page: 1,
+          per: 25
+        }
+      };
+    },
 
-  const logData = ref(null);
+    computed: {
-  const search = reactive({
+      logs() {
-    page: 1,
+        if (this.logData) {
-    per: 25
+          return this.logData.logs;
-  });
+        } else {
+          return [];
+        }
+      },
 
-  const logs = computed(() => logData.value?.logs || []);
+      totalPages() {
-  const totalPages = computed(() => logData.value?.total_pages || 0);
+        if (this.logData) {
-  const currentPage = computed(() => logData.value?.current_page || 0);
+          return this.logData.total_pages
+        }
+        return 0;
+      },
 
-  const getList = debounce(function() {
+      currentPage() {
-    loadResource(
+        if (this.logData) {
-        api.getLogList(search.page, search.per)
+          return this.logData.current_page
-            .then(data => logData.value = data)
+        }
-    );
+        return 0;
-  }, 500, {leading: true, trailing: true});
-
-  watch(search,
-      () => getList(),
-      {
-        deep: true,
-        immediate: true
       }
-  );
+    },
 
-  function changePage(idx) {
+    methods: {
-    search.page = idx;
+      changePage(idx) {
+        this.search.page = idx;
+      },
+
+      getList: debounce(function() {
+        this.loadResource(
+          api.getLogList(this.search.page, this.search.per)
+            .then(data => this.logData = data)
+        );
+      }, 500, {leading: true, trailing: true})
+    },
+
+    created() {
+      this.$watch("search",
+        () => this.getList(),
+        {
+          deep: true,
+          immediate: true
+        }
+      );
+    }
   }
 
 </script>

app/javascript/components/TheNotesList.vue

@@ -9,15 +9,12 @@
     </app-modal>
 
     <table class="table">
-      <thead>
       <tr>
         <th>Note</th>
         <th>Date</th>
         <th></th>
       </tr>
-      </thead>
 
-      <tbody>
       <tr v-for="n in notes" :key="n.id">
         <td>
           {{ n.content }}
@@ -31,60 +28,68 @@
           </button>
         </td>
       </tr>
-      </tbody>
 
     </table>
   </div>
 
 </template>
 
-<script setup>
+<script>
 
-  import { onBeforeMount, ref } from "vue";
   import api from "../lib/Api";
   import NoteEdit from "./NoteEdit";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const notes = ref([]);
+    data() {
-  const editNote = ref(null);
+      return {
+        notes: [],
+        editNote: null
+      };
+    },
 
-  onBeforeMount(() => {
+    methods: {
-    refreshList();
+      refreshList() {
-  });
+        this.loadResource(
+          api.getNoteList()
+            .then(data => this.notes = data)
+        );
+      },
 
-  function refreshList() {
+      addNote() {
-    loadResource(
+        this.editNote = { id: null, content: "" };
-        api.getNoteList()
+      },
-            .then(data => notes.value = data)
-    );
-  }
 
-  function addNote() {
+      saveNote() {
-    editNote.value = { id: null, content: "" };
+        this.loadResource(
-  }
+          api.postNote(this.editNote)
-
-  function saveNote() {
-    loadResource(
-        api.postNote(editNote.value)
             .then(() => {
-              editNote.value = null;
+              this.editNote = null;
-              return refreshList();
+              return this.refreshList();
             })
-    );
+        );
-  }
+      },
 
-  function cancelNote() {
+      cancelNote() {
-    editNote.value = null;
+        this.editNote = null;
-  }
+      },
 
-  function deleteNote(n) {
+      deleteNote(n) {
-    loadResource(
+        this.loadResource(
-        api.deleteNote(n)
+          api.deleteNote(n)
             .then(() => {
-              return refreshList();
+              return this.refreshList();
             })
-    );
+        );
+      }
+    },
+
+    created() {
+      this.refreshList();
+    },
+
+    components: {
+      NoteEdit
+    }
   }
 
 </script>

app/javascript/components/TheRecipe.vue

@@ -17,53 +17,63 @@
       <recipe-show :recipe="recipe"></recipe-show>
     </div>
 
-    <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
+    <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
     <router-link class="button" to="/">Back</router-link>
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, ref, watch } from "vue";
-  import { useRoute } from "vue-router";
   import RecipeShow from "./RecipeShow";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useAppConfigStore } from "../stores/appConfig";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const route = useRoute();
+    data: function () {
-  const { loadResource } = useLoadResource();
+      return {
-  const recipe = ref(null);
+        recipe: null,
-
+        showNutrition: false
-  const recipeId = computed(() => route.params.id);
-  const scale = computed(() => route.query.scale || null);
-  const system = computed(() => route.query.system || null);
-  const unit = computed(() => route.query.unit || null);
-  const isScaled = computed(() => recipe.value?.converted_scale?.length !== undefined && recipe.value.converted_scale.length > 0 && recipe.value.converted_scale !== "1");
-
-  watch(
-      () => route.query,
-      () => refreshData(),
-      { immediate: true }
-  );
-
-  watch(
-      () => recipe.value,
-      (newRecipe) => {
-        if (newRecipe) {
-          document.title = `${newRecipe.name}`;
-        }
       }
-  )
+    },
 
-  function refreshData() {
+    computed: {
-    loadResource(
+      ...mapState({
-        api.getRecipe(recipeId.value, scale.value, system.value, unit.value, data => recipe.value = data)
+        recipeId: state => state.route.params.id,
-    );
+        routeQuery: state => state.route.query,
+        scale: state => state.route.query.scale || null,
+        system: state => state.route.query.system || null,
+        unit: state => state.route.query.unit || null
+      }),
+
+      isScaled() {
+        return this.recipe.converted_scale !== null && this.recipe.converted_scale.length > 0 && this.recipe.converted_scale !== "1";
+      }
+    },
+
+    watch: {
+      routeQuery() {
+        this.refreshData();
+      }
+    },
+
+    methods: {
+      refreshData() {
+        this.loadResource(
+          api.getRecipe(this.recipeId, this.scale, this.system, this.unit, data => this.recipe = data)
+        );
+      }
+    },
+
+    created() {
+      this.refreshData();
+    },
+
+    components: {
+      RecipeShow
+    }
   }
 
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

app/javascript/components/TheRecipeCreator.vue

@@ -13,38 +13,44 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { ref } from "vue";
-  import { useRouter } from "vue-router";
   import RecipeEdit from "./RecipeEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const router = useRouter();
+  export default {
-  const { loadResource } = useLoadResource();
+    data() {
+      return {
+        validationErrors: {},
+        recipe: {
+          name: null,
+          source: null,
+          description: null,
+          yields: null,
+          total_time: null,
+          active_time: null,
+          step_text: null,
+          tags: [],
+          ingredients: []
+        }
+      }
+    },
 
-  const validationErrors = ref({});
+    methods: {
-  const recipe = ref({
+      save() {
-    name: null,
+        this.validationErrors = {};
-    source: null,
+        this.loadResource(
-    description: null,
+          api.postRecipe(this.recipe)
-    yields: null,
+            .then(() => this.$router.push('/'))
-    total_time: null,
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
-    active_time: null,
+        );
-    step_text: null,
+      }
-    tags: [],
+    },
-    ingredients: []
-  });
 
-  function save() {
+    components: {
-    validationErrors.value = {};
+      RecipeEdit
-    loadResource(
+    }
-        api.postRecipe(recipe.value)
-            .then(() => router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
-    );
   }
 
 </script>

app/javascript/components/TheRecipeEditor.vue

@@ -18,39 +18,49 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref } from "vue";
-  import { useRoute, useRouter } from "vue-router";
-  import { useLoadResource } from "../lib/useLoadResource";
   import RecipeEdit from "./RecipeEdit";
+  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const route = useRoute();
+    data: function () {
-  const router = useRouter();
+      return {
-  const recipe = ref(null);
+        recipe: null,
-  const validationErrors = ref({});
+        validationErrors: {}
+      }
+    },
 
-  const recipeId = computed(() => route.params.id);
+    computed: {
+      ...mapState({
+        recipeId: state => state.route.params.id,
+      })
+    },
 
-  onBeforeMount(() => {
+    methods: {
-    loadResource(
+      save() {
-        api.getRecipe(recipeId.value, null, null, null, data => { recipe.value = data; return data; })
+        this.validationErrors = {};
-    );
+        this.loadResource(
-  });
+          api.patchRecipe(this.recipe)
+            .then(() => this.$router.push({name: 'recipe', params: {id: this.recipeId }}))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
 
-  function save() {
+    created() {
-    validationErrors.value = {};
+      this.loadResource(
-    loadResource(
+        api.getRecipe(this.recipeId, null, null, null, data => { this.recipe = data; return data; })
-        api.patchRecipe(recipe.value)
+      );
-            .then(() => router.push({name: 'recipe', params: {id: recipeId.value }}))
+    },
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
+
-    );
+    components: {
+      RecipeEdit
+    }
   }
 
-
 </script>
 
 <style lang="scss" scoped>

app/javascript/components/TheRecipeList.vue

@@ -2,7 +2,7 @@
   <div>
     <h1 class="title">Recipes</h1>
 
-    <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
+    <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
 
@@ -11,7 +11,7 @@
 
 
 
-    <table class="table is-fullwidth" :class="{ small: isTouch }">
+    <table class="table is-fullwidth" :class="{ small: mediaQueries.touch }">
       <thead>
       <tr>
         <th v-for="h in tableHeader" :key="h.name">
@@ -25,10 +25,10 @@
       </tr>
       <tr>
         <td>
-          <app-search-text placeholder="search names" :value="search.name" @update:modelValue="setSearchName($event)"></app-search-text>
+          <app-search-text placeholder="search names" :value="search.name" @input="setSearchName($event)"></app-search-text>
         </td>
         <td>
-          <app-search-text placeholder="search tags" :value="search.tags" @update:modelValue="setSearchTags($event)"></app-search-text>
+          <app-search-text placeholder="search tags" :value="search.tags" @input="setSearchTags($event)"></app-search-text>
         </td>
         <td colspan="5"></td>
       </tr>
@@ -42,19 +42,17 @@
           </div>
         </td>
         <td>
-          <app-rating v-if="r.rating !== null" :model-value="r.rating" readonly></app-rating>
+          <app-rating v-if="r.rating !== null" :value="r.rating" readonly></app-rating>
           <span v-else>--</span>
         </td>
         <td>{{ r.yields }}</td>
         <td class="recipe-time">{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
         <td><app-date-time :date-time="r.created_at" :show-time="false"></app-date-time></td>
         <td>
-          <app-dropdown hover v-if="appConfig.isLoggedIn" class="is-right">
+          <app-dropdown hover v-if="isLoggedIn" class="is-right">
-            <template #button>
+            <button slot="button" class="button is-small">
-              <button class="button is-small">
+              <app-icon icon="menu"></app-icon>
-                <app-icon icon="menu"></app-icon>
+            </button>
-              </button>
-            </template>
 
             <div class="dropdown-item">
               <router-link :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary is-fullwidth">
@@ -85,217 +83,239 @@
     </div>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
-    <app-confirm :open="showConfirmRecipeDelete" title="Delete Recipe?" :message="confirmRecipeDeleteMessage" @cancel="recipeDeleteCancel" @confirm="recipeDeleteConfirm"></app-confirm>
+    <app-confirm :open="showConfirmRecipeDelete" :message="confirmRecipeDeleteMessage" :cancel="recipeDeleteCancel" :confirm="recipeDeleteConfirm"></app-confirm>
 
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, reactive, ref, watch } from "vue";
-  import { useRouter } from 'vue-router'
   import api from "../lib/Api";
+  import debounce from "lodash/debounce";
+  import { mapMutations, mapState } from "vuex";
   import AppLoading from "./AppLoading";
-  import { useAppConfigStore } from "../stores/appConfig";
-  import { useMediaQueryStore } from "../stores/mediaQuery";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const mediaQueries = useMediaQueryStore();
+    props: {
-  const { loadResource, localLoading } = useLoadResource();
+      searchQuery: {
-  const router = useRouter();
+        type: Object,
-
+        required: false,
-  const props = defineProps({
+        default: {}
-    searchQuery: {
-      type: Object,
-      required: false,
-      default: {}
-    }
-  });
-
-  const tableHeader = [
-    {name: 'name', label: 'Name', sort: true},
-    {name: 'tags', label: 'Tags', sort: false},
-    {name: 'rating', label: 'Rating', sort: true},
-    {name: 'yields', label: 'Yields', sort: false},
-    {name: 'total_time', label: 'Time', sort: true},
-    {name: 'created_at', label: 'Created', sort: true}
-  ];
-
-  const recipeData = ref(null);
-  const recipeForDeletion = ref(null);
-  const isTouch = computed(() => mediaQueries.touch);
-
-  const search = computed(() => ({
-    name: props.searchQuery.name || null,
-    tags: props.searchQuery.tags || null,
-    column: props.searchQuery.column || "created_at",
-    direction: props.searchQuery.direction || "desc",
-    page: props.searchQuery.page || 1,
-    per: props.searchQuery.per || 25
-  }));
-
-  const recipes = computed(() => {
-    if (recipeData.value) {
-      return recipeData.value.recipes;
-    } else {
-      return [];
-    }
-  });
-
-  const totalPages = computed(() => {
-    if (recipeData.value) {
-      return recipeData.value.total_pages;
-    }
-    return 0;
-  });
-
-  const currentPage = computed(() => {
-    if (recipeData.value) {
-      return recipeData.value.current_page;
-    }
-    return 0;
-  });
-
-  const showConfirmRecipeDelete = computed(() => recipeForDeletion.value !== null);
-
-  const confirmRecipeDeleteMessage = computed(() => {
-    if (showConfirmRecipeDelete.value) {
-      return `Are you sure you want to delete ${recipeForDeletion.value.name}?`;
-    } else {
-      return "??";
-    }
-  });
-
-  watch(search, () => {
-    getList().then(() => appConfig.initialLoad = true);
-  }, {
-    deep: true,
-    immediate: true
-  });
-
-  function getList() {
-    return loadResource(
-        api.getRecipeList(search.value.page, search.value.per, search.value.column, search.value.direction, search.value.name, search.value.tags, data => recipeData.value = data)
-    );
-  }
-
-
-  function buildQueryParams() {
-    return {
-      name: props.searchQuery.name,
-      tags: props.searchQuery.tags,
-      column: props.searchQuery.column,
-      direction: props.searchQuery.direction,
-      page: props.searchQuery.page,
-      per: props.searchQuery.per
-    }
-  }
-
-  function redirectToParams(params) {
-    const rParams = {};
-
-    if (params.name) {
-      rParams.name = params.name;
-    }
-
-    if (params.tags) {
-      rParams.tags = params.tags;
-    }
-
-    if (params.column) {
-      rParams.column = params.column;
-    }
-
-    if (params.direction) {
-      rParams.direction = params.direction;
-    }
-
-    if (params.page) {
-      rParams.page = params.page;
-    }
-
-    if (params.per) {
-      rParams.per = params.per;
-    }
-
-    router.push({name: 'recipeList', query: rParams});
-  }
-
-  function changePage(idx) {
-    const p = buildQueryParams();
-    p.page = idx;
-    redirectToParams(p);
-  }
-
-  function setSort(col) {
-    const p = buildQueryParams();
-
-    if (p.column === col) {
-      p.direction = p.direction === "desc" ? "asc" : "desc";
-    } else {
-      p.column = col;
-      p.direction = "asc";
-    }
-    redirectToParams(p);
-  }
-
-  function setSearchName(name) {
-    const p = buildQueryParams();
-    if (name !== p.name) {
-      p.name = name;
-      p.page = null;
-      redirectToParams(p);
-    }
-  }
-
-  function setSearchTags(tags) {
-    const p = buildQueryParams();
-    if (tags !== p.tags) {
-      p.tags = tags;
-      p.page = null;
-      redirectToParams(p);
-    }
-  }
-
-  function deleteRecipe(recipe) {
-    recipeForDeletion.value = recipe;
-  }
-
-  function recipeDeleteConfirm() {
-    if (recipeForDeletion.value !== null) {
-      loadResource(
-          api.deleteRecipe(recipeForDeletion.value.id).then(() => {
-            recipeForDeletion.value = null;
-            return getList();
-          })
-      );
-    }
-  }
-
-  function recipeDeleteCancel() {
-    recipeForDeletion.value = null;
-  }
-
-  function formatRecipeTime(total, active) {
-    let str = "";
-
-    if (total && total > 0) {
-      str += total;
-    }
-
-    if (active && active > 0) {
-      if (str.length) {
-        str += " (" + active + ")";
-      } else {
-        str += active;
       }
+    },
+
+    data() {
+      return {
+        recipeData: null,
+        recipeForDeletion: null
+      };
+    },
+
+    computed: {
+      ...mapState([
+        "mediaQueries"
+      ]),
+
+      search() {
+        return {
+          name: this.searchQuery.name || null,
+          tags: this.searchQuery.tags || null,
+          column: this.searchQuery.column || "created_at",
+          direction: this.searchQuery.direction || "desc",
+          page: this.searchQuery.page || 1,
+          per: this.searchQuery.per || 25
+        }
+      },
+
+      recipes() {
+        if (this.recipeData) {
+          return this.recipeData.recipes;
+        } else {
+          return [];
+        }
+      },
+
+      tableHeader() {
+        return [
+          {name: 'name', label: 'Name', sort: true},
+          {name: 'tags', label: 'Tags', sort: false},
+          {name: 'rating', label: 'Rating', sort: true},
+          {name: 'yields', label: 'Yields', sort: false},
+          {name: 'total_time', label: 'Time', sort: true},
+          {name: 'created_at', label: 'Created', sort: true}
+        ]
+      },
+
+      totalPages() {
+        if (this.recipeData) {
+          return this.recipeData.total_pages;
+        }
+        return 0;
+      },
+
+      currentPage() {
+        if (this.recipeData) {
+          return this.recipeData.current_page;
+        }
+        return 0;
+      },
+
+      showConfirmRecipeDelete() {
+        return this.recipeForDeletion !== null;
+      },
+
+      confirmRecipeDeleteMessage() {
+        if (this.showConfirmRecipeDelete) {
+          return `Are you sure you want to delete ${this.recipeForDeletion.name}?`;
+        } else {
+          return "??";
+        }
+      }
+    },
+
+    methods: {
+      ...mapMutations([
+        "setInitialLoad"
+      ]),
+      
+      buildQueryParams() {
+        return {
+          name: this.searchQuery.name,
+          tags: this.searchQuery.tags,
+          column: this.searchQuery.column,
+          direction: this.searchQuery.direction,
+          page: this.searchQuery.page,
+          per: this.searchQuery.per
+        }
+      },
+
+      redirectToParams(params) {
+        const rParams = {};
+
+        if (params.name) {
+          rParams.name = params.name;
+        }
+
+        if (params.tags) {
+          rParams.tags = params.tags;
+        }
+
+        if (params.column) {
+          rParams.column = params.column;
+        }
+
+        if (params.direction) {
+          rParams.direction = params.direction;
+        }
+
+        if (params.page) {
+          rParams.page = params.page;
+        }
+
+        if (params.per) {
+          rParams.per = params.per;
+        }
+
+        this.$router.push({name: 'recipeList', query: rParams});
+      },
+
+      changePage(idx) {
+        const p = this.buildQueryParams();
+        p.page = idx;
+        this.redirectToParams(p);
+      },
+
+      setSort(col) {
+        const p = this.buildQueryParams();
+
+        if (p.column === col) {
+          p.direction = p.direction === "desc" ? "asc" : "desc";
+        } else {
+          p.column = col;
+          p.direction = "asc";
+        }
+        this.redirectToParams(p);
+      },
+
+      setSearchName(name) {
+        const p = this.buildQueryParams();
+        if (name !== p.name) {
+          p.name = name;
+          p.page = null;
+          this.redirectToParams(p);
+        }
+      },
+
+      setSearchTags(tags) {
+        const p = this.buildQueryParams();
+        if (tags !== p.tags) {
+          p.tags = tags;
+          p.page = null;
+          this.redirectToParams(p);
+        }
+      },
+
+      deleteRecipe(recipe) {
+        this.recipeForDeletion = recipe;
+      },
+
+      recipeDeleteConfirm() {
+        if (this.recipeForDeletion !== null) {
+          this.loadResource(
+            api.deleteRecipe(this.recipeForDeletion.id).then(() => {
+              this.recipeForDeletion = null;
+              return this.getList();
+            })
+          );
+        }
+      },
+
+      recipeDeleteCancel() {
+        this.recipeForDeletion = null;
+      },
+
+      getList() {
+        return this.loadResource(
+          api.getRecipeList(this.search.page, this.search.per, this.search.column, this.search.direction, this.search.name, this.search.tags, data => this.recipeData = data)
+        );
+      },
+
+      formatRecipeTime(total, active) {
+        let str = "";
+
+        if (total && total > 0) {
+          str += total;
+        }
+
+        if (active && active > 0) {
+          if (str.length) {
+            str += " (" + active + ")";
+          } else {
+            str += active;
+          }
+        }
+
+        return str;
+      }
+    },
+
+    created() {
+      this.$watch("search",
+        () => {
+          this.getList().then(() => this.setInitialLoad(true));
+        },
+        {
+          deep: true,
+          immediate: true
+        }
+      );
+    },
+
+    components: {
+      AppLoading
     }
-
-    return str;
   }
 
-
 </script>
 
 <style lang="scss" scoped>

app/javascript/components/TheTaskListList.vue

@@ -22,16 +22,15 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, onBeforeMount, ref } from "vue";
+  import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useTaskStore } from "../stores/task";
+  import { mapActions, mapMutations, mapState } from "vuex";
 
   import TaskListMiniForm from "./TaskListMiniForm";
   import TaskListDropdownItem from "./TaskListDropdownItem";
   import TaskItemList from "./TaskItemList";
-  import { useLoadResource } from "../lib/useLoadResource";
 
   const newListTemplate = function() {
     return {
@@ -39,52 +38,84 @@
     };
   };
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const taskStore = useTaskStore();
+    data() {
+      return {
+        showListDropdown: false,
+        newList: newListTemplate(),
+        newListValidationErrors: {}
+      }
+    },
 
-  const showListDropdown = ref(false);
+    computed: {
-  const newList = ref(newListTemplate());
+      ...mapState([
-  const newListValidationErrors = ref({});
+        'taskLists',
+        'currentTaskList'
+      ]),
+      listSelectLabel() {
+        if (this.currentTaskList === null) {
+          return "Select or Create a List";
+        } else {
+          return this.currentTaskList.name;
+        }
+      }
+    },
 
-  const taskLists = computed(() => taskStore.taskLists);
+    methods: {
-  const currentTaskList = computed(() => taskStore.currentTaskList);
+      ...mapActions([
-  const listSelectLabel = computed(() => {
+        'refreshTaskLists',
-    if (currentTaskList.value === null) {
+        'createTaskList',
-      return "Select or Create a List";
+        'deleteTaskList',
-    } else {
+        'deleteTaskItems',
-      return currentTaskList.value.name;
+        'completeTaskItems'
+      ]),
+      ...mapMutations([
+        'setCurrentTaskList'
+      ]),
+
+      selectList(list) {
+        this.setCurrentTaskList(list);
+        this.showListDropdown = false;
+      },
+
+      saveNewList() {
+        this.loadResource(
+          this.createTaskList(this.newList)
+            .then(() => this.showListDropdown = false)
+            .then(() => { this.newList = newListTemplate(); this.newListValidationErrors = {}; } )
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newListValidationErrors = err.validationErrors()))
+        );
+      },
+
+      deleteList(list) {
+        this.loadResource(
+          this.deleteTaskList(list)
+        );
+      },
+
+
+
+      deleteAllItems() {
+        this.loadResource(
+          this.deleteTaskItems({
+            taskList: this.currentTaskList,
+            taskItems: this.currentTaskList.task_items
+          })
+        );
+      }
+    },
+
+    created() {
+      this.loadResource(
+        this.refreshTaskLists()
+      );
+    },
+
+    components: {
+      TaskListMiniForm,
+      TaskListDropdownItem,
+      TaskItemList
     }
-  });
-
-  onBeforeMount(() => {
-    loadResource(taskStore.refreshTaskLists());
-  });
-
-  function selectList(list) {
-    taskStore.setCurrentTaskList(list);
-    showListDropdown.value = false;
-  }
-
-  function saveNewList() {
-    loadResource(
-        taskStore.createTaskList(newList.value)
-            .then(() => showListDropdown.value = false)
-            .then(() => { newList.value = newListTemplate(); newListValidationErrors.value = {}; } )
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => newListValidationErrors.value = err.validationErrors()))
-    );
-  }
-
-  function deleteList(list) {
-    loadResource(taskStore.deleteTaskList(list));
-  }
-
-  function deleteAllItems() {
-    loadResource(
-        taskStore.deleteTaskItems({
-          taskList: currentTaskList.value,
-          taskItems: currentTaskList.value.task_items
-        })
-    );
   }
 
 </script>

app/javascript/components/TheUserCreator.vue

@@ -13,37 +13,41 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { ref } from "vue";
-  import { useRouter } from "vue-router";
   import UserEdit from "./UserEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
 
-  const { loadResource } = useLoadResource();
+  export default {
-  const { checkAuthentication } = useCheckAuthentication(loadResource);
+    data() {
-  const router = useRouter();
+      return {
+        validationErrors: {},
+        userObj: {
+          username: '',
+          full_name: '',
+          email: '',
+          password: '',
+          password_confirmation: ''
+        }
+      }
+    },
 
-  const validationErrors = ref({});
+    methods: {
-  const userObj = ref({
+      save() {
-    username: '',
+        this.validationErrors = {};
-    full_name: '',
+        this.loadResource(
-    email: '',
+          api.postUser(this.userObj)
-    password: '',
+            .then(() => this.checkAuthentication())
-    password_confirmation: ''
+            .then(() => this.$router.push('/'))
-  });
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
 
-  function save() {
+    components: {
-    validationErrors.value = {};
+      UserEdit
-    loadResource(
+    }
-        api.postUser(userObj.value)
-            .then(() => checkAuthentication())
-            .then(() => router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
-    );
   }
 
 </script>

app/javascript/components/TheUserEditor.vue

@@ -13,54 +13,61 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { ref, watch } from "vue";
-  import { useRouter } from "vue-router";
   import UserEdit from "./UserEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
-  import { useAppConfigStore } from "../stores/appConfig";
-  import { useLoadResource } from "../lib/useLoadResource";
-  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const { loadResource } = useLoadResource();
+    data() {
-  const { checkAuthentication } = useCheckAuthentication(loadResource);
+      return {
-  const router = useRouter();
+        validationErrors: {},
+        userObj: null
+      }
+    },
 
-  const validationErrors = ref({});
+    created() {
-  const userObj = ref(null);
+      this.refreshUser();
+    },
 
-  watch(
+    watch: {
-      () => appConfig.user,
+      user() {
-      () => refreshUser(),
+        this.refreshUser();
-      { immediate: true });
+      }
+    },
 
-  function refreshUser() {
+    methods: {
-    if (appConfig.user) {
+      refreshUser() {
-      userObj.value = {
+        if (this.user) {
-        username: appConfig.user.username,
+          this.userObj = {
-        full_name: appConfig.user.full_name,
+            username: this.user.username,
-        email: appConfig.user.email,
+            full_name: this.user.full_name,
-        password: '',
+            email: this.user.email,
-        password_confirmation: ''
+            password: '',
-      };
+            password_confirmation: ''
-    } else {
+          };
-      userObj.value = null;
+        } else {
-    }
+          this.userObj = null;
-  }
+        }
+      },
 
-  function save() {
+      save() {
-    validationErrors.value = {};
+        this.validationErrors = {};
-    loadResource(
+        this.loadResource(
-        api.patchUser(userObj.value)
+          api.patchUser(this.userObj)
-            .then(() => checkAuthentication())
+            .then(() => this.checkAuthentication())
             .then(() => {
-              router.push('/');
+              this.$router.push('/');
             })
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
-    );
+        );
+      }
+    },
+
+    components: {
+      UserEdit
+    }
   }
 
 </script>

app/javascript/components/UserEdit.vue

@@ -3,19 +3,21 @@
     <app-text-field label="Username" v-model="userObj.username"></app-text-field>
     <app-text-field label="Name" v-model="userObj.full_name"></app-text-field>
     <app-text-field label="Email" v-model="userObj.email"></app-text-field>
-    <app-text-field type="password" label="Password" v-model="userObj.password"></app-text-field>
+    <app-text-field label="Password" v-model="userObj.password"></app-text-field>
-    <app-text-field type="password" label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
+    <app-text-field label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
   </div>
 </template>
 
-<script setup>
+<script>
 
-  const props = defineProps({
+  export default {
-    userObj: {
+    props: {
-      required: true,
+      userObj: {
-      type: Object
+        required: true,
+        type: Object
+      }
     }
-  });
+  }
 
 </script>
 

app/javascript/components/UserLogin.vue

@@ -34,7 +34,7 @@
               <button type="submit" class="button is-primary" :disabled="!enableSubmit">Login</button>
             </div>
             <div class="control">
-              <button type="button" class="button is-secondary" @click="showLogin = false">Cancel</button>
+              <button class="button is-secondary" @click="showLogin = false">Cancel</button>
             </div>
           </div>
 
@@ -45,44 +45,57 @@
   </div>
 </template>
 
-<script setup>
+<script>
 
-  import { computed, nextTick, ref, useTemplateRef } from "vue";
+  import api from "../lib/Api";
-  import { useAppConfigStore } from "../stores/appConfig";
+  import { mapActions, mapState } from "vuex";
-  import { useLoadResource } from "../lib/useLoadResource";
 
-  const appConfig = useAppConfigStore();
+  export default {
-  const { loadResource } = useLoadResource();
+    data() {
+      return {
+        showLogin: false,
+        error: '',
+        username: '',
+        password: ''
+      };
+    },
 
-  const userNameElement = useTemplateRef("usernameInput");
+    computed: {
+      ...mapState([
+        'loginMessage'
+      ]),
+      enableSubmit() {
+        return this.username !== '' && this.password !== '' && !this.isLoading;
+      }
+    },
 
-  const showLogin = ref(false);
+    methods: {
-  const error = ref('');
+      ...mapActions([
-  const username = ref("");
+        'login'
-  const password = ref("");
+      ]),
 
-  const loginMessage = computed(() => appConfig.loginMessage);
+      openDialog() {
-  const enableSubmit = computed(() => username.value !== "" && password.value !== "" && !appConfig.isLoading);
+        this.showLogin = true;
+        this.$nextTick(() => this.$refs.usernameInput.focus());
+      },
 
-  function openDialog() {
+      performLogin() {
-    showLogin.value = true;
+        if (this.username !== '' && this.password !== '') {
-    nextTick(() => {
+          const params = {username: this.username, password: this.password};
-      userNameElement.value.focus();
-    })
-  }
 
-  function performLogin() {
+          this.loadResource(
-    if (username.value !== '' && password.value !== '') {
+            this.login(params)
-      const params = {username: username.value, password: password.value};
-
-      loadResource(
-          appConfig.login(params)
               .then(data => {
                 if (data.success) {
-                  showLogin.value = false;
+                  this.showLogin = false;
                 }
               })
-      );
+          );
+        }
+      }
+    },
+
+    components: {
     }
   }
 

app/javascript/lib/ActionCable.js

@@ -1,17 +0,0 @@
-import * as cable from "@rails/actioncable";
-
-let consumer = null;
-
-function createChannel(baseUrl, ...args) {
-  if (consumer === null) {
-    if (baseUrl !== null && baseUrl.toString() !== "") {
-      consumer = cable.createConsumer(baseUrl);
-    } else {
-      consumer = cable.createConsumer();
-    }
-  }
-
-  return consumer.subscriptions.create(...args);
-}
-
-export { createChannel };

app/javascript/lib/Api.js

@@ -1,4 +1,4 @@
-import config from './config';
+import config from '../config';
 import * as Errors from './Errors';
 
 class Api {

app/javascript/lib/ClickStrike.js

@@ -1,35 +0,0 @@
-
-function clickStrikeClick(evt) {
-  const isStrikable = el => el && el.tagName === "LI";
-  const strikeClass = "is-strikethrough";
-
-  let t = evt.target;
-
-  while (t !== null && t !== this && !isStrikable(t)) {
-    t = t.parentElement;
-  }
-
-  if (isStrikable(t)) {
-    const classList = t.className.split(" ");
-    const strIdx = classList.findIndex(c => c === strikeClass);
-    if (strIdx >= 0) {
-      classList.splice(strIdx, 1);
-    } else {
-      classList.push(strikeClass);
-    }
-
-    t.className = classList.join(" ");
-  }
-}
-
-export function installClickStrike(app) {
-  app.directive('click-strike', {
-    beforeMount(el) {
-      el.addEventListener("click", clickStrikeClick);
-    },
-
-    unmounted(el) {
-      el.removeEventListener("click", clickStrikeClick);
-    }
-  });
-}

app/javascript/lib/GlobalMixins.js

@@ -0,0 +1,84 @@
+
+import Vue from 'vue';
+import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
+import api from "../lib/Api";
+
+Vue.mixin({
+  data() {
+    return {
+      localLoadingCount: 0
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "isLoading",
+      "isLoggedIn",
+      "isAdmin"
+    ]),
+    ...mapState([
+      "user"
+    ]),
+    localLoading() {
+      return this.localLoadingCount > 0;
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateCurrentUser'
+    ]),
+    ...mapMutations([
+      'setError',
+      'setLoading'
+    ]),
+
+    loadResource(promise) {
+      this.setLoading(true);
+      this.localLoadingCount = this.localLoadingCount + 1;
+
+      return promise
+        .catch(err => this.setError(err))
+        .then(res => {
+          this.setLoading(false);
+          this.localLoadingCount = this.localLoadingCount - 1;
+          return res;
+        });
+    },
+
+    checkAuthentication() {
+      return this.loadResource(this.updateCurrentUser());
+    }
+  }
+});
+
+function clickStrikeClick(evt) {
+  const isStrikable = el => el && el.tagName === "LI";
+  const strikeClass = "is-strikethrough";
+
+  let t = evt.target;
+
+  while (t !== null && t !== this && !isStrikable(t)) {
+    t = t.parentElement;
+  }
+
+  if (isStrikable(t)) {
+    const classList = t.className.split(" ");
+    const strIdx = classList.findIndex(c => c === strikeClass);
+    if (strIdx >= 0) {
+      classList.splice(strIdx, 1);
+    } else {
+      classList.push(strikeClass);
+    }
+
+    t.className = classList.join(" ");
+  }
+}
+
+Vue.directive('click-strike', {
+  bind(el) {
+    el.addEventListener("click", clickStrikeClick);
+  },
+
+  unbind(el) {
+    el.removeEventListener("click", clickStrikeClick);
+  }
+});

app/javascript/lib/ServiceWorker.js

@@ -1,6 +1,4 @@
 
-import { useAppConfigStore } from '../stores/appConfig';
-
 function trackInstall(worker, cb) {
   worker.addEventListener('statechange', function() {
     if (worker.state == 'installed') {
@@ -20,9 +18,7 @@ function trackActive(worker, cb) {
 export function swUpdate() {
   navigator.serviceWorker.getRegistration().then(reg => {
     if (reg && reg.waiting) {
-      trackActive(reg.waiting, () => {
+      trackActive(reg.waiting, () => window.location.reload(true));
-        window.location.reload(true)
-      });
       reg.waiting.postMessage("skipWaiting");
     } else {
       window.location.reload(true);
@@ -31,17 +27,10 @@ export function swUpdate() {
 
 }
 
-export function swInit() {
+export function swInit(store) {
 
-  const updateReady = () => {
+  const updateReady = () => store.commit("setUpdateAvailable", true);
-    const store = useAppConfigStore();
+  const clearUpdateReady = () => store.commit("setUpdateAvailable", false);
-    store.updateAvailable = true;
-  };
-
-  const clearUpdateReady = () => {
-    const store = useAppConfigStore();
-    store.updateAvailable = false;
-  }
 
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js')
@@ -64,4 +53,6 @@ export function swInit() {
         console.log('Registration failed with ' + error);
       });
   }
+
+
 }

app/javascript/lib/VuexResponsiveSync.js

@@ -0,0 +1,49 @@
+// Adds a module to a vuex store with a set of media query states
+
+const defaultOptions = {
+  module: "mediaQueries"
+};
+
+// Hard coded values taken directly from Bulma css
+const mobileBp = 768;
+const desktopBp = 1024;
+const widscreenBp = 1216;
+const fullHdBp = 1408;
+
+const mediaQueries = {
+  mobile: `screen and (max-width: ${mobileBp}px)`,
+  tablet: `screen and (min-width: ${mobileBp + 1}px)`,
+  tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
+  touch: `screen and (max-width: ${desktopBp - 1}px)`,
+  desktop: `screen and (min-width: ${desktopBp}px)`,
+  desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
+  widescreen: `screen and (min-width: ${widscreenBp}px)`,
+  widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
+  fullhd: `screen and (min-width: ${fullHdBp}px)`
+};
+
+export default function(store, options) {
+  let opts = Object.assign({}, defaultOptions, options || {});
+  const moduleName = opts.module;
+
+  const initialState = {};
+
+  for (let device in mediaQueries) {
+    const query = window.matchMedia(mediaQueries[device]);
+    query.onchange = (q) => {
+      store.commit(moduleName + "/MEDIA_QUERY_CHANGED", {mediaName: device, value: q.matches});
+    };
+    initialState[device] = query.matches;
+  }
+
+  store.registerModule(moduleName, {
+    namespaced: true,
+    state: initialState,
+    mutations: {
+      "MEDIA_QUERY_CHANGED" (state, data) {
+        state[data.mediaName] = data.value;
+      }
+    }
+  });
+
+}

app/javascript/lib/useAutosize.js

@@ -1,9 +0,0 @@
-import { onBeforeUnmount } from "vue";
-import autosize from 'autosize';
-
-export function useAutosize(elementRef) {
-  autosize(elementRef.value);
-  onBeforeUnmount(() => {
-    autosize.destroy(elementRef.value);
-  });
-}

app/javascript/lib/useCheckAuthentication.js

@@ -1,12 +0,0 @@
-import { useAppConfigStore } from "../stores/appConfig";
-
-export function useCheckAuthentication(loadResource) {
-  const appConfig = useAppConfigStore();
-  const checkAuthentication = function() {
-    return loadResource(appConfig.updateCurrentUser());
-  }
-
-  return {
-    checkAuthentication
-  }
-}

app/javascript/lib/useGlobalTweenGroup.js

@@ -1,10 +0,0 @@
-import { Group } from '@tweenjs/tween.js'
-
-let group = null;
-
-export function useGlobalTweenGroup() {
-  if (group === null) {
-    group = new Group();
-  }
-  return group;
-}

app/javascript/lib/useLoadResource.js

@@ -1,27 +0,0 @@
-import { computed, ref } from "vue";
-import { useAppConfigStore } from "../stores/appConfig";
-
-export function useLoadResource() {
-  const appConfig = useAppConfigStore();
-  const localLoadingCount = ref(0);
-  const localLoading = computed(() => localLoadingCount.value > 0);
-
-  const loadResource = async (promise) => {
-    appConfig.setLoading(true);
-    localLoadingCount.value = localLoadingCount.value + 1;
-    try {
-      return await promise;
-    } catch (error) {
-      appConfig.setError(error);
-    } finally {
-      appConfig.setLoading(false);
-      localLoadingCount.value = localLoadingCount.value - 1;
-    }
-  };
-
-  return {
-    loadResource,
-    localLoading,
-    localLoadingCount
-  };
-}

app/javascript/packs/application.js

@@ -1,10 +1,17 @@
 import '../styles';
-import { createApp } from 'vue';
+import "vue-resize/dist/vue-resize";
-import { createPinia } from 'pinia';
+
+import Vue from 'vue'
+import { sync } from 'vuex-router-sync';
 import { swInit } from "../lib/ServiceWorker";
-import config from '../lib/config';
+import responsiveSync from "../lib/VuexResponsiveSync";
-import { installClickStrike } from "../lib/ClickStrike";
+import VueProgressBar from "vue-progressbar";
+import VueResize from "vue-resize";
+import config from '../config';
+import store from '../store';
 import router from '../router';
+import '../lib/GlobalMixins';
+import App from '../components/App';
 
 import AppAutocomplete from "../components/AppAutocomplete";
 import AppConfirm from "../components/AppConfirm";
@@ -23,40 +30,57 @@ import AppTagEditor from "../components/AppTagEditor";
 import AppTextField from "../components/AppTextField";
 import AppValidationErrors from "../components/AppValidationErrors";
 
-import App from '../components/App.vue'
+Vue.component("AppAutocomplete", AppAutocomplete);
+Vue.component("AppConfirm", AppConfirm);
+Vue.component("AppDateTime", AppDateTime);
+Vue.component("AppDatePicker", AppDatePicker);
+Vue.component("AppDropdown", AppDropdown);
+Vue.component("AppExpandTransition", AppExpandTransition);
+Vue.component("AppIcon", AppIcon);
+Vue.component("AppIconicIcon", AppIconicIcon);
+Vue.component("AppModal", AppModal);
+Vue.component("AppNavbar", AppNavbar);
+Vue.component("AppPager", AppPager);
+Vue.component("AppRating", AppRating);
+Vue.component("AppSearchText", AppSearchText);
+Vue.component("AppTagEditor", AppTagEditor);
+Vue.component("AppTextField", AppTextField);
+Vue.component("AppValidationErrors", AppValidationErrors);
 
-// Resize?
+
-// Progressbar?
+Vue.use(VueProgressBar, {
+//  color: '#bffaf3',
+//  failedColor: '#874b4b',
+//   thickness: '5px',
+//   transition: {
+//     speed: '0.2s',
+//     opacity: '0.6s',
+//     termination: 300
+//   },
+//   autoRevert: true,
+//   location: 'left',
+//   inverse: false
+});
+
+Vue.use(VueResize);
+
+sync(store, router);
+responsiveSync(store);
 
 document.addEventListener('DOMContentLoaded', () => {
-  const appElement = document.getElementById('app');
-  if (!appElement) { return; }
 
-  config.baseApiUrl = appElement.dataset.url;
+  const app = document.getElementById('app');
+  config.baseApiUrl = app.dataset.url;
 
-  const app = createApp(App);
+  window.$vm = new Vue({
-  const pinia = createPinia();
+    el: '#app',
-  app.use(pinia);
+    store,
-  app.use(router);
+    router,
-  swInit();
+    render: createElement => createElement('App'),
-  installClickStrike(app);
+    mounted() {
+      this.$nextTick(() => swInit(store));
+    },
+    components: { App }
+  });
 
-  app.component("AppAutocomplete", AppAutocomplete);
-  app.component("AppConfirm", AppConfirm);
-  app.component("AppDateTime", AppDateTime);
-  app.component("AppDatePicker", AppDatePicker);
-  app.component("AppDropdown", AppDropdown);
-  app.component("AppExpandTransition", AppExpandTransition);
-  app.component("AppIcon", AppIcon);
-  app.component("AppIconicIcon", AppIconicIcon);
-  app.component("AppModal", AppModal);
-  app.component("AppNavbar", AppNavbar);
-  app.component("AppPager", AppPager);
-  app.component("AppRating", AppRating);
-  app.component("AppSearchText", AppSearchText);
-  app.component("AppTagEditor", AppTagEditor);
-  app.component("AppTextField", AppTextField);
-  app.component("AppValidationErrors", AppValidationErrors);
-  
-  app.mount(appElement);
 });

app/javascript/router.js

@@ -1,39 +1,49 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import Vue from 'vue';
-import { nextTick } from "vue";
+import Router from 'vue-router';
 
-import The404Page from '../components/The404Page';
+import The404Page from './components/The404Page';
-import TheAboutPage from '../components/TheAboutPage';
+import TheAboutPage from './components/TheAboutPage';
-import TheCalculator from '../components/TheCalculator';
+import TheCalculator from './components/TheCalculator';
 
-import TheLog from '../components/TheLog';
+import TheLog from './components/TheLog';
-import TheLogList from '../components/TheLogList';
+import TheLogList from './components/TheLogList';
-import TheLogCreator from '../components/TheLogCreator';
+import TheLogCreator from './components/TheLogCreator';
-import TheLogEditor from '../components/TheLogEditor';
+import TheLogEditor from './components/TheLogEditor';
 
-import TheFoodList from '../components/TheFoodList';
+import TheFoodList from './components/TheFoodList';
-import TheFood from "../components/TheFood";
+import TheFood from "./components/TheFood";
-import TheFoodEditor from "../components/TheFoodEditor";
+import TheFoodEditor from "./components/TheFoodEditor";
-import TheFoodCreator from "../components/TheFoodCreator";
+import TheFoodCreator from "./components/TheFoodCreator";
-import TheNotesList from '../components/TheNotesList';
+import TheNotesList from './components/TheNotesList';
-import TheRecipe from '../components/TheRecipe';
+import TheRecipe from './components/TheRecipe';
-import TheRecipeEditor from '../components/TheRecipeEditor';
+import TheRecipeEditor from './components/TheRecipeEditor';
-import TheRecipeCreator from '../components/TheRecipeCreator';
+import TheRecipeCreator from './components/TheRecipeCreator';
-import TheRecipeList from '../components/TheRecipeList';
+import TheRecipeList from './components/TheRecipeList';
 
-import TheTaskListList from '../components/TheTaskListList';
+import TheTaskListList from './components/TheTaskListList';
 
-import TheUserCreator from '../components/TheUserCreator';
+import TheUserCreator from './components/TheUserCreator';
-import TheUserEditor from '../components/TheUserEditor';
+import TheUserEditor from './components/TheUserEditor';
 
-import TheAdminUserList from '../components/TheAdminUserList';
+import TheAdminUserList from './components/TheAdminUserList';
-import TheAdminUserEditor from '../components/TheAdminUserEditor';
+import TheAdminUserEditor from './components/TheAdminUserEditor';
 
-import { useAppConfigStore } from "../stores/appConfig";
+import $store from './store';
 
+Vue.use(Router);
 
-const router = createRouter({
+const router = new Router({
-  history: createWebHashHistory(),
+  routes: []
-  routes: [
+});
+
+router.afterEach((to, from) => {
+  if (to.meta.handleInitialLoad !== true && $store.state.initialLoad === false) {
+    $store.commit("setInitialLoad", true);
+  }
+});
+
+router.addRoutes(
+  [
     {
       path: '/',
       redirect: '/recipes'
@@ -134,10 +144,10 @@ const router = createRouter({
     {
       path: "/logout",
       name: "logout",
-      beforeEnter: async (to, from, next) => {
+      beforeEnter: (to, from, next) => {
-        const appConfig = useAppConfigStore();
+        const $store = router.app.$store;
-        await appConfig.logout();
+        $store.dispatch("logout")
-        return next("/");
+          .then(() => next("/"));
       }
     },
 
@@ -165,22 +175,10 @@ const router = createRouter({
     },
 
     {
-      path: '/:pathMatch(.*)*',
+      path: '*',
-      name: 'NotFound',
       component: The404Page
     }
   ]
-});
+);
-
-router.afterEach((to, from) => {
-  const appConfigStore = useAppConfigStore();
-  if (to.meta.handleInitialLoad !== true && appConfigStore.initialLoad === false) {
-    appConfigStore.initialLoad = true;
-  }
-
-  nextTick(() => {
-    document.title = to.meta.title || 'Parsley';
-  });
-});
 
 export default router;

app/javascript/store/index.js

@@ -0,0 +1,236 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import api from '../lib/Api';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  strict: process.env.NODE_ENV !== 'production',
+  state: {
+    initialLoad: false,
+    updateAvailable: false,
+    loadingCount: 0,
+    error: null,
+    authChecked: false,
+    user: null,
+    loginMessage: null,
+
+    taskLists: [],
+    currentTaskList: null,
+
+    nutrientList: {
+      kcal: { label: "Calories", unit: "kcal" },
+      protein: { label: "Protein", unit: "g" },
+      lipids: { label: "Fat", unit: "g" },
+      carbohydrates: { label: "Carbohydrates", unit: "g" },
+      water: { label: "Water", unit: "g" },
+      sugar: { label: "Sugar", unit: "g" },
+      fiber: { label: "Fiber", unit: "g" },
+      cholesterol: { label: "Cholesterol", unit: "mg" },
+      sodium: { label: "Sodium", unit: "mg" },
+      calcium: { label: "Calcium", unit: "mg" },
+      iron: { label: "Iron", unit: "mg" },
+      magnesium: { label: "Magnesium", unit: "mg" },
+      phosphorus: { label: "Phosphorus", unit: "mg" },
+      potassium: { label: "Potassium", unit: "mg" },
+      zinc: { label: "Zinc", unit: "mg" },
+      copper: { label: "Copper", unit: "mg" },
+      manganese: { label: "Manganese", unit: "mg" },
+      vit_a: { label: "Vitamin A", unit: "μg" },
+      vit_b6: { label: "Vitamin B6", unit: "mg" },
+      vit_b12: { label: "Vitamin B12", unit: "μg" },
+      vit_c: { label: "Vitamin C", unit: "mg" },
+      vit_d: { label: "Vitamin D", unit: "μg" },
+      vit_e: { label: "Vitamin E", unit: "mg" },
+      vit_k: { label: "Vitamin K", unit: "μg" },
+      ash: { label: "ash", unit: "g" }
+
+    }
+  },
+  getters: {
+    isLoading(state) {
+      return state.loadingCount > 0;
+    },
+    isLoggedIn(state) {
+      return state.user !== null;
+    },
+    isAdmin(state) {
+      return state.user !== null && state.user.admin === true;
+    }
+  },
+  mutations: {
+    setUpdateAvailable(state, value) {
+      state.updateAvailable = value;
+    },
+
+    setInitialLoad(state, value) {
+      state.initialLoad = value;
+    },
+
+    setLoading(state, value) {
+      if (value) {
+        state.loadingCount = state.loadingCount + 1;
+      } else {
+        state.loadingCount = state.loadingCount - 1;
+      }
+      state.loading = state.loadingCount !== 0;
+    },
+
+    setError(state, value) {
+      console.log(value);
+      state.error = value;
+    },
+
+    setUser(state, user) {
+      state.authChecked = true;
+      state.user = user;
+    },
+
+    setLoginMessage(state, msg) {
+      state.loginMessage = msg;
+    },
+
+    setTaskLists(state, lists) {
+      state.taskLists = lists || [];
+    },
+
+    setCurrentTaskList(state, list) {
+      state.currentTaskList = list || null;
+    },
+
+    appendTaskItem(state, item) {
+      const listId = item.task_list_id;
+      const list = state.taskLists.find(l => l.id === listId);
+      if (list) {
+        list.task_items.push(item);
+      }
+    },
+
+    replaceTaskItem(state, item) {
+      const listId = item.task_list_id;
+      const list = state.taskLists.find(l => l.id === listId);
+      if (list) {
+        const taskIdx = list.task_items.findIndex(i => i.id === item.id);
+        if (taskIdx >= 0) {
+          list.task_items.splice(taskIdx, 1, item);
+        }
+      }
+    },
+
+    removeTaskItems(state, payload) {
+      const listId = payload.taskList.id;
+      const list = state.taskLists.find(l => l.id === listId);
+      if (list) {
+
+        list.task_items = list.task_items.filter(item => {
+          return payload.taskItems.findIndex(i => i.id === item.id) === -1;
+        });
+      }
+    },
+
+    setTaskItemCompletion(state, payload) {
+      const listId = payload.taskList.id;
+      const list = state.taskLists.find(l => l.id === listId);
+      if (list) {
+        list.task_items.forEach(item => {
+          if (payload.taskItems.findIndex(i => i.id === item.id) >= 0) {
+            item.completed = payload.completed;
+          }
+        });
+      }
+    }
+  },
+  actions: {
+    updateCurrentUser({commit}) {
+      return api.getCurrentUser()
+        .then(user => {
+          commit("setUser", user);
+          return user;
+        });
+    },
+
+    login({commit}, authData) {
+      return api.postLogin(authData.username, authData.password)
+        .then(data => {
+          if (data.success) {
+            commit("setUser", data.user);
+            commit("setLoginMessage", null);
+          } else {
+            commit("setUser", null);
+            commit("setLoginMessage", data.message);
+          }
+          return data;
+        });
+    },
+
+    logout({commit}) {
+      return api.getLogout()
+        .then(() => {
+          commit("setUser", null);
+        });
+    },
+
+    refreshTaskLists({commit, state}) {
+      const cb = function(data) {
+        commit("setTaskLists", data);
+        let ctl = null;
+
+        if (state.currentTaskList) {
+          ctl = data.find(l => l.id === state.currentTaskList.id);
+        }
+
+        ctl = ctl || data[0] || null;
+        commit("setCurrentTaskList", ctl);
+      };
+
+      return api.getTaskLists(cb)
+    },
+    
+    ensureTaskLists({dispatch, state}) {
+      if (state.user && state.taskLists.length === 0) {
+        return dispatch("refreshTaskLists");
+      } else {
+        return Promise.resolve();
+      }
+    },
+
+    createTaskList({commit, dispatch}, newList) {
+      return api.postTaskList(newList)
+        .then(data => commit("setCurrentTaskList", data))
+        .then(() => dispatch("refreshTaskLists"))
+    },
+
+    deleteTaskList({dispatch}, taskList) {
+      return api.deleteTaskList(taskList)
+        .then(() => dispatch("refreshTaskLists"));
+    },
+
+    createTaskItem({commit, dispatch}, taskItem) {
+
+      return api.postTaskItem(taskItem.task_list_id, taskItem)
+        .then(data => {
+          commit("appendTaskItem", data);
+          return data;
+        });
+    },
+
+    updateTaskItem({commit}, taskItem) {
+      return api.patchTaskItem(taskItem.task_list_id, taskItem)
+        .then(data => {
+          commit("replaceTaskItem", data);
+          return data;
+        });
+    },
+
+    deleteTaskItems({commit}, payload) {
+      return api.deleteTaskItems(payload.taskList.id, payload.taskItems)
+        .then(() => commit("removeTaskItems", payload));
+    },
+
+    completeTaskItems({commit}, payload) {
+      return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed)
+        .then(() => commit("setTaskItemCompletion", payload));
+    }
+  }
+});

app/javascript/stores/appConfig.js

@@ -1,102 +0,0 @@
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
-import { useRoute } from "vue-router";
-import api from "../lib/Api";
-
-export const useAppConfigStore = defineStore('appConfig', () => {
-  const authChecked = ref(false);
-  const errorObject = ref(null);
-  const initialLoad = ref(false);
-  const loadingCount = ref(0);
-  const loginMessage = ref(null);
-  const updateAvailable = ref(false);
-  const userObject = ref(null);
-  const route = useRoute();
-
-  const isLoading = computed(() => {
-    return loadingCount.value > 0;
-  });
-
-  const isLoggedIn = computed(() => {
-    return userObject.value !== null;
-  });
-
-  const isAdmin = computed(() => {
-    return userObject.value?.admin === true;
-  });
-
-  const error = computed({
-    get: () => errorObject.value,
-    set: (val) => {
-      console.log(val);
-      errorObject.value = val;
-    }
-  });
-
-  const user = computed({
-    get: () => userObject.value,
-    set: (val) => {
-      userObject.value = val;
-      authChecked.value = true;
-    }
-  });
-
-  function setError(value) {
-    error.value = value;
-  }
-
-  function setLoading(value) {
-    if (value) {
-      loadingCount.value = loadingCount.value + 1;
-    } else {
-      loadingCount.value = loadingCount.value - 1;
-    }
-  }
-
-  async function updateCurrentUser() {
-    user.value = await api.getCurrentUser();
-    return user.value;
-  }
-
-  function login(authData) {
-    return api.postLogin(authData.username, authData.password)
-      .then(data => {
-        if (data.success) {
-          user.value = data.user;
-          loginMessage.value = null;
-        } else {
-          user.value = null;
-          loginMessage.value = data.message;
-        }
-        return data;
-      });
-  }
-
-  function logout() {
-    return api.getLogout()
-      .then(() => {
-        user.value = null;
-      });
-  }
-
-  return {
-    authChecked,
-    error,
-    initialLoad,
-    loadingCount,
-    loginMessage,
-    updateAvailable,
-    user,
-    route,
-
-    isAdmin,
-    isLoading,
-    isLoggedIn,
-
-    login,
-    logout,
-    setError,
-    setLoading,
-    updateCurrentUser
-  };
-});

app/javascript/stores/mediaQuery.js

@@ -1,35 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useMediaQueryStore = defineStore('mediaQuery', () => {
-  // Hard coded values taken directly from Bulma css
-  const mobileBp = 768;
-  const desktopBp = 1024;
-  const widscreenBp = 1216;
-  const fullHdBp = 1408;
-
-  const mediaQueries = {
-    mobile: `screen and (max-width: ${mobileBp}px)`,
-    tablet: `screen and (min-width: ${mobileBp + 1}px)`,
-    tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
-    touch: `screen and (max-width: ${desktopBp - 1}px)`,
-    desktop: `screen and (min-width: ${desktopBp}px)`,
-    desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
-    widescreen: `screen and (min-width: ${widscreenBp}px)`,
-    widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
-    fullhd: `screen and (min-width: ${fullHdBp}px)`
-  };
-
-  const store = {};
-
-  for (let device in mediaQueries) {
-    const query = window.matchMedia(mediaQueries[device]);
-    store[device] = ref(query.matches);
-
-    query.onchange = (q) => {
-      store[device].value = q.matches;
-    };
-  }
-
-  return store;
-});

app/javascript/stores/nutrient.js

@@ -1,36 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useNutrientStore = defineStore('nutrient', () => {
-  const nutrientList = ref({
-    kcal: { label: "Calories", unit: "kcal" },
-    protein: { label: "Protein", unit: "g" },
-    lipids: { label: "Fat", unit: "g" },
-    carbohydrates: { label: "Carbohydrates", unit: "g" },
-    water: { label: "Water", unit: "g" },
-    sugar: { label: "Sugar", unit: "g" },
-    fiber: { label: "Fiber", unit: "g" },
-    cholesterol: { label: "Cholesterol", unit: "mg" },
-    sodium: { label: "Sodium", unit: "mg" },
-    calcium: { label: "Calcium", unit: "mg" },
-    iron: { label: "Iron", unit: "mg" },
-    magnesium: { label: "Magnesium", unit: "mg" },
-    phosphorus: { label: "Phosphorus", unit: "mg" },
-    potassium: { label: "Potassium", unit: "mg" },
-    zinc: { label: "Zinc", unit: "mg" },
-    copper: { label: "Copper", unit: "mg" },
-    manganese: { label: "Manganese", unit: "mg" },
-    vit_a: { label: "Vitamin A", unit: "μg" },
-    vit_b6: { label: "Vitamin B6", unit: "mg" },
-    vit_b12: { label: "Vitamin B12", unit: "μg" },
-    vit_c: { label: "Vitamin C", unit: "mg" },
-    vit_d: { label: "Vitamin D", unit: "μg" },
-    vit_e: { label: "Vitamin E", unit: "mg" },
-    vit_k: { label: "Vitamin K", unit: "μg" },
-    ash: { label: "ash", unit: "g" }
-  });
-
-  return {
-    nutrientList
-  };
-});

app/javascript/stores/task.js

@@ -1,114 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { useAppConfigStore } from "./appConfig";
-import api from "../lib/Api";
-import { createChannel } from "../lib/ActionCable";
-
-export const useTaskStore = defineStore('task', () => {
-  const taskLists = ref([]);
-  const currentTaskList = ref(null);
-  let taskChannel = null;
-
-  function replaceTaskList(list) {
-    if (taskLists.value) {
-      const listIdx = taskLists.value.findIndex(l => l.id === list.id);
-      if (listIdx >= 0) {
-        taskLists.value.splice(listIdx, 1, list);
-      }
-      if (currentTaskList.value && currentTaskList.value.id === list.id) {
-        currentTaskList.value = list;
-      }
-    }
-  }
-
-  function ensureTaskListChannel() {
-    if (taskChannel === null) {
-      taskChannel = createChannel(null, "TaskChannel", {
-        received(data) {
-          if (data && data.action === 'updated') {
-            replaceTaskList(data.task_list);
-          }
-        }
-      });
-    }
-  }
-
-  function refreshTaskLists() {
-    const cb = function(data) {
-      taskLists.value = data || [];
-      let ctl = null;
-
-      if (currentTaskList.value) {
-        ctl = data.find(l => l.id === currentTaskList.value.id);
-      }
-
-      ctl = ctl || data[0] || null;
-      setCurrentTaskList(ctl);
-      ensureTaskListChannel();
-    };
-
-    return api.getTaskLists(cb)
-  }
-
-  function ensureTaskLists() {
-    const appConfig = useAppConfigStore();
-
-    if (appConfig.user && taskLists.value.length === 0) {
-      return refreshTaskLists();
-    } else {
-      return Promise.resolve();
-    }
-  }
-
-  function setCurrentTaskList(taskList) {
-    currentTaskList.value = taskList || null;
-  }
-
-  async function createTaskList(newList) {
-    currentTaskList.value = await api.postTaskList(newList);
-    return refreshTaskLists();
-  }
-
-  async function deleteTaskList(taskList) {
-    await api.deleteTaskList(taskList);
-    return refreshTaskLists();
-  }
-
-  function createTaskItem(taskItem) {
-    return api.postTaskItem(taskItem.task_list_id, taskItem)
-      .then(data => {
-        return data;
-      });
-  }
-
-  function updateTaskItem(taskItem) {
-    return api.patchTaskItem(taskItem.task_list_id, taskItem)
-      .then(data => {
-        return data;
-      });
-  }
-
-  function deleteTaskItems(payload) {
-    return api.deleteTaskItems(payload.taskList.id, payload.taskItems);
-  }
-
-  function completeTaskItems(payload) {
-    return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed);
-  }
-
-  return {
-    currentTaskList,
-    taskLists,
-
-    createTaskList,
-    deleteTaskList,
-    ensureTaskLists,
-    refreshTaskLists,
-    setCurrentTaskList,
-
-    createTaskItem,
-    updateTaskItem,
-    deleteTaskItems,
-    completeTaskItems
-  };
-});

app/javascript/styles/_responsive_controls.scss

@@ -1,97 +1,107 @@
-@use "bulma/sass/utilities" as bulma;
+@mixin responsive-button-size($size) {
-@use "bulma/sass/utilities/controls";
-@use "bulma/sass/utilities/mixins";
-
-@mixin responsive-label-size($size) {
   &.is-small-#{$size} {
-    font-size: bulma.$size-small;
+    @include button-small;
   }
 
   &.is-medium-#{$size} {
-    font-size: bulma.$size-medium;
+    @include button-medium;
   }
 
   &.is-large-#{$size} {
-    font-size: bulma.$size-large;
+    @include button-large;
+  }
+}
+
+@mixin responsive-label-size($size) {
+  &.is-small-#{$size} {
+    font-size: $size-small;
+  }
+
+  &.is-medium-#{$size} {
+    font-size: $size-medium;
+  }
+
+  &.is-large-#{$size} {
+    font-size: $size-large;
   }
 }
 
 @mixin responsive-control-size($size) {
   &.is-small-#{$size} {
-    @include controls.control-small;
+    @include control-small;
   }
 
   &.is-medium-#{$size} {
-    @include controls.control-medium;
+    @include control-medium;
   }
 
   &.is-large-#{$size} {
-    @include controls.control-large;
+    @include control-large;
   }
 }
 
 .button {
-  @include mixins.mobile {
+  @include mobile {
-    @include responsive-control-size("mobile");
+    @include responsive-button-size("mobile");
   }
 
-  @include mixins.tablet {
+  @include tablet {
-    @include responsive-control-size("tablet");
+    @include responsive-button-size("tablet");
   }
 
-  @include mixins.desktop {
+  @include desktop {
-    @include responsive-control-size("desktop");
+    @include responsive-button-size("desktop");
   }
 
-  @include mixins.widescreen {
+  @include widescreen {
-    @include responsive-control-size("widescreen");
+    @include responsive-button-size("widescreen");
   }
 
-  @include mixins.fullhd {
+  @include fullhd {
-    @include responsive-control-size("fullhd");
+    @include responsive-button-size("fullhd");
   }
 }
 
 .label {
-  @include mixins.mobile {
+  @include mobile {
     @include responsive-label-size("mobile");
   }
 
-  @include mixins.tablet {
+  @include tablet {
     @include responsive-label-size("tablet");
   }
 
-  @include mixins.desktop {
+  @include desktop {
     @include responsive-label-size("desktop");
   }
 
-  @include mixins.widescreen {
+  @include widescreen {
     @include responsive-label-size("widescreen");
   }
 
-  @include mixins.fullhd {
+  @include fullhd {
     @include responsive-label-size("fullhd");
   }
 }
 
 .input, .textarea {
-  @include mixins.mobile {
+  @include mobile {
     @include responsive-control-size("mobile");
   }
 
-  @include mixins.tablet {
+  @include tablet {
     @include responsive-control-size("tablet");
   }
 
-  @include mixins.desktop {
+  @include desktop {
     @include responsive-control-size("desktop");
   }
 
-  @include mixins.widescreen {
+  @include widescreen {
     @include responsive-control-size("widescreen");
   }
 
-  @include mixins.fullhd {
+  @include fullhd {
     @include responsive-control-size("fullhd");
   }
 }

app/javascript/styles/_variables.scss

@@ -0,0 +1,35 @@
+
+
+// coolors.co pallet
+$coolors-dark: rgba(29, 30, 24, 1);
+$coolors-blue: rgba(67, 127, 151, 1);
+$coolors-green: rgba(121, 167, 54, 1);
+$coolors-red: #ab4c34;
+$coolors-yellow: rgba(240, 162, 2, 1);
+
+//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-serif: Georgia, "Times New Roman", Times, serif;
+
+// Bluma default overrides
+//$green: #79A736;
+//$red: #d4424e;
+//$blue: #9c36a7;
+
+$green: $coolors-green;
+$blue: $coolors-blue;
+$red: $coolors-red;
+$yellow: $coolors-yellow;
+$dark: $coolors-dark;
+
+$primary: $green;
+$family-primary: $family-serif;
+
+$modal-content-width: 750px;
+
+
+// Make all Bulma variables and functions available
+@import "~bulma/sass/utilities/initial-variables";
+@import "~bulma/sass/utilities/functions";
+@import "~bulma/sass/utilities/derived-variables";
+
+//$dropdown-item-hover-background-color: $white-ter;

app/javascript/styles/_wide_modal.scss

@@ -1,9 +1,5 @@
 
-@use "bulma/sass/utilities" as bulma;
+@include until($desktop) {
-@use "bulma/sass/utilities/mixins";
-
-
-@include mixins.until(bulma.$desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 20px;
@@ -12,7 +8,7 @@
   }
 }
 
-@include mixins.from(bulma.$desktop) {
+@include from($desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 auto;

app/javascript/styles/index.scss

@@ -1,22 +1,18 @@
-// coolors.co pallet
+@import "./variables";
-$coolors-dark: rgba(29, 30, 24, 1);
-$coolors-blue: rgba(67, 127, 151, 1);
-$coolors-green: rgba(121, 167, 54, 1);
-$coolors-red: #ab4c34;
-$coolors-yellow: rgba(240, 162, 2, 1);
 
-$family-serif: Georgia, "Times New Roman", Times, serif;
+@import "~bulma/sass/utilities/_all";
-
+@import "~bulma/sass/base/_all";
-@use "bulma/versions/bulma-no-dark-mode" as bulma with (
+@import "~bulma/sass/components/dropdown";
-  $family-primary: $family-serif,
+@import "~bulma/sass/components/navbar";
-  $green: $coolors-green,
+@import "~bulma/sass/components/level";
-  $blue: $coolors-blue,
+@import "~bulma/sass/components/message";
-  $red: $coolors-red,
+@import "~bulma/sass/components/modal";
-  $yellow: $coolors-yellow,
+@import "~bulma/sass/components/pagination";
-  $dark: $coolors-dark,
+@import "~bulma/sass/components/panel";
-  $primary: $coolors-green,
+@import "~bulma/sass/elements/_all";
-  $modal-content-width: 750px
+@import "~bulma/sass/form/_all";
-);
+@import "~bulma/sass/grid/columns";
+@import "~bulma/sass/layout/section";
 
 @import "./responsive_controls";
 @import "./wide_modal";
@@ -32,7 +28,7 @@ body {
 }
 
 body {
-  background-color: bulma.$grey-dark;
+  background-color: $grey-dark;
   padding-bottom: 2rem;
 }
 
@@ -41,13 +37,13 @@ body {
 
   .container {
     padding: 1rem;
-    background-color: bulma.$white;
+    background-color: $white;
     min-height: 75vh;
   }
 }
 
 .title, .subtitle, .navbar, .button, .pagination, .modal-card-title, th {
-  font-family: bulma.$family-sans-serif;
+  font-family: $family-sans-serif;
 }
 
 .pagination:not(:last-child) {

app/models/food.rb

@@ -91,15 +91,15 @@ class Food < Ingredient
         :vit_e,
         :vit_d,
         :vit_k,
-        :cholesterol,
+        :cholesterol
-        [:lipids, :lipid],
-        [:density, :density_best_guess]
     ]
 
     copy_fields.each do |f|
-      to, from = f.is_a?(Array) ? f : [f, f]
+      self.send("#{f}=".to_sym, food.send(f.to_sym))
-      self.send("#{to}=".to_sym, food.send(from.to_sym))
     end
+
+    self.lipids = food.lipid
+    self.density = food.density_best_guess
   end
 
 end

app/models/task_item.rb

@@ -1,7 +1,7 @@
 class TaskItem < ApplicationRecord
   include DefaultValues
 
-  belongs_to :task_list, touch: true, inverse_of: :task_items
+  belongs_to :task_list, touch: true
 
   validates :name, presence: true
 

app/models/task_list.rb

@@ -1,7 +1,7 @@
 class TaskList < ApplicationRecord
 
   belongs_to :user
-  has_many :task_items, dependent: :delete_all, inverse_of: :task_list
+  has_many :task_items, dependent: :delete_all
 
   validates :name,
             presence: true,
@@ -13,22 +13,22 @@ class TaskList < ApplicationRecord
     if recurse_depth > 10
       raise "This shouldn't be. Did you make a recipe loop?"
     end
-
+    
     recipe.recipe_ingredients.each do |ri|
       if ri.ingredient.is_a?(Recipe)
         add_recipe_ingredients(ri.ingredient, recurse_depth + 1)
       else
-        item = self.task_items.detect { |i| i.name.downcase == ri.name.downcase } || task_items.build(name: ri.name)
+        item = self.task_items.detect { |i| i.name.downcase == ri.name.downcase } || TaskItem.new(name: ri.name, task_list: self)
         quantity_str = [ri.quantity, ri.units].delete_if { |i| i.blank? }.join(' ')
         if item.quantity.blank?
           item.quantity = quantity_str
         else
           item.quantity += (', ' + quantity_str)
         end
-
+        
         item.save
       end
     end
   end
-
+  
 end

app/serializers/application_serializer.rb

@@ -5,7 +5,7 @@ class ApplicationSerializer
 
     def initialize(items, serializer, opts = {})
       super(items, opts)
-      @collection_name = opts[:collection_name]
+      @collection_name = 'list'
       @serializer = serializer
     end
 
@@ -14,10 +14,10 @@ class ApplicationSerializer
 
       if @collection_name && item.respond_to?(:total_pages)
         {
-            total_count: item.total_count,
+            totalCount: item.total_count,
-            total_pages: item.total_pages,
+            totalPages: item.total_pages,
-            current_page: item.current_page,
+            currentPage: item.current_page,
-            page_size: item.limit_value,
+            pageSize: item.limit_value,
             @collection_name.to_sym => list
         }
       else