Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates for namespace section #128

Merged
merged 3 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 4 additions & 11 deletions arches_lingo/pkg/graphs/resource_models/Scheme.json
Original file line number Diff line number Diff line change
Expand Up @@ -1463,20 +1463,13 @@
{
"card_id": "92c68f1f-423c-11ee-8a8d-11afefc4bff7",
"config": {
"defaultValue": {
"en": {
"direction": "ltr",
"value": ""
}
},
"defaultValue": "",
"i18n_properties": [
"placeholder"
],
"label": "Namespace Name",
"maxLength": null,
"placeholder": {
"en": "Enter text"
},
"placeholder":"Enter text",
"uneditable": false,
"width": "100%"
},
Expand All @@ -1488,7 +1481,7 @@
"sortorder": 0,
"source_identifier_id": null,
"visible": true,
"widget_id": "10000000-0000-0000-0000-000000000001"
"widget_id": "46ef064b-2611-4708-9f52-60136bd8a65b"
},
{
"card_id": "87fac835-423c-11ee-8a8d-11afefc4bff7",
Expand Down Expand Up @@ -3196,7 +3189,7 @@
{
"alias": "namespace_name",
"config": {},
"datatype": "string",
"datatype": "non-localized-string",
"description": null,
"exportable": false,
"fieldname": null,
Expand Down
13 changes: 3 additions & 10 deletions arches_lingo/pkg/graphs/resource_models/scheme_rdm_system.json
Original file line number Diff line number Diff line change
Expand Up @@ -3393,20 +3393,13 @@
{
"card_id": "5b8894b3-48aa-11ee-8a8d-11afefc4bff7",
"config": {
"defaultValue": {
"en": {
"direction": "ltr",
"value": ""
}
},
"defaultValue": "",
"i18n_properties": [
"placeholder"
],
"label": "Namespace Name",
"maxLength": null,
"placeholder": {
"en": "Enter text"
},
"placeholder": "Enter text",
"uneditable": false,
"width": "100%"
},
Expand All @@ -3417,7 +3410,7 @@
"node_id": "5b8894c0-48aa-11ee-8a8d-11afefc4bff7",
"sortorder": 0,
"visible": true,
"widget_id": "10000000-0000-0000-0000-000000000001"
"widget_id": "46ef064b-2611-4708-9f52-60136bd8a65b"
},
{
"card_id": "5b8894b6-48aa-11ee-8a8d-11afefc4bff7",
Expand Down
8 changes: 8 additions & 0 deletions arches_lingo/serializers.py
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ class Meta:
fields = "__all__"


class SchemeNamespaceSerializer(ArchesModelSerializer):
class Meta:
model = ResourceInstance
graph_slug = "scheme"
nodegroups = ["namespace"]
fields = "__all__"


class ConceptStatementSerializer(ArchesTileSerializer):
class Meta:
model = TileModel
Expand Down
25 changes: 25 additions & 0 deletions arches_lingo/src/arches_lingo/api.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import arches from "arches";
import Cookies from "js-cookie";
import type { SchemeNamespace } from "@/arches_lingo/types";

function getToken() {
const token = Cookies.get("csrftoken");
Expand Down Expand Up @@ -37,6 +38,30 @@ export const fetchUser = async () => {
return parsed;
};

export const fetchSchemeNamespace = async (schemeId: string) => {
const response = await fetch(arches.urls.api_uri_namespace(schemeId));
const parsed = await response.json();
if (!response.ok) throw new Error(parsed.message || response.statusText);
return parsed;
};

export const updateSchemeNamespace = async (
schemeId: string,
schemeNamespace: SchemeNamespace,
) => {
const response = await fetch(arches.urls.api_uri_namespace(schemeId), {
method: "PATCH",
headers: {
"X-CSRFTOKEN": getToken(),
"Content-Type": "application/json",
},
body: JSON.stringify(schemeNamespace),
});
const parsed = await response.json();
if (!response.ok) throw new Error(parsed.message || response.statusText);
return parsed;
};

export const fetchSearchResults = async (
searchTerm: string,
items: number,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { ControlledListItem } from "@/arches_lingo/types";
import ControlledListItemViewer from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";

const VIEW = "view";
const EDIT = "edit";

type DataComponentMode = typeof EDIT | typeof VIEW;

const props = defineProps<{
mode?: DataComponentMode;
value?: ControlledListItem;
}>();
defineEmits(["update"]);
</script>
<template>
<div>
<div v-if="!props.mode || props.mode === VIEW">
<ControlledListItemViewer :value="props.value" />
</div>
<div v-if="props.mode === EDIT"></div>
</div>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<script setup lang="ts">
import type { ControlledListItem } from "@/arches_lingo/types";

const props = defineProps<{ value?: ControlledListItem }>();
</script>
<template>
<p>{{ props.value?.labels }}</p>
</template>
chrabyrd marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script setup lang="ts">
import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";

const EDIT = "edit";
const VIEW = "view";

type DataComponentMode = typeof EDIT | typeof VIEW;
const props = defineProps<{ mode?: DataComponentMode; value?: string }>();
const emits = defineEmits(["update"]);
const onUpdate = (val: string) => {
emits("update", val);
};
</script>
<template>
<div>
<div v-if="!props.mode || props.mode === VIEW">
<NonLocalizedStringViewer :value="props.value ?? ''" />
</div>
<div v-if="props.mode === EDIT">
<NonLocalizedStringEditor
:value="props.value ?? ''"
@update="onUpdate"
/>
</div>
</div>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import InputText from "primevue/inputtext";

const props = defineProps<{ value: 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
v-model="updateableValue"
type="text"
/>
</div>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<script setup lang="ts">
const props = defineProps<{ value?: string | null }>();
</script>
<template>
<p>{{ props.value }}</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be a p-element? idk this may warrant larger discussion. What would we expect the read-only element to be in the case of every widget? In my head for this one it's a disabled input, but I do not feel strongly about this. @robgaston ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO a non-form element will look better in a report, but have no particular preference - I'll defer to consensus.

</template>
130 changes: 101 additions & 29 deletions arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,124 @@
import { useGettext } from "vue3-gettext";
import Button from "primevue/button";

const { $gettext } = useGettext();
import Tabs from "primevue/tabs";
import TabList from "primevue/tablist";
import Tab from "primevue/tab";
import TabPanels from "primevue/tabpanels";
import TabPanel from "primevue/tabpanel";
import SchemeNamespace from "../report/SchemeNamespace.vue";
import { onBeforeUpdate, onUpdated, ref } from "vue";

type sectionTypes = typeof SchemeNamespace;

const { $gettext } = useGettext();
const EDIT = "edit";
const props = defineProps<{
editorMax: boolean;
activeTab: string;
}>();
const childRefs = ref<Array<sectionTypes>>([]);
const schemeComponents = [
{
component: SchemeNamespace,
id: "namespace",
editorTabName: $gettext("Scheme Namespace"),
},
];

const emit = defineEmits(["maximize", "side", "close"]);
const emit = defineEmits(["maximize", "side", "close", "updated"]);

const toggleSize = () => {
onBeforeUpdate(() => {
childRefs.value = [];
});

function toggleSize() {
if (props.editorMax) {
emit("maximize");
} else {
emit("side");
}
};
}

function getRef(el: object | null, index: number) {
if (el != null) childRefs.value[index] = el as sectionTypes;
}

async function updateScheme() {
await Promise.all(
childRefs.value.map(async (ref) => {
return ref.save();
}),
);

emit("updated");
}
</script>

<template>
<div class="header">
<div>
<h3>{{ $gettext("Scheme Editor Tools") }}</h3>
<div>
<div class="header">
<div>
<Button
:aria-label="$gettext('toggle editor size')"
@click="toggleSize"
>
<i
:class="{
pi: true,
'pi-window-maximize': props.editorMax,
'pi-window-minimize': !props.editorMax,
}"
aria-hidden="true"
/>
</Button>
<Button
:aria-label="$gettext('close editor')"
@click="$emit('close')"
>
<i
class="pi pi-times"
aria-hidden="true"
/>
</Button>
<h3>{{ $gettext("Editor Tools") }}</h3>
<div>
<Button
:aria-label="$gettext('toggle editor size')"
@click="toggleSize"
>
<i
:class="{
pi: true,
'pi-window-maximize': props.editorMax,
'pi-window-minimize': !props.editorMax,
}"
aria-hidden="true"
/>
</Button>
<Button
:aria-label="$gettext('close editor')"
@click="$emit('close')"
>
<i
class="pi pi-times"
aria-hidden="true"
/>
</Button>
</div>
</div>
</div>
<div class="content">
<Tabs :value="activeTab">
<TabList>
<template
v-for="component in schemeComponents"
:key="component.id"
>
<Tab :value="component.id">{{
component.editorTabName
}}</Tab>
</template>
</TabList>
<TabPanels>
<template
v-for="(component, index) in schemeComponents"
:key="component.id"
>
<TabPanel :value="component.id">
<component
:is="component.component"
v-bind="{ mode: EDIT }"
:ref="(el) => getRef(el, index)"
v-on="onUpdated"
/>
</TabPanel>
</template>
</TabPanels>
</Tabs>
<Button
:label="$gettext('Update')"
@click="updateScheme"
></Button>
</div>
</div>
</template>
<style scoped>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
import { useGettext } from "vue3-gettext";
import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
const { $gettext } = useGettext();
const save = () => {
console.log("save");
};
const getSectionValue = async () => {
console.log("update");
};
defineExpose({ save, getSectionValue });
</script>

<template>
Expand Down
Loading
Loading