Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add about dialog to dashboard #1082

Merged
merged 1 commit into from
Nov 29, 2024
Merged

Add about dialog to dashboard #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Enduro</title>
</head>
<body>
<body class="p-0">
jraddaoui marked this conversation as resolved.
Show resolved Hide resolved
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
Expand Down
4 changes: 3 additions & 1 deletion dashboard/src/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useAuthStore } from "@/stores/auth";
import { usePackageStore } from "./stores/package";

export interface Client {
about: api.AboutApi;
package: api.PackageApi;
storage: api.StorageApi;
connectPackageMonitor: () => void;
Expand Down Expand Up @@ -67,7 +68,7 @@ function createClient(): Client {
if (context.response.status == 401) {
useAuthStore()
.removeUser()
.then(() => router.push({ name: "/" }));
.then(() => router.push({ name: "/user/signin" }));
jraddaoui marked this conversation as resolved.
Show resolved Hide resolved
return Promise.resolve();
}
return Promise.resolve(context.response);
Expand All @@ -76,6 +77,7 @@ function createClient(): Client {
],
});
return {
about: new api.AboutApi(config),
package: new api.PackageApi(config),
storage: new api.StorageApi(config),
connectPackageMonitor,
Expand Down
143 changes: 143 additions & 0 deletions dashboard/src/components/AboutDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<script setup lang="ts">
import { api, client } from "@/client";
import useEventListener from "@/composables/useEventListener";
import Modal from "bootstrap/js/dist/modal";
import { ref, onMounted } from "vue";
import { closeDialog } from "vue3-promise-dialog";
import IconBookText from "~icons/lucide/book-text";
import IconFileText from "~icons/lucide/file-text";
import IconGitMerge from "~icons/lucide/git-merge";

const el = ref<HTMLElement | null>(null);
const modal = ref<Modal | null>(null);
const about = ref<api.EnduroAbout | null>(null);

onMounted(() => {
client.about.aboutAbout().then((resp) => {
about.value = resp;
if (!el.value) return;
modal.value = new Modal(el.value);
modal.value.show();
});
});
jraddaoui marked this conversation as resolved.
Show resolved Hide resolved

useEventListener(el, "hidden.bs.modal", () => closeDialog(null));
</script>

<template>
<div class="modal" tabindex="-1" ref="el">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold d-flex align-items-center">
<img src="/logo.png" alt="" height="30" class="me-2" />Enduro
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="mb-3" v-if="about">
<div class="row">
<div
class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
>
Application version:
</div>
<div class="col-12 col-sm-6 text-truncate">
v{{ about.version }}
</div>
</div>
<div class="row">
<div
class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
>
Preservation system:
</div>
<div class="col-12 col-sm-6 text-truncate">
{{ about.preservationSystem }}
</div>
</div>
<div class="row" v-if="about.preprocessing.enabled">
<div
class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
>
Preprocessing workflow:
</div>
<div class="col-12 col-sm-6 text-truncate">
{{ about.preprocessing.workflowName }}
</div>
</div>
<div
class="row"
v-if="about.poststorage && about.poststorage.length > 0"
>
<div
class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
>
Poststorage workflows:
</div>
<div class="col-12 col-sm-6 d-flex flex-column text-truncate">
<span v-for="poststorage in about.poststorage">{{
poststorage.workflowName
}}</span>
</div>
</div>
</div>
<div class="small">
Enduro is a new application under development by
<a href="https://www.artefactual.com/" target="_blank"
>Artefactual Systems</a
>. Originally created as a more stable replacement for
Archivematica's
<a
href="https://github.com/artefactual/automation-tools"
target="_blank"
>automation-tools</a
>
library of scripts, it has since evolved into a flexible tool to be
paired with preservation applications like
<a href="https://www.archivematica.org/" target="_blank"
>Archivematica</a
>
and
<a href="https://github.com/artefactual-labs/a3m" target="_blank"
>a3m</a
>
to provide initial ingest activities such as content and structure
validation, packaging, and more.
</div>
</div>
<div class="modal-footer">
<a
class="btn btn-primary d-flex align-items-center gap-2"
href="https://enduro.readthedocs.io/"
target="_blank"
>
<IconBookText aria-hidden="true" />
Documentation
</a>
<a
class="btn btn-primary d-flex align-items-center gap-2"
href="https://github.com/artefactual-sdps/enduro/blob/main/LICENSE"
target="_blank"
>
<IconFileText aria-hidden="true" />
License
</a>
<a
class="btn btn-primary d-flex align-items-center gap-2"
href="https://github.com/artefactual-sdps/enduro/blob/main/CONTRIBUTING.md"
target="_blank"
>
<IconGitMerge aria-hidden="true" />
Contributing
</a>
</div>
</div>
</div>
</div>
</template>
20 changes: 19 additions & 1 deletion dashboard/src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
<script setup lang="ts">
import AboutDialogVue from "@/components/AboutDialog.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import { useLayoutStore } from "@/stores/layout";
import IconInfoStandardSolid from "~icons/clarity/info-standard-solid";
import IconMenuLine from "~icons/clarity/menu-line";
import { openDialog } from "vue3-promise-dialog";

const layoutStore = useLayoutStore();

const showAbout = async () => await openDialog(AboutDialogVue);
</script>

<template>
Expand Down Expand Up @@ -43,7 +48,7 @@ const layoutStore = useLayoutStore();
</button>

<router-link
class="navbar-brand h1 mb-0 me-auto p-3 px-2 text-primary text-decoration-none d-flex align-items-center"
class="navbar-brand h1 mb-0 me-auto p-3 px-2 text-primary text-decoration-none d-flex align-items-center fw-bold"
:class="layoutStore.sidebarCollapsed ? '' : 'ms-2'"
:to="{ name: '/' }"
>
Expand All @@ -54,6 +59,19 @@ const layoutStore = useLayoutStore();
<div class="flex-grow-1 d-none d-md-block">
<Breadcrumb />
</div>

<button
type="button"
class="btn btn-link text-decoration-none p-3"
aria-label="About Enduro"
>
<IconInfoStandardSolid
class="text-primary mx-1"
style="font-size: 1.5em"
aria-hidden="true"
@click="showAbout"
/>
</button>
</nav>
</header>
</template>
Expand Down
4 changes: 4 additions & 0 deletions dashboard/src/openapi-generator/.openapi-generator/FILES
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

90 changes: 90 additions & 0 deletions dashboard/src/openapi-generator/apis/AboutApi.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dashboard/src/openapi-generator/apis/index.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading