From c198199a870270f432908f80b7c23da444acfaa4 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 1/4] Adds scheme editor

---
 .../components/scheme/editor/SchemeEditor.vue | 64 +++++++++++++++++++
 .../scheme/report/SchemeSection.vue           |  2 +
 .../src/arches_lingo/pages/SchemePage.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..511942d2
--- /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 16542e01..04fc97da 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/SchemePage.vue b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
index 536a8ef8..2dd7a827 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.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>

From 58d8123b431185c9b2e168f6c5dc2a4581012f4e Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Mon, 2 Dec 2024 15:41:44 -0700
Subject: [PATCH 2/4] revert to strings to remove double script tag

---
 .../components/scheme/editor/SchemeEditor.vue       | 13 ++++---------
 1 file changed, 4 insertions(+), 9 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
index 511942d2..92cea79f 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -1,8 +1,3 @@
-<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";
@@ -13,13 +8,13 @@ const props = defineProps<{
     editorMax: boolean;
 }>();
 
-const emit = defineEmits([MAXIMIZE, SIDE, CLOSE]);
+const emit = defineEmits(["maximize", "side", "close"]);
 
 const toggleSize = () => {
     if (props.editorMax) {
-        emit(MAXIMIZE);
+        emit("maximize");
     } else {
-        emit(SIDE);
+        emit("side");
     }
 };
 </script>
@@ -39,7 +34,7 @@ const toggleSize = () => {
                         aria-hidden="true"
                     />
                 </Button>
-                <Button @click="$emit(CLOSE)">
+                <Button @click="$emit('close')">
                     <i
                         class="pi pi-times"
                         aria-hidden="true"

From ddb6372913b9ad79341439fc51aecbf58d2d5820 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Tue, 3 Dec 2024 11:20:01 -0700
Subject: [PATCH 3/4] pr feedback

---
 .../components/scheme/editor/SchemeEditor.vue        | 12 +++++++++---
 arches_lingo/src/arches_lingo/pages/SchemePage.vue   |  4 ++--
 2 files changed, 11 insertions(+), 5 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
index 92cea79f..1c403edf 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -22,9 +22,12 @@ const toggleSize = () => {
 <template>
     <div class="header">
         <div>
-            <h2>{{ $gettext("Scheme Editor Tools") }}</h2>
+            <h3>{{ $gettext("Scheme Editor Tools") }}</h3>
             <div>
-                <Button @click="toggleSize">
+                <Button
+                    :aria-label="$gettext('toggle editor size')"
+                    @click="toggleSize"
+                >
                     <i
                         :class="{
                             pi: true,
@@ -34,7 +37,10 @@ const toggleSize = () => {
                         aria-hidden="true"
                     />
                 </Button>
-                <Button @click="$emit('close')">
+                <Button
+                    :aria-label="$gettext('close editor')"
+                    @click="$emit('close')"
+                >
                     <i
                         class="pi pi-times"
                         aria-hidden="true"
diff --git a/arches_lingo/src/arches_lingo/pages/SchemePage.vue b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
index 2dd7a827..a6336c75 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
@@ -9,8 +9,8 @@ import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStanda
 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 editorVisible = ref(true);
+const sectionVisible = ref(true);
 
 const onMaximize = () => {
     editorVisible.value = true;

From d077e81c33322282fa6cfe78b08120b16bf8696f Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Tue, 3 Dec 2024 15:45:54 -0700
Subject: [PATCH 4/4] variablize header color

---
 .../src/arches_lingo/components/scheme/editor/SchemeEditor.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
index 1c403edf..3fda8c94 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -52,7 +52,7 @@ const toggleSize = () => {
 </template>
 <style scoped>
 .header {
-    background-color: #ddd;
+    background-color: var(--p-surface-200);
 }
 .header div {
     margin: 0 1rem;