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.

Sign up for GitHub

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

Stage Release #3181

Merged
merged 2 commits into from
Feb 5, 2025
Merged

Stage Release #3181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb70ca2
[Schema] Add visual highlight to currently active sorting order (#3180)
finnar-bin Feb 3, 2025
f01caf2
[Content] One-to-one/many Revamp Phase 1 (#3184)
finnar-bin Feb 5, 2025
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
107 changes: 107 additions & 0 deletions cypress/e2e/content/content.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,4 +430,111 @@ describe("Content Specs", () => {
cy.getBySelector("BlockFieldVariantPreview").should("exist");
});
});

context("One to one field", () => {
before(() => {
cy.waitOn("/v1/content/models*", () => {
cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
});

cy.intercept({ method: "GET", url: "**/items*" }).as("fetchItems");
cy.intercept({ method: "GET", url: "**/models*" }).as("fetchModels");
cy.intercept({ method: "GET", url: "**/fields*" }).as("fetchFields");

cy.wait("@fetchFields");
cy.getBySelector("DuoModeToggle").click();
});

it("can only select/add one item", () => {
cy.get("#12-edee00-6zb866 [data-cy='add-relational-item-button']").click({
force: true,
});

cy.wait("@fetchItems");

cy.get(".MuiDataGrid-row").first().find("input").click();
cy.get(".MuiDataGrid-row").eq(1).find("input").click();

cy.getBySelector("selected-count").contains("1 / 1 selected");
cy.getBySelector("done-selecting-item-button").click();
cy.get("#12-edee00-6zb866 [data-cy='active-relational-item']").should(
"have.length",
1
);
});

it("can publish an item", () => {
cy.get(
"#12-edee00-6zb866 [data-cy='active-relational-item-more-button']"
).click();
cy.getBySelector("active-relational-item-publish-now-button").click();
cy.getBySelector("ConfirmPublishModal").should("exist");
cy.getBySelector("CancelPublishButton").click();
});

it("can schedule publish an item", () => {
cy.get(
"#12-edee00-6zb866 [data-cy='active-relational-item-more-button']"
).click();
cy.getBySelector(
"active-relational-item-schedule-publish-button"
).click();
cy.getBySelector("SchedulePublishModal").should("exist");
cy.getBySelector("CancelSchedulePublishButton").click();
});

it("can remove the selected item", () => {
cy.get(
"#12-edee00-6zb866 [data-cy='active-relational-item-more-button']"
).click();
cy.getBySelector("active-relational-item-remove-item-button").click();
cy.get("#12-edee00-6zb866 [data-cy='active-relational-item']").should(
"not.exist"
);
});
});

