further design polish #209

arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue

@@ -14,19 +14,23 @@ import { DANGER } from "@/arches_lingo/constants.ts";
 
 import type { MetaStringText } from "@/arches_lingo/types.ts";
 
-const { $gettext } = useGettext();
-const confirm = useConfirm();
-
-const openEditor = inject<(tileid: string) => void>("openEditor");
-const forceSectionRefresh = inject<() => void>("forceSectionRefresh");
-
 const props = defineProps<{
     metaStringText: MetaStringText;
     metaStrings?: object[];
     graphSlug: string;
     nodeAlias: string;
+    componentName: string;
 }>();
 
+const { $gettext } = useGettext();
+const confirm = useConfirm();
+
+const openEditor =
+    inject<(componentName: string, tileid: string) => void>("openEditor");
+const forceSectionRefresh = inject<(componentName: string) => void>(
+    "forceSectionRefresh",
+);
+
 const expandedRows = ref([]);
 
 function confirmDelete(tileId: string) {
@@ -52,7 +56,7 @@ function confirmDelete(tileId: string) {
 async function deleteSectionValue(tileId: string) {
     try {
         await deleteLingoTile(props.graphSlug, props.nodeAlias, tileId);
-        forceSectionRefresh!();
+        forceSectionRefresh!(props.componentName);
     } catch (error) {
         // toast.add({
         //     severity: ERROR,
@@ -119,7 +123,9 @@ async function deleteSectionValue(tileId: string) {
                         <Button
                             icon="pi pi-file-edit"
                             :aria-label="$gettext('edit')"
-                            @click="openEditor!(slotProps.data.tileid)"
+                            @click="
+                                openEditor(componentName, slotProps.data.tileid)
+                            "
                         />
                         <Button
                             icon="pi pi-trash"

arches_lingo/src/arches_lingo/components/scheme/SchemeLabel/SchemeLabel.vue

@@ -10,13 +10,7 @@ import ProgressSpinner from "primevue/progressspinner";
 import SchemeLabelEditor from "@/arches_lingo/components/scheme/SchemeLabel/components/SchemeLabelEditor.vue";
 import SchemeLabelViewer from "@/arches_lingo/components/scheme/SchemeLabel/components/SchemeLabelViewer.vue";
 
-import {
-    EDIT,
-    ERROR,
-    NEW,
-    OPEN_EDITOR,
-    VIEW,
-} from "@/arches_lingo/constants.ts";
+import { EDIT, ERROR, VIEW } from "@/arches_lingo/constants.ts";
 
 import { fetchLingoResourcePartial } from "@/arches_lingo/api.ts";
 
@@ -25,13 +19,15 @@ import type {
     DataComponentMode,
 } from "@/arches_lingo/types.ts";
 
+defineOptions({
+    componentName: "SchemeLabel",
+});
+
 const props = defineProps<{
     mode: DataComponentMode;
     tileId?: string | null;
 }>();
 
-console.log("(D(D(DD())))", props.tileId);
-
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();

arches_lingo/src/arches_lingo/components/scheme/SchemeLabel/components/SchemeLabelEditor.vue

@@ -43,7 +43,9 @@ const formRef = useTemplateRef<FormInstance>("formRef");
 const formKey = ref(0);
 
 import { inject } from "vue";
-const forceSectionRefresh = inject("forceSectionRefresh");
+const forceSectionRefresh = inject<(componentName: string) => void>(
+    "forceSectionRefresh",
+);
 
 const isFormDirty = computed(() => {
     if (!formRef.value) return false;
@@ -78,7 +80,7 @@ async function save(e: FormSubmitEvent) {
             props.schemeLabel?.tileid,
         );
 
-        forceSectionRefresh();
+        forceSectionRefresh!("SchemeLabel");
     } catch (error) {
         console.error(error);
     }

arches_lingo/src/arches_lingo/components/scheme/SchemeLabel/components/SchemeLabelViewer.vue

@@ -4,14 +4,18 @@ import { useGettext } from "vue3-gettext";
 import MetaStringViewer from "@/arches_lingo/components/generic/MetaStringViewer.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
-import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+
+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 {
     AppellativeStatus,
     MetaStringText,
 } from "@/arches_lingo/types.ts";
+import { getCurrentInstance } from "vue";
 
 const { $gettext } = useGettext();
 
@@ -29,66 +33,62 @@ const metaStringLabel: MetaStringText = {
 </script>
 
 <template>
-    <SchemeReportSection
-        :title-text="$gettext('Scheme Labels')"
-        :button-text="$gettext('Add New Scheme Label')"
+    <MetaStringViewer
+        :meta-strings="props.schemeLabels"
+        :meta-string-text="metaStringLabel"
+        component-name="SchemeLabel"
+        graph-slug="scheme"
+        node-alias="appellative_status"
     >
-        <MetaStringViewer
-            :meta-strings="props.schemeLabels"
-            :meta-string-text="metaStringLabel"
-            graph-slug="scheme"
-            node-alias="appellative_status"
-        >
-            <template #name="{ rowData }">
-                <span>
-                    {{
-                        (rowData as AppellativeStatus)
-                            .appellative_status_ascribed_name_content
-                    }}
-                </span>
-            </template>
-            <template #type="{ rowData }">
-                <ReferenceDatatype
+        <template #name="{ rowData }">
+            <span>
+                {{
+                    (rowData as AppellativeStatus)
+                        .appellative_status_ascribed_name_content
+                }}
+            </span>
+        </template>
+        <template #type="{ rowData }">
+            <ReferenceDatatype
+                :value="
+                    (rowData as AppellativeStatus)
+                        .appellative_status_ascribed_relation
+                "
+                :mode="VIEW"
+            >
+            </ReferenceDatatype>
+        </template>
+        <template #language="{ rowData }">
+            <ReferenceDatatype
+                :value="
+                    (rowData as AppellativeStatus)
+                        .appellative_status_ascribed_name_language
+                "
+                :mode="VIEW"
+            >
+            </ReferenceDatatype>
+        </template>
+        <template #drawer="{ rowData }">
+            <div>
+                <span>{{ $gettext("Bibliographic Sources:") }}</span>
+                <ResourceInstanceRelationships
                     :value="
                         (rowData as AppellativeStatus)
-                            .appellative_status_ascribed_relation
+                            .appellative_status_data_assignment_object_used
                     "
-                    :mode="VIEW"
-                >
-                </ReferenceDatatype>
-            </template>
-            <template #language="{ rowData }">
-                <ReferenceDatatype
+                ></ResourceInstanceRelationships>
+            </div>
+            <div>
+                <span>{{ $gettext("Contributors:") }}</span>
+                <ResourceInstanceRelationships
                     :value="
                         (rowData as AppellativeStatus)
-                            .appellative_status_ascribed_name_language
+                            .appellative_status_data_assignment_actor
                     "
-                    :mode="VIEW"
-                >
-                </ReferenceDatatype>
-            </template>
-            <template #drawer="{ rowData }">
-                <div>
-                    <span>{{ $gettext("Bibliographic Sources:") }}</span>
-                    <ResourceInstanceRelationships
-                        :value="
-                            (rowData as AppellativeStatus)
-                                .appellative_status_data_assignment_object_used
-                        "
-                    ></ResourceInstanceRelationships>
-                </div>
-                <div>
-                    <span>{{ $gettext("Contributors:") }}</span>
-                    <ResourceInstanceRelationships
-                        :value="
-                            (rowData as AppellativeStatus)
-                                .appellative_status_data_assignment_actor
-                        "
-                    ></ResourceInstanceRelationships>
-                </div>
-            </template>
-        </MetaStringViewer>
-    </SchemeReportSection>
+                ></ResourceInstanceRelationships>
+            </div>
+        </template>
+    </MetaStringViewer>
 </template>
 <style scoped>
 :deep(.drawer) {

arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue

@@ -6,18 +6,18 @@ import { EDIT, MAXIMIZE, MINIMIZE, CLOSE } from "@/arches_lingo/constants.ts";
 
 const { $gettext } = useGettext();
 const props = defineProps<{
-    editorMax: boolean;
+    isEditorMaximized: boolean;
     component: any;
     tileId?: string;
 }>();
 
 const emit = defineEmits([MAXIMIZE, MINIMIZE, CLOSE]);
 
 function toggleSize() {
-    if (props.editorMax) {
-        emit(MAXIMIZE);
-    } else {
+    if (props.isEditorMaximized) {
         emit(MINIMIZE);
+    } else {
+        emit(MAXIMIZE);
     }
 }
 </script>
@@ -34,8 +34,8 @@ function toggleSize() {
                     <i
                         :class="{
                             pi: true,
-                            'pi-window-maximize': props.editorMax,
-                            'pi-window-minimize': !props.editorMax,
+                            'pi-window-maximize': props.isEditorMaximized,
+                            'pi-window-minimize': !props.isEditorMaximized,
                         }"
                         aria-hidden="true"
                     />
@@ -56,7 +56,7 @@ function toggleSize() {
         <!-- <h3>{{ props.component.name }}</h3> -->
 
         <component
-            :is="props.component.component"
+            :is="props.component"
             v-bind="{ mode: EDIT, tileId: props.tileId }"
         />
     </div>

arches_lingo/src/arches_lingo/components/scheme/report/SchemeSection.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { inject } from "vue";
+// import { inject } from "vue";
 
-import Button from "primevue/button";
+// import Button from "primevue/button";
 
-const openEditor = inject<() => void>("openEditor");
+// const openEditor = inject<() => void>("openEditor");
 
-const props = defineProps<{
-    titleText: string;
-    buttonText: string;
-}>();
+// const props = defineProps<{
+//     titleText: string;
+//     buttonText: string;
+// }>();
 </script>
 
 <template>
-    <div class="section">
+    <!-- <div class="section">
         <div class="header">
             <h3>{{ props.titleText }}</h3>
             <div>
@@ -25,11 +25,11 @@ const props = defineProps<{
         <div class="content">
             <slot></slot>
         </div>
-    </div>
+    </div> -->
 </template>
 
 <style scoped>
-.section {
+/* .section {
     margin: 0 1rem;
 }
 .section .header {
@@ -42,5 +42,5 @@ const props = defineProps<{
 }
 .content {
     margin: 1rem 0;
-}
+} */
 </style>

arches_lingo/src/arches_lingo/constants.ts

@@ -13,8 +13,11 @@ export const OPEN_EDITOR = "openEditor";
 export const UPDATED = "updated";
 export const NEW = "new";
 export const MAXIMIZE = "maximize";
+export const MAXIMIZED = "maximized";
 export const MINIMIZE = "minimize";
+export const MINIMIZED = "minimized";
 export const CLOSE = "close";
+export const CLOSED = "closed";
 
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 export const SEARCH_RESULTS_PER_PAGE = 25;