Adds scheme editor

archesproject · Nov 21, 2024 · b141d12 · b141d12
1 parent 874b141
commit b141d12
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 6 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -0,0 +1,64 @@
+<script lang="ts">
+const MAXIMIZE = "maximize";
+const SIDE = "side";
+const CLOSE = "close";
+</script>
+
+<script setup lang="ts">
+import { useGettext } from "vue3-gettext";
+import Button from "primevue/button";
+
+const { $gettext } = useGettext();
+
+const props = defineProps<{
+    editorMax: boolean;
+}>();
+
+const emit = defineEmits([MAXIMIZE, SIDE, CLOSE]);
+const toggleSize = () => {
+    if (props.editorMax) {
+        emit(MAXIMIZE);
+    } else {
+        emit(SIDE);
+    }
+};
+</script>
+
+<template>
+    <div class="header">
+        <div>
+            <h2>{{ $gettext("Scheme Editor Tools") }}</h2>
+            <div>
+                <Button @click="toggleSize"
+                    ><i
+                        :class="{
+                            pi: true,
+                            'pi-window-maximize': props.editorMax,
+                            'pi-window-minimize': !props.editorMax,
+                        }"
+                        aria-hidden="true"
+                    />
+                </Button>
+                <Button @click="$emit(CLOSE)"
+                    ><i
+                        class="pi pi-times"
+                        aria-hidden="true"
+                    />
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+.header {
+    background-color: #ddd;
+}
+.header div {
+    margin: 0 1rem;
+    display: flex;
+    align-items: center;
+}
+.header div h2 {
+    flex: 1;
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeSection.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeSection.vue
@@ -2,6 +2,8 @@
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 
+defineEmits(["openEditor"]);
+
 const { $gettext } = useGettext();
 const props = defineProps<{
     titleText: string;

diff --git a/arches_lingo/src/arches_lingo/pages/SchemeReport.vue b/arches_lingo/src/arches_lingo/pages/SchemeReport.vue
@@ -1,22 +1,62 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
 import SchemeLicense from "@/arches_lingo/components/scheme/report/SchemeLicense.vue";
 import SchemeNote from "@/arches_lingo/components/scheme/report/SchemeNote.vue";
 import SchemeUri from "@/arches_lingo/components/scheme/report/SchemeUri.vue";
 import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStandard.vue";
 import SchemeAuthority from "@/arches_lingo/components/scheme/report/SchemeAuthority.vue";
+import SchemeEditor from "@/arches_lingo/components/scheme/editor/SchemeEditor.vue";
+
+const editorVisible = ref<boolean>(true);
+const sectionVisible = ref<boolean>(true);
+
+const onMaximize = () => {
+    editorVisible.value = true;
+    sectionVisible.value = false;
+};
+
+const onSide = () => {
+    editorVisible.value = true;
+    editorVisible.value = true;
+    sectionVisible.value = true;
+};
+
+const onClose = () => {
+    editorVisible.value = false;
+    sectionVisible.value = true;
+};
+
+const onOpenEditor = () => {
+    editorVisible.value = true;
+    sectionVisible.value = true;
+};
 </script>
 
 <template>
     <div>
         <Splitter>
-            <SplitterPanel>
-                <SchemeNote />
-                <SchemeAuthority />
-                <SchemeStandard />
-                <SchemeLicense />
-                <SchemeUri />
+            <SplitterPanel
+                v-if="sectionVisible"
+                size="75"
+            >
+                <SchemeNote @open-editor="onOpenEditor" />
+                <SchemeAuthority @open-editor="onOpenEditor" />
+                <SchemeStandard @open-editor="onOpenEditor" />
+                <SchemeLicense @open-editor="onOpenEditor" />
+                <SchemeUri @open-editor="onOpenEditor" />
+            </SplitterPanel>
+            <SplitterPanel
+                v-if="editorVisible"
+                size="25"
+            >
+                <SchemeEditor
+                    :editor-max="sectionVisible"
+                    @maximize="onMaximize"
+                    @side="onSide"
+                    @close="onClose"
+                />
             </SplitterPanel>
         </Splitter>
     </div>