context("One to many field", () => {
before(() => {
cy.waitOn("/v1/content/models*", () => {
cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
});

cy.intercept({ method: "GET", url: "**/items*" }).as("fetchItems");
cy.intercept({ method: "GET", url: "**/models*" }).as("fetchModels");
cy.intercept({ method: "GET", url: "**/fields*" }).as("fetchFields");

cy.wait("@fetchFields");
cy.getBySelector("DuoModeToggle").click();
});

it("can add multiple items", () => {
cy.get("#12-269a28-1bkm34 [data-cy='add-relational-item-button']").click({
force: true,
});

cy.wait("@fetchItems");

[...Array(3)].forEach((_, i) => {
cy.get(".MuiDataGrid-row").eq(i).find("input").click();
});
cy.getBySelector("selected-count").contains("3 selected");
cy.getBySelector("done-selecting-item-button").click();
cy.get("#12-269a28-1bkm34 [data-cy='active-relational-item']").should(
"have.length",
3
);
});

it("can remove the selected item", () => {
cy.get("#12-269a28-1bkm34 [data-cy='active-relational-item-more-button']")
.first()
.click();
cy.getBySelector("active-relational-item-remove-item-button").click();
cy.get("#12-269a28-1bkm34 [data-cy='active-relational-item']").should(
"have.length",
2
);
});
});
});
12 changes: 12 additions & 0 deletions src/apps/content-editor/src/app/components/Editor/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,18 @@ export default memo(function Editor({
};
}

if (field.datatype === "one_to_many") {
// Value is stored as string in DB with max char limit of 255.
// This means users can only add up to 12 item zuids
errors[name] = {
...(errors[name] ?? []),
CUSTOM_ERROR:
!!value && value?.length > 255
? "Cannot save field. Please reduce the total number of items selected."
: "",
};
}

onUpdateFieldErrors(errors);

// Always dispatch the data update
Expand Down
134 changes: 79 additions & 55 deletions src/apps/content-editor/src/app/components/Editor/Field/Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import {
FieldTypeOneToOne,
OneToOneOptions,
} from "../../../../../../../shell/components/FieldTypeOneToOne";
import { RelationalFieldBase } from "../../../../../../../shell/components/RelationalFieldBase";
import { FieldTypeDate } from "../../../../../../../shell/components/FieldTypeDate";
import { FieldTypeDateTime } from "../../../../../../../shell/components/FieldTypeDateTime";
import { FieldTypeSort } from "../../../../../../../shell/components/FieldTypeSort";
Expand Down Expand Up @@ -93,7 +94,7 @@ export const resolveRelatedOptions = (
modelZUID: string,
langID: number,
value: any
): OneToManyOptions[] | OneToOneOptions[] => {
): OneToManyOptions[] => {
// guard against absent data in state
const field = fields && fields[fieldZUID];
if (!field || !items) {
Expand Down Expand Up @@ -781,27 +782,38 @@ export const Field = ({

return (
<FieldShell settings={fieldData} errors={errors}>
<FieldTypeOneToOne
name={name}
value={
oneToOneOptions?.find((options) => options.value === value) ||
null
}
onChange={(_, option) => onChange(option.value, name)}
options={oneToOneOptions}
onOpen={onOneToOneOpen}
startAdornment={
value && (
<AppLink to={`/content/${relatedModelZUID}/${value}`}>
<FontAwesomeIcon icon={faEdit} />
</AppLink>
)
}
endAdornment={
value && <em>{getSelectedLang(allLanguages, langID)}</em>
}
error={errors && Object.values(errors)?.some((error) => !!error)}
/>
<>
<RelationalFieldBase
name={name}
value={!!value ? String(value) : null}
relatedModelZUID={relatedModelZUID}
relatedFieldZUID={relatedFieldZUID}
onChange={onChange}
/>
{/**
<FieldTypeOneToOne
name={name}
value={
oneToOneOptions?.find((options) => options.value === value) ||
null
}
onChange={(_, option) => onChange(option.value, name)}
options={oneToOneOptions}
onOpen={onOneToOneOpen}
startAdornment={
value && (
<AppLink to={`/content/${relatedModelZUID}/${value}`}>
<FontAwesomeIcon icon={faEdit} />
</AppLink>
)
}
endAdornment={
value && <em>{getSelectedLang(allLanguages, langID)}</em>
}
error={errors && Object.values(errors)?.some((error) => !!error)}
/>
*/}
</>
</FieldShell>
);

Expand Down Expand Up @@ -840,39 +852,51 @@ export const Field = ({

return (
<FieldShell settings={fieldData} errors={errors}>
<FieldTypeOneToMany
name={name}
value={
(value &&
(value as string)
?.split(",")
?.map(
(value: any) =>
oneToManyOptions?.find(
(options) => options.value === value
) || { value, inputLabel: value, component: value }
)) ||
[]
}
onChange={(_, options: OneToManyOptions[]) => {
const selectedOptions = options?.length
? options.map((option) => option.value).join(",")
: null;
onChange(selectedOptions, name);
}}
options={oneToManyOptions}
onOpen={onOneToManyOpen}
renderTags={(tags, getTagProps) =>
tags.map((tag, index) => (
<Chip
size="small"
label={tag.component}
{...getTagProps({ index })}
/>
))
}
error={errors && Object.values(errors)?.some((error) => !!error)}
/>
<>
<RelationalFieldBase
name={name}
multiselect
value={!!value ? String(value) : null}
relatedModelZUID={relatedModelZUID}
relatedFieldZUID={relatedFieldZUID}
onChange={onChange}
/>
{/**
<FieldTypeOneToMany
name={name}
value={
(value &&
(value as string)
?.split(",")
?.map(
(value: any) =>
oneToManyOptions?.find(
(options) => options.value === value
) || { value, inputLabel: value, component: value }
)) ||
[]
}
onChange={(_, options: OneToManyOptions[]) => {
const selectedOptions = options?.length
? options.map((option) => option.value).join(",")
: null;
onChange(selectedOptions, name);
}}
options={oneToManyOptions}
onOpen={onOneToManyOpen}
renderTags={(tags, getTagProps) =>
tags.map((tag, index) => (
<Chip
size="small"
label={tag.component}
{...getTagProps({ index })}
/>
))
}
error={errors && Object.values(errors)?.some((error) => !!error)}
/>
*/}
</>
</FieldShell>
);

Expand Down
Loading