pom-fritz/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 UI Improvements

Browse Source
This commit is contained in:
Andreas Dinauer 2026-04-25 22:20:46 +02:00
parent b3a8c18ef5
commit 88b856ee77
6 changed files with 66 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/VersionComponent.vue
View File

@ -1,19 +1,15 @@
<template> <template>
<div class="content-l"> <div class="content-l">
<h2>Dependency</h2> <h2>Dependency</h2>
<div class="tile-m" v-for="dependency in [formatDependency(version)]"> <div class="tile-m" v-for="dependency in [formatDependency(artifact, version)]">
<Codebox :content="dependency"></Codebox> <Codebox :content="dependency"></Codebox>
</div> </div>
<div class="col-2"> <div>
<div class="content-m"> <div class="content-m">
<h2>Files</h2> <h2>Files</h2>
<p class="tile-m pointer" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }}</p> <div class="file-container">
<a class="tile-m" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }}</a> <p class="tile-m pointer file" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }} <span class="jar">JAR</span></p>
</div> <a class="tile-m file" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }} <span class="pom">POM</span></a>
<div class="content-m danger-zone" style="align-self: start">
<h2>Danger Zone</h2>
<div>
<UiButton class="delete">Delete Version</UiButton>
</div> </div>
</div> </div>
</div> </div>
@ -23,17 +19,18 @@
<script setup lang="ts"> <script setup lang="ts">
import {Download} from "~/utils/Download"; import {Download} from "~/utils/Download";
import Codebox from "~/components/artifact/Codebox.vue"; import Codebox from "~/components/artifact/Codebox.vue";
import type {Version} from "~/components/artifact/Artifact"; import {Artifact, type Version} from "~/components/artifact/Artifact";
defineProps<{ defineProps<{
artifact: Artifact,
version: Version version: Version
}>(); }>();
const formatDependency = (version: Version) => { const formatDependency = (artifact: Artifact, version: Version) => {
const template = [ const template = [
"<dependency>", "<dependency>",
"\t<groupId>" + version.groupId + "</groupId>", "\t<groupId>" + artifact.groupId + "</groupId>",
"\t<artifactId>" + version.artifactId + "</artifactId>", "\t<artifactId>" + artifact.artifactId + "</artifactId>",
"\t<version>" + version.version + "</version>", "\t<version>" + version.version + "</version>",
"</dependency>" "</dependency>"
] ]
@ -42,13 +39,28 @@ const formatDependency = (version: Version) => {
</script> </script>
<style scoped> <style scoped>
.delete { .file {
background-color: var(--danger-color); border-radius: 2rem;
padding: 0.5rem 0.75rem;
padding-right: 0.5rem;
width: auto;
} }
.danger-zone { .file-container
background-color: #ffeae7; {
padding: 1rem; display: flex;
border-radius: 0.25rem; gap: 0.5rem;
border: 1px solid #ffb5b5; flex-wrap: wrap;
}
.jar {
background-color: #ac088a;
color: white;
padding: 0.125rem 0.45rem;
border-radius: 2rem;
}
.pom {
background-color: #049c00;
color: white;
padding: 0.125rem 0.45rem;
border-radius: 2rem;
} }
</style> </style>

7
app/components/artifact/ArtifactList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Table v-if="artifacts" columns="auto auto auto 1fr auto"> <Table v-if="artifacts" columns="auto auto auto 1fr auto" :show-footer="artifacts.length === 0">
<HeaderRow> <HeaderRow>
<HeaderCell>Group ID</HeaderCell> <HeaderCell>Group ID</HeaderCell>
<HeaderCell>Artifact ID</HeaderCell> <HeaderCell>Artifact ID</HeaderCell>
@ -8,6 +8,11 @@
<HeaderCell>Updated At</HeaderCell> <HeaderCell>Updated At</HeaderCell>
</HeaderRow> </HeaderRow>
<ArtifactComponent :artifact="artifact" v-for="artifact in artifacts"></ArtifactComponent> <ArtifactComponent :artifact="artifact" v-for="artifact in artifacts"></ArtifactComponent>
<template #footer>
<div class="center">
<p>No Artifacts found.</p>
</div>
</template>
</Table> </Table>
</template> </template>

1
app/components/events/EventComponent.vue
View File

@ -2,6 +2,7 @@
<ContentRow> <ContentRow>
<ContentCell> <ContentCell>
<UiIcon v-if="event.type === EventType.UPLOAD">upload</UiIcon> <UiIcon v-if="event.type === EventType.UPLOAD">upload</UiIcon>
<UiIcon v-if="event.type === EventType.DELETE">delete</UiIcon>
</ContentCell> </ContentCell>
<ContentCell> {{ event.resource.groupId }}</ContentCell> <ContentCell> {{ event.resource.groupId }}</ContentCell>
<ContentCell>{{ event.resource.artifactId }}</ContentCell> <ContentCell>{{ event.resource.artifactId }}</ContentCell>

7
app/components/group/GroupList.vue
View File

@ -1,11 +1,16 @@
<template> <template>
<Table columns="1fr"> <Table v-if="groups != null" columns="1fr" :show-footer="groups.length === 0">
<HeaderRow> <HeaderRow>
<HeaderCell>Group ID</HeaderCell> <HeaderCell>Group ID</HeaderCell>
</HeaderRow> </HeaderRow>
<ContentRow style="cursor: pointer" v-for="group in groups" @click="useRouter().push('/groups/' + group.id)"> <ContentRow style="cursor: pointer" v-for="group in groups" @click="useRouter().push('/groups/' + group.id)">
<ContentCell>{{group.groupId}}</ContentCell> <ContentCell>{{group.groupId}}</ContentCell>
</ContentRow> </ContentRow>
<template #footer>
<div class="center">
<p>No Groups found.</p>
</div>
</template>
</Table> </Table>
</template> </template>

9
app/components/ui/table/Table.vue
View File

@ -1,12 +1,16 @@
<template> <template>
<div class="table"> <div class="table">
<slot></slot> <slot></slot>
<div class="footer center" v-if="showFooter">
<slot name="footer"></slot>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
columns: string columns: string
showFooter?: boolean
}>() }>()
</script> </script>
@ -27,4 +31,9 @@ defineProps<{
.artifact-list .artifact:last-of-type * { .artifact-list .artifact:last-of-type * {
border-bottom: 0; border-bottom: 0;
} }
.footer {
width: 100%;
grid-column: 1 / -1;
padding: 0.5rem;
}
</style> </style>

23
app/pages/artifacts/[id]/index.vue
View File

@ -2,20 +2,27 @@
<div v-if="artifact" class="content-xl"> <div v-if="artifact" class="content-xl">
<h1>Artifact</h1> <h1>Artifact</h1>
<div class="col-2"> <div class="col-2">
<p class="tile-m">{{ artifact.groupId }}</p> <div class="tile-m content-s">
<p class="tile-m">{{ artifact.artifactId }}</p> <h3>Group</h3>
<p>{{ artifact.groupId }}</p>
</div>
<div class="tile-m content-s">
<h3>Artifact</h3>
<p>{{ artifact.artifactId }}</p>
</div>
</div> </div>
<div class="artifact-page"> <div class="artifact-page">
<VersionComponent :version="selectedVersion" v-if="selectedVersion"></VersionComponent> <VersionComponent :artifact="artifact" :version="selectedVersion" v-if="selectedVersion"></VersionComponent>
<div class="content-m"> <div class="content-m">
<h2>Versions</h2> <h2>Versions</h2>
<p class="tile-m pointer" v-for="version in artifact.versions" :class="{ active: (selectedVersion != null && version.id === selectedVersion.id) }" @click="() => { selectedVersion = version }">{{ version.version }}</p> <p class="tile-m pointer" v-for="version in artifact.versions" :class="{ active: (selectedVersion != null && version.id === selectedVersion.id) }" @click="() => { selectedVersion = version }">{{ version.version }}</p>
</div> </div>
</div> </div>
<div class="content-m danger-zone"> <div class="content-m">
<h2>Danger Zone</h2> <h2>Danger Zone</h2>
<div> <div class="left-center">
<UiButton @click="del" class="delete">Delete Artifact</UiButton> <UiButton @click="del" class="delete">Delete Artifact</UiButton>
<UiButton class="delete" v-if="selectedVersion">Delete Version ({{selectedVersion.version}})</UiButton>
</div> </div>
</div> </div>
</div> </div>
@ -59,10 +66,4 @@ function del()
.delete { .delete {
background-color: var(--danger-color); background-color: var(--danger-color);
} }
.danger-zone {
background-color: #ffeae7;
padding: 1rem;
border-radius: 0.25rem;
border: 1px solid #ffb5b5;
}
</style> </style>