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

Enhanced preview #275

Open
wants to merge 33 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4813680
173: Added preview component that iframes screen client into admin
tuj May 14, 2024
6b350ca
172: Added preview to playlist
tuj May 17, 2024
e1683e5
173: Added preview to slide
tuj May 21, 2024
969590a
173: Changed to translation prefix
tuj May 22, 2024
2a20910
173: Made preview configurable
tuj May 22, 2024
7d9dfce
173: Added sticky footer for action buttons
tuj May 29, 2024
798448c
173: Changed how preview is integrated in UI
tuj May 31, 2024
ed4e278
173: Added moved sticky preview top
tuj Jun 6, 2024
e7b70ca
173: Fixed padding
tuj Jun 7, 2024
a215ac1
173: Added preview to screen
tuj Jun 11, 2024
e830783
173: Added preview to playlist
tuj Jun 17, 2024
7457453
173: Applied coding standards
tuj Jun 17, 2024
d4823f6
173: Fixed merge
tuj Jun 17, 2024
e19b2c5
173: Removed comment
tuj Jun 17, 2024
7d28e95
173: Fixed merge
tuj Jun 19, 2024
fb40b1d
173: Fixed merge
tuj Jun 19, 2024
64bc8e8
173: Fixed playlist preview
tuj Jun 24, 2024
ce0d2f0
3068: Fixed merge
tuj Nov 25, 2024
5fdff58
3068: Fixed merge bugs
tuj Nov 25, 2024
cf68e58
3068: Fixed merge bugs
tuj Nov 25, 2024
d7ab287
3068: Fixed translations
tuj Nov 25, 2024
3cf16c1
3068: Removed cypress screenshots
tuj Nov 25, 2024
d0ef952
3068: Fixed merge
tuj Nov 25, 2024
d874d5e
Merge branch 'develop' into feature/preview
tuj Dec 4, 2024
1355a74
3172: Fixed save slide without redirect
tuj Dec 4, 2024
4f21be8
3172: Work on applying sticky footer to all edit pages
tuj Dec 5, 2024
77d13aa
3172: Added to remaining forms
tuj Dec 5, 2024
bb98a4a
3172: Added to activation code form
tuj Dec 5, 2024
3599a91
3172: Applied coding standards
tuj Dec 5, 2024
6ad0377
3172: Added orientation select
tuj Dec 6, 2024
e3b6dba
3172: New preview is only used if previewClient config parameter is s…
tuj Dec 10, 2024
136e85e
3172: Fixed test issues
tuj Dec 10, 2024
62de69d
Update src/components/activation-code/activation-code-form.jsx
tuj Dec 11, 2024
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
Prev Previous commit
Next Next commit
3172: Applied coding standards
  • Loading branch information
