69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<template>
|
|
<div v-if="artifact" class="content-xl">
|
|
<h1>Artifact</h1>
|
|
<div class="col-2">
|
|
<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 :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">
|
|
<h2>Danger Zone</h2>
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Artifact, Version} from "~/components/artifact/Artifact";
|
|
import Codebox from "~/components/artifact/Codebox.vue";
|
|
import {Download} from "~/utils/Download";
|
|
const artifact: Ref<Artifact | undefined> = ref(undefined);
|
|
const selectedVersion: Ref<Version | undefined> = ref(undefined);
|
|
|
|
onMounted(() => {
|
|
const id = useRoute().params.id as string;
|
|
Artifact.getById(id, (_artifact: Artifact) => {
|
|
artifact.value = _artifact;
|
|
selectedVersion.value = _artifact.versions.at(0);
|
|
})
|
|
})
|
|
|
|
function del()
|
|
{
|
|
const id = useRoute().params.id as string;
|
|
Artifact.deleteById(id, () => {
|
|
useRouter().push("/artifacts");
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.artifact-page {
|
|
display: grid;
|
|
grid-template-columns: 1fr 10rem;
|
|
gap: 1rem;
|
|
}
|
|
.active {
|
|
background-color: #3c74ff;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
.delete {
|
|
background-color: var(--danger-color);
|
|
}
|
|
</style> |