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.

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

Implement front-end routing #19

Merged
merged 12 commits into from
Aug 20, 2024
Prev Previous commit
Next Next commit
Factor out <MainSplitter>
jacobtylerwalls committed Aug 20, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 93af026c3994541a1f1e17aa0b22de394fc1a79c
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<script setup lang="ts">
import arches from "arches";
import { computed, provide, ref } from "vue";
import { provide, ref } from "vue";
import { useRouter } from "vue-router";
import ConfirmDialog from "primevue/confirmdialog";
import ProgressSpinner from "primevue/progressspinner";
import Splitter from "primevue/splitter";
import SplitterPanel from "primevue/splitterpanel";
import Toast from "primevue/toast";
import {
@@ -15,11 +12,9 @@ import {
selectedLanguageKey,
} from "@/arches_references/constants.ts";
import { dataIsList } from "@/arches_references/utils.ts";
import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
import ListHeader from "@/arches_references/components/misc/ListHeader.vue";
import ListTree from "@/arches_references/components/tree/ListTree.vue";
import MainSplitter from "@/arches_references/components/MainSplitter.vue";
import type { Ref } from "vue";
import type { Language } from "@/arches/types";
@@ -43,7 +38,6 @@ const setDisplayedRow = (val: Selectable | null) => {
router.push({ name: routes.item, params: { id: val.id } });
}
};
// @ts-expect-error vue-tsc doesn't like arbitrary properties here
provide(displayedRowKey, { displayedRow, setDisplayedRow });
const selectedLanguage: Ref<Language> = ref(
@@ -52,51 +46,14 @@ const selectedLanguage: Ref<Language> = ref(
) as Language,
);
provide(selectedLanguageKey, selectedLanguage);
const panel = computed(() => {
if (!displayedRow.value) {
return ControlledListSplash;
}
if (dataIsList(displayedRow.value)) {
return ListCharacteristics;
}
return ItemEditor;
});
</script>

<template>
<!-- Subtract size of arches toolbars -->
<div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
<div class="list-editor-container">
<ListHeader />
<Splitter style="height: 100%">
<SplitterPanel
:size="34"
:min-size="25"
style="display: flex; flex-direction: column"
>
<Suspense>
<ListTree />
<template #fallback>
<ProgressSpinner />
</template>
</Suspense>
</SplitterPanel>
<SplitterPanel
:size="66"
:min-size="25"
:style="{
margin: '1rem 0rem 4rem 1rem',
overflowY: 'auto',
paddingRight: '4rem',
}"
>
<component
:is="panel"
:key="displayedRow?.id ?? routes.splash"
/>
</SplitterPanel>
</Splitter>
<MainSplitter />
</div>
</div>
<Toast />
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<script setup lang="ts">
import { computed, inject } from "vue";
import ProgressSpinner from "primevue/progressspinner";
import Splitter from "primevue/splitter";
import SplitterPanel from "primevue/splitterpanel";
import { displayedRowKey, routes } from "@/arches_references/constants.ts";
import { dataIsList } from "@/arches_references/utils.ts";
import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
import ListTree from "@/arches_references/components/tree/ListTree.vue";
import type { Ref } from "vue";
import type { ControlledList } from "@/arches_references/types";
const { displayedRow } = inject(displayedRowKey) as unknown as {
displayedRow: Ref<ControlledList>;
};
const panel = computed(() => {
if (!displayedRow.value) {
return ControlledListSplash;
}
if (dataIsList(displayedRow.value)) {
return ListCharacteristics;
}
return ItemEditor;
});
</script>

<template>
<Splitter style="height: 100%">
<SplitterPanel
:size="34"
:min-size="25"
style="display: flex; flex-direction: column"
>
<Suspense>
<ListTree />
<template #fallback>
<ProgressSpinner />
</template>
</Suspense>
</SplitterPanel>
<SplitterPanel
:size="66"
:min-size="25"
:style="{
margin: '1rem 0rem 4rem 1rem',
overflowY: 'auto',
paddingRight: '4rem',
}"
>
<component
:is="panel"
:key="displayedRow?.id ?? routes.splash"
/>
</SplitterPanel>
</Splitter>
</template>