From 45adee6ddfa8ad6d38dee1934854f0ee52ffd972 Mon Sep 17 00:00:00 2001 From: Alex Turchyn Date: Tue, 30 May 2023 00:55:14 +0300 Subject: [PATCH] add settings navbar --- app/javascript/application.js | 2 + app/javascript/elements/menu_active.js | 9 ++ app/views/email_settings/index.html.erb | 59 +++++---- app/views/esign_settings/index.html.erb | 27 +++-- app/views/shared/_settings_nav.html.erb | 33 +++++ app/views/storage_settings/index.html.erb | 139 ++++++++++++---------- app/views/users/index.html.erb | 79 ++++++------ config/routes.rb | 1 + tailwind.config.js | 9 +- 9 files changed, 219 insertions(+), 139 deletions(-) create mode 100644 app/javascript/elements/menu_active.js create mode 100644 app/views/shared/_settings_nav.html.erb diff --git a/app/javascript/application.js b/app/javascript/application.js index b4db160c..c92af94a 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -6,6 +6,7 @@ import ToggleVisible from './elements/toggle_visible' import DisableHidden from './elements/disable_hidden' import TurboModal from './elements/turbo_modal' import FileDropzone from './elements/file_dropzone' +import MenuActive from './elements/menu_active' import FlowBuilder from './flow_builder/builder' @@ -17,6 +18,7 @@ window.customElements.define('toggle-visible', ToggleVisible) window.customElements.define('disable-hidden', DisableHidden) window.customElements.define('turbo-modal', TurboModal) window.customElements.define('file-dropzone', FileDropzone) +window.customElements.define('menu-active', MenuActive) window.customElements.define('flow-builder', class extends HTMLElement { connectedCallback () { diff --git a/app/javascript/elements/menu_active.js b/app/javascript/elements/menu_active.js new file mode 100644 index 00000000..e9c434d2 --- /dev/null +++ b/app/javascript/elements/menu_active.js @@ -0,0 +1,9 @@ +export default class extends HTMLElement { + connectedCallback () { + this.querySelectorAll('a').forEach((link) => { + if (document.location.pathname.startsWith(link.pathname)) { + link.classList.add('bg-base-300') + } + }) + } +} diff --git a/app/views/email_settings/index.html.erb b/app/views/email_settings/index.html.erb index 59ff27ca..3d18d874 100644 --- a/app/views/email_settings/index.html.erb +++ b/app/views/email_settings/index.html.erb @@ -1,27 +1,34 @@ -Email settings -<% value = @encrypted_config.value || {} %> -<%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> - <%= f.fields_for :value do |ff| %> -
- <%= ff.label :host %> - <%= ff.text_field :host, value: value['host'], required: true %> +
+
+ <%= render 'shared/settings_nav' %> +
+ Email settings + <% value = @encrypted_config.value || {} %> + <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> + <%= f.fields_for :value do |ff| %> +
+ <%= ff.label :host %> + <%= ff.text_field :host, value: value['host'], required: true %> +
+
+ <%= ff.label :port %> + <%= ff.text_field :port, value: value['port'], required: true %> +
+
+ <%= ff.label :username %> + <%= ff.text_field :username, value: value['username'], required: true %> +
+
+ <%= ff.label :password %> + <%= ff.password_field :password, value: value['password'], required: true %> +
+
+ <%= ff.label :from_email, 'Send from' %> + <%= ff.email_field :from_email, value: value['from_email'], required: true %> +
+ <% end %> + <%= f.button button_title %> + <% end %>
-
- <%= ff.label :port %> - <%= ff.text_field :port, value: value['port'], required: true %> -
-
- <%= ff.label :username %> - <%= ff.text_field :username, value: value['username'], required: true %> -
-
- <%= ff.label :password %> - <%= ff.password_field :password, value: value['password'], required: true %> -
-
- <%= ff.label :from_email, 'Send from' %> - <%= ff.email_field :from_email, value: value['from_email'], required: true %> -
- <% end %> - <%= f.button button_title %> -<% end %> +
+
diff --git a/app/views/esign_settings/index.html.erb b/app/views/esign_settings/index.html.erb index 16a9bf6e..aa0cf1fc 100644 --- a/app/views/esign_settings/index.html.erb +++ b/app/views/esign_settings/index.html.erb @@ -1,10 +1,17 @@ -<%= form_for '', url: settings_esign_index_path, method: :post do |f| %> - - - - <%= f.button button_title %> -<% end %> +
+
+ <%= render 'shared/settings_nav' %> +
+ <%= form_for '', url: settings_esign_index_path, method: :post do |f| %> + + + + <%= f.button button_title %> + <% end %> +
+
+
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb new file mode 100644 index 00000000..d62de923 --- /dev/null +++ b/app/views/shared/_settings_nav.html.erb @@ -0,0 +1,33 @@ + +
+ +
+ diff --git a/app/views/storage_settings/index.html.erb b/app/views/storage_settings/index.html.erb index bbbb5a8a..eec00247 100644 --- a/app/views/storage_settings/index.html.erb +++ b/app/views/storage_settings/index.html.erb @@ -1,67 +1,74 @@ -Storage settings -<% value = @encrypted_config.value || { 'service' => 'disk' } %> -<% configs = value['configs'] || {} %> -<%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> - <% options = [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']] %> - - <% [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']].each do |(label, val)| %> - <%= f.radio_button :selected, val, checked: value['service'] == val, data: { action: 'change:toggle-visible#trigger' } %> - <%= f.label :selected, label, value: val %> - <% end %> - - - <%= f.fields_for :value do |ff| %> - <%= ff.hidden_field :service, value: 'disk' %> - <% end %> -
- Disk storage - no configs needed but make sure you have a persistant disk (heroku doesnt not have one) -
- - - <%= f.fields_for :value do |ff| %> - <%= ff.hidden_field :service, value: 'aws_s3' %> - <%= ff.fields_for :configs, configs do |fff| %> -
- <%= fff.label :access_key_id, 'Access key ID' %> - <%= fff.text_field :access_key_id, value: configs['access_key_id'], required: true %> -
-
- <%= fff.label :secret_access_key %> - <%= fff.password_field :secret_access_key, value: configs['secret_access_key'], required: true %> -
-
- <%= fff.label :region %> - <%= fff.text_field :region, value: configs['region'], required: true %> -
-
- <%= fff.label :bucket %> - <%= fff.text_field :bucket, value: value['service'] == 'aws_s3' ? configs['bucket'] : '', required: true %> -
-
- <%= fff.label :endpoint %> - <%= fff.text_field :endpoint, value: configs['endpoint'], type: :url %> -
- <% end %> - <% end %> - - - <%= f.fields_for :value do |ff| %> - <%= ff.hidden_field :service, value: 'google' %> - <%= ff.fields_for :configs, configs do |fff| %> -
- <%= fff.label :project, 'Project' %> - <%= fff.text_field :project, value: configs['project'], required: true %> -
-
- <%= fff.label :bucket %> - <%= fff.text_field :bucket, value: value['service'] == 'google' ? configs['bucket'] : '', required: true %> -
-
- <%= fff.label :credentials, 'Credentials (JSON key content)' %> - <%= fff.text_area :credentials, value: configs['credentials'], required: true %> -
+
+
+ <%= render 'shared/settings_nav' %> +
+ Storage settings + <% value = @encrypted_config.value || { 'service' => 'disk' } %> + <% configs = value['configs'] || {} %> + <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> + <% options = [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']] %> + + <% [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']].each do |(label, val)| %> + <%= f.radio_button :selected, val, checked: value['service'] == val, data: { action: 'change:toggle-visible#trigger' } %> + <%= f.label :selected, label, value: val %> + <% end %> + + + <%= f.fields_for :value do |ff| %> + <%= ff.hidden_field :service, value: 'disk' %> + <% end %> +
+ Disk storage - no configs needed but make sure you have a persistant disk (heroku doesnt not have one) +
+ + + <%= f.fields_for :value do |ff| %> + <%= ff.hidden_field :service, value: 'aws_s3' %> + <%= ff.fields_for :configs, configs do |fff| %> +
+ <%= fff.label :access_key_id, 'Access key ID' %> + <%= fff.text_field :access_key_id, value: configs['access_key_id'], required: true %> +
+
+ <%= fff.label :secret_access_key %> + <%= fff.password_field :secret_access_key, value: configs['secret_access_key'], required: true %> +
+
+ <%= fff.label :region %> + <%= fff.text_field :region, value: configs['region'], required: true %> +
+
+ <%= fff.label :bucket %> + <%= fff.text_field :bucket, value: value['service'] == 'aws_s3' ? configs['bucket'] : '', required: true %> +
+
+ <%= fff.label :endpoint %> + <%= fff.text_field :endpoint, value: configs['endpoint'], type: :url %> +
+ <% end %> + <% end %> + + + <%= f.fields_for :value do |ff| %> + <%= ff.hidden_field :service, value: 'google' %> + <%= ff.fields_for :configs, configs do |fff| %> +
+ <%= fff.label :project, 'Project' %> + <%= fff.text_field :project, value: configs['project'], required: true %> +
+
+ <%= fff.label :bucket %> + <%= fff.text_field :bucket, value: value['service'] == 'google' ? configs['bucket'] : '', required: true %> +
+
+ <%= fff.label :credentials, 'Credentials (JSON key content)' %> + <%= fff.text_area :credentials, value: configs['credentials'], required: true %> +
+ <% end %> + <% end %> + + <%= f.button button_title %> <% end %> - <% end %> - - <%= f.button button_title %> -<% end %> +
+
+
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb index 84038708..9c15dff7 100644 --- a/app/views/users/index.html.erb +++ b/app/views/users/index.html.erb @@ -1,37 +1,44 @@ -
- Users - New User +
+
+ <%= render 'shared/settings_nav' %> +
+
+ Users + New User +
+ + + + + + + + <% @users.each do |user| %> + + + + + + + <% end %> +
+ User + + Role + + Last session + +
+ <%= user.full_name %>
+ <%= user.email %> + 		+ <%= user.role %> + + <%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %> + + <%= link_to 'Edit', edit_user_path(user), data: { turbo_frame: 'modal' } %> + <%= button_to 'Remove', user_path(user), method: :delete, data: { turbo_confirm: 'Are you sure?' } %> +
+
+
- - - - - - - - <% @users.each do |user| %> - - - - - - - <% end %> -
- User - - Role - - Last session - -
- <%= user.full_name %>
- <%= user.email %> - 		- <%= user.role %> - - <%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %> - - <%= link_to 'Edit', edit_user_path(user), data: { turbo_frame: 'modal' } %> - <%= button_to 'Remove', user_path(user), method: :delete, data: { turbo_confirm: 'Are you sure?' } %> -
diff --git a/config/routes.rb b/config/routes.rb index 52fcd7d6..435cb7e5 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -55,6 +55,7 @@ Rails.application.routes.draw do resources :storage, only: %i[index create], controller: 'storage_settings' resources :email, only: %i[index create], controller: 'email_settings' resources :esign, only: %i[index create], controller: 'esign_settings' + resources :profile, only: %i[index create] resources :users, only: %i[index] end end diff --git a/tailwind.config.js b/tailwind.config.js index 7fde8911..a18baed5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,13 @@ module.exports = { require('daisyui') ], daisyui: { - themes: ['cupcake'] + themes: [ + { + cupcake: { + ...require('daisyui/src/colors/themes')['[data-theme=cupcake]'], + primary: '#E4E0E1' + } + } + ] } }