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

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

@ -1,5 +1,5 @@
<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>
<HeaderCell>Group ID</HeaderCell>
<HeaderCell>Artifact ID</HeaderCell>
@ -8,6 +8,11 @@
<HeaderCell>Updated At</HeaderCell>
</HeaderRow>
<ArtifactComponent :artifact="artifact" v-for="artifact in artifacts"></ArtifactComponent>
<template #footer>
<div class="center">
<p>No Artifacts found.</p>
</div>
</template>
</Table>
</template>

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

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

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

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

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

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

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

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