From 082c39f099ead23cf6f2d0ed4859fa749e9b721b Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Thu, 27 Feb 2025 12:29:44 -0800
Subject: [PATCH] refactor scheme license #226

---
 .../components/generic/DateDatatype.vue       |  46 -----
 .../components/generic/NonLocalizedString.vue |  30 ----
 .../components/generic/ReferenceDatatype.vue  |  38 ----
 .../generic/ResourceInstanceRelationships.vue |  37 ----
 .../date-datatype/DateDatatypeEditor.vue      |  42 -----
 .../date-datatype/DateDatatypeViewer.vue      |  27 ---
 .../NonLocalizedStringEditor.vue              |  30 ----
 .../NonLocalizedStringViewer.vue              |   6 -
 .../ReferenceDatatypeEditor.vue               | 105 -----------
 .../ReferenceDatatypeViewer.vue               |  28 ---
 .../ResourceInstanceRelationshipsEditor.vue   |  53 ------
 .../ResourceInstanceRelationshipsViewer.vue   |  31 ----
 .../scheme/SchemeLicense/SchemeLicense.vue    |  83 +++++----
 .../components/SchemeLicenseEditor.vue        | 170 +++++++++++++-----
 .../components/SchemeLicenseViewer.vue        | 163 +++++++++--------
 .../components/SchemeNoteViewer.vue           |  10 +-
 .../components/SchemeStandardEditor.vue       |   4 +-
 .../src/arches_lingo/pages/SchemePage.vue     |   4 +-
 18 files changed, 273 insertions(+), 634 deletions(-)
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
 delete mode 100644 arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue

