From b55e62a0fa57e5bf923496c412d55beced439ff2 Mon Sep 17 00:00:00 2001 From: Andrei Kuchuk Date: Tue, 2 Jul 2024 23:33:12 +0400 Subject: [PATCH] [#98] create settings with code editor link configuration --- pages/settings.vue | 54 +++++++++++++++++-- src/shared/stores/settings/index.ts | 2 +- .../stores/settings/local-storage-actions.ts | 10 ++++ src/shared/stores/settings/settings-store.ts | 33 +++++++----- src/shared/types/local-storage.ts | 1 + 5 files changed, 80 insertions(+), 20 deletions(-) diff --git a/pages/settings.vue b/pages/settings.vue index 18a8df5b..8cde4d57 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -6,14 +6,24 @@ import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings"; import { AppHeader, BadgeNumber, IconSvg } from "~/src/shared/ui"; const settingsStore = useSettingsStore(); -const { changeTheme, changeNavbar, changeEventCountsVisibility } = - settingsStore; -const { themeType, isFixedHeader, isVisibleEventCounts } = +const { + changeTheme, + changeNavbar, + changeEventCountsVisibility, + changeActiveCodeEditor, +} = settingsStore; +const { themeType, isFixedHeader, isVisibleEventCounts, codeEditor } = storeToRefs(settingsStore); useTitle("Settings | Buggregator"); const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK); + +// TODO: add throttle +const changeCodeEditor = (event: Event) => { + const editor = (event.target as HTMLInputElement).value; + changeActiveCodeEditor(editor); +}; @@ -124,7 +155,8 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK); } .settings-page__content { - @apply p-4 grid grid-cols-2 gap-4 mr-auto min-w-[50%]; + @apply p-4 grid gap-4 gap-x-10 mr-auto min-w-[50%]; + grid-template-columns: 1fr auto; } .settings-page__title { @@ -132,7 +164,7 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK); } .settings-page__control { - @apply flex space-x-5 items-center my-5; + @apply flex gap-5 items-center my-5; } .settings-page__control-icon { @@ -160,4 +192,16 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK); @apply translate-x-8; } } + +.settings-page__control-label { + @apply text-xl font-bold items-center flex; +} + +.settings-page__control-input { + @apply border-gray-600 p-1 rounded w-[140px] bg-gray-200 dark:bg-gray-600; +} + +.settings-page__control-description { + @apply text-xs mt-2; +} diff --git a/src/shared/stores/settings/index.ts b/src/shared/stores/settings/index.ts index ff43c80f..a478fbb4 100644 --- a/src/shared/stores/settings/index.ts +++ b/src/shared/stores/settings/index.ts @@ -1,2 +1,2 @@ -export {useSettingsStore} from './settings-store' +export { useSettingsStore } from './settings-store' export * from './constants' diff --git a/src/shared/stores/settings/local-storage-actions.ts b/src/shared/stores/settings/local-storage-actions.ts index 70384f02..174405d8 100644 --- a/src/shared/stores/settings/local-storage-actions.ts +++ b/src/shared/stores/settings/local-storage-actions.ts @@ -68,3 +68,13 @@ export const syncEventsCountVisibleLocalStorage = (state: boolean) => { window?.localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(state)); } + +export const getActiveCodeEditorState = (): string => { + const storedCodeEditor = window?.localStorage?.getItem(LOCAL_STORAGE_KEYS.CODE_EDITOR); + + return storedCodeEditor || ''; +}; + +export const setActiveCodeEditorState = (editor: string) => { + window?.localStorage?.setItem(LOCAL_STORAGE_KEYS.CODE_EDITOR, editor); +} diff --git a/src/shared/stores/settings/settings-store.ts b/src/shared/stores/settings/settings-store.ts index 0b52eef7..256f8809 100644 --- a/src/shared/stores/settings/settings-store.ts +++ b/src/shared/stores/settings/settings-store.ts @@ -8,7 +8,7 @@ import { checkIfThemeActive, syncEventsCountVisibleLocalStorage, syncFixedHeaderLocalStorage, - syncThemeLocalStorage, + syncThemeLocalStorage, getActiveCodeEditorState, setActiveCodeEditorState, } from "./local-storage-actions"; export const useSettingsStore = defineStore("settingsStore", { @@ -18,12 +18,26 @@ export const useSettingsStore = defineStore("settingsStore", { isEnabled: false, loginUrl: '/login', }, - codeEditor: 'phpstorm', + codeEditor: getActiveCodeEditorState() || 'phpstorm', themeType: checkIfThemeActive(), isFixedHeader: getFixedHeaderState(), isVisibleEventCounts: getEventsCountVisibleState(), }), actions: { + initialize() { + const {api: { getSettings }} = useSettings(); + + getSettings().then(({ version, auth } = {} as TSettings) => { + if (version) { + this.apiVersion = version + } + + if (auth) { + this.auth.isEnabled = auth.enabled; + this.auth.loginUrl = auth.login_url; + } + }) + }, changeTheme() { this.themeType = this.themeType === THEME_MODES.DARK ? THEME_MODES.LIGHT @@ -41,19 +55,10 @@ export const useSettingsStore = defineStore("settingsStore", { syncEventsCountVisibleLocalStorage(this.isVisibleEventCounts) }, - initialize() { - const {api: { getSettings }} = useSettings(); + changeActiveCodeEditor(editor: string) { + this.codeEditor = editor; - getSettings().then(({ version, auth } = {} as TSettings) => { - if (version) { - this.apiVersion = version - } - - if (auth) { - this.auth.isEnabled = auth.enabled; - this.auth.loginUrl = auth.login_url; - } - }) + setActiveCodeEditorState(editor); } }, }); diff --git a/src/shared/types/local-storage.ts b/src/shared/types/local-storage.ts index b6b1ca88..6d86f6ed 100644 --- a/src/shared/types/local-storage.ts +++ b/src/shared/types/local-storage.ts @@ -5,4 +5,5 @@ export enum LOCAL_STORAGE_KEYS { THEME = "theme", NAVBAR = "navbar", EVENT_COUNTS = "event_counts", + CODE_EDITOR = "code_editor", }