Refactor user settings page [SCI-9513]

This commit is contained in:
Anton 2023-10-13 10:08:39 +02:00
parent 33e86d60c4
commit 16b5df353f
6 changed files with 109 additions and 37 deletions

View file

@ -0,0 +1,13 @@
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import UserPreferences from '../../vue/user_preferences/container.vue';
import PerfectScrollbar from 'vue2-perfect-scrollbar';
Vue.use(TurbolinksAdapter);
Vue.use(PerfectScrollbar);
Vue.prototype.i18n = window.I18n;
new Vue({
el: '#user_preferences',
components: { UserPreferences }
});

View file

@ -0,0 +1,78 @@
<template>
<div class="content-pane flexible with-grey-background">
<div class="content-header">
<div class="title-row">
<h1 class="mt-0">
{{ i18n.t('users.settings.account.preferences.title') }}
</h1>
</div>
</div>
<div class="p-4 mb-4 bg-sn-white rounded">
<h2 class="mt-0">{{ i18n.t("users.settings.account.preferences.edit.time_zone_label") }}</h2>
<div class="text-sn-dark-grey mb-4">
<p>{{ i18n.t("users.settings.account.preferences.edit.time_zone_sublabel") }}</p>
</div>
<SelectSearch
class="max-w-[40ch]"
:value="selectedTimeZone"
@change="setTimeZone"
:options="timeZones"
/>
<div class="sci-divider my-6"></div>
<h2 class="mt-0">{{ i18n.t("users.settings.account.preferences.edit.date_format_label") }}</h2>
<div class="text-sn-dark-grey mb-4">
<p>{{ i18n.t("users.settings.account.preferences.edit.date_format_sublabel") }}</p>
</div>
<SelectSearch
class="max-w-[40ch]"
:value="selectedDateFormat"
@change="setDateFormat"
:options="dateFormats"
/>
</div>
</div>
</template>
<script>
import SelectSearch from "../shared/select_search.vue";
import axios from '../../packs/custom_axios.js';
export default {
name: "UserPreferences",
props: {
userSettings: Object,
timeZones: Array,
dateFormats: Array,
updateUrl: String
},
data: function() {
return {
selectedTimeZone: null,
selectedDateFormat: null
};
},
created() {
this.selectedTimeZone = this.userSettings.time_zone;
this.selectedDateFormat = this.userSettings.date_format;
},
components: {
SelectSearch,
PerfectScrollbar
},
methods: {
setTimeZone(value) {
this.selectedTimeZone = value;
axios.put(this.updateUrl, {
user: { time_zone: value }
})
},
setDateFormat(value) {
this.selectedDateFormat = value;
axios.put(this.updateUrl, {
user: { date_format: value }
})
}
},
}
</script>

View file

@ -513,40 +513,6 @@ class User < ApplicationRecord
user_identities.exists?(provider: provider)
end
# json friendly attributes
NOTIFICATIONS_TYPES = %w(assignments_notification recent_notification
assignments_email_notification
recent_email_notification)
# declare notifications getters
NOTIFICATIONS_TYPES.each do |name|
define_method(name) do
attr_name = name.gsub('_notification', '')
notifications_settings.fetch(attr_name.to_sym)
end
end
# declare notifications setters
NOTIFICATIONS_TYPES.each do |name|
define_method("#{name}=") do |value|
attr_name = name.gsub('_notification', '').to_sym
notifications_settings[attr_name] = value
end
end
def enabled_notifications_for?(notification_type, channel)
return true if %i(deliver deliver_error).include?(notification_type)
case channel
when :web
notification_type == :recent_changes && recent_notification ||
notification_type == :assignment && assignments_notification
when :email
notification_type == :recent_changes && recent_email_notification ||
notification_type == :assignment && assignments_email_notification
end
end
def increase_daily_exports_counter!
range = Time.now.utc.beginning_of_day.to_i..Time.now.utc.end_of_day.to_i
last_export = export_vars[:last_export_timestamp] || 0

View file

@ -1,7 +1,20 @@
<% provide(:head_title, t("users.settings.account.preferences.head_title")) %>
<% provide(:container_class, "no-second-nav-container") %>
<%= render partial: "users/settings/sidebar" %>
<div id="user_preferences" class="contents">
<user-preferences
:update-url = "'<%= update_preferences_path(format: :json) %>'"
:user-settings = "<%= @user.settings.to_json %>"
:time-zones = "<%= ActiveSupport::TimeZone.all.map{ |tz|
[ tz.name, tz.formatted_offset + " " + tz.name]
}.to_json %>"
:date-formats = "<%= Constants::SUPPORTED_DATE_FORMATS.map { |df|
[df, "#{l(Time.new(2024, 4, 22), format: :full_date, date_format: df)}"]
}.to_json %>"
/>
</div>
<%= javascript_include_tag "vue_user_preferences" %>
<div class="tab-content user-account-preferences">
<div class="tab-pane content-pane active" role="tabpanel">

View file

@ -608,6 +608,7 @@ class Extends
my_modules/activities
results/index
protocols/show
preferences/index
)
end

View file

@ -42,7 +42,8 @@ const entryList = {
vue_components_open_vector_editor: './app/javascript/packs/vue/open_vector_editor.js',
vue_navigation_breadcrumbs: './app/javascript/packs/vue/navigation/breadcrumbs.js',
vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js',
vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js'
vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js',
vue_user_preferences: './app/javascript/packs/vue/user_preferences.js',
}
// Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949