[#98] create settings with code editor link configuration

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);
+};
 </script>
 
 <template>
@@ -112,6 +122,27 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
           </BadgeNumber>
         </div>
       </div>
+
+      <div class="settings-page__title">Code Editor Open Link:</div>
+
+      <div class="settings-page__control">
+        <div>
+          <label class="settings-page__control-label">
+            <input
+              class="settings-page__control-input"
+              type="text"
+              :value="codeEditor"
+              @change="changeCodeEditor"
+            />
+            &nbsp;://open?file=/App/Modules/Logger.php&line=12
+          </label>
+
+          <div class="settings-page__control-description">
+            Example of link to open files in code editor. You can replace the
+            name editor with a more preferable one
+          </div>
+        </div>
+      </div>
     </main>
   </NuxtLayout>
 </template>
@@ -124,15 +155,16 @@ 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 {
   @apply text-xl font-bold flex items-center flex-shrink-0;
 }
 
 .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;
+}
 </style>

src/shared/stores/settings/index.ts

@@ -1,2 +1,2 @@
-export {useSettingsStore} from './settings-store'
+export { useSettingsStore } from './settings-store'
 export * from './constants'

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);
+}

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);
     }
   },
 });

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",
 }