tuj committed Dec 5, 2024
commit 3599a912a3461275c399c6e7f36f39ff4b4815ac
2 changes: 0 additions & 2 deletions src/components/activation-code/activation-code-form.jsx
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ import StickyFooter from "../util/sticky-footer";
* @param {object} props.activationCode The activationCode object to modify in the form.
* @param {Function} props.handleInput Handles form input.
* @param {Function} props.handleSubmit Handles form submit.
* @param {Function} props.handleSaveNoClose Handles form submit without close.
* @param {string} props.headerText Headline text.
* @param {boolean} props.isLoading Indicator of whether the form is loading
* @param {string} props.loadingMessage The loading message for the spinner
@@ -115,7 +114,6 @@ ActivationCodeForm.propTypes = {
}).isRequired,
handleInput: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
handleSaveNoClose: PropTypes.func.isRequired,
headerText: PropTypes.string.isRequired,
isLoading: PropTypes.bool,
loadingMessage: PropTypes.string,
4 changes: 3 additions & 1 deletion src/components/feed-sources/feed-source-form.jsx
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ import StickyFooter from "../util/sticky-footer";
* @param {object} props.feedSource The feed-source object to modify in the form.
* @param {Function} props.handleInput Handles form input.
* @param {Function} props.handleSubmit Handles form submit.
* @param {Function} props.handleSaveNoClose Handles form submit with close.
* @param {string} props.headerText Headline text.
* @param {boolean} [props.isLoading] Indicator of whether the form is loading.
* Default is `false`
@@ -93,7 +94,8 @@ function FeedSourceForm({
feedSourceId={feedSource["@id"]}
/>
)}
{feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" && (
{feedSource?.feedType ===
"App\\Feed\\EventDatabaseApiFeedType" && (
<EventDatabaseApiFeedType
handleInput={handleSecretInput}
formStateObject={feedSource.secrets}
24 changes: 11 additions & 13 deletions src/components/playlist/playlist-campaign-form.jsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ import { Alert, Button, Col, Form, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpand } from "@fortawesome/free-solid-svg-icons";
import ContentBody from "../util/content-body/content-body";
import FormInput from "../util/forms/form-input";
import FormInputArea from "../util/forms/form-input-area";
@@ -12,8 +14,6 @@ import Preview from "../preview/preview";
import idFromUrl from "../util/helpers/id-from-url";
import StickyFooter from "../util/sticky-footer";
import localStorageKeys from "../util/local-storage-keys";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faExpand} from "@fortawesome/free-solid-svg-icons";

/**
* The shared form component.
@@ -29,6 +29,7 @@ import {faExpand} from "@fortawesome/free-solid-svg-icons";
* @param {boolean} props.isCampaign If it is a campaign form.
* @param {string} props.location Either playlist or campaign.
* @param {Array} props.children The children being passed from parent
* @param {Function} props.handleSaveNoClose Handles form submit with close.
* @returns {object} The form shared by campaigns and playlists.
*/
function PlaylistCampaignForm({
@@ -44,7 +45,9 @@ function PlaylistCampaignForm({
isCampaign = false,
playlist = null,
}) {
const { t } = useTranslation("common", {'keyPrefix': 'playlist-campaign-form'});
const { t } = useTranslation("common", {
keyPrefix: "playlist-campaign-form",
});
const navigate = useNavigate();
const [publishedFromError, setPublishedFromError] = useState(false);
const [publishedToError, setPublishedToError] = useState(false);
@@ -98,19 +101,15 @@ function PlaylistCampaignForm({
name="title"
type="text"
label={t("playlist-name-label")}
placeholder={t(
"playlist-name-placeholder"
)}
placeholder={t("playlist-name-placeholder")}
value={playlist.title}
onChange={handleInput}
/>
<FormInputArea
name="description"
type="text"
label={t("playlist-description-label")}
placeholder={t(
"playlist-description-placeholder"
)}
placeholder={t("playlist-description-placeholder")}
value={playlist.description}
onChange={handleInput}
/>
@@ -126,9 +125,7 @@ function PlaylistCampaignForm({
{/* Playlist or campaign form */}
{children}
<ContentBody>
<h3 className="h4">
{t("publish-title")}
</h3>
<h3 className="h4">{t("publish-title")}</h3>
<Row className="g-2">
<Col md>
<FormInput
@@ -189,7 +186,8 @@ function PlaylistCampaignForm({
size="lg"
className="me-3 mt-3"
>
<FontAwesomeIcon icon={faExpand} className="me-3" /> {t("preview-in-full-screen")}
<FontAwesomeIcon icon={faExpand} className="me-3" />{" "}
{t("preview-in-full-screen")}
</Button>
</div>
{previewOverlayVisible && (
7 changes: 3 additions & 4 deletions src/components/preview/preview.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { React, JSX, useEffect, useState } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import LocalStorageKeys from "../util/local-storage-keys.jsx";
import ConfigLoader from "../../config-loader.js";
import LocalStorageKeys from "../util/local-storage-keys";
import ConfigLoader from "../../config-loader";

/**
* The preview component.
@@ -25,7 +25,6 @@ function Preview({
simulatedHeight = 1080,
}) {
const { t } = useTranslation("common", { keyPrefix: "preview" });

const [previewClientUrl, setPreviewClientUrl] = useState(null);

useEffect(() => {
@@ -45,7 +44,7 @@ function Preview({
urlSearchParams.set("preview-tenant", JSON.parse(tenantEntry).tenantKey);

setPreviewClientUrl(`${base}?${urlSearchParams}`);
})
});
}, []);

const scale = width / simulatedWidth;
2 changes: 2 additions & 0 deletions src/components/screen/screen-form.jsx
Original file line number Diff line number Diff line change
@@ -67,6 +67,7 @@ function ScreenForm({
const checkInputsHandleSubmit = () => {
setLayoutError(false);
let submit = true;

if (!selectedLayout) {
displayError(t("remember-layout-error"));
setLayoutError(true);
@@ -305,6 +306,7 @@ function ScreenForm({
helpText={t("search-to-se-possible-selections")}
selected={selectedLayout ? [selectedLayout] : []}
name="layout"
error={layoutError}
singleSelect
/>
</div>
1 change: 1 addition & 0 deletions src/components/slide/preview/remote-component-wrapper.jsx
Original file line number Diff line number Diff line change
@@ -83,6 +83,7 @@ function RemoteComponentWrapper({
}, [showPreview]);

useEffect(() => {
// eslint-disable-next-line no-undef
const observer = new ResizeObserver((entries) => {
if (entries.length > 0) {
const first = entries[0];
14 changes: 8 additions & 6 deletions src/components/slide/slide-form.jsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import Form from "react-bootstrap/Form";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpand } from "@fortawesome/free-solid-svg-icons";
import ContentBody from "../util/content-body/content-body";
import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
import {
@@ -23,8 +25,6 @@ import userContext from "../../context/user-context";
import "./slide-form.scss";
import Preview from "../preview/preview";
import StickyFooter from "../util/sticky-footer";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faExpand} from "@fortawesome/free-solid-svg-icons";

/**
* The slide form component.
@@ -93,7 +93,8 @@ function SlideForm({

/**
* Check if template is set
* @param noRedirect
*
* @param {boolean | null} noRedirect Avoid close after save.
*/
const checkInputsHandleSubmit = (noRedirect) => {
setTemplateError(false);
@@ -361,7 +362,7 @@ function SlideForm({
{displayPreview && (
<Col
className="responsive-side shadow-sm p-3 mb-3 bg-body rounded me-3 sticky-top"
style={{top: "20px"}}
style={{ top: "20px" }}
>
<h2 className="h4">{t("slide-preview")}</h2>

@@ -387,7 +388,8 @@ function SlideForm({
}
className="me-3 mt-3 float-end"
>
<FontAwesomeIcon icon={faExpand} className="me-3"/>{t("preview-in-full-screen")}
<FontAwesomeIcon icon={faExpand} className="me-3" />
{t("preview-in-full-screen")}
</Button>
</>
)}
@@ -406,7 +408,7 @@ function SlideForm({
>
{t("slide-preview-about")}
</Alert>
<Preview id={idFromUrl(slide["@id"])} mode="slide"/>
<Preview id={idFromUrl(slide["@id"])} mode="slide" />
</div>
)}
</Col>
25 changes: 12 additions & 13 deletions src/components/slide/slides-list.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import {React, useState, useEffect, useContext} from "react";
import {useTranslation} from "react-i18next";
import { React, useState, useEffect, useContext } from "react";
import { useTranslation } from "react-i18next";
import List from "../util/list/list";
import idFromUrl from "../util/helpers/id-from-url";
import UserContext from "../../context/user-context";
import ListContext from "../../context/list-context";
import ContentHeader from "../util/content-header/content-header";
import ContentBody from "../util/content-body/content-body";
import useModal from "../../context/modal-context/modal-context-hook";
import {SlideColumns} from "./slides-columns";
import { SlideColumns } from "./slides-columns";
import {
displayError,
displaySuccess,
@@ -17,23 +17,22 @@ import {
useDeleteV2SlidesByIdMutation,
useGetV2PlaylistsByIdQuery,
} from "../../redux/api/api.generated.ts";
import Row from "react-bootstrap/Row";

/**
* The slides list component.
*
* @returns {object} The slides list
*/
function SlidesList() {
const {t} = useTranslation("common", {keyPrefix: "slides-list"});
const { t } = useTranslation("common", { keyPrefix: "slides-list" });
const context = useContext(UserContext);
const {selected, setSelected} = useModal();
const { selected, setSelected } = useModal();

const {
searchText: {get: searchText},
page: {get: page},
createdBy: {get: createdBy},
isPublished: {get: isPublished},
searchText: { get: searchText },
page: { get: page },
createdBy: { get: createdBy },
isPublished: { get: isPublished },
} = useContext(ListContext);

// Local state
@@ -44,7 +43,7 @@ function SlidesList() {
);

// Delete call
const [DeleteV2Slides, {isSuccess: isDeleteSuccess, error: isDeleteError}] =
const [DeleteV2Slides, { isSuccess: isDeleteSuccess, error: isDeleteError }] =
useDeleteV2SlidesByIdMutation();

// Get method
@@ -55,7 +54,7 @@ function SlidesList() {
refetch,
} = useGetV2SlidesQuery({
page,
order: {createdAt: "desc"},
order: { createdAt: "desc" },
title: searchText,
published: isPublished,
createdBy,
@@ -84,7 +83,7 @@ function SlidesList() {
const slideToDelete = selected[0];
setSelected(selected.slice(1));
const slideToDeleteId = idFromUrl(slideToDelete.id);
DeleteV2Slides({id: slideToDeleteId});
DeleteV2Slides({ id: slideToDeleteId });
}
}, [isDeleting, isDeleteSuccess]);

4 changes: 1 addition & 3 deletions src/components/themes/theme-create.jsx
Original file line number Diff line number Diff line change
@@ -17,9 +17,7 @@ function ThemeCreate() {
media: [],
};

return (
<ThemeManager saveMethod="POST" initialState={data} />
);
return <ThemeManager saveMethod="POST" initialState={data} />;
}

export default ThemeCreate;
6 changes: 2 additions & 4 deletions src/components/themes/theme-form.jsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import StickyFooter from "../util/sticky-footer";
* @param {object} props.theme The theme object to modify in the form.
* @param {Function} props.handleInput Handles form input.
* @param {Function} props.handleSubmit Handles form submit.
* @param {Function} props.handleSaveNoClose Handles form submit without close.
* @param {string} props.headerText Headline text.
* @param {boolean} props.isLoading Indicator of whether the form is loading
* @param {string} props.loadingMessage The loading message for the spinner
@@ -37,10 +38,7 @@ function ThemeForm({

return (
<div>
<LoadingComponent
isLoading={isLoading}
loadingMessage={loadingMessage}
/>
<LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
<Form>
<Row className="m-2">
<h1 id="themeTitle">{headerText}</h1>
6 changes: 4 additions & 2 deletions src/components/themes/theme-manager.jsx
Original file line number Diff line number Diff line change
@@ -55,8 +55,10 @@ function ThemeManager({
css: "",
});

const [postV2Themes, { error: saveErrorPost, isSuccess: isSaveSuccessPost }] =
usePostV2ThemesMutation();
const [
postV2Themes,
{ error: saveErrorPost, isSuccess: isSaveSuccessPost, data },
] = usePostV2ThemesMutation();

const [
PutV2ThemesById,