Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8ebafd8bae | |||
| df2ccf86b2 | |||
| d82fce08d9 |
@ -5,5 +5,3 @@ tmp/*.*
|
||||
public/assets
|
||||
public/packs
|
||||
node_modules/
|
||||
.yarn
|
||||
.pnp.*
|
||||
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@ -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.*
|
||||
@ -1 +1 @@
|
||||
3.3.5
|
||||
3.0.3
|
||||
|
||||
13
Dockerfile
13
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
|
||||
|
||||
32
Gemfile
32
Gemfile
@ -1,30 +1,28 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'rails', '7.2.1'
|
||||
gem 'pg', '~> 1.5.8'
|
||||
gem 'rails', '6.1.4.1'
|
||||
gem 'pg', '~> 1.2.3'
|
||||
|
||||
gem 'shakapacker', '8.0.2'
|
||||
gem 'bootsnap', '>= 1.1.0', require: false
|
||||
|
||||
gem 'oj', '~> 3.16.6'
|
||||
gem 'csv', '~> 3.3'
|
||||
gem 'oj', '~> 3.13.9'
|
||||
|
||||
gem 'kaminari', '~> 1.2.2'
|
||||
gem 'unitwise', '~> 2.3.0'
|
||||
gem 'redcarpet', '~> 3.6.0'
|
||||
gem 'kaminari', '~> 1.2.1'
|
||||
gem 'unitwise', '~> 2.2.0'
|
||||
gem 'redcarpet', '~> 3.5.1'
|
||||
|
||||
gem 'dalli', '~> 3.2.8'
|
||||
gem 'puma', '~> 6.4'
|
||||
gem 'bcrypt', '~> 3.1.18'
|
||||
gem 'dalli', '~> 3.0.4'
|
||||
gem 'puma', '~> 5.5'
|
||||
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 'guard-rspec', require: false
|
||||
gem 'rspec-rails', '~> 7.0.1'
|
||||
gem 'listen', '~> 3.3'
|
||||
gem 'rspec-rails', '~> 5.0.2'
|
||||
gem 'rails-controller-testing'
|
||||
gem 'factory_bot_rails', '~> 6.4.3'
|
||||
gem 'database_cleaner', '~> 2.0.2'
|
||||
gem 'factory_bot_rails', '~> 6.2.0'
|
||||
gem 'database_cleaner', '~> 2.0.1'
|
||||
end
|
||||
|
||||
|
||||
434
Gemfile.lock
434
Gemfile.lock
@ -1,322 +1,230 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
actioncable (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
actioncable (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
nio4r (~> 2.0)
|
||||
websocket-driver (>= 0.6.1)
|
||||
zeitwerk (~> 2.6)
|
||||
actionmailbox (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
activejob (= 7.2.1)
|
||||
activerecord (= 7.2.1)
|
||||
activestorage (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
mail (>= 2.8.0)
|
||||
actionmailer (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
actionview (= 7.2.1)
|
||||
activejob (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
mail (>= 2.8.0)
|
||||
rails-dom-testing (~> 2.2)
|
||||
actionpack (7.2.1)
|
||||
actionview (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
nokogiri (>= 1.8.5)
|
||||
racc
|
||||
rack (>= 2.2.4, < 3.2)
|
||||
rack-session (>= 1.0.1)
|
||||
actionmailbox (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
activejob (= 6.1.4.1)
|
||||
activerecord (= 6.1.4.1)
|
||||
activestorage (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
mail (>= 2.7.1)
|
||||
actionmailer (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
actionview (= 6.1.4.1)
|
||||
activejob (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
mail (~> 2.5, >= 2.5.4)
|
||||
rails-dom-testing (~> 2.0)
|
||||
actionpack (6.1.4.1)
|
||||
actionview (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
rack (~> 2.0, >= 2.0.9)
|
||||
rack-test (>= 0.6.3)
|
||||
rails-dom-testing (~> 2.2)
|
||||
rails-html-sanitizer (~> 1.6)
|
||||
useragent (~> 0.16)
|
||||
actiontext (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
activerecord (= 7.2.1)
|
||||
activestorage (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
globalid (>= 0.6.0)
|
||||
rails-dom-testing (~> 2.0)
|
||||
rails-html-sanitizer (~> 1.0, >= 1.2.0)
|
||||
actiontext (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
activerecord (= 6.1.4.1)
|
||||
activestorage (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
nokogiri (>= 1.8.5)
|
||||
actionview (7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
actionview (6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
builder (~> 3.1)
|
||||
erubi (~> 1.11)
|
||||
rails-dom-testing (~> 2.2)
|
||||
rails-html-sanitizer (~> 1.6)
|
||||
activejob (7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
erubi (~> 1.4)
|
||||
rails-dom-testing (~> 2.0)
|
||||
rails-html-sanitizer (~> 1.1, >= 1.2.0)
|
||||
activejob (6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
globalid (>= 0.3.6)
|
||||
activemodel (7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
activerecord (7.2.1)
|
||||
activemodel (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
timeout (>= 0.4.0)
|
||||
activestorage (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
activejob (= 7.2.1)
|
||||
activerecord (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
marcel (~> 1.0)
|
||||
activesupport (7.2.1)
|
||||
base64
|
||||
bigdecimal
|
||||
concurrent-ruby (~> 1.0, >= 1.3.1)
|
||||
connection_pool (>= 2.2.5)
|
||||
drb
|
||||
activemodel (6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
activerecord (6.1.4.1)
|
||||
activemodel (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
activestorage (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
activejob (= 6.1.4.1)
|
||||
activerecord (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
marcel (~> 1.0.0)
|
||||
mini_mime (>= 1.1.0)
|
||||
activesupport (6.1.4.1)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 1.6, < 2)
|
||||
logger (>= 1.4.2)
|
||||
minitest (>= 5.1)
|
||||
securerandom (>= 0.3)
|
||||
tzinfo (~> 2.0, >= 2.0.5)
|
||||
base64 (0.2.0)
|
||||
bcrypt (3.1.20)
|
||||
bigdecimal (3.1.8)
|
||||
bootsnap (1.18.4)
|
||||
msgpack (~> 1.2)
|
||||
builder (3.3.0)
|
||||
coderay (1.1.3)
|
||||
concurrent-ruby (1.3.4)
|
||||
connection_pool (2.4.1)
|
||||
tzinfo (~> 2.0)
|
||||
zeitwerk (~> 2.3)
|
||||
bcrypt (3.1.16)
|
||||
bootsnap (1.9.3)
|
||||
msgpack (~> 1.0)
|
||||
builder (3.2.4)
|
||||
concurrent-ruby (1.1.9)
|
||||
crass (1.0.6)
|
||||
csv (3.3.0)
|
||||
dalli (3.2.8)
|
||||
database_cleaner (2.0.2)
|
||||
database_cleaner-active_record (>= 2, < 3)
|
||||
database_cleaner-active_record (2.2.0)
|
||||
dalli (3.0.4)
|
||||
database_cleaner (2.0.1)
|
||||
database_cleaner-active_record (~> 2.0.0)
|
||||
database_cleaner-active_record (2.0.1)
|
||||
activerecord (>= 5.a)
|
||||
database_cleaner-core (~> 2.0.0)
|
||||
database_cleaner-core (2.0.1)
|
||||
date (3.3.4)
|
||||
diff-lcs (1.5.1)
|
||||
drb (2.2.1)
|
||||
erubi (1.13.0)
|
||||
factory_bot (6.5.0)
|
||||
diff-lcs (1.4.4)
|
||||
erubi (1.10.0)
|
||||
factory_bot (6.2.0)
|
||||
activesupport (>= 5.0.0)
|
||||
factory_bot_rails (6.4.3)
|
||||
factory_bot (~> 6.4)
|
||||
factory_bot_rails (6.2.0)
|
||||
factory_bot (~> 6.2.0)
|
||||
railties (>= 5.0.0)
|
||||
ffi (1.17.0)
|
||||
formatador (1.1.0)
|
||||
globalid (1.2.1)
|
||||
activesupport (>= 6.1)
|
||||
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)
|
||||
ffi (1.15.4)
|
||||
globalid (1.0.0)
|
||||
activesupport (>= 5.0)
|
||||
i18n (1.8.11)
|
||||
concurrent-ruby (~> 1.0)
|
||||
io-console (0.7.2)
|
||||
irb (1.14.1)
|
||||
rdoc (>= 4.0.0)
|
||||
reline (>= 0.4.2)
|
||||
kaminari (1.2.2)
|
||||
kaminari (1.2.1)
|
||||
activesupport (>= 4.1.0)
|
||||
kaminari-actionview (= 1.2.2)
|
||||
kaminari-activerecord (= 1.2.2)
|
||||
kaminari-core (= 1.2.2)
|
||||
kaminari-actionview (1.2.2)
|
||||
kaminari-actionview (= 1.2.1)
|
||||
kaminari-activerecord (= 1.2.1)
|
||||
kaminari-core (= 1.2.1)
|
||||
kaminari-actionview (1.2.1)
|
||||
actionview
|
||||
kaminari-core (= 1.2.2)
|
||||
kaminari-activerecord (1.2.2)
|
||||
kaminari-core (= 1.2.1)
|
||||
kaminari-activerecord (1.2.1)
|
||||
activerecord
|
||||
kaminari-core (= 1.2.2)
|
||||
kaminari-core (1.2.2)
|
||||
kaminari-core (= 1.2.1)
|
||||
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.22.0)
|
||||
loofah (2.12.0)
|
||||
crass (~> 1.0.2)
|
||||
nokogiri (>= 1.12.0)
|
||||
lumberjack (1.2.10)
|
||||
mail (2.8.1)
|
||||
nokogiri (>= 1.5.9)
|
||||
mail (2.7.1)
|
||||
mini_mime (>= 0.1.1)
|
||||
net-imap
|
||||
net-pop
|
||||
net-smtp
|
||||
marcel (1.0.4)
|
||||
marcel (1.0.2)
|
||||
memoizable (0.4.2)
|
||||
thread_safe (~> 0.3, >= 0.3.1)
|
||||
method_source (1.1.0)
|
||||
mini_mime (1.1.5)
|
||||
mini_portile2 (2.8.7)
|
||||
minitest (5.25.1)
|
||||
msgpack (1.7.2)
|
||||
nenv (0.3.0)
|
||||
net-imap (0.4.16)
|
||||
date
|
||||
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)
|
||||
method_source (1.0.0)
|
||||
mini_mime (1.1.2)
|
||||
mini_portile2 (2.6.1)
|
||||
minitest (5.14.4)
|
||||
msgpack (1.4.2)
|
||||
nio4r (2.5.8)
|
||||
nokogiri (1.12.5)
|
||||
mini_portile2 (~> 2.6.1)
|
||||
racc (~> 1.4)
|
||||
notiffany (0.1.3)
|
||||
nenv (~> 0.1)
|
||||
shellany (~> 0.0)
|
||||
oj (3.16.6)
|
||||
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)
|
||||
oj (3.13.9)
|
||||
parslet (1.8.2)
|
||||
pg (1.2.3)
|
||||
puma (5.5.2)
|
||||
nio4r (~> 2.0)
|
||||
racc (1.8.1)
|
||||
rack (3.1.7)
|
||||
rack-proxy (0.7.7)
|
||||
rack
|
||||
rack-session (2.0.0)
|
||||
rack (>= 3.0.0)
|
||||
rack-test (2.1.0)
|
||||
rack (>= 1.3)
|
||||
rackup (2.1.0)
|
||||
rack (>= 3)
|
||||
webrick (~> 1.8)
|
||||
rails (7.2.1)
|
||||
actioncable (= 7.2.1)
|
||||
actionmailbox (= 7.2.1)
|
||||
actionmailer (= 7.2.1)
|
||||
actionpack (= 7.2.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)
|
||||
racc (1.6.0)
|
||||
rack (2.2.3)
|
||||
rack-test (1.1.0)
|
||||
rack (>= 1.0, < 3)
|
||||
rails (6.1.4.1)
|
||||
actioncable (= 6.1.4.1)
|
||||
actionmailbox (= 6.1.4.1)
|
||||
actionmailer (= 6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
actiontext (= 6.1.4.1)
|
||||
actionview (= 6.1.4.1)
|
||||
activejob (= 6.1.4.1)
|
||||
activemodel (= 6.1.4.1)
|
||||
activerecord (= 6.1.4.1)
|
||||
activestorage (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.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)
|
||||
activesupport (>= 5.0.0)
|
||||
minitest
|
||||
rails-dom-testing (2.0.3)
|
||||
activesupport (>= 4.2.0)
|
||||
nokogiri (>= 1.6)
|
||||
rails-html-sanitizer (1.6.0)
|
||||
loofah (~> 2.21)
|
||||
nokogiri (~> 1.14)
|
||||
railties (7.2.1)
|
||||
actionpack (= 7.2.1)
|
||||
activesupport (= 7.2.1)
|
||||
irb (~> 1.13)
|
||||
rackup (>= 1.0.0)
|
||||
rake (>= 12.2)
|
||||
thor (~> 1.0, >= 1.2.2)
|
||||
zeitwerk (~> 2.6)
|
||||
rake (13.2.1)
|
||||
rb-fsevent (0.11.2)
|
||||
rb-inotify (0.11.1)
|
||||
rails-html-sanitizer (1.4.2)
|
||||
loofah (~> 2.3)
|
||||
railties (6.1.4.1)
|
||||
actionpack (= 6.1.4.1)
|
||||
activesupport (= 6.1.4.1)
|
||||
method_source
|
||||
rake (>= 0.13)
|
||||
thor (~> 1.0)
|
||||
rake (13.0.6)
|
||||
rb-fsevent (0.11.0)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rdoc (6.7.0)
|
||||
psych (>= 4.0.0)
|
||||
redcarpet (3.6.0)
|
||||
reline (0.5.10)
|
||||
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)
|
||||
redcarpet (3.5.1)
|
||||
rspec-core (3.10.1)
|
||||
rspec-support (~> 3.10.0)
|
||||
rspec-expectations (3.10.1)
|
||||
diff-lcs (>= 1.2.0, < 2.0)
|
||||
rspec-support (~> 3.13.0)
|
||||
rspec-mocks (3.13.1)
|
||||
rspec-support (~> 3.10.0)
|
||||
rspec-mocks (3.10.2)
|
||||
diff-lcs (>= 1.2.0, < 2.0)
|
||||
rspec-support (~> 3.13.0)
|
||||
rspec-rails (7.0.1)
|
||||
actionpack (>= 7.0)
|
||||
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)
|
||||
rspec-support (~> 3.10.0)
|
||||
rspec-rails (5.0.2)
|
||||
actionpack (>= 5.2)
|
||||
activesupport (>= 5.2)
|
||||
package_json
|
||||
rack-proxy (>= 0.6.1)
|
||||
railties (>= 5.2)
|
||||
semantic_range (>= 2.3.0)
|
||||
shellany (0.0.1)
|
||||
rspec-core (~> 3.10)
|
||||
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)
|
||||
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)
|
||||
sprockets (4.0.2)
|
||||
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)
|
||||
webrick (1.8.2)
|
||||
websocket-driver (0.7.6)
|
||||
websocket-driver (0.7.5)
|
||||
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.2.8)
|
||||
database_cleaner (~> 2.0.2)
|
||||
factory_bot_rails (~> 6.4.3)
|
||||
guard (~> 2.18.0)
|
||||
guard-rspec
|
||||
kaminari (~> 1.2.2)
|
||||
oj (~> 3.16.6)
|
||||
pg (~> 1.5.8)
|
||||
puma (~> 6.4)
|
||||
rails (= 7.2.1)
|
||||
dalli (~> 3.0.4)
|
||||
database_cleaner (~> 2.0.1)
|
||||
factory_bot_rails (~> 6.2.0)
|
||||
kaminari (~> 1.2.1)
|
||||
listen (~> 3.3)
|
||||
oj (~> 3.13.9)
|
||||
pg (~> 1.2.3)
|
||||
puma (~> 5.5)
|
||||
rails (= 6.1.4.1)
|
||||
rails-controller-testing
|
||||
redcarpet (~> 3.6.0)
|
||||
rspec-rails (~> 7.0.1)
|
||||
shakapacker (= 8.0.2)
|
||||
sqlite3 (~> 2.1.0)
|
||||
redcarpet (~> 3.5.1)
|
||||
rspec-rails (~> 5.0.2)
|
||||
sqlite3 (~> 1.4.2)
|
||||
tzinfo-data
|
||||
unitwise (~> 2.3.0)
|
||||
unitwise (~> 2.2.0)
|
||||
|
||||
BUNDLED WITH
|
||||
2.5.20
|
||||
2.2.32
|
||||
|
||||
2
LICENSE
2
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
|
||||
|
||||
2
Procfile
2
Procfile
@ -1,2 +1,2 @@
|
||||
frontend: yarn serve
|
||||
rails: bundle exec rails s -b 0.0.0.0
|
||||
shakapacker: bin/shakapacker-dev-server
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
module ApplicationCable
|
||||
class Channel < ActionCable::Channel::Base
|
||||
end
|
||||
end
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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,19 +42,9 @@ class ApplicationController < ActionController::Base
|
||||
if owner
|
||||
yield if block_given?
|
||||
else
|
||||
respond_to do |format|
|
||||
format.html do
|
||||
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
|
||||
|
||||
def current_user
|
||||
|
||||
@ -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
|
||||
input_unit = nil
|
||||
data[:errors][:input] << 'invalid string'
|
||||
end
|
||||
|
||||
if !input_unit.nil?
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
@ -47,7 +46,6 @@ class TaskListsController < ApplicationController
|
||||
recipe = Recipe.find(params[:recipe_id])
|
||||
|
||||
@task_list.add_recipe_ingredients(recipe)
|
||||
TaskChannel.update_task_list(@task_list)
|
||||
|
||||
head :no_content
|
||||
end
|
||||
|
||||
@ -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 }
|
||||
|
||||
@ -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">
|
||||
<component v-if="!hasError" :is="Component" />
|
||||
<router-view v-if="!hasError"></router-view>
|
||||
<div v-else>
|
||||
<h1>Error!</h1>
|
||||
<p>{{ appConfig.error }}</p>
|
||||
<p>{{error}}</p>
|
||||
</div>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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";
|
||||
<script>
|
||||
|
||||
const globalTweenGroup = useGlobalTweenGroup();
|
||||
let animationLoop = true;
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import api from "../lib/Api";
|
||||
import TWEEN from '@tweenjs/tween.js';
|
||||
|
||||
const appConfig = useAppConfigStore();
|
||||
const hasError = computed(() => appConfig.error !== null);
|
||||
export default {
|
||||
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();
|
||||
const { checkAuthentication } = useCheckAuthentication(loadResource);
|
||||
|
||||
watch(
|
||||
() => appConfig.initialLoad,
|
||||
(val) => {
|
||||
watch: {
|
||||
isLoading(val) {
|
||||
if (val) {
|
||||
nextTick(() => document.body.classList.remove("loading"));
|
||||
this.$Progress.start();
|
||||
} else {
|
||||
this.$Progress.finish();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
// Setup global animation loop
|
||||
function animate() {
|
||||
if (animationLoop) {
|
||||
globalTweenGroup.update();
|
||||
requestAnimationFrame(animate);
|
||||
initialLoad(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
document.body.classList.remove("loading");
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// Setup global animation loop
|
||||
function animate () {
|
||||
TWEEN.update();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
animate();
|
||||
|
||||
if (appConfig.user === null && appConfig.authChecked === false) {
|
||||
checkAuthentication();
|
||||
if (this.user === null && this.authChecked === false) {
|
||||
this.checkAuthentication();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onUnmounted(() => {
|
||||
animationLoop = false;
|
||||
mounted() {
|
||||
if (this.initialLoad) {
|
||||
this.$nextTick(() => {
|
||||
document.body.classList.remove("loading");
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -27,15 +27,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed, ref, watch } from "vue";
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "inputClick", "optionSelected"]);
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
export default {
|
||||
props: {
|
||||
value: String,
|
||||
id: String,
|
||||
placeholder: String,
|
||||
name: String,
|
||||
@ -60,157 +58,175 @@
|
||||
|
||||
onGetOptions: Function,
|
||||
searchOptions: Array
|
||||
});
|
||||
},
|
||||
|
||||
const options = ref([]);
|
||||
const rawValue = ref("");
|
||||
const isListOpen = ref(false);
|
||||
const activeListIndex = ref(0);
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
rawValue: "",
|
||||
isListOpen: false,
|
||||
activeListIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
const finalInputClass = computed(() => {
|
||||
created() {
|
||||
this.rawValue = this.value;
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.rawValue = newValue;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
finalInputClass() {
|
||||
let cls = ['input'];
|
||||
if (props.inputClass === null) {
|
||||
if (this.inputClass === null) {
|
||||
return cls;
|
||||
} else if (Array.isArray(props.inputClass)) {
|
||||
return cls.concat(props.inputClass);
|
||||
} else if (Array.isArray(this.inputClass)) {
|
||||
return cls.concat(this.inputClass);
|
||||
} else {
|
||||
cls.push(props.inputClass);
|
||||
cls.push(this.inputClass);
|
||||
return cls;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => { rawValue.value = newValue; },
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function optionClass(idx) {
|
||||
return activeListIndex.value === idx ? 'option active' : 'option';
|
||||
debouncedUpdateOptions() {
|
||||
return debounce(this.updateOptions, this.debounce);
|
||||
}
|
||||
},
|
||||
|
||||
function optionClick(opt) {
|
||||
selectOption(opt);
|
||||
}
|
||||
methods: {
|
||||
optionClass(idx) {
|
||||
return this.activeListIndex === idx ? 'option active' : 'option';
|
||||
},
|
||||
|
||||
function optionKey(opt) {
|
||||
if (props.keyAttribute) {
|
||||
return opt[props.keyAttribute]
|
||||
} else if (props.valueAttribute) {
|
||||
return opt[props.valueAttribute];
|
||||
optionClick(opt) {
|
||||
this.selectOption(opt);
|
||||
},
|
||||
|
||||
optionKey(opt) {
|
||||
if (this.keyAttribute) {
|
||||
return opt[this.keyAttribute]
|
||||
} else if (this.valueAttribute) {
|
||||
return opt[this.valueAttribute];
|
||||
} else {
|
||||
return opt.toString();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function optionValue(opt) {
|
||||
if (props.valueAttribute) {
|
||||
return opt[props.valueAttribute];
|
||||
optionValue(opt) {
|
||||
if (this.valueAttribute) {
|
||||
return opt[this.valueAttribute];
|
||||
} else {
|
||||
return opt.toString();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function optionLabel(opt) {
|
||||
if (props.labelAttribute) {
|
||||
return opt[props.labelAttribute];
|
||||
optionLabel(opt) {
|
||||
if (this.labelAttribute) {
|
||||
return opt[this.labelAttribute];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function optionMousemove(idx) {
|
||||
activeListIndex.value = idx;
|
||||
}
|
||||
optionMousemove(idx) {
|
||||
this.activeListIndex = idx;
|
||||
},
|
||||
|
||||
function clickHandler(evt) {
|
||||
emit('inputClick', evt);
|
||||
}
|
||||
clickHandler(evt) {
|
||||
this.$emit("inputClick", evt);
|
||||
},
|
||||
|
||||
function blurHandler(evt) {
|
||||
blurHandler(evt) {
|
||||
// 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(() => {
|
||||
isListOpen.value = false;
|
||||
this.isListOpen = false;
|
||||
},250);
|
||||
}
|
||||
},
|
||||
|
||||
function inputHandler(evt) {
|
||||
inputHandler(evt) {
|
||||
const newValue = evt.target.value;
|
||||
|
||||
if (rawValue.value !== newValue) {
|
||||
if (this.rawValue !== newValue) {
|
||||
|
||||
rawValue.value = newValue;
|
||||
this.rawValue = newValue;
|
||||
|
||||
emit("update:modelValue", newValue);
|
||||
this.$emit("input", newValue);
|
||||
|
||||
if (newValue.length >= Math.max(1, props.minLength)) {
|
||||
updateOptions(newValue);
|
||||
if (newValue.length >= Math.max(1, this.minLength)) {
|
||||
this.debouncedUpdateOptions(newValue);
|
||||
} else {
|
||||
isListOpen.value = false;
|
||||
}
|
||||
this.isListOpen = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function keydownHandler(evt) {
|
||||
if (isListOpen.value === false)
|
||||
keydownHandler(evt) {
|
||||
if (this.isListOpen === false)
|
||||
return;
|
||||
|
||||
switch (evt.key) {
|
||||
case "ArrowUp":
|
||||
evt.preventDefault();
|
||||
activeListIndex.value = Math.max(0, activeListIndex.value - 1);
|
||||
this.activeListIndex = Math.max(0, this.activeListIndex - 1);
|
||||
break;
|
||||
case "ArrowDown":
|
||||
evt.preventDefault();
|
||||
activeListIndex.value = Math.min(options.value.length - 1, activeListIndex.value + 1);
|
||||
this.activeListIndex = Math.min(this.options.length - 1, this.activeListIndex + 1);
|
||||
break;
|
||||
case "Enter":
|
||||
evt.preventDefault();
|
||||
selectOption(options.value[activeListIndex.value]);
|
||||
this.selectOption(this.options[this.activeListIndex]);
|
||||
break;
|
||||
case "Escape":
|
||||
evt.preventDefault();
|
||||
isListOpen.value = false;
|
||||
this.isListOpen = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function selectOption(opt) {
|
||||
rawValue.value = optionValue(opt);
|
||||
emit("update:modelValue", rawValue.value);
|
||||
emit("optionSelected", opt);
|
||||
isListOpen.value = false;
|
||||
}
|
||||
selectOption(opt) {
|
||||
this.rawValue = this.optionValue(opt);
|
||||
this.$emit("input", this.rawValue);
|
||||
this.$emit("optionSelected", opt);
|
||||
this.isListOpen = false;
|
||||
},
|
||||
|
||||
const updateOptions = debounce(function(value) {
|
||||
updateOptions(value) {
|
||||
let p = null;
|
||||
if (props.searchOptions) {
|
||||
if (this.searchOptions) {
|
||||
const reg = new RegExp("^" + value, "i");
|
||||
const matcher = o => reg.test(optionValue(o));
|
||||
p = Promise.resolve(props.searchOptions.filter(matcher));
|
||||
const matcher = o => reg.test(this.optionValue(o));
|
||||
p = Promise.resolve(this.searchOptions.filter(matcher));
|
||||
} else {
|
||||
p = props.onGetOptions(value)
|
||||
p = this.onGetOptions(value)
|
||||
}
|
||||
|
||||
p.then(opts => {
|
||||
options.value = opts;
|
||||
isListOpen.value = opts.length > 0;
|
||||
activeListIndex.value = 0;
|
||||
this.options = opts;
|
||||
this.isListOpen = opts.length > 0;
|
||||
this.activeListIndex = 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 {
|
||||
|
||||
@ -1,45 +1,47 @@
|
||||
<template>
|
||||
<app-modal :open="open" :title="title" @dismiss="runCancel">
|
||||
<p class="is-size-5">{{ message }}</p>
|
||||
|
||||
<template #footer>
|
||||
<app-modal :open="open" :title="message" @dismiss="runCancel">
|
||||
<div class="buttons">
|
||||
<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
|
||||
},
|
||||
|
||||
confirm: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
|
||||
const props = defineProps({
|
||||
message: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'Are you sure?'
|
||||
},
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "Confirm"
|
||||
},
|
||||
|
||||
open: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
function runConfirm() {
|
||||
emit("confirm");
|
||||
}
|
||||
methods: {
|
||||
runConfirm() {
|
||||
this.confirm();
|
||||
},
|
||||
|
||||
function runCancel() {
|
||||
emit("cancel");
|
||||
}
|
||||
runCancel() {
|
||||
this.cancel();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,15 +1,14 @@
|
||||
<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"]);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
required: false,
|
||||
type: [Date, String]
|
||||
},
|
||||
@ -19,16 +18,21 @@
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const stringValue = computed(() => {
|
||||
const d = DateTimeUtils.toDate(props.modelValue);
|
||||
computed: {
|
||||
stringValue() {
|
||||
const d = DateTimeUtils.toDate(this.value);
|
||||
return DateTimeUtils.formatDateForEdit(d);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function input(val) {
|
||||
methods: {
|
||||
input(val) {
|
||||
let d = DateTimeUtils.toDate(val + " 00:00");
|
||||
emit("update:modelValue", d);
|
||||
this.$emit("input", d);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
import DateTimeUtils from "../lib/DateTimeUtils";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
dateTime: {
|
||||
required: true,
|
||||
type: [Date, String]
|
||||
@ -33,21 +33,29 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const dateObj = computed(() => DateTimeUtils.toDate(props.dateTime));
|
||||
const fullString = computed(() => DateTimeUtils.formatTimestamp(dateObj.value));
|
||||
computed: {
|
||||
dateObj() {
|
||||
return DateTimeUtils.toDate(this.dateTime);
|
||||
},
|
||||
|
||||
const friendlyString = computed(() => {
|
||||
friendlyString() {
|
||||
const parts = [];
|
||||
if (props.showDate) {
|
||||
parts.push(DateTimeUtils.formatDate(dateObj.value));
|
||||
if (this.showDate) {
|
||||
parts.push(DateTimeUtils.formatDate(this.dateObj));
|
||||
}
|
||||
if (props.showTime) {
|
||||
parts.push(DateTimeUtils.formatTime(dateObj.value, true));
|
||||
if (this.showTime) {
|
||||
parts.push(DateTimeUtils.formatTime(this.dateObj, true));
|
||||
}
|
||||
return parts.join(" ");
|
||||
});
|
||||
},
|
||||
|
||||
fullString() {
|
||||
return DateTimeUtils.formatTimestamp(this.dateObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,13 +19,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { useTemplateRef } from "vue";
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
|
||||
const emit = defineEmits(["close", "open"]);
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
open: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
@ -48,34 +45,41 @@ const props = defineProps({
|
||||
required: false,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const dropdownElement = useTemplateRef("dropdown");
|
||||
|
||||
onClickOutside(dropdownElement, event => handleOutsideClick(event))
|
||||
|
||||
function toggle() {
|
||||
if (props.open) {
|
||||
triggerClose();
|
||||
methods: {
|
||||
toggle() {
|
||||
if (this.open) {
|
||||
this.triggerClose();
|
||||
} else {
|
||||
triggerOpen();
|
||||
this.triggerOpen();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function triggerOpen() {
|
||||
emit("open");
|
||||
}
|
||||
triggerOpen() {
|
||||
this.$emit("open");
|
||||
},
|
||||
|
||||
function triggerClose() {
|
||||
emit("close");
|
||||
}
|
||||
triggerClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
function handleOutsideClick(evt) {
|
||||
if (props.open) {
|
||||
if (!dropdownElement.value.contains(evt.target)) {
|
||||
triggerClose();
|
||||
handleOutsideClick(evt) {
|
||||
if (this.open) {
|
||||
if (!this.$el.contains(evt.target)) {
|
||||
this.triggerClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener("click", this.handleOutsideClick);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
document.removeEventListener("click", this.handleOutsideClick);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -9,28 +9,33 @@
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import TWEEN from '@tweenjs/tween.js';
|
||||
import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
expandTime: {
|
||||
type: Number,
|
||||
default: 250
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
let animation = null;
|
||||
|
||||
function cancel () {
|
||||
if (animation) {
|
||||
animation.stop();
|
||||
animation = null;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
animation: null
|
||||
}
|
||||
},
|
||||
|
||||
function enter(element, done) {
|
||||
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);
|
||||
@ -48,15 +53,15 @@
|
||||
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)
|
||||
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(() => {
|
||||
animation = null;
|
||||
this.animation = null;
|
||||
element.removeAttribute('style');
|
||||
element.style.opacity = 0.99;
|
||||
setTimeout(() => {
|
||||
@ -65,32 +70,32 @@
|
||||
}, 1000);
|
||||
done();
|
||||
})
|
||||
.group(useGlobalTweenGroup())
|
||||
.start();
|
||||
}
|
||||
},
|
||||
|
||||
function leave(element, done) {
|
||||
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)
|
||||
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(() => {
|
||||
animation = null;
|
||||
this.animation = null;
|
||||
element.removeAttribute('style');
|
||||
done();
|
||||
})
|
||||
.group(useGlobalTweenGroup())
|
||||
.start();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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) {
|
||||
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);
|
||||
|
||||
data() {
|
||||
return {
|
||||
iconClasses,
|
||||
iconData,
|
||||
sizeData,
|
||||
iconicAttributes,
|
||||
iconicIcon,
|
||||
iconicSize
|
||||
injectedSvg: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
const svgElement = useTemplateRef("svg");
|
||||
const svgData = computed(() => iconMap[props.icon]);
|
||||
const svgAttributes = computed(() => svgData.value.attributes);
|
||||
const svgName = computed(() => svgAttributes.value['data-icon']);
|
||||
const svgContent = computed(() => {
|
||||
let content = String(svgData.value.content);
|
||||
data() {
|
||||
return {
|
||||
calculatedClasses: []
|
||||
}
|
||||
},
|
||||
|
||||
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}`);
|
||||
}
|
||||
methods: {
|
||||
|
||||
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) {
|
||||
rebind() {
|
||||
const apis = APIS;
|
||||
if (apis && apis[name]) {
|
||||
const iconApi = apis[name](svgElement.value);
|
||||
for (let func in iconApi) svgElement.value[func] = iconApi[func]
|
||||
|
||||
if (apis && this.svgName && apis[this.svgName]) {
|
||||
const iconApi = apis[this.svgName](this.$el);
|
||||
for (let func in iconApi) this.$el[func] = iconApi[func]
|
||||
} else {
|
||||
svgElement.value.update = function() {}
|
||||
}
|
||||
svgElement.value.update();
|
||||
this.$el.update = function() {}
|
||||
}
|
||||
|
||||
function updateScripts() {
|
||||
ensureSvgApi(svgName.value, svgData.value.scriptBlocks);
|
||||
setupSvgApi(svgName.value);
|
||||
this.calculatedClasses = (this.svgAttributes.class || "").split(" ");
|
||||
|
||||
this.calculatedClasses.push(`iconic-${this.size}`);
|
||||
|
||||
if (this.iconSizeOverride) {
|
||||
this.calculatedClasses.push(`iconic-icon-${this.iconSizeOverride}`);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateScripts();
|
||||
});
|
||||
if (this.displaySizeOverride) {
|
||||
this.calculatedClasses.push(`iconic-size-${this.displaySizeOverride}`);
|
||||
}
|
||||
|
||||
onUpdated(() => {
|
||||
updateScripts();
|
||||
});
|
||||
this.$el.update();
|
||||
}
|
||||
},
|
||||
|
||||
return {
|
||||
svgData,
|
||||
svgAttributes,
|
||||
svgName,
|
||||
svgContent,
|
||||
calculatedClasses
|
||||
};
|
||||
created() {
|
||||
if (LOADED_APIS[this.svgName] !== true) {
|
||||
for (let sb of this.svgData.scriptBlocks) {
|
||||
new Function(sb)(window);
|
||||
}
|
||||
LOADED_APIS[this.svgName] = true;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.$watch(
|
||||
function() { return [this.$attrs, this.icon, this.fluid] },
|
||||
function() {
|
||||
this.rebind()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div :class="['modal', { 'is-wide': wide, 'is-active': open && error === null }]">
|
||||
<div ref="container">
|
||||
<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,24 +13,17 @@
|
||||
<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 { useAppConfigStore } from "../stores/appConfig";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
const emit = defineEmits(["dismiss"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -40,13 +33,30 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const appConfig = useAppConfigStore();
|
||||
const error = computed(() => appConfig.error);
|
||||
mounted() {
|
||||
this.$root.$el.appendChild(this.$refs.modal);
|
||||
},
|
||||
|
||||
function close() {
|
||||
emit("dismiss");
|
||||
beforeDestroy() {
|
||||
this.$refs.container.appendChild(this.$refs.modal);
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState([
|
||||
'error'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("dismiss");
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -51,27 +51,46 @@
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { ref, watch } from "vue";
|
||||
import UserLogin from "./UserLogin";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useAppConfigStore } from "../stores/appConfig";
|
||||
import { mapState } from "vuex";
|
||||
import { swUpdate } from "../lib/ServiceWorker";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const appConfig = useAppConfigStore();
|
||||
const menuActive = ref(false);
|
||||
const route = useRoute();
|
||||
const { isAdmin, isLoggedIn, updateAvailable, user } = storeToRefs(appConfig);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuActive: false
|
||||
};
|
||||
},
|
||||
|
||||
function updateApp() {
|
||||
computed: {
|
||||
...mapState([
|
||||
'route',
|
||||
'user',
|
||||
'updateAvailable'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateApp() {
|
||||
swUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
watch(
|
||||
() => [route, appConfig.user],
|
||||
() => menuActive.value = false
|
||||
);
|
||||
watch: {
|
||||
route() {
|
||||
this.menuActive = false;
|
||||
},
|
||||
|
||||
user() {
|
||||
this.menuActive = false;
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
UserLogin
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -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-next': true, 'is-disabled': isLastPage}" :title="isLastPage ? 'This is the last page' : ''" @click.prevent="changePage(currentPage + 1)">Next page</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" :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,13 +11,10 @@
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const emit = defineEmits(["changePage"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
pagedItemName: {
|
||||
required: false,
|
||||
type: String,
|
||||
@ -51,18 +48,19 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const pageItems = computed(() => {
|
||||
computed: {
|
||||
pageItems() {
|
||||
const items = new Set();
|
||||
|
||||
for (let x = 0; x < props.pageOuterWindow; x++) {
|
||||
for (let x = 0; x < this.pageOuterWindow; x++) {
|
||||
items.add(x + 1);
|
||||
items.add(props.totalPages - x);
|
||||
items.add(this.totalPages - x);
|
||||
}
|
||||
|
||||
const start = props.currentPage - Math.ceil(props.pageWindow / 2);
|
||||
const end = props.currentPage + Math.floor(props.pageWindow / 2);
|
||||
const start = this.currentPage - Math.ceil(this.pageWindow / 2);
|
||||
const end = this.currentPage + Math.floor(this.pageWindow / 2);
|
||||
|
||||
for (let x = start; x <= end; x++) {
|
||||
items.add(x);
|
||||
@ -71,7 +69,7 @@ const pageItems = computed(() => {
|
||||
let emptySpace = -1;
|
||||
const finalList = [];
|
||||
|
||||
[...items.values()].filter(p => p > 0 && p <= props.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
|
||||
[...items.values()].filter(p => p > 0 && p <= this.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
|
||||
finalList.push(p);
|
||||
if (list[idx + 1] && list[idx + 1] !== p + 1) {
|
||||
finalList.push(emptySpace--);
|
||||
@ -79,13 +77,30 @@ const pageItems = computed(() => {
|
||||
});
|
||||
|
||||
return finalList;
|
||||
});
|
||||
},
|
||||
|
||||
const isLastPage = computed(() => props.currentPage === props.totalPages);
|
||||
const isFirstPage = computed(() => props.currentPage === 1);
|
||||
isLastPage() {
|
||||
return this.currentPage === this.totalPages;
|
||||
},
|
||||
|
||||
function changePage(idx) {
|
||||
emit("changePage", idx);
|
||||
}
|
||||
isFirstPage() {
|
||||
return this.currentPage === 1;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(idx) {
|
||||
this.$emit("changePage", idx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
ul.pagination {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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>
|
||||
@ -9,13 +9,11 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed, ref, useTemplateRef } from "vue";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
starCount: {
|
||||
required: false,
|
||||
type: Number,
|
||||
@ -34,66 +32,80 @@ const props = defineProps({
|
||||
default: 0.5
|
||||
},
|
||||
|
||||
modelValue: {
|
||||
value: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const temporaryValue = ref(null);
|
||||
const ratingPercent = computed(() => ((props.modelValue || 0) / props.starCount) * 100.0);
|
||||
const wrapperEl = useTemplateRef("wrapper");
|
||||
data() {
|
||||
return {
|
||||
temporaryValue: null
|
||||
};
|
||||
},
|
||||
|
||||
const temporaryPercent = computed(() => {
|
||||
if (temporaryValue.value !== null) {
|
||||
return (temporaryValue.value / props.starCount) * 100.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;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const filledStyle = computed(() => {
|
||||
const width = temporaryPercent.value || ratingPercent.value;
|
||||
filledStyle() {
|
||||
const width = this.temporaryPercent || this.ratingPercent;
|
||||
return {
|
||||
width: width + "%"
|
||||
};
|
||||
});
|
||||
|
||||
function handleClick(evt) {
|
||||
if (temporaryValue.value !== null) {
|
||||
emit("update:modelValue", temporaryValue.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function handleMousemove(evt) {
|
||||
if (props.readonly) {
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
if (this.temporaryValue !== null) {
|
||||
this.$emit("input", this.temporaryValue);
|
||||
}
|
||||
},
|
||||
|
||||
handleMousemove(evt) {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapperBox = wrapperEl.value.getBoundingClientRect();
|
||||
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 = props.starCount / props.step;
|
||||
const totalSteps = this.starCount / this.step;
|
||||
const filledSteps = Math.round(totalSteps * filledRatio);
|
||||
|
||||
temporaryValue.value = filledSteps * props.step;
|
||||
this.temporaryValue = filledSteps * this.step;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function handleMouseleave(evt) {
|
||||
temporaryValue.value = null;
|
||||
}
|
||||
handleMouseleave(evt) {
|
||||
this.temporaryValue = null;
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
</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;
|
||||
|
||||
@ -6,45 +6,61 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { ref } from "vue";
|
||||
import debounce from "lodash/debounce";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
|
||||
modelValue: {
|
||||
value: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
|
||||
const text = ref(null);
|
||||
|
||||
const triggerInput = debounce(function() {
|
||||
emit("update:modelValue", text.value);
|
||||
},
|
||||
250,
|
||||
{ leading: false, trailing: true })
|
||||
|
||||
function userUpdateText(newText) {
|
||||
if (text.value !== newText) {
|
||||
text.value = newText;
|
||||
triggerInput();
|
||||
data() {
|
||||
return {
|
||||
text: null
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function propUpdateText(newText) {
|
||||
if (text.value === null && text.value !== newText) {
|
||||
text.value = newText;
|
||||
propUpdateText(text) {
|
||||
if (this.text === null && this.text !== text) {
|
||||
this.text = text;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$watch("value",
|
||||
val => this.propUpdateText(val),
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,38 +2,47 @@
|
||||
<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";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const hasFocus = ref(false);
|
||||
const tagText = computed(() => props.modelValue.join(" "));
|
||||
const inputElement = useTemplateRef("input");
|
||||
data() {
|
||||
return {
|
||||
hasFocus: false
|
||||
};
|
||||
},
|
||||
|
||||
function inputHandler(el) {
|
||||
computed: {
|
||||
tagText() {
|
||||
return this.value.join(" ");
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
},
|
||||
|
||||
methods: {
|
||||
inputHandler(el) {
|
||||
let str = el.target.value;
|
||||
checkInput(str);
|
||||
nextTick(() => {
|
||||
this.checkInput(str);
|
||||
this.$nextTick(() => {
|
||||
el.target.value = str;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function checkInput(str) {
|
||||
if (hasFocus.value) {
|
||||
checkInput(str) {
|
||||
if (this.hasFocus) {
|
||||
const m = str.match(/\S\s+\S*$/);
|
||||
|
||||
if (m !== null) {
|
||||
@ -45,21 +54,22 @@ function checkInput(str) {
|
||||
|
||||
const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
|
||||
|
||||
if (!arraysEqual(newTags, props.modelValue)) {
|
||||
emit("update:modelValue", newTags);
|
||||
if (!this.arraysEqual(newTags, this.value)) {
|
||||
this.$emit("input", newTags);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function getFocus() {
|
||||
hasFocus.value = true;
|
||||
}
|
||||
getFocus() {
|
||||
this.hasFocus = true;
|
||||
},
|
||||
|
||||
function loseFocus() {
|
||||
hasFocus.value = false;
|
||||
checkInput(inputElement.value.value);
|
||||
}
|
||||
loseFocus() {
|
||||
this.hasFocus = false;
|
||||
this.checkInput(this.$refs.input.value);
|
||||
|
||||
function arraysEqual(arr1, arr2) {
|
||||
},
|
||||
|
||||
arraysEqual(arr1, arr2) {
|
||||
if(arr1.length !== arr2.length)
|
||||
return false;
|
||||
for(let i = arr1.length; i--;) {
|
||||
@ -68,5 +78,8 @@ function arraysEqual(arr1, arr2) {
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -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>
|
||||
<input v-else :type="type" :class="inputClasses" v-model="model" :disabled="disabled">
|
||||
<textarea v-if="isTextarea" :class="inputClasses" :value="value" @input="input" :disabled="disabled"></textarea>
|
||||
<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,17 +12,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
modelValue: {
|
||||
value: {
|
||||
required: false,
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
@ -41,38 +40,53 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const model = defineModel({
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
});
|
||||
computed: {
|
||||
isTextarea() {
|
||||
return this.type === "textarea";
|
||||
},
|
||||
|
||||
const isTextarea = computed(() => props.type === "textarea");
|
||||
const controlClasses = computed(() => [
|
||||
controlClasses() {
|
||||
return [
|
||||
"control",
|
||||
{
|
||||
"has-icons-right": props.validationError !== null
|
||||
"has-icons-right": this.validationError !== null
|
||||
}
|
||||
]);
|
||||
]
|
||||
},
|
||||
|
||||
const inputClasses = computed(() =>[
|
||||
inputClasses() {
|
||||
return [
|
||||
"is-small-mobile",
|
||||
{
|
||||
"textarea": isTextarea.value,
|
||||
"input": !isTextarea.value,
|
||||
"is-danger": props.validationError !== null
|
||||
"textarea": this.isTextarea,
|
||||
"input": !this.isTextarea,
|
||||
"is-danger": this.validationError !== null
|
||||
}
|
||||
]);
|
||||
]
|
||||
},
|
||||
|
||||
const helpMessage = computed(() => props.validationError);
|
||||
const helpClasses = computed(() => [
|
||||
helpMessage() {
|
||||
return this.validationError;
|
||||
},
|
||||
|
||||
helpClasses() {
|
||||
return [
|
||||
"help",
|
||||
{
|
||||
"is-danger": props.validationError !== null
|
||||
"is-danger": this.validationError !== null
|
||||
}
|
||||
]);
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
input(evt) {
|
||||
this.$emit("input", evt.target.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,14 +6,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
errors: {
|
||||
required: false,
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -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,19 +136,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
import api from "../lib/Api";
|
||||
import { mapState } from "pinia";
|
||||
import { useNutrientStore } from "../stores/nutrient";
|
||||
import { useLoadResource } from "../lib/useLoadResource";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
const nutrientStore = useNutrientStore();
|
||||
const nutrients = computed(() => nutrientStore.nutrientList);
|
||||
const { loadResource } = useLoadResource();
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
food: {
|
||||
required: true,
|
||||
type: Object
|
||||
@ -171,35 +157,53 @@
|
||||
type: String,
|
||||
default: "Editing"
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const visibleFoodUnits = computed(() => props.food.food_units.filter(iu => iu._destroy !== true));
|
||||
const hasNdbn = computed(() => props.food.ndbn !== null);
|
||||
data() {
|
||||
return {
|
||||
|
||||
function addUnit() {
|
||||
props.food.food_units.push({
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
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
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function removeUnit(unit) {
|
||||
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);
|
||||
}
|
||||
const idx = this.food.food_units.findIndex(i => i === unit);
|
||||
this.food.food_units.splice(idx, 1);
|
||||
}
|
||||
},
|
||||
|
||||
function removeNdbn() {
|
||||
props.food.ndbn = null;
|
||||
props.food.usda_food_name = null;
|
||||
props.food.ndbn_units = [];
|
||||
}
|
||||
removeNdbn() {
|
||||
this.food.ndbn = null;
|
||||
this.food.usda_food_name = null;
|
||||
this.food.ndbn_units = [];
|
||||
},
|
||||
|
||||
function updateSearchItems(text) {
|
||||
updateSearchItems(text) {
|
||||
return api.getUsdaFoodSearch(text)
|
||||
.then(data => data.map(f => {
|
||||
return {
|
||||
@ -208,18 +212,23 @@
|
||||
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 = [];
|
||||
searchItemSelected(food) {
|
||||
this.food.ndbn = food.ndbn;
|
||||
this.food.usda_food_name = food.name;
|
||||
this.food.ndbn_units = [];
|
||||
|
||||
loadResource(
|
||||
api.postIngredientSelectNdbn(props.food)
|
||||
.then(i => Object.assign(props.food, i))
|
||||
this.loadResource(
|
||||
api.postIngredientSelectNdbn(this.food)
|
||||
.then(i => Object.assign(this.food, i))
|
||||
);
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -53,20 +53,24 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
import { useNutrientStore } from "../stores/nutrient";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
food: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const nutrientStore = useNutrientStore();
|
||||
const nutrients = computed(() => nutrientStore.nutrientList);
|
||||
computed: {
|
||||
...mapState({
|
||||
nutrients: 'nutrientList'
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -31,11 +31,12 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import RecipeEdit from "./RecipeEdit";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
log: {
|
||||
required: true,
|
||||
type: Object
|
||||
@ -45,7 +46,12 @@
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
components: {
|
||||
RecipeEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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 {
|
||||
props: {
|
||||
log: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
components: {
|
||||
RecipeShow
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -19,27 +19,37 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const emit = defineEmits(["save", "cancel"]);
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
note: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const canSave = computed(() => props.note?.content?.length);
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
|
||||
function save() {
|
||||
emit("save", props.note);
|
||||
}
|
||||
computed: {
|
||||
canSave() {
|
||||
return this.note && this.note.content && this.note.content.length;
|
||||
}
|
||||
},
|
||||
|
||||
function cancel() {
|
||||
emit("cancel");
|
||||
}
|
||||
methods: {
|
||||
save() {
|
||||
this.$emit("save", this.note);
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.$emit("cancel");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,15 +204,16 @@ _underline_
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed, ref, useTemplateRef, watch } from "vue";
|
||||
import { useAutosize } from "../lib/useAutosize";
|
||||
import autosize from "autosize";
|
||||
import debounce from "lodash/debounce";
|
||||
import api from "../lib/Api";
|
||||
|
||||
import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
recipe: {
|
||||
required: true,
|
||||
type: Object
|
||||
@ -224,32 +223,48 @@ _underline_
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const stepTextArea = useTemplateRef("step_text_area");
|
||||
const stepPreviewCache = ref(null);
|
||||
const isDescriptionHelpOpen = ref(false);
|
||||
data() {
|
||||
return {
|
||||
stepPreviewCache: null,
|
||||
isDescriptionHelpOpen: false
|
||||
};
|
||||
},
|
||||
|
||||
useAutosize(stepTextArea);
|
||||
|
||||
const stepPreview = computed(() => {
|
||||
if (stepPreviewCache.value === null) {
|
||||
return props.recipe.rendered_steps;
|
||||
computed: {
|
||||
stepPreview() {
|
||||
if (this.stepPreviewCache === null) {
|
||||
return this.recipe.rendered_steps;
|
||||
} else {
|
||||
return stepPreviewCache.value;
|
||||
return this.stepPreviewCache;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
const updatePreview = debounce(function() {
|
||||
api.postPreviewSteps(props.recipe.step_text)
|
||||
.then(data => stepPreviewCache.value = data.rendered_steps)
|
||||
.catch(err => stepPreviewCache.value = "?? Error ??");
|
||||
}, 750);
|
||||
methods: {
|
||||
|
||||
watch(
|
||||
() => props.recipe.step_text,
|
||||
() => updatePreview()
|
||||
);
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,28 +39,33 @@
|
||||
</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 {
|
||||
props: {
|
||||
ingredients: {
|
||||
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));
|
||||
data() {
|
||||
return {
|
||||
isBulkEditing: false,
|
||||
bulkEditText: null
|
||||
};
|
||||
},
|
||||
|
||||
const bulkIngredientPreview = computed(() => {
|
||||
if (bulkEditText.value === null || bulkEditText.value === "") {
|
||||
computed: {
|
||||
...mapState({
|
||||
isMobile: state => state.mediaQueries.mobile
|
||||
}),
|
||||
bulkIngredientPreview() {
|
||||
if (this.bulkEditText === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
@ -79,7 +80,7 @@
|
||||
};
|
||||
|
||||
const parsed = [];
|
||||
const lines = bulkEditText.value.replace("\r", "").split("\n");
|
||||
const lines = this.bulkEditText.replace("\r", "").split("\n");
|
||||
|
||||
for (let line of lines) {
|
||||
if (line.length === 0) { continue; }
|
||||
@ -96,10 +97,16 @@
|
||||
}
|
||||
|
||||
return parsed;
|
||||
});
|
||||
},
|
||||
|
||||
function createIngredient() {
|
||||
const sort_orders = props.ingredients.map(i => i.sort_order);
|
||||
visibleIngredients() {
|
||||
return this.ingredients.filter(i => i._destroy !== true);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
createIngredient() {
|
||||
const sort_orders = this.ingredients.map(i => i.sort_order);
|
||||
sort_orders.push(0);
|
||||
const next_sort_order = Math.max(...sort_orders) + 5;
|
||||
|
||||
@ -112,27 +119,27 @@
|
||||
ingredient_id: null,
|
||||
sort_order: next_sort_order
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
function addIngredient() {
|
||||
props.ingredients.push(createIngredient());
|
||||
}
|
||||
addIngredient() {
|
||||
this.ingredients.push(this.createIngredient());
|
||||
},
|
||||
|
||||
function deleteFood(food) {
|
||||
deleteFood(food) {
|
||||
if (food.id) {
|
||||
food._destroy = true;
|
||||
} else {
|
||||
const idx = props.ingredients.findIndex(i => i === food);
|
||||
props.ingredients.splice(idx, 1);
|
||||
}
|
||||
const idx = this.ingredients.findIndex(i => i === food);
|
||||
this.ingredients.splice(idx, 1);
|
||||
}
|
||||
},
|
||||
|
||||
function bulkEditIngredients() {
|
||||
isBulkEditing.value = true;
|
||||
bulkEditIngredients() {
|
||||
this.isBulkEditing = true;
|
||||
|
||||
let text = [];
|
||||
|
||||
for (let item of visibleIngredients.value) {
|
||||
for (let item of this.visibleIngredients) {
|
||||
text.push(
|
||||
item.quantity + " " +
|
||||
(item.units || "-") + " " +
|
||||
@ -142,16 +149,16 @@
|
||||
);
|
||||
}
|
||||
|
||||
bulkEditText.value = text.join("\n");
|
||||
}
|
||||
this.bulkEditText = text.join("\n");
|
||||
},
|
||||
|
||||
function cancelBulkEditing() {
|
||||
isBulkEditing.value = false;
|
||||
}
|
||||
cancelBulkEditing() {
|
||||
this.isBulkEditing = false;
|
||||
},
|
||||
|
||||
function saveBulkEditing() {
|
||||
const parsed = bulkIngredientPreview.value.filter(i => i !== null);
|
||||
const existing = [...props.ingredients];
|
||||
saveBulkEditing() {
|
||||
const parsed = this.bulkIngredientPreview.filter(i => i !== null);
|
||||
const existing = [...this.ingredients];
|
||||
const newList = [];
|
||||
|
||||
for (let parsedIngredient of parsed) {
|
||||
@ -170,7 +177,7 @@
|
||||
}
|
||||
|
||||
if (newIngredient === null) {
|
||||
newIngredient = createIngredient();
|
||||
newIngredient = this.createIngredient();
|
||||
}
|
||||
|
||||
newIngredient.quantity = parsedIngredient.quantity;
|
||||
@ -184,14 +191,20 @@
|
||||
newList.push({id: oldExisting.id, _destroy: true});
|
||||
}
|
||||
|
||||
props.ingredients.splice(0);
|
||||
this.ingredients.splice(0);
|
||||
let sortIdx = 0;
|
||||
for (let n of newList) {
|
||||
n.sort_order = sortIdx++;
|
||||
props.ingredients.push(n);
|
||||
this.ingredients.push(n);
|
||||
}
|
||||
|
||||
isBulkEditing.value = false;
|
||||
this.isBulkEditing = false;
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
RecipeEditIngredientItem
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -44,13 +44,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { useTemplateRef, watch } from "vue";
|
||||
import api from "../lib/Api";
|
||||
|
||||
const emit = defineEmits(["deleteFood"]);
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
ingredient: {
|
||||
required: true,
|
||||
type: Object
|
||||
@ -60,34 +59,40 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const autocompleteElement = useTemplateRef("autocomplete");
|
||||
methods: {
|
||||
deleteFood(ingredient) {
|
||||
this.$emit("deleteFood", ingredient);
|
||||
},
|
||||
|
||||
watch(props.ingredient, (val) => {
|
||||
if (props.ingredient.ingredient && props.ingredient.ingredient.name !== val) {
|
||||
props.ingredient.ingredient_id = null;
|
||||
props.ingredient.ingredient = null;
|
||||
}
|
||||
});
|
||||
|
||||
function deleteFood(ingredient) {
|
||||
emit("deleteFood", ingredient);
|
||||
}
|
||||
|
||||
function updateSearchItems(text) {
|
||||
updateSearchItems(text) {
|
||||
return api.getSearchIngredients(text);
|
||||
}
|
||||
},
|
||||
|
||||
function searchItemSelected(ingredient) {
|
||||
props.ingredient.ingredient_id = ingredient.id;
|
||||
props.ingredient.ingredient = ingredient;
|
||||
props.ingredient.name = ingredient.name;
|
||||
}
|
||||
searchItemSelected(ingredient) {
|
||||
this.ingredient.ingredient_id = ingredient.id;
|
||||
this.ingredient.ingredient = ingredient;
|
||||
this.ingredient.name = ingredient.name;
|
||||
},
|
||||
|
||||
function nameClick() {
|
||||
if (props.ingredient.ingredient_id === null && props.ingredient.name !== null && props.ingredient.name.length > 2) {
|
||||
autocompleteElement.updateOptions(props.ingredient.name);
|
||||
nameClick() {
|
||||
if (this.ingredient.ingredient_id === null && this.ingredient.name !== null && this.ingredient.name.length > 2) {
|
||||
this.$refs.autocomplete.updateOptions(this.ingredient.name);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'ingredient.name': function(val) {
|
||||
if (this.ingredient.ingredient && this.ingredient.ingredient.name !== val) {
|
||||
this.ingredient.ingredient_id = null;
|
||||
this.ingredient.ingredient = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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,32 +146,30 @@
|
||||
</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();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
recipe: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const showNutrition = ref(false);
|
||||
const showConvertDialog = ref(false);
|
||||
const addToTasksMenuOpen = ref(false);
|
||||
data() {
|
||||
return {
|
||||
showNutrition: false,
|
||||
showConvertDialog: false,
|
||||
addToTasksMenuOpen: false,
|
||||
|
||||
const scaleValue = ref('1');
|
||||
const systemConvertValue = ref('');
|
||||
const unitConvertValue = ref('');
|
||||
scaleValue: '1',
|
||||
systemConvertValue: "",
|
||||
unitConvertValue: "",
|
||||
|
||||
const scaleOptions = [
|
||||
scaleOptions: [
|
||||
'1/4',
|
||||
'1/3',
|
||||
'1/2',
|
||||
@ -186,60 +180,88 @@
|
||||
'2',
|
||||
'3',
|
||||
'4'
|
||||
];
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
const timeDisplay = computed(() => {
|
||||
let a = formatMinutes(props.recipe.active_time);
|
||||
const t = formatMinutes(props.recipe.total_time);
|
||||
computed: {
|
||||
...mapState([
|
||||
'taskLists'
|
||||
]),
|
||||
|
||||
timeDisplay() {
|
||||
let a = this.formatMinutes(this.recipe.active_time);
|
||||
const t = this.formatMinutes(this.recipe.total_time);
|
||||
|
||||
if (a) {
|
||||
a = ` (${a} active)`;
|
||||
}
|
||||
|
||||
return t + a;
|
||||
});
|
||||
},
|
||||
|
||||
const sourceUrl = computed(() => {
|
||||
sourceUrl() {
|
||||
try {
|
||||
return new URL(props.recipe.source);
|
||||
return new URL(this.recipe.source);
|
||||
} catch(err) {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const isSourceUrl = computed(() => sourceUrl.value !== null);
|
||||
const sourceText = computed(() => isSourceUrl.value ? sourceUrl.value.host : props.recipe.source);
|
||||
isSourceUrl() {
|
||||
return this.sourceUrl !== null;
|
||||
},
|
||||
|
||||
watch(props.recipe, (r) => {
|
||||
sourceText() {
|
||||
if (this.isSourceUrl) {
|
||||
return this.sourceUrl.host;
|
||||
} else {
|
||||
return this.source;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
recipe: {
|
||||
handler: function(r) {
|
||||
if (r) {
|
||||
scaleValue.value = r.converted_scale || '1';
|
||||
systemConvertValue.value = r.converted_system;
|
||||
unitConvertValue.value = r.converted_unit;
|
||||
this.scaleValue = r.converted_scale || '1';
|
||||
this.systemConvertValue = r.converted_system;
|
||||
this.unitConvertValue = r.converted_unit;
|
||||
}
|
||||
}, { immediate: true });
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
onMounted(() => {
|
||||
taskStore.ensureTaskLists();
|
||||
});
|
||||
methods: {
|
||||
...mapActions([
|
||||
'ensureTaskLists'
|
||||
]),
|
||||
|
||||
function addRecipeToList(list) {
|
||||
api.addRecipeToTaskList(list.id, props.recipe.id)
|
||||
...mapMutations([
|
||||
'setCurrentTaskList'
|
||||
]),
|
||||
|
||||
addRecipeToList(list) {
|
||||
console.log(list);
|
||||
api.addRecipeToTaskList(list.id, this.recipe.id)
|
||||
.then(() => {
|
||||
taskStore.setCurrentTaskList(list);
|
||||
router.push({name: 'task_lists'})
|
||||
this.setCurrentTaskList(list);
|
||||
this.$router.push({name: 'task_lists'})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function convert() {
|
||||
showConvertDialog.value = false;
|
||||
router.push({name: 'recipe', query: { scale: scaleValue.value, system: systemConvertValue.value, unit: unitConvertValue.value }});
|
||||
}
|
||||
convert() {
|
||||
this.showConvertDialog = false;
|
||||
this.$router.push({name: 'recipe', query: { scale: this.scaleValue, system: this.systemConvertValue, unit: this.unitConvertValue }});
|
||||
},
|
||||
|
||||
function roundValue(v) {
|
||||
roundValue(v) {
|
||||
return parseFloat(v).toFixed(2);
|
||||
}
|
||||
},
|
||||
|
||||
function formatMinutes(min) {
|
||||
formatMinutes(min) {
|
||||
if (min) {
|
||||
const partUnits = [
|
||||
{unit: "d", minutes: 60 * 24},
|
||||
@ -264,6 +286,12 @@
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.ensureTaskLists();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -24,41 +24,38 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { onMounted, useTemplateRef } from "vue";
|
||||
|
||||
const emit = defineEmits(["save"]);
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
taskItem: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const nameElement = useTemplateRef("nameInput");
|
||||
|
||||
onMounted(() => focus());
|
||||
|
||||
function inputKeydown(evt) {
|
||||
methods: {
|
||||
inputKeydown(evt) {
|
||||
switch (evt.key) {
|
||||
case "Enter":
|
||||
evt.preventDefault();
|
||||
save();
|
||||
}
|
||||
this.save();
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
emit("save", props.taskItem);
|
||||
}
|
||||
save() {
|
||||
this.$emit("save", this.taskItem);
|
||||
},
|
||||
|
||||
function focus() {
|
||||
nameElement.value.focus();
|
||||
focus() {
|
||||
this.$refs.nameInput.focus();
|
||||
}
|
||||
},
|
||||
|
||||
defineExpose({
|
||||
focus
|
||||
});
|
||||
mounted() {
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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 { useLoadResource } from "../lib/useLoadResource";
|
||||
import { mapActions } from "vuex";
|
||||
import cloneDeep from "lodash/cloneDeep";
|
||||
|
||||
import TaskItemEdit from "./TaskItemEdit";
|
||||
|
||||
const { loadResource } = useLoadResource();
|
||||
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() {
|
||||
const newItemTemplate = function(listId) {
|
||||
return {
|
||||
task_list_id: null,
|
||||
task_list_id: listId,
|
||||
name: '',
|
||||
quantity: '',
|
||||
completed: false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
function save() {
|
||||
newItem.value.task_list_id = props.taskList.id;
|
||||
loadResource(
|
||||
taskStore.createTaskItem(newItem.value)
|
||||
export default {
|
||||
props: {
|
||||
taskList: {
|
||||
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();
|
||||
itemEditElement.value.focus();
|
||||
this.newItem = newItemTemplate(this.taskList.id);
|
||||
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) {
|
||||
loadResource(
|
||||
taskStore.completeTaskItems({
|
||||
taskList: props.taskList,
|
||||
toggleItem(i) {
|
||||
this.loadResource(
|
||||
this.completeTaskItems({
|
||||
taskList: this.taskList,
|
||||
taskItems: [i],
|
||||
completed: !i.completed
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
function toggleShowAddItem() {
|
||||
newItem.value = newItemTemplate();
|
||||
showAddItem.value = !showAddItem.value;
|
||||
}
|
||||
toggleShowAddItem() {
|
||||
this.newItem = newItemTemplate(this.taskList.id);
|
||||
this.showAddItem = !this.showAddItem;
|
||||
},
|
||||
|
||||
function completeAllItems() {
|
||||
const toComplete = props.taskList.task_items.filter(i => !i.completed);
|
||||
loadResource(
|
||||
taskStore.completeTaskItems({
|
||||
taskList: props.taskList,
|
||||
completeAllItems() {
|
||||
const toComplete = this.taskList.task_items.filter(i => !i.completed);
|
||||
this.loadResource(
|
||||
this.completeTaskItems({
|
||||
taskList: this.taskList,
|
||||
taskItems: toComplete,
|
||||
completed: true
|
||||
})
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
function unCompleteAllItems() {
|
||||
const toUnComplete = props.taskList.task_items.filter(i => i.completed);
|
||||
loadResource(
|
||||
taskStore.completeTaskItems({
|
||||
taskList: props.taskList,
|
||||
unCompleteAllItems() {
|
||||
const toUnComplete = this.taskList.task_items.filter(i => i.completed);
|
||||
this.loadResource(
|
||||
this.completeTaskItems({
|
||||
taskList: this.taskList,
|
||||
taskItems: toUnComplete,
|
||||
completed: false
|
||||
})
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
function deleteCompletedItems() {
|
||||
loadResource(
|
||||
taskStore.deleteTaskItems({
|
||||
taskList: props.taskList,
|
||||
taskItems: props.taskList.task_items.filter(i => i.completed)
|
||||
deleteCompletedItems() {
|
||||
this.loadResource(
|
||||
this.deleteTaskItems({
|
||||
taskList: this.taskList,
|
||||
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;
|
||||
|
||||
@ -14,13 +14,10 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
const emit = defineEmits(["select", "delete"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
taskList: {
|
||||
type: Object,
|
||||
required: true
|
||||
@ -31,38 +28,44 @@
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const hovering = ref(false);
|
||||
const confirmingDelete = ref(false);
|
||||
data() {
|
||||
return {
|
||||
hovering: false,
|
||||
confirmingDelete: false
|
||||
};
|
||||
},
|
||||
|
||||
function selectList() {
|
||||
emit("select", props.taskList);
|
||||
methods: {
|
||||
selectList() {
|
||||
this.$emit("select", this.taskList);
|
||||
},
|
||||
|
||||
deleteList() {
|
||||
this.confirmingDelete = false;
|
||||
this.$emit("delete", this.taskList);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteList() {
|
||||
confirmingDelete.value = false;
|
||||
emit("delete", props.taskList);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@use "bulma/sass/utilities" as bulma;
|
||||
@use 'sass:color';
|
||||
@import "~styles/variables";
|
||||
|
||||
div.dropdown-item {
|
||||
cursor: pointer;
|
||||
|
||||
&.hovered {
|
||||
color: bulma.$black;
|
||||
background-color: bulma.$background;
|
||||
color: $black;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: color.invert(bulma.$link);
|
||||
background-color: bulma.$link;
|
||||
color: $link-invert;
|
||||
background-color: $link;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,11 +14,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
const emit = defineEmits(["save"]);
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
taskList: {
|
||||
required: true,
|
||||
type: Object
|
||||
@ -29,17 +28,20 @@
|
||||
type: Object,
|
||||
default: function() { return {}; }
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
function save() {
|
||||
emit("save");
|
||||
}
|
||||
methods: {
|
||||
save() {
|
||||
this.$emit("save");
|
||||
},
|
||||
|
||||
function nameKeydownHandler(evt) {
|
||||
nameKeydownHandler(evt) {
|
||||
switch (evt.key) {
|
||||
case "Enter":
|
||||
evt.preventDefault();
|
||||
save();
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -7,7 +7,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Parsley is released under the MIT License. All code © Dan Elbert 2024.
|
||||
Parsley is released under the MIT License. All code © Dan Elbert 2020.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@ -19,7 +19,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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();
|
||||
const userList = ref([]);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userList: []
|
||||
};
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getAdminUserList()
|
||||
.then(list => userList.value = list)
|
||||
.then(list => this.userList = list)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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("");
|
||||
const outputUnit = ref("");
|
||||
const ingredient_name = ref("");
|
||||
const ingredient = ref(null);
|
||||
const density = ref("");
|
||||
const output = ref("");
|
||||
const errors = ref({});
|
||||
computed: {
|
||||
inputErrors() {
|
||||
if (this.errors.input && this.errors.input.length > 0) {
|
||||
return this.errors.input.join(", ");
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
const inputErrors = computed(() => getErrors("input"));
|
||||
const outputUnitErrors = computed(() => getErrors("output_unit"));
|
||||
const densityErrors = computed(() => getErrors("density"));
|
||||
outputUnitErrors() {
|
||||
if (this.errors.output_unit && this.errors.output_unit.length > 0) {
|
||||
return this.errors.output_unit.join(", ");
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
const updateOutput = debounce(function() {
|
||||
if (input.value && input.value.length > 0) {
|
||||
loadResource(api.getCalculate(input.value, outputUnit.value, ingredient.value ? ingredient.value.ingredient_id : null, density.value)
|
||||
densityErrors() {
|
||||
if (this.errors.density && this.errors.density.length > 0) {
|
||||
return this.errors.density.join(", ");
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateSearchItems(text) {
|
||||
return api.getSearchIngredients(text);
|
||||
},
|
||||
|
||||
searchItemSelected(ingredient) {
|
||||
this.ingredient = ingredient || null;
|
||||
this.ingredient_name = ingredient.name || null;
|
||||
this.density = ingredient.density || null;
|
||||
},
|
||||
|
||||
updateOutput: debounce(function() {
|
||||
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 => {
|
||||
output.value = data.output;
|
||||
errors.value = data.errors;
|
||||
this.output = data.output;
|
||||
this.errors = data.errors;
|
||||
})
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
}, 500)
|
||||
},
|
||||
|
||||
watch(ingredient_name, function(val) {
|
||||
if (ingredient.value && ingredient.value.name !== val) {
|
||||
ingredient.value = null;
|
||||
watch: {
|
||||
'ingredient_name': function(val) {
|
||||
if (this.ingredient && this.ingredient.name !== val) {
|
||||
this.ingredient = null;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
[input, outputUnit, density, ingredient],
|
||||
() => updateOutput()
|
||||
);
|
||||
|
||||
function updateSearchItems(text) {
|
||||
return api.getSearchIngredients(text);
|
||||
}
|
||||
},
|
||||
|
||||
function searchItemSelected(ingredient) {
|
||||
ingredient.value = ingredient || null;
|
||||
ingredient_name.value = ingredient.name || null;
|
||||
density.value = ingredient.density || null;
|
||||
created() {
|
||||
this.$watch(
|
||||
function() {
|
||||
return [this.input, this.outputUnit, this.density, this.ingredient];
|
||||
},
|
||||
function() {
|
||||
this.updateOutput();
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
function getErrors(type) {
|
||||
if (errors.value[type] && errors.value[type].length > 0) {
|
||||
return errors.value[type].join(", ");
|
||||
} else {
|
||||
return null;
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
const appConfig = useAppConfigStore();
|
||||
const route = useRoute();
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
food: null
|
||||
}
|
||||
},
|
||||
|
||||
const food = ref(null);
|
||||
const foodId = computed(() => route.params.id);
|
||||
computed: {
|
||||
...mapState({
|
||||
foodId: state => state.route.params.id,
|
||||
})
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getFood(foodId.value)
|
||||
.then(data => { food.value = data; return data; })
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getFood(this.foodId)
|
||||
.then(data => { this.food = data; return data; })
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
components: {
|
||||
FoodShow
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -9,20 +9,17 @@
|
||||
</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();
|
||||
const router = useRouter();
|
||||
|
||||
const validationErrors = ref({});
|
||||
const food = reactive({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
food: {
|
||||
name: null,
|
||||
notes: null,
|
||||
ndbn: null,
|
||||
@ -53,16 +50,26 @@
|
||||
cholesterol: null,
|
||||
lipids: null,
|
||||
food_units: []
|
||||
});
|
||||
},
|
||||
validationErrors: {}
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {}
|
||||
loadResource(
|
||||
api.postFood(food)
|
||||
.then(() => router.push('/foods'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
methods: {
|
||||
save() {
|
||||
this.validationErrors = {}
|
||||
this.loadResource(
|
||||
api.postFood(this.food)
|
||||
.then(() => this.$router.push('/foods'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
FoodEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
food: null,
|
||||
validationErrors: {}
|
||||
};
|
||||
},
|
||||
|
||||
const food = ref(null);
|
||||
const validationErrors = ref({});
|
||||
const foodId = computed(() => route.params.id);
|
||||
computed: {
|
||||
...mapState({
|
||||
foodId: state => state.route.params.id,
|
||||
})
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getFood(foodId.value)
|
||||
.then(data => { food.value = data; return data; })
|
||||
methods: {
|
||||
save() {
|
||||
this.validationErrors = {};
|
||||
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() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.patchFood(food.value)
|
||||
.then(() => router.push({name: 'food', params: {id: foodId.value }}))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getFood(this.foodId)
|
||||
.then(data => { this.food = data; return data; })
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
FoodEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -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 class="button" :to="{name: 'edit_food', params: { id: i.id } }">
|
||||
<router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: i.id } }">
|
||||
<app-icon icon="pencil"></app-icon>
|
||||
</router-link>
|
||||
<button type="button" class="button is-danger" @click="deleteFood(i)">
|
||||
<button v-if="isLoggedIn" type="button" class="button is-danger" @click="deleteFood(i)">
|
||||
<app-icon icon="x"></app-icon>
|
||||
</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();
|
||||
const { loadResource } = useLoadResource();
|
||||
|
||||
const foodData = ref(null);
|
||||
const foodForDeletion = ref(null);
|
||||
const search = reactive({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
foodData: null,
|
||||
foodForDeletion: null,
|
||||
search: {
|
||||
page: 1,
|
||||
per: 25,
|
||||
name: null
|
||||
});
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
const foods = computed(() => foodData.value?.foods || []);
|
||||
const totalPages = computed(() => foodData.value?.total_pages || 0);
|
||||
const currentPage = computed(() => foodData.value?.current_page || 0);
|
||||
const showConfirmFoodDelete = computed(() => foodForDeletion.value !== null);
|
||||
const confirmFoodDeleteMessage = computed(() => {
|
||||
if (foodForDeletion.value !== null) {
|
||||
return `Are you sure you want to delete ${foodForDeletion.value.name}?`;
|
||||
computed: {
|
||||
foods() {
|
||||
if (this.foodData) {
|
||||
return this.foodData.foods;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
totalPages() {
|
||||
if (this.foodData) {
|
||||
return this.foodData.total_pages
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
currentPage() {
|
||||
if (this.foodData) {
|
||||
return this.foodData.current_page
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
showConfirmFoodDelete() {
|
||||
return this.foodForDeletion !== null;
|
||||
},
|
||||
|
||||
confirmFoodDeleteMessage() {
|
||||
if (this.foodForDeletion !== null) {
|
||||
return `Are you sure you want to delete ${this.foodForDeletion.name}?`;
|
||||
} else {
|
||||
return "??";
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
const getList = debounce(function() {
|
||||
return loadResource(
|
||||
api.getFoodList(search.page, search.per, search.name)
|
||||
.then(data => foodData.value = data)
|
||||
methods: {
|
||||
changePage(idx) {
|
||||
this.search.page = idx;
|
||||
},
|
||||
|
||||
getList: debounce(function() {
|
||||
return this.loadResource(
|
||||
api.getFoodList(this.search.page, this.search.per, this.search.name)
|
||||
.then(data => this.foodData = data)
|
||||
);
|
||||
}, 500, {leading: true, trailing: true});
|
||||
}, 500, {leading: true, trailing: true}),
|
||||
|
||||
watch(search,
|
||||
() => getList(),
|
||||
deleteFood(food) {
|
||||
this.foodForDeletion = food;
|
||||
},
|
||||
|
||||
foodDeleteCancel() {
|
||||
this.foodForDeletion = null;
|
||||
},
|
||||
|
||||
foodDeleteConfirm() {
|
||||
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
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
function changePage(idx) {
|
||||
search.page = idx;
|
||||
}
|
||||
|
||||
function deleteFood(food) {
|
||||
foodForDeletion.value = food;
|
||||
}
|
||||
|
||||
function foodDeleteCancel() {
|
||||
foodForDeletion.value = null;
|
||||
}
|
||||
|
||||
function foodDeleteConfirm() {
|
||||
if (foodForDeletion.value !== null) {
|
||||
loadResource(
|
||||
api.deleteFood(foodForDeletion.value.id).then(res => {
|
||||
foodForDeletion.value = null;
|
||||
return getList();
|
||||
})
|
||||
);
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
const route = useRoute();
|
||||
const appConfig = useAppConfigStore();
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
log: null
|
||||
}
|
||||
},
|
||||
|
||||
const log = ref(null);
|
||||
const logId = computed(() => route.params.id);
|
||||
computed: {
|
||||
...mapState({
|
||||
logId: state => state.route.params.id,
|
||||
})
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getLog(logId.value)
|
||||
.then(data => { log.value = data; return data; })
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getLog(this.logId)
|
||||
.then(data => { this.log = data; return data; })
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
components: {
|
||||
LogShow
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const validationErrors = ref({});
|
||||
const log = reactive({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
validationErrors: {},
|
||||
log: {
|
||||
date: null,
|
||||
rating: null,
|
||||
notes: null,
|
||||
recipe: null
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
const recipeId = computed(() => route.params.recipeId);
|
||||
computed: {
|
||||
...mapState({
|
||||
recipeId: state => state.route.params.recipeId,
|
||||
})
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getRecipe(recipeId.value, null, null, null, data => log.recipe = data)
|
||||
methods: {
|
||||
save() {
|
||||
this.log.original_recipe_id = this.recipeId;
|
||||
this.validationErrors = {};
|
||||
|
||||
this.loadResource(
|
||||
api.postLog(this.log)
|
||||
.then(() => this.$router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
log.original_recipe_id = recipeId.value;
|
||||
validationErrors.value = {};
|
||||
|
||||
loadResource(
|
||||
api.postLog(log)
|
||||
.then(() => router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getRecipe(this.recipeId, null, null, null, data => this.log.recipe = data)
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
LogEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -16,38 +16,48 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed, onBeforeMount, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { mapState } from "vuex";
|
||||
import api from "../lib/Api";
|
||||
import * as Errors from "../lib/Errors";
|
||||
import LogEdit from "./LogEdit";
|
||||
import { useLoadResource } from "../lib/useLoadResource";
|
||||
|
||||
const { loadResource } = useLoadResource();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
validationErrors: {},
|
||||
log: null
|
||||
}
|
||||
},
|
||||
|
||||
const validationErrors = ref({});
|
||||
const log = ref(null);
|
||||
computed: {
|
||||
...mapState({
|
||||
logId: state => state.route.params.id,
|
||||
})
|
||||
},
|
||||
|
||||
const logId = computed(() => route.params.id);
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getLog(logId.value)
|
||||
.then(data => { log.value = data; return data; })
|
||||
methods: {
|
||||
save() {
|
||||
this.validationErrors = {};
|
||||
this.loadResource(
|
||||
api.patchLog(this.log)
|
||||
.then(() => this.$router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.patchLog(log.value)
|
||||
.then(() => router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getLog(this.logId)
|
||||
.then(data => { this.log = data; return data; })
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
LogEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -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();
|
||||
|
||||
const logData = ref(null);
|
||||
const search = reactive({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logData: null,
|
||||
search: {
|
||||
page: 1,
|
||||
per: 25
|
||||
});
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
const logs = computed(() => logData.value?.logs || []);
|
||||
const totalPages = computed(() => logData.value?.total_pages || 0);
|
||||
const currentPage = computed(() => logData.value?.current_page || 0);
|
||||
computed: {
|
||||
logs() {
|
||||
if (this.logData) {
|
||||
return this.logData.logs;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
const getList = debounce(function() {
|
||||
loadResource(
|
||||
api.getLogList(search.page, search.per)
|
||||
.then(data => logData.value = data)
|
||||
totalPages() {
|
||||
if (this.logData) {
|
||||
return this.logData.total_pages
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
currentPage() {
|
||||
if (this.logData) {
|
||||
return this.logData.current_page
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
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});
|
||||
}, 500, {leading: true, trailing: true})
|
||||
},
|
||||
|
||||
watch(search,
|
||||
() => getList(),
|
||||
created() {
|
||||
this.$watch("search",
|
||||
() => this.getList(),
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
function changePage(idx) {
|
||||
search.page = idx;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -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,61 +28,69 @@
|
||||
</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();
|
||||
const notes = ref([]);
|
||||
const editNote = ref(null);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notes: [],
|
||||
editNote: null
|
||||
};
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
refreshList();
|
||||
});
|
||||
|
||||
function refreshList() {
|
||||
loadResource(
|
||||
methods: {
|
||||
refreshList() {
|
||||
this.loadResource(
|
||||
api.getNoteList()
|
||||
.then(data => notes.value = data)
|
||||
.then(data => this.notes = data)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
function addNote() {
|
||||
editNote.value = { id: null, content: "" };
|
||||
}
|
||||
addNote() {
|
||||
this.editNote = { id: null, content: "" };
|
||||
},
|
||||
|
||||
function saveNote() {
|
||||
loadResource(
|
||||
api.postNote(editNote.value)
|
||||
saveNote() {
|
||||
this.loadResource(
|
||||
api.postNote(this.editNote)
|
||||
.then(() => {
|
||||
editNote.value = null;
|
||||
return refreshList();
|
||||
this.editNote = null;
|
||||
return this.refreshList();
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
function cancelNote() {
|
||||
editNote.value = null;
|
||||
}
|
||||
cancelNote() {
|
||||
this.editNote = null;
|
||||
},
|
||||
|
||||
function deleteNote(n) {
|
||||
loadResource(
|
||||
deleteNote(n) {
|
||||
this.loadResource(
|
||||
api.deleteNote(n)
|
||||
.then(() => {
|
||||
return refreshList();
|
||||
return this.refreshList();
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.refreshList();
|
||||
},
|
||||
|
||||
components: {
|
||||
NoteEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -17,51 +17,61 @@
|
||||
<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();
|
||||
const route = useRoute();
|
||||
const { loadResource } = useLoadResource();
|
||||
const recipe = ref(null);
|
||||
|
||||
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}`;
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
recipe: null,
|
||||
showNutrition: false
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
function refreshData() {
|
||||
loadResource(
|
||||
api.getRecipe(recipeId.value, scale.value, system.value, unit.value, data => recipe.value = data)
|
||||
computed: {
|
||||
...mapState({
|
||||
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>
|
||||
|
||||
|
||||
@ -13,20 +13,17 @@
|
||||
</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();
|
||||
const { loadResource } = useLoadResource();
|
||||
|
||||
const validationErrors = ref({});
|
||||
const recipe = ref({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
validationErrors: {},
|
||||
recipe: {
|
||||
name: null,
|
||||
source: null,
|
||||
description: null,
|
||||
@ -36,16 +33,25 @@
|
||||
step_text: null,
|
||||
tags: [],
|
||||
ingredients: []
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.postRecipe(recipe.value)
|
||||
.then(() => router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
methods: {
|
||||
save() {
|
||||
this.validationErrors = {};
|
||||
this.loadResource(
|
||||
api.postRecipe(this.recipe)
|
||||
.then(() => this.$router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
RecipeEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -18,38 +18,48 @@
|
||||
</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();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const recipe = ref(null);
|
||||
const validationErrors = ref({});
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
recipe: null,
|
||||
validationErrors: {}
|
||||
}
|
||||
},
|
||||
|
||||
const recipeId = computed(() => route.params.id);
|
||||
computed: {
|
||||
...mapState({
|
||||
recipeId: state => state.route.params.id,
|
||||
})
|
||||
},
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadResource(
|
||||
api.getRecipe(recipeId.value, null, null, null, data => { recipe.value = data; return data; })
|
||||
);
|
||||
});
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.patchRecipe(recipe.value)
|
||||
.then(() => router.push({name: 'recipe', params: {id: recipeId.value }}))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
methods: {
|
||||
save() {
|
||||
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()))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loadResource(
|
||||
api.getRecipe(this.recipeId, null, null, null, data => { this.recipe = data; return data; })
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
RecipeEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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">
|
||||
<template #button>
|
||||
<button class="button is-small">
|
||||
<app-dropdown hover v-if="isLoggedIn" class="is-right">
|
||||
<button slot="button" class="button is-small">
|
||||
<app-icon icon="menu"></app-icon>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<div class="dropdown-item">
|
||||
<router-link :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary is-fullwidth">
|
||||
@ -85,114 +83,113 @@
|
||||
</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();
|
||||
const mediaQueries = useMediaQueryStore();
|
||||
const { loadResource, localLoading } = useLoadResource();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
export default {
|
||||
props: {
|
||||
searchQuery: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
const tableHeader = [
|
||||
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}
|
||||
];
|
||||
]
|
||||
},
|
||||
|
||||
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;
|
||||
totalPages() {
|
||||
if (this.recipeData) {
|
||||
return this.recipeData.total_pages;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
const currentPage = computed(() => {
|
||||
if (recipeData.value) {
|
||||
return recipeData.value.current_page;
|
||||
currentPage() {
|
||||
if (this.recipeData) {
|
||||
return this.recipeData.current_page;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
const showConfirmRecipeDelete = computed(() => recipeForDeletion.value !== null);
|
||||
showConfirmRecipeDelete() {
|
||||
return this.recipeForDeletion !== null;
|
||||
},
|
||||
|
||||
const confirmRecipeDeleteMessage = computed(() => {
|
||||
if (showConfirmRecipeDelete.value) {
|
||||
return `Are you sure you want to delete ${recipeForDeletion.value.name}?`;
|
||||
confirmRecipeDeleteMessage() {
|
||||
if (this.showConfirmRecipeDelete) {
|
||||
return `Are you sure you want to delete ${this.recipeForDeletion.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)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations([
|
||||
"setInitialLoad"
|
||||
]),
|
||||
|
||||
function buildQueryParams() {
|
||||
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
|
||||
}
|
||||
name: this.searchQuery.name,
|
||||
tags: this.searchQuery.tags,
|
||||
column: this.searchQuery.column,
|
||||
direction: this.searchQuery.direction,
|
||||
page: this.searchQuery.page,
|
||||
per: this.searchQuery.per
|
||||
}
|
||||
},
|
||||
|
||||
function redirectToParams(params) {
|
||||
redirectToParams(params) {
|
||||
const rParams = {};
|
||||
|
||||
if (params.name) {
|
||||
@ -219,17 +216,17 @@
|
||||
rParams.per = params.per;
|
||||
}
|
||||
|
||||
router.push({name: 'recipeList', query: rParams});
|
||||
}
|
||||
this.$router.push({name: 'recipeList', query: rParams});
|
||||
},
|
||||
|
||||
function changePage(idx) {
|
||||
const p = buildQueryParams();
|
||||
changePage(idx) {
|
||||
const p = this.buildQueryParams();
|
||||
p.page = idx;
|
||||
redirectToParams(p);
|
||||
}
|
||||
this.redirectToParams(p);
|
||||
},
|
||||
|
||||
function setSort(col) {
|
||||
const p = buildQueryParams();
|
||||
setSort(col) {
|
||||
const p = this.buildQueryParams();
|
||||
|
||||
if (p.column === col) {
|
||||
p.direction = p.direction === "desc" ? "asc" : "desc";
|
||||
@ -237,47 +234,53 @@
|
||||
p.column = col;
|
||||
p.direction = "asc";
|
||||
}
|
||||
redirectToParams(p);
|
||||
}
|
||||
this.redirectToParams(p);
|
||||
},
|
||||
|
||||
function setSearchName(name) {
|
||||
const p = buildQueryParams();
|
||||
setSearchName(name) {
|
||||
const p = this.buildQueryParams();
|
||||
if (name !== p.name) {
|
||||
p.name = name;
|
||||
p.page = null;
|
||||
redirectToParams(p);
|
||||
}
|
||||
this.redirectToParams(p);
|
||||
}
|
||||
},
|
||||
|
||||
function setSearchTags(tags) {
|
||||
const p = buildQueryParams();
|
||||
setSearchTags(tags) {
|
||||
const p = this.buildQueryParams();
|
||||
if (tags !== p.tags) {
|
||||
p.tags = tags;
|
||||
p.page = null;
|
||||
redirectToParams(p);
|
||||
}
|
||||
this.redirectToParams(p);
|
||||
}
|
||||
},
|
||||
|
||||
function deleteRecipe(recipe) {
|
||||
recipeForDeletion.value = recipe;
|
||||
}
|
||||
deleteRecipe(recipe) {
|
||||
this.recipeForDeletion = recipe;
|
||||
},
|
||||
|
||||
function recipeDeleteConfirm() {
|
||||
if (recipeForDeletion.value !== null) {
|
||||
loadResource(
|
||||
api.deleteRecipe(recipeForDeletion.value.id).then(() => {
|
||||
recipeForDeletion.value = null;
|
||||
return getList();
|
||||
recipeDeleteConfirm() {
|
||||
if (this.recipeForDeletion !== null) {
|
||||
this.loadResource(
|
||||
api.deleteRecipe(this.recipeForDeletion.id).then(() => {
|
||||
this.recipeForDeletion = null;
|
||||
return this.getList();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function recipeDeleteCancel() {
|
||||
recipeForDeletion.value = null;
|
||||
}
|
||||
recipeDeleteCancel() {
|
||||
this.recipeForDeletion = null;
|
||||
},
|
||||
|
||||
function formatRecipeTime(total, active) {
|
||||
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) {
|
||||
@ -294,7 +297,24 @@
|
||||
|
||||
return str;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$watch("search",
|
||||
() => {
|
||||
this.getList().then(() => this.setInitialLoad(true));
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
AppLoading
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,53 +38,85 @@
|
||||
};
|
||||
};
|
||||
|
||||
const { loadResource } = useLoadResource();
|
||||
const taskStore = useTaskStore();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showListDropdown: false,
|
||||
newList: newListTemplate(),
|
||||
newListValidationErrors: {}
|
||||
}
|
||||
},
|
||||
|
||||
const showListDropdown = ref(false);
|
||||
const newList = ref(newListTemplate());
|
||||
const newListValidationErrors = ref({});
|
||||
|
||||
const taskLists = computed(() => taskStore.taskLists);
|
||||
const currentTaskList = computed(() => taskStore.currentTaskList);
|
||||
const listSelectLabel = computed(() => {
|
||||
if (currentTaskList.value === null) {
|
||||
computed: {
|
||||
...mapState([
|
||||
'taskLists',
|
||||
'currentTaskList'
|
||||
]),
|
||||
listSelectLabel() {
|
||||
if (this.currentTaskList === null) {
|
||||
return "Select or Create a List";
|
||||
} else {
|
||||
return currentTaskList.value.name;
|
||||
return this.currentTaskList.name;
|
||||
}
|
||||
});
|
||||
|
||||
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()))
|
||||
methods: {
|
||||
...mapActions([
|
||||
'refreshTaskLists',
|
||||
'createTaskList',
|
||||
'deleteTaskList',
|
||||
'deleteTaskItems',
|
||||
'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()))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
function deleteList(list) {
|
||||
loadResource(taskStore.deleteTaskList(list));
|
||||
}
|
||||
deleteList(list) {
|
||||
this.loadResource(
|
||||
this.deleteTaskList(list)
|
||||
);
|
||||
},
|
||||
|
||||
function deleteAllItems() {
|
||||
loadResource(
|
||||
taskStore.deleteTaskItems({
|
||||
taskList: currentTaskList.value,
|
||||
taskItems: currentTaskList.value.task_items
|
||||
|
||||
|
||||
deleteAllItems() {
|
||||
this.loadResource(
|
||||
this.deleteTaskItems({
|
||||
taskList: this.currentTaskList,
|
||||
taskItems: this.currentTaskList.task_items
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loadResource(
|
||||
this.refreshTaskLists()
|
||||
);
|
||||
},
|
||||
|
||||
components: {
|
||||
TaskListMiniForm,
|
||||
TaskListDropdownItem,
|
||||
TaskItemList
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -13,38 +13,42 @@
|
||||
</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();
|
||||
const { checkAuthentication } = useCheckAuthentication(loadResource);
|
||||
const router = useRouter();
|
||||
|
||||
const validationErrors = ref({});
|
||||
const userObj = ref({
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
validationErrors: {},
|
||||
userObj: {
|
||||
username: '',
|
||||
full_name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.postUser(userObj.value)
|
||||
.then(() => checkAuthentication())
|
||||
.then(() => router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
|
||||
methods: {
|
||||
save() {
|
||||
this.validationErrors = {};
|
||||
this.loadResource(
|
||||
api.postUser(this.userObj)
|
||||
.then(() => this.checkAuthentication())
|
||||
.then(() => this.$router.push('/'))
|
||||
.catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
UserEdit
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -13,55 +13,62 @@
|
||||
</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();
|
||||
const { loadResource } = useLoadResource();
|
||||
const { checkAuthentication } = useCheckAuthentication(loadResource);
|
||||
const router = useRouter();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
validationErrors: {},
|
||||
userObj: null
|
||||
}
|
||||
},
|
||||
|
||||
const validationErrors = ref({});
|
||||
const userObj = ref(null);
|
||||
created() {
|
||||
this.refreshUser();
|
||||
},
|
||||
|
||||
watch(
|
||||
() => appConfig.user,
|
||||
() => refreshUser(),
|
||||
{ immediate: true });
|
||||
watch: {
|
||||
user() {
|
||||
this.refreshUser();
|
||||
}
|
||||
},
|
||||
|
||||
function refreshUser() {
|
||||
if (appConfig.user) {
|
||||
userObj.value = {
|
||||
username: appConfig.user.username,
|
||||
full_name: appConfig.user.full_name,
|
||||
email: appConfig.user.email,
|
||||
methods: {
|
||||
refreshUser() {
|
||||
if (this.user) {
|
||||
this.userObj = {
|
||||
username: this.user.username,
|
||||
full_name: this.user.full_name,
|
||||
email: this.user.email,
|
||||
password: '',
|
||||
password_confirmation: ''
|
||||
};
|
||||
} else {
|
||||
userObj.value = null;
|
||||
}
|
||||
this.userObj = null;
|
||||
}
|
||||
},
|
||||
|
||||
function save() {
|
||||
validationErrors.value = {};
|
||||
loadResource(
|
||||
api.patchUser(userObj.value)
|
||||
.then(() => checkAuthentication())
|
||||
save() {
|
||||
this.validationErrors = {};
|
||||
this.loadResource(
|
||||
api.patchUser(this.userObj)
|
||||
.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>
|
||||
|
||||
|
||||
@ -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 type="password" label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
|
||||
<app-text-field label="Password" v-model="userObj.password"></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 {
|
||||
props: {
|
||||
userObj: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,46 +45,59 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
|
||||
import { computed, nextTick, ref, useTemplateRef } from "vue";
|
||||
import { useAppConfigStore } from "../stores/appConfig";
|
||||
import { useLoadResource } from "../lib/useLoadResource";
|
||||
import api from "../lib/Api";
|
||||
import { mapActions, mapState } from "vuex";
|
||||
|
||||
const appConfig = useAppConfigStore();
|
||||
const { loadResource } = useLoadResource();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLogin: false,
|
||||
error: '',
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
},
|
||||
|
||||
const userNameElement = useTemplateRef("usernameInput");
|
||||
|
||||
const showLogin = ref(false);
|
||||
const error = ref('');
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
|
||||
const loginMessage = computed(() => appConfig.loginMessage);
|
||||
const enableSubmit = computed(() => username.value !== "" && password.value !== "" && !appConfig.isLoading);
|
||||
|
||||
function openDialog() {
|
||||
showLogin.value = true;
|
||||
nextTick(() => {
|
||||
userNameElement.value.focus();
|
||||
})
|
||||
computed: {
|
||||
...mapState([
|
||||
'loginMessage'
|
||||
]),
|
||||
enableSubmit() {
|
||||
return this.username !== '' && this.password !== '' && !this.isLoading;
|
||||
}
|
||||
},
|
||||
|
||||
function performLogin() {
|
||||
if (username.value !== '' && password.value !== '') {
|
||||
const params = {username: username.value, password: password.value};
|
||||
methods: {
|
||||
...mapActions([
|
||||
'login'
|
||||
]),
|
||||
|
||||
loadResource(
|
||||
appConfig.login(params)
|
||||
openDialog() {
|
||||
this.showLogin = true;
|
||||
this.$nextTick(() => this.$refs.usernameInput.focus());
|
||||
},
|
||||
|
||||
performLogin() {
|
||||
if (this.username !== '' && this.password !== '') {
|
||||
const params = {username: this.username, password: this.password};
|
||||
|
||||
this.loadResource(
|
||||
this.login(params)
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showLogin.value = false;
|
||||
this.showLogin = false;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -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 };
|
||||
@ -1,4 +1,4 @@
|
||||
import config from './config';
|
||||
import config from '../config';
|
||||
import * as Errors from './Errors';
|
||||
|
||||
class Api {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
84
app/javascript/lib/GlobalMixins.js
Normal file
84
app/javascript/lib/GlobalMixins.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
@ -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, () => {
|
||||
window.location.reload(true)
|
||||
});
|
||||
trackActive(reg.waiting, () => 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 store = useAppConfigStore();
|
||||
store.updateAvailable = true;
|
||||
};
|
||||
|
||||
const clearUpdateReady = () => {
|
||||
const store = useAppConfigStore();
|
||||
store.updateAvailable = false;
|
||||
}
|
||||
const updateReady = () => store.commit("setUpdateAvailable", true);
|
||||
const clearUpdateReady = () => store.commit("setUpdateAvailable", false);
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
@ -64,4 +53,6 @@ export function swInit() {
|
||||
console.log('Registration failed with ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
49
app/javascript/lib/VuexResponsiveSync.js
Normal file
49
app/javascript/lib/VuexResponsiveSync.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import { onBeforeUnmount } from "vue";
|
||||
import autosize from 'autosize';
|
||||
|
||||
export function useAutosize(elementRef) {
|
||||
autosize(elementRef.value);
|
||||
onBeforeUnmount(() => {
|
||||
autosize.destroy(elementRef.value);
|
||||
});
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import { Group } from '@tweenjs/tween.js'
|
||||
|
||||
let group = null;
|
||||
|
||||
export function useGlobalTweenGroup() {
|
||||
if (group === null) {
|
||||
group = new Group();
|
||||
}
|
||||
return group;
|
||||
}
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
@ -1,10 +1,17 @@
|
||||
import '../styles';
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import "vue-resize/dist/vue-resize";
|
||||
|
||||
import Vue from 'vue'
|
||||
import { sync } from 'vuex-router-sync';
|
||||
import { swInit } from "../lib/ServiceWorker";
|
||||
import config from '../lib/config';
|
||||
import { installClickStrike } from "../lib/ClickStrike";
|
||||
import responsiveSync from "../lib/VuexResponsiveSync";
|
||||
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);
|
||||
const pinia = createPinia();
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
swInit();
|
||||
installClickStrike(app);
|
||||
window.$vm = new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
router,
|
||||
render: createElement => createElement('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);
|
||||
});
|
||||
|
||||
@ -1,39 +1,49 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import { nextTick } from "vue";
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
|
||||
import The404Page from '../components/The404Page';
|
||||
import TheAboutPage from '../components/TheAboutPage';
|
||||
import TheCalculator from '../components/TheCalculator';
|
||||
import The404Page from './components/The404Page';
|
||||
import TheAboutPage from './components/TheAboutPage';
|
||||
import TheCalculator from './components/TheCalculator';
|
||||
|
||||
import TheLog from '../components/TheLog';
|
||||
import TheLogList from '../components/TheLogList';
|
||||
import TheLogCreator from '../components/TheLogCreator';
|
||||
import TheLogEditor from '../components/TheLogEditor';
|
||||
import TheLog from './components/TheLog';
|
||||
import TheLogList from './components/TheLogList';
|
||||
import TheLogCreator from './components/TheLogCreator';
|
||||
import TheLogEditor from './components/TheLogEditor';
|
||||
|
||||
import TheFoodList from '../components/TheFoodList';
|
||||
import TheFood from "../components/TheFood";
|
||||
import TheFoodEditor from "../components/TheFoodEditor";
|
||||
import TheFoodCreator from "../components/TheFoodCreator";
|
||||
import TheNotesList from '../components/TheNotesList';
|
||||
import TheRecipe from '../components/TheRecipe';
|
||||
import TheRecipeEditor from '../components/TheRecipeEditor';
|
||||
import TheRecipeCreator from '../components/TheRecipeCreator';
|
||||
import TheRecipeList from '../components/TheRecipeList';
|
||||
import TheFoodList from './components/TheFoodList';
|
||||
import TheFood from "./components/TheFood";
|
||||
import TheFoodEditor from "./components/TheFoodEditor";
|
||||
import TheFoodCreator from "./components/TheFoodCreator";
|
||||
import TheNotesList from './components/TheNotesList';
|
||||
import TheRecipe from './components/TheRecipe';
|
||||
import TheRecipeEditor from './components/TheRecipeEditor';
|
||||
import TheRecipeCreator from './components/TheRecipeCreator';
|
||||
import TheRecipeList from './components/TheRecipeList';
|
||||
|
||||
import TheTaskListList from '../components/TheTaskListList';
|
||||
import TheTaskListList from './components/TheTaskListList';
|
||||
|
||||
import TheUserCreator from '../components/TheUserCreator';
|
||||
import TheUserEditor from '../components/TheUserEditor';
|
||||
import TheUserCreator from './components/TheUserCreator';
|
||||
import TheUserEditor from './components/TheUserEditor';
|
||||
|
||||
import TheAdminUserList from '../components/TheAdminUserList';
|
||||
import TheAdminUserEditor from '../components/TheAdminUserEditor';
|
||||
import TheAdminUserList from './components/TheAdminUserList';
|
||||
import TheAdminUserEditor from './components/TheAdminUserEditor';
|
||||
|
||||
import { useAppConfigStore } from "../stores/appConfig";
|
||||
import $store from './store';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
const router = new Router({
|
||||
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) => {
|
||||
const appConfig = useAppConfigStore();
|
||||
await appConfig.logout();
|
||||
return next("/");
|
||||
beforeEnter: (to, from, next) => {
|
||||
const $store = router.app.$store;
|
||||
$store.dispatch("logout")
|
||||
.then(() => next("/"));
|
||||
}
|
||||
},
|
||||
|
||||
@ -165,22 +175,10 @@ const router = createRouter({
|
||||
},
|
||||
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
path: '*',
|
||||
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;
|
||||
236
app/javascript/store/index.js
Normal file
236
app/javascript/store/index.js
Normal file
@ -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));
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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
|
||||
};
|
||||
});
|
||||
@ -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;
|
||||
});
|
||||
@ -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
|
||||
};
|
||||
});
|
||||
@ -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
|
||||
};
|
||||
});
|
||||
@ -1,97 +1,107 @@
|
||||
@use "bulma/sass/utilities" as bulma;
|
||||
@use "bulma/sass/utilities/controls";
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@mixin responsive-label-size($size) {
|
||||
@mixin responsive-button-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 responsive-control-size("mobile");
|
||||
@include mobile {
|
||||
@include responsive-button-size("mobile");
|
||||
}
|
||||
|
||||
@include mixins.tablet {
|
||||
@include responsive-control-size("tablet");
|
||||
@include tablet {
|
||||
@include responsive-button-size("tablet");
|
||||
}
|
||||
|
||||
@include mixins.desktop {
|
||||
@include responsive-control-size("desktop");
|
||||
@include desktop {
|
||||
@include responsive-button-size("desktop");
|
||||
}
|
||||
|
||||
@include mixins.widescreen {
|
||||
@include responsive-control-size("widescreen");
|
||||
@include widescreen {
|
||||
@include responsive-button-size("widescreen");
|
||||
}
|
||||
|
||||
@include mixins.fullhd {
|
||||
@include responsive-control-size("fullhd");
|
||||
@include 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");
|
||||
}
|
||||
}
|
||||
35
app/javascript/styles/_variables.scss
Normal file
35
app/javascript/styles/_variables.scss
Normal file
@ -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;
|
||||
@ -1,9 +1,5 @@
|
||||
|
||||
@use "bulma/sass/utilities" as bulma;
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
|
||||
@include mixins.until(bulma.$desktop) {
|
||||
@include until($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;
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
// 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);
|
||||
@import "./variables";
|
||||
|
||||
$family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
|
||||
@use "bulma/versions/bulma-no-dark-mode" as bulma with (
|
||||
$family-primary: $family-serif,
|
||||
$green: $coolors-green,
|
||||
$blue: $coolors-blue,
|
||||
$red: $coolors-red,
|
||||
$yellow: $coolors-yellow,
|
||||
$dark: $coolors-dark,
|
||||
$primary: $coolors-green,
|
||||
$modal-content-width: 750px
|
||||
);
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
@import "~bulma/sass/base/_all";
|
||||
@import "~bulma/sass/components/dropdown";
|
||||
@import "~bulma/sass/components/navbar";
|
||||
@import "~bulma/sass/components/level";
|
||||
@import "~bulma/sass/components/message";
|
||||
@import "~bulma/sass/components/modal";
|
||||
@import "~bulma/sass/components/pagination";
|
||||
@import "~bulma/sass/components/panel";
|
||||
@import "~bulma/sass/elements/_all";
|
||||
@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) {
|
||||
|
||||
@ -91,15 +91,15 @@ class Food < Ingredient
|
||||
:vit_e,
|
||||
:vit_d,
|
||||
:vit_k,
|
||||
:cholesterol,
|
||||
[:lipids, :lipid],
|
||||
[:density, :density_best_guess]
|
||||
:cholesterol
|
||||
]
|
||||
|
||||
copy_fields.each do |f|
|
||||
to, from = f.is_a?(Array) ? f : [f, f]
|
||||
self.send("#{to}=".to_sym, food.send(from.to_sym))
|
||||
self.send("#{f}=".to_sym, food.send(f.to_sym))
|
||||
end
|
||||
|
||||
self.lipids = food.lipid
|
||||
self.density = food.density_best_guess
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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,
|
||||
@ -18,7 +18,7 @@ class TaskList < ApplicationRecord
|
||||
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
|
||||
|
||||
@ -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,
|
||||
total_pages: item.total_pages,
|
||||
current_page: item.current_page,
|
||||
page_size: item.limit_value,
|
||||
totalCount: item.total_count,
|
||||
totalPages: item.total_pages,
|
||||
currentPage: item.current_page,
|
||||
pageSize: item.limit_value,
|
||||
@collection_name.to_sym => list
|
||||
}
|
||||
else
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user