Use params for pages, simplify sidebar css

frontend/src/app/dependencies-data.ts

@@ -1,6 +1,6 @@
 import {reqVersions} from "./backend"
 import {addAlert} from "./alerts"
-import {useDependencySearchStore} from "./dependency-store"
+import {applicableDependencyVersions, useDependencySearchStore} from "./dependency-store"
 import {DependencyType} from "./dep-format"
 import {defineStore} from "pinia"
 
@@ -36,6 +36,7 @@ export interface DependencySearchData {
 export interface State {
     reqVersionsPromise: Promise<any> | undefined,
     searchData: DependencySearchData,
+    hasFirstLoaded: boolean,
 }
 
 function newState(): State {
@@ -44,20 +45,21 @@ function newState(): State {
         searchData: {
             versions: {},
         },
+        hasFirstLoaded: false,
     }
 }
 
 export const useDependenciesDataStore = defineStore({
     id: "dependencies-data",
-    state: newState
+    state: newState,
 })
 
-export function updateDependencyData() {
+export function updateDependencyData(applyURL: boolean = false) {
     let store = useDependenciesDataStore()
-    if (Object.keys(store.searchData.versions).length == 0 && !store.reqVersionsPromise) {
+    if (applyURL || (Object.keys(store.searchData.versions).length == 0 && !store.reqVersionsPromise)) {
         store.reqVersionsPromise = reqVersions().then(value => {
             store.searchData.versions = value.data
-            ensureDependencyData()
+            ensureDependencyData(applyURL)
         }).catch(reason => {
             addAlert({
                 type: "error",
@@ -69,8 +71,26 @@ export function updateDependencyData() {
     }
 }
 
-export function ensureDependencyData() {
+export function ensureDependencyData(applyURL: boolean = false) {
     let store = useDependenciesDataStore()
+
+    if (applyURL) {
+        const urlParams = new URLSearchParams(window.location.search)
+        let {searchData} = useDependenciesDataStore()
+        let loaders = Object.keys(searchData.versions)
+
+        if (loaders.includes(urlParams.get("loader") ?? "")) {
+            useDependencySearchStore().loader = (urlParams.get("loader") ?? "") as string
+            useDependencySearchStore().version = undefined
+        }
+
+        if (applicableDependencyVersions().includes(urlParams.get("version") ?? "")) {
+            useDependencySearchStore().version = (urlParams.get("version") ?? "") as string
+        }
+
+        useDependenciesDataStore().hasFirstLoaded = true
+    }
+
     let {loader, version, allowSnapshots} = useDependencySearchStore()
     if (!loader) {
         loader = Object.keys(store.searchData.versions)[0]
@@ -86,4 +106,16 @@ export function ensureDependencyData() {
             useDependencySearchStore().version = version
         }
     }
+
+    if (useDependenciesDataStore().hasFirstLoaded) {
+        updateDependenciesWindowUrl()
+    }
+}
+
+export function updateDependenciesWindowUrl() {
+    let {loader, version} = useDependencySearchStore()
+    let url = new URL(window.location.href)
+    url.searchParams.set("loader", loader ?? "")
+    url.searchParams.set("version", version ?? "")
+    window.history.replaceState({}, "", url.toString())
 }

frontend/src/app/dependency-store.ts

@@ -1,4 +1,5 @@
 import {defineStore} from "pinia"
+import {useDependenciesDataStore} from "./dependencies-data"
 
 interface State {
     loader?: string,
@@ -19,3 +20,15 @@ export const useDependencySearchStore = defineStore({
     state: newState,
     persist: true,
 })
+
+export function applicableDependencyVersions(): string[] {
+    let {loader, allowSnapshots} = useDependencySearchStore()
+    let {searchData} = useDependenciesDataStore()
+
+    if (!loader) return []
+    let versions = searchData.versions[loader] ?? []
+    if (versions && !allowSnapshots) {
+        versions = versions.filter(entry => entry.stable)
+    }
+    return versions.map(entry => entry.version)
+}

frontend/src/app/mappings-data.ts

@@ -1,7 +1,7 @@
 import {defineStore} from "pinia"
 import {reqNamespaces, reqSearch} from "./backend"
 import {addAlert} from "./alerts"
-import {useMappingsStore} from "./mappings-store"
+import {applicableMappingsVersions, useMappingsStore} from "./mappings-store"
 import axios from "axios"
 import {VersionEntry} from "./dependencies-data"
 
@@ -60,6 +60,7 @@ export interface State {
     infoData: InfoData,
     reqNamespacesPromise: Promise<any> | undefined,
     searchController: AbortController | undefined,
+    hasFirstLoaded: boolean,
 }
 
 function newState(): State {
@@ -74,20 +75,21 @@ function newState(): State {
         },
         reqNamespacesPromise: undefined,
         searchController: undefined,
+        hasFirstLoaded: false,
     }
 }
 
 export const useMappingsDataStore = defineStore({
     id: "mappings-data",
-    state: newState
+    state: newState,
 })
 
-export function updateMappingsData() {
+export function updateMappingsData(applyURL: boolean = false) {
     let store = useMappingsDataStore()
-    if (Object.keys(store.mappingsData.namespaces).length == 0 && !store.reqNamespacesPromise) {
+    if (applyURL || (Object.keys(store.mappingsData.namespaces).length == 0 && !store.reqNamespacesPromise)) {
         store.reqNamespacesPromise = reqNamespaces().then(value => {
             store.mappingsData.namespaces = value.data
-            ensureMappingsData()
+            ensureMappingsData(applyURL)
         }).catch(reason => {
             addAlert({
                 type: "error",
@@ -99,8 +101,34 @@ export function updateMappingsData() {
     }
 }
 
-export function ensureMappingsData() {
+export function ensureMappingsData(applyURL: boolean = false) {
     let store = useMappingsDataStore()
+    if (applyURL) {
+        const urlParams = new URLSearchParams(window.location.search)
+
+        if (store.mappingsData.namespaces.map(namespace => namespace.id).includes(urlParams.get("namespace") ?? "")) {
+            useMappingsStore().namespace = (urlParams.get("namespace") ?? "") as string
+            useMappingsStore().translateAs = undefined
+            useMappingsStore().version = undefined
+        }
+
+        if (store.mappingsData.namespaces.map(namespace => namespace.id).includes(urlParams.get("translateAs") ?? "")
+            && useMappingsStore().namespace && useMappingsStore().namespace !== urlParams.get("translateAs")) {
+            useMappingsStore().translateAs = (urlParams.get("translateAs") ?? "") as string
+        }
+
+        if (applicableMappingsVersions().map(version => version.version).includes(urlParams.get("version") ?? "")) {
+            useMappingsStore().version = (urlParams.get("version") ?? "") as string
+        }
+
+        if (urlParams.has("search")) useMappingsStore().searchText = urlParams.get("search") ?? ""
+        if (urlParams.has("allowClasses")) useMappingsStore().allowClasses = urlParams.get("allowClasses") === "true"
+        if (urlParams.has("allowMethods")) useMappingsStore().allowMethods = urlParams.get("allowMethods") === "true"
+        if (urlParams.has("allowFields")) useMappingsStore().allowFields = urlParams.get("allowFields") === "true"
+
+        useMappingsDataStore().hasFirstLoaded = true
+    }
+
     let {namespace, version, allowSnapshots, translateAs} = useMappingsStore()
     if (!namespace) {
         namespace = store.mappingsData.namespaces[0]?.id
@@ -122,6 +150,10 @@ export function ensureMappingsData() {
             useMappingsStore().version = version
         }
     }
+
+    if (useMappingsDataStore().hasFirstLoaded) {
+        updateMappingsWindowUrl()
+    }
 }
 
 export function updateMappingsInfo() {
@@ -149,6 +181,9 @@ export function updateMappingsInfo() {
                 }
                 store.infoData.fuzzy = value.data.fuzzy
                 store.infoData.entries = (value.data.entries as any[]).map(mapEntryToMappingEntry)
+                if (useMappingsDataStore().hasFirstLoaded) {
+                    updateMappingsWindowUrl()
+                }
             }).catch(reason => {
                 if (!axios.isCancel(reason)) {
                     addAlert({
@@ -209,4 +244,26 @@ export function mapEntryToMappingEntry(obj: any): MappingEntry {
         type,
         translatedTo,
     } as MappingEntry
-}
+}
+
+export function updateMappingsWindowUrl() {
+    let {namespace, version, searchText, allowClasses, allowFields, allowMethods, translateAs} = useMappingsStore()
+    let url = new URL(window.location.href)
+    url.searchParams.set("namespace", namespace ?? "")
+    url.searchParams.set("version", version ?? "")
+    url.searchParams.set("search", searchText ?? "")
+
+    if (!allowClasses) url.searchParams.set("allowClasses", "false")
+    else url.searchParams.delete("allowClasses")
+
+    if (!allowFields) url.searchParams.set("allowFields", "false")
+    else url.searchParams.delete("allowFields")
+
+    if (!allowMethods) url.searchParams.set("allowMethods", "false")
+    else url.searchParams.delete("allowMethods")
+
+    if (translateAs) url.searchParams.set("translateAs", translateAs)
+    else url.searchParams.delete("translateAs")
+
+    window.history.replaceState({}, "", url.toString())
+}

frontend/src/app/mappings-store.ts

@@ -1,4 +1,5 @@
 import {defineStore} from "pinia"
+import {useMappingsDataStore} from "./mappings-data"
 
 interface State {
     namespace?: string,
@@ -11,6 +12,11 @@ interface State {
     translateAs?: string,
 }
 
+export interface VersionPossible {
+    version: string
+    hasTranslation: boolean
+}
+
 function newState(): State {
     return {
         namespace: undefined,
@@ -27,16 +33,34 @@ function newState(): State {
 export const useMappingsStore = defineStore({
     id: "mappings",
     state: newState,
-    actions: {
-        setNamespace(namespace: string | undefined) {
-            this.namespace = namespace
-        },
-        setVersion(version: string | undefined) {
-            this.version = version
-        },
-        setAllowSnapshots(allowSnapshots: boolean) {
-            this.allowSnapshots = allowSnapshots
-        },
-    },
     persist: true,
 })
+
+export function applicableMappingsVersions(): VersionPossible[] {
+    let {namespace, allowSnapshots, translateAs} = useMappingsStore()
+    let {mappingsData} = useMappingsDataStore()
+    if (!namespace) return []
+    let namespaceObj = mappingsData.namespaces.find(value => value.id === namespace)
+    if (!namespaceObj) return []
+    let versions = namespaceObj.versions
+    if (versions && !allowSnapshots) {
+        versions = versions.filter(entry => entry.stable)
+    }
+    if (versions && translateAs) {
+        let translateAsObj = mappingsData.namespaces.find(value => value.id === translateAs)
+        let retain = translateAsObj?.versions?.map(entry => entry.version) ?? []
+        return versions.map(entry => {
+            return {
+                version: entry.version,
+                hasTranslation: retain.includes(entry.version),
+            }
+        })
+    } else {
+        return versions.map(entry => {
+            return {
+                version: entry.version,
+                hasTranslation: true,
+            }
+        })
+    }
+}

frontend/src/components/Block.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="pb-6">
-        <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-lg rounded-lg">
-            <slot></slot>
-        </div>
+    <div class="p-5 bg-base-100 dark:bg-base-dark-200 shadow-lg rounded-lg">
+        <slot></slot>
     </div>
 </template>
 

frontend/src/components/LoadingSection.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="text-center  items-center justify-center grid">
+        <div class="flex gap-4 items-center justify-center animate-pulse animate-bounce">
+            <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                 fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M10 17a3 3 0 1 1 -1.543 -2.623l2.087 -3.754a3 3 0 0 1 1.456 -5.623a3 3 0 0 1 1.457 5.623l2.087 3.754a3 3 0 1 1 -1.538 2.8l-.006 -.177h-4z"></path>
+                <path d="M17 17v.01"></path>
+                <path d="M7 17v.01"></path>
+                <path d="M12 8v.01"></path>
+            </svg>
+            <p class="font-medium text-xl">{{ text }}</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "LoadingSection",
+    props: {
+        text: {
+            type: String,
+            default: "Loading...",
+        },
+    }
+})
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/PageContent.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="flex-1 min-w-0">
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "PageContent",
+})
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/PageSidebar.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)]">
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "PageSidebar",
+})
+</script>
+
+<style scoped>
+div {
+    --sidebar-width: 18rem;
+}
+</style>