diff --git a/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
deleted file mode 100644
index 11c398bd..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import DateDatatypeViewer from "@/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue";
-import DateDatatypeEditor from "@/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue";
-
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
-
-import type { DataComponentMode } from "@/arches_lingo/types.ts";
-
-interface Props {
-    dateFormat?: string;
-    mode?: DataComponentMode;
-    value?: string;
-    ptAriaLabeledBy?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-    dateFormat: "yy-mm-dd",
-    mode: VIEW,
-    value: "",
-});
-
-const emits = defineEmits(["update"]);
-
-const onUpdate = (val: string) => {
-    emits("update", val);
-};
-</script>
-
-<template>
-    <div>
-        <div v-if="mode === VIEW">
-            <DateDatatypeViewer
-                :date-format="dateFormat"
-                :value="value"
-            />
-        </div>
-        <div v-if="mode === EDIT">
-            <DateDatatypeEditor
-                :date-format="dateFormat"
-                :value="value"
-                :pt-aria-labeled-by="ptAriaLabeledBy"
-                @update="onUpdate"
-            />
-        </div>
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
deleted file mode 100644
index 65bbb231..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import NonLocalizedStringViewer from "@/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue";
-import NonLocalizedStringEditor from "@/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue";
-import type { DataComponentMode } from "@/arches_lingo/types.ts";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
-
-const props = defineProps<{
-    mode?: DataComponentMode;
-    value?: string;
-    passThruId?: string;
-}>();
-const emits = defineEmits(["update"]);
-const onUpdate = (val: string) => {
-    emits("update", val);
-};
-</script>
-<template>
-    <div>
-        <div v-if="mode === VIEW">
-            <NonLocalizedStringViewer :value="value ?? ''" />
-        </div>
-        <div v-if="mode === EDIT">
-            <NonLocalizedStringEditor
-                :value="value ?? ''"
-                :pass-thru-id="props.passThruId"
-                @update="onUpdate"
-            />
-        </div>
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
deleted file mode 100644
index ea04c85e..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
-import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
-import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue";
-
-import type {
-    ControlledListItem,
-    DataComponentMode,
-} from "@/arches_lingo/types";
-
-defineProps<{
-    mode?: DataComponentMode;
-    value?: ControlledListItem[];
-    multiValue?: boolean;
-    options?: ControlledListItem[];
-    ptAriaLabeledBy?: string;
-}>();
-const emit = defineEmits(["update"]);
-const onUpdate = (val: ControlledListItem[]) => {
-    emit("update", val);
-};
-</script>
-<template>
-    <div>
-        <div v-if="mode === VIEW">
-            <ReferenceDatatypeViewer :value="value" />
-        </div>
-        <div v-if="mode === EDIT">
-            <ReferenceDatatypeEditor
-                :value="value"
-                :options="options"
-                :multi-value="multiValue"
-                :pt-aria-labeled-by="ptAriaLabeledBy"
-                @update="onUpdate"
-            />
-        </div>
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
deleted file mode 100644
index d3443d6f..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue";
-import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
-import type {
-    DataComponentMode,
-    ResourceInstanceReference,
-} from "@/arches_lingo/types";
-
-const { mode = VIEW } = defineProps<{
-    mode?: DataComponentMode;
-    value?: ResourceInstanceReference[];
-    options?: ResourceInstanceReference[];
-    ptAriaLabeledBy?: string;
-}>();
-
-const emits = defineEmits(["update"]);
-
-function onUpdate(val: string[]) {
-    emits("update", val);
-}
-</script>
-<template>
-    <div v-if="mode === VIEW">
-        <ResourceInstanceRelationshipsViewer :value="value" />
-    </div>
-    <div v-if="mode === EDIT">
-        <ResourceInstanceRelationshipsEditor
-            :options="options"
-            :val="
-                value?.map((referenceValue) => referenceValue.resourceId) ?? []
-            "
-            :pt-aria-labeled-by="ptAriaLabeledBy"
-            @update="onUpdate"
-        />
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
deleted file mode 100644
index 9f2e9b2b..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { toRef, watch } from "vue";
-
-import DatePicker from "primevue/datepicker";
-
-const props = defineProps<{
-    value: string | undefined;
-    dateFormat: string;
-    ptAriaLabeledBy?: string;
-}>();
-
-const emit = defineEmits(["update"]);
-
-const modelValue = toRef(props.value);
-
-watch(
-    () => props.value,
-    (newValue) => {
-        modelValue.value = newValue;
-    },
-);
-
-// Datepicker returns date object, which needs to be parsed to post back
-// https://github.com/primefaces/primevue/issues/6278
-function parseDate(date: unknown): string | null {
-    if (date) {
-        return new Date(date as string).toISOString().split("T")[0];
-    }
-    return null;
-}
-</script>
-
-<template>
-    <DatePicker
-        v-model="modelValue"
-        icon-display="input"
-        :date-format="dateFormat"
-        show-icon
-        :aria-labelledby="props.ptAriaLabeledBy"
-        @update:model-value="() => emit('update', parseDate(modelValue))"
-    />
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue
deleted file mode 100644
index ea6424cd..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { toRef, watch } from "vue";
-
-import DatePicker from "primevue/datepicker";
-
-const props = defineProps<{
-    value: string | undefined;
-    dateFormat: string;
-}>();
-
-const modelValue = toRef(props.value);
-
-watch(
-    () => props.value,
-    (newValue) => {
-        modelValue.value = newValue;
-    },
-);
-</script>
-
-<template>
-    <DatePicker
-        v-model="modelValue"
-        :date-format="dateFormat"
-        disabled
-    />
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue b/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue
deleted file mode 100644
index 3cf49fb4..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import InputText from "primevue/inputtext";
-
-const props = defineProps<{
-    value: string;
-    passThruId?: string;
-}>();
-
-const updateableValue = ref<string>(props.value as string);
-
-const emit = defineEmits(["update"]);
-
-watch(props, (newValue) => {
-    updateableValue.value = newValue.value;
-});
-
-watch(updateableValue, (newValue) => {
-    emit("update", newValue);
-});
-</script>
-<template>
-    <div>
-        <InputText
-            :id="props.passThruId"
-            v-model="updateableValue"
-            type="text"
-        />
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue b/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue
deleted file mode 100644
index b0570b45..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{ value?: string | null }>();
-</script>
-<template>
-    <p>{{ props.value }}</p>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
deleted file mode 100644
index 7badee9e..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, ref, toRef, watch } from "vue";
-import Select from "primevue/select";
-import MultiSelect from "primevue/multiselect";
-
-import { systemLanguageKey } from "@/arches_lingo/constants.ts";
-import { PREF_LABEL } from "@/arches_vue_utils/constants.ts";
-
-import type { ControlledListItem } from "@/arches_lingo/types";
-import type { Language } from "@/arches_vue_utils/types.ts";
-
-const systemLanguage = inject(systemLanguageKey) as Language;
-const emit = defineEmits(["update"]);
-const props = withDefaults(
-    defineProps<{
-        value?: ControlledListItem[];
-        options?: ControlledListItem[];
-        multiValue?: boolean;
-        ptAriaLabeledBy?: string;
-    }>(),
-    {
-        value: () => [],
-        options: () => [],
-    },
-);
-
-const modelValue = toRef(props, "value");
-const val = computed({
-    get() {
-        return extractURI(modelValue.value);
-    },
-    set(newVal) {
-        if (!props.multiValue) {
-            const foundItem = props.options?.find(
-                (item) => item.uri === newVal,
-            );
-            const item = foundItem ? [foundItem] : [];
-            emit("update", item);
-        } else {
-            const foundItems = props.options?.filter((item) =>
-                newVal.includes(item.uri),
-            );
-            const items = foundItems ?? [];
-            emit("update", items);
-        }
-    },
-});
-
-const primeVuePickerVal = ref(val.value);
-watch(primeVuePickerVal, (newVal) => {
-    val.value = newVal;
-});
-
-function extractURI(item: ControlledListItem[]): string | string[] {
-    if (item && !props.multiValue) {
-        return item[0]?.uri;
-    } else if (item && props.multiValue) {
-        return item.map((item) => item.uri);
-    } else {
-        return [];
-    }
-}
-
-function getOptionLabels(item: ControlledListItem): string {
-    const prefLabels = item.labels.filter(
-        (label) => label.valuetype_id === PREF_LABEL,
-    );
-    const optionLabel =
-        prefLabels.find(
-            (label) => label.language_id === systemLanguage?.code,
-        ) || prefLabels[0];
-    return optionLabel?.value ?? "";
-}
-</script>
-
-<template>
-    <Select
-        v-model="primeVuePickerVal"
-        v-if:="!props.multiValue"
-        :show-toggle-all="!!options?.length"
-        :options
-        :option-label="getOptionLabels"
-        option-value="uri"
-        :pt="{
-            emptyMessage: { style: { fontFamily: 'sans-serif' } },
-            option: { style: { fontFamily: 'sans-serif' } },
-        }"
-        :placeholder="$gettext('Select References')"
-        :aria-labelledby="props.ptAriaLabeledBy"
-    />
-    <MultiSelect
-        v-if="props.multiValue"
-        v-model="primeVuePickerVal"
-        :show-toggle-all="!!options?.length"
-        :options
-        :option-label="getOptionLabels"
-        option-value="uri"
-        :pt="{
-            emptyMessage: { style: { fontFamily: 'sans-serif' } },
-            option: { style: { fontFamily: 'sans-serif' } },
-        }"
-        :placeholder="$gettext('Select References')"
-        :aria-labelledby="props.ptAriaLabeledBy"
-    />
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue
deleted file mode 100644
index a863750f..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { ControlledListItem } from "@/arches_lingo/types";
-
-withDefaults(
-    defineProps<{
-        value?: ControlledListItem[] | ControlledListItem;
-    }>(),
-    {
-        value: () => [],
-    },
-);
-</script>
-<template>
-    <span v-if="value instanceof Array">
-        <span
-            v-for="val in value"
-            :key="val.list_id"
-        >
-            <span>{{ val.labels[0].value }}</span>
-        </span>
-    </span>
-    <span v-else-if="value">
-        <span>{{ (value as ControlledListItem).labels[0].value }}</span>
-    </span>
-    <span v-else>
-        <span>{{ $gettext("None") }}</span>
-    </span>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
deleted file mode 100644
index 90a91aeb..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { computed, toRef, ref, watch } from "vue";
-import MultiSelect from "primevue/multiselect";
-import type { ResourceInstanceReference } from "@/arches_lingo/types";
-import { useGettext } from "vue3-gettext";
-
-const { $gettext } = useGettext();
-
-const props = withDefaults(
-    defineProps<{
-        val?: string[];
-        options?: ResourceInstanceReference[];
-        ptAriaLabeledBy?: string;
-    }>(),
-    {
-        options: () => [],
-    },
-);
-
-const emit = defineEmits(["update"]);
-
-const valRef = toRef(props, "val");
-
-const value = computed({
-    get() {
-        return valRef.value;
-    },
-    set(value) {
-        console.log("value", value);
-        emit("update", value);
-    },
-});
-
-const primeVuePickerVal = ref(value.value);
-watch(primeVuePickerVal, (newVal) => {
-    value.value = newVal;
-});
-</script>
-<template>
-    <MultiSelect
-        v-model="primeVuePickerVal"
-        :show-toggle-all="!!options?.length"
-        :options
-        option-label="display_value"
-        option-value="resourceId"
-        :pt="{
-            emptyMessage: { style: { fontFamily: 'sans-serif' } },
-            option: { style: { fontFamily: 'sans-serif' } },
-        }"
-        :placeholder="$gettext('Select Resources')"
-        :aria-labelledby="props.ptAriaLabeledBy"
-    />
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue
deleted file mode 100644
index f5757350..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useGettext } from "vue3-gettext";
-import arches from "arches";
-import type { ResourceInstanceReference } from "@/arches_lingo/types";
-
-const { $gettext } = useGettext();
-
-withDefaults(defineProps<{ value?: ResourceInstanceReference[] }>(), {
-    value: (): ResourceInstanceReference[] => [],
-});
-</script>
-<template>
-    <span v-if="value">
-        <span
-            v-for="val in value"
-            :key="val.resourceXresourceId"
-            class="resource-instance-relationship-view"
-        >
-            <a :href="`${arches.urls.resource_editor}${val.resourceId}`">
-                {{ val.display_value }}
-            </a>
-        </span>
-    </span>
-    <span v-else>{{ $gettext("None") }}</span>
-</template>
-
-<style scoped>
-.resource-instance-relationship-view {
-    padding: 0 0.25rem;
-}
-</style>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/SchemeLicense.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/SchemeLicense.vue
index 91f7a3c0..ffdb4f35 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/SchemeLicense.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/SchemeLicense.vue
@@ -1,51 +1,65 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { fetchLingoResource } from "@/arches_lingo/api.ts";
 
