add settings navbar

pull/105/head
Alex Turchyn 2 years ago
parent 1435d55727
commit 45adee6ddf

@ -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 () {

@ -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')
}
})
}
}

@ -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| %>
<div>
<%= ff.label :host %>
<%= ff.text_field :host, value: value['host'], required: true %>
<div class="max-w-6xl mx-auto">
<div class="flex space-x-8">
<%= render 'shared/settings_nav' %>
<div class="mt-4">
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| %>
<div>
<%= ff.label :host %>
<%= ff.text_field :host, value: value['host'], required: true %>
</div>
<div>
<%= ff.label :port %>
<%= ff.text_field :port, value: value['port'], required: true %>
</div>
<div>
<%= ff.label :username %>
<%= ff.text_field :username, value: value['username'], required: true %>
</div>
<div>
<%= ff.label :password %>
<%= ff.password_field :password, value: value['password'], required: true %>
</div>
<div>
<%= ff.label :from_email, 'Send from' %>
<%= ff.email_field :from_email, value: value['from_email'], required: true %>
</div>
<% end %>
<%= f.button button_title %>
<% end %>
</div>
<div>
<%= ff.label :port %>
<%= ff.text_field :port, value: value['port'], required: true %>
</div>
<div>
<%= ff.label :username %>
<%= ff.text_field :username, value: value['username'], required: true %>
</div>
<div>
<%= ff.label :password %>
<%= ff.password_field :password, value: value['password'], required: true %>
</div>
<div>
<%= ff.label :from_email, 'Send from' %>
<%= ff.email_field :from_email, value: value['from_email'], required: true %>
</div>
<% end %>
<%= f.button button_title %>
<% end %>
</div>
</div>

@ -1,10 +1,17 @@
<%= form_for '', url: settings_esign_index_path, method: :post do |f| %>
<file-dropzone data-name="verify_attachments">
<label for="file">
<input id="attachment_uuid" name="attachment_uuid" class="hidden" data-target="file-dropzone.valueField" type="text">
<input id="file" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file">
LCick to upload
</label>
</file-dropzone>
<%= f.button button_title %>
<% end %>
<div class="max-w-6xl mx-auto">
<div class="flex space-x-8">
<%= render 'shared/settings_nav' %>
<div class="mt-4">
<%= form_for '', url: settings_esign_index_path, method: :post do |f| %>
<file-dropzone data-name="verify_attachments">
<label for="file">
<input id="attachment_uuid" name="attachment_uuid" class="hidden" data-target="file-dropzone.valueField" type="text">
<input id="file" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file">
LCick to upload
</label>
</file-dropzone>
<%= f.button button_title %>
<% end %>
</div>
</div>
</div>

@ -0,0 +1,33 @@
<menu-active class="block">
<div class="mt-4 -ml-3.5">
<ul class="menu menu-compact px-2 w-52">
<li class="menu-title"><span>Settings</span></li>
<li></li>
<li>
<a href="<%= settings_profile_index_path %>" class="hover:bg-base-300">
Profile
</a>
</li>
<li>
<a href="<%= settings_email_index_path %>" class="hover:bg-base-300">
Email
</a>
</li>
<li>
<a href="<%= settings_storage_index_path %>" class="hover:bg-base-300">
Storage
</a>
</li>
<li>
<a href="<%= settings_esign_index_path %>" class="hover:bg-base-300">
eSign
</a>
</li>
<li>
<a href="<%= settings_users_path %>" class="hover:bg-base-300">
Team
</a>
</li>
</ul>
</div>
</menu-active>

