mirror of
https://github.com/docusealco/docuseal.git
synced 2026-08-07 15:25:16 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Alex Turchyn
|
6fbc81fae2 |
@@ -0,0 +1,18 @@
|
||||
spec:
|
||||
name: docuseal
|
||||
services:
|
||||
- name: docuseal
|
||||
dockerfile_path: Dockerfile
|
||||
git:
|
||||
repo_clone_url: https://github.com/docusealco/docuseal.git
|
||||
branch: master
|
||||
envs:
|
||||
- key: SECRET_KEY_BASE
|
||||
value: "- 64 characters string 64 characters string 64 characters string -"
|
||||
type: SECRET
|
||||
scope: RUN_TIME
|
||||
- key: DATABASE_URL
|
||||
scope: RUN_TIME
|
||||
value: ${docuseal-db.DATABASE_URL}
|
||||
databases:
|
||||
- name: docuseal-db
|
||||
@@ -1,6 +1,5 @@
|
||||
/db/*.sqlite3
|
||||
|
||||
**/node_modules
|
||||
/node_modules
|
||||
/coverage
|
||||
/doc
|
||||
@@ -28,4 +27,3 @@
|
||||
/attachments
|
||||
/docuseal
|
||||
.DS_Store
|
||||
.env
|
||||
|
||||
@@ -30,5 +30,3 @@ linters:
|
||||
Enabled: false
|
||||
Style/ZeroLengthPredicate:
|
||||
Enabled: false
|
||||
Style/RedundantConstantBase:
|
||||
Enabled: false
|
||||
|
||||
@@ -127,7 +127,6 @@ jobs:
|
||||
bundle config path vendor/bundle
|
||||
bundle install --jobs 4 --retry 4
|
||||
yarn install
|
||||
sudo apt-get update
|
||||
sudo apt-get install libvips
|
||||
- name: Run
|
||||
env:
|
||||
@@ -138,5 +137,4 @@ jobs:
|
||||
run: |
|
||||
bundle exec rake db:create
|
||||
bundle exec rake db:migrate
|
||||
bundle exec rake assets:precompile
|
||||
bundle exec rspec
|
||||
|
||||
@@ -35,4 +35,3 @@ yarn-debug.log*
|
||||
/coverage
|
||||
/attachments
|
||||
/docuseal
|
||||
/ee
|
||||
|
||||
+3
-18
@@ -26,11 +26,8 @@ Style/Documentation:
|
||||
Lint/MissingSuper:
|
||||
Enabled: false
|
||||
|
||||
Metrics/ParameterLists:
|
||||
Max: 10
|
||||
|
||||
Metrics/MethodLength:
|
||||
Max: 25
|
||||
Max: 20
|
||||
Exclude:
|
||||
- 'db/migrate/**'
|
||||
|
||||
@@ -56,25 +53,13 @@ RSpec/NestedGroups:
|
||||
Max: 6
|
||||
|
||||
RSpec/MultipleExpectations:
|
||||
Max: 20
|
||||
Max: 7
|
||||
|
||||
RSpec/ExampleLength:
|
||||
Max: 40
|
||||
|
||||
RSpec/MultipleMemoizedHelpers:
|
||||
Max: 6
|
||||
Max: 15
|
||||
|
||||
Rails/I18nLocaleTexts:
|
||||
Enabled: false
|
||||
|
||||
Rails/FindEach:
|
||||
Enabled: false
|
||||
|
||||
Rails/SkipsModelValidations:
|
||||
Enabled: false
|
||||
|
||||
Rails/ApplicationController:
|
||||
Enabled: false
|
||||
|
||||
Capybara/ClickLinkOrButtonStyle:
|
||||
Enabled: false
|
||||
|
||||
+2
-11
@@ -31,25 +31,16 @@ ENV BUNDLE_WITHOUT="development:test"
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && mkdir /fonts && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf /fonts && apk del ttf-liberation && wget -O /fonts/DancingScript.otf "https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf" && wget -O /fonts/DancingScript-License.txt https://github.com/impallari/DancingScript/blob/master/OFL.txt
|
||||
RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler vips-heif libc6-compat ttf-freefont
|
||||
|
||||
COPY ./Gemfile ./Gemfile.lock ./
|
||||
|
||||
RUN bundle update --bundler && bundle install && rm -rf ~/.bundle
|
||||
|
||||
COPY ./bin ./bin
|
||||
COPY ./app ./app
|
||||
COPY ./config ./config
|
||||
COPY ./db ./db
|
||||
COPY ./log ./log
|
||||
COPY ./lib ./lib
|
||||
COPY ./public ./public
|
||||
COPY ./tmp ./tmp
|
||||
COPY LICENSE README.md Rakefile config.ru ./
|
||||
COPY . ./
|
||||
|
||||
COPY --from=webpack /app/public/packs ./public/packs
|
||||
|
||||
RUN ln -s /fonts /app/public/fonts
|
||||
RUN bundle exec bootsnap precompile --gemfile app/ lib/
|
||||
|
||||
WORKDIR /data/docuseal
|
||||
|
||||
@@ -7,37 +7,24 @@ ruby '3.2.2'
|
||||
gem 'aws-sdk-s3', require: false
|
||||
gem 'azure-storage-blob', require: false
|
||||
gem 'bootsnap', require: false
|
||||
gem 'cancancan'
|
||||
gem 'devise'
|
||||
gem 'devise-two-factor'
|
||||
gem 'dotenv', require: false
|
||||
gem 'email_typo'
|
||||
gem 'faraday'
|
||||
gem 'faraday-follow_redirects'
|
||||
gem 'google-cloud-storage', require: false
|
||||
gem 'hexapdf'
|
||||
gem 'image_processing'
|
||||
gem 'jwt'
|
||||
gem 'lograge'
|
||||
gem 'mysql2', require: false
|
||||
gem 'oj'
|
||||
gem 'omniauth-google-oauth2'
|
||||
gem 'omniauth-rails_csrf_protection'
|
||||
gem 'pagy'
|
||||
gem 'pdf-reader'
|
||||
gem 'pg', require: false
|
||||
gem 'premailer-rails'
|
||||
gem 'puma'
|
||||
gem 'rails'
|
||||
gem 'rails_autolink'
|
||||
gem 'rails-i18n'
|
||||
gem 'rollbar', require: ENV.key?('ROLLBAR_ACCESS_TOKEN')
|
||||
gem 'rotp'
|
||||
gem 'rqrcode'
|
||||
gem 'ruby-vips'
|
||||
gem 'rubyXL'
|
||||
gem 'shakapacker'
|
||||
gem 'sidekiq', require: ENV.key?('REDIS_URL')
|
||||
gem 'sqlite3', require: false
|
||||
gem 'strip_attributes'
|
||||
gem 'turbo-rails'
|
||||
|
||||
+108
-198
@@ -1,94 +1,92 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
Ascii85 (1.1.0)
|
||||
actioncable (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actioncable (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
nio4r (~> 2.0)
|
||||
websocket-driver (>= 0.6.1)
|
||||
actionmailbox (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
activejob (= 7.0.7)
|
||||
activerecord (= 7.0.7)
|
||||
activestorage (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actionmailbox (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
activejob (= 7.0.5)
|
||||
activerecord (= 7.0.5)
|
||||
activestorage (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
mail (>= 2.7.1)
|
||||
net-imap
|
||||
net-pop
|
||||
net-smtp
|
||||
actionmailer (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
actionview (= 7.0.7)
|
||||
activejob (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actionmailer (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
actionview (= 7.0.5)
|
||||
activejob (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
mail (~> 2.5, >= 2.5.4)
|
||||
net-imap
|
||||
net-pop
|
||||
net-smtp
|
||||
rails-dom-testing (~> 2.0)
|
||||
actionpack (7.0.7)
|
||||
actionview (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actionpack (7.0.5)
|
||||
actionview (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
rack (~> 2.0, >= 2.2.4)
|
||||
rack-test (>= 0.6.3)
|
||||
rails-dom-testing (~> 2.0)
|
||||
rails-html-sanitizer (~> 1.0, >= 1.2.0)
|
||||
actiontext (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
activerecord (= 7.0.7)
|
||||
activestorage (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actiontext (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
activerecord (= 7.0.5)
|
||||
activestorage (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
globalid (>= 0.6.0)
|
||||
nokogiri (>= 1.8.5)
|
||||
actionview (7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
actionview (7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
builder (~> 3.1)
|
||||
erubi (~> 1.4)
|
||||
rails-dom-testing (~> 2.0)
|
||||
rails-html-sanitizer (~> 1.1, >= 1.2.0)
|
||||
activejob (7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
activejob (7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
globalid (>= 0.3.6)
|
||||
activemodel (7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
activerecord (7.0.7)
|
||||
activemodel (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
activestorage (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
activejob (= 7.0.7)
|
||||
activerecord (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
activemodel (7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
activerecord (7.0.5)
|
||||
activemodel (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
activestorage (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
activejob (= 7.0.5)
|
||||
activerecord (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
marcel (~> 1.0)
|
||||
mini_mime (>= 1.1.0)
|
||||
activesupport (7.0.7)
|
||||
activesupport (7.0.5)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 1.6, < 2)
|
||||
minitest (>= 5.1)
|
||||
tzinfo (~> 2.0)
|
||||
addressable (2.8.5)
|
||||
addressable (2.8.4)
|
||||
public_suffix (>= 2.0.2, < 6.0)
|
||||
afm (0.2.2)
|
||||
annotate (3.2.0)
|
||||
activerecord (>= 3.2, < 8.0)
|
||||
rake (>= 10.4, < 14.0)
|
||||
ast (2.4.2)
|
||||
aws-eventstream (1.2.0)
|
||||
aws-partitions (1.807.0)
|
||||
aws-sdk-core (3.180.3)
|
||||
aws-partitions (1.781.0)
|
||||
aws-sdk-core (3.175.0)
|
||||
aws-eventstream (~> 1, >= 1.0.2)
|
||||
aws-partitions (~> 1, >= 1.651.0)
|
||||
aws-sigv4 (~> 1.5)
|
||||
jmespath (~> 1, >= 1.6.1)
|
||||
aws-sdk-kms (1.71.0)
|
||||
aws-sdk-core (~> 3, >= 3.177.0)
|
||||
aws-sdk-kms (1.67.0)
|
||||
aws-sdk-core (~> 3, >= 3.174.0)
|
||||
aws-sigv4 (~> 1.1)
|
||||
aws-sdk-s3 (1.132.1)
|
||||
aws-sdk-core (~> 3, >= 3.179.0)
|
||||
aws-sdk-s3 (1.126.0)
|
||||
aws-sdk-core (~> 3, >= 3.174.0)
|
||||
aws-sdk-kms (~> 1)
|
||||
aws-sigv4 (~> 1.6)
|
||||
aws-sigv4 (1.6.0)
|
||||
aws-sigv4 (~> 1.4)
|
||||
aws-sigv4 (1.5.2)
|
||||
aws-eventstream (~> 1, >= 1.0.2)
|
||||
azure-storage-blob (2.0.3)
|
||||
azure-storage-common (~> 2.0)
|
||||
@@ -99,7 +97,7 @@ GEM
|
||||
net-http-persistent (~> 4.0)
|
||||
nokogiri (~> 1, >= 1.10.8)
|
||||
bcrypt (3.1.19)
|
||||
better_html (2.0.2)
|
||||
better_html (2.0.1)
|
||||
actionview (>= 6.0)
|
||||
activesupport (>= 6.0)
|
||||
ast (~> 2.0)
|
||||
@@ -107,13 +105,12 @@ GEM
|
||||
parser (>= 2.4)
|
||||
smart_properties
|
||||
bindex (0.8.1)
|
||||
bootsnap (1.16.0)
|
||||
bootsnap (1.15.0)
|
||||
msgpack (~> 1.2)
|
||||
builder (3.2.4)
|
||||
bullet (7.0.7)
|
||||
activesupport (>= 3.0.0)
|
||||
uniform_notifier (~> 1.11)
|
||||
cancancan (3.5.0)
|
||||
capybara (3.39.2)
|
||||
addressable
|
||||
matrix
|
||||
@@ -123,7 +120,6 @@ GEM
|
||||
rack-test (>= 0.6.3)
|
||||
regexp_parser (>= 1.5, < 3.0)
|
||||
xpath (~> 3.2)
|
||||
chunky_png (1.4.0)
|
||||
cmdparse (3.0.7)
|
||||
coderay (1.1.3)
|
||||
concurrent-ruby (1.2.2)
|
||||
@@ -147,17 +143,11 @@ GEM
|
||||
railties (>= 4.1.0)
|
||||
responders
|
||||
warden (~> 1.2.3)
|
||||
devise-two-factor (5.0.0)
|
||||
activesupport (~> 7.0)
|
||||
devise (~> 4.0)
|
||||
railties (~> 7.0)
|
||||
rotp (~> 6.0)
|
||||
diff-lcs (1.5.0)
|
||||
digest-crc (0.6.5)
|
||||
digest-crc (0.6.4)
|
||||
rake (>= 12.0.0, < 14.0.0)
|
||||
docile (1.4.0)
|
||||
dotenv (2.8.1)
|
||||
email_typo (0.2.3)
|
||||
erb_lint (0.4.0)
|
||||
activesupport
|
||||
better_html (>= 2.0.1)
|
||||
@@ -171,7 +161,7 @@ GEM
|
||||
factory_bot_rails (6.2.0)
|
||||
factory_bot (~> 6.2.0)
|
||||
railties (>= 5.0.0)
|
||||
faker (3.2.1)
|
||||
faker (3.2.0)
|
||||
i18n (>= 1.8.11, < 2)
|
||||
faraday (1.10.3)
|
||||
faraday-em_http (~> 1.0)
|
||||
@@ -188,8 +178,6 @@ GEM
|
||||
faraday-em_http (1.0.0)
|
||||
faraday-em_synchrony (1.0.0)
|
||||
faraday-excon (1.1.0)
|
||||
faraday-follow_redirects (0.3.0)
|
||||
faraday (>= 1, < 3)
|
||||
faraday-httpclient (1.0.1)
|
||||
faraday-multipart (1.0.4)
|
||||
multipart-post (~> 2)
|
||||
@@ -206,10 +194,10 @@ GEM
|
||||
webrick (~> 1.7)
|
||||
websocket-driver (>= 0.6, < 0.8)
|
||||
ffi (1.15.5)
|
||||
geom2d (0.4.1)
|
||||
geom2d (0.3.1)
|
||||
globalid (1.1.0)
|
||||
activesupport (>= 5.0)
|
||||
google-apis-core (0.11.1)
|
||||
google-apis-core (0.11.0)
|
||||
addressable (~> 2.5, >= 2.5.1)
|
||||
googleauth (>= 0.16.2, < 2.a)
|
||||
httpclient (>= 2.8.1, < 3.a)
|
||||
@@ -236,7 +224,7 @@ GEM
|
||||
google-cloud-core (~> 1.6)
|
||||
googleauth (>= 0.16.2, < 2.a)
|
||||
mini_mime (~> 1.0)
|
||||
googleauth (1.7.0)
|
||||
googleauth (1.6.0)
|
||||
faraday (>= 0.17.3, < 3.a)
|
||||
jwt (>= 1.4, < 3.0)
|
||||
memoist (~> 0.16)
|
||||
@@ -244,11 +232,9 @@ GEM
|
||||
os (>= 0.9, < 2.0)
|
||||
signet (>= 0.16, < 2.a)
|
||||
hashdiff (1.0.1)
|
||||
hashery (2.1.2)
|
||||
hashie (5.0.0)
|
||||
hexapdf (0.33.0)
|
||||
hexapdf (0.32.2)
|
||||
cmdparse (~> 3.0, >= 3.0.3)
|
||||
geom2d (~> 0.4, >= 0.4.1)
|
||||
geom2d (~> 0.3)
|
||||
openssl (>= 2.2.1)
|
||||
htmlentities (4.3.4)
|
||||
httpclient (2.8.3)
|
||||
@@ -258,8 +244,8 @@ GEM
|
||||
mini_magick (>= 4.9.5, < 5)
|
||||
ruby-vips (>= 2.0.17, < 3)
|
||||
io-console (0.6.0)
|
||||
irb (1.7.4)
|
||||
reline (>= 0.3.6)
|
||||
irb (1.7.0)
|
||||
reline (>= 0.3.0)
|
||||
jmespath (1.6.2)
|
||||
json (2.6.3)
|
||||
jwt (2.7.1)
|
||||
@@ -273,7 +259,7 @@ GEM
|
||||
letter_opener (~> 1.7)
|
||||
railties (>= 5.2)
|
||||
rexml
|
||||
lograge (0.13.0)
|
||||
lograge (0.12.0)
|
||||
actionpack (>= 4)
|
||||
activesupport (>= 4)
|
||||
railties (>= 4)
|
||||
@@ -291,17 +277,16 @@ GEM
|
||||
memoist (0.16.2)
|
||||
method_source (1.0.0)
|
||||
mini_magick (4.12.0)
|
||||
mini_mime (1.1.5)
|
||||
mini_portile2 (2.8.4)
|
||||
minitest (5.20.0)
|
||||
msgpack (1.7.2)
|
||||
mini_mime (1.1.2)
|
||||
mini_portile2 (2.8.2)
|
||||
minitest (5.18.1)
|
||||
msgpack (1.7.1)
|
||||
multi_json (1.15.0)
|
||||
multi_xml (0.6.0)
|
||||
multipart-post (2.3.0)
|
||||
mysql2 (0.5.5)
|
||||
net-http-persistent (4.0.2)
|
||||
connection_pool (~> 2.2)
|
||||
net-imap (0.3.7)
|
||||
net-imap (0.3.6)
|
||||
date
|
||||
net-protocol
|
||||
net-pop (0.1.2)
|
||||
@@ -311,48 +296,17 @@ GEM
|
||||
net-smtp (0.3.3)
|
||||
net-protocol
|
||||
nio4r (2.5.9)
|
||||
nokogiri (1.15.4)
|
||||
mini_portile2 (~> 2.8.2)
|
||||
nokogiri (1.15.2-arm64-darwin)
|
||||
racc (~> 1.4)
|
||||
nokogiri (1.15.4-arm64-darwin)
|
||||
racc (~> 1.4)
|
||||
oauth2 (2.0.9)
|
||||
faraday (>= 0.17.3, < 3.0)
|
||||
jwt (>= 1.0, < 3.0)
|
||||
multi_xml (~> 0.5)
|
||||
rack (>= 1.2, < 4)
|
||||
snaky_hash (~> 2.0)
|
||||
version_gem (~> 1.1)
|
||||
oj (3.16.0)
|
||||
omniauth (2.1.1)
|
||||
hashie (>= 3.4.6)
|
||||
rack (>= 2.2.3)
|
||||
rack-protection
|
||||
omniauth-google-oauth2 (1.1.1)
|
||||
jwt (>= 2.0)
|
||||
oauth2 (~> 2.0.6)
|
||||
omniauth (~> 2.0)
|
||||
omniauth-oauth2 (~> 1.8.0)
|
||||
omniauth-oauth2 (1.8.0)
|
||||
oauth2 (>= 1.4, < 3)
|
||||
omniauth (~> 2.0)
|
||||
omniauth-rails_csrf_protection (1.0.1)
|
||||
actionpack (>= 4.2)
|
||||
omniauth (~> 2.0)
|
||||
oj (3.15.0)
|
||||
openssl (3.1.0)
|
||||
orm_adapter (0.5.0)
|
||||
os (1.1.4)
|
||||
pagy (6.0.4)
|
||||
parallel (1.23.0)
|
||||
parser (3.2.2.4)
|
||||
parser (3.2.2.3)
|
||||
ast (~> 2.4.1)
|
||||
racc
|
||||
pdf-reader (2.11.0)
|
||||
Ascii85 (~> 1.0)
|
||||
afm (~> 0.2.1)
|
||||
hashery (~> 2.0)
|
||||
ruby-rc4
|
||||
ttfunk
|
||||
pg (1.5.3)
|
||||
premailer (1.21.0)
|
||||
addressable
|
||||
@@ -367,58 +321,49 @@ GEM
|
||||
method_source (~> 1.0)
|
||||
pry-rails (0.3.9)
|
||||
pry (>= 0.10.4)
|
||||
public_suffix (5.0.3)
|
||||
puma (6.3.1)
|
||||
public_suffix (5.0.1)
|
||||
puma (6.3.0)
|
||||
nio4r (~> 2.0)
|
||||
racc (1.7.1)
|
||||
rack (2.2.8)
|
||||
rack-protection (3.1.0)
|
||||
rack (~> 2.2, >= 2.2.4)
|
||||
rack (2.2.7)
|
||||
rack-proxy (0.7.6)
|
||||
rack
|
||||
rack-test (2.1.0)
|
||||
rack (>= 1.3)
|
||||
rails (7.0.7)
|
||||
actioncable (= 7.0.7)
|
||||
actionmailbox (= 7.0.7)
|
||||
actionmailer (= 7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
actiontext (= 7.0.7)
|
||||
actionview (= 7.0.7)
|
||||
activejob (= 7.0.7)
|
||||
activemodel (= 7.0.7)
|
||||
activerecord (= 7.0.7)
|
||||
activestorage (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
rails (7.0.5)
|
||||
actioncable (= 7.0.5)
|
||||
actionmailbox (= 7.0.5)
|
||||
actionmailer (= 7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
actiontext (= 7.0.5)
|
||||
actionview (= 7.0.5)
|
||||
activejob (= 7.0.5)
|
||||
activemodel (= 7.0.5)
|
||||
activerecord (= 7.0.5)
|
||||
activestorage (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
bundler (>= 1.15.0)
|
||||
railties (= 7.0.7)
|
||||
rails-dom-testing (2.2.0)
|
||||
activesupport (>= 5.0.0)
|
||||
minitest
|
||||
railties (= 7.0.5)
|
||||
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)
|
||||
rails-i18n (7.0.8)
|
||||
rails-i18n (7.0.7)
|
||||
i18n (>= 0.7, < 2)
|
||||
railties (>= 6.0.0, < 8)
|
||||
rails_autolink (1.1.8)
|
||||
actionview (> 3.1)
|
||||
activesupport (> 3.1)
|
||||
railties (> 3.1)
|
||||
railties (7.0.7)
|
||||
actionpack (= 7.0.7)
|
||||
activesupport (= 7.0.7)
|
||||
railties (7.0.5)
|
||||
actionpack (= 7.0.5)
|
||||
activesupport (= 7.0.5)
|
||||
method_source
|
||||
rake (>= 12.2)
|
||||
thor (~> 1.0)
|
||||
zeitwerk (~> 2.5)
|
||||
rainbow (3.1.1)
|
||||
rake (13.0.6)
|
||||
redis-client (0.16.0)
|
||||
connection_pool
|
||||
regexp_parser (2.8.2)
|
||||
reline (0.3.8)
|
||||
regexp_parser (2.8.1)
|
||||
reline (0.3.5)
|
||||
io-console (~> 0.5)
|
||||
representable (3.2.0)
|
||||
declarative (< 0.1.0)
|
||||
@@ -430,19 +375,14 @@ GEM
|
||||
actionpack (>= 5.2)
|
||||
railties (>= 5.2)
|
||||
retriable (3.1.2)
|
||||
rexml (3.2.6)
|
||||
rexml (3.2.5)
|
||||
rollbar (3.4.0)
|
||||
rotp (6.3.0)
|
||||
rqrcode (2.2.0)
|
||||
chunky_png (~> 1.0)
|
||||
rqrcode_core (~> 1.0)
|
||||
rqrcode_core (1.2.0)
|
||||
rspec-core (3.12.2)
|
||||
rspec-support (~> 3.12.0)
|
||||
rspec-expectations (3.12.3)
|
||||
diff-lcs (>= 1.2.0, < 2.0)
|
||||
rspec-support (~> 3.12.0)
|
||||
rspec-mocks (3.12.6)
|
||||
rspec-mocks (3.12.5)
|
||||
diff-lcs (>= 1.2.0, < 2.0)
|
||||
rspec-support (~> 3.12.0)
|
||||
rspec-rails (6.0.3)
|
||||
@@ -453,55 +393,45 @@ GEM
|
||||
rspec-expectations (~> 3.12)
|
||||
rspec-mocks (~> 3.12)
|
||||
rspec-support (~> 3.12)
|
||||
rspec-support (3.12.1)
|
||||
rubocop (1.57.2)
|
||||
rspec-support (3.12.0)
|
||||
rubocop (1.53.0)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (>= 3.17.0)
|
||||
parallel (~> 1.10)
|
||||
parser (>= 3.2.2.4)
|
||||
parser (>= 3.2.2.3)
|
||||
rainbow (>= 2.2.2, < 4.0)
|
||||
regexp_parser (>= 1.8, < 3.0)
|
||||
rexml (>= 3.2.5, < 4.0)
|
||||
rubocop-ast (>= 1.28.1, < 2.0)
|
||||
rubocop-ast (>= 1.28.0, < 2.0)
|
||||
ruby-progressbar (~> 1.7)
|
||||
unicode-display_width (>= 2.4.0, < 3.0)
|
||||
rubocop-ast (1.30.0)
|
||||
rubocop-ast (1.29.0)
|
||||
parser (>= 3.2.1.0)
|
||||
rubocop-capybara (2.19.0)
|
||||
rubocop-capybara (2.18.0)
|
||||
rubocop (~> 1.41)
|
||||
rubocop-factory_bot (2.24.0)
|
||||
rubocop-factory_bot (2.23.1)
|
||||
rubocop (~> 1.33)
|
||||
rubocop-performance (1.19.1)
|
||||
rubocop-performance (1.18.0)
|
||||
rubocop (>= 1.7.0, < 2.0)
|
||||
rubocop-ast (>= 0.4.0)
|
||||
rubocop-rails (2.22.1)
|
||||
rubocop-rails (2.20.2)
|
||||
activesupport (>= 4.2.0)
|
||||
rack (>= 1.1)
|
||||
rubocop (>= 1.33.0, < 2.0)
|
||||
rubocop-rspec (2.25.0)
|
||||
rubocop (~> 1.40)
|
||||
rubocop-rspec (2.22.0)
|
||||
rubocop (~> 1.33)
|
||||
rubocop-capybara (~> 2.17)
|
||||
rubocop-factory_bot (~> 2.22)
|
||||
ruby-progressbar (1.13.0)
|
||||
ruby-rc4 (0.1.5)
|
||||
ruby-vips (2.1.4)
|
||||
ffi (~> 1.12)
|
||||
ruby2_keywords (0.0.5)
|
||||
rubyXL (3.4.25)
|
||||
nokogiri (>= 1.10.8)
|
||||
rubyzip (>= 1.3.0)
|
||||
rubyzip (2.3.2)
|
||||
semantic_range (3.0.0)
|
||||
shakapacker (7.0.3)
|
||||
shakapacker (7.0.0)
|
||||
activesupport (>= 5.2)
|
||||
rack-proxy (>= 0.6.1)
|
||||
railties (>= 5.2)
|
||||
semantic_range (>= 2.3.0)
|
||||
sidekiq (7.1.2)
|
||||
concurrent-ruby (< 2)
|
||||
connection_pool (>= 2.3.0)
|
||||
rack (>= 2.2.4)
|
||||
redis-client (>= 0.14.0)
|
||||
signet (0.17.0)
|
||||
addressable (~> 2.8)
|
||||
faraday (>= 0.17.5, < 3.a)
|
||||
@@ -514,18 +444,13 @@ GEM
|
||||
simplecov-html (0.12.3)
|
||||
simplecov_json_formatter (0.1.4)
|
||||
smart_properties (1.17.0)
|
||||
snaky_hash (2.0.1)
|
||||
hashie
|
||||
version_gem (~> 1.1, >= 1.1.1)
|
||||
sqlite3 (1.6.3)
|
||||
sqlite3 (1.5.4)
|
||||
mini_portile2 (~> 2.8.0)
|
||||
sqlite3 (1.6.3-arm64-darwin)
|
||||
strip_attributes (1.13.0)
|
||||
activemodel (>= 3.0, < 8.0)
|
||||
thor (1.2.2)
|
||||
timeout (0.4.0)
|
||||
trailblazer-option (0.1.2)
|
||||
ttfunk (1.7.0)
|
||||
turbo-rails (1.4.0)
|
||||
actionpack (>= 6.0.0)
|
||||
activejob (>= 6.0.0)
|
||||
@@ -535,9 +460,8 @@ GEM
|
||||
tzinfo-data (1.2023.3)
|
||||
tzinfo (>= 1.0.0)
|
||||
uber (0.1.0)
|
||||
unicode-display_width (2.5.0)
|
||||
unicode-display_width (2.4.2)
|
||||
uniform_notifier (1.16.0)
|
||||
version_gem (1.1.3)
|
||||
warden (1.2.9)
|
||||
rack (>= 2.0.9)
|
||||
web-console (4.2.0)
|
||||
@@ -550,16 +474,15 @@ GEM
|
||||
crack (>= 0.3.2)
|
||||
hashdiff (>= 0.4.0, < 2.0.0)
|
||||
webrick (1.8.1)
|
||||
websocket-driver (0.7.6)
|
||||
websocket-driver (0.7.5)
|
||||
websocket-extensions (>= 0.1.0)
|
||||
websocket-extensions (0.1.5)
|
||||
xpath (3.2.0)
|
||||
nokogiri (~> 1.8)
|
||||
zeitwerk (2.6.11)
|
||||
zeitwerk (2.6.8)
|
||||
|
||||
PLATFORMS
|
||||
arm64-darwin-22
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
annotate
|
||||
@@ -568,50 +491,37 @@ DEPENDENCIES
|
||||
better_html
|
||||
bootsnap
|
||||
bullet
|
||||
cancancan
|
||||
capybara
|
||||
cuprite
|
||||
debug
|
||||
devise
|
||||
devise-two-factor
|
||||
dotenv
|
||||
email_typo
|
||||
erb_lint
|
||||
factory_bot_rails
|
||||
faker
|
||||
faraday
|
||||
faraday-follow_redirects
|
||||
google-cloud-storage
|
||||
hexapdf
|
||||
image_processing
|
||||
jwt
|
||||
letter_opener_web
|
||||
lograge
|
||||
mysql2
|
||||
oj
|
||||
omniauth-google-oauth2
|
||||
omniauth-rails_csrf_protection
|
||||
pagy
|
||||
pdf-reader
|
||||
pg
|
||||
premailer-rails
|
||||
pry-rails
|
||||
puma
|
||||
rails
|
||||
rails-i18n
|
||||
rails_autolink
|
||||
rollbar
|
||||
rotp
|
||||
rqrcode
|
||||
rspec-rails
|
||||
rubocop
|
||||
rubocop-performance
|
||||
rubocop-rails
|
||||
rubocop-rspec
|
||||
ruby-vips
|
||||
rubyXL
|
||||
shakapacker
|
||||
sidekiq
|
||||
simplecov
|
||||
sqlite3
|
||||
strip_attributes
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<a href="https://hub.docker.com/r/docuseal/docuseal">
|
||||
<img alt="Docker releases" src="https://img.shields.io/docker/v/docuseal/docuseal">
|
||||
</a>
|
||||
<a href="https://discord.gg/qygYCDGck9">
|
||||
<a href="https://discord.com/invite/B5wg5wKk">
|
||||
<img src="https://img.shields.io/discord/1125112641170448454?logo=discord"/>
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/follow?screen_name=docusealco">
|
||||
@@ -26,8 +26,6 @@ DocuSeal is an open source platform that provides secure and efficient digital d
|
||||
</p>
|
||||
<h2 align="center">
|
||||
<a href="https://demo.docuseal.co">✨ Live Demo</a>
|
||||
<span>|</span>
|
||||
<a href="https://docuseal.co/sign_up">☁️ Try in Cloud</a>
|
||||
</h2>
|
||||
|
||||
[](https://demo.docuseal.co)
|
||||
@@ -42,18 +40,13 @@ DocuSeal is an open source platform that provides secure and efficient digital d
|
||||
- [x] PDF signature verification
|
||||
- [x] Users management
|
||||
- [x] Mobile-optimized
|
||||
- [x] API and Webhooks for integrations
|
||||
- [x] Easy to deploy in minutes
|
||||
|
||||
## Deploy
|
||||
|
||||
|Heroku|Railway|
|
||||
|:--:|:---:|
|
||||
| [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
|
||||
|**DigitalOcean**|**Render**|
|
||||
| [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)
|
||||
|**Koyeb**|**Elestio**|
|
||||
| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) | [<img alt="Deploy on Elestio" src="https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png">](https://dash.elest.io/deploy?soft=DocuSeal&id=339) |
|
||||
| Heroku | Railway | DigitalOcean |
|
||||
| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR) | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal/tree/master&refcode=421d50f53990) |
|
||||
|
||||
|
||||
#### Docker
|
||||
@@ -71,19 +64,11 @@ Download docker-compose.yml into your private server:
|
||||
curl https://raw.githubusercontent.com/docusealco/docuseal/master/docker-compose.yml > docker-compose.yml
|
||||
```
|
||||
|
||||
Run the app under a custom domain over https using docker compose (make sure your DNS points to the server to automatically issue ssl certs with Caddy):
|
||||
Run docker compose under a custom domain over https (make sure your DNS points to the server to automatically issue ssl certs with Caddy):
|
||||
```sh
|
||||
HOST=your-domain-name.com docker-compose up
|
||||
```
|
||||
|
||||
## For Companies
|
||||
### Integrate seamless document signing into your web or mobile apps with DocuSeal!
|
||||
|
||||
At DocuSeal we have expertise and technologies to make documents creation, filling, signing and processing seamlessly integrated with your product. We specialize in working with various industries, including **Banking, Healthcare, Transport, Real Estate, eCommerce, KYC, CRM, and other software products** that require bulk document signing. By leveraging DocuSeal, we can assist in reducing the overall cost of developing and processing electronic documents while ensuring security and compliance with local electronic document laws.
|
||||
|
||||
[Book a Meeting](https://calendly.com/kriti-docuseal/30min)
|
||||
|
||||
## License
|
||||
|
||||
Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
|
||||
Unless otherwise noted, all files © 2023 DocuSeal LLC.
|
||||
DocuSeal is released under the GNU Affero General Public License v3.0.
|
||||
|
||||
@@ -4,15 +4,11 @@ class AccountsController < ApplicationController
|
||||
LOCALE_OPTIONS = {
|
||||
'en-US' => 'English (United States)',
|
||||
'en-GB' => 'English (United Kingdom)',
|
||||
'fr-FR' => 'French (France)',
|
||||
'es-ES' => 'Spanish (Spain)',
|
||||
'pt-PT' => 'Portuguese (Portugal)',
|
||||
'de-DE' => 'German (Germany)'
|
||||
}.freeze
|
||||
|
||||
before_action :load_account
|
||||
authorize_resource :account
|
||||
|
||||
def show; end
|
||||
|
||||
def update
|
||||
@@ -39,17 +35,11 @@ class AccountsController < ApplicationController
|
||||
|
||||
private
|
||||
|
||||
def load_account
|
||||
@account = current_account
|
||||
end
|
||||
|
||||
def account_params
|
||||
params.require(:account).permit(:name, :timezone, :locale)
|
||||
end
|
||||
|
||||
def app_url_params
|
||||
return {} if params[:encrypted_config].blank?
|
||||
|
||||
params.require(:encrypted_config).permit(:value)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -3,36 +3,11 @@
|
||||
module Api
|
||||
class ApiBaseController < ActionController::API
|
||||
include ActiveStorage::SetCurrent
|
||||
include Pagy::Backend
|
||||
|
||||
DEFAULT_LIMIT = 10
|
||||
MAX_LIMIT = 100
|
||||
|
||||
wrap_parameters false
|
||||
|
||||
before_action :authenticate_user!
|
||||
check_authorization
|
||||
|
||||
if Rails.env.production?
|
||||
rescue_from CanCan::AccessDenied do |e|
|
||||
Rollbar.error(e) if defined?(Rollbar)
|
||||
|
||||
render json: { error: e.message }, status: :forbidden
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def paginate(relation)
|
||||
result = relation.order(id: :desc)
|
||||
.limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
|
||||
|
||||
result = result.where('id < ?', params[:after]) if params[:after].present?
|
||||
result = result.where('id > ?', params[:before]) if params[:before].present?
|
||||
|
||||
result
|
||||
end
|
||||
|
||||
def current_account
|
||||
current_user&.account
|
||||
end
|
||||
|
||||
@@ -3,12 +3,24 @@
|
||||
module Api
|
||||
class AttachmentsController < ApiBaseController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
submitter = Submitter.find_by!(slug: params[:submitter_slug])
|
||||
|
||||
attachment = Submitters.create_attachment!(submitter, params)
|
||||
blob =
|
||||
if (file = params[:file])
|
||||
ActiveStorage::Blob.create_and_upload!(io: file.open,
|
||||
filename: file.original_filename,
|
||||
content_type: file.content_type)
|
||||
else
|
||||
ActiveStorage::Blob.find_signed(params[:blob_signed_id])
|
||||
end
|
||||
|
||||
attachment = ActiveStorage::Attachment.create!(
|
||||
blob:,
|
||||
name: params[:name],
|
||||
record: submitter
|
||||
)
|
||||
|
||||
render json: attachment.as_json(only: %i[uuid], methods: %i[url filename content_type])
|
||||
end
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class SubmissionsController < ApiBaseController
|
||||
load_and_authorize_resource :template, only: :create
|
||||
load_and_authorize_resource :submission, only: %i[show index]
|
||||
|
||||
before_action only: :create do
|
||||
authorize!(:create, Submission)
|
||||
end
|
||||
|
||||
def index
|
||||
submissions = Submissions.search(@submissions, params[:q])
|
||||
submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
|
||||
|
||||
submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
|
||||
audit_trail_attachment: :blob))
|
||||
|
||||
render json: {
|
||||
data: submissions.as_json(serialize_params),
|
||||
pagination: {
|
||||
count: submissions.size,
|
||||
next: submissions.last&.id,
|
||||
prev: submissions.first&.id
|
||||
}
|
||||
}
|
||||
end
|
||||
|
||||
def show
|
||||
serialized_subbmitters =
|
||||
@submission.submitters.preload(documents_attachments: :blob, attachments_attachments: :blob).map do |submitter|
|
||||
Submissions::EnsureResultGenerated.call(submitter) if submitter.completed_at?
|
||||
|
||||
Submitters::SerializeForApi.call(submitter)
|
||||
end
|
||||
|
||||
json = @submission.as_json(
|
||||
serialize_params.deep_merge(
|
||||
include: {
|
||||
submission_events: {
|
||||
only: %i[id submitter_id event_type event_timestamp]
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
json[:submitters] = serialized_subbmitters
|
||||
|
||||
render json:
|
||||
end
|
||||
|
||||
def create
|
||||
is_send_email = !params[:send_email].in?(['false', false])
|
||||
|
||||
submissions =
|
||||
if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
|
||||
Submissions.create_from_emails(template: @template,
|
||||
user: current_user,
|
||||
source: :api,
|
||||
mark_as_sent: is_send_email,
|
||||
emails:)
|
||||
else
|
||||
submissions_attrs, attachments = normalize_submissions_params!(submissions_params[:submission], @template)
|
||||
|
||||
Submissions.create_from_submitters(
|
||||
template: @template,
|
||||
user: current_user,
|
||||
source: :api,
|
||||
mark_as_sent: is_send_email,
|
||||
submitters_order: params[:submitters_order] || 'preserved',
|
||||
submissions_attrs:
|
||||
)
|
||||
end
|
||||
|
||||
Submissions.send_signature_requests(submissions, send_email: is_send_email)
|
||||
|
||||
submitters = submissions.flat_map(&:submitters)
|
||||
|
||||
save_default_value_attachments!(attachments, submitters)
|
||||
|
||||
render json: submitters
|
||||
rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
|
||||
render json: { error: e.message }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def destroy
|
||||
@submission.update!(deleted_at: Time.current)
|
||||
|
||||
render json: @submission.as_json(only: %i[id deleted_at])
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def serialize_params
|
||||
{
|
||||
only: %i[id source submitters_order created_at updated_at],
|
||||
methods: %i[audit_log_url],
|
||||
include: {
|
||||
submitters: { only: %i[id slug uuid name email phone
|
||||
completed_at opened_at sent_at
|
||||
created_at updated_at],
|
||||
methods: %i[status] },
|
||||
template: { only: %i[id name created_at updated_at] },
|
||||
created_by_user: { only: %i[id email first_name last_name] }
|
||||
}
|
||||
}
|
||||
end
|
||||
|
||||
def submissions_params
|
||||
params.permit(submission: [{
|
||||
submitters: [[:uuid, :name, :email, :role, :completed, :phone, :application_key,
|
||||
{ values: {}, readonly_fields: [],
|
||||
fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
|
||||
}])
|
||||
end
|
||||
|
||||
def normalize_submissions_params!(submissions_params, template)
|
||||
attachments = []
|
||||
|
||||
Array.wrap(submissions_params).each do |submission|
|
||||
submission[:submitters].each_with_index do |submitter, index|
|
||||
default_values = submitter[:values] || {}
|
||||
|
||||
submitter[:fields]&.each { |f| default_values[f[:name]] = f[:default_value] if f[:default_value].present? }
|
||||
|
||||
next if default_values.blank?
|
||||
|
||||
values, new_attachments =
|
||||
Submitters::NormalizeValues.call(template,
|
||||
default_values,
|
||||
submitter[:role] || template.submitters[index]['name'])
|
||||
|
||||
attachments.push(*new_attachments)
|
||||
|
||||
submitter[:values] = values
|
||||
end
|
||||
end
|
||||
|
||||
[submissions_params, attachments]
|
||||
end
|
||||
|
||||
def save_default_value_attachments!(attachments, submitters)
|
||||
return if attachments.blank?
|
||||
|
||||
attachments_index = attachments.index_by(&:uuid)
|
||||
|
||||
submitters.each do |submitter|
|
||||
submitter.values.to_a.each do |_, value|
|
||||
attachment = attachments_index[value]
|
||||
|
||||
next unless attachment
|
||||
|
||||
attachment.record = submitter
|
||||
|
||||
attachment.save!
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,18 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class SubmitterEmailClicksController < ApiBaseController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
submitter = Submitter.find_by!(slug: params[:submitter_slug])
|
||||
|
||||
if params[:t] == SubmissionEvents.build_tracking_param(submitter, 'click_email')
|
||||
SubmissionEvents.create_with_tracking_data(submitter, 'click_email', request)
|
||||
end
|
||||
|
||||
render json: {}
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,18 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class SubmitterFormViewsController < ApiBaseController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
submitter = Submitter.find_by!(slug: params[:submitter_slug])
|
||||
|
||||
SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
|
||||
|
||||
SendFormViewedWebhookRequestJob.perform_later(submitter)
|
||||
|
||||
render json: {}
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,35 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class SubmittersAutocompleteController < ApiBaseController
|
||||
load_and_authorize_resource :submitter, parent: false
|
||||
|
||||
SELECT_COLUMNS = %w[email phone name].freeze
|
||||
LIMIT = 100
|
||||
|
||||
def index
|
||||
submitters = search_submitters(@submitters)
|
||||
|
||||
values = submitters.limit(LIMIT).group(SELECT_COLUMNS.join(', ')).pluck(SELECT_COLUMNS.join(', '))
|
||||
|
||||
attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
|
||||
attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
|
||||
|
||||
render json: attrs
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def search_submitters(submitters)
|
||||
if SELECT_COLUMNS.include?(params[:field])
|
||||
column = Submitter.arel_table[params[:field].to_sym]
|
||||
|
||||
term = "%#{params[:q].downcase}%"
|
||||
|
||||
submitters.where(column.lower.matches(term))
|
||||
else
|
||||
Submitters.search(submitters, params[:q])
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,34 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class SubmittersController < ApiBaseController
|
||||
load_and_authorize_resource :submitter
|
||||
|
||||
def index
|
||||
submitters = Submitters.search(@submitters, params[:q])
|
||||
|
||||
submitters = submitters.where(application_key: params[:application_key]) if params[:application_key].present?
|
||||
submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
|
||||
|
||||
submitters = paginate(
|
||||
submitters.preload(:template, :submission, :submission_events,
|
||||
documents_attachments: :blob, attachments_attachments: :blob)
|
||||
)
|
||||
|
||||
render json: {
|
||||
data: submitters.map { |s| Submitters::SerializeForApi.call(s, with_template: true, with_events: true) },
|
||||
pagination: {
|
||||
count: submitters.size,
|
||||
next: submitters.last&.id,
|
||||
prev: submitters.first&.id
|
||||
}
|
||||
}
|
||||
end
|
||||
|
||||
def show
|
||||
Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?
|
||||
|
||||
render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,16 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module Api
|
||||
class TemplateFoldersAutocompleteController < ApiBaseController
|
||||
load_and_authorize_resource :template_folder, parent: false
|
||||
|
||||
LIMIT = 100
|
||||
|
||||
def index
|
||||
template_folders = @template_folders.joins(:templates).where(templates: { deleted_at: nil }).distinct
|
||||
template_folders = TemplateFolders.search(template_folders, params[:q]).limit(LIMIT)
|
||||
|
||||
render json: template_folders.as_json(only: %i[name deleted_at])
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -2,63 +2,22 @@
|
||||
|
||||
module Api
|
||||
class TemplatesController < ApiBaseController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def index
|
||||
templates = Templates.search(@templates, params[:q])
|
||||
|
||||
templates = params[:archived] ? templates.archived : templates.active
|
||||
templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
|
||||
|
||||
templates = paginate(templates.preload(:author, documents_attachments: :blob))
|
||||
|
||||
render json: {
|
||||
data: templates.as_json(serialize_params),
|
||||
pagination: {
|
||||
count: templates.size,
|
||||
next: templates.last&.id,
|
||||
prev: templates.first&.id
|
||||
}
|
||||
}
|
||||
end
|
||||
|
||||
def show
|
||||
render json: @template.as_json(serialize_params)
|
||||
end
|
||||
|
||||
def update
|
||||
if (folder_name = params.dig(:template, :folder_name))
|
||||
@template.folder = TemplateFolders.find_or_create_by_name(current_user, folder_name)
|
||||
end
|
||||
@template = current_account.templates.find(params[:id])
|
||||
|
||||
@template.update!(template_params)
|
||||
|
||||
render json: @template.as_json(only: %i[id updated_at])
|
||||
end
|
||||
|
||||
def destroy
|
||||
@template.update!(deleted_at: Time.current)
|
||||
|
||||
render json: @template.as_json(only: %i[id deleted_at])
|
||||
render :ok
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def serialize_params
|
||||
{
|
||||
include: { author: { only: %i[id email first_name last_name] },
|
||||
documents: { only: %i[id uuid], methods: %i[url filename] } }
|
||||
}
|
||||
end
|
||||
|
||||
def template_params
|
||||
params.require(:template).permit(
|
||||
:name,
|
||||
schema: [%i[attachment_uuid name]],
|
||||
submitters: [%i[name uuid]],
|
||||
fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
|
||||
{ options: [%i[value uuid]], areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
|
||||
)
|
||||
params.require(:template).permit(:name,
|
||||
schema: [%i[attachment_uuid name]],
|
||||
submitters: [%i[name uuid]],
|
||||
fields: [[:uuid, :submitter_uuid, :name, :type, :required,
|
||||
{ options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]])
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -2,12 +2,15 @@
|
||||
|
||||
module Api
|
||||
class TemplatesDocumentsController < ApiBaseController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def create
|
||||
return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
|
||||
@template = current_account.templates.find(params[:template_id])
|
||||
|
||||
documents = Templates::CreateAttachments.call(@template, params)
|
||||
documents =
|
||||
find_or_create_blobs.map do |blob|
|
||||
document = @template.documents.create!(blob:)
|
||||
|
||||
Templates::ProcessDocument.call(document)
|
||||
end
|
||||
|
||||
schema = documents.map do |doc|
|
||||
{ attachment_uuid: doc.uuid, name: doc.filename.base }
|
||||
@@ -16,12 +19,25 @@ module Api
|
||||
render json: {
|
||||
schema:,
|
||||
documents: documents.as_json(
|
||||
methods: [:metadata],
|
||||
include: {
|
||||
preview_images: { methods: %i[url metadata filename] }
|
||||
}
|
||||
)
|
||||
}
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def find_or_create_blobs
|
||||
blobs = params[:blobs]&.map do |attrs|
|
||||
ActiveStorage::Blob.find_signed(attrs[:signed_id])
|
||||
end
|
||||
|
||||
blobs || params[:files].map do |file|
|
||||
ActiveStorage::Blob.create_and_upload!(io: file.open,
|
||||
filename: file.original_filename,
|
||||
content_type: file.content_type)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class ApiSettingsController < ApplicationController
|
||||
def index
|
||||
authorize!(:read, current_user.access_token)
|
||||
end
|
||||
end
|
||||
@@ -4,8 +4,6 @@ class ApplicationController < ActionController::Base
|
||||
include ActiveStorage::SetCurrent
|
||||
include Pagy::Backend
|
||||
|
||||
check_authorization unless: :devise_controller?
|
||||
|
||||
before_action :sign_in_for_demo, if: -> { Docuseal.demo? }
|
||||
before_action :maybe_redirect_to_setup, unless: :signed_in?
|
||||
before_action :authenticate_user!, unless: :devise_controller?
|
||||
@@ -18,14 +16,6 @@ class ApplicationController < ActionController::Base
|
||||
redirect_to request.path
|
||||
end
|
||||
|
||||
if Rails.env.production?
|
||||
rescue_from CanCan::AccessDenied do |e|
|
||||
Rollbar.error(e) if defined?(Rollbar)
|
||||
|
||||
redirect_back(fallback_location: root_path, alert: e.message)
|
||||
end
|
||||
end
|
||||
|
||||
def default_url_options
|
||||
Docuseal.default_url_options
|
||||
end
|
||||
@@ -33,7 +23,7 @@ class ApplicationController < ActionController::Base
|
||||
private
|
||||
|
||||
def sign_in_for_demo
|
||||
sign_in(User.active.order('random()').take) unless signed_in?
|
||||
sign_in(User.first) unless signed_in?
|
||||
end
|
||||
|
||||
def current_account
|
||||
@@ -44,8 +34,8 @@ class ApplicationController < ActionController::Base
|
||||
redirect_to setup_index_path unless User.exists?
|
||||
end
|
||||
|
||||
def button_title(title: 'Submit', disabled_with: 'Submitting', icon: nil, icon_disabled: nil)
|
||||
render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with:, icon:, icon_disabled: })
|
||||
def button_title(title: 'Submit', disabled_with: 'Submitting', icon: nil)
|
||||
render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with:, icon: })
|
||||
end
|
||||
|
||||
def svg_icon(icon_name, class: '')
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class ConsoleRedirectController < ApplicationController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def index
|
||||
return redirect_to(new_user_session_path({ redir: params[:redir] }.compact)) if current_user.blank?
|
||||
|
||||
auth = JsonWebToken.encode(uuid: current_user.uuid,
|
||||
scope: :console,
|
||||
exp: 1.minute.from_now.to_i)
|
||||
|
||||
path = Addressable::URI.parse(params[:redir]).path if params[:redir].to_s.starts_with?(Docuseal::CONSOLE_URL)
|
||||
|
||||
redirect_to("#{Docuseal::CONSOLE_URL}#{path}?#{{ auth: }.to_query}", allow_other_host: true)
|
||||
end
|
||||
end
|
||||
@@ -3,68 +3,11 @@
|
||||
class DashboardController < ApplicationController
|
||||
skip_before_action :authenticate_user!, only: %i[index]
|
||||
|
||||
before_action :maybe_redirect_product_url
|
||||
before_action :maybe_render_landing
|
||||
|
||||
load_and_authorize_resource :template_folder, parent: false
|
||||
load_and_authorize_resource :template, parent: false
|
||||
|
||||
SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
|
||||
TEMPLATES_PER_PAGE = 12
|
||||
FOLDERS_PER_PAGE = 18
|
||||
|
||||
def index
|
||||
@template_folders = filter_template_folders(@template_folders)
|
||||
return render 'pages/landing' unless signed_in?
|
||||
|
||||
@pagy, @template_folders = pagy(
|
||||
@template_folders,
|
||||
items: FOLDERS_PER_PAGE,
|
||||
page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
|
||||
)
|
||||
templates = current_account.templates.active.preload(:author).order(id: :desc)
|
||||
|
||||
if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
|
||||
@templates = @templates.none
|
||||
else
|
||||
@template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
|
||||
@templates = filter_templates(@templates)
|
||||
|
||||
items =
|
||||
if @template_folders.size < 4
|
||||
TEMPLATES_PER_PAGE
|
||||
else
|
||||
(@template_folders.size < 7 ? 9 : 6)
|
||||
end
|
||||
|
||||
@pagy, @templates = pagy(@templates, items:)
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def filter_template_folders(template_folders)
|
||||
rel = template_folders.joins(:active_templates)
|
||||
.order(id: :desc)
|
||||
.distinct
|
||||
|
||||
TemplateFolders.search(rel, params[:q])
|
||||
end
|
||||
|
||||
def filter_templates(templates)
|
||||
rel = templates.active.preload(:author).order(id: :desc)
|
||||
rel = rel.where(folder_id: current_account.default_template_folder.id) if params[:q].blank?
|
||||
|
||||
Templates.search(rel, params[:q])
|
||||
end
|
||||
|
||||
def maybe_redirect_product_url
|
||||
return if !Docuseal.multitenant? || signed_in?
|
||||
|
||||
redirect_to Docuseal::PRODUCT_URL, allow_other_host: true
|
||||
end
|
||||
|
||||
def maybe_render_landing
|
||||
return if signed_in?
|
||||
|
||||
render 'pages/landing'
|
||||
@pagy, @templates = pagy(templates, items: 12)
|
||||
end
|
||||
end
|
||||
|
||||
+3
-11
@@ -1,24 +1,16 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class EmailSmtpSettingsController < ApplicationController
|
||||
class EmailSettingsController < ApplicationController
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, only: :index
|
||||
authorize_resource :encrypted_config, parent: false, only: :create
|
||||
|
||||
def index; end
|
||||
|
||||
def create
|
||||
if @encrypted_config.update(email_configs)
|
||||
SettingsMailer.smtp_successful_setup(@encrypted_config.value['from_email']).deliver_now!
|
||||
|
||||
if @encrypted_config.update(storage_configs)
|
||||
redirect_to settings_email_index_path, notice: 'Changes have been saved'
|
||||
else
|
||||
render :index, status: :unprocessable_entity
|
||||
end
|
||||
rescue StandardError => e
|
||||
flash[:alert] = e.message
|
||||
|
||||
render :index, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
private
|
||||
@@ -28,7 +20,7 @@ class EmailSmtpSettingsController < ApplicationController
|
||||
EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::EMAIL_SMTP_KEY)
|
||||
end
|
||||
|
||||
def email_configs
|
||||
def storage_configs
|
||||
params.require(:encrypted_config).permit(value: {}).tap do |e|
|
||||
e[:value].compact_blank!
|
||||
end
|
||||
@@ -1,22 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class EnquiriesController < ApplicationController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
if params[:talk_to_sales] == 'on'
|
||||
Faraday.post(Docuseal::ENQUIRIES_URL,
|
||||
enquiry_params.merge(type: :talk_to_sales).to_json,
|
||||
'Content-Type' => 'application/json')
|
||||
end
|
||||
|
||||
head :ok
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def enquiry_params
|
||||
params.require(:user).permit(:email)
|
||||
end
|
||||
end
|
||||
@@ -1,113 +1,19 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class EsignSettingsController < ApplicationController
|
||||
DEFAULT_CERT_NAME = 'DocuSeal Self-Host Autogenerated'
|
||||
|
||||
CertFormRecord = Struct.new(:name, :file, :password, keyword_init: true) do
|
||||
include ActiveModel::Validations
|
||||
|
||||
def to_key
|
||||
[]
|
||||
end
|
||||
end
|
||||
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, parent: false, only: %i[new create]
|
||||
authorize_resource :encrypted_config, only: %i[update destroy show]
|
||||
|
||||
def show
|
||||
cert_data = @encrypted_config.value || {}
|
||||
|
||||
default_pkcs = GenerateCertificate.load_pkcs(cert_data) if cert_data['cert'].present?
|
||||
|
||||
custom_pkcs_list = (cert_data['custom'] || []).map do |e|
|
||||
{ 'pkcs' => OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s),
|
||||
'name' => e['name'],
|
||||
'status' => e['status'] }
|
||||
end
|
||||
|
||||
@pkcs_list = [
|
||||
if default_pkcs
|
||||
{
|
||||
'pkcs' => default_pkcs,
|
||||
'name' => DEFAULT_CERT_NAME,
|
||||
'status' => custom_pkcs_list.any? { |e| e['status'] == 'default' } ? 'validate' : 'default'
|
||||
}
|
||||
end,
|
||||
*custom_pkcs_list
|
||||
].compact.reverse
|
||||
end
|
||||
|
||||
def new
|
||||
@cert_record = CertFormRecord.new
|
||||
end
|
||||
|
||||
def create
|
||||
@cert_record = CertFormRecord.new(**cert_params)
|
||||
pdfs =
|
||||
params[:files].map do |file|
|
||||
HexaPDF::Document.new(io: file.open)
|
||||
end
|
||||
|
||||
if (@encrypted_config.value && @encrypted_config.value['custom']&.any? { |e| e['name'] == @cert_record.name }) ||
|
||||
@cert_record.name == DEFAULT_CERT_NAME
|
||||
certs = Accounts.load_signing_certs(current_account)
|
||||
|
||||
@cert_record.errors.add(:name, 'already exists')
|
||||
trusted_certs = [certs[:cert], certs[:sub_ca], certs[:root_ca]]
|
||||
|
||||
return render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'),
|
||||
status: :unprocessable_entity
|
||||
end
|
||||
|
||||
save_new_cert!(@encrypted_config, @cert_record)
|
||||
|
||||
redirect_to settings_esign_path, notice: 'Certificate has been successfully added!'
|
||||
rescue OpenSSL::PKCS12::PKCS12Error
|
||||
@cert_record.errors.add(:password, "is invalid. Make sure you're uploading a valid .p12 file")
|
||||
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'), status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def update
|
||||
@encrypted_config.value['custom'].each { |e| e['status'] = 'validate' }
|
||||
|
||||
custom_cert_data = @encrypted_config.value['custom'].find { |e| e['name'] == params[:name] }
|
||||
custom_cert_data['status'] = 'default' if custom_cert_data
|
||||
|
||||
@encrypted_config.save!
|
||||
|
||||
redirect_to settings_esign_path, notice: 'Default certificate has been selected'
|
||||
end
|
||||
|
||||
def destroy
|
||||
@encrypted_config.value['custom'].reject! { |e| e['name'] == params[:name] }
|
||||
|
||||
@encrypted_config.save!
|
||||
|
||||
redirect_to settings_esign_path, notice: 'Certificate has been removed'
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_encrypted_config
|
||||
@encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account,
|
||||
key: EncryptedConfig::ESIGN_CERTS_KEY)
|
||||
end
|
||||
|
||||
def save_new_cert!(cert_configs, cert_record)
|
||||
pkcs = OpenSSL::PKCS12.new(cert_record.file.read, cert_record.password)
|
||||
|
||||
cert_configs.value ||= {}
|
||||
cert_configs.value['custom'] ||= []
|
||||
cert_configs.value['custom'].each { |e| e['status'] = 'validate' }
|
||||
cert_configs.value['custom'] << {
|
||||
data: Base64.urlsafe_encode64(pkcs.to_der),
|
||||
password: cert_record.password,
|
||||
name: cert_record.name,
|
||||
status: 'default'
|
||||
}
|
||||
|
||||
cert_configs.save!
|
||||
end
|
||||
|
||||
def cert_params
|
||||
return {} if params[:esign_settings_controller_cert_form_record].blank?
|
||||
|
||||
params.require(:esign_settings_controller_cert_form_record).permit(:name, :file, :password)
|
||||
render turbo_stream: turbo_stream.replace('result', partial: 'result',
|
||||
locals: { pdfs:, files: params[:files], trusted_certs: })
|
||||
rescue HexaPDF::MalformedPDFError
|
||||
render turbo_stream: turbo_stream.replace('result', html: helpers.tag.div('Invalid PDF', id: 'result'))
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class MfaSetupController < ApplicationController
|
||||
before_action do
|
||||
authorize!(:update, current_user)
|
||||
end
|
||||
|
||||
def new
|
||||
current_user.otp_secret ||= User.generate_otp_secret
|
||||
|
||||
current_user.save!
|
||||
|
||||
@provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
|
||||
end
|
||||
|
||||
def edit; end
|
||||
|
||||
def create
|
||||
if current_user.validate_and_consume_otp!(params[:otp_attempt])
|
||||
current_user.otp_required_for_login = true
|
||||
current_user.save!
|
||||
|
||||
redirect_to settings_profile_index_path, notice: '2FA has been configured'
|
||||
else
|
||||
@provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
|
||||
|
||||
@error_message = 'Code is invalid'
|
||||
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/new'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
if current_user.validate_and_consume_otp!(params[:otp_attempt])
|
||||
current_user.update!(otp_required_for_login: false, otp_secret: nil)
|
||||
|
||||
redirect_to settings_profile_index_path, notice: '2FA has been removed'
|
||||
else
|
||||
@error_message = 'Code is invalid'
|
||||
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/edit'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,8 +1,6 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class NewslettersController < ApplicationController
|
||||
skip_authorization_check
|
||||
|
||||
def show; end
|
||||
|
||||
def update
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class NotificationsSettingsController < ApplicationController
|
||||
before_action :load_bcc_config, only: :index
|
||||
before_action :load_reminder_config, only: :index
|
||||
authorize_resource :bcc_config, only: :index
|
||||
authorize_resource :reminder_config, only: :index
|
||||
|
||||
before_action :build_account_config, only: :create
|
||||
authorize_resource :account_config, only: :create
|
||||
|
||||
def index; end
|
||||
|
||||
def create
|
||||
if @account_config.save
|
||||
redirect_back fallback_location: settings_notifications_path, notice: 'Changes have been saved'
|
||||
else
|
||||
redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def build_account_config
|
||||
@account_config =
|
||||
AccountConfig.find_or_initialize_by(account: current_account, key: email_config_params[:key])
|
||||
|
||||
@account_config.assign_attributes(email_config_params)
|
||||
end
|
||||
|
||||
def load_bcc_config
|
||||
@bcc_config =
|
||||
AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::BCC_EMAILS)
|
||||
end
|
||||
|
||||
def load_reminder_config
|
||||
@reminder_config =
|
||||
AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::SUBMITTER_REMAILERS)
|
||||
end
|
||||
|
||||
def email_config_params
|
||||
params.require(:account_config).permit!.tap do |attrs|
|
||||
attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMAILERS])
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,16 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class OmniauthCallbacksController < Devise::OmniauthCallbacksController
|
||||
def google_oauth2
|
||||
@user = Users.from_omniauth(request.env['omniauth.auth'])
|
||||
|
||||
if @user.persisted?
|
||||
flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: 'Google')
|
||||
|
||||
sign_in_and_redirect @user, event: :authentication
|
||||
else
|
||||
redirect_to new_registration_path(oauth_callback: true, user: @user.slice(:email, :first_name, :last_name)),
|
||||
notice: 'Please complete registration with Google auth'
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,13 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class PasswordsController < Devise::PasswordsController
|
||||
class Current < ActiveSupport::CurrentAttributes
|
||||
attribute :user
|
||||
end
|
||||
|
||||
def update
|
||||
super do |resource|
|
||||
Current.user = resource
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,24 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class PersonalizationSettingsController < ApplicationController
|
||||
def show
|
||||
authorize!(:read, AccountConfig)
|
||||
end
|
||||
|
||||
def create
|
||||
account_config =
|
||||
current_account.account_configs.find_or_initialize_by(key: encrypted_config_params[:key])
|
||||
|
||||
authorize!(:create, account_config)
|
||||
|
||||
account_config.update!(encrypted_config_params)
|
||||
|
||||
redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def encrypted_config_params
|
||||
params.require(:account_config).permit!
|
||||
end
|
||||
end
|
||||
@@ -1,46 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class PreviewDocumentPageController < ActionController::API
|
||||
include ActiveStorage::SetCurrent
|
||||
|
||||
FORMAT = Templates::ProcessDocument::FORMAT
|
||||
|
||||
def show
|
||||
attachment = ActiveStorage::Attachment.find_by(uuid: params[:attachment_uuid])
|
||||
|
||||
return head :not_found unless attachment
|
||||
|
||||
preview_image = attachment.preview_images.joins(:blob).find_by(blob: { filename: "#{params[:id]}#{FORMAT}" })
|
||||
|
||||
return redirect_to preview_image.url, allow_other_host: true if preview_image
|
||||
|
||||
file_path =
|
||||
if attachment.service.name == :disk
|
||||
ActiveStorage::Blob.service.path_for(attachment.key)
|
||||
else
|
||||
find_or_create_document_tempfile_path(attachment)
|
||||
end
|
||||
|
||||
io = Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
|
||||
|
||||
render plain: io.tap(&:rewind).read, content_type: 'image/jpeg'
|
||||
end
|
||||
|
||||
def find_or_create_document_tempfile_path(attachment)
|
||||
file_path = "#{Dir.tmpdir}/#{attachment.uuid}"
|
||||
|
||||
File.open(file_path, File::RDWR | File::CREAT, 0o644) do |f|
|
||||
f.flock(File::LOCK_EX)
|
||||
|
||||
# rubocop:disable Style/ZeroLengthPredicate
|
||||
if f.size.zero?
|
||||
f.binmode
|
||||
|
||||
f.write(attachment.download)
|
||||
end
|
||||
# rubocop:enable Style/ZeroLengthPredicate
|
||||
end
|
||||
|
||||
file_path
|
||||
end
|
||||
end
|
||||
@@ -1,10 +1,6 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class ProfileController < ApplicationController
|
||||
before_action do
|
||||
authorize!(:manage, current_user)
|
||||
end
|
||||
|
||||
def index; end
|
||||
|
||||
def update_contact
|
||||
|
||||
@@ -1,62 +1,24 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class RegistrationsController < Devise::RegistrationsController
|
||||
prepend_before_action :require_no_authentication, only: [:show]
|
||||
prepend_before_action :maybe_redirect_if_signed_in, only: [:show]
|
||||
|
||||
def show; end
|
||||
|
||||
def create
|
||||
super
|
||||
|
||||
Accounts.create_default_template(resource.account) if resource.account.persisted?
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def after_sign_up_path_for(...)
|
||||
if params[:redir].present?
|
||||
return console_redirect_index_path(redir: params[:redir]) if params[:redir].starts_with?(Docuseal::CONSOLE_URL)
|
||||
|
||||
return params[:redir]
|
||||
end
|
||||
|
||||
super
|
||||
end
|
||||
|
||||
def maybe_redirect_if_signed_in
|
||||
return unless signed_in?
|
||||
return if params[:redir].blank?
|
||||
|
||||
redirect_to after_sign_up_path_for(current_user), allow_other_host: true
|
||||
end
|
||||
|
||||
def set_flash_message(key, kind, options = {})
|
||||
return if key == :alert && kind == 'already_authenticated'
|
||||
|
||||
super
|
||||
end
|
||||
|
||||
def build_resource(_hash = {})
|
||||
account = Account.new(account_params)
|
||||
account.timezone = Accounts.normalize_timezone(account.timezone)
|
||||
|
||||
self.resource = account.users.new(user_params)
|
||||
|
||||
account.name ||= resource.full_name if params[:action] == 'create'
|
||||
end
|
||||
|
||||
def user_params
|
||||
return {} if params[:user].blank?
|
||||
|
||||
params.require(:user).permit(:first_name, :last_name, :email, :password).compact_blank.tap do |attrs|
|
||||
attrs[:password] ||= SecureRandom.hex if params[:action] == 'create'
|
||||
end
|
||||
params.require(:user).permit(:first_name, :last_name, :email, :password)
|
||||
end
|
||||
|
||||
def account_params
|
||||
return {} if params[:account].blank?
|
||||
|
||||
params.require(:account).permit(:name, :timezone).compact_blank
|
||||
params.require(:account).permit(:name, :timezone)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -5,7 +5,6 @@ class SendSubmissionEmailController < ApplicationController
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_before_action :verify_authenticity_token
|
||||
skip_authorization_check
|
||||
|
||||
def success; end
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SessionsController < Devise::SessionsController
|
||||
before_action :configure_permitted_parameters
|
||||
|
||||
def create
|
||||
if Docuseal.multitenant? && !User.exists?(email: sign_in_params[:email])
|
||||
return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
|
||||
notice: 'Create a new account'
|
||||
end
|
||||
|
||||
if User.exists?(email: sign_in_params[:email], otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
|
||||
return render :otp, locals: { resource: User.new(sign_in_params) }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
super
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def after_sign_in_path_for(...)
|
||||
if params[:redir].present?
|
||||
return console_redirect_index_path(redir: params[:redir]) if params[:redir].starts_with?(Docuseal::CONSOLE_URL)
|
||||
|
||||
return params[:redir]
|
||||
end
|
||||
|
||||
super
|
||||
end
|
||||
|
||||
def configure_permitted_parameters
|
||||
devise_parameter_sanitizer.permit(:sign_in, keys: [:otp_attempt])
|
||||
end
|
||||
|
||||
def set_flash_message(key, kind, options = {})
|
||||
return if key == :alert && kind == 'already_authenticated'
|
||||
|
||||
super
|
||||
end
|
||||
end
|
||||
@@ -3,7 +3,6 @@
|
||||
class SetupController < ApplicationController
|
||||
skip_before_action :maybe_redirect_to_setup
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
before_action :redirect_to_root_if_signed, if: :signed_in?
|
||||
before_action :ensure_first_user_not_created!
|
||||
@@ -17,17 +16,16 @@ class SetupController < ApplicationController
|
||||
def create
|
||||
@account = Account.new(account_params)
|
||||
@account.timezone = Accounts.normalize_timezone(@account.timezone)
|
||||
|
||||
@user = @account.users.new(user_params)
|
||||
@encrypted_config = EncryptedConfig.new(encrypted_config_params)
|
||||
|
||||
unless URI.parse(encrypted_config_params[:value].to_s).class.in?([URI::HTTP, URI::HTTPS])
|
||||
@encrypted_config = EncryptedConfig.new(encrypted_config_params)
|
||||
@encrypted_config.errors.add(:value, 'should be a valid URL')
|
||||
|
||||
return render :index, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
return render :index, status: :unprocessable_entity unless @account.valid?
|
||||
|
||||
if @user.save
|
||||
encrypted_configs = [
|
||||
{ key: EncryptedConfig::APP_URL_KEY, value: encrypted_config_params[:value] },
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SmsSettingsController < ApplicationController
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, only: :index
|
||||
authorize_resource :encrypted_config, parent: false, except: :index
|
||||
|
||||
def index; end
|
||||
|
||||
private
|
||||
|
||||
def load_encrypted_config
|
||||
@encrypted_config =
|
||||
EncryptedConfig.find_or_initialize_by(account: current_account, key: 'sms_configs')
|
||||
end
|
||||
end
|
||||
@@ -1,16 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SsoSettingsController < ApplicationController
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, only: :index
|
||||
authorize_resource :encrypted_config, parent: false, except: :index
|
||||
|
||||
def index; end
|
||||
|
||||
private
|
||||
|
||||
def load_encrypted_config
|
||||
@encrypted_config =
|
||||
EncryptedConfig.find_or_initialize_by(account: current_account, key: 'saml_configs')
|
||||
end
|
||||
end
|
||||
@@ -4,7 +4,6 @@ class StartFormController < ApplicationController
|
||||
layout 'form'
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
before_action :load_template
|
||||
|
||||
@@ -14,21 +13,19 @@ class StartFormController < ApplicationController
|
||||
|
||||
def update
|
||||
@submitter = Submitter.where(submission: @template.submissions.where(deleted_at: nil))
|
||||
.then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
|
||||
.find_or_initialize_by(**submitter_params.compact_blank)
|
||||
.find_or_initialize_by(email: submitter_params[:email])
|
||||
|
||||
if @submitter.completed_at?
|
||||
redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
|
||||
else
|
||||
@submitter.assign_attributes(
|
||||
uuid: @template.submitters.first['uuid'],
|
||||
opened_at: Time.current,
|
||||
ip: request.remote_ip,
|
||||
ua: request.user_agent
|
||||
)
|
||||
|
||||
@submitter.submission ||= Submission.new(template: @template,
|
||||
template_submitters: @template.submitters,
|
||||
source: :link)
|
||||
@submitter.submission ||= Submission.new(template: @template)
|
||||
|
||||
if @submitter.save
|
||||
redirect_to submit_form_path(@submitter.slug)
|
||||
@@ -39,17 +36,13 @@ class StartFormController < ApplicationController
|
||||
end
|
||||
|
||||
def completed
|
||||
@submitter = Submitter.where(submission: @template.submissions)
|
||||
.where.not(completed_at: nil)
|
||||
.find_by!(email: params[:email])
|
||||
@submitter = Submitter.where(submission: @template.submissions).find_by!(email: params[:email])
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def submitter_params
|
||||
params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
|
||||
attrs[:email] = Submissions.normalize_email(attrs[:email])
|
||||
end
|
||||
params.require(:submitter).permit(:email)
|
||||
end
|
||||
|
||||
def load_template
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
|
||||
class StorageSettingsController < ApplicationController
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, only: :index
|
||||
authorize_resource :encrypted_config, parent: false, only: :create
|
||||
|
||||
def index; end
|
||||
|
||||
|
||||
@@ -2,69 +2,73 @@
|
||||
|
||||
class SubmissionsController < ApplicationController
|
||||
before_action :load_template, only: %i[new create]
|
||||
authorize_resource :template, only: %i[new create]
|
||||
|
||||
load_and_authorize_resource :submission, only: %i[show destroy]
|
||||
|
||||
PRELOAD_ALL_PAGES_AMOUNT = 200
|
||||
|
||||
def show
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: [@submission],
|
||||
associations: [:template, { template_schema_documents: :blob }]
|
||||
).call
|
||||
|
||||
total_pages =
|
||||
@submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
|
||||
|
||||
if total_pages < PRELOAD_ALL_PAGES_AMOUNT
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: @submission.template_schema_documents,
|
||||
associations: [:blob, { preview_images_attachments: :blob }]
|
||||
).call
|
||||
end
|
||||
@submission =
|
||||
Submission.joins(:template).where(template: { account_id: current_account.id })
|
||||
.preload(template: { documents_attachments: { preview_images_attachments: :blob } })
|
||||
.find(params[:id])
|
||||
|
||||
render :show, layout: 'plain'
|
||||
end
|
||||
|
||||
def new
|
||||
authorize!(:new, Submission)
|
||||
end
|
||||
def new; end
|
||||
|
||||
def create
|
||||
authorize!(:create, Submission)
|
||||
|
||||
submissions =
|
||||
if params[:emails].present?
|
||||
Submissions.create_from_emails(template: @template,
|
||||
user: current_user,
|
||||
source: :invite,
|
||||
mark_as_sent: params[:send_email] == '1',
|
||||
emails: params[:emails])
|
||||
create_submissions_from_emails
|
||||
else
|
||||
Submissions.create_from_submitters(template: @template,
|
||||
user: current_user,
|
||||
source: :invite,
|
||||
submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
|
||||
mark_as_sent: params[:send_email] == '1',
|
||||
submissions_attrs: submissions_params[:submission].to_h.values)
|
||||
create_submissions_from_submitters
|
||||
end
|
||||
|
||||
Submissions.send_signature_requests(submissions, params)
|
||||
if params[:send_email] == '1'
|
||||
submissions.flat_map(&:submitters).each do |submitter|
|
||||
SubmitterMailer.invitation_email(submitter, message: params[:message]).deliver_later!
|
||||
end
|
||||
end
|
||||
|
||||
redirect_to template_path(@template), notice: 'New recipients have been added'
|
||||
redirect_to template_path(@template),
|
||||
notice: "#{submissions.size} #{'recipient'.pluralize(submissions.size)} added"
|
||||
end
|
||||
|
||||
def destroy
|
||||
@submission.update!(deleted_at: Time.current)
|
||||
submission = Submission.joins(:template).where(template: { account_id: current_account.id })
|
||||
.find(params[:id])
|
||||
|
||||
redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
|
||||
submission.update!(deleted_at: Time.current)
|
||||
|
||||
redirect_back(fallback_location: template_path(submission.template), notice: 'Submission has been archived')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def create_submissions_from_emails
|
||||
emails = params[:emails].to_s.scan(User::EMAIL_REGEXP)
|
||||
|
||||
emails.map do |email|
|
||||
submission = @template.submissions.new(created_by_user: current_user)
|
||||
submission.submitters.new(email:, uuid: @template.submitters.first['uuid'],
|
||||
sent_at: params[:send_email] == '1' ? Time.current : nil)
|
||||
|
||||
submission.tap(&:save!)
|
||||
end
|
||||
end
|
||||
|
||||
def create_submissions_from_submitters
|
||||
submissions_params[:submission].to_h.map do |_, attrs|
|
||||
submission = @template.submissions.new(created_by_user: current_user)
|
||||
|
||||
attrs[:submitters].each do |submitter_attrs|
|
||||
submission.submitters.new(**submitter_attrs, sent_at: params[:send_email] == '1' ? Time.current : nil)
|
||||
end
|
||||
|
||||
submission.tap(&:save!)
|
||||
end
|
||||
end
|
||||
|
||||
def submissions_params
|
||||
params.permit(submission: { submitters: [%i[uuid email phone name]] })
|
||||
params.permit(submission: { submitters: [%i[uuid email]] })
|
||||
end
|
||||
|
||||
def load_template
|
||||
|
||||
@@ -4,7 +4,6 @@ class SubmissionsDebugController < ApplicationController
|
||||
layout 'plain'
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def index
|
||||
@submitter = Submitter.preload({ attachments_attachments: :blob },
|
||||
@@ -16,13 +15,9 @@ class SubmissionsDebugController < ApplicationController
|
||||
render 'submit_form/show'
|
||||
end
|
||||
f.pdf do
|
||||
if params[:audit]
|
||||
Submissions::GenerateAuditTrail.call(@submitter.submission)
|
||||
else
|
||||
Submissions::GenerateResultAttachments.call(@submitter)
|
||||
end
|
||||
Submissions::GenerateResultAttachments.call(@submitter)
|
||||
|
||||
send_data ActiveStorage::Attachment.where(name: params[:audit] ? :audit_trail : :documents).last.download,
|
||||
send_data ActiveStorage::Attachment.where(name: :documents).last.download,
|
||||
filename: 'debug.pdf',
|
||||
disposition: 'inline',
|
||||
type: 'application/pdf'
|
||||
|
||||
@@ -2,19 +2,14 @@
|
||||
|
||||
class SubmissionsDownloadController < ApplicationController
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def index
|
||||
submitter = Submitter.find_by(slug: params[:submitter_slug])
|
||||
|
||||
Submissions::EnsureResultGenerated.call(submitter)
|
||||
|
||||
last_submitter = submitter.submission.submitters.where.not(completed_at: nil).order(:completed_at).last
|
||||
|
||||
Submissions::EnsureResultGenerated.call(last_submitter)
|
||||
|
||||
urls =
|
||||
Submitters.select_attachments_for_download(last_submitter).map do |attachment|
|
||||
Submitters.select_attachments_for_download(submitter).map do |attachment|
|
||||
helpers.rails_blob_url(attachment)
|
||||
end
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SubmissionsExportController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
load_and_authorize_resource :submission, through: :template, parent: false, only: :index
|
||||
|
||||
def index
|
||||
submissions = @submissions.active
|
||||
.preload(submitters: { documents_attachments: :blob,
|
||||
attachments_attachments: :blob })
|
||||
.order(id: :asc)
|
||||
|
||||
if params[:format] == 'csv'
|
||||
send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
|
||||
filename: "#{@template.name}.csv"
|
||||
elsif params[:format] == 'xlsx'
|
||||
send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
|
||||
filename: "#{@template.name}.xlsx"
|
||||
end
|
||||
end
|
||||
|
||||
def new; end
|
||||
end
|
||||
@@ -4,48 +4,49 @@ class SubmitFormController < ApplicationController
|
||||
layout 'form'
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
PRELOAD_ALL_PAGES_AMOUNT = 200
|
||||
|
||||
def show
|
||||
@submitter = Submitter.find_by!(slug: params[:slug])
|
||||
@submitter =
|
||||
Submitter.preload(submission: { template: { documents_attachments: { preview_images_attachments: :blob } } })
|
||||
.find_by!(slug: params[:slug])
|
||||
|
||||
return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
|
||||
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: [@submitter],
|
||||
associations: [submission: [:template, { template_schema_documents: :blob }]]
|
||||
).call
|
||||
|
||||
total_pages =
|
||||
@submitter.submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
|
||||
|
||||
if total_pages < PRELOAD_ALL_PAGES_AMOUNT
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: @submitter.submission.template_schema_documents,
|
||||
associations: [:blob, { preview_images_attachments: :blob }]
|
||||
).call
|
||||
end
|
||||
|
||||
Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
|
||||
|
||||
cookies[:submitter_sid] = @submitter.signed_id
|
||||
|
||||
render @submitter.submission.template.deleted_at? ? :archived : :show
|
||||
end
|
||||
|
||||
def update
|
||||
submitter = Submitter.find_by!(slug: params[:slug])
|
||||
submitter.values.merge!(normalized_values)
|
||||
submitter.completed_at = Time.current if params[:completed] == 'true'
|
||||
submitter.opened_at ||= Time.current
|
||||
|
||||
Submitters::SubmitValues.call(submitter, params, request)
|
||||
submitter.save!
|
||||
|
||||
if submitter.completed_at?
|
||||
GenerateSubmitterResultAttachmentsJob.perform_later(submitter)
|
||||
|
||||
submitter.submission.template.account.users.active.each do |user|
|
||||
SubmitterMailer.completed_email(submitter, user).deliver_later!
|
||||
end
|
||||
end
|
||||
|
||||
head :ok
|
||||
rescue Submitters::SubmitValues::ValidationError => e
|
||||
render json: { error: e.message }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def completed
|
||||
@submitter = Submitter.find_by!(slug: params[:submit_form_slug])
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def normalized_values
|
||||
params.fetch(:values, {}).to_unsafe_h.transform_values do |v|
|
||||
if params[:cast_boolean] == 'true'
|
||||
v == 'true'
|
||||
else
|
||||
v.is_a?(Array) ? v.compact_blank : v
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SubmittersSendEmailController < ApplicationController
|
||||
load_and_authorize_resource :submitter, id_param: :submitter_slug, find_by: :slug
|
||||
|
||||
def create
|
||||
SubmitterMailer.invitation_email(@submitter).deliver_later!
|
||||
|
||||
SubmissionEvent.create!(submitter: @submitter, event_type: 'send_email')
|
||||
|
||||
@submitter.sent_at ||= Time.current
|
||||
@submitter.save!
|
||||
|
||||
redirect_back(fallback_location: submission_path(@submitter.submission), notice: 'Email has been sent')
|
||||
end
|
||||
end
|
||||
@@ -1,29 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplateFoldersController < ApplicationController
|
||||
load_and_authorize_resource :template_folder
|
||||
|
||||
def show
|
||||
@templates = @template_folder.templates.active.preload(:author).order(id: :desc)
|
||||
@templates = Templates.search(@templates, params[:q])
|
||||
|
||||
@pagy, @templates = pagy(@templates, items: 12)
|
||||
end
|
||||
|
||||
def edit; end
|
||||
|
||||
def update
|
||||
if @template_folder != current_account.default_template_folder &&
|
||||
@template_folder.update(template_folder_params)
|
||||
redirect_to folder_path(@template_folder), notice: 'Folder name has been updated'
|
||||
else
|
||||
redirect_to folder_path(@template_folder), alert: 'Unable to rename folder'
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def template_folder_params
|
||||
params.require(:template_folder).permit(:name)
|
||||
end
|
||||
end
|
||||
@@ -1,12 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesArchivedController < ApplicationController
|
||||
load_and_authorize_resource :template, parent: false
|
||||
|
||||
def index
|
||||
@templates = @templates.where.not(deleted_at: nil).preload(:author, :folder).order(id: :desc)
|
||||
@templates = Templates.search(@templates, params[:q])
|
||||
|
||||
@pagy, @templates = pagy(@templates, items: 12)
|
||||
end
|
||||
end
|
||||
@@ -1,15 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesArchivedSubmissionsController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
load_and_authorize_resource :submission, through: :template, parent: false
|
||||
|
||||
def index
|
||||
@submissions = @submissions.where.not(deleted_at: nil)
|
||||
@submissions = Submissions.search(@submissions, params[:q])
|
||||
|
||||
@pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
|
||||
rescue ActiveRecord::RecordNotFound
|
||||
redirect_to root_path
|
||||
end
|
||||
end
|
||||
@@ -1,50 +1,31 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
before_action :load_base_template, only: %i[new create]
|
||||
|
||||
def show
|
||||
submissions = @template.submissions
|
||||
submissions = submissions.active if @template.deleted_at.blank?
|
||||
submissions = Submissions.search(submissions, params[:q])
|
||||
@template = current_account.templates.active.find(params[:id])
|
||||
|
||||
@base_submissions = submissions
|
||||
|
||||
submissions = submissions.pending if params[:status] == 'pending'
|
||||
submissions = submissions.completed if params[:status] == 'completed'
|
||||
|
||||
@pagy, @submissions = pagy(submissions.preload(:submitters).order(id: :desc))
|
||||
@pagy, @submissions = pagy(@template.submissions.active.preload(:submitters).order(id: :desc))
|
||||
rescue ActiveRecord::RecordNotFound
|
||||
redirect_to root_path
|
||||
end
|
||||
|
||||
def new
|
||||
@template = current_account.templates.new
|
||||
@template.name = "#{@base_template.name} (Clone)" if @base_template
|
||||
end
|
||||
|
||||
def edit
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: [@template],
|
||||
associations: [schema_documents: { preview_images_attachments: :blob }]
|
||||
).call
|
||||
|
||||
@template_data =
|
||||
@template.as_json.merge(
|
||||
documents: @template.schema_documents.as_json(
|
||||
methods: [:metadata],
|
||||
include: { preview_images: { methods: %i[url metadata filename] } }
|
||||
)
|
||||
).to_json
|
||||
@template = current_account.templates.preload(documents_attachments: { preview_images_attachments: :blob })
|
||||
.find(params[:id])
|
||||
|
||||
render :edit, layout: 'plain'
|
||||
end
|
||||
|
||||
def create
|
||||
@template.account = current_account
|
||||
@template = current_account.templates.new(template_params)
|
||||
@template.author = current_user
|
||||
@template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
|
||||
@template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
|
||||
|
||||
if @template.save
|
||||
@@ -57,18 +38,10 @@ class TemplatesController < ApplicationController
|
||||
end
|
||||
|
||||
def destroy
|
||||
notice =
|
||||
if !Docuseal.multitenant? && params[:permanently].present?
|
||||
@template.destroy!
|
||||
@template = current_account.templates.find(params[:id])
|
||||
@template.update!(deleted_at: Time.current)
|
||||
|
||||
'Template has been removed.'
|
||||
else
|
||||
@template.update!(deleted_at: Time.current)
|
||||
|
||||
'Template has been archived.'
|
||||
end
|
||||
|
||||
redirect_back(fallback_location: root_path, notice:)
|
||||
redirect_back(fallback_location: root_path, notice: 'Template has been archived.')
|
||||
end
|
||||
|
||||
private
|
||||
@@ -80,6 +53,8 @@ class TemplatesController < ApplicationController
|
||||
def load_base_template
|
||||
return if params[:base_template_id].blank?
|
||||
|
||||
@base_template = current_account.templates.find_by(id: params[:base_template_id])
|
||||
@base_template = current_account.templates
|
||||
.preload(documents_attachments: :preview_images_attachments)
|
||||
.find_by(id: params[:base_template_id])
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesFoldersController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def edit; end
|
||||
|
||||
def update
|
||||
@template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:name])
|
||||
|
||||
if @template.save
|
||||
redirect_back(fallback_location: template_path(@template), notice: 'Document template has been moved')
|
||||
else
|
||||
redirect_back(fallback_location: template_path(@template), notice: 'Unable to move template into folder')
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def template_folder_params
|
||||
params.require(:template_folder).permit(:name)
|
||||
end
|
||||
end
|
||||
@@ -1,11 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesRestoreController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def create
|
||||
@template.update!(deleted_at: nil)
|
||||
|
||||
redirect_to template_path(@template), notice: 'Template has been unarchived'
|
||||
end
|
||||
end
|
||||
@@ -1,57 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesUploadsController < ApplicationController
|
||||
load_and_authorize_resource :template, parent: false
|
||||
|
||||
layout 'plain'
|
||||
|
||||
def show; end
|
||||
|
||||
def create
|
||||
url_params = create_file_params_from_url if params[:url].present?
|
||||
|
||||
@template.account = current_account
|
||||
@template.author = current_user
|
||||
@template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
|
||||
@template.name = File.basename((url_params || params)[:files].first.original_filename, '.*')
|
||||
|
||||
@template.save!
|
||||
|
||||
documents = Templates::CreateAttachments.call(@template, url_params || params)
|
||||
|
||||
schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
|
||||
|
||||
@template.update!(schema:)
|
||||
|
||||
redirect_to edit_template_path(@template)
|
||||
rescue StandardError => e
|
||||
Rollbar.error(e) if defined?(Rollbar)
|
||||
|
||||
redirect_to root_path, alert: 'Unable to upload file'
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def create_file_params_from_url
|
||||
tempfile = Tempfile.new
|
||||
tempfile.binmode
|
||||
tempfile.write(conn.get(Addressable::URI.parse(params[:url]).display_uri.to_s).body)
|
||||
tempfile.rewind
|
||||
|
||||
file = ActionDispatch::Http::UploadedFile.new(
|
||||
tempfile:,
|
||||
filename: File.basename(
|
||||
URI.decode_www_form_component(params[:filename].presence || params[:url])
|
||||
),
|
||||
type: Marcel::MimeType.for(tempfile)
|
||||
)
|
||||
|
||||
{ files: [file] }
|
||||
end
|
||||
|
||||
def conn
|
||||
Faraday.new do |faraday|
|
||||
faraday.response :follow_redirects
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,37 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class UserSignaturesController < ApplicationController
|
||||
before_action :load_user_config
|
||||
authorize_resource :user_config
|
||||
|
||||
def edit; end
|
||||
|
||||
def update
|
||||
file = params[:file]
|
||||
|
||||
return redirect_to settings_profile_index_path, notice: 'Unable to save signature' if file.blank?
|
||||
|
||||
blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
|
||||
filename: file.original_filename,
|
||||
content_type: file.content_type)
|
||||
|
||||
attachment = ActiveStorage::Attachment.create!(
|
||||
blob:,
|
||||
name: 'signature',
|
||||
record: current_user
|
||||
)
|
||||
|
||||
if @user_config.update(value: attachment.uuid)
|
||||
redirect_to settings_profile_index_path, notice: 'Signature has been saved'
|
||||
else
|
||||
redirect_to settings_profile_index_path, notice: 'Unable to save signature'
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_user_config
|
||||
@user_config =
|
||||
UserConfig.find_or_initialize_by(user: current_user, key: UserConfig::SIGNATURE_KEY)
|
||||
end
|
||||
end
|
||||
@@ -1,55 +1,19 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class UsersController < ApplicationController
|
||||
load_and_authorize_resource :user, only: %i[index edit new update destroy]
|
||||
|
||||
before_action :build_user, only: :create
|
||||
authorize_resource :user, only: :create
|
||||
before_action :load_user, only: %i[edit update destroy]
|
||||
|
||||
def index
|
||||
@pagy, @users = pagy(@users.active.order(id: :desc))
|
||||
@pagy, @users = pagy(current_account.users.active.order(id: :desc))
|
||||
end
|
||||
|
||||
def new; end
|
||||
def new
|
||||
@user = current_account.users.new
|
||||
end
|
||||
|
||||
def edit; end
|
||||
|
||||
def create
|
||||
if @user.save
|
||||
UserMailer.invitation_email(@user).deliver_later!
|
||||
|
||||
redirect_to settings_users_path, notice: 'User has been invited'
|
||||
else
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def update
|
||||
return redirect_to settings_users_path, notice: 'Unable to update user.' if Docuseal.demo?
|
||||
|
||||
attrs = user_params.compact_blank
|
||||
attrs.delete(:role) if User::ROLES.exclude?(attrs[:role])
|
||||
|
||||
if @user.update(attrs.except(current_user == @user ? :role : nil))
|
||||
redirect_to settings_users_path, notice: 'User has been updated'
|
||||
else
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
if Docuseal.demo? || @user.id == current_user.id
|
||||
return redirect_to settings_users_path, notice: 'Unable to remove user'
|
||||
end
|
||||
|
||||
@user.update!(deleted_at: Time.current)
|
||||
|
||||
redirect_to settings_users_path, notice: 'User has been removed'
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def build_user
|
||||
@user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
|
||||
user.assign_attributes(user_params)
|
||||
user.deleted_at = nil
|
||||
@@ -57,10 +21,36 @@ class UsersController < ApplicationController
|
||||
|
||||
@user ||= current_account.users.new(user_params)
|
||||
|
||||
@user
|
||||
if @user.save
|
||||
UserMailer.invitation_email(@user).deliver_later!
|
||||
|
||||
redirect_to settings_users_path, notice: 'User has been invited.'
|
||||
else
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def update
|
||||
if @user.update(user_params.compact_blank)
|
||||
redirect_to settings_users_path, notice: 'User has been updated.'
|
||||
else
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
@user.update!(deleted_at: Time.current)
|
||||
|
||||
redirect_to settings_users_path, notice: 'User has been removed.'
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_user
|
||||
@user = current_account.users.find(params[:id])
|
||||
end
|
||||
|
||||
def user_params
|
||||
params.require(:user).permit(:email, :first_name, :last_name, :password, :role)
|
||||
params.require(:user).permit(:email, :first_name, :last_name, :password)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class VerifyPdfSignatureController < ApplicationController
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
pdfs =
|
||||
params[:files].map do |file|
|
||||
HexaPDF::Document.new(io: file.open)
|
||||
end
|
||||
|
||||
cert_data = if Docuseal.multitenant?
|
||||
Docuseal::CERTS
|
||||
else
|
||||
EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
|
||||
end
|
||||
|
||||
default_pkcs = GenerateCertificate.load_pkcs(cert_data)
|
||||
|
||||
custom_certs = cert_data.fetch('custom', []).map do |e|
|
||||
OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s)
|
||||
end
|
||||
|
||||
trusted_certs = [default_pkcs.certificate,
|
||||
*default_pkcs.ca_certs,
|
||||
*custom_certs.map(&:certificate),
|
||||
*custom_certs.flat_map(&:ca_certs).compact]
|
||||
|
||||
render turbo_stream: turbo_stream.replace('result', partial: 'result',
|
||||
locals: { pdfs:, files: params[:files], trusted_certs: })
|
||||
rescue HexaPDF::MalformedPDFError
|
||||
render turbo_stream: turbo_stream.replace('result', html: helpers.tag.div('Invalid PDF', id: 'result'))
|
||||
end
|
||||
end
|
||||
@@ -1,33 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class WebhookSettingsController < ApplicationController
|
||||
before_action :load_encrypted_config
|
||||
authorize_resource :encrypted_config, parent: false
|
||||
|
||||
def show; end
|
||||
|
||||
def create
|
||||
@encrypted_config.update!(encrypted_config_params)
|
||||
|
||||
redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook URL has been saved.')
|
||||
end
|
||||
|
||||
def update
|
||||
submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
|
||||
|
||||
SendFormCompletedWebhookRequestJob.perform_later(submitter)
|
||||
|
||||
redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_encrypted_config
|
||||
@encrypted_config =
|
||||
current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
|
||||
end
|
||||
|
||||
def encrypted_config_params
|
||||
params.require(:encrypted_config).permit(:value)
|
||||
end
|
||||
end
|
||||
@@ -15,10 +15,6 @@ import DownloadButton from './elements/download_button'
|
||||
import SetOriginUrl from './elements/set_origin_url'
|
||||
import SetTimezone from './elements/set_timezone'
|
||||
import AutoresizeTextarea from './elements/autoresize_textarea'
|
||||
import SubmittersAutocomplete from './elements/submitter_autocomplete'
|
||||
import FolderAutocomplete from './elements/folder_autocomplete'
|
||||
import SignatureForm from './elements/signature_form'
|
||||
import SubmitForm from './elements/submit_form'
|
||||
|
||||
import * as TurboInstantClick from './lib/turbo_instant_click'
|
||||
|
||||
@@ -47,33 +43,8 @@ window.customElements.define('download-button', DownloadButton)
|
||||
window.customElements.define('set-origin-url', SetOriginUrl)
|
||||
window.customElements.define('set-timezone', SetTimezone)
|
||||
window.customElements.define('autoresize-textarea', AutoresizeTextarea)
|
||||
window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
|
||||
window.customElements.define('folder-autocomplete', FolderAutocomplete)
|
||||
window.customElements.define('signature-form', SignatureForm)
|
||||
window.customElements.define('submit-form', SubmitForm)
|
||||
|
||||
document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
|
||||
document.addEventListener('turbo:submit-end', async (event) => {
|
||||
const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
|
||||
|
||||
if (!resp?.headers?.get('content-disposition')?.includes('attachment')) {
|
||||
return
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(await resp.blob())
|
||||
const link = document.createElement('a')
|
||||
|
||||
link.href = url
|
||||
link.setAttribute('download', decodeURIComponent(resp.headers.get('content-disposition').split('"')[1]))
|
||||
|
||||
document.body.appendChild(link)
|
||||
|
||||
link.click()
|
||||
|
||||
document.body.removeChild(link)
|
||||
|
||||
URL.revokeObjectURL(url)
|
||||
})
|
||||
|
||||
window.customElements.define('template-builder', class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
@@ -81,10 +52,6 @@ window.customElements.define('template-builder', class extends HTMLElement {
|
||||
|
||||
this.app = createApp(TemplateBuilder, {
|
||||
template: reactive(JSON.parse(this.dataset.template)),
|
||||
backgroundColor: '#faf7f5',
|
||||
withPhone: this.dataset.withPhone === 'true',
|
||||
withLogo: this.dataset.withLogo !== 'false',
|
||||
acceptFileTypes: this.dataset.acceptFileTypes,
|
||||
isDirectUpload: this.dataset.isDirectUpload === 'true'
|
||||
})
|
||||
|
||||
|
||||
@@ -70,58 +70,3 @@ button[disabled] .enabled {
|
||||
.base-radio {
|
||||
@apply radio bg-white radio-sm no-animation;
|
||||
}
|
||||
|
||||
.base-select {
|
||||
@apply select base-input w-full font-normal;
|
||||
}
|
||||
|
||||
.tooltip-bottom-end:before {
|
||||
transform: translateX(-95%);
|
||||
top: var(--tooltip-offset);
|
||||
left: 100%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.tooltip-bottom-end:after {
|
||||
transform: translateX(-25%);
|
||||
border-color: transparent transparent var(--tooltip-color) transparent;
|
||||
top: var(--tooltip-tail-offset);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
@apply border border-base-300 mt-1 rounded-md;
|
||||
}
|
||||
|
||||
.autocomplete * {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.autocomplete > div {
|
||||
@apply px-2 py-1 font-normal text-sm;
|
||||
}
|
||||
|
||||
.autocomplete .group {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.autocomplete > div:hover:not(.group),
|
||||
.autocomplete > div.selected {
|
||||
@apply bg-base-300;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-outlined {
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
outline-offset: 3px;
|
||||
outline-color: hsl(var(--bc) / 0.2);
|
||||
}
|
||||
|
||||
@@ -38,11 +38,7 @@ export default actionable(targetable(class extends HTMLElement {
|
||||
this.uploadFiles(this.input.files)
|
||||
}
|
||||
|
||||
toggleLoading = (e) => {
|
||||
if (e && e.target && !e.target.contains(this)) {
|
||||
return
|
||||
}
|
||||
|
||||
toggleLoading = () => {
|
||||
this.loading.classList.toggle('hidden')
|
||||
this.icon.classList.toggle('hidden')
|
||||
this.classList.toggle('opacity-50')
|
||||
@@ -91,13 +87,11 @@ export default actionable(targetable(class extends HTMLElement {
|
||||
this.append(input)
|
||||
})
|
||||
|
||||
if (this.dataset.submitOnUpload === 'true') {
|
||||
if (this.dataset.submitOnUpload) {
|
||||
this.closest('form').querySelector('button[type="submit"]').click()
|
||||
}
|
||||
}).finally(() => {
|
||||
if (this.dataset.submitOnUpload !== 'true') {
|
||||
this.toggleLoading()
|
||||
}
|
||||
this.toggleLoading()
|
||||
})
|
||||
} else {
|
||||
if (this.dataset.submitOnUpload) {
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
import autocomplete from 'autocompleter'
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
autocomplete({
|
||||
input: this.input,
|
||||
preventSubmit: this.dataset.submitOnSelect === 'true' ? 0 : 1,
|
||||
minLength: 0,
|
||||
showOnFocus: true,
|
||||
onSelect: this.onSelect,
|
||||
render: this.render,
|
||||
fetch: this.fetch
|
||||
})
|
||||
}
|
||||
|
||||
onSelect = (item) => {
|
||||
this.input.value = item.name
|
||||
}
|
||||
|
||||
fetch = (text, resolve) => {
|
||||
const queryParams = new URLSearchParams({ q: text })
|
||||
|
||||
fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
|
||||
const items = await resp.json()
|
||||
|
||||
resolve(items)
|
||||
}).catch(() => {
|
||||
resolve([])
|
||||
})
|
||||
}
|
||||
|
||||
render = (item) => {
|
||||
const div = document.createElement('div')
|
||||
|
||||
div.textContent = item.name
|
||||
|
||||
return div
|
||||
}
|
||||
|
||||
get input () {
|
||||
return this.querySelector('input')
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.querySelectorAll('a').forEach((link) => {
|
||||
if (document.location.pathname.startsWith(link.pathname) && !link.getAttribute('href').startsWith('http')) {
|
||||
if (document.location.pathname.startsWith(link.pathname)) {
|
||||
link.classList.add('bg-base-300')
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import { target, targetable } from '@github/catalyst/lib/targetable'
|
||||
import { cropCanvasAndExportToPNG } from '../submission_form/crop_canvas'
|
||||
|
||||
export default targetable(class extends HTMLElement {
|
||||
static [target.static] = ['canvas', 'input', 'clear', 'button']
|
||||
|
||||
async connectedCallback () {
|
||||
this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
|
||||
this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
|
||||
|
||||
const { default: SignaturePad } = await import('signature_pad')
|
||||
|
||||
this.pad = new SignaturePad(this.canvas)
|
||||
|
||||
this.clear.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.pad.clear()
|
||||
})
|
||||
|
||||
this.button.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.button.disabled = true
|
||||
|
||||
this.submit()
|
||||
})
|
||||
}
|
||||
|
||||
async submit () {
|
||||
const blob = await cropCanvasAndExportToPNG(this.canvas)
|
||||
const file = new File([blob], 'signature.png', { type: 'image/png' })
|
||||
|
||||
const dataTransfer = new DataTransfer()
|
||||
|
||||
dataTransfer.items.add(file)
|
||||
|
||||
this.input.files = dataTransfer.files
|
||||
|
||||
if (this.input.webkitEntries.length) {
|
||||
this.input.dataset.file = `${dataTransfer.files[0].name}`
|
||||
}
|
||||
|
||||
this.closest('form').requestSubmit()
|
||||
}
|
||||
})
|
||||
@@ -1,5 +0,0 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.querySelector('form').requestSubmit()
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import autocomplete from 'autocompleter'
|
||||
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
autocomplete({
|
||||
input: this.input,
|
||||
preventSubmit: 1,
|
||||
minLength: 1,
|
||||
showOnFocus: true,
|
||||
onSelect: this.onSelect,
|
||||
render: this.render,
|
||||
fetch: this.fetch
|
||||
})
|
||||
}
|
||||
|
||||
onSelect = (item) => {
|
||||
const fields = ['email', 'name', 'phone']
|
||||
const submitterItemEl = this.closest('submitter-item')
|
||||
|
||||
fields.forEach((field) => {
|
||||
const input = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] input`)
|
||||
const textarea = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] textarea`)
|
||||
|
||||
if (input && item[field]) {
|
||||
input.value = item[field]
|
||||
}
|
||||
|
||||
if (textarea && item[field]) {
|
||||
textarea.value = textarea.value.replace(/[^;,\s]+$/, item[field] + ' ')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
fetch = (text, resolve) => {
|
||||
const q = text.split(/[;,\s]+/).pop().trim()
|
||||
|
||||
if (q) {
|
||||
const queryParams = new URLSearchParams({ q, field: this.dataset.field })
|
||||
|
||||
fetch('/api/submitters_autocomplete?' + queryParams).then(async (resp) => {
|
||||
const items = await resp.json()
|
||||
|
||||
if (q.length < 3) {
|
||||
resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
|
||||
} else {
|
||||
resolve(items)
|
||||
}
|
||||
}).catch(() => {
|
||||
resolve([])
|
||||
})
|
||||
} else {
|
||||
resolve([])
|
||||
}
|
||||
}
|
||||
|
||||
render = (item) => {
|
||||
const div = document.createElement('div')
|
||||
|
||||
div.textContent = item[this.dataset.field]
|
||||
|
||||
return div
|
||||
}
|
||||
|
||||
get input () {
|
||||
return this.querySelector('input') || this.querySelector('textarea')
|
||||
}
|
||||
}
|
||||
@@ -5,19 +5,15 @@ export default actionable(class extends HTMLElement {
|
||||
document.body.classList.add('overflow-hidden')
|
||||
|
||||
document.addEventListener('keyup', this.onEscKey)
|
||||
|
||||
document.addEventListener('turbo:submit-end', this.onSubmit)
|
||||
document.addEventListener('turbo:before-cache', this.close)
|
||||
|
||||
if (this.dataset.closeAfterSubmit !== 'false') {
|
||||
document.addEventListener('turbo:submit-end', this.onSubmit)
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback () {
|
||||
document.body.classList.remove('overflow-hidden')
|
||||
|
||||
document.removeEventListener('keyup', this.onEscKey)
|
||||
document.removeEventListener('turbo:submit-end', this.onSubmit)
|
||||
document.removeEventListener('turbo:submit-end', this.handleSubmit)
|
||||
document.removeEventListener('turbo:before-cache', this.close)
|
||||
}
|
||||
|
||||
|
||||
@@ -9,16 +9,12 @@ window.customElements.define('submission-form', class extends HTMLElement {
|
||||
this.appElem = document.createElement('div')
|
||||
|
||||
this.app = createApp(Form, {
|
||||
submitter: JSON.parse(this.dataset.submitter),
|
||||
submitterSlug: this.dataset.submitterSlug,
|
||||
submitterUuid: this.dataset.submitterUuid,
|
||||
authenticityToken: this.dataset.authenticityToken,
|
||||
canSendEmail: this.dataset.canSendEmail === 'true',
|
||||
isDirectUpload: this.dataset.isDirectUpload === 'true',
|
||||
goToLast: this.dataset.goToLast === 'true',
|
||||
isDemo: this.dataset.isDemo === 'true',
|
||||
attribution: this.dataset.attribution !== 'false',
|
||||
withConfetti: true,
|
||||
values: reactive(JSON.parse(this.dataset.values)),
|
||||
completedButton: JSON.parse(this.dataset.completedButton),
|
||||
attachments: reactive(JSON.parse(this.dataset.attachments)),
|
||||
fields: JSON.parse(this.dataset.fields)
|
||||
})
|
||||
|
||||
@@ -47,10 +47,6 @@ select:required:invalid {
|
||||
@apply border-base-content/20;
|
||||
}
|
||||
|
||||
.base-textarea {
|
||||
@apply textarea textarea-bordered bg-white rounded-3xl;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply no-animation;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex absolute lg:text-base"
|
||||
class="flex absolute text-[1.5vw] lg:text-base"
|
||||
:style="computedStyle"
|
||||
:class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
|
||||
:class="{ 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
|
||||
>
|
||||
<div
|
||||
v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
|
||||
@@ -21,14 +21,14 @@
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isActive && withLabel"
|
||||
v-if="isActive"
|
||||
class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
|
||||
>
|
||||
{{ field.name || fieldNames[field.type] }}
|
||||
<template v-if="field.type === 'checkbox' && !field.name">
|
||||
<template v-if="field.type === 'checkbox'">
|
||||
{{ fieldIndex + 1 }}
|
||||
</template>
|
||||
<template v-else-if="!field.required && field.type !== 'checkbox'">
|
||||
<template v-else-if="!field.required">
|
||||
(optional)
|
||||
</template>
|
||||
</div>
|
||||
@@ -47,11 +47,6 @@
|
||||
class="object-contain mx-auto"
|
||||
:src="signature.url"
|
||||
>
|
||||
<img
|
||||
v-else-if="field.type === 'initials' && initials"
|
||||
class="object-contain mx-auto"
|
||||
:src="initials.url"
|
||||
>
|
||||
<div
|
||||
v-else-if="field.type === 'file'"
|
||||
class="px-0.5 flex flex-col justify-center"
|
||||
@@ -102,7 +97,6 @@
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="textContainer"
|
||||
class="flex items-center px-0.5"
|
||||
>
|
||||
<span v-if="Array.isArray(modelValue)">
|
||||
@@ -111,16 +105,15 @@
|
||||
<span v-else-if="field.type === 'date'">
|
||||
{{ formattedDate }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="whitespace-pre-wrap"
|
||||
>{{ modelValue }}</span>
|
||||
<span v-else>
|
||||
{{ modelValue }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3 } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'FieldArea',
|
||||
@@ -153,11 +146,6 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
withLabel: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
fieldIndex: {
|
||||
type: Number,
|
||||
required: false,
|
||||
@@ -174,11 +162,6 @@ export default {
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value'],
|
||||
data () {
|
||||
return {
|
||||
textOverflowChars: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fieldNames () {
|
||||
return {
|
||||
@@ -187,13 +170,11 @@ export default {
|
||||
signature: 'Signature',
|
||||
date: 'Date',
|
||||
image: 'Image',
|
||||
initials: 'Initials',
|
||||
file: 'File',
|
||||
select: 'Select',
|
||||
checkbox: 'Checkbox',
|
||||
radio: 'Radio',
|
||||
multiple: 'Multiple Select',
|
||||
phone: 'Phone'
|
||||
multiple: 'Multiple Select'
|
||||
}
|
||||
},
|
||||
fieldIcons () {
|
||||
@@ -202,14 +183,12 @@ export default {
|
||||
signature: IconWritingSign,
|
||||
date: IconCalendarEvent,
|
||||
image: IconPhoto,
|
||||
initials: IconLetterCaseUpper,
|
||||
file: IconPaperclip,
|
||||
select: IconSelect,
|
||||
checkbox: IconCheckbox,
|
||||
radio: IconCircleDot,
|
||||
cells: IconColumns3,
|
||||
multiple: IconChecks,
|
||||
phone: IconPhoneCheck
|
||||
multiple: IconChecks
|
||||
}
|
||||
},
|
||||
image () {
|
||||
@@ -226,16 +205,9 @@ export default {
|
||||
return null
|
||||
}
|
||||
},
|
||||
initials () {
|
||||
if (this.field.type === 'initials') {
|
||||
return this.attachmentsIndex[this.modelValue]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
formattedDate () {
|
||||
if (this.field.type === 'date' && this.modelValue) {
|
||||
return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.modelValue))
|
||||
return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(this.modelValue))
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
@@ -257,20 +229,6 @@ export default {
|
||||
height: h * 100 + '%'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue () {
|
||||
if (this.field.type === 'text' && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
|
||||
this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.field.type === 'text' && this.$refs.textContainer) {
|
||||
this.$nextTick(() => {
|
||||
this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -11,9 +11,7 @@
|
||||
v-for="(area, areaIndex) in field.areas"
|
||||
:key="areaIndex"
|
||||
>
|
||||
<Teleport
|
||||
:to="findPageElementForArea(area)"
|
||||
>
|
||||
<Teleport :to="`#page-${area.attachment_uuid}-${area.page}`">
|
||||
<FieldArea
|
||||
:ref="setAreaRef"
|
||||
v-model="values[field.uuid]"
|
||||
@@ -22,7 +20,6 @@
|
||||
:submittable="true"
|
||||
:field-index="fieldIndex"
|
||||
:is-active="currentStep === step"
|
||||
:with-label="withLabel"
|
||||
:is-value-set="step.some((f) => f.uuid in values)"
|
||||
:attachments-index="attachmentsIndex"
|
||||
@click="$emit('focus-step', step)"
|
||||
@@ -57,11 +54,6 @@ export default {
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
withLabel: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
currentStep: {
|
||||
type: Array,
|
||||
required: false,
|
||||
@@ -78,16 +70,10 @@ export default {
|
||||
this.areaRefs = []
|
||||
},
|
||||
methods: {
|
||||
findPageElementForArea (area) {
|
||||
return (this.$root.$el?.parentNode?.getRootNode() || document).getElementById(`page-${area.attachment_uuid}-${area.page}`)
|
||||
},
|
||||
scrollIntoField (field) {
|
||||
this.areaRefs.find((area) => {
|
||||
if (area.field === field) {
|
||||
const root = this.$root.$el.parentNode.getRootNode()
|
||||
const container = root.body || root.querySelector('div')
|
||||
|
||||
if (container.style.overflow === 'hidden') {
|
||||
if (document.body.style.overflow === 'hidden') {
|
||||
this.scrollInContainer(area.$el)
|
||||
} else {
|
||||
area.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
@@ -100,19 +86,13 @@ export default {
|
||||
})
|
||||
},
|
||||
scrollInContainer (target) {
|
||||
const root = this.$root.$el.parentNode.getRootNode()
|
||||
|
||||
const scrollbox = root.getElementById('scrollbox')
|
||||
const formContainer = root.getElementById('form_container')
|
||||
const container = root.body || root.querySelector('div')
|
||||
|
||||
const padding = 64
|
||||
const boxRect = scrollbox.children[0].getBoundingClientRect()
|
||||
const boxRect = window.scrollbox.children[0].getBoundingClientRect()
|
||||
const targetRect = target.getBoundingClientRect()
|
||||
|
||||
const targetTopRelativeToBox = targetRect.top - boxRect.top
|
||||
|
||||
scrollbox.scrollTop = targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding
|
||||
window.scrollbox.scrollTop = targetTopRelativeToBox - document.body.offsetHeight + window.form_container.offsetHeight + target.offsetHeight + padding
|
||||
},
|
||||
setAreaRef (el) {
|
||||
if (el) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="value.length">
|
||||
<div v-if="modelValue.length">
|
||||
<div
|
||||
v-for="(val, index) in value"
|
||||
v-for="(val, index) in modelValue"
|
||||
:key="index"
|
||||
class="flex mb-2"
|
||||
>
|
||||
@@ -26,7 +26,10 @@
|
||||
{{ attachmentsIndex[val].filename }}
|
||||
</span>
|
||||
</a>
|
||||
<button @click.prevent="removeAttachment(val)">
|
||||
<button
|
||||
v-if="modelValue"
|
||||
@click.prevent="removeAttachment(val)"
|
||||
>
|
||||
<IconTrashX
|
||||
:width="18"
|
||||
:heigh="19"
|
||||
@@ -88,28 +91,18 @@ export default {
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value'],
|
||||
computed: {
|
||||
value: {
|
||||
set (value) {
|
||||
this.$emit('update:model-value', this.modelValue || [])
|
||||
},
|
||||
get () {
|
||||
return this.modelValue || []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeAttachment (uuid) {
|
||||
this.value.splice(this.value.indexOf(uuid), 1)
|
||||
this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
|
||||
|
||||
this.$emit('update:model-value', this.value)
|
||||
this.$emit('update:model-value', this.modelValue)
|
||||
},
|
||||
onUpload (attachments) {
|
||||
attachments.forEach((attachment) => {
|
||||
this.$emit('attached', attachment)
|
||||
})
|
||||
|
||||
this.$emit('update:model-value', [...this.value, ...attachments.map(a => a.uuid)])
|
||||
this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,22 +7,13 @@
|
||||
:height="30"
|
||||
/>
|
||||
<span>
|
||||
{{ t('form_has_been_completed') }}
|
||||
Form has been completed!
|
||||
</span>
|
||||
</p>
|
||||
<div class="space-y-3 mt-5">
|
||||
<a
|
||||
v-if="completedButton.url"
|
||||
:href="completedButton.url"
|
||||
class="white-button flex items-center w-full"
|
||||
>
|
||||
<span>
|
||||
{{ completedButton.title || 'Back to Website' }}
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
v-if="canSendEmail && !isDemo"
|
||||
class="white-button !h-auto flex items-center space-x-1 w-full"
|
||||
v-if="canSendEmail"
|
||||
class="white-button flex items-center space-x-1 w-full"
|
||||
:disabled="isSendingCopy"
|
||||
@click.prevent="sendCopyToEmail"
|
||||
>
|
||||
@@ -32,11 +23,10 @@
|
||||
/>
|
||||
<IconMail v-else />
|
||||
<span>
|
||||
{{ t('send_copy_via_email') }}
|
||||
Send copy via email
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="!isWebView"
|
||||
class="base-button flex items-center space-x-1 w-full"
|
||||
:disabled="isDownloading"
|
||||
@click.prevent="download"
|
||||
@@ -47,88 +37,41 @@
|
||||
/>
|
||||
<IconDownload v-else />
|
||||
<span>
|
||||
{{ t('download') }}
|
||||
Download
|
||||
</span>
|
||||
</button>
|
||||
<a
|
||||
v-if="isDemo"
|
||||
target="_blank"
|
||||
href="https://github.com/docusealco/docuseal"
|
||||
class="white-button flex items-center space-x-1 w-full"
|
||||
>
|
||||
<IconBrandGithub />
|
||||
<span>
|
||||
Star on Github
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="isDemo"
|
||||
href="https://docuseal.co/sign_up"
|
||||
class="white-button flex items-center space-x-1 w-full"
|
||||
>
|
||||
<IconLogin />
|
||||
<span>
|
||||
{{ t('create_a_free_account') }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="attribution"
|
||||
class="text-center mt-4"
|
||||
>
|
||||
{{ t('signed_with') }}
|
||||
<div class="text-center mt-4">
|
||||
Signed with
|
||||
<a
|
||||
href="https://www.docuseal.co/start"
|
||||
href="https://www.docuseal.co"
|
||||
target="_blank"
|
||||
class="underline"
|
||||
>DocuSeal</a> - {{ t('open_source_documents_software') }}
|
||||
>DocuSeal</a> - open source documents software
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconCircleCheck, IconBrandGithub, IconMail, IconDownload, IconInnerShadowTop, IconLogin } from '@tabler/icons-vue'
|
||||
import { IconCircleCheck, IconMail, IconDownload, IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'FormCompleted',
|
||||
components: {
|
||||
IconCircleCheck,
|
||||
IconInnerShadowTop,
|
||||
IconBrandGithub,
|
||||
IconMail,
|
||||
IconLogin,
|
||||
IconDownload
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isDemo: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
attribution: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
withConfetti: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
canSendEmail: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
completedButton: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -137,30 +80,23 @@ export default {
|
||||
isDownloading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWebView () {
|
||||
return /webview|wv|ip((?!.*Safari)|(?=.*like Safari))/i.test(window.navigator.userAgent)
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
if (this.withConfetti) {
|
||||
const { default: confetti } = await import('canvas-confetti')
|
||||
const { default: confetti } = await import('canvas-confetti')
|
||||
|
||||
confetti({
|
||||
particleCount: 50,
|
||||
startVelocity: 30,
|
||||
spread: 140
|
||||
})
|
||||
}
|
||||
confetti({
|
||||
particleCount: 50,
|
||||
startVelocity: 30,
|
||||
spread: 140
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
sendCopyToEmail () {
|
||||
this.isSendingCopy = true
|
||||
|
||||
fetch(this.baseUrl + `/send_submission_email.json?submitter_slug=${this.submitterSlug}`, {
|
||||
fetch(`/send_submission_email.json?submitter_slug=${this.submitterSlug}`, {
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
alert(this.t('email_has_been_sent'))
|
||||
alert('Email has been sent')
|
||||
}).finally(() => {
|
||||
this.isSendingCopy = false
|
||||
})
|
||||
@@ -168,7 +104,7 @@ export default {
|
||||
download () {
|
||||
this.isDownloading = true
|
||||
|
||||
fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
|
||||
fetch(`/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
|
||||
const fileRequests = urls.map((url) => {
|
||||
return () => {
|
||||
return fetch(url).then(async (resp) => {
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
function cropCanvasAndExportToPNG (canvas) {
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
const width = canvas.width
|
||||
const height = canvas.height
|
||||
|
||||
let topmost = height
|
||||
let bottommost = 0
|
||||
let leftmost = width
|
||||
let rightmost = 0
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, width, height)
|
||||
const pixels = imageData.data
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
for (let x = 0; x < width; x++) {
|
||||
const pixelIndex = (y * width + x) * 4
|
||||
const alpha = pixels[pixelIndex + 3]
|
||||
if (alpha !== 0) {
|
||||
topmost = Math.min(topmost, y)
|
||||
bottommost = Math.max(bottommost, y)
|
||||
leftmost = Math.min(leftmost, x)
|
||||
rightmost = Math.max(rightmost, x)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const croppedWidth = rightmost - leftmost + 1
|
||||
const croppedHeight = bottommost - topmost + 1
|
||||
|
||||
const croppedCanvas = document.createElement('canvas')
|
||||
croppedCanvas.width = croppedWidth
|
||||
croppedCanvas.height = croppedHeight
|
||||
const croppedCtx = croppedCanvas.getContext('2d')
|
||||
|
||||
croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
croppedCanvas.toBlob((blob) => {
|
||||
if (blob) {
|
||||
resolve(blob)
|
||||
} else {
|
||||
reject(new Error('Failed to create a PNG blob.'))
|
||||
}
|
||||
}, 'image/png')
|
||||
})
|
||||
}
|
||||
|
||||
export { cropCanvasAndExportToPNG }
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center w-full mb-2">
|
||||
<label
|
||||
:for="field.uuid"
|
||||
class="label text-2xl"
|
||||
>{{ field.name || t('date') }}
|
||||
<template v-if="!field.required">({{ t('optional') }})</template>
|
||||
</label>
|
||||
<button
|
||||
class="btn btn-outline btn-sm !normal-case font-normal"
|
||||
@click.prevent="setCurrentDate"
|
||||
>
|
||||
<IconCalendarCheck :width="16" />
|
||||
{{ t('set_today') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<input
|
||||
ref="input"
|
||||
v-model="value"
|
||||
class="base-input !text-2xl text-center w-full"
|
||||
:required="field.required"
|
||||
type="date"
|
||||
:name="`values[${field.uuid}]`"
|
||||
@focus="$emit('focus')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconCalendarCheck } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'DateStep',
|
||||
components: {
|
||||
IconCalendarCheck
|
||||
},
|
||||
inject: ['t'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value', 'focus'],
|
||||
computed: {
|
||||
value: {
|
||||
set (value) {
|
||||
this.$emit('update:model-value', value)
|
||||
},
|
||||
get () {
|
||||
return this.modelValue
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setCurrentDate () {
|
||||
const inputEl = this.$refs.input
|
||||
|
||||
inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
|
||||
|
||||
inputEl.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -29,7 +29,7 @@
|
||||
{{ message }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
<span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
|
||||
<span class="font-medium">Click to upload</span> or drag and drop files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,7 +55,6 @@ export default {
|
||||
IconCloudUpload,
|
||||
IconInnerShadowTop
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
@@ -142,7 +141,7 @@ export default {
|
||||
|
||||
return await Promise.all(
|
||||
blobs.map((blob) => {
|
||||
return fetch(this.baseUrl + '/api/attachments', {
|
||||
return fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: 'attachments',
|
||||
@@ -167,7 +166,7 @@ export default {
|
||||
formData.append('submitter_slug', this.submitterSlug)
|
||||
formData.append('name', 'attachments')
|
||||
|
||||
return fetch(this.baseUrl + '/api/attachments', {
|
||||
return fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(resp => resp.json()).then((data) => {
|
||||
|
||||
@@ -4,319 +4,261 @@
|
||||
:steps="stepFields"
|
||||
:values="values"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:with-label="!isAnonymousChecboxes"
|
||||
:current-step="currentStepFields"
|
||||
@focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
|
||||
@focus-step="[saveStep(), goToStep($event, false, true)]"
|
||||
/>
|
||||
<button
|
||||
v-if="!isFormVisible"
|
||||
class="btn btn-neutral flex text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
|
||||
@click.prevent="isFormVisible = true"
|
||||
>
|
||||
{{ t('submit_form') }}
|
||||
<IconArrowsDiagonal
|
||||
class="absolute right-0 mr-4"
|
||||
:width="20"
|
||||
:height="20"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
v-show="isFormVisible"
|
||||
id="form_container"
|
||||
class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border-base-200 border p-4 rounded"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
>
|
||||
<button
|
||||
<div>
|
||||
<form
|
||||
v-if="!isCompleted"
|
||||
class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
|
||||
title="Minimize"
|
||||
@click.prevent="isFormVisible = false"
|
||||
ref="form"
|
||||
:action="submitPath"
|
||||
method="post"
|
||||
class="md:mx-16"
|
||||
@submit.prevent="submitStep"
|
||||
>
|
||||
<IconArrowsDiagonalMinimize2
|
||||
:width="20"
|
||||
:height="20"
|
||||
/>
|
||||
</button>
|
||||
<div>
|
||||
<form
|
||||
v-if="!isCompleted"
|
||||
ref="form"
|
||||
:action="submitPath"
|
||||
method="post"
|
||||
class="md:mx-16"
|
||||
@submit.prevent="submitStep"
|
||||
<input
|
||||
type="hidden"
|
||||
name="authenticity_token"
|
||||
:value="authenticityToken"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="authenticity_token"
|
||||
:value="authenticityToken"
|
||||
>
|
||||
<input
|
||||
value="put"
|
||||
name="_method"
|
||||
type="hidden"
|
||||
>
|
||||
<div class="md:mt-4">
|
||||
<div v-if="['cells', 'text'].includes(currentField.type)">
|
||||
<TextStep
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
/>
|
||||
</div>
|
||||
<DateStep
|
||||
v-else-if="currentField.type === 'date'"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
<input
|
||||
value="put"
|
||||
name="_method"
|
||||
type="hidden"
|
||||
>
|
||||
<div class="md:mt-4">
|
||||
<div v-if="['cells', 'text'].includes(currentField.type)">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">(optional)</template>
|
||||
</label>
|
||||
<div
|
||||
v-else
|
||||
class="py-1"
|
||||
/>
|
||||
<div v-else-if="currentField.type === 'select'">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">({{ t('optional') }})</template>
|
||||
</label>
|
||||
<div
|
||||
v-else
|
||||
class="py-1"
|
||||
/>
|
||||
<select
|
||||
<div>
|
||||
<input
|
||||
:id="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
class="base-input !text-2xl w-full"
|
||||
:required="currentField.required"
|
||||
class="select base-input !text-2xl w-full text-center font-normal"
|
||||
:placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
|
||||
type="text"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
@change="values[currentField.uuid] = $event.target.value"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
:selected="!values[currentField.uuid]"
|
||||
>
|
||||
{{ t('select_your_option') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="option in currentField.options"
|
||||
:key="option.uuid"
|
||||
:selected="values[currentField.uuid] == option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else-if="currentField.type === 'radio'">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">({{ t('optional') }})</template>
|
||||
</label>
|
||||
<div class="flex w-full">
|
||||
<div class="space-y-3.5 mx-auto">
|
||||
<div
|
||||
v-for="option in currentField.options"
|
||||
:key="option.uuid"
|
||||
</div>
|
||||
<div v-else-if="currentField.type === 'date'">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">(optional)</template>
|
||||
</label>
|
||||
<div
|
||||
v-else
|
||||
class="py-1"
|
||||
/>
|
||||
<div class="text-center">
|
||||
<input
|
||||
:id="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
class="base-input !text-2xl text-center w-full"
|
||||
:required="currentField.required"
|
||||
type="date"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="currentField.type === 'select'">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">(optional)</template>
|
||||
</label>
|
||||
<div
|
||||
v-else
|
||||
class="py-1"
|
||||
/>
|
||||
<select
|
||||
:id="currentField.uuid"
|
||||
:required="currentField.required"
|
||||
class="select base-input !text-2xl w-full text-center font-normal"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
@change="values[currentField.uuid] = $event.target.value"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
:selected="!values[currentField.uuid]"
|
||||
>
|
||||
Select your option
|
||||
</option>
|
||||
<option
|
||||
v-for="(option, index) in currentField.options"
|
||||
:key="index"
|
||||
:selected="values[currentField.uuid] == option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else-if="currentField.type === 'radio'">
|
||||
<label
|
||||
v-if="currentField.name"
|
||||
:for="currentField.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ currentField.name }}
|
||||
<template v-if="!currentField.required">(optional)</template>
|
||||
</label>
|
||||
<div class="flex w-full">
|
||||
<div class="space-y-3.5 mx-auto">
|
||||
<div
|
||||
v-for="(option, index) in currentField.options"
|
||||
:key="index"
|
||||
>
|
||||
<label
|
||||
:for="currentField.uuid + option"
|
||||
class="flex items-center space-x-3"
|
||||
>
|
||||
<label
|
||||
:for="option.uuid"
|
||||
class="flex items-center space-x-3"
|
||||
<input
|
||||
:id="currentField.uuid + option"
|
||||
v-model="values[currentField.uuid]"
|
||||
type="radio"
|
||||
class="base-radio !h-7 !w-7"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
:value="option"
|
||||
:required="currentField.required"
|
||||
>
|
||||
<input
|
||||
:id="option.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
type="radio"
|
||||
class="base-radio !h-7 !w-7"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
:value="option.value"
|
||||
:required="currentField.required"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{{ option.value }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="text-xl">
|
||||
{{ option }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MultiSelectStep
|
||||
v-else-if="currentField.type === 'multiple'"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
/>
|
||||
<div
|
||||
v-else-if="currentField.type === 'checkbox'"
|
||||
class="flex w-full max-h-44 overflow-y-auto"
|
||||
</div>
|
||||
<MultiSelectStep
|
||||
v-else-if="currentField.type === 'multiple'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
/>
|
||||
<div
|
||||
v-else-if="currentField.type === 'checkbox'"
|
||||
class="flex w-full"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="cast_boolean"
|
||||
value="true"
|
||||
>
|
||||
<div
|
||||
class="space-y-3.5 mx-auto"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="cast_boolean"
|
||||
value="true"
|
||||
>
|
||||
<div
|
||||
class="space-y-3.5 mx-auto"
|
||||
v-for="(field, index) in currentStepFields"
|
||||
:key="field.uuid"
|
||||
>
|
||||
<template v-if="isAnonymousChecboxes">
|
||||
<span class="text-xl">
|
||||
{{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
|
||||
</span>
|
||||
<label
|
||||
:for="field.uuid"
|
||||
class="flex items-center space-x-3"
|
||||
>
|
||||
<input
|
||||
v-for="field in currentStepFields"
|
||||
:key="field.uuid"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
:value="!!values[field.uuid]"
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(field, index) in currentStepFields"
|
||||
:key="field.uuid"
|
||||
<input
|
||||
:id="field.uuid"
|
||||
type="checkbox"
|
||||
class="base-checkbox !h-7 !w-7"
|
||||
:checked="!!values[field.uuid]"
|
||||
@click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
|
||||
>
|
||||
<label
|
||||
:for="field.uuid"
|
||||
class="flex items-center space-x-3"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
:value="!!values[field.uuid]"
|
||||
>
|
||||
<input
|
||||
:id="field.uuid"
|
||||
type="checkbox"
|
||||
class="base-checkbox !h-7 !w-7"
|
||||
:oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
|
||||
:onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
|
||||
:required="field.required"
|
||||
:checked="!!values[field.uuid]"
|
||||
@click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{{ field.name || field.type + ' ' + (index + 1) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<span class="text-xl">
|
||||
{{ currentField.name || currentField.type + ' ' + (index + 1) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<ImageStep
|
||||
v-else-if="currentField.type === 'image'"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
|
||||
/>
|
||||
<SignatureStep
|
||||
v-else-if="currentField.type === 'signature'"
|
||||
ref="currentStep"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:previous-value="previousSignatureValue"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="attachments.push($event)"
|
||||
@start="$refs.areas.scrollIntoField(currentField)"
|
||||
@minimize="isFormVisible = false"
|
||||
/>
|
||||
<InitialsStep
|
||||
v-else-if="currentField.type === 'initials'"
|
||||
ref="currentStep"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:previous-value="previousInitialsValue"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="attachments.push($event)"
|
||||
@start="$refs.areas.scrollIntoField(currentField)"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
@minimize="isFormVisible = false"
|
||||
/>
|
||||
<AttachmentStep
|
||||
v-else-if="currentField.type === 'file'"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:field="currentField"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
|
||||
/>
|
||||
<PhoneStep
|
||||
v-else-if="currentField.type === 'phone'"
|
||||
ref="currentStep"
|
||||
:key="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:default-value="submitter.phone"
|
||||
:submitter-slug="submitterSlug"
|
||||
@focus="$refs.areas.scrollIntoField(currentField)"
|
||||
@submit="submitStep"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-6 md:mt-8">
|
||||
<button
|
||||
ref="submitButton"
|
||||
type="submit"
|
||||
class="base-button w-full flex justify-center"
|
||||
:disabled="isButtonDisabled"
|
||||
>
|
||||
<span class="flex">
|
||||
<IconInnerShadowTop
|
||||
v-if="isSubmitting"
|
||||
class="mr-1 animate-spin"
|
||||
/>
|
||||
<span v-if="stepFields.length === currentStep + 1">
|
||||
{{ t('submit') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t('next') }}
|
||||
</span><span
|
||||
v-if="isSubmitting"
|
||||
class="w-6 flex justify-start mr-1"
|
||||
><span>...</span></span>
|
||||
<ImageStep
|
||||
v-else-if="currentField.type === 'image'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
|
||||
/>
|
||||
<SignatureStep
|
||||
v-else-if="currentField.type === 'signature'"
|
||||
ref="currentStep"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="attachments.push($event)"
|
||||
/>
|
||||
<AttachmentStep
|
||||
v-else-if="currentField.type === 'file'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:field="currentField"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submitter-slug="submitterSlug"
|
||||
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-6 md:mt-8">
|
||||
<button
|
||||
type="submit"
|
||||
class="base-button w-full flex justify-center"
|
||||
:disabled="isButtonDisabled"
|
||||
>
|
||||
<span class="flex">
|
||||
<IconInnerShadowTop
|
||||
v-if="isSubmitting"
|
||||
class="mr-1 animate-spin"
|
||||
/>
|
||||
<span v-if="stepFields.length === currentStep + 1">
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="showFillAllRequiredFields"
|
||||
class="text-center mt-1"
|
||||
>
|
||||
{{ t('please_fill_all_required_fields') }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<FormCompleted
|
||||
v-else
|
||||
:is-demo="isDemo"
|
||||
:attribution="attribution"
|
||||
:completed-button="completedButton"
|
||||
:with-confetti="withConfetti"
|
||||
:can-send-email="canSendEmail && !!submitter.email"
|
||||
:submitter-slug="submitterSlug"
|
||||
/>
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center mt-5 mb-1">
|
||||
<a
|
||||
v-for="(step, index) in stepFields"
|
||||
:key="step[0].uuid"
|
||||
href="#"
|
||||
class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
|
||||
:class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
|
||||
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>
|
||||
Next
|
||||
</span><span
|
||||
v-if="isSubmitting"
|
||||
class="w-6 flex justify-start mr-1"
|
||||
><span>...</span></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<FormCompleted
|
||||
v-else
|
||||
:can-send-email="canSendEmail"
|
||||
:submitter-slug="submitterSlug"
|
||||
/>
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center mt-5 mb-1">
|
||||
<a
|
||||
v-for="(step, index) in stepFields"
|
||||
:key="step[0].uuid"
|
||||
href="#"
|
||||
class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
|
||||
:class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
|
||||
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -326,15 +268,10 @@
|
||||
import FieldAreas from './areas'
|
||||
import ImageStep from './image_step'
|
||||
import SignatureStep from './signature_step'
|
||||
import InitialsStep from './initials_step'
|
||||
import AttachmentStep from './attachment_step'
|
||||
import MultiSelectStep from './multi_select_step'
|
||||
import PhoneStep from './phone_step'
|
||||
import TextStep from './text_step'
|
||||
import DateStep from './date_step'
|
||||
import FormCompleted from './completed'
|
||||
import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
|
||||
import { t } from './i18n'
|
||||
import { IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'SubmissionForm',
|
||||
@@ -343,25 +280,13 @@ export default {
|
||||
ImageStep,
|
||||
SignatureStep,
|
||||
AttachmentStep,
|
||||
InitialsStep,
|
||||
MultiSelectStep,
|
||||
IconInnerShadowTop,
|
||||
DateStep,
|
||||
IconArrowsDiagonal,
|
||||
TextStep,
|
||||
PhoneStep,
|
||||
IconArrowsDiagonalMinimize2,
|
||||
FormCompleted
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
baseUrl: this.baseUrl,
|
||||
t: this.t
|
||||
}
|
||||
},
|
||||
props: {
|
||||
submitter: {
|
||||
type: Object,
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
canSendEmail: {
|
||||
@@ -369,28 +294,15 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
submitterUuid: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
attachments: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
onComplete: {
|
||||
type: Function,
|
||||
required: false,
|
||||
default () {
|
||||
return () => {}
|
||||
}
|
||||
},
|
||||
withConfetti: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
baseUrl: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
@@ -398,96 +310,40 @@ export default {
|
||||
},
|
||||
authenticityToken: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
required: true
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
allowToSkip: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
goToLast: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
isDemo: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
attribution: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
completedButton: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isCompleted: false,
|
||||
isFormVisible: true,
|
||||
showFillAllRequiredFields: false,
|
||||
currentStep: 0,
|
||||
isSubmitting: false,
|
||||
submittedValues: {},
|
||||
recalculateButtonDisabledKey: ''
|
||||
isSubmitting: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStepFields () {
|
||||
return this.stepFields[this.currentStep]
|
||||
},
|
||||
submitterSlug () {
|
||||
return this.submitter.slug
|
||||
},
|
||||
previousSignatureValue () {
|
||||
const signatureField = [...this.fields].reverse().find((field) => field.type === 'signature' && !!this.values[field.uuid])
|
||||
|
||||
return this.values[signatureField?.uuid]
|
||||
},
|
||||
previousInitialsValue () {
|
||||
const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
|
||||
|
||||
return this.values[initialsField?.uuid]
|
||||
},
|
||||
isAnonymousChecboxes () {
|
||||
return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name) && this.currentStepFields.length > 4
|
||||
},
|
||||
isButtonDisabled () {
|
||||
if (this.recalculateButtonDisabledKey) {
|
||||
return this.isSubmitting ||
|
||||
return this.isSubmitting ||
|
||||
(this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
|
||||
(this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted) ||
|
||||
(this.currentField.required && this.currentField.type === 'initials' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isInitialsStarted)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
(this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
|
||||
},
|
||||
currentField () {
|
||||
return this.currentStepFields[0]
|
||||
},
|
||||
stepFields () {
|
||||
return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
|
||||
return this.fields.reduce((acc, f) => {
|
||||
const prevStep = acc[acc.length - 1]
|
||||
|
||||
if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
|
||||
@@ -511,209 +367,69 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.submittedValues = JSON.parse(JSON.stringify(this.values))
|
||||
|
||||
this.fields.forEach((field) => {
|
||||
if (field.default_value && !field.readonly) {
|
||||
this.values[field.uuid] = field.default_value
|
||||
}
|
||||
})
|
||||
|
||||
if (this.goToLast) {
|
||||
const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
|
||||
const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
|
||||
|
||||
const indexesList = [this.stepFields.length - 1]
|
||||
|
||||
if (requiredEmptyStepIndex !== -1) {
|
||||
indexesList.push(requiredEmptyStepIndex)
|
||||
}
|
||||
|
||||
if (lastFilledStepIndex !== -1) {
|
||||
indexesList.push(lastFilledStepIndex)
|
||||
}
|
||||
|
||||
this.currentStep = Math.min(...indexesList)
|
||||
}
|
||||
this.currentStep = Math.min(
|
||||
this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
|
||||
this.stepFields.length - 1
|
||||
)
|
||||
|
||||
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
||||
this.$nextTick(() => {
|
||||
const root = this.$root.$el.parentNode.getRootNode()
|
||||
const scrollbox = root.getElementById('scrollbox')
|
||||
const parent = root.body || root.querySelector('div')
|
||||
document.body.style.overflow = 'hidden'
|
||||
|
||||
parent.style.overflow = 'hidden'
|
||||
|
||||
scrollbox.classList.add('h-full', 'overflow-y-auto')
|
||||
scrollbox.parentNode.classList.add('h-screen', 'overflow-y-auto')
|
||||
scrollbox.parentNode.style.maxHeight = '-webkit-fill-available'
|
||||
})
|
||||
window.scrollbox.classList.add('h-full', 'overflow-y-auto')
|
||||
window.scrollbox.parentNode.classList.add('h-screen', 'overflow-y-auto')
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.recalculateButtonDisabledKey = Math.random()
|
||||
|
||||
Promise.all([
|
||||
this.maybeTrackEmailClick(),
|
||||
this.maybeTrackSmsClick()
|
||||
]).finally(() => {
|
||||
this.trackViewForm()
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
t,
|
||||
maybeTrackEmailClick () {
|
||||
const queryParams = new URLSearchParams(window.location.search)
|
||||
|
||||
if (queryParams.has('t')) {
|
||||
const t = queryParams.get('t')
|
||||
|
||||
queryParams.delete('t')
|
||||
const newUrl = [window.location.pathname, queryParams.toString()].filter(Boolean).join('?')
|
||||
window.history.replaceState({}, document.title, newUrl)
|
||||
|
||||
return fetch(this.baseUrl + '/api/submitter_email_clicks', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
t,
|
||||
submitter_slug: this.submitterSlug
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise.resolve({})
|
||||
}
|
||||
},
|
||||
maybeTrackSmsClick () {
|
||||
const queryParams = new URLSearchParams(window.location.search)
|
||||
|
||||
if (queryParams.has('c')) {
|
||||
const c = queryParams.get('c')
|
||||
|
||||
queryParams.delete('c')
|
||||
const newUrl = [window.location.pathname, queryParams.toString()].filter(Boolean).join('?')
|
||||
window.history.replaceState({}, document.title, newUrl)
|
||||
|
||||
return fetch(this.baseUrl + '/api/submitter_sms_clicks', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
c,
|
||||
submitter_slug: this.submitterSlug
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise.resolve({})
|
||||
}
|
||||
},
|
||||
trackViewForm () {
|
||||
fetch(this.baseUrl + '/api/submitter_form_views', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug
|
||||
})
|
||||
})
|
||||
},
|
||||
goToStep (step, scrollToArea = false, clickUpload = false) {
|
||||
this.currentStep = this.stepFields.indexOf(step)
|
||||
this.showFillAllRequiredFields = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.recalculateButtonDisabledKey = Math.random()
|
||||
|
||||
if (scrollToArea) {
|
||||
this.$refs.areas.scrollIntoField(step[0])
|
||||
}
|
||||
|
||||
this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
|
||||
|
||||
if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
|
||||
if (clickUpload && !this.values[this.currentField.uuid]) {
|
||||
this.$refs.form.querySelector('input[type="file"]')?.click()
|
||||
}
|
||||
})
|
||||
},
|
||||
saveStep (formData) {
|
||||
const currentFieldUuid = this.currentField.uuid
|
||||
|
||||
if (this.isCompleted) {
|
||||
return Promise.resolve({})
|
||||
} else {
|
||||
return fetch(this.baseUrl + this.submitPath, {
|
||||
return fetch(this.submitPath, {
|
||||
method: 'POST',
|
||||
body: formData || new FormData(this.$refs.form)
|
||||
}).then((response) => {
|
||||
if (response.status === 200) {
|
||||
this.submittedValues[currentFieldUuid] = this.values[currentFieldUuid]
|
||||
}
|
||||
|
||||
return response
|
||||
})
|
||||
}
|
||||
},
|
||||
async submitStep () {
|
||||
this.isSubmitting = true
|
||||
|
||||
const stepPromise = ['signature', 'phone', 'initials'].includes(this.currentField.type)
|
||||
const stepPromise = this.currentField.type === 'signature'
|
||||
? this.$refs.currentStep.submit
|
||||
: () => Promise.resolve({})
|
||||
|
||||
stepPromise().then(async () => {
|
||||
const emptyRequiredField = this.stepFields.find((fields, index) => {
|
||||
return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && !this.submittedValues[fields[0].uuid]
|
||||
})
|
||||
await stepPromise()
|
||||
|
||||
const formData = new FormData(this.$refs.form)
|
||||
const isLastStep = this.currentStep === this.stepFields.length - 1
|
||||
const formData = new FormData(this.$refs.form)
|
||||
|
||||
if (isLastStep && !emptyRequiredField) {
|
||||
formData.append('completed', 'true')
|
||||
if (this.currentStep === this.stepFields.length - 1) {
|
||||
formData.append('completed', 'true')
|
||||
}
|
||||
|
||||
this.saveStep(formData).then(response => {
|
||||
const nextStep = this.stepFields[this.currentStep + 1]
|
||||
|
||||
if (nextStep) {
|
||||
this.goToStep(this.stepFields[this.currentStep + 1], true)
|
||||
} else {
|
||||
this.isCompleted = true
|
||||
}
|
||||
|
||||
await this.saveStep(formData).then(async (response) => {
|
||||
if (response.status === 422) {
|
||||
const data = await response.json()
|
||||
|
||||
alert(data.error || 'Value is invalid')
|
||||
|
||||
return Promise.reject(new Error(data.error))
|
||||
}
|
||||
|
||||
if (isLastStep) {
|
||||
this.isSecondWalkthrough = true
|
||||
}
|
||||
|
||||
const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[this.currentStep + 1]
|
||||
|
||||
if (nextStep) {
|
||||
this.goToStep(nextStep, true)
|
||||
|
||||
if (emptyRequiredField === nextStep) {
|
||||
this.showFillAllRequiredFields = true
|
||||
}
|
||||
} else {
|
||||
this.isCompleted = true
|
||||
|
||||
const respData = await response.text()
|
||||
|
||||
if (respData) {
|
||||
this.onComplete(JSON.parse(respData))
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Error submitting form:', error)
|
||||
}).finally(() => {
|
||||
this.isSubmitting = false
|
||||
})
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
console.error('Error submitting form:', error)
|
||||
}).finally(() => {
|
||||
this.isSubmitting = false
|
||||
})
|
||||
|
||||
@@ -1,350 +0,0 @@
|
||||
const en = {
|
||||
submit_form: 'Submit Form',
|
||||
type_here: 'Type here',
|
||||
optional: 'optional',
|
||||
select_your_option: 'Select your option',
|
||||
complete_hightlighted_checkboxes_and_click: 'Complete hightlighted checkboxes and click',
|
||||
submit: 'submit',
|
||||
next: 'next',
|
||||
click_to_upload: 'Click to upload',
|
||||
or_drag_and_drop_files: 'or drag and drop files',
|
||||
send_copy_via_email: 'Send copy via email',
|
||||
download: 'Download',
|
||||
signature: 'Signature',
|
||||
initials: 'Initials',
|
||||
clear: 'Clear',
|
||||
redraw: 'Redraw',
|
||||
draw_initials: 'Draw initials',
|
||||
type_signature_here: 'Type signature here',
|
||||
type_initial_here: 'Type initials here',
|
||||
form_has_been_completed: 'Form has been completed!',
|
||||
create_a_free_account: 'Create a Free Account',
|
||||
signed_with: 'Signed with',
|
||||
please_check_the_box_to_continue: 'Please check the box to continue',
|
||||
open_source_documents_software: 'open source documents software',
|
||||
verified_phone_number: 'Verify Phone Number',
|
||||
use_international_format: 'Use internatioanl format: +1xxx',
|
||||
six_digits_code: '6-digit code',
|
||||
change_phone_number: 'Change phone number',
|
||||
sending: 'Sending...',
|
||||
resend_code: 'Re-send code',
|
||||
verification_code_has_been_resent: 'Verification code has been re-sent via SMS',
|
||||
please_fill_all_required_fields: 'Please fill all required fields',
|
||||
set_today: 'Set Today',
|
||||
toggle_multiline_text: 'Toggle Multiline Text',
|
||||
date: 'Date',
|
||||
email_has_been_sent: 'Email has been sent'
|
||||
}
|
||||
|
||||
const es = {
|
||||
submit_form: 'Enviar Formulario',
|
||||
type_here: 'Escribe aquí',
|
||||
optional: 'opcional',
|
||||
select_your_option: 'Selecciona tu opción',
|
||||
complete_hightlighted_checkboxes_and_click: 'Completa las casillas resaltadas y haz clic',
|
||||
submit: 'enviar',
|
||||
next: 'siguiente',
|
||||
click_to_upload: 'Haz clic para cargar',
|
||||
or_drag_and_drop_files: 'o arrastra y suelta archivos',
|
||||
send_copy_via_email: 'Enviar copia por correo electrónico',
|
||||
download: 'Descargar',
|
||||
signature: 'Firma',
|
||||
initials: 'Iniciales',
|
||||
clear: 'Borrar',
|
||||
redraw: 'Redibujar',
|
||||
draw_initials: 'Dibujar iniciales',
|
||||
type_signature_here: 'Escribe la firma aquí',
|
||||
type_initial_here: 'Escribe las iniciales aquí',
|
||||
form_has_been_completed: '¡El formulario ha sido completado!',
|
||||
create_a_free_account: 'Crear una Cuenta Gratuita',
|
||||
signed_with: 'Firmado con',
|
||||
please_check_the_box_to_continue: 'Por favor marque la casilla para continuar',
|
||||
open_source_documents_software: 'software de documentos de código abierto',
|
||||
verified_phone_number: 'Verificar número de teléfono',
|
||||
use_international_format: 'Usar formato internacional: +1xxx',
|
||||
six_digits_code: 'Código de 6 dígitos',
|
||||
change_phone_number: 'Cambiar número de teléfono',
|
||||
sending: 'Enviando...',
|
||||
resend_code: 'Reenviar código',
|
||||
verification_code_has_been_resent: 'El código de verificación ha sido reenviado por SMS',
|
||||
please_fill_all_required_fields: 'Por favor, complete todos los campos obligatorios',
|
||||
set_today: 'Establecer Hoy',
|
||||
date: 'Fecha',
|
||||
toggle_multiline_text: 'Alternar Texto Multilínea',
|
||||
email_has_been_sent: 'El correo electrónico ha sido enviado'
|
||||
}
|
||||
|
||||
const it = {
|
||||
submit_form: 'Invia Modulo',
|
||||
type_here: 'Digita qui',
|
||||
optional: 'opzionale',
|
||||
select_your_option: 'Seleziona la tua opzione',
|
||||
complete_hightlighted_checkboxes_and_click: 'Completa le caselle evidenziate e fai clic',
|
||||
submit: 'invia',
|
||||
next: 'avanti',
|
||||
click_to_upload: 'Clicca per caricare',
|
||||
or_drag_and_drop_files: 'oppure trascina e rilascia i file',
|
||||
send_copy_via_email: 'Invia copia via email',
|
||||
download: 'Scarica',
|
||||
signature: 'Firma',
|
||||
initials: 'Iniziali',
|
||||
clear: 'Cancella',
|
||||
redraw: 'Ridisegna',
|
||||
draw_initials: 'Disegna iniziali',
|
||||
type_signature_here: 'Scrivi la firma qui',
|
||||
type_initial_here: 'Scrivi le iniziali qui',
|
||||
form_has_been_completed: 'Il modulo è stato completato!',
|
||||
create_a_free_account: 'Crea un Account Gratuito',
|
||||
signed_with: 'Firmato con',
|
||||
please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare',
|
||||
open_source_documents_software: 'software di documenti open source',
|
||||
verified_phone_number: 'Verifica numero di telefono',
|
||||
use_international_format: 'Usa formato internazionale: +1xxx',
|
||||
six_digits_code: 'Codice a 6 cifre',
|
||||
change_phone_number: 'Cambia numero di telefono',
|
||||
sending: 'Invio in corso...',
|
||||
resend_code: 'Rinvia codice',
|
||||
verification_code_has_been_resent: 'Il codice di verifica è stato rinviato tramite SMS',
|
||||
please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
|
||||
set_today: 'Imposta Oggi',
|
||||
date: 'Data',
|
||||
toggle_multiline_text: 'Attiva Testo Multilinea',
|
||||
email_has_been_sent: "L'email è stata inviata"
|
||||
}
|
||||
|
||||
const de = {
|
||||
submit_form: 'Formular absenden',
|
||||
type_here: 'Hier eingeben',
|
||||
optional: 'optional',
|
||||
select_your_option: 'Wähle deine Option',
|
||||
complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
|
||||
submit: 'absenden',
|
||||
next: 'weiter',
|
||||
click_to_upload: 'Klicken zum Hochladen',
|
||||
or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
|
||||
send_copy_via_email: 'Kopie per E-Mail senden',
|
||||
download: 'Herunterladen',
|
||||
signature: 'Unterschrift',
|
||||
initials: 'Initialen',
|
||||
clear: 'Löschen',
|
||||
redraw: 'Neu zeichnen',
|
||||
draw_initials: 'Initialen zeichnen',
|
||||
type_signature_here: 'Unterschrift hier eingeben',
|
||||
type_initial_here: 'Initialen hier eingeben',
|
||||
form_has_been_completed: 'Formular wurde ausgefüllt!',
|
||||
create_a_free_account: 'Kostenloses Konto erstellen',
|
||||
signed_with: 'Unterschrieben mit',
|
||||
please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren',
|
||||
open_source_documents_software: 'Open-Source-Dokumentensoftware',
|
||||
verified_phone_number: 'Telefonnummer überprüfen',
|
||||
use_international_format: 'Internationales Format verwenden: +1xxx',
|
||||
six_digits_code: '6-stelliger Code',
|
||||
change_phone_number: 'Telefonnummer ändern',
|
||||
sending: 'Senden...',
|
||||
resend_code: 'Code erneut senden',
|
||||
verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
|
||||
please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
|
||||
set_today: 'Heute einstellen',
|
||||
date: 'Datum',
|
||||
toggle_multiline_text: 'Mehrzeiligen Text umschalten',
|
||||
email_has_been_sent: 'Die E-Mail wurde gesendet'
|
||||
}
|
||||
|
||||
const fr = {
|
||||
submit_form: 'Envoyer le Formulaire',
|
||||
type_here: 'Tapez ici',
|
||||
optional: 'facultatif',
|
||||
select_your_option: 'Sélectionnez votre option',
|
||||
complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
|
||||
submit: 'envoyer',
|
||||
next: 'suivant',
|
||||
click_to_upload: 'Cliquez pour télécharger',
|
||||
or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
|
||||
send_copy_via_email: 'Envoyer une copie par e-mail',
|
||||
download: 'Télécharger',
|
||||
signature: 'Signature',
|
||||
initials: 'Initiales',
|
||||
clear: 'Effacer',
|
||||
redraw: 'Redessiner',
|
||||
draw_initials: 'Dessiner les initiales',
|
||||
type_signature_here: 'Tapez la signature ici',
|
||||
type_initial_here: 'Tapez les initiales ici',
|
||||
form_has_been_completed: 'Le formulaire a été complété !',
|
||||
create_a_free_account: 'Créer un Compte Gratuit',
|
||||
signed_with: 'Signé avec',
|
||||
please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer',
|
||||
open_source_documents_software: 'logiciel de documents open source',
|
||||
verified_phone_number: 'Vérifier le numéro de téléphone',
|
||||
use_international_format: 'Utiliser le format international : +1xxx',
|
||||
six_digits_code: 'Code à 6 chiffres',
|
||||
change_phone_number: 'Changer le numéro de téléphone',
|
||||
sending: 'Envoi en cours...',
|
||||
resend_code: 'Renvoyer le code',
|
||||
verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
|
||||
please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
|
||||
set_today: "Définir Aujourd'hui",
|
||||
date: 'Date',
|
||||
toggle_multiline_text: 'Basculer le Texte Multiligne',
|
||||
email_has_been_sent: "L'email a été envoyé"
|
||||
}
|
||||
|
||||
const pl = {
|
||||
submit_form: 'Wyślij Formularz',
|
||||
type_here: 'Wpisz tutaj',
|
||||
optional: 'opcjonalny',
|
||||
select_your_option: 'Wybierz swoją opcję',
|
||||
complete_hightlighted_checkboxes_and_click: 'Wypełnij zaznaczone pola wyboru i kliknij',
|
||||
submit: 'wyślij',
|
||||
next: 'dalej',
|
||||
click_to_upload: 'Kliknij, aby przesłać',
|
||||
or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
|
||||
send_copy_via_email: 'Wyślij kopię drogą mailową',
|
||||
download: 'Pobierz',
|
||||
signature: 'Podpis',
|
||||
initials: 'Inicjały',
|
||||
clear: 'Wyczyść',
|
||||
redraw: 'Przerysuj',
|
||||
draw_initials: 'Narysuj inicjały',
|
||||
type_signature_here: 'Wpisz podpis tutaj',
|
||||
type_initial_here: 'Wpisz inicjały tutaj',
|
||||
form_has_been_completed: 'Formularz został wypełniony!',
|
||||
create_a_free_account: 'Utwórz darmowe konto',
|
||||
signed_with: 'Podpisane za pomocą',
|
||||
please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować',
|
||||
open_source_documents_software: 'oprogramowanie do dokumentów open source',
|
||||
verified_phone_number: 'Zweryfikuj numer telefonu',
|
||||
use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
|
||||
six_digits_code: '6-cyfrowy kod',
|
||||
change_phone_number: 'Zmień numer telefonu',
|
||||
sending: 'Wysyłanie...',
|
||||
resend_code: 'Ponownie wyślij kod',
|
||||
verification_code_has_been_resent: 'Kod weryfikacyjny został ponownie wysłany',
|
||||
please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
|
||||
set_today: 'Ustaw Dziś',
|
||||
date: 'Data',
|
||||
toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
|
||||
email_has_been_sent: 'E-mail został wysłany'
|
||||
}
|
||||
|
||||
const uk = {
|
||||
submit_form: 'Надіслати Форму',
|
||||
type_here: 'Введіть тут',
|
||||
optional: 'необов’язково',
|
||||
select_your_option: 'Виберіть варіант',
|
||||
complete_hightlighted_checkboxes_and_click: 'Заповніть позначені прапорці та натисніть',
|
||||
submit: 'надіслати',
|
||||
next: 'далі',
|
||||
click_to_upload: 'Клацніть, щоб завантажити',
|
||||
or_drag_and_drop_files: 'або перетягніть файли сюди',
|
||||
send_copy_via_email: 'Надіслати копію електронною поштою',
|
||||
download: 'Завантажити',
|
||||
signature: 'Підпис',
|
||||
initials: 'Ініціали',
|
||||
clear: 'Очистити',
|
||||
redraw: 'Перемалювати',
|
||||
draw_initials: 'Намалювати ініціали',
|
||||
type_signature_here: 'Введіть підпис тут',
|
||||
type_initial_here: 'Введіть ініціали тут',
|
||||
form_has_been_completed: 'Форму заповнено!',
|
||||
create_a_free_account: 'Створити безкоштовний обліковий запис',
|
||||
signed_with: 'Підписано за допомогою',
|
||||
please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити',
|
||||
open_source_documents_software: 'відкритий програмний засіб для документів',
|
||||
verified_phone_number: 'Підтвердіть номер телефону',
|
||||
use_international_format: 'Використовуйте міжнародний формат: +1xxx',
|
||||
six_digits_code: '6-значний код',
|
||||
change_phone_number: 'Змінити номер телефону',
|
||||
sending: 'Надсилаю...',
|
||||
resend_code: 'Повторно відправити код',
|
||||
verification_code_has_been_resent: 'Код підтвердження був повторно надісланий',
|
||||
please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
|
||||
set_today: 'Задати Сьогодні',
|
||||
date: 'Дата',
|
||||
toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
|
||||
email_has_been_sent: 'Електронний лист був відправлений'
|
||||
}
|
||||
|
||||
const cs = {
|
||||
submit_form: 'Odeslat formulář',
|
||||
type_here: 'Zadejte zde',
|
||||
optional: 'volitelné',
|
||||
select_your_option: 'Vyberte svou volbu',
|
||||
complete_hightlighted_checkboxes_and_click: 'Označte zvýrazněné zaškrtávací políčka a klikněte na',
|
||||
submit: 'odeslat',
|
||||
next: 'další',
|
||||
click_to_upload: 'Klikněte pro nahrání',
|
||||
or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
|
||||
send_copy_via_email: 'Odeslat kopii e-mailem',
|
||||
download: 'Stáhnout',
|
||||
signature: 'Podpis',
|
||||
initials: 'Iniciály',
|
||||
clear: 'Smazat',
|
||||
redraw: 'Překreslit',
|
||||
draw_initials: 'Nakreslit iniciály',
|
||||
type_signature_here: 'Sem zadejte podpis',
|
||||
type_initial_here: 'Sem zadejte iniciály',
|
||||
form_has_been_completed: 'Formulář byl dokončen!',
|
||||
create_a_free_account: 'Vytvořit bezplatný účet',
|
||||
signed_with: 'Podepsáno pomocí',
|
||||
please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování',
|
||||
open_source_documents_software: 'open source software pro dokumenty',
|
||||
verified_phone_number: 'Ověřte telefonní číslo',
|
||||
use_international_format: 'Použijte mezinárodní formát: +1xxx',
|
||||
six_digits_code: '6-místný kód',
|
||||
change_phone_number: 'Změnit telefonní číslo',
|
||||
sending: 'Odesílání...',
|
||||
resend_code: 'Znovu odeslat kód',
|
||||
verification_code_has_been_resent: 'Ověřovací kód byl znovu odeslán',
|
||||
please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
|
||||
set_today: 'Nastavit Dnes',
|
||||
date: 'Datum',
|
||||
toggle_multiline_text: 'Přepnout Víceřádkový Text',
|
||||
email_has_been_sent: 'E-mail byl odeslán'
|
||||
}
|
||||
|
||||
const pt = {
|
||||
submit_form: 'Enviar Formulário',
|
||||
type_here: 'Digite aqui',
|
||||
optional: 'opcional',
|
||||
select_your_option: 'Selecione sua opção',
|
||||
complete_hightlighted_checkboxes_and_click: 'Complete as caixas de seleção destacadas e clique',
|
||||
submit: 'enviar',
|
||||
next: 'próximo',
|
||||
click_to_upload: 'Clique para fazer o upload',
|
||||
or_drag_and_drop_files: 'ou arraste e solte arquivos',
|
||||
send_copy_via_email: 'Enviar cópia por e-mail',
|
||||
download: 'Baixar',
|
||||
signature: 'Assinatura',
|
||||
initials: 'Iniciais',
|
||||
clear: 'Limpar',
|
||||
redraw: 'Redesenhar',
|
||||
draw_initials: 'Desenhar iniciais',
|
||||
type_signature_here: 'Digite a assinatura aqui',
|
||||
type_initial_here: 'Digite as iniciais aqui',
|
||||
form_has_been_completed: 'O formulário foi concluído!',
|
||||
create_a_free_account: 'Criar uma Conta Gratuita',
|
||||
signed_with: 'Assinado com',
|
||||
please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar',
|
||||
open_source_documents_software: 'software de documentos de código aberto',
|
||||
verified_phone_number: 'Verificar Número de Telefone',
|
||||
use_international_format: 'Use formato internacional: +1xxx',
|
||||
six_digits_code: 'Código de 6 dígitos',
|
||||
change_phone_number: 'Alterar número de telefone',
|
||||
sending: 'Enviando...',
|
||||
resend_code: 'Reenviar código',
|
||||
verification_code_has_been_resent: 'O código de verificação foi reenviado via SMS',
|
||||
please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
|
||||
set_today: 'Definir Hoje',
|
||||
date: 'Data',
|
||||
toggle_multiline_text: 'Alternar Texto Multilinha',
|
||||
email_has_been_sent: 'Email enviado'
|
||||
}
|
||||
|
||||
const i18n = { en, es, it, de, fr, pl, uk, cs, pt }
|
||||
|
||||
const browserLanguage = (navigator.language || navigator.userLanguage || 'en').split('-')[0]
|
||||
|
||||
const t = (key) => i18n[browserLanguage]?.[key] || i18n.en[key] || key
|
||||
|
||||
export default i18n
|
||||
export { t }
|
||||
@@ -1,269 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center w-full mb-2">
|
||||
<label
|
||||
class="label text-2xl"
|
||||
>{{ field.name || t('initials') }}</label>
|
||||
<div class="space-x-2 flex">
|
||||
<span
|
||||
class="tooltip"
|
||||
:data-tip="t('draw_initials')"
|
||||
>
|
||||
<a
|
||||
id="type_text_button"
|
||||
href="#"
|
||||
class="btn btn-sm btn-circle"
|
||||
:class="{ 'btn-neutral': isDrawInitials, 'btn-outline': !isDrawInitials }"
|
||||
@click.prevent="toggleTextInput"
|
||||
>
|
||||
<IconSignature :width="16" />
|
||||
</a>
|
||||
</span>
|
||||
<a
|
||||
v-if="modelValue || computedPreviousValue"
|
||||
href="#"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="remove"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
{{ t('clear') }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
href="#"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="clear"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
{{ t('clear') }}
|
||||
</a>
|
||||
<a
|
||||
title="Minimize"
|
||||
href="#"
|
||||
class="py-1.5 inline md:hidden"
|
||||
@click.prevent="$emit('minimize')"
|
||||
>
|
||||
<IconArrowsDiagonalMinimize2
|
||||
:width="20"
|
||||
:height="20"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
:value="modelValue || computedPreviousValue"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
>
|
||||
<img
|
||||
v-if="modelValue || computedPreviousValue"
|
||||
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
|
||||
class="mx-auto bg-white border border-base-300 rounded max-h-72"
|
||||
>
|
||||
<canvas
|
||||
v-show="!modelValue && !computedPreviousValue"
|
||||
ref="canvas"
|
||||
class="bg-white border border-base-300 rounded"
|
||||
/>
|
||||
<input
|
||||
v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
|
||||
id="initials_text_input"
|
||||
ref="textInput"
|
||||
class="base-input !text-2xl w-full mt-6 text-center"
|
||||
:required="field.required && !isInitialsStarted"
|
||||
:placeholder="`${t('type_initial_here')}...`"
|
||||
type="text"
|
||||
@focus="$emit('focus')"
|
||||
@input="updateWrittenInitials"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cropCanvasAndExportToPNG } from './crop_canvas'
|
||||
import { IconReload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
|
||||
import SignaturePad from 'signature_pad'
|
||||
|
||||
export default {
|
||||
name: 'InitialsStep',
|
||||
components: {
|
||||
IconReload,
|
||||
IconSignature,
|
||||
IconArrowsDiagonalMinimize2
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
previousValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value', 'start', 'minimize', 'focus'],
|
||||
data () {
|
||||
return {
|
||||
isInitialsStarted: !!this.previousValue,
|
||||
isUsePreviousValue: true,
|
||||
isDrawInitials: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedPreviousValue () {
|
||||
if (this.isUsePreviousValue) {
|
||||
return this.previousValue
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.canvas) {
|
||||
this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
|
||||
this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 5
|
||||
}
|
||||
|
||||
this.$refs.textInput?.focus()
|
||||
})
|
||||
|
||||
if (this.isDirectUpload) {
|
||||
import('@rails/activestorage')
|
||||
}
|
||||
|
||||
if (this.$refs.canvas) {
|
||||
this.pad = new SignaturePad(this.$refs.canvas)
|
||||
|
||||
this.pad.addEventListener('beginStroke', () => {
|
||||
this.isInitialsStarted = true
|
||||
|
||||
this.$emit('start')
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remove () {
|
||||
this.$emit('update:model-value', '')
|
||||
|
||||
this.isUsePreviousValue = false
|
||||
this.isInitialsStarted = false
|
||||
},
|
||||
clear () {
|
||||
this.pad.clear()
|
||||
|
||||
this.isInitialsStarted = false
|
||||
|
||||
if (this.$refs.textInput) {
|
||||
this.$refs.textInput.value = ''
|
||||
}
|
||||
},
|
||||
updateWrittenInitials (e) {
|
||||
this.isInitialsStarted = true
|
||||
|
||||
const canvas = this.$refs.canvas
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
const fontFamily = 'Arial'
|
||||
const fontSize = '44px'
|
||||
const fontStyle = 'italic'
|
||||
const fontWeight = ''
|
||||
|
||||
context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
|
||||
context.textAlign = 'center'
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
|
||||
},
|
||||
toggleTextInput () {
|
||||
this.remove()
|
||||
this.clear()
|
||||
this.isDrawInitials = !this.isDrawInitials
|
||||
|
||||
if (!this.isDrawInitials) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.textInput.focus()
|
||||
|
||||
this.$emit('start')
|
||||
})
|
||||
}
|
||||
},
|
||||
async submit () {
|
||||
if (this.modelValue || this.computedPreviousValue) {
|
||||
if (this.computedPreviousValue) {
|
||||
this.$emit('update:model-value', this.computedPreviousValue)
|
||||
}
|
||||
|
||||
return Promise.resolve({})
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
|
||||
const file = new File([blob], 'initials.png', { type: 'image/png' })
|
||||
|
||||
if (this.isDirectUpload) {
|
||||
const { DirectUpload } = await import('@rails/activestorage')
|
||||
|
||||
new DirectUpload(
|
||||
file,
|
||||
'/direct_uploads'
|
||||
).create((_error, data) => {
|
||||
fetch(this.baseUrl + '/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug,
|
||||
blob_signed_id: data.signed_id,
|
||||
name: 'attachments'
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then((resp) => resp.json()).then((attachment) => {
|
||||
this.$emit('update:model-value', attachment.uuid)
|
||||
this.$emit('attached', attachment)
|
||||
|
||||
return resolve(attachment)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append('file', file)
|
||||
formData.append('submitter_slug', this.submitterSlug)
|
||||
formData.append('name', 'attachments')
|
||||
|
||||
return fetch(this.baseUrl + '/api/attachments', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then((resp) => resp.json()).then((attachment) => {
|
||||
this.$emit('attached', attachment)
|
||||
this.$emit('update:model-value', attachment.uuid)
|
||||
|
||||
return resolve(attachment)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -7,25 +7,25 @@
|
||||
<div class="flex w-full">
|
||||
<div class="space-y-3.5 mx-auto">
|
||||
<div
|
||||
v-for="option in field.options"
|
||||
:key="option.uuid"
|
||||
v-for="(option, index) in field.options"
|
||||
:key="index"
|
||||
>
|
||||
<label
|
||||
:for="option.uuid"
|
||||
:for="field.uuid + option"
|
||||
class="flex items-center space-x-3"
|
||||
>
|
||||
<input
|
||||
:id="option.uuid"
|
||||
:id="field.uuid + option"
|
||||
:ref="setInputRef"
|
||||
type="checkbox"
|
||||
:name="`values[${field.uuid}][]`"
|
||||
:value="option.value"
|
||||
:value="option"
|
||||
class="base-checkbox !h-7 !w-7"
|
||||
:checked="(modelValue || []).includes(option.value)"
|
||||
:checked="modelValue.includes(option)"
|
||||
@change="onChange"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{{ option.value }}
|
||||
{{ option }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<label
|
||||
:for="isCodeSent ? 'one_time_code' : field.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ field.name || t('verified_phone_number') }}
|
||||
<template v-if="!field.required">({{ t('optional') }})</template>
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
type="hidden"
|
||||
name="normalize_phone"
|
||||
value="true"
|
||||
>
|
||||
<div v-if="isCodeSent">
|
||||
<input
|
||||
id="one_time_code"
|
||||
class="base-input !text-2xl w-full text-center"
|
||||
name="one_time_code"
|
||||
type="text"
|
||||
autocomplete="one-time-code"
|
||||
:placeholder="t('six_digits_code')"
|
||||
required
|
||||
maxlength="6"
|
||||
autofocus
|
||||
inputmode="decimal"
|
||||
@input="onInputCode"
|
||||
>
|
||||
<div class="flex justify-between mt-2 -mb-2 md:-mb-4">
|
||||
<a
|
||||
v-if="!defaultValue"
|
||||
href="#"
|
||||
class="link"
|
||||
@click.prevent="isCodeSent = false"
|
||||
>
|
||||
{{ t('change_phone_number') }}
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="link"
|
||||
@click.prevent="resendCode"
|
||||
>
|
||||
{{ isResendLoading ? t('sending') : t('resend_code') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-show="!isCodeSent"
|
||||
:id="field.uuid"
|
||||
ref="phone"
|
||||
:value="modelValue || defaultValue"
|
||||
:readonly="!!defaultValue"
|
||||
class="base-input !text-2xl w-full"
|
||||
autocomplete="tel"
|
||||
pattern="^\+[0-9\s\-]+$"
|
||||
:oninvalid="`this.value ? this.setCustomValidity('${t('use_international_format')}...') : ''`"
|
||||
oninput="this.setCustomValidity('')"
|
||||
type="tel"
|
||||
inputmode="tel"
|
||||
:required="field.required"
|
||||
placeholder="+1 234 567-8900"
|
||||
:name="`values[${field.uuid}]`"
|
||||
@input="$emit('update:model-value', $event.target.value)"
|
||||
@focus="$emit('focus')"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function throttle (func, delay) {
|
||||
let lastCallTime = 0
|
||||
|
||||
return function (...args) {
|
||||
const now = Date.now()
|
||||
|
||||
if (now - lastCallTime >= delay) {
|
||||
func.apply(this, args)
|
||||
lastCallTime = now
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'PhoneStep',
|
||||
inject: ['t', 'baseUrl'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submitterSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
defaultValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value', 'focus', 'submit'],
|
||||
data () {
|
||||
return {
|
||||
isCodeSent: false,
|
||||
isResendLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitSubmit: throttle(function (e) {
|
||||
this.$emit('submit')
|
||||
}, 1000),
|
||||
onInputCode (e) {
|
||||
if (e.target.value.length === 6) {
|
||||
this.emitSubmit()
|
||||
}
|
||||
},
|
||||
resendCode () {
|
||||
this.isResendLoading = true
|
||||
|
||||
this.sendVerificationCode().finally(() => {
|
||||
alert(this.t('verification_code_has_been_resent'))
|
||||
|
||||
this.isResendLoading = false
|
||||
})
|
||||
},
|
||||
sendVerificationCode () {
|
||||
return fetch(this.baseUrl + '/api/send_phone_verification_code', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug,
|
||||
phone: this.$refs.phone.value
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
},
|
||||
async submit () {
|
||||
if (!this.isCodeSent) {
|
||||
this.sendVerificationCode()
|
||||
|
||||
this.$emit('update:model-value', this.$refs.phone.value)
|
||||
|
||||
this.isCodeSent = true
|
||||
|
||||
return Promise.reject(new Error('verify with code'))
|
||||
} else {
|
||||
return Promise.resolve({})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -3,113 +3,50 @@
|
||||
<div class="flex justify-between items-center w-full mb-2">
|
||||
<label
|
||||
class="label text-2xl"
|
||||
>{{ field.name || t('signature') }}</label>
|
||||
<div class="space-x-2 flex">
|
||||
<span
|
||||
class="tooltip"
|
||||
data-tip="Type text"
|
||||
>
|
||||
<a
|
||||
id="type_text_button"
|
||||
href="#"
|
||||
class="btn btn-sm btn-circle"
|
||||
:class="{ 'btn-neutral': isTextSignature, 'btn-outline': !isTextSignature }"
|
||||
@click.prevent="toggleTextInput"
|
||||
>
|
||||
<IconTextSize :width="16" />
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="tooltip"
|
||||
data-tip="Take photo"
|
||||
>
|
||||
<label
|
||||
class="btn btn-outline btn-sm btn-circle"
|
||||
>
|
||||
<IconCamera :width="16" />
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
accept="image/*"
|
||||
@change="drawImage"
|
||||
>
|
||||
</label>
|
||||
</span>
|
||||
<a
|
||||
v-if="modelValue || computedPreviousValue"
|
||||
href="#"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="remove"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
{{ t('redraw') }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
href="#"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="clear"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
{{ t('clear') }}
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
title="Minimize"
|
||||
class="py-1.5 inline md:hidden"
|
||||
@click.prevent="$emit('minimize')"
|
||||
>
|
||||
<IconArrowsDiagonalMinimize2
|
||||
:width="20"
|
||||
:height="20"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
>{{ field.name || 'Signature' }}</label>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="remove"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
Redraw
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-outline btn-sm"
|
||||
@click.prevent="clear"
|
||||
>
|
||||
<IconReload :width="16" />
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
:value="modelValue || computedPreviousValue"
|
||||
:value="modelValue"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
>
|
||||
<img
|
||||
v-if="modelValue || computedPreviousValue"
|
||||
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
|
||||
class="mx-auto bg-white border border-base-300 rounded max-h-72"
|
||||
v-if="modelValue"
|
||||
:src="attachmentsIndex[modelValue].url"
|
||||
class="w-full bg-white border border-base-300 rounded"
|
||||
>
|
||||
<canvas
|
||||
v-show="!modelValue && !computedPreviousValue"
|
||||
v-show="!modelValue"
|
||||
ref="canvas"
|
||||
class="bg-white border border-base-300 rounded"
|
||||
/>
|
||||
<input
|
||||
v-if="isTextSignature"
|
||||
id="signature_text_input"
|
||||
ref="textInput"
|
||||
class="base-input !text-2xl w-full mt-6"
|
||||
:required="field.required"
|
||||
:placeholder="`${t('type_signature_here')}...`"
|
||||
type="text"
|
||||
@input="updateWrittenSignature"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
|
||||
import { cropCanvasAndExportToPNG } from './crop_canvas'
|
||||
import SignaturePad from 'signature_pad'
|
||||
|
||||
let isFontLoaded = false
|
||||
import { IconReload } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'SignatureStep',
|
||||
components: {
|
||||
IconReload,
|
||||
IconCamera,
|
||||
IconTextSize,
|
||||
IconArrowsDiagonalMinimize2
|
||||
IconReload
|
||||
},
|
||||
inject: ['baseUrl', 't'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
@@ -129,175 +66,52 @@ export default {
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
previousValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value', 'start', 'minimize'],
|
||||
emits: ['attached', 'update:model-value'],
|
||||
data () {
|
||||
return {
|
||||
isSignatureStarted: !!this.previousValue,
|
||||
isUsePreviousValue: true,
|
||||
isTextSignature: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedPreviousValue () {
|
||||
if (this.isUsePreviousValue) {
|
||||
return this.previousValue
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
isSignatureStarted: false
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.canvas) {
|
||||
this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
|
||||
this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
|
||||
}
|
||||
this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
|
||||
this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
|
||||
})
|
||||
|
||||
if (this.isDirectUpload) {
|
||||
import('@rails/activestorage')
|
||||
}
|
||||
|
||||
if (this.$refs.canvas) {
|
||||
this.pad = new SignaturePad(this.$refs.canvas)
|
||||
const { default: SignaturePad } = await import('signature_pad')
|
||||
|
||||
this.pad.addEventListener('beginStroke', () => {
|
||||
this.isSignatureStarted = true
|
||||
this.pad = new SignaturePad(this.$refs.canvas)
|
||||
|
||||
this.$emit('start')
|
||||
})
|
||||
}
|
||||
this.pad.addEventListener('beginStroke', () => {
|
||||
this.isSignatureStarted = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
remove () {
|
||||
this.$emit('update:model-value', '')
|
||||
|
||||
this.isUsePreviousValue = false
|
||||
this.isSignatureStarted = false
|
||||
},
|
||||
loadFont () {
|
||||
if (!isFontLoaded) {
|
||||
const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
|
||||
|
||||
font.load().then((loadedFont) => {
|
||||
document.fonts.add(loadedFont)
|
||||
|
||||
isFontLoaded = true
|
||||
}).catch((error) => {
|
||||
console.error('Font loading failed:', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.pad.clear()
|
||||
|
||||
this.isSignatureStarted = false
|
||||
|
||||
if (this.$refs.textInput) {
|
||||
this.$refs.textInput.value = ''
|
||||
}
|
||||
},
|
||||
updateWrittenSignature (e) {
|
||||
this.isSignatureStarted = true
|
||||
|
||||
const canvas = this.$refs.canvas
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
const fontFamily = 'Dancing Script'
|
||||
const fontSize = '38px'
|
||||
const fontStyle = 'italic'
|
||||
const fontWeight = ''
|
||||
|
||||
context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
|
||||
context.textAlign = 'center'
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
|
||||
},
|
||||
toggleTextInput () {
|
||||
this.remove()
|
||||
this.isTextSignature = !this.isTextSignature
|
||||
|
||||
if (this.isTextSignature) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.textInput.focus()
|
||||
|
||||
this.loadFont()
|
||||
|
||||
this.$emit('start')
|
||||
})
|
||||
}
|
||||
},
|
||||
drawImage (event) {
|
||||
this.remove()
|
||||
this.isSignatureStarted = true
|
||||
|
||||
const file = event.target.files[0]
|
||||
|
||||
if (file && file.type.match('image.*')) {
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = (event) => {
|
||||
const img = new Image()
|
||||
|
||||
img.src = event.target.result
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = this.$refs.canvas
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
const aspectRatio = img.width / img.height
|
||||
|
||||
let targetWidth = canvas.width
|
||||
let targetHeight = canvas.height
|
||||
|
||||
if (canvas.width / canvas.height > aspectRatio) {
|
||||
targetWidth = canvas.height * aspectRatio
|
||||
} else {
|
||||
targetHeight = canvas.width / aspectRatio
|
||||
}
|
||||
|
||||
if (targetHeight > targetWidth) {
|
||||
const scale = targetHeight / targetWidth
|
||||
targetWidth = targetWidth * scale
|
||||
targetHeight = targetHeight * scale
|
||||
}
|
||||
|
||||
const x = (canvas.width - targetWidth) / 2
|
||||
const y = (canvas.height - targetHeight) / 2
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
context.drawImage(img, x, y, targetWidth, targetHeight)
|
||||
|
||||
this.$emit('start')
|
||||
}
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
},
|
||||
async submit () {
|
||||
if (this.modelValue || this.computedPreviousValue) {
|
||||
if (this.computedPreviousValue) {
|
||||
this.$emit('update:model-value', this.computedPreviousValue)
|
||||
}
|
||||
|
||||
if (this.modelValue) {
|
||||
return Promise.resolve({})
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
|
||||
this.$refs.canvas.toBlob(async (blob) => {
|
||||
const file = new File([blob], 'signature.png', { type: 'image/png' })
|
||||
|
||||
if (this.isDirectUpload) {
|
||||
@@ -307,7 +121,7 @@ export default {
|
||||
file,
|
||||
'/direct_uploads'
|
||||
).create((_error, data) => {
|
||||
fetch(this.baseUrl + '/api/attachments', {
|
||||
fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submitter_slug: this.submitterSlug,
|
||||
@@ -329,17 +143,17 @@ export default {
|
||||
formData.append('submitter_slug', this.submitterSlug)
|
||||
formData.append('name', 'attachments')
|
||||
|
||||
return fetch(this.baseUrl + '/api/attachments', {
|
||||
return fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then((resp) => resp.json()).then((attachment) => {
|
||||
this.$emit('attached', attachment)
|
||||
this.$emit('update:model-value', attachment.uuid)
|
||||
this.$emit('attached', attachment)
|
||||
|
||||
return resolve(attachment)
|
||||
})
|
||||
}
|
||||
})
|
||||
}, 'image/png')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<label
|
||||
v-if="field.name"
|
||||
:for="field.uuid"
|
||||
class="label text-2xl mb-2"
|
||||
>{{ field.name }}
|
||||
<template v-if="!field.required">({{ t('optional') }})</template>
|
||||
</label>
|
||||
<div
|
||||
v-else
|
||||
class="py-1"
|
||||
/>
|
||||
<div class="items-center flex">
|
||||
<input
|
||||
v-if="!isTextArea"
|
||||
:id="field.uuid"
|
||||
v-model="text"
|
||||
:maxlength="cellsMaxLegth"
|
||||
class="base-input !text-2xl w-full !pr-11 -mr-10"
|
||||
:required="field.required"
|
||||
:pattern="field.validation?.pattern"
|
||||
:oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
|
||||
:oninput="field.validation?.message ? `this.setCustomValidity('')` : ''"
|
||||
:placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
|
||||
type="text"
|
||||
:name="`values[${field.uuid}]`"
|
||||
@focus="$emit('focus')"
|
||||
>
|
||||
<textarea
|
||||
v-if="isTextArea"
|
||||
:id="field.uuid"
|
||||
ref="textarea"
|
||||
v-model="text"
|
||||
class="base-textarea !text-2xl w-full"
|
||||
:placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
|
||||
:required="field.required"
|
||||
:name="`values[${field.uuid}]`"
|
||||
@input="resizeTextarea"
|
||||
@focus="$emit('focus')"
|
||||
/>
|
||||
<div
|
||||
v-if="!isTextArea && field.type !== 'cells'"
|
||||
class="tooltip"
|
||||
:data-tip="t('toggle_multiline_text')"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-ghost btn-circle btn-sm"
|
||||
@click.prevent="toggleTextArea"
|
||||
>
|
||||
<IconAlignBoxLeftTop />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'TextStep',
|
||||
components: {
|
||||
IconAlignBoxLeftTop
|
||||
},
|
||||
inject: ['t'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value', 'focus'],
|
||||
data () {
|
||||
return {
|
||||
isTextArea: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cellsMaxLegth () {
|
||||
if (this.field.type === 'cells') {
|
||||
const area = this.field.areas?.[0]
|
||||
|
||||
if (area) {
|
||||
return parseInt(area.w / area.cell_w)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
text: {
|
||||
set (value) {
|
||||
this.$emit('update:model-value', value)
|
||||
},
|
||||
get () {
|
||||
return this.modelValue
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.isTextArea = this.modelValue?.includes('\n')
|
||||
|
||||
if (this.isTextArea) {
|
||||
this.$nextTick(() => {
|
||||
this.resizeTextarea()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resizeTextarea () {
|
||||
const textarea = this.$refs.textarea
|
||||
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = textarea.scrollHeight + 'px'
|
||||
},
|
||||
toggleTextArea () {
|
||||
this.isTextArea = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.textarea.focus()
|
||||
this.$refs.textarea.setSelectionRange(this.$refs.textarea.value.length, this.$refs.textarea.value.length)
|
||||
|
||||
this.resizeTextarea()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -4,7 +4,6 @@
|
||||
:style="positionStyle"
|
||||
@pointerdown.stop
|
||||
@mousedown.stop="startDrag"
|
||||
@touchstart="startTouchDrag"
|
||||
>
|
||||
<div
|
||||
v-if="isSelected || isDraw"
|
||||
@@ -23,7 +22,7 @@
|
||||
:style="{ left: (cellW / area.w * 100) + '%' }"
|
||||
>
|
||||
<span
|
||||
v-if="index === 0 && editable"
|
||||
v-if="index === 0"
|
||||
class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
|
||||
style="left: -4px"
|
||||
@mousedown.stop="startResizeCell"
|
||||
@@ -33,7 +32,7 @@
|
||||
<div
|
||||
v-if="field?.type"
|
||||
class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
|
||||
:class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
|
||||
:class="{ 'flex z-10': isNameFocus || isSelected, hidden: !isNameFocus && !isSelected }"
|
||||
style="top: -25px; height: 25px"
|
||||
@mousedown.stop
|
||||
@pointerdown.stop
|
||||
@@ -42,7 +41,6 @@
|
||||
v-model="field.submitter_uuid"
|
||||
class="border-r"
|
||||
:compact="true"
|
||||
:editable="editable"
|
||||
:menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
|
||||
:submitters="template.submitters"
|
||||
@update:model-value="save"
|
||||
@@ -51,7 +49,6 @@
|
||||
<FieldType
|
||||
v-model="field.type"
|
||||
:button-width="27"
|
||||
:editable="editable"
|
||||
:button-classes="'px-1'"
|
||||
:menu-classes="'bg-white rounded-t-none'"
|
||||
@update:model-value="[maybeUpdateOptions(), save()]"
|
||||
@@ -60,7 +57,7 @@
|
||||
<span
|
||||
v-if="field.type !== 'checkbox' || field.name"
|
||||
ref="name"
|
||||
:contenteditable="editable"
|
||||
contenteditable
|
||||
class="pr-1 cursor-text outline-none block"
|
||||
style="min-width: 2px"
|
||||
@keydown.enter.prevent="onNameEnter"
|
||||
@@ -68,7 +65,7 @@
|
||||
@blur="onNameBlur"
|
||||
>{{ field.name || defaultName }}</span>
|
||||
<div
|
||||
v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
|
||||
v-if="isNameFocus"
|
||||
class="flex items-center ml-1.5"
|
||||
>
|
||||
<input
|
||||
@@ -86,7 +83,7 @@
|
||||
>Required</label>
|
||||
</div>
|
||||
<button
|
||||
v-else-if="editable"
|
||||
v-else
|
||||
class="pr-1"
|
||||
title="Remove"
|
||||
@click.prevent="$emit('remove')"
|
||||
@@ -95,42 +92,28 @@
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center h-full w-full"
|
||||
:class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
|
||||
class="opacity-50 flex items-center justify-center h-full w-full"
|
||||
:class="bgColors[submitterIndex]"
|
||||
>
|
||||
<span
|
||||
v-if="field"
|
||||
class="flex justify-center items-center space-x-1 h-full"
|
||||
>
|
||||
<div
|
||||
v-if="field?.default_value"
|
||||
:class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
|
||||
>
|
||||
<div
|
||||
ref="textContainer"
|
||||
class="flex items-center px-0.5"
|
||||
>
|
||||
<span class="whitespace-pre-wrap">{{ field.default_value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="fieldIcons[field.type]"
|
||||
v-else
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="max-h-10 opacity-50"
|
||||
class="max-h-10"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
ref="touchTarget"
|
||||
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
|
||||
/>
|
||||
<span
|
||||
v-if="field?.type && editable"
|
||||
class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
|
||||
v-if="field?.type"
|
||||
class="h-2.5 w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
|
||||
@mousedown.stop="startResize"
|
||||
@touchstart="startTouchResize"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -140,7 +123,6 @@ import FieldSubmitter from './field_submitter'
|
||||
import FieldType from './field_type'
|
||||
import Field from './field'
|
||||
import { IconX } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
export default {
|
||||
name: 'FieldArea',
|
||||
@@ -160,11 +142,6 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
required: false,
|
||||
@@ -177,7 +154,6 @@ export default {
|
||||
isResize: false,
|
||||
isDragged: false,
|
||||
isNameFocus: false,
|
||||
textOverflowChars: 0,
|
||||
dragFrom: { x: 0, y: 0 }
|
||||
}
|
||||
},
|
||||
@@ -206,30 +182,20 @@ export default {
|
||||
},
|
||||
borderColors () {
|
||||
return [
|
||||
'border-red-500/50',
|
||||
'border-sky-500/50',
|
||||
'border-emerald-500/50',
|
||||
'border-yellow-300/50',
|
||||
'border-purple-600/50',
|
||||
'border-pink-500/50',
|
||||
'border-cyan-500/50',
|
||||
'border-orange-500/50',
|
||||
'border-lime-500/50',
|
||||
'border-indigo-500/50'
|
||||
'border-red-500',
|
||||
'border-sky-500',
|
||||
'border-emerald-500',
|
||||
'border-yellow-300',
|
||||
'border-purple-600'
|
||||
]
|
||||
},
|
||||
bgColors () {
|
||||
return [
|
||||
'bg-red-100/50',
|
||||
'bg-sky-100/50',
|
||||
'bg-emerald-100/50',
|
||||
'bg-yellow-100/50',
|
||||
'bg-purple-100/50',
|
||||
'bg-pink-100/50',
|
||||
'bg-cyan-100/50',
|
||||
'bg-orange-100/50',
|
||||
'bg-lime-100/50',
|
||||
'bg-indigo-100/50'
|
||||
'bg-red-100',
|
||||
'bg-sky-100',
|
||||
'bg-emerald-100',
|
||||
'bg-yellow-100',
|
||||
'bg-purple-100'
|
||||
]
|
||||
},
|
||||
isSelected () {
|
||||
@@ -246,20 +212,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'field.default_value' () {
|
||||
if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value.length)) {
|
||||
this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
|
||||
this.$nextTick(() => {
|
||||
this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onNameFocus (e) {
|
||||
this.selectedAreaRef.value = this.area
|
||||
@@ -274,14 +226,14 @@ export default {
|
||||
}
|
||||
},
|
||||
startResizeCell (e) {
|
||||
this.$el.getRootNode().addEventListener('mousemove', this.onResizeCell)
|
||||
this.$el.getRootNode().addEventListener('mouseup', this.stopResizeCell)
|
||||
document.addEventListener('mousemove', this.onResizeCell)
|
||||
document.addEventListener('mouseup', this.stopResizeCell)
|
||||
|
||||
this.$emit('start-resize', 'ew')
|
||||
},
|
||||
stopResizeCell (e) {
|
||||
this.$el.getRootNode().removeEventListener('mousemove', this.onResizeCell)
|
||||
this.$el.getRootNode().removeEventListener('mouseup', this.stopResizeCell)
|
||||
document.removeEventListener('mousemove', this.onResizeCell)
|
||||
document.removeEventListener('mouseup', this.stopResizeCell)
|
||||
|
||||
this.$emit('stop-resize')
|
||||
|
||||
@@ -297,14 +249,12 @@ export default {
|
||||
}
|
||||
},
|
||||
maybeUpdateOptions () {
|
||||
delete this.field.default_value
|
||||
|
||||
if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
|
||||
delete this.field.options
|
||||
}
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(this.field.type)) {
|
||||
this.field.options ||= [{ value: '', uuid: v4() }]
|
||||
this.field.options ||= ['']
|
||||
}
|
||||
|
||||
(this.field.areas || []).forEach((area) => {
|
||||
@@ -316,13 +266,11 @@ export default {
|
||||
})
|
||||
},
|
||||
onNameBlur (e) {
|
||||
const text = this.$refs.name.innerText.trim()
|
||||
|
||||
this.isNameFocus = false
|
||||
this.$refs.name.style.minWidth = ''
|
||||
|
||||
if (text) {
|
||||
this.field.name = text
|
||||
if (e.target.innerText.trim()) {
|
||||
this.field.name = e.target.innerText.trim()
|
||||
} else {
|
||||
this.field.name = ''
|
||||
this.$refs.name.innerText = this.defaultName
|
||||
@@ -350,63 +298,18 @@ export default {
|
||||
startDrag (e) {
|
||||
this.selectedAreaRef.value = this.area
|
||||
|
||||
if (!this.editable) {
|
||||
return
|
||||
}
|
||||
|
||||
const rect = e.target.getBoundingClientRect()
|
||||
|
||||
this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
|
||||
|
||||
this.$el.getRootNode().addEventListener('mousemove', this.drag)
|
||||
this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
|
||||
document.addEventListener('mousemove', this.drag)
|
||||
document.addEventListener('mouseup', this.stopDrag)
|
||||
|
||||
this.$emit('start-drag')
|
||||
},
|
||||
startTouchDrag (e) {
|
||||
if (e.target !== this.$refs.touchTarget) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$refs?.name?.blur()
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
this.isDragged = true
|
||||
|
||||
const rect = e.target.getBoundingClientRect()
|
||||
|
||||
this.selectedAreaRef.value = this.area
|
||||
|
||||
this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }
|
||||
|
||||
this.$el.getRootNode().addEventListener('touchmove', this.touchDrag)
|
||||
this.$el.getRootNode().addEventListener('touchend', this.stopTouchDrag)
|
||||
|
||||
this.$emit('start-drag')
|
||||
},
|
||||
touchDrag (e) {
|
||||
const page = this.$parent.$refs.mask.previousSibling
|
||||
const rect = page.getBoundingClientRect()
|
||||
|
||||
this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
|
||||
this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
|
||||
},
|
||||
stopTouchDrag () {
|
||||
this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
|
||||
this.$el.getRootNode().removeEventListener('touchend', this.stopTouchDrag)
|
||||
|
||||
if (this.isDragged) {
|
||||
this.save()
|
||||
}
|
||||
|
||||
this.isDragged = false
|
||||
|
||||
this.$emit('stop-drag')
|
||||
},
|
||||
stopDrag () {
|
||||
this.$el.getRootNode().removeEventListener('mousemove', this.drag)
|
||||
this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
|
||||
document.removeEventListener('mousemove', this.drag)
|
||||
document.removeEventListener('mouseup', this.stopDrag)
|
||||
|
||||
if (this.isDragged) {
|
||||
this.save()
|
||||
@@ -419,41 +322,14 @@ export default {
|
||||
startResize () {
|
||||
this.selectedAreaRef.value = this.area
|
||||
|
||||
this.$el.getRootNode().addEventListener('mousemove', this.resize)
|
||||
this.$el.getRootNode().addEventListener('mouseup', this.stopResize)
|
||||
document.addEventListener('mousemove', this.resize)
|
||||
document.addEventListener('mouseup', this.stopResize)
|
||||
|
||||
this.$emit('start-resize', 'nwse')
|
||||
},
|
||||
stopResize () {
|
||||
this.$el.getRootNode().removeEventListener('mousemove', this.resize)
|
||||
this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)
|
||||
|
||||
this.$emit('stop-resize')
|
||||
|
||||
this.save()
|
||||
},
|
||||
startTouchResize (e) {
|
||||
this.selectedAreaRef.value = this.area
|
||||
|
||||
this.$refs?.name?.blur()
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
this.$el.getRootNode().addEventListener('touchmove', this.touchResize)
|
||||
this.$el.getRootNode().addEventListener('touchend', this.stopTouchResize)
|
||||
|
||||
this.$emit('start-resize', 'nwse')
|
||||
},
|
||||
touchResize (e) {
|
||||
const page = this.$parent.$refs.mask.previousSibling
|
||||
const rect = page.getBoundingClientRect()
|
||||
|
||||
this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
|
||||
this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
|
||||
},
|
||||
stopTouchResize () {
|
||||
this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
|
||||
this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
|
||||
document.removeEventListener('mousemove', this.resize)
|
||||
document.removeEventListener('mouseup', this.stopResize)
|
||||
|
||||
this.$emit('stop-resize')
|
||||
|
||||
|
||||
@@ -1,73 +1,61 @@
|
||||
<template>
|
||||
<div
|
||||
style="max-width: 1600px"
|
||||
class="mx-auto pl-3 md:pl-4 h-full"
|
||||
class="mx-auto pl-4"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
|
||||
:style="{ backgroundColor }"
|
||||
>
|
||||
<div class="flex justify-between py-1.5 items-center pr-4">
|
||||
<div class="flex space-x-3">
|
||||
<a
|
||||
v-if="withLogo"
|
||||
href="/"
|
||||
>
|
||||
<a href="/">
|
||||
<Logo />
|
||||
</a>
|
||||
<Contenteditable
|
||||
:model-value="template.name"
|
||||
:editable="editable"
|
||||
class="text-3xl font-semibold focus:text-clip"
|
||||
:icon-stroke-width="2.3"
|
||||
@update:model-value="updateName"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-x-3 flex items-center">
|
||||
<slot
|
||||
v-if="$slots.buttons"
|
||||
name="buttons"
|
||||
/>
|
||||
<template v-else>
|
||||
<a
|
||||
:href="`/templates/${template.id}/submissions/new`"
|
||||
data-turbo-frame="modal"
|
||||
class="btn btn-primary text-base"
|
||||
@click="maybeShowEmptyTemplateAlert"
|
||||
>
|
||||
<IconUsersPlus
|
||||
width="20"
|
||||
class="inline"
|
||||
/>
|
||||
<span class="hidden md:inline">
|
||||
Recipients
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
class="base-button"
|
||||
:class="{ disabled: isSaving }"
|
||||
v-bind="isSaving ? { disabled: true } : {}"
|
||||
@click.prevent="onSaveClick"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isSaving"
|
||||
width="22"
|
||||
class="animate-spin"
|
||||
/>
|
||||
<IconDeviceFloppy
|
||||
v-else
|
||||
width="22"
|
||||
/>
|
||||
<span class="hidden md:inline">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<a
|
||||
:href="`/templates/${template.id}/submissions/new`"
|
||||
data-turbo-frame="modal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<IconUsersPlus
|
||||
width="20"
|
||||
class="inline"
|
||||
/>
|
||||
<span class="hidden md:inline">
|
||||
Recipients
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
class="base-button"
|
||||
:class="{ disabled: isSaving }"
|
||||
v-bind="isSaving ? { disabled: true } : {}"
|
||||
@click.prevent="onSaveClick"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isSaving"
|
||||
width="20"
|
||||
class="animate-spin"
|
||||
/>
|
||||
<IconDeviceFloppy
|
||||
v-else
|
||||
width="20"
|
||||
/>
|
||||
<span class="hidden md:inline">
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex md:max-h-[calc(100vh-60px)]">
|
||||
<div
|
||||
class="flex"
|
||||
style="max-height: calc(100vh - 60px)"
|
||||
>
|
||||
<div
|
||||
ref="previews"
|
||||
:style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
|
||||
class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5 hidden lg:block"
|
||||
>
|
||||
<DocumentPreview
|
||||
@@ -76,126 +64,62 @@
|
||||
:with-arrows="template.schema.length > 1"
|
||||
:item="item"
|
||||
:document="sortedDocuments[index]"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:with-replace-button="withUploadButton"
|
||||
:editable="editable"
|
||||
:template="template"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
@scroll-to="scrollIntoDocument(item)"
|
||||
@remove="onDocumentRemove"
|
||||
@replace="onDocumentReplace"
|
||||
@up="moveDocument(item, -1)"
|
||||
@down="moveDocument(item, 1)"
|
||||
@change="save"
|
||||
/>
|
||||
<div
|
||||
class="sticky bottom-0 py-2"
|
||||
:class="{ 'bg-base-100': withStickySubmitters }"
|
||||
>
|
||||
<div class="sticky bottom-0 bg-base-100 py-2">
|
||||
<Upload
|
||||
v-if="sortedDocuments.length && editable && withUploadButton"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
v-if="sortedDocuments.length"
|
||||
:template-id="template.id"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
|
||||
<div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
|
||||
<div
|
||||
ref="documents"
|
||||
class="pr-3.5 pl-0.5"
|
||||
>
|
||||
<Dropzone
|
||||
v-if="!sortedDocuments.length && withUploadButton"
|
||||
v-if="!sortedDocuments.length"
|
||||
:template-id="template.id"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
<template v-else>
|
||||
<template
|
||||
<Document
|
||||
v-for="document in sortedDocuments"
|
||||
:key="document.uuid"
|
||||
>
|
||||
<Document
|
||||
:ref="setDocumentRefs"
|
||||
:areas-index="fieldAreasIndex[document.uuid]"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
:document="document"
|
||||
:is-drag="!!dragField"
|
||||
:draw-field="drawField"
|
||||
:editable="editable"
|
||||
:base-url="baseUrl"
|
||||
@draw="onDraw"
|
||||
@drop-field="onDropfield"
|
||||
@remove-area="removeArea"
|
||||
/>
|
||||
<DocumentControls
|
||||
v-if="isBreakpointLg && editable"
|
||||
:with-arrows="template.schema.length > 1"
|
||||
:item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
|
||||
:with-replace-button="withUploadButton"
|
||||
:document="document"
|
||||
:template="template"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
class="pb-2 mb-2 border-b border-base-300 border-dashed"
|
||||
@remove="onDocumentRemove"
|
||||
@replace="onDocumentReplace"
|
||||
@up="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), -1)"
|
||||
@down="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), 1)"
|
||||
@change="save"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
v-if="sortedDocuments.length && isBreakpointLg && editable"
|
||||
class="pb-4"
|
||||
>
|
||||
<Upload
|
||||
v-if="withUploadButton"
|
||||
:template-id="template.id"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
</div>
|
||||
:ref="setDocumentRefs"
|
||||
:areas-index="fieldAreasIndex[document.uuid]"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
:document="document"
|
||||
:is-drag="!!dragFieldType"
|
||||
:draw-field="drawField"
|
||||
@draw="onDraw"
|
||||
@drop-field="onDropfield"
|
||||
@remove-area="removeArea"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<MobileDrawField
|
||||
v-if="drawField && isBreakpointLg"
|
||||
:draw-field="drawField"
|
||||
:fields="template.fields"
|
||||
:submitters="template.submitters"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
class="md:hidden"
|
||||
:editable="editable"
|
||||
@cancel="drawField = null"
|
||||
@change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
|
||||
/>
|
||||
<FieldType
|
||||
v-if="sortedDocuments.length && !drawField && editable"
|
||||
class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
|
||||
:model-value="''"
|
||||
@update:model-value="startFieldDraw($event)"
|
||||
<div
|
||||
v-if="sortedDocuments.length"
|
||||
class="sticky md:hidden"
|
||||
style="bottom: 100px"
|
||||
>
|
||||
<label
|
||||
class="btn btn-neutral text-white btn-circle btn-lg group"
|
||||
tabindex="0"
|
||||
>
|
||||
<IconPlus
|
||||
class="group-focus:hidden"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<IconX
|
||||
class="hidden group-focus:inline"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
</label>
|
||||
</FieldType>
|
||||
<div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between ml-4 mr-6">
|
||||
<span class="w-full text-center text-lg">
|
||||
You need a larger screen to use builder tools.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
|
||||
class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5 hidden md:block"
|
||||
:class="drawField ? 'overflow-hidden' : 'overflow-auto'"
|
||||
>
|
||||
<div
|
||||
@@ -209,7 +133,7 @@
|
||||
<p>
|
||||
<button
|
||||
class="base-button"
|
||||
@click="drawField = null"
|
||||
@click="drawField = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -222,13 +146,10 @@
|
||||
:fields="template.fields"
|
||||
:submitters="template.submitters"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
:default-fields="defaultFields"
|
||||
:with-sticky-submitters="withStickySubmitters"
|
||||
:editable="editable"
|
||||
@set-draw="drawField = $event"
|
||||
@set-drag="dragField = $event"
|
||||
@set-drag="dragFieldType = $event"
|
||||
@change-submitter="selectedSubmitter = $event"
|
||||
@drag-end="dragField = null"
|
||||
@drag-end="dragFieldType = null"
|
||||
@scroll-to-area="scrollToArea"
|
||||
/>
|
||||
</div>
|
||||
@@ -241,14 +162,11 @@
|
||||
import Upload from './upload'
|
||||
import Dropzone from './dropzone'
|
||||
import Fields from './fields'
|
||||
import MobileDrawField from './mobile_draw_field'
|
||||
import Document from './document'
|
||||
import Logo from './logo'
|
||||
import Contenteditable from './contenteditable'
|
||||
import DocumentPreview from './preview'
|
||||
import DocumentControls from './controls'
|
||||
import FieldType from './field_type'
|
||||
import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
|
||||
import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
@@ -258,14 +176,9 @@ export default {
|
||||
Upload,
|
||||
Document,
|
||||
Fields,
|
||||
MobileDrawField,
|
||||
IconPlus,
|
||||
FieldType,
|
||||
IconX,
|
||||
Logo,
|
||||
Dropzone,
|
||||
DocumentPreview,
|
||||
DocumentControls,
|
||||
IconInnerShadowTop,
|
||||
Contenteditable,
|
||||
IconUsersPlus,
|
||||
@@ -275,9 +188,6 @@ export default {
|
||||
return {
|
||||
template: this.template,
|
||||
save: this.save,
|
||||
baseFetch: this.baseFetch,
|
||||
backgroundColor: this.backgroundColor,
|
||||
withPhone: this.withPhone,
|
||||
selectedAreaRef: computed(() => this.selectedAreaRef)
|
||||
}
|
||||
},
|
||||
@@ -288,78 +198,20 @@ export default {
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
defaultFields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
defaultSubmitters: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
acceptFileTypes: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'image/*, application/pdf'
|
||||
},
|
||||
baseUrl: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
withLogo: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
withStickySubmitters: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
withUploadButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
withPhone: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
fetchOptions: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({ headers: {} })
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
documentRefs: [],
|
||||
isBreakpointLg: false,
|
||||
isSaving: false,
|
||||
selectedSubmitter: null,
|
||||
drawField: null,
|
||||
dragField: null
|
||||
dragFieldType: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fieldIcons: FieldType.computed.fieldIcons,
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
selectedAreaRef: () => ref(),
|
||||
fieldAreasIndex () {
|
||||
const areas = {}
|
||||
@@ -386,89 +238,18 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.defaultSubmitters.forEach((name, index) => {
|
||||
const submitter = (this.template.submitters[index] ||= {})
|
||||
|
||||
submitter.name = name
|
||||
submitter.uuid ||= v4()
|
||||
})
|
||||
|
||||
this.selectedSubmitter = this.template.submitters[0]
|
||||
},
|
||||
mounted () {
|
||||
this.undoStack = [JSON.stringify(this.template)]
|
||||
this.redoStack = []
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.onWindowResize()
|
||||
})
|
||||
|
||||
document.addEventListener('keyup', this.onKeyUp)
|
||||
window.addEventListener('keydown', this.onKeyDown)
|
||||
|
||||
window.addEventListener('resize', this.onWindowResize)
|
||||
},
|
||||
unmounted () {
|
||||
document.removeEventListener('keyup', this.onKeyUp)
|
||||
window.removeEventListener('keydown', this.onKeyDown)
|
||||
|
||||
window.removeEventListener('resize', this.onWindowResize)
|
||||
},
|
||||
beforeUpdate () {
|
||||
this.documentRefs = []
|
||||
},
|
||||
methods: {
|
||||
startFieldDraw (type) {
|
||||
const field = {
|
||||
name: '',
|
||||
uuid: v4(),
|
||||
required: type !== 'checkbox',
|
||||
areas: [],
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
type
|
||||
}
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(type)) {
|
||||
field.options = [{ value: '', uuid: v4() }]
|
||||
}
|
||||
|
||||
this.drawField = field
|
||||
},
|
||||
undo () {
|
||||
if (this.undoStack.length > 1) {
|
||||
this.undoStack.pop()
|
||||
const stringData = this.undoStack[this.undoStack.length - 1]
|
||||
const currentStringData = JSON.stringify(this.template)
|
||||
|
||||
if (stringData && stringData !== currentStringData) {
|
||||
this.redoStack.push(currentStringData)
|
||||
|
||||
Object.assign(this.template, JSON.parse(stringData))
|
||||
|
||||
this.save()
|
||||
}
|
||||
}
|
||||
},
|
||||
redo () {
|
||||
const stringData = this.redoStack.pop()
|
||||
this.lastRedoData = stringData
|
||||
const currentStringData = JSON.stringify(this.template)
|
||||
|
||||
if (stringData && stringData !== currentStringData) {
|
||||
if (this.undoStack[this.undoStack.length - 1] !== currentStringData) {
|
||||
this.undoStack.push(currentStringData)
|
||||
}
|
||||
|
||||
Object.assign(this.template, JSON.parse(stringData))
|
||||
|
||||
this.save()
|
||||
}
|
||||
},
|
||||
onWindowResize (e) {
|
||||
const breakpointLg = 1024
|
||||
|
||||
this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
|
||||
},
|
||||
setDocumentRefs (el) {
|
||||
if (el) {
|
||||
this.documentRefs.push(el)
|
||||
@@ -491,19 +272,6 @@ export default {
|
||||
this.selectedAreaRef.value = null
|
||||
}
|
||||
},
|
||||
onKeyDown (event) {
|
||||
if ((event.metaKey && event.shiftKey && event.key === 'z') || (event.ctrlKey && event.key === 'Z')) {
|
||||
event.stopImmediatePropagation()
|
||||
event.preventDefault()
|
||||
|
||||
this.redo()
|
||||
} else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
|
||||
event.stopImmediatePropagation()
|
||||
event.preventDefault()
|
||||
|
||||
this.undo()
|
||||
}
|
||||
},
|
||||
removeArea (area) {
|
||||
const field = this.template.fields.find((f) => f.areas?.includes(area))
|
||||
|
||||
@@ -515,31 +283,12 @@ export default {
|
||||
|
||||
this.save()
|
||||
},
|
||||
pushUndo () {
|
||||
const stringData = JSON.stringify(this.template)
|
||||
|
||||
if (this.undoStack[this.undoStack.length - 1] !== stringData) {
|
||||
this.undoStack.push(stringData)
|
||||
|
||||
if (this.lastRedoData !== stringData) {
|
||||
this.redoStack = []
|
||||
}
|
||||
}
|
||||
},
|
||||
onDraw (area) {
|
||||
if (this.drawField) {
|
||||
this.drawField.areas ||= []
|
||||
this.drawField.areas.push(area)
|
||||
|
||||
if (this.template.fields.indexOf(this.drawField) === -1) {
|
||||
this.template.fields.push(this.drawField)
|
||||
}
|
||||
|
||||
this.drawField = null
|
||||
|
||||
this.selectedAreaRef.value = area
|
||||
|
||||
this.save()
|
||||
} else {
|
||||
const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
|
||||
const pageMask = documentRef.pageRefs[area.page].$refs.mask
|
||||
@@ -550,49 +299,45 @@ export default {
|
||||
const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
|
||||
const previousArea = previousField?.areas?.[previousField.areas.length - 1]
|
||||
|
||||
if (previousArea || area.w) {
|
||||
const areaW = previousArea?.w || (30 / pageMask.clientWidth)
|
||||
const areaH = previousArea?.h || (30 / pageMask.clientHeight)
|
||||
const areaW = previousArea?.w || (30 / pageMask.clientWidth)
|
||||
const areaH = previousArea?.h || (30 / pageMask.clientHeight)
|
||||
|
||||
if ((pageMask.clientWidth * area.w) < 5) {
|
||||
area.x = area.x - (areaW / 2)
|
||||
area.y = area.y - (areaH / 2)
|
||||
}
|
||||
|
||||
area.w = areaW
|
||||
area.h = areaH
|
||||
}
|
||||
}
|
||||
|
||||
if (area.w) {
|
||||
const field = {
|
||||
name: '',
|
||||
uuid: v4(),
|
||||
required: type !== 'checkbox',
|
||||
type,
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
areas: [area]
|
||||
if ((pageMask.clientWidth * area.w) < 5) {
|
||||
area.x = area.x - (areaW / 2)
|
||||
area.y = area.y - (areaH / 2)
|
||||
}
|
||||
|
||||
this.template.fields.push(field)
|
||||
|
||||
this.selectedAreaRef.value = area
|
||||
|
||||
this.save()
|
||||
area.w = areaW
|
||||
area.h = areaH
|
||||
}
|
||||
|
||||
const field = {
|
||||
name: '',
|
||||
uuid: v4(),
|
||||
required: true,
|
||||
type,
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
areas: [area]
|
||||
}
|
||||
|
||||
this.template.fields.push(field)
|
||||
}
|
||||
|
||||
this.selectedAreaRef.value = area
|
||||
|
||||
this.save()
|
||||
},
|
||||
onDropfield (area) {
|
||||
const field = {
|
||||
name: '',
|
||||
type: this.dragFieldType,
|
||||
uuid: v4(),
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
required: this.dragField.type !== 'checkbox',
|
||||
...this.dragField
|
||||
required: true
|
||||
}
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(field.type)) {
|
||||
field.options = [{ value: '', uuid: v4() }]
|
||||
if (['select', 'multiple', 'radio'].includes(this.dragFieldType)) {
|
||||
field.options = ['']
|
||||
}
|
||||
|
||||
const fieldArea = {
|
||||
@@ -606,31 +351,26 @@ export default {
|
||||
|
||||
let baseArea
|
||||
|
||||
if (this.selectedField?.type === field.type) {
|
||||
if (this.selectedField?.type === this.dragFieldType) {
|
||||
baseArea = this.selectedAreaRef.value
|
||||
} else if (previousField?.areas?.length) {
|
||||
} else if (previousField?.areas) {
|
||||
baseArea = previousField.areas[previousField.areas.length - 1]
|
||||
} else {
|
||||
if (['checkbox'].includes(field.type)) {
|
||||
if (['checkbox'].includes(this.dragFieldType)) {
|
||||
baseArea = {
|
||||
w: area.maskW / 30 / area.maskW,
|
||||
h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)
|
||||
}
|
||||
} else if (field.type === 'image') {
|
||||
} else if (this.dragFieldType === 'image') {
|
||||
baseArea = {
|
||||
w: area.maskW / 5 / area.maskW,
|
||||
h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
|
||||
}
|
||||
} else if (field.type === 'signature') {
|
||||
} else if (this.dragFieldType === 'signature') {
|
||||
baseArea = {
|
||||
w: area.maskW / 5 / area.maskW,
|
||||
h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
|
||||
}
|
||||
} else if (field.type === 'initials') {
|
||||
baseArea = {
|
||||
w: area.maskW / 10 / area.maskW,
|
||||
h: area.maskW / 35 / area.maskW
|
||||
}
|
||||
} else {
|
||||
baseArea = {
|
||||
w: area.maskW / 5 / area.maskW,
|
||||
@@ -643,7 +383,7 @@ export default {
|
||||
fieldArea.h = baseArea.h
|
||||
fieldArea.y = fieldArea.y - baseArea.h / 2
|
||||
|
||||
if (field.type === 'cells') {
|
||||
if (this.dragFieldType === 'cells') {
|
||||
fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
|
||||
}
|
||||
|
||||
@@ -677,27 +417,6 @@ export default {
|
||||
this.template.schema.splice(this.template.schema.indexOf(item), 1)
|
||||
}
|
||||
|
||||
this.template.fields.forEach((field) => {
|
||||
[...(field.areas || [])].forEach((area) => {
|
||||
if (area.attachment_uuid === item.attachment_uuid) {
|
||||
field.areas.splice(field.areas.indexOf(area), 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.save()
|
||||
},
|
||||
onDocumentReplace ({ replaceSchemaItem, schema, documents }) {
|
||||
this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
|
||||
this.template.documents.push(...documents)
|
||||
this.template.fields.forEach((field) => {
|
||||
(field.areas || []).forEach((area) => {
|
||||
if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
|
||||
area.attachment_uuid = schema[0].attachment_uuid
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.save()
|
||||
},
|
||||
moveDocument (item, direction) {
|
||||
@@ -715,25 +434,14 @@ export default {
|
||||
|
||||
this.save()
|
||||
},
|
||||
maybeShowEmptyTemplateAlert (e) {
|
||||
if (!this.template.fields.length) {
|
||||
e.preventDefault()
|
||||
|
||||
alert('Please draw fields to prepare the document.')
|
||||
}
|
||||
},
|
||||
onSaveClick () {
|
||||
if (this.template.fields.length) {
|
||||
this.isSaving = true
|
||||
this.isSaving = true
|
||||
|
||||
this.save().then(() => {
|
||||
window.Turbo.visit(`/templates/${this.template.id}`)
|
||||
}).finally(() => {
|
||||
this.isSaving = false
|
||||
})
|
||||
} else {
|
||||
alert('Please draw fields to prepare the document.')
|
||||
}
|
||||
this.save().then(() => {
|
||||
window.Turbo.visit(`/templates/${this.template.id}`)
|
||||
}).finally(() => {
|
||||
this.isSaving = false
|
||||
})
|
||||
},
|
||||
scrollToArea (area) {
|
||||
const documentRef = this.documentRefs.find((a) => a.document.uuid === area.attachment_uuid)
|
||||
@@ -742,20 +450,10 @@ export default {
|
||||
|
||||
this.selectedAreaRef.value = area
|
||||
},
|
||||
baseFetch (path, options = {}) {
|
||||
return fetch(this.baseUrl + path, {
|
||||
...options,
|
||||
headers: { ...this.fetchOptions.headers, ...options.headers }
|
||||
})
|
||||
},
|
||||
save () {
|
||||
if (this.$el.closest('template-builder')) {
|
||||
this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
|
||||
}
|
||||
this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
|
||||
|
||||
this.pushUndo()
|
||||
|
||||
return this.baseFetch(`/api/templates/${this.template.id}`, {
|
||||
return fetch(`/api/templates/${this.template.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
template: {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<span
|
||||
ref="contenteditable"
|
||||
:contenteditable="editable"
|
||||
contenteditable
|
||||
style="min-width: 2px"
|
||||
:class="iconInline ? 'inline' : 'block'"
|
||||
class="peer outline-none focus:block"
|
||||
@@ -24,14 +24,13 @@
|
||||
*
|
||||
</span>
|
||||
<IconPencil
|
||||
v-if="editable"
|
||||
class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
|
||||
class="cursor-pointer flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
|
||||
:style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
|
||||
title="Edit"
|
||||
:class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
|
||||
:width="iconWidth"
|
||||
:stroke-width="iconStrokeWidth"
|
||||
@click="[focusContenteditable(), selectOnEditClick && selectContent()]"
|
||||
@click="focusContenteditable"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -65,16 +64,6 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
selectOnEditClick: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
iconStrokeWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
@@ -96,19 +85,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectContent () {
|
||||
const el = this.$refs.contenteditable
|
||||
|
||||
const range = document.createRange()
|
||||
|
||||
range.selectNodeContents(el)
|
||||
|
||||
const sel = window.getSelection()
|
||||
|
||||
sel.removeAllRanges()
|
||||
|
||||
sel.addRange(range)
|
||||
},
|
||||
onBlur (e) {
|
||||
setTimeout(() => {
|
||||
this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div class="flex space-x-2">
|
||||
<Contenteditable
|
||||
class="w-full block mr-6"
|
||||
:model-value="item.name"
|
||||
:icon-width="16"
|
||||
@update:model-value="onUpdateName"
|
||||
/>
|
||||
<ReplaceButton
|
||||
v-if="withReplaceButton"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:template-id="template.id"
|
||||
@click.stop
|
||||
@success="$emit('replace', { replaceSchemaItem: item, ...$event })"
|
||||
/>
|
||||
<button
|
||||
v-if="withArrows"
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
v-if="withArrows"
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('remove', item)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
import Upload from './upload'
|
||||
import ReplaceButton from './replace'
|
||||
|
||||
export default {
|
||||
name: 'DocumentControls',
|
||||
components: {
|
||||
Contenteditable,
|
||||
ReplaceButton
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
document: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
withReplaceButton: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: true
|
||||
},
|
||||
withArrows: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['change', 'remove', 'up', 'down', 'replace'],
|
||||
mounted () {
|
||||
if (this.isDirectUpload) {
|
||||
import('@rails/activestorage')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload: Upload.methods.upload,
|
||||
onUpdateName (value) {
|
||||
this.item.name = value
|
||||
|
||||
this.$emit('change')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -5,7 +5,6 @@
|
||||
:key="image.id"
|
||||
:ref="setPageRefs"
|
||||
:number="index"
|
||||
:editable="editable"
|
||||
:areas="areasIndex[index]"
|
||||
:is-drag="isDrag"
|
||||
:draw-field="drawField"
|
||||
@@ -39,21 +38,11 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
drawField: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
baseUrl: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
isDrag: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@@ -67,33 +56,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
basePreviewUrl () {
|
||||
if (this.baseUrl) {
|
||||
return new URL(this.baseUrl).origin
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
numberOfPages () {
|
||||
return this.document.metadata?.pdf?.number_of_pages || this.document.preview_images.length
|
||||
},
|
||||
sortedPreviewImages () {
|
||||
const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1].metadata
|
||||
|
||||
return [...Array(this.numberOfPages).keys()].map((i) => {
|
||||
return this.previewImagesIndex[i] || {
|
||||
metadata: lazyloadMetadata,
|
||||
id: Math.random().toString(),
|
||||
url: this.basePreviewUrl + `/preview/${this.document.uuid}/${i}.jpg`
|
||||
}
|
||||
})
|
||||
},
|
||||
previewImagesIndex () {
|
||||
return this.document.preview_images.reduce((acc, e) => {
|
||||
acc[parseInt(e.filename)] = e
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
ref="input"
|
||||
type="file"
|
||||
name="files[]"
|
||||
:accept="acceptFileTypes"
|
||||
accept="image/*, application/pdf"
|
||||
multiple
|
||||
@change="upload"
|
||||
>
|
||||
@@ -61,17 +61,11 @@ export default {
|
||||
IconCloudUpload,
|
||||
IconInnerShadowTop
|
||||
},
|
||||
inject: ['baseFetch'],
|
||||
props: {
|
||||
templateId: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
acceptFileTypes: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'image/*, application/pdf'
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
@@ -94,28 +88,17 @@ export default {
|
||||
return 'Uploading...'
|
||||
} else if (this.isProcessing) {
|
||||
return 'Processing...'
|
||||
} else if (this.acceptFileTypes === 'image/*, application/pdf') {
|
||||
return 'Add PDF documents or images'
|
||||
} else {
|
||||
return 'Add documents or images'
|
||||
return 'Add PDF documents or images'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.isDirectUpload) {
|
||||
import('@rails/activestorage')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload: Upload.methods.upload,
|
||||
onDropFiles (e) {
|
||||
if (this.acceptFileTypes !== 'image/*, application/pdf' || [...e.dataTransfer.files].every((f) => f.type.match(/(?:image\/)|(?:application\/pdf)/))) {
|
||||
this.$refs.input.files = e.dataTransfer.files
|
||||
this.$refs.input.files = e.dataTransfer.files
|
||||
|
||||
this.upload()
|
||||
} else {
|
||||
alert('Only PDF and images are supported.')
|
||||
}
|
||||
this.upload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,9 +4,8 @@
|
||||
>
|
||||
<div
|
||||
class="border border-base-300 rounded rounded-tr-none relative group"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
>
|
||||
<div class="flex items-center justify-between relative group/contenteditable-container">
|
||||
<div class="flex items-center justify-between relative">
|
||||
<div
|
||||
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
|
||||
@click="scrollToFirstArea"
|
||||
@@ -14,7 +13,6 @@
|
||||
<div class="flex items-center p-1 space-x-1">
|
||||
<FieldType
|
||||
v-model="field.type"
|
||||
:editable="editable"
|
||||
:button-width="20"
|
||||
@update:model-value="[maybeUpdateOptions(), save()]"
|
||||
@click="scrollToFirstArea"
|
||||
@@ -22,7 +20,6 @@
|
||||
<Contenteditable
|
||||
ref="name"
|
||||
:model-value="field.name || defaultName"
|
||||
:editable="editable"
|
||||
:icon-inline="true"
|
||||
:icon-width="18"
|
||||
:icon-stroke-width="1.6"
|
||||
@@ -34,46 +31,34 @@
|
||||
v-if="isNameFocus"
|
||||
class="flex items-center relative"
|
||||
>
|
||||
<template v-if="field.type != 'phone'">
|
||||
<input
|
||||
:id="`required-checkbox-${field.uuid}`"
|
||||
v-model="field.required"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs no-animation rounded"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<label
|
||||
:for="`required-checkbox-${field.uuid}`"
|
||||
class="label text-xs"
|
||||
@click.prevent="field.required = !field.required"
|
||||
@mousedown.prevent
|
||||
>Required</label>
|
||||
</template>
|
||||
<input
|
||||
:id="`required-checkbox-${field.uuid}`"
|
||||
v-model="field.required"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs no-animation rounded"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<label
|
||||
:for="`required-checkbox-${field.uuid}`"
|
||||
class="label text-xs"
|
||||
@click.prevent="field.required = !field.required"
|
||||
@mousedown.prevent
|
||||
>Required</label>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="editable"
|
||||
v-else
|
||||
class="flex items-center space-x-1"
|
||||
>
|
||||
<button
|
||||
v-if="field && !field.areas.length"
|
||||
title="Draw"
|
||||
class="relative cursor-pointer text-transparent group-hover:text-base-content"
|
||||
@click="$emit('set-draw', field)"
|
||||
>
|
||||
<IconNewSection
|
||||
:width="18"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
v-if="field.areas?.length"
|
||||
class="dropdown dropdown-end"
|
||||
>
|
||||
<label
|
||||
tabindex="0"
|
||||
title="Settings"
|
||||
class="cursor-pointer text-transparent group-hover:text-base-content"
|
||||
title="Areas"
|
||||
class="cursor-pointer text-base-100 group-hover:text-base-content"
|
||||
>
|
||||
<IconSettings
|
||||
<IconShape
|
||||
:width="18"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
@@ -81,60 +66,8 @@
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
|
||||
draggable="true"
|
||||
@dragstart.prevent.stop
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<div
|
||||
v-if="field.type === 'text'"
|
||||
class="py-1.5 px-1 relative"
|
||||
@click.stop
|
||||
>
|
||||
<input
|
||||
v-model="field.default_value"
|
||||
type="text"
|
||||
placeholder="Default value"
|
||||
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
|
||||
@blur="save"
|
||||
>
|
||||
<label
|
||||
v-if="field.default_value"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
class="absolute -top-1 left-2.5 px-1 h-4"
|
||||
style="font-size: 8px"
|
||||
>
|
||||
Default value
|
||||
</label>
|
||||
</div>
|
||||
<li
|
||||
v-if="field.type != 'phone'"
|
||||
@click.stop
|
||||
>
|
||||
<label class="cursor-pointer py-1.5">
|
||||
<input
|
||||
v-model="field.required"
|
||||
type="checkbox"
|
||||
class="toggle toggle-xs"
|
||||
@update:model-value="save"
|
||||
>
|
||||
<span class="label-text">Required</span>
|
||||
</label>
|
||||
</li>
|
||||
<li
|
||||
v-if="field.type === 'text'"
|
||||
@click.stop
|
||||
>
|
||||
<label class="cursor-pointer py-1.5">
|
||||
<input
|
||||
v-model="field.readonly"
|
||||
type="checkbox"
|
||||
class="toggle toggle-xs"
|
||||
@update:model-value="save"
|
||||
>
|
||||
<span class="label-text">Read-only</span>
|
||||
</label>
|
||||
</li>
|
||||
<hr class="pb-0.5 mt-0.5">
|
||||
<li
|
||||
v-for="(area, index) in field.areas || []"
|
||||
:key="index"
|
||||
@@ -164,23 +97,21 @@
|
||||
Draw New Area
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
@click.prevent="copyToAllPages(field)"
|
||||
>
|
||||
<IconCopy
|
||||
:width="20"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
Copy to All Pages
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<button
|
||||
class="relative text-transparent group-hover:text-base-content pr-1"
|
||||
v-else
|
||||
title="Areas"
|
||||
class="relative cursor-pointer text-base-100 group-hover:text-base-content"
|
||||
@click="$emit('set-draw', field)"
|
||||
>
|
||||
<IconShape
|
||||
:width="18"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="relative text-base-100 group-hover:text-base-content"
|
||||
title="Remove"
|
||||
@click="$emit('remove', field)"
|
||||
>
|
||||
@@ -189,25 +120,41 @@
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex flex-col pr-1 text-base-100 group-hover:text-base-content">
|
||||
<button
|
||||
title="Up"
|
||||
class="relative"
|
||||
style="font-size: 10px; margin-bottom: -2px"
|
||||
@click="$emit('move-up')"
|
||||
>
|
||||
▲
|
||||
</button>
|
||||
<button
|
||||
title="Down"
|
||||
class="relative"
|
||||
style="font-size: 10px; margin-top: -2px"
|
||||
@click="$emit('move-down')"
|
||||
>
|
||||
▼
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="field.options"
|
||||
class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
|
||||
draggable="true"
|
||||
@dragstart.prevent.stop
|
||||
>
|
||||
<div
|
||||
v-for="(option, index) in field.options"
|
||||
:key="option.uuid"
|
||||
:key="index"
|
||||
class="flex space-x-1.5 items-center"
|
||||
>
|
||||
<span class="text-sm w-3.5">
|
||||
{{ index + 1 }}.
|
||||
</span>
|
||||
<input
|
||||
v-model="option.value"
|
||||
class="w-full input input-primary input-xs text-sm bg-transparent"
|
||||
v-model="field.options[index]"
|
||||
class="w-full input input-primary input-xs text-sm"
|
||||
type="text"
|
||||
required
|
||||
@blur="save"
|
||||
@@ -222,7 +169,7 @@
|
||||
<button
|
||||
v-if="field.options"
|
||||
class="text-center text-sm w-full pb-1"
|
||||
@click="addOption"
|
||||
@click="[field.options.push(''), save()]"
|
||||
>
|
||||
+ Add option
|
||||
</button>
|
||||
@@ -234,33 +181,25 @@
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
import FieldType from './field_type'
|
||||
import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
import { IconShape, IconNewSection, IconTrashX } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'TemplateField',
|
||||
components: {
|
||||
Contenteditable,
|
||||
IconSettings,
|
||||
IconShape,
|
||||
IconNewSection,
|
||||
IconTrashX,
|
||||
IconCopy,
|
||||
FieldType
|
||||
},
|
||||
inject: ['template', 'save', 'backgroundColor'],
|
||||
inject: ['template', 'save'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['set-draw', 'remove', 'scroll-to'],
|
||||
emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
|
||||
data () {
|
||||
return {
|
||||
isNameFocus: false
|
||||
@@ -280,23 +219,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyToAllPages (field) {
|
||||
const areaString = JSON.stringify(field.areas[0])
|
||||
|
||||
this.template.documents.forEach((attachment) => {
|
||||
attachment.preview_images.forEach((page) => {
|
||||
if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
|
||||
field.areas.push({ ...JSON.parse(areaString), page: parseInt(page.filename) })
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
|
||||
})
|
||||
|
||||
this.save()
|
||||
},
|
||||
onNameFocus (e) {
|
||||
this.isNameFocus = true
|
||||
|
||||
@@ -312,20 +234,13 @@ export default {
|
||||
closeDropdown () {
|
||||
document.activeElement.blur()
|
||||
},
|
||||
addOption () {
|
||||
this.field.options.push({ value: '', uuid: v4() })
|
||||
|
||||
this.save()
|
||||
},
|
||||
maybeUpdateOptions () {
|
||||
delete this.field.default_value
|
||||
|
||||
if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
|
||||
delete this.field.options
|
||||
}
|
||||
|
||||
if (['radio', 'multiple', 'select'].includes(this.field.type)) {
|
||||
this.field.options ||= [{ value: '', uuid: v4() }]
|
||||
this.field.options ||= ['']
|
||||
}
|
||||
|
||||
(this.field.areas || []).forEach((area) => {
|
||||
@@ -337,10 +252,8 @@ export default {
|
||||
})
|
||||
},
|
||||
onNameBlur (e) {
|
||||
const text = this.$refs.name.$refs.contenteditable.innerText.trim()
|
||||
|
||||
if (text) {
|
||||
this.field.name = text
|
||||
if (e.target.innerText.trim()) {
|
||||
this.field.name = e.target.innerText.trim()
|
||||
} else {
|
||||
this.field.name = ''
|
||||
this.$refs.name.$refs.contenteditable.innerText = this.defaultName
|
||||
|
||||
@@ -1,91 +1,5 @@
|
||||
<template>
|
||||
<div v-if="mobileView">
|
||||
<div class="flex space-x-2 items-end">
|
||||
<div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span
|
||||
class="w-3 h-3 flex-shrink-0 rounded-full"
|
||||
:class="colors[submitters.indexOf(selectedSubmitter)]"
|
||||
/>
|
||||
<Contenteditable
|
||||
v-model="selectedSubmitter.name"
|
||||
class="cursor-text"
|
||||
:icon-inline="true"
|
||||
:editable="editable"
|
||||
:select-on-edit-click="true"
|
||||
:icon-width="18"
|
||||
@update:model-value="$emit('name-change', selectedSubmitter)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown dropdown-top dropdown-end">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
|
||||
>
|
||||
<IconChevronUp
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
v-if="editable"
|
||||
tabindex="0"
|
||||
class="rounded-md min-w-max mb-2"
|
||||
:class="menuClasses"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<li
|
||||
v-for="(submitter, index) in submitters"
|
||||
:key="submitter.uuid"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="flex px-2 group justify-between items-center"
|
||||
:class="{ 'active': submitter === selectedSubmitter }"
|
||||
@click.prevent="selectSubmitter(submitter)"
|
||||
>
|
||||
<span class="py-1 flex items-center">
|
||||
<span
|
||||
class="rounded-full w-3 h-3 ml-1 mr-3"
|
||||
:class="colors[index]"
|
||||
/>
|
||||
<span>
|
||||
{{ submitter.name }}
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
v-if="submitters.length > 1 && editable"
|
||||
class="px-2"
|
||||
@click.stop="remove(submitter)"
|
||||
>
|
||||
<IconTrashX :width="18" />
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="submitters.length < 10 && editable">
|
||||
<a
|
||||
href="#"
|
||||
class="flex px-2"
|
||||
@click.prevent="addSubmitter"
|
||||
>
|
||||
<IconUserPlus
|
||||
:width="20"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
<span class="py-1">
|
||||
Add Submitter
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="dropdown"
|
||||
>
|
||||
<div class="dropdown">
|
||||
<label
|
||||
v-if="compact"
|
||||
tabindex="0"
|
||||
@@ -100,7 +14,7 @@
|
||||
<label
|
||||
v-else
|
||||
tabindex="0"
|
||||
class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
|
||||
class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span
|
||||
@@ -111,21 +25,15 @@
|
||||
v-model="selectedSubmitter.name"
|
||||
class="cursor-text"
|
||||
:icon-inline="true"
|
||||
:editable="editable"
|
||||
:select-on-edit-click="true"
|
||||
:icon-width="18"
|
||||
@update:model-value="$emit('name-change', selectedSubmitter)"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex items-center">
|
||||
<IconPlus
|
||||
width="18"
|
||||
height="18"
|
||||
/>
|
||||
<span>
|
||||
▼
|
||||
</span>
|
||||
</label>
|
||||
<ul
|
||||
v-if="editable || !compact"
|
||||
tabindex="0"
|
||||
:class="menuClasses"
|
||||
@click="closeDropdown"
|
||||
@@ -150,7 +58,7 @@
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
v-if="!compact && submitters.length > 1 && editable"
|
||||
v-if="!compact && submitters.length > 1"
|
||||
class="hidden group-hover:block px-2"
|
||||
@click.stop="remove(submitter)"
|
||||
>
|
||||
@@ -158,7 +66,7 @@
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="submitters.length < 10 && editable">
|
||||
<li v-if="submitters.length < 5">
|
||||
<a
|
||||
href="#"
|
||||
class="flex px-2"
|
||||
@@ -178,7 +86,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
|
||||
import { IconUserPlus, IconTrashX } from '@tabler/icons-vue'
|
||||
import Contenteditable from './contenteditable'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
@@ -187,30 +95,18 @@ export default {
|
||||
components: {
|
||||
IconUserPlus,
|
||||
Contenteditable,
|
||||
IconPlus,
|
||||
IconTrashX,
|
||||
IconChevronUp
|
||||
IconTrashX
|
||||
},
|
||||
props: {
|
||||
submitters: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
mobileView: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: true
|
||||
@@ -229,12 +125,7 @@ export default {
|
||||
'bg-sky-500',
|
||||
'bg-emerald-500',
|
||||
'bg-yellow-300',
|
||||
'bg-purple-600',
|
||||
'bg-pink-500',
|
||||
'bg-cyan-500',
|
||||
'bg-orange-500',
|
||||
'bg-lime-500',
|
||||
'bg-indigo-500'
|
||||
'bg-purple-600'
|
||||
]
|
||||
},
|
||||
names () {
|
||||
@@ -243,12 +134,7 @@ export default {
|
||||
'Second Submitter',
|
||||
'Third Submitter',
|
||||
'Fourth Submitter',
|
||||
'Fifth Submitter',
|
||||
'Sixth Submitter',
|
||||
'Seventh Submitter',
|
||||
'Eighth Submitter',
|
||||
'Ninth Submitter',
|
||||
'Tenth Submitter'
|
||||
'Fifth Submitter'
|
||||
]
|
||||
},
|
||||
selectedSubmitter () {
|
||||
|
||||
@@ -1,56 +1,50 @@
|
||||
<template>
|
||||
<span class="dropdown">
|
||||
<slot>
|
||||
<label
|
||||
tabindex="0"
|
||||
:title="fieldNames[modelValue]"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<component
|
||||
:is="fieldIcons[modelValue]"
|
||||
:width="buttonWidth"
|
||||
:class="buttonClasses"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</label>
|
||||
</slot>
|
||||
<ul
|
||||
v-if="editable"
|
||||
<label
|
||||
tabindex="0"
|
||||
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
|
||||
:title="fieldNames[modelValue]"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<component
|
||||
:is="fieldIcons[modelValue]"
|
||||
:width="buttonWidth"
|
||||
:class="buttonClasses"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
|
||||
:class="menuClasses"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<template
|
||||
<li
|
||||
v-for="(icon, type) in fieldIcons"
|
||||
:key="type"
|
||||
>
|
||||
<li v-if="withPhone || type !== 'phone'">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
:class="{ 'active': type === modelValue }"
|
||||
@click.prevent="$emit('update:model-value', type)"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ fieldNames[type] }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
:class="{ 'active': type === modelValue }"
|
||||
@click.prevent="$emit('update:model-value', type)"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ fieldNames[type] }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
|
||||
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3 } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'FiledTypeDropdown',
|
||||
inject: ['withPhone'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
@@ -66,11 +60,6 @@ export default {
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
buttonWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
@@ -83,7 +72,6 @@ export default {
|
||||
return {
|
||||
text: 'Text',
|
||||
signature: 'Signature',
|
||||
initials: 'Initials',
|
||||
date: 'Date',
|
||||
image: 'Image',
|
||||
file: 'File',
|
||||
@@ -91,24 +79,21 @@ export default {
|
||||
checkbox: 'Checkbox',
|
||||
multiple: 'Multiple',
|
||||
radio: 'Radio',
|
||||
cells: 'Cells',
|
||||
phone: 'Phone'
|
||||
cells: 'Cells'
|
||||
}
|
||||
},
|
||||
fieldIcons () {
|
||||
return {
|
||||
text: IconTextSize,
|
||||
signature: IconWritingSign,
|
||||
initials: IconLetterCaseUpper,
|
||||
date: IconCalendarEvent,
|
||||
image: IconPhoto,
|
||||
file: IconPaperclip,
|
||||
select: IconSelect,
|
||||
checkbox: IconCheckbox,
|
||||
radio: IconCircleDot,
|
||||
multiple: IconChecks,
|
||||
cells: IconColumns3,
|
||||
phone: IconPhoneCheck
|
||||
multiple: IconChecks,
|
||||
radio: IconCircleDot
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,136 +1,90 @@
|
||||
<template>
|
||||
<div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
|
||||
<div class="sticky -top-1 bg-base-100 pt-1 -mt-1 z-10">
|
||||
<FieldSubmitter
|
||||
:model-value="selectedSubmitter.uuid"
|
||||
class="w-full rounded-lg"
|
||||
:class="{ 'bg-base-100': withStickySubmitters }"
|
||||
class="w-full bg-base-100"
|
||||
:submitters="submitters"
|
||||
:editable="editable"
|
||||
@new-submitter="save"
|
||||
@remove="removeSubmitter"
|
||||
@name-change="save"
|
||||
@update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mb-1 mt-2"
|
||||
@dragover.prevent="onFieldDragover"
|
||||
@drop="save"
|
||||
>
|
||||
<div class="mb-1 mt-2">
|
||||
<Field
|
||||
v-for="field in submitterFields"
|
||||
:key="field.uuid"
|
||||
:data-uuid="field.uuid"
|
||||
:field="field"
|
||||
:type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
|
||||
:editable="editable && !dragField"
|
||||
:draggable="editable"
|
||||
@dragstart="dragField = field"
|
||||
@dragend="dragField = null"
|
||||
@remove="removeField"
|
||||
@move-up="move(field, -1)"
|
||||
@move-down="move(field, 1)"
|
||||
@scroll-to="$emit('scroll-to-area', $event)"
|
||||
@set-draw="$emit('set-draw', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="submitterDefaultFields.length">
|
||||
<hr class="mb-2">
|
||||
<template
|
||||
v-for="field in submitterDefaultFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<div
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
draggable="true"
|
||||
class="border border-base-300 rounded rounded-tr-none relative group mb-2"
|
||||
@dragstart="onDragstart({ type: 'text', ...field })"
|
||||
@dragend="$emit('drag-end')"
|
||||
>
|
||||
<div class="flex items-center justify-between relative cursor-grab">
|
||||
<div class="flex items-center p-1 space-x-1">
|
||||
<IconDrag />
|
||||
<FieldType
|
||||
:model-value="field.type || 'text'"
|
||||
:editable="false"
|
||||
:button-width="20"
|
||||
/>
|
||||
<span class="block pl-0.5">
|
||||
{{ field.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="editable"
|
||||
class="grid grid-cols-3 gap-1 pb-2"
|
||||
>
|
||||
<template
|
||||
<div class="grid grid-cols-3 gap-1 pb-2">
|
||||
<button
|
||||
v-for="(icon, type) in fieldIcons"
|
||||
:key="type"
|
||||
draggable="true"
|
||||
class="flex items-center justify-center border border-dashed border-base-300 bg-base-100 w-full rounded relative"
|
||||
@dragstart="onDragstart(type)"
|
||||
@dragend="$emit('drag-end')"
|
||||
@click="addField(type)"
|
||||
>
|
||||
<button
|
||||
v-if="withPhone || type != 'phone'"
|
||||
draggable="true"
|
||||
class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
@dragstart="onDragstart({ type: type })"
|
||||
@dragend="$emit('drag-end')"
|
||||
@click="addField(type)"
|
||||
>
|
||||
<div class="w-0 absolute left-0">
|
||||
<IconDrag class="cursor-grab" />
|
||||
</div>
|
||||
<div class="flex items-center flex-col px-2 py-2">
|
||||
<component :is="icon" />
|
||||
<span class="text-xs mt-1">
|
||||
{{ fieldNames[type] }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="tooltip tooltip-bottom-end flex"
|
||||
data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
|
||||
>
|
||||
<a
|
||||
href="https://www.docuseal.co/pricing"
|
||||
target="_blank"
|
||||
class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
<div class="w-0 absolute left-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="cursor-grab"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<div class="w-0 absolute left-0">
|
||||
<IconLock
|
||||
width="18"
|
||||
height="18"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center flex-col px-2 py-2">
|
||||
<component :is="icon" />
|
||||
<span class="text-xs mt-1">
|
||||
{{ fieldNames[type] }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center flex-col px-2 py-2">
|
||||
<component :is="icon" />
|
||||
<span class="text-xs mt-1">
|
||||
{{ fieldNames[type] }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="fields.length < 4 && editable"
|
||||
v-if="fields.length < 4"
|
||||
class="text-xs p-2 border border-base-200 rounded"
|
||||
>
|
||||
<ul class="list-disc list-outside ml-3">
|
||||
<ui>
|
||||
<li>
|
||||
Draw a text field on the page with a mouse
|
||||
</li>
|
||||
<li>
|
||||
Single click of the page to add a checkbox
|
||||
</li>
|
||||
<li>
|
||||
Drag & drop any other field type on the page
|
||||
</li>
|
||||
<li>
|
||||
Click on the field type above to add it to the form without drawing it on the document
|
||||
</li>
|
||||
</ul>
|
||||
</ui>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -139,39 +93,19 @@ import Field from './field'
|
||||
import { v4 } from 'uuid'
|
||||
import FieldType from './field_type'
|
||||
import FieldSubmitter from './field_submitter'
|
||||
import { IconLock } from '@tabler/icons-vue'
|
||||
import IconDrag from './icon_drag'
|
||||
|
||||
export default {
|
||||
name: 'TemplateFields',
|
||||
components: {
|
||||
Field,
|
||||
FieldType,
|
||||
FieldSubmitter,
|
||||
IconDrag,
|
||||
IconLock
|
||||
FieldSubmitter
|
||||
},
|
||||
inject: ['save', 'backgroundColor', 'withPhone'],
|
||||
inject: ['save'],
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
defaultFields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
withStickySubmitters: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
submitters: {
|
||||
type: Array,
|
||||
required: true
|
||||
@@ -182,44 +116,16 @@ export default {
|
||||
}
|
||||
},
|
||||
emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
|
||||
data () {
|
||||
return {
|
||||
dragField: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
fieldIcons: FieldType.computed.fieldIcons,
|
||||
submitterFields () {
|
||||
return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
|
||||
},
|
||||
submitterDefaultFields () {
|
||||
return this.defaultFields.filter((f) => {
|
||||
return !this.fields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDragstart (field) {
|
||||
this.$emit('set-drag', field)
|
||||
},
|
||||
onFieldDragover (e) {
|
||||
const targetFieldUuid = e.target.closest('[data-uuid]')?.dataset?.uuid
|
||||
|
||||
if (this.dragField && targetFieldUuid && this.dragField.uuid !== targetFieldUuid) {
|
||||
const field = this.fields.find((f) => f.uuid === targetFieldUuid)
|
||||
|
||||
const currentIndex = this.fields.indexOf(this.dragField)
|
||||
const targetIndex = this.fields.indexOf(field)
|
||||
|
||||
if (currentIndex < targetIndex) {
|
||||
this.fields.splice(targetIndex + 1, 0, this.dragField)
|
||||
this.fields.splice(currentIndex, 1)
|
||||
} else {
|
||||
this.fields.splice(targetIndex, 0, this.dragField)
|
||||
this.fields.splice(currentIndex + 1, 1)
|
||||
}
|
||||
}
|
||||
onDragstart (fieldType) {
|
||||
this.$emit('set-drag', fieldType)
|
||||
},
|
||||
removeSubmitter (submitter) {
|
||||
[...this.fields].forEach((field) => {
|
||||
@@ -236,6 +142,26 @@ export default {
|
||||
|
||||
this.save()
|
||||
},
|
||||
move (field, direction) {
|
||||
const currentIndex = this.submitterFields.indexOf(field)
|
||||
const fieldsIndex = this.fields.indexOf(field)
|
||||
|
||||
this.fields.splice(fieldsIndex, 1)
|
||||
|
||||
if (currentIndex + direction > this.submitterFields.length) {
|
||||
const firstIndex = this.fields.indexOf(this.submitterFields[0])
|
||||
|
||||
this.fields.splice(firstIndex, 0, field)
|
||||
} else if (currentIndex + direction < 0) {
|
||||
const lastIndex = this.fields.indexOf(this.submitterFields[this.submitterFields.length - 1])
|
||||
|
||||
this.fields.splice(lastIndex + 1, 0, field)
|
||||
} else {
|
||||
this.fields.splice(fieldsIndex + direction, 0, field)
|
||||
}
|
||||
|
||||
this.save()
|
||||
},
|
||||
removeField (field) {
|
||||
this.fields.splice(this.fields.indexOf(field), 1)
|
||||
|
||||
@@ -245,14 +171,13 @@ export default {
|
||||
const field = {
|
||||
name: '',
|
||||
uuid: v4(),
|
||||
required: type !== 'checkbox',
|
||||
areas: [],
|
||||
required: true,
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
type
|
||||
}
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(type)) {
|
||||
field.options = [{ value: '', uuid: v4() }]
|
||||
field.options = ['']
|
||||
}
|
||||
|
||||
this.fields.push(field)
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
stroke="none"
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DragIcon'
|
||||
}
|
||||
</script>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<div class="fixed text-center w-full bottom-0 pr-6 mb-4">
|
||||
<span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
|
||||
<div class="flex items-center space-x-2">
|
||||
<component
|
||||
:is="fieldIcons[drawField.type]"
|
||||
:width="20"
|
||||
:height="20"
|
||||
class="inline"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
<span> Draw {{ fieldNames[drawField.type] }} Field </span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="link block text-center"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
</span>
|
||||
<FieldSubmitter
|
||||
:model-value="selectedSubmitter.uuid"
|
||||
:submitters="submitters"
|
||||
:editable="editable"
|
||||
:mobile-view="true"
|
||||
@new-submitter="save"
|
||||
@remove="removeSubmitter"
|
||||
@name-change="save"
|
||||
@update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Field from './field'
|
||||
import FieldType from './field_type'
|
||||
import FieldSubmitter from './field_submitter'
|
||||
|
||||
export default {
|
||||
name: 'MobileDrawField',
|
||||
components: {
|
||||
Field,
|
||||
FieldSubmitter
|
||||
},
|
||||
inject: ['save'],
|
||||
props: {
|
||||
drawField: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
submitters: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
selectedSubmitter: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['change-submitter', 'cancel'],
|
||||
computed: {
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
fieldIcons: FieldType.computed.fieldIcons
|
||||
},
|
||||
methods: {
|
||||
removeSubmitter (submitter) {
|
||||
[...this.fields].forEach((field) => {
|
||||
if (field.submitter_uuid === submitter.uuid) {
|
||||
this.removeField(field)
|
||||
}
|
||||
})
|
||||
|
||||
this.submitters.splice(this.submitters.indexOf(submitter), 1)
|
||||
|
||||
if (this.selectedSubmitter === submitter) {
|
||||
this.$emit('change-submitter', this.submitters[0])
|
||||
}
|
||||
|
||||
this.save()
|
||||
},
|
||||
removeField (field) {
|
||||
this.fields.splice(this.fields.indexOf(field), 1)
|
||||
|
||||
this.save()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,16 +1,12 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative cursor-crosshair select-none"
|
||||
:style="drawField ? 'touch-action: none' : ''"
|
||||
>
|
||||
<div class="relative cursor-crosshair select-none">
|
||||
<img
|
||||
ref="image"
|
||||
loading="lazy"
|
||||
:src="image.url"
|
||||
:width="width"
|
||||
class="shadow-md mb-4"
|
||||
:height="height"
|
||||
class="border rounded mb-4"
|
||||
@load="onImageLoad"
|
||||
loading="lazy"
|
||||
>
|
||||
<div
|
||||
class="top-0 bottom-0 left-0 right-0 absolute"
|
||||
@@ -22,7 +18,6 @@
|
||||
:ref="setAreaRefs"
|
||||
:area="item.area"
|
||||
:field="item.field"
|
||||
:editable="editable"
|
||||
@start-resize="resizeDirection = $event"
|
||||
@stop-resize="resizeDirection = null"
|
||||
@start-drag="isMove = true"
|
||||
@@ -37,13 +32,12 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile)"
|
||||
v-show="resizeDirection || isMove || isDrag || showMask"
|
||||
id="mask"
|
||||
ref="mask"
|
||||
class="top-0 bottom-0 left-0 right-0 absolute"
|
||||
:class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
|
||||
class="top-0 bottom-0 left-0 right-0 absolute z-10"
|
||||
:class="{ 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
|
||||
@pointermove="onPointermove"
|
||||
@pointerdown="onStartDraw"
|
||||
@dragover.prevent
|
||||
@drop="onDrop"
|
||||
@pointerup="onPointerup"
|
||||
@@ -78,11 +72,6 @@ export default {
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
isDrag: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@@ -104,9 +93,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile () {
|
||||
return /android|iphone|ipad/i.test(navigator.userAgent)
|
||||
},
|
||||
resizeDirectionClasses () {
|
||||
return {
|
||||
nwse: 'cursor-nwse-resize',
|
||||
@@ -124,10 +110,6 @@ export default {
|
||||
this.areaRefs = []
|
||||
},
|
||||
methods: {
|
||||
onImageLoad (e) {
|
||||
e.target.setAttribute('width', e.target.naturalWidth)
|
||||
e.target.setAttribute('height', e.target.naturalHeight)
|
||||
},
|
||||
setAreaRefs (el) {
|
||||
if (el) {
|
||||
this.areaRefs.push(el)
|
||||
@@ -143,14 +125,6 @@ export default {
|
||||
})
|
||||
},
|
||||
onStartDraw (e) {
|
||||
if (this.isMobile && !this.drawField) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.editable) {
|
||||
return
|
||||
}
|
||||
|
||||
this.showMask = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -9,56 +9,39 @@
|
||||
loading="lazy"
|
||||
>
|
||||
<div
|
||||
class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
|
||||
class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute"
|
||||
@click="$emit('scroll-to', item)"
|
||||
>
|
||||
<div
|
||||
v-if="editable"
|
||||
class="flex justify-between w-full"
|
||||
class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<div style="width: 26px" />
|
||||
<div class="">
|
||||
<ReplaceButton
|
||||
v-if="withReplaceButton"
|
||||
:is-direct-upload="isDirectUpload"
|
||||
:template-id="template.id"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
class="opacity-0 group-hover:opacity-100"
|
||||
@click.stop
|
||||
@success="$emit('replace', { replaceSchemaItem: item, ...$event })"
|
||||
/>
|
||||
<div class="rounded-bl rounded-tr bg-white border">
|
||||
<button
|
||||
class="rounded-bl rounded-tr hover:text-base-100 hover:bg-base-content w-full transition-colors"
|
||||
style="width: 24px"
|
||||
@click.stop="$emit('remove', item)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
|
||||
v-if="withArrows"
|
||||
class="flex flex-col border rounded-br rounded-tl bg-white divide-y"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('remove', item)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="withArrows"
|
||||
class="flex flex-col space-y-1"
|
||||
<button
|
||||
class="rounded-tl hover:text-base-100 hover:bg-base-content w-full transition-colors"
|
||||
style="width: 24px"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
<button
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
class="rounded-br hover:text-base-100 hover:bg-base-content w-full transition-colors"
|
||||
style="width: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,67 +60,34 @@
|
||||
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
import Upload from './upload'
|
||||
import ReplaceButton from './replace'
|
||||
|
||||
export default {
|
||||
name: 'DocumentPreview',
|
||||
components: {
|
||||
Contenteditable,
|
||||
ReplaceButton
|
||||
Contenteditable
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
document: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
acceptFileTypes: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'image/*, application/pdf'
|
||||
},
|
||||
withReplaceButton: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: true
|
||||
},
|
||||
isDirectUpload: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
withArrows: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace'],
|
||||
emits: ['scroll-to', 'change', 'remove', 'up', 'down'],
|
||||
computed: {
|
||||
previewImage () {
|
||||
return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))[0]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.isDirectUpload) {
|
||||
import('@rails/activestorage')
|
||||
return this.document.preview_images[0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload: Upload.methods.upload,
|
||||
onUpdateName (value) {
|
||||
this.item.name = value
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user