-import type {
-    DataComponentMode,
-    SchemeRights,
-    SchemeRightStatement,
-} from "@/arches_lingo/types";
-import {
-    NEW,
-    VIEW,
-    EDIT,
-} from "@/arches_lingo/constants.ts";
+import ProgressSpinner from "primevue/progressspinner";
+
 import SchemeLicenseViewer from "@/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseViewer.vue";
 import SchemeLicenseEditor from "@/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseEditor.vue";
 
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+
+import {
+    // fetchLingoResourcePartial,
+    fetchLingoResource,
+} from "@/arches_lingo/api.ts";
+
+import type { DataComponentMode, SchemeRights } from "@/arches_lingo/types";
+
 const props = defineProps<{
     mode: DataComponentMode;
-    tileId?: string | null;
+    sectionTitle: string;
+    componentName: string;
     graphSlug: string;
-    nodeGroupAlias: string;
+    nodegroupAlias: string;
     resourceInstanceId: string | undefined;
+    tileId?: string;
 }>();
 
 const isLoading = ref(false);
-const schemeRights = ref<SchemeRights>({});
-const schemeRightStatement = ref<SchemeRightStatement>({});
+
+const tileData = ref<SchemeRights>();
+
 const shouldCreateNewTile = Boolean(props.mode === EDIT && !props.tileId);
 
 onMounted(async () => {
-    getSectionValue();
-});
+    if (
+        props.resourceInstanceId &&
+        (props.mode === VIEW || !shouldCreateNewTile)
+    ) {
+        isLoading.value = true;
 
-const route = useRoute();
+        const sectionValue = await getSectionValue();
+        tileData.value = sectionValue[props.nodegroupAlias];
 
+        isLoading.value = false;
+    }
+});
 
 async function getSectionValue() {
-    if (route.params.id === NEW) {
-        return;
+    try {
+        return await fetchLingoResource(
+            props.graphSlug,
+            props.resourceInstanceId as string,
+        );
+
+        // return await fetchLingoResourcePartial(
+        //     props.graphSlug,
+        //     props.resourceInstanceId as string,
+        //     props.nodegroupAlias,
+        // );
+    } catch (error) {
+        console.error(error);
     }
-    const schemeInstance = await fetchLingoResource(
-        "scheme",
-        route.params.id as string,
-    );
-    schemeRights.value = schemeInstance?.rights ?? {};
-    schemeRightStatement.value = schemeInstance?.rights?.right_statement ?? {};
 }
 </script>
 
@@ -57,13 +71,20 @@ async function getSectionValue() {
     <template v-else>
         <SchemeLicenseViewer
             v-if="mode === VIEW"
-            :scheme-rights="schemeRights"
-            :scheme-right-statement="schemeRightStatement"
+            :tile-data="tileData"
+            :component-name="props.componentName"
+            :graph-slug="props.graphSlug"
+            :section-title="props.sectionTitle"
         />
         <SchemeLicenseEditor
             v-else-if="mode === EDIT"
-            :scheme-rights="shouldCreateNewTile ? undefined : schemeRights"
-            :scheme-right-statement="shouldCreateNewTile ? undefined : schemeRightStatement"
+            :tile-data="shouldCreateNewTile ? undefined : tileData"
+            :section-title="props.sectionTitle"
+            :graph-slug="props.graphSlug"
+            :component-name="props.componentName"
+            :resource-instance-id="props.resourceInstanceId"
+            :nodegroup-alias="props.nodegroupAlias"
+            :tile-id="props.tileId"
         />
     </template>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseEditor.vue
index c504ade8..29e9342f 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseEditor.vue
@@ -1,59 +1,133 @@
 <script setup lang="ts">
-import { useGettext } from "vue3-gettext";
-import type {
-    SchemeRights,
-    SchemeRightStatement,
-} from "@/arches_lingo/types";
-import { EDIT } from "@/arches_lingo/constants.ts";
+import { inject, useTemplateRef, watch, type Component, type Ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { Form } from "@primevue/forms";
+
 import NonLocalizedStringWidget from "@/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue";
 import ReferenceSelectWidget from "@/arches_controlled_lists/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue";
 import ResourceInstanceMultiSelectWidget from "@/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue";
 
+import { createScheme, upsertLingoTile } from "@/arches_lingo/api.ts";
+
+import { EDIT } from "@/arches_lingo/constants.ts";
+
+import type { FormSubmitEvent } from "@primevue/forms";
+import type { SchemeRights } from "@/arches_lingo/types";
+
 const props = defineProps<{
-    schemeRights: SchemeRights | undefined;
-    schemeRightStatement: SchemeRightStatement | undefined;
+    tileData: SchemeRights | undefined;
+    graphSlug: string;
+    sectionTitle: string;
+    resourceInstanceId: string | undefined;
+    componentName: string;
+    nodegroupAlias: string;
+    tileId?: string;
 }>();
 
-const { $gettext } = useGettext();
+const router = useRouter();
+
+const schemeEditorFormRef = inject<Ref<Component | null>>(
+    "schemeEditorFormRef",
+);
+const refreshReportSection = inject<(componentName: string) => void>(
+    "refreshReportSection",
+);
 
+const formRef = useTemplateRef("form");
+watch(
+    () => formRef.value,
+    (formComponent) => (schemeEditorFormRef!.value = formComponent),
+);
+
+async function save(e: FormSubmitEvent) {
+    try {
+        const formData = Object.fromEntries(
+            Object.entries(e.states).map(([key, state]) => [key, state.value]),
+        );
+
+        if (!props.resourceInstanceId) {
+            const updated = await createScheme({
+                [props.nodegroupAlias]: formData,
+            });
+
+            await router.push({
+                name: props.graphSlug,
+                params: { id: updated.resourceinstanceid },
+            });
+
+            // console.log(updated);  // UPDATED DOES NOT RETURN A TILEID!
+            // openEditor!("SchemeLabel", updated.appellative_status[0].tileid);
+        } else {
+            await upsertLingoTile(
+                props.graphSlug,
+                props.nodegroupAlias,
+                {
+                    resourceinstance: props.resourceInstanceId,
+                    ...formData,
+                    tileid: props.tileId,
+                },
+                props.tileId,
+            );
+        }
+
+        refreshReportSection!(props.componentName);
+    } catch (error) {
+        console.error(error);
+    }
+}
 </script>
+
 <template>
-    <h4>{{ $gettext("Scheme Rights") }}</h4>
-    <ResourceInstanceMultiSelectWidget
-        graph-slug="scheme"
-        node-alias="right_holder"
-        :initial-value="props.schemeRights?.right_holder"
-        :mode="EDIT"
-    />
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_type"
-        :initial-value="props.schemeRights?.right_type"
-        :multi-value="false"
-        :mode="EDIT"
-    />
-    <NonLocalizedStringWidget
-        graph-slug="scheme"
-        node-alias="right_statement_content"
-        :initial-value="props.schemeRightStatement?.right_statement_content"
-        :mode="EDIT"
-    />
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_language"
-        :initial-value="props.schemeRightStatement?.right_statement_language"
-        :mode="EDIT"
-    />
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_type"
-        :initial-value="props.schemeRightStatement?.right_statement_type"
-        :mode="EDIT"
-    />
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_type_metatype"
-        :initial-value="props.schemeRightStatement?.right_statement_type_metatype"
-        :mode="EDIT"
-    />
-</template>
\ No newline at end of file
+    <h3>{{ props.sectionTitle }}</h3>
+
+    <Form
+        ref="form"
+        @submit="save"
+    >
+        <ResourceInstanceMultiSelectWidget
+            node-alias="right_holder"
+            :graph-slug="props.graphSlug"
+            :initial-value="props.tileData?.right_holder"
+            :mode="EDIT"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_type"
+            :graph-slug="props.graphSlug"
+            :initial-value="props.tileData?.right_type"
+            :mode="EDIT"
+        />
+        <NonLocalizedStringWidget
+            node-alias="right_statement_content"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_content
+            "
+            :mode="EDIT"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_language"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_language
+            "
+            :mode="EDIT"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_type"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_type
+            "
+            :mode="EDIT"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_type_metatype"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_type_metatype
+            "
+            :mode="EDIT"
+        />
+    </Form>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseViewer.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseViewer.vue
index 82fb1d37..e4b88534 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/SchemeLicense/components/SchemeLicenseViewer.vue
@@ -1,88 +1,105 @@
 <script setup lang="ts">
-import { inject } from "vue";
+import { computed, inject } from "vue";
 import { useGettext } from "vue3-gettext";
+
 import Button from "primevue/button";
-import type {
-    SchemeRights,
-    SchemeRightStatement,
-} from "@/arches_lingo/types";
-import { VIEW } from "@/arches_lingo/constants.ts";
+
 import NonLocalizedStringWidget from "@/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue";
 import ReferenceSelectWidget from "@/arches_controlled_lists/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue";
 import ResourceInstanceMultiSelectWidget from "@/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue";
 
+import { VIEW } from "@/arches_lingo/constants.ts";
+
+import type { SchemeRights } from "@/arches_lingo/types";
+
 const props = defineProps<{
-    schemeRights: SchemeRights | undefined;
-    schemeRightStatement: SchemeRightStatement | undefined;
+    tileData: SchemeRights | undefined;
+    graphSlug: string;
+    componentName: string;
+    sectionTitle: string;
 }>();
+
 const { $gettext } = useGettext();
 
-const openEditor = inject<(componentName: string) => void>("openEditor");
+const openEditor =
+    inject<(componentName: string, tileId: string | undefined) => void>(
+        "openEditor",
+    );
 
+const buttonLabel = computed(() => {
+    if (props.tileData) {
+        return $gettext("Edit Scheme Rights");
+    } else {
+        return $gettext("Add New Scheme Rights");
+    }
+});
 </script>
 <template>
-    <div
-        style="
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 0.125rem solid var(--p-menubar-border-color);
-        "
-    >
-        <h3>{{ $gettext("Scheme Rights") }}</h3>
-        <div>
-            <Button
-                :label="$gettext('Add New Scheme Right')"
-                @click="openEditor!('SchemeLicense')"
-            ></Button>
-        </div>
+    <div class="section-header">
+        <h2>{{ props.sectionTitle }}</h2>
+
+        <Button
+            :label="buttonLabel"
+            @click="openEditor!(props.componentName, props.tileData?.tileid)"
+        ></Button>
+    </div>
+
+    <div v-if="props.tileData">
+        <ResourceInstanceMultiSelectWidget
+            node-alias="right_holder"
+            :graph-slug="props.graphSlug"
+            :initial-value="props.tileData?.right_holder"
+            :mode="VIEW"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_type"
+            :graph-slug="props.graphSlug"
+            :initial-value="props.tileData?.right_type"
+            :mode="VIEW"
+        />
+        <NonLocalizedStringWidget
+            node-alias="right_statement_content"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_content
+            "
+            :mode="VIEW"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_language"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_language
+            "
+            :mode="VIEW"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_type"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_type
+            "
+            :mode="VIEW"
+        />
+        <ReferenceSelectWidget
+            node-alias="right_statement_type_metatype"
+            :graph-slug="props.graphSlug"
+            :initial-value="
+                props.tileData?.right_statement?.right_statement_type_metatype
+            "
+            :mode="VIEW"
+        />
+    </div>
+    <div v-else>
+        <p>{{ $gettext("No Scheme Rights were found.") }}</p>
     </div>
-    <h4>{{ $gettext("Rights Holders") }}</h4>
-    <ResourceInstanceMultiSelectWidget
-        graph-slug="scheme"
-        node-alias="right_holder"
-        :initial-value="props.schemeRights?.right_holder"
-        :hide-label="true"
-        :mode="VIEW"
-    />
-    <h4>{{ $gettext("Rights Type") }}</h4>
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_type"
-        :initial-value="props.schemeRights?.right_type"
-        :multi-value="false"
-        :hide-label="true"
-        :mode="VIEW"
-    />
-    <h4>{{ $gettext("Statement") }}</h4>
-    <NonLocalizedStringWidget
-        graph-slug="scheme"
-        node-alias="right_statement_content"
-        :initial-value="props.schemeRightStatement?.right_statement_content"
-        :mode="VIEW"
-    />
-    <h4>{{ $gettext("Statement Language") }}</h4>
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_language"
-        :initial-value="props.schemeRightStatement?.right_statement_language"
-        :hide-label="true"
-        :mode="VIEW"
-    />
-    <h4>{{ $gettext("Statement Type") }}</h4>
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_type"
-        :initial-value="props.schemeRightStatement?.right_statement_type"
-        :hide-label="true"
-        :mode="VIEW"
-    />
-    <h4>{{ $gettext("Statement Type Metatype") }}</h4>
-    <ReferenceSelectWidget
-        graph-slug="scheme"
-        node-alias="right_statement_type_metatype"
-        :initial-value="props.schemeRightStatement?.right_statement_type_metatype"
-        :hide-label="true"
-        :mode="VIEW"
-    />
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 0.125rem solid var(--p-menubar-border-color);
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeNote/components/SchemeNoteViewer.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeNote/components/SchemeNoteViewer.vue
index 1be17cc9..e34bef74 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/SchemeNote/components/SchemeNoteViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/SchemeNote/components/SchemeNoteViewer.vue
@@ -53,8 +53,8 @@ const metaStringLabel: MetaStringText = {
     >
         <template #name="{ rowData }">
             <NonLocalizedStringWidget
-                graph-slug="scheme"
                 node-alias="statement_content_n1"
+                :graph-slug="props.graphSlug"
                 :initial-value="rowData.statement_content_n1"
                 :mode="VIEW"
                 :hide-label="true"
@@ -62,8 +62,8 @@ const metaStringLabel: MetaStringText = {
         </template>
         <template #type="{ rowData }">
             <ReferenceSelectWidget
-                graph-slug="scheme"
                 node-alias="statement_type_n1"
+                :graph-slug="props.graphSlug"
                 :initial-value="rowData.statement_type_n1"
                 :mode="VIEW"
                 :hide-label="true"
@@ -71,8 +71,8 @@ const metaStringLabel: MetaStringText = {
         </template>
         <template #language="{ rowData }">
             <ReferenceSelectWidget
-                graph-slug="scheme"
                 node-alias="statement_language_n1"
+                :graph-slug="props.graphSlug"
                 :initial-value="rowData.statement_language_n1"
                 :mode="VIEW"
                 :hide-label="true"
@@ -80,14 +80,14 @@ const metaStringLabel: MetaStringText = {
         </template>
         <template #drawer="{ rowData }">
             <ResourceInstanceMultiSelectWidget
-                graph-slug="scheme"
                 node-alias="statement_data_assignment_object_used"
+                :graph-slug="props.graphSlug"
                 :initial-value="rowData.statement_data_assignment_object_used"
                 :mode="VIEW"
             />
             <ResourceInstanceMultiSelectWidget
-                graph-slug="scheme"
                 node-alias="statement_data_assignment_actor"
+                :graph-slug="props.graphSlug"
                 :initial-value="rowData.statement_data_assignment_actor"
                 :mode="VIEW"
             />
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeStandard/components/SchemeStandardEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeStandard/components/SchemeStandardEditor.vue
index f29a1215..b714d565 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/SchemeStandard/components/SchemeStandardEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/SchemeStandard/components/SchemeStandardEditor.vue
@@ -12,8 +12,6 @@ import { EDIT } from "@/arches_lingo/constants.ts";
 import type { FormSubmitEvent } from "@primevue/forms";
 import type { SchemeCreation } from "@/arches_lingo/types.ts";
 
-const router = useRouter();
-
 const props = defineProps<{
     tileData: SchemeCreation | undefined;
     graphSlug: string;
@@ -24,6 +22,8 @@ const props = defineProps<{
     tileId?: string;
 }>();
 
+const router = useRouter();
+
 const schemeEditorFormRef = inject<Ref<Component | null>>(
     "schemeEditorFormRef",
 );
diff --git a/arches_lingo/src/arches_lingo/pages/SchemePage.vue b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
index d3b536fb..8e2a365b 100644
--- a/arches_lingo/src/arches_lingo/pages/SchemePage.vue
+++ b/arches_lingo/src/arches_lingo/pages/SchemePage.vue
@@ -75,9 +75,9 @@ const componentData = ref([
     {
         component: markRaw(SchemeLicense),
         componentName: "SchemeLicense",
-        name: $gettext("Scheme Rights"),
+        sectionTitle: $gettext("Scheme Rights"),
         graphSlug: "scheme",
-        nodeGroupAlias: "rights",
+        nodegroupAlias: "rights",
         key: 0,
     },
 ]);