@ -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']] %>
<toggle-visible data-element-ids="<%= options.map(&:last).to_json %>">
<% [['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 %>
</toggle-visible>
<disable-hidden id="disk" class="<%= 'hidden' if value['service'] != 'disk' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'disk' %>
<% end %>
<div>
Disk storage - no configs needed but make sure you have a persistant disk (heroku doesnt not have one)
</div>
</disable-hidden>
<disable-hidden id="aws_s3" class="<%= 'hidden' if value['service'] != 'aws_s3' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'aws_s3' %>
<%= ff.fields_for :configs, configs do |fff| %>
<div>
<%= fff.label :access_key_id, 'Access key ID' %>
<%= fff.text_field :access_key_id, value: configs['access_key_id'], required: true %>
</div>
<div>
<%= fff.label :secret_access_key %>
<%= fff.password_field :secret_access_key, value: configs['secret_access_key'], required: true %>
</div>
<div>
<%= fff.label :region %>
<%= fff.text_field :region, value: configs['region'], required: true %>
</div>
<div>
<%= fff.label :bucket %>
<%= fff.text_field :bucket, value: value['service'] == 'aws_s3' ? configs['bucket'] : '', required: true %>
</div>
<div>
<%= fff.label :endpoint %>
<%= fff.text_field :endpoint, value: configs['endpoint'], type: :url %>
</div>
<% end %>
<% end %>
</disable-hidden>
<disable-hidden id="google" class="<%= 'hidden' if value['service'] != 'google' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'google' %>
<%= ff.fields_for :configs, configs do |fff| %>
<div>
<%= fff.label :project, 'Project' %>
<%= fff.text_field :project, value: configs['project'], required: true %>
</div>
<div>
<%= fff.label :bucket %>
<%= fff.text_field :bucket, value: value['service'] == 'google' ? configs['bucket'] : '', required: true %>
</div>
<div>
<%= fff.label :credentials, 'Credentials (JSON key content)' %>
<%= fff.text_area :credentials, value: configs['credentials'], required: true %>
</div>
<div class="max-w-6xl mx-auto">
<div class="flex space-x-8">
<%= render 'shared/settings_nav' %>
<div class="mt-4">
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']] %>
<toggle-visible data-element-ids="<%= options.map(&:last).to_json %>">
<% [['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 %>
</toggle-visible>
<disable-hidden id="disk" class="<%= 'hidden' if value['service'] != 'disk' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'disk' %>
<% end %>
<div>
Disk storage - no configs needed but make sure you have a persistant disk (heroku doesnt not have one)
</div>
</disable-hidden>
<disable-hidden id="aws_s3" class="<%= 'hidden' if value['service'] != 'aws_s3' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'aws_s3' %>
<%= ff.fields_for :configs, configs do |fff| %>
<div>
<%= fff.label :access_key_id, 'Access key ID' %>
<%= fff.text_field :access_key_id, value: configs['access_key_id'], required: true %>
</div>
<div>
<%= fff.label :secret_access_key %>
<%= fff.password_field :secret_access_key, value: configs['secret_access_key'], required: true %>
</div>
<div>
<%= fff.label :region %>
<%= fff.text_field :region, value: configs['region'], required: true %>
</div>
<div>
<%= fff.label :bucket %>
<%= fff.text_field :bucket, value: value['service'] == 'aws_s3' ? configs['bucket'] : '', required: true %>
</div>
<div>
<%= fff.label :endpoint %>
<%= fff.text_field :endpoint, value: configs['endpoint'], type: :url %>
</div>
<% end %>
<% end %>
</disable-hidden>
<disable-hidden id="google" class="<%= 'hidden' if value['service'] != 'google' %>">
<%= f.fields_for :value do |ff| %>
<%= ff.hidden_field :service, value: 'google' %>
<%= ff.fields_for :configs, configs do |fff| %>
<div>
<%= fff.label :project, 'Project' %>
<%= fff.text_field :project, value: configs['project'], required: true %>
</div>
<div>
<%= fff.label :bucket %>
<%= fff.text_field :bucket, value: value['service'] == 'google' ? configs['bucket'] : '', required: true %>
</div>
<div>
<%= fff.label :credentials, 'Credentials (JSON key content)' %>
<%= fff.text_area :credentials, value: configs['credentials'], required: true %>
</div>
<% end %>
<% end %>
</disable-hidden>
<%= f.button button_title %>
<% end %>
<% end %>
</disable-hidden>
<%= f.button button_title %>
<% end %>
</div>
</div>
</div>

@ -1,37 +1,44 @@
<div>
Users
<a href="<%= new_user_path %>" data-turbo-frame="modal">New User</a>
<div class="max-w-6xl mx-auto">
<div class="flex space-x-8">
<%= render 'shared/settings_nav' %>
<div class="mt-4">
<div>
Users
<a href="<%= new_user_path %>" data-turbo-frame="modal">New User</a>
</div>
<table>
<tr>
<th>
User
</th>
<th>
Role
</th>
<th>
Last session
</th>
<th>
</th>
</tr>
<% @users.each do |user| %>
<tr>
<td>
<%= user.full_name %><br>
<%= user.email %>
</td>
<td>
<%= user.role %>
</td>
<td>
<%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %>
</td>
<td>
<%= 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?' } %>
</td>
</tr>
<% end %>
</table>
</div>
</div>
</div>
<table>
<tr>
<th>
User
</th>
<th>
Role
</th>
<th>
Last session
</th>
<th>
</th>
</tr>
<% @users.each do |user| %>
<tr>
<td>
<%= user.full_name %><br>
<%= user.email %>
</td>
<td>
<%= user.role %>
</td>
<td>
<%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %>
</td>
<td>
<%= 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?' } %>
</td>
</tr>
<% end %>
</table>

@ -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

@ -3,6 +3,13 @@ module.exports = {
require('daisyui')
],
daisyui: {
themes: ['cupcake']
themes: [
{
cupcake: {
...require('daisyui/src/colors/themes')['[data-theme=cupcake]'],
primary: '#E4E0E1'
}
}
]
}
}

Loading…
Cancel
Save