Skip to content

Commit

Permalink
design/pattern refactor #209
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrabyrd
chrabyrd committed Feb 21, 2025
1 parent 38c91ce commit 8a1b621
Show file tree
Hide file tree
Showing 9 changed files with 184 additions and 252 deletions.
50 changes: 31 additions & 19 deletions arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
<script setup lang="ts">
import { ref } from "vue";
import { inject, ref } from "vue";
import { useGettext } from "vue3-gettext";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Button from "primevue/button";
import ConfirmDialog from "primevue/confirmdialog";
import { useConfirm } from "primevue/useconfirm";
import type { MetaString, MetaStringText } from "@/arches_lingo/types.ts";
import { deleteLingoTile } from "@/arches_lingo/api.ts";
import { SECONDARY } from "@/arches_lingo/constants.ts";
import { DANGER } from "@/arches_controlled_lists/constants.ts";
import { DANGER } from "@/arches_lingo/constants.ts";
import type { MetaStringText } from "@/arches_lingo/types.ts";
const { $gettext } = useGettext();
const expandedRows = ref([]);
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;
}>();
const emits = defineEmits(["editString", "deleteString"]);
const expandedRows = ref([]);
function confirmDelete(tileId: string) {
confirm.require({
header: $gettext("Confirmation"),
message: props.metaStringText.deleteConfirm,
group: props.metaStringText.name,
accept: () => {
emits("deleteString", tileId);
deleteSectionValue(tileId);
},
rejectProps: {
label: $gettext("Cancel"),
Expand All @@ -41,6 +48,22 @@ function confirmDelete(tileId: string) {
},
});
}
async function deleteSectionValue(tileId: string) {
try {
await deleteLingoTile(props.graphSlug, props.nodeAlias, tileId);
forceSectionRefresh!();
} catch (error) {
// toast.add({
// severity: ERROR,
// summary: $gettext("Error"),
// detail:
// error instanceof Error
// ? error.message
// : $gettext("Could not delete selected label"),
// });
}
}
</script>

<template>
Expand Down Expand Up @@ -96,25 +119,14 @@ function confirmDelete(tileId: string) {
<Button
icon="pi pi-file-edit"
:aria-label="$gettext('edit')"
@click="
() =>
emits(
'editString',
(slotProps.data as MetaString).tileid,
)
"
@click="openEditor!(slotProps.data.tileid)"
/>
<Button
icon="pi pi-trash"
:aria-label="$gettext('delete')"
severity="danger"
outlined
@click="
() =>
confirmDelete(
(slotProps.data as MetaString).tileid,
)
"
@click="confirmDelete(slotProps.data.tileid)"
/>
</div>
</template>
Expand Down
48 changes: 25 additions & 23 deletions arches_lingo/src/arches_lingo/components/scheme/SchemeLabel/SchemeLabel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { onMounted, ref } from "vue";
import { useGettext } from "vue3-gettext";
import { useRoute } from "vue-router";
Expand All @@ -10,39 +10,49 @@ 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, VIEW } from "@/arches_lingo/constants.ts";
import {
EDIT,
ERROR,
NEW,
OPEN_EDITOR,
VIEW,
} from "@/arches_lingo/constants.ts";
import { fetchLingoResourcePartial } from "@/arches_lingo/api.ts";
import type {
AppellativeStatus,
DataComponentMode,
SchemeInstance,
} from "@/arches_lingo/types.ts";
const props = defineProps<{
mode: DataComponentMode;
tileId?: string | null;
}>();
console.log("(D(D(DD())))", props.tileId);
const { $gettext } = useGettext();
const toast = useToast();
const route = useRoute();
const isLoading = ref(true);
const schemeInstance = ref<SchemeInstance>();
const appellativeStatusToEdit = computed(() => {
return schemeInstance.value?.appellative_status?.find(
(tile) => tile.tileid === props.tileId,
);
});
const schemeLabels = ref<AppellativeStatus[]>([]);
const shouldCreateNewTile = Boolean(props.mode === EDIT && !props.tileId);
onMounted(async () => {
if (route.params.id !== NEW) {
if (props.mode === VIEW || !shouldCreateNewTile) {
const sectionValue = await getSectionValue();
schemeInstance.value = {
appellative_status: sectionValue.appellative_status,
};
if (props.tileId) {
schemeLabels.value = sectionValue.appellative_status.filter(
(appellativeStatus: AppellativeStatus) =>
appellativeStatus.tileid === props.tileId,
);
} else {
schemeLabels.value = sectionValue.appellative_status;
}
}
isLoading.value = false;
Expand All @@ -66,13 +76,6 @@ async function getSectionValue() {
});
}
}
async function update(tileId: string | undefined) {
// await emit(UPDATED);
// if (tileId) {
// await emit(OPEN_EDITOR, tileId);
// }
}
</script>

<template>
Expand All @@ -84,12 +87,11 @@ async function update(tileId: string | undefined) {
<template v-else>
<SchemeLabelViewer
v-if="mode === VIEW"
:scheme-instance="schemeInstance"
:scheme-labels="schemeLabels"
/>
<SchemeLabelEditor
v-else-if="mode === EDIT"
:value="appellativeStatusToEdit"
@update="update"
:scheme-label="shouldCreateNewTile ? undefined : schemeLabels[0]"
/>
</template>
</template>
93 changes: 53 additions & 40 deletions arches_lingo/src/arches_lingo/components/scheme/SchemeLabel/components/SchemeLabelEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@ import { checkDeepEquality } from "@/arches_lingo/utils.ts";
import type { FormSubmitEvent } from "@primevue/forms";
import type { AppellativeStatus } from "@/arches_lingo/types.ts";
const props = withDefaults(
defineProps<{
value?: AppellativeStatus;
}>(),
{
value: () => ({}) as AppellativeStatus,
},
);
const route = useRoute();
const { $gettext } = useGettext();
const props = defineProps<{
schemeLabel: AppellativeStatus | undefined;
}>();
// this is to compensate for the lack of a Form type in the primevue/forms module
interface FormInstance {
Expand All @@ -41,40 +39,49 @@ interface FormInstance {
>;
}
const route = useRoute();
const { $gettext } = useGettext();
const formRef = useTemplateRef<FormInstance>("formRef");
const formKey = ref(0);
import { inject } from "vue";
const forceSectionRefresh = inject("forceSectionRefresh");
const isFormDirty = computed(() => {
if (!formRef.value) return false;
if (!props.schemeLabel) return false;
return Object.values(formRef.value.fields).some((fieldData) => {
return !checkDeepEquality(
props.value[fieldData.options.name as keyof AppellativeStatus],
props.schemeLabel![
fieldData.options.name as keyof AppellativeStatus
],
fieldData.states.value,
);
});
});
async function save(e: FormSubmitEvent) {
upsertLingoTile(
"scheme",
"appellative_status",
{
resourceinstance: route.params.id as string,
...Object.entries(e.states).reduce(
(acc, [key, state]) => {
acc[key] = state.value;
return acc;
},
{} as Record<string, unknown>,
),
tileid: props.value.tileid,
},
props.value.tileid,
);
try {
await upsertLingoTile(
"scheme",
"appellative_status",
{
resourceinstance: route.params.id as string,
...Object.entries(e.states).reduce(
(acc, [key, state]) => {
acc[key] = state.value;
return acc;
},
{} as Record<string, unknown>,
),
tileid: props.schemeLabel?.tileid,
},
props.schemeLabel?.tileid,
);
forceSectionRefresh();
} catch (error) {
console.error(error);
}
}
function reset() {
Expand All @@ -93,23 +100,24 @@ function reset() {
graph-slug="scheme"
node-alias="appellative_status_ascribed_name_content"
:initial-value="
props.value.appellative_status_ascribed_name_content
props.schemeLabel?.appellative_status_ascribed_name_content
"
:mode="EDIT"
/>
<DateWidget
graph-slug="scheme"
node-alias="appellative_status_timespan_begin_of_the_begin"
:initial-value="
props.value.appellative_status_timespan_begin_of_the_begin
props.schemeLabel
?.appellative_status_timespan_begin_of_the_begin
"
:mode="EDIT"
/>
<DateWidget
graph-slug="scheme"
node-alias="appellative_status_timespan_end_of_the_end"
:initial-value="
props.value.appellative_status_timespan_end_of_the_end
props.schemeLabel?.appellative_status_timespan_end_of_the_end
"
:mode="EDIT"
/>
Expand All @@ -118,15 +126,16 @@ function reset() {
graph-slug="scheme"
node-alias="appellative_status_data_assignment_actor"
:initial-value="
props.value.appellative_status_data_assignment_actor
props.schemeLabel?.appellative_status_data_assignment_actor
"
:mode="EDIT"
/>
<ResourceInstanceMultiSelectWidget
graph-slug="scheme"
node-alias="appellative_status_data_assignment_object_used"
:initial-value="
props.value.appellative_status_data_assignment_object_used
props.schemeLabel
?.appellative_status_data_assignment_object_used
"
:mode="EDIT"
/>
Expand All @@ -135,45 +144,49 @@ function reset() {
graph-slug="scheme"
node-alias="appellative_status_ascribed_name_language"
:initial-value="
props.value.appellative_status_ascribed_name_language
props.schemeLabel?.appellative_status_ascribed_name_language
"
:mode="EDIT"
/>
<ReferenceSelectWidget
graph-slug="scheme"
node-alias="appellative_status_ascribed_relation"
:initial-value="props.value.appellative_status_ascribed_relation"
:initial-value="
props.schemeLabel?.appellative_status_ascribed_relation
"
:mode="EDIT"
/>
<ReferenceSelectWidget
graph-slug="scheme"
node-alias="appellative_status_status"
:initial-value="props.value.appellative_status_status"
:initial-value="props.schemeLabel?.appellative_status_status"
:mode="EDIT"
/>
<ReferenceSelectWidget
graph-slug="scheme"
node-alias="appellative_status_status_metatype"
:initial-value="props.value.appellative_status_status_metatype"
:initial-value="
props.schemeLabel?.appellative_status_status_metatype
"
:mode="EDIT"
/>
<ReferenceSelectWidget
graph-slug="scheme"
node-alias="appellative_status_data_assignment_type"
:initial-value="props.value.appellative_status_data_assignment_type"
:initial-value="
props.schemeLabel?.appellative_status_data_assignment_type
"
:mode="EDIT"
/>

<div style="display: flex">
<Button
:label="$gettext('Update')"
type="submit"
:disabled="!isFormDirty"
/>
<Button
:label="$gettext('Reset')"
type="reset"
:disabled="!isFormDirty"
/>
</div>
</Form>
Expand Down
Loading

0 comments on commit 8a1b621

Please sign in to comment.