From b141d1251a8265716a4ce149206425614090991c Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Sun, 10 Nov 2024 22:01:23 -0700
Subject: [PATCH] Adds scheme editor

---
 .../components/scheme/editor/SchemeEditor.vue | 64 +++++++++++++++++++
 .../scheme/report/SchemeSection.vue           |  2 +
 .../src/arches_lingo/pages/SchemeReport.vue   | 52 +++++++++++++--
 3 files changed, 112 insertions(+), 6 deletions(-)
 create mode 100644 arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue

diff --git a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
new file mode 100644
index 00000000..6b37dc7e
--- /dev/null
+++ 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
index 972b5921..f37e8ec0 100644
--- 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
index 536a8ef8..2dd7a827 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemeReport.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemeReport.vue
@@ -1,4 +1,5 @@
 <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";
@@ -6,17 +7,56 @@ 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>