Skip to content
Snippets Groups Projects

Resolve "Add UI for viewing and managing Resources"

Merged Resolve "Add UI for viewing and managing Resources"
feature/88-add-ui-for-viewing-and-managing-resources into main
Merged Daniel Göbel requested to merge feature/88-add-ui-for-viewing-and-managing-resources into main
Compare
and
Show latest version
29 files
+ 636
− 87
Compare changes
  • Side-by-side
  • Inline
Files
29
src/components/admin/ResourceVersionInfoModal.vue 0 → 100644
+ 262
− 0
 
<script setup lang="ts">
 
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
 
import type { ResourceVersionOut, ResourceOut } from "@/client/resource";
 
import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";
 
import dayjs from "dayjs";
 
import { computed } from "vue";
 
import { useNameStore } from "@/stores/names";
 
 
const props = defineProps<{
 
modalId: string;
 
resourceVersionIndex: number;
 
resource?: ResourceOut;
 
}>();
 
 
const nameRepository = useNameStore();
 
 
const resourceVersion = computed<ResourceVersionOut | undefined>(
 
() => props.resource?.versions[props.resourceVersionIndex],
 
);
 
</script>
 
 
<template>
 
<bootstrap-modal
 
:modal-id="props.modalId"
 
modal-label="Resource Version Info Modal"
 
size-modifier="lg"
 
>
 
<template #header
 
>Resource Version
 
<span v-if="resourceVersion">{{ resourceVersion.release }}</span>
 
</template>
 
<template #body>
 
<h5>Resource</h5>
 
<div class="mb-3 row">
 
<div class="col-8">
 
<label
 
for="resource-version-info-modal-resource-id"
 
class="form-label"
 
>ID</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-id"
 
readonly
 
:value="props.resource?.resource_id"
 
/>
 
<span class="input-group-text"
 
><copy-to-clipboard-icon
 
:text="props.resource?.resource_id ?? ''"
 
/></span>
 
</div>
 
</div>
 
<div class="col-4">
 
<label
 
for="resource-version-info-modal-resource-name"
 
class="form-label"
 
>Name</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-name"
 
readonly
 
:value="props.resource?.name"
 
/>
 
</div>
 
</div>
 
</div>
 
<div class="mb-3 row">
 
<div class="col-8">
 
<label
 
for="resource-version-info-modal-maintainer-id"
 
class="form-label"
 
>Maintainer ID</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-maintainer-id"
 
readonly
 
:value="props.resource?.maintainer_id"
 
/>
 
<span class="input-group-text"
 
><copy-to-clipboard-icon
 
:text="props.resource?.maintainer_id ?? ''"
 
/></span>
 
</div>
 
</div>
 
<div class="col-4">
 
<label
 
for="resource-version-info-modal-maintainer-name"
 
class="form-label"
 
>Maintainer Name</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-maintainer-name"
 
readonly
 
:value="nameRepository.getName(props.resource?.maintainer_id)"
 
/>
 
</div>
 
</div>
 
</div>
 
<div class="mb-3">
 
<label
 
for="resource-version-info-modal-resource-description"
 
class="form-label"
 
>Description</label
 
>
 
<div class="input-group">
 
<textarea
 
class="form-control"
 
id="resource-version-info-modal-resource-description"
 
readonly
 
rows="2"
 
:value="props.resource?.description"
 
/>
 
</div>
 
</div>
 
<div class="mb-5">
 
<label
 
for="resource-version-info-modal-resource-source"
 
class="form-label"
 
>Source</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-source"
 
readonly
 
:value="props.resource?.source"
 
/>
 
</div>
 
</div>
 
<h5>Resource Version</h5>
 
<div class="mb-3 row">
 
<div class="col-8">
 
<label
 
for="resource-version-info-modal-resource-version-id"
 
class="form-label"
 
>Resource Version ID</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-id"
 
readonly
 
:value="resourceVersion?.resource_version_id"
 
/>
 
<span class="input-group-text"
 
><copy-to-clipboard-icon
 
:text="resourceVersion?.resource_version_id ?? ''"
 
/></span>
 
</div>
 
</div>
 
<div class="col-4">
 
<label
 
for="resource-version-info-modal-resource-version-release"
 
class="form-label"
 
>Resource Version Release</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-release"
 
readonly
 
:value="resourceVersion?.release"
 
/>
 
</div>
 
</div>
 
</div>
 
<div class="mb-3 row">
 
<div class="col-4">
 
<label
 
for="resource-version-info-modal-resource-version-status"
 
class="form-label"
 
>Status</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-status"
 
readonly
 
:value="resourceVersion?.status"
 
/>
 
</div>
 
</div>
 
<div class="col-4">
 
<label
 
for="resource-version-info-modal-resource-version-timestamp"
 
class="form-label"
 
>Created At</label
 
>
 
<div class="input-group">
 
<input
 
type="datetime-local"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-timestamp"
 
readonly
 
:value="
 
dayjs
 
.unix(resourceVersion?.created_at ?? 0)
 
.format('YYYY-MM-DDTHH:mm')
 
"
 
/>
 
</div>
 
</div>
 
</div>
 
<div class="mb-3">
 
<label
 
for="resource-version-info-modal-resource-version-s3-path"
 
class="form-label"
 
>S3 Path</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-s3-path"
 
readonly
 
:value="resourceVersion?.s3_path"
 
/>
 
<span class="input-group-text"
 
><copy-to-clipboard-icon :text="resourceVersion?.s3_path ?? ''"
 
/></span>
 
</div>
 
</div>
 
<div class="mb-3">
 
<label
 
for="resource-version-info-modal-resource-version-cluster-path"
 
class="form-label"
 
>Cluster Path</label
 
>
 
<div class="input-group">
 
<input
 
type="text"
 
class="form-control"
 
id="resource-version-info-modal-resource-version-cluster-path"
 
readonly
 
:value="resourceVersion?.cluster_path"
 
/>
 
<span class="input-group-text"
 
><copy-to-clipboard-icon
 
:text="resourceVersion?.cluster_path ?? ''"
 
/></span>
 
</div>
 
</div>
 
</template>
 
</bootstrap-modal>
 
</template>
 
 
<style scoped></style>