Merge pull request #186 from buggregator/issue/#98-open-link-in-ide

Issue/#98 open link in ide
buggregator · Jul 3, 2024 · b5b36f7 · b5b36f7
2 parents ed4344d + 793a411
commit b5b36f7
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 30 deletions.
diff --git 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);
+};
 </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>
diff --git a/src/entities/ray/ui/ray-frame/ray-frame.vue b/src/entities/ray/ui/ray-frame/ray-frame.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import { computed } from "vue";
+import { useSettingsStore } from "~/src/shared/stores";
 import type { RayFrame } from "../../types";
 
 type Props = {
@@ -8,11 +10,13 @@ type Props = {
 
 const props = defineProps<Props>();
 
+const { codeEditor } = storeToRefs(useSettingsStore());
+
 const callLink = computed(
   () =>
-    `phpstorm://open?file=${encodeURIComponent(props.frame.file_name)}&line=${
-      props.frame.line_number
-    }`
+    `${codeEditor}://open?file=${encodeURIComponent(
+      props.frame.file_name
+    )}&line=${props.frame.line_number}`
 );
 </script>
 

diff --git 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
@@ -67,3 +67,14 @@ export const getEventsCountVisibleState = (): boolean => {
 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
@@ -5,7 +5,10 @@ import {THEME_MODES} from "./constants";
 import {
   getEventsCountVisibleState,
   getFixedHeaderState,
-  checkIfThemeActive, syncEventsCountVisibleLocalStorage, syncFixedHeaderLocalStorage, syncThemeLocalStorage
+  checkIfThemeActive,
+  syncEventsCountVisibleLocalStorage,
+  syncFixedHeaderLocalStorage,
+  syncThemeLocalStorage, getActiveCodeEditorState, setActiveCodeEditorState,
 } from "./local-storage-actions";
 
 export const useSettingsStore = defineStore("settingsStore", {
@@ -15,11 +18,26 @@ export const useSettingsStore = defineStore("settingsStore", {
       isEnabled: false,
       loginUrl: '/login',
     },
+    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
@@ -37,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
@@ -5,4 +5,5 @@ export enum LOCAL_STORAGE_KEYS {
   THEME = "theme",
   NAVBAR = "navbar",
   EVENT_COUNTS = "event_counts",
+  CODE_EDITOR = "code_editor",
 }
diff --git a/src/shared/ui/preview-card/preview-card-footer.vue b/src/shared/ui/preview-card/preview-card-footer.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import { withDefaults, defineProps, computed } from "vue";
+import { useSettingsStore } from "../../stores/settings";
 import { IconSvg } from "../icon-svg";
 
 // TODO: Move this to a shared file
@@ -24,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   originConfig: null,
 });
 
+const { codeEditor } = storeToRefs(useSettingsStore());
+
 const mappedOrigins = computed(() =>
   Object.entries(props.originConfig || {}).reduce((acc, [key, value]) => {
     const fileName = props.originConfig?.file || "";
@@ -45,20 +49,52 @@ const mappedOrigins = computed(() =>
     return acc;
   }, {} as { [key: string]: string })
 );
+
+const editorLink = computed(() => {
+  if (!props.originConfig) {
+    return "";
+  }
+
+  const fileName = mappedOrigins.value.file || "";
+  const line = mappedOrigins.value.line || "";
+
+  if (!fileName || fileName === "unknown") {
+    return "";
+  }
+
+  return `${codeEditor.value}://open?file=${fileName}${
+    line ? `&line=${line}` : ""
+  }`;
+});
+
+const isEditorLink = (key: string) =>
+  !!editorLink.value && (key === "file" || key === "line");
 </script>
 
 <template>
   <div class="preview-card-footer">
     <div class="preview-card-footer__tags">
       <template v-if="mappedOrigins">
-        <div
-          v-for="(value, key) in mappedOrigins"
-          :key="key"
-          class="preview-card-footer__tag"
-        >
-          <span class="preview-card-footer__tag-key">{{ key }}:</span>
-          <span class="preview-card-footer__tag-value">{{ value }}</span>
-        </div>
+        <template v-for="(value, key) in mappedOrigins" :key="key">
+          <div
+            v-if="!isEditorLink(String(key))"
+            class="preview-card-footer__tag"
+          >
+            <span class="preview-card-footer__tag-key">{{ key }}:</span>
+            <span class="preview-card-footer__tag-value">{{ value }}</span>
+          </div>
+
+          <a
+            v-if="isEditorLink(String(key))"
+            :href="editorLink"
+            target="_blank"
+            class="preview-card-footer__tag"
+          >
+            12314
+            <span class="preview-card-footer__tag-key">{{ key }}:</span>
+            <span class="preview-card-footer__tag-value">{{ value }}</span>
+          </a>
+        </template>
       </template>
     </div>