From 189168cbd082b92956e43c8a83cfb8b1f2fcf6b1 Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 11:49:47 +0200 Subject: [PATCH 01/20] Add LoadBoardEditor UI --- .../LoadBoardEditor/LoadBoardEditor.js | 146 ++++++++++++++++++ .../Board/TileEditor/TileEditor.component.js | 6 +- 2 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js new file mode 100644 index 000000000..e571aa360 --- /dev/null +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -0,0 +1,146 @@ +import React from 'react'; +import { alpha, makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItem from '@material-ui/core/ListItem'; +import List from '@material-ui/core/List'; +import Divider from '@material-ui/core/Divider'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import CloseIcon from '@material-ui/icons/Close'; +import Slide from '@material-ui/core/Slide'; +import { InputBase } from '@material-ui/core'; +import { Search as SearchIcon } from '@material-ui/icons'; + +const useStyles = makeStyles(theme => ({ + appBar: { + position: 'relative' + }, + title: { + marginLeft: theme.spacing(2), + flex: 1 + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: alpha(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: alpha(theme.palette.common.white, 0.25) + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing(1), + width: 'auto' + } + }, + searchIcon: { + padding: theme.spacing(0, 2), + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + }, + inputRoot: { + color: 'inherit' + }, + inputInput: { + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: '12ch', + '&:focus': { + width: '20ch' + } + } + } +})); + +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +const LoadBoardEditor = () => { + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + return ( + <> + + + + + + + + + Sound + +
+
+ +
+ +
+ + + + + + + + + + + + + + + ); +}; + +export default LoadBoardEditor; diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 7d8bce603..d7a8bda30 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -42,6 +42,7 @@ import { } from '../../../cordova-util'; import { convertImageUrlToCatchable } from '../../../helpers'; import PremiumFeature from '../../PremiumFeature'; +import LoadBoardEditor from './LoadBoardEditor/LoadBoardEditor'; export class TileEditor extends Component { static propTypes = { @@ -465,7 +466,7 @@ export class TileEditor extends Component { ); const selectBoardElement = ( -
+
{intl.formatMessage(messages.existingBoards)} @@ -635,6 +636,9 @@ export class TileEditor extends Component {
)} + {this.currentTileProp('loadBoard')?.length > 0 && ( + + )} {this.currentTileProp('type') === 'folder' && selectBoardElement}
From bd4e7ee1131c2193f076b6f9840f3bdd41603148 Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 12:35:47 +0200 Subject: [PATCH 02/20] Implement Hook to fetch all boards --- .../LoadBoardEditor/LoadBoardEditor.js | 20 ++++++++++++- .../LoadBoardEditor.module.css | 7 +++++ .../LoadBoardEditor/useAllBoardsFetcher.js | 29 +++++++++++++++++++ 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css create mode 100644 src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index e571aa360..7fb65b3d3 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -12,8 +12,11 @@ import IconButton from '@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import Slide from '@material-ui/core/Slide'; -import { InputBase } from '@material-ui/core'; +import { CircularProgress, InputBase } from '@material-ui/core'; import { Search as SearchIcon } from '@material-ui/icons'; +import useAllBoardsFetcher from './useAllBoardsFetcher'; +import styles from './LoadBoardEditor.module.css'; +import { Alert, AlertTitle } from '@material-ui/lab'; const useStyles = makeStyles(theme => ({ appBar: { @@ -71,8 +74,10 @@ const Transition = React.forwardRef(function Transition(props, ref) { const LoadBoardEditor = () => { const classes = useStyles(); const [open, setOpen] = React.useState(false); + const { allBoards, loading, error, fetchBoards } = useAllBoardsFetcher(); const handleClickOpen = () => { + fetchBoards(); setOpen(true); }; @@ -126,6 +131,19 @@ const LoadBoardEditor = () => { + {loading && ( +
+ +
+ )} + {error && ( + + Error getting all your folders + + + )} diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css new file mode 100644 index 000000000..d5d62e64e --- /dev/null +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css @@ -0,0 +1,7 @@ +.loaderContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 16px; +} diff --git a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js new file mode 100644 index 000000000..c82f627ff --- /dev/null +++ b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js @@ -0,0 +1,29 @@ +import { useState } from 'react'; +import API from '../../../../api'; + +const useAllBoardsFetcher = () => { + const [allBoards, setBoards] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const fetchBoards = async () => { + try { + setLoading(true); + setError(null); + const response = await API.getMyBoards({ + limit: null, + sort: '-createdAt' + }); + const allBoards = response.data; + setBoards(allBoards); + setLoading(false); + } catch (error) { + setError(error); + setLoading(false); + } + }; + + return { fetchBoards, allBoards, loading, error }; +}; + +export default useAllBoardsFetcher; From 16c17ffdc270369e59536662ee502a89d4d3662c Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 13:13:04 +0200 Subject: [PATCH 03/20] Render Boards list --- .../LoadBoardEditor/LoadBoardEditor.js | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 7fb65b3d3..eb7d2cc2f 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -76,6 +76,15 @@ const LoadBoardEditor = () => { const [open, setOpen] = React.useState(false); const { allBoards, loading, error, fetchBoards } = useAllBoardsFetcher(); + const BoardsList = () => ( + + {allBoards?.map(board => ( + + + + ))} + + ); const handleClickOpen = () => { fetchBoards(); setOpen(true); @@ -84,6 +93,7 @@ const LoadBoardEditor = () => { const handleClose = () => { setOpen(false); }; + return ( <> )} - - - - - - - - - + {!loading && !error && } ); From c7bfd5953e8a09b4fa00438a22b0c4db5deee187 Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 13:53:54 +0200 Subject: [PATCH 04/20] Add Pagination UI --- .../LoadBoardEditor/LoadBoardEditor.js | 40 +++++++++++++------ .../LoadBoardEditor.module.css | 17 ++++++++ 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index eb7d2cc2f..1bc11350a 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { alpha, makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; @@ -16,11 +16,11 @@ import { CircularProgress, InputBase } from '@material-ui/core'; import { Search as SearchIcon } from '@material-ui/icons'; import useAllBoardsFetcher from './useAllBoardsFetcher'; import styles from './LoadBoardEditor.module.css'; -import { Alert, AlertTitle } from '@material-ui/lab'; +import { Alert, AlertTitle, Pagination } from '@material-ui/lab'; const useStyles = makeStyles(theme => ({ appBar: { - position: 'relative' + position: 'sticky' }, title: { marginLeft: theme.spacing(2), @@ -76,15 +76,31 @@ const LoadBoardEditor = () => { const [open, setOpen] = React.useState(false); const { allBoards, loading, error, fetchBoards } = useAllBoardsFetcher(); - const BoardsList = () => ( - - {allBoards?.map(board => ( - - - - ))} - - ); + const BoardsList = () => { + const BoardPagiation = () => ( + + ); + + return ( +
+ + + {allBoards?.map(board => ( + + + + ))} + + +
+ ); + }; + const handleClickOpen = () => { fetchBoards(); setOpen(true); diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css index d5d62e64e..64955785e 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css @@ -5,3 +5,20 @@ align-items: center; margin: 16px; } + +.boardsListContainer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.pagination { + padding: 8px; +} + +.boardsList { + display: flex; + flex-direction: column; + width: 100%; +} From 6d3b9994be3589e27d685c4398a9021ea466f953 Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 15:48:28 +0200 Subject: [PATCH 05/20] Add Pagination logic --- .../LoadBoardEditor/LoadBoardEditor.js | 97 ++++++++++++------- .../LoadBoardEditor/useAllBoardsFetcher.js | 16 +-- 2 files changed, 71 insertions(+), 42 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 1bc11350a..2b8f5183e 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -71,38 +71,46 @@ const Transition = React.forwardRef(function Transition(props, ref) { return ; }); -const LoadBoardEditor = () => { - const classes = useStyles(); - const [open, setOpen] = React.useState(false); - const { allBoards, loading, error, fetchBoards } = useAllBoardsFetcher(); - - const BoardsList = () => { - const BoardPagiation = () => ( +const BoardPagiation = ({ pagesCount, currentPage, handleChange }) => { + return ( +
- ); +
+ ); +}; +const LoadBoardEditor = () => { + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + const { + allBoards, + totalPages, + loading, + error, + fetchBoards + } = useAllBoardsFetcher(); + const [currentPage, setCurrentPage] = React.useState(1); + + const BoardsList = () => { return ( -
- - - {allBoards?.map(board => ( - - - - ))} - - -
+ + {allBoards?.map(board => ( + + + + ))} + ); }; const handleClickOpen = () => { - fetchBoards(); + fetchBoards({}); setOpen(true); }; @@ -110,6 +118,11 @@ const LoadBoardEditor = () => { setOpen(false); }; + const handleChangeOnPage = (event, page) => { + setCurrentPage(page); + fetchBoards({ page }); + }; + return ( <> - {loading && ( -
- -
- )} - {error && ( - - Error getting all your folders - - - )} - {!loading && !error && } +
+ + {loading && ( +
+ +
+ )} + {error && ( + + Error getting all your folders + + + )} + {!loading && !error && } + +
); diff --git a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js index c82f627ff..019c984aa 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js @@ -3,19 +3,23 @@ import API from '../../../../api'; const useAllBoardsFetcher = () => { const [allBoards, setBoards] = useState(null); + const [totalPages, setTotalBoards] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const fetchBoards = async () => { + const fetchBoards = async ({ page = 1 }) => { try { + const LIMIT = 10; setLoading(true); setError(null); const response = await API.getMyBoards({ - limit: null, - sort: '-createdAt' + limit: LIMIT, + sort: '-createdAt', + page: page }); - const allBoards = response.data; - setBoards(allBoards); + setBoards(response.data); + const totalPages = response.total / LIMIT; + setTotalBoards(totalPages); setLoading(false); } catch (error) { setError(error); @@ -23,7 +27,7 @@ const useAllBoardsFetcher = () => { } }; - return { fetchBoards, allBoards, loading, error }; + return { fetchBoards, allBoards, totalPages, loading, error }; }; export default useAllBoardsFetcher; From 9400d5f9fa2ad09deb292fa603d171c824593750 Mon Sep 17 00:00:00 2001 From: tomivm Date: Fri, 21 Jun 2024 15:52:09 +0200 Subject: [PATCH 06/20] Fix component name --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 2b8f5183e..a43718375 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -71,7 +71,7 @@ const Transition = React.forwardRef(function Transition(props, ref) { return ; }); -const BoardPagiation = ({ pagesCount, currentPage, handleChange }) => { +const BoardPagination = ({ pagesCount, currentPage, handleChange }) => { return (
{
- { )} {!loading && !error && } - Date: Fri, 21 Jun 2024 17:25:44 +0200 Subject: [PATCH 07/20] Add divider to the list --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index a43718375..d8f1aedb9 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -101,9 +101,12 @@ const LoadBoardEditor = () => { return ( {allBoards?.map(board => ( - - - + + + + + + ))} ); From 7492fece02d1149cb881aad20b9faab201b1e7e6 Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 13:39:05 +0200 Subject: [PATCH 08/20] Add confirmation Dialog on ListItem click --- .../LoadBoardEditor/LoadBoardEditor.js | 120 ++++++++++++++++-- .../LoadBoardEditor.messages.js | 21 +++ .../Board/TileEditor/TileEditor.component.js | 2 +- src/translations/src/cboard.json | 3 + 4 files changed, 136 insertions(+), 10 deletions(-) create mode 100644 src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index d8f1aedb9..f30061c34 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -12,11 +12,23 @@ import IconButton from '@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import Slide from '@material-ui/core/Slide'; -import { CircularProgress, InputBase } from '@material-ui/core'; -import { Search as SearchIcon } from '@material-ui/icons'; +import { + CircularProgress, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + InputBase +} from '@material-ui/core'; +import { Search as SearchIcon, Visibility } from '@material-ui/icons'; import useAllBoardsFetcher from './useAllBoardsFetcher'; import styles from './LoadBoardEditor.module.css'; import { Alert, AlertTitle, Pagination } from '@material-ui/lab'; +import { intlShape } from 'react-intl'; +import communicatorMessages from '../../../Communicator/CommunicatorDialog/CommunicatorDialog.messages'; +import messages from './LoadBoardEditor.messages'; +import moment from 'moment'; +import { isCordova } from '../../../../cordova-util'; const useStyles = makeStyles(theme => ({ appBar: { @@ -85,7 +97,54 @@ const BoardPagination = ({ pagesCount, currentPage, handleChange }) => { ); }; -const LoadBoardEditor = () => { +const BoardInfoContent = ({ intl, allBoards, selectedBoardId }) => { + const board = allBoards.find(({ id }) => id === selectedBoardId); + const boardUrl = + window.location.origin + + '/' + + window.location.pathname.split('/')[1] + + '/' + + board.id; + + return ( + + + + {intl.formatMessage(communicatorMessages.boardInfoName)}:{' '} + {board.name} + + + {intl.formatMessage(communicatorMessages.boardDescription)}:{' '} + {board.description} + + + {intl.formatMessage(communicatorMessages.boardInfoDate)}:{' '} + {moment(board.lastEdited).format('DD/MM/YYYY')} + + + {intl.formatMessage(communicatorMessages.boardInfoTiles)}:{' '} + {board.tiles.length} + + + {intl.formatMessage(communicatorMessages.boardInfoId)}:{' '} + {board.id} + + {!isCordova() && ( + + )} + + + ); +}; + +const LoadBoardEditor = ({ intl }) => { const classes = useStyles(); const [open, setOpen] = React.useState(false); const { @@ -97,13 +156,13 @@ const LoadBoardEditor = () => { } = useAllBoardsFetcher(); const [currentPage, setCurrentPage] = React.useState(1); - const BoardsList = () => { + const BoardsList = ({ onItemClick }) => { return ( - {allBoards?.map(board => ( - - - + {allBoards?.map(({ id, name }) => ( + + onItemClick(id)}> + @@ -126,6 +185,16 @@ const LoadBoardEditor = () => { fetchBoards({ page }); }; + const [openConfirmationDialog, setOpenConfirmationDialog] = React.useState( + false + ); + const [selectedBoardId, setSelectedBoardId] = React.useState(null); + + const handleOnItemClick = boardId => { + setSelectedBoardId(boardId); + setOpenConfirmationDialog(true); + }; + return ( <> )} - {!loading && !error && } + {!loading && !error && } { />
+ setOpenConfirmationDialog(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + + {intl.formatMessage(messages.confirmationTitle)} + + + + + + + ); }; +LoadBoardEditor.propTypes = { + intl: intlShape +}; + export default LoadBoardEditor; diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js new file mode 100644 index 000000000..839edd5fc --- /dev/null +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js @@ -0,0 +1,21 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + confirmationTitle: { + id: 'cboard.components.LoadBoardEditor.confirmationTitle', + defaultMessage: + 'Are you sure you want change the board to open by this tile?' + }, + openBoardInNewTab: { + id: 'cboard.components.LoadBoardEditor.openBoardInNewTab', + defaultMessage: 'view in new tab' + }, + accept: { + id: 'cboard.components.LoadBoardEditor.accept', + defaultMessage: 'Accept' + }, + cancel: { + id: 'cboard.components.LoadBoardEditor.cancel', + defaultMessage: 'Cancel' + } +}); diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index d7a8bda30..799b7c3c6 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -637,7 +637,7 @@ export class TileEditor extends Component {
)} {this.currentTileProp('loadBoard')?.length > 0 && ( - + )} {this.currentTileProp('type') === 'folder' && selectBoardElement} diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json index 3cba6b95c..b533b182c 100644 --- a/src/translations/src/cboard.json +++ b/src/translations/src/cboard.json @@ -611,6 +611,9 @@ "cboard.components.UI.Downloader.processing": "Processing...", "cboard.components.UI.Downloader.processingDone": "Process Done!", "cboard.components.UI.Downloader.processingError": "There was an error processing the data, please try again.", + "cboard.components.LoadBoardEditor.confirmationTitle": "Are you sure you want change the board to open by this tile?", + "cboard.components.LoadBoardEditor.accept": "Accept", + "cboard.components.LoadBoardEditor.cancel": "Cancel", "cboard.board.home": "home", "cboard.vocalization.myNameIsAmberley": "my name is Amberley", "cboard.vocalization.niceToMeetYou": "nice to meet you", From 716938d867471de7eac77bbbc7c5e91838fc6f43 Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 15:26:27 +0200 Subject: [PATCH 09/20] Rename allBoards to pageBoards --- .../TileEditor/LoadBoardEditor/LoadBoardEditor.js | 12 ++++++------ .../LoadBoardEditor/useAllBoardsFetcher.js | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index f30061c34..7830ec590 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -97,8 +97,8 @@ const BoardPagination = ({ pagesCount, currentPage, handleChange }) => { ); }; -const BoardInfoContent = ({ intl, allBoards, selectedBoardId }) => { - const board = allBoards.find(({ id }) => id === selectedBoardId); +const BoardInfoContent = ({ intl, pageBoards, selectedBoardId }) => { + const board = pageBoards.find(({ id }) => id === selectedBoardId); const boardUrl = window.location.origin + '/' + @@ -144,11 +144,11 @@ const BoardInfoContent = ({ intl, allBoards, selectedBoardId }) => { ); }; -const LoadBoardEditor = ({ intl }) => { +const LoadBoardEditor = ({ intl, loadBoard, onLoadBoardChange }) => { const classes = useStyles(); const [open, setOpen] = React.useState(false); const { - allBoards, + pageBoards, totalPages, loading, error, @@ -159,7 +159,7 @@ const LoadBoardEditor = ({ intl }) => { const BoardsList = ({ onItemClick }) => { return ( - {allBoards?.map(({ id, name }) => ( + {pageBoards?.map(({ id, name }) => ( onItemClick(id)}> @@ -280,7 +280,7 @@ const LoadBoardEditor = ({ intl }) => { diff --git a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js index 019c984aa..7fe47c708 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js @@ -1,8 +1,8 @@ import { useState } from 'react'; import API from '../../../../api'; -const useAllBoardsFetcher = () => { - const [allBoards, setBoards] = useState(null); +const useBoardsFetcher = () => { + const [pageBoards, setPageBoards] = useState(null); const [totalPages, setTotalBoards] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -17,7 +17,7 @@ const useAllBoardsFetcher = () => { sort: '-createdAt', page: page }); - setBoards(response.data); + setPageBoards(response.data); const totalPages = response.total / LIMIT; setTotalBoards(totalPages); setLoading(false); @@ -27,7 +27,7 @@ const useAllBoardsFetcher = () => { } }; - return { fetchBoards, allBoards, totalPages, loading, error }; + return { fetchBoards, pageBoards, totalPages, loading, error }; }; -export default useAllBoardsFetcher; +export default useBoardsFetcher; From dd8c52f590161018763da1320679df07e4ee80e5 Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 18:01:28 +0200 Subject: [PATCH 10/20] Add load folder editor functionality --- src/components/Board/Board.container.js | 1 + .../LoadBoardEditor/LoadBoardEditor.js | 42 ++++++++++---- .../LoadBoardEditor.messages.js | 4 ++ .../LoadBoardEditor.module.css | 4 ++ .../Board/TileEditor/TileEditor.component.js | 55 ++++++++++++++++++- .../Board/TileEditor/TileEditor.css | 11 ++++ .../Board/TileEditor/TileEditor.messages.js | 23 ++++++++ src/translations/src/cboard.json | 6 ++ 8 files changed, 131 insertions(+), 15 deletions(-) diff --git a/src/components/Board/Board.container.js b/src/components/Board/Board.container.js index 8a01dcc98..615d820db 100644 --- a/src/components/Board/Board.container.js +++ b/src/components/Board/Board.container.js @@ -1706,6 +1706,7 @@ export class BoardContainer extends Component { this.props.communicator.boards.includes(board.id) )} userData={this.props.userData} + folders={this.props.boards} /> ); diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 7830ec590..991306732 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -20,10 +20,11 @@ import { DialogTitle, InputBase } from '@material-ui/core'; -import { Search as SearchIcon, Visibility } from '@material-ui/icons'; +import { Edit, Search as SearchIcon, Visibility } from '@material-ui/icons'; import useAllBoardsFetcher from './useAllBoardsFetcher'; import styles from './LoadBoardEditor.module.css'; import { Alert, AlertTitle, Pagination } from '@material-ui/lab'; +import PropTypes from 'prop-types'; import { intlShape } from 'react-intl'; import communicatorMessages from '../../../Communicator/CommunicatorDialog/CommunicatorDialog.messages'; import messages from './LoadBoardEditor.messages'; @@ -144,7 +145,7 @@ const BoardInfoContent = ({ intl, pageBoards, selectedBoardId }) => { ); }; -const LoadBoardEditor = ({ intl, loadBoard, onLoadBoardChange }) => { +const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { const classes = useStyles(); const [open, setOpen] = React.useState(false); const { @@ -197,14 +198,25 @@ const LoadBoardEditor = ({ intl, loadBoard, onLoadBoardChange }) => { return ( <> - + {!isLostedFolder ? ( + + + + ) : ( + + )} { @@ -303,7 +319,9 @@ const LoadBoardEditor = ({ intl, loadBoard, onLoadBoardChange }) => { }; LoadBoardEditor.propTypes = { - intl: intlShape + intl: intlShape, + onLoadBoardChange: PropTypes.func, + isLostedFolder: PropTypes.bool }; export default LoadBoardEditor; diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js index 839edd5fc..41c1cdf04 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js @@ -17,5 +17,9 @@ export default defineMessages({ cancel: { id: 'cboard.components.LoadBoardEditor.cancel', defaultMessage: 'Cancel' + }, + searchFolder: { + id: 'cboard.components.LoadBoardEditor.searchFolder', + defaultMessage: 'Search folder' } }); diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css index 64955785e..40a8ac3d3 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.module.css @@ -22,3 +22,7 @@ flex-direction: column; width: 100%; } + +.searchButton { + margin-top: 8px; +} diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 799b7c3c6..933ff1175 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -43,6 +43,8 @@ import { import { convertImageUrlToCatchable } from '../../../helpers'; import PremiumFeature from '../../PremiumFeature'; import LoadBoardEditor from './LoadBoardEditor/LoadBoardEditor'; +import { Typography } from '@material-ui/core'; +import { Alert, AlertTitle } from '@material-ui/lab'; export class TileEditor extends Component { static propTypes = { @@ -71,7 +73,8 @@ export class TileEditor extends Component { */ onAddSubmit: PropTypes.func.isRequired, boards: PropTypes.array, - userData: PropTypes.object + userData: PropTypes.object, + folders: PropTypes.array }; static defaultProps = { @@ -425,6 +428,12 @@ export class TileEditor extends Component { } }; + handleLoadBoardChange = ({ boardId }) => { + if (boardId) { + this.updateTileProperty('loadBoard', boardId); + } + }; + handleOnClickImageEditor = () => { this.setState({ openImageEditor: true }); }; @@ -452,7 +461,7 @@ export class TileEditor extends Component { }; render() { - const { open, intl, boards } = this.props; + const { open, intl, boards, folders } = this.props; const currentLabel = this.currentTileProp('labelKey') ? intl.formatMessage({ id: this.currentTileProp('labelKey') }) : this.currentTileProp('label'); @@ -499,6 +508,27 @@ export class TileEditor extends Component { ? this.editingTile() : this.state.tile; + const loadBoard = this.currentTileProp('loadBoard'); + const loadBoardName = loadBoard + ? folders.find(({ id }) => id === loadBoard)?.name + : null; + const SHORT_ID_MAX_LENGTH = 14; + const isLocalId = loadBoard.length < SHORT_ID_MAX_LENGTH; + + const LostedFolderAlert = ({ isLocalId }) => { + const alertDescription = !isLocalId + ? intl.formatMessage(messages.loadBoardAlertDescription) + : intl.formatMessage(messages.loadBoardAlertDescriptionLocalId); + return ( + + + {intl.formatMessage(messages.loadBoardAlertTitle)} + + {alertDescription} + + ); + }; + return (
)} + {this.currentTileProp('loadBoard')?.length > 0 && ( - + <> + + {intl.formatMessage(messages.loadBoard)} + +
+ {loadBoardName ? ( + + {loadBoardName} + + ) : ( + + )} + +
+ )} {this.currentTileProp('type') === 'folder' && selectBoardElement} diff --git a/src/components/Board/TileEditor/TileEditor.css b/src/components/Board/TileEditor/TileEditor.css index 76ce606f4..ce08cad89 100644 --- a/src/components/Board/TileEditor/TileEditor.css +++ b/src/components/Board/TileEditor/TileEditor.css @@ -76,3 +76,14 @@ .TileEditor__radiogroup__formcontrollabel { margin-top: 5px; } + +.TileEditor__loadBoard_section { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-top: 2px; +} +.TileEditor__loadBoard_Alert { + width: 100%; + margin-top: 4px; +} diff --git a/src/components/Board/TileEditor/TileEditor.messages.js b/src/components/Board/TileEditor/TileEditor.messages.js index 300789b86..ea3f3d147 100644 --- a/src/components/Board/TileEditor/TileEditor.messages.js +++ b/src/components/Board/TileEditor/TileEditor.messages.js @@ -68,5 +68,28 @@ export default defineMessages({ editImage: { id: 'cboard.components.Board.TileEditor.editImage', defaultMessage: 'Edit image' + }, + loadBoard: { + id: 'cboard.components.Board.TileEditor.loadBoard', + defaultMessage: 'Load folder' + }, + loadBoardAlertTitle: { + id: 'cboard.components.Board.TileEditor.loadBoardAlertTitle', + defaultMessage: "We can't find this folder" + }, + loadBoardAlertDescription: { + id: 'cboard.components.Board.TileEditor.loadBoardAlertDescription', + defaultMessage: + 'Try to find it manualy on your remote folders by clicking on the search button.' + }, + loadBoardAlertDescriptionLocalId: { + id: 'cboard.components.Board.TileEditor.loadBoardAlertDescriptionLocalId', + defaultMessage: `It's looks like this folder is localy stored on the device that you + create it. If you want to use it, please make a change in it connected + to the internet. Or edit this value to use another folder.` + }, + loadBoardAlertSearch: { + id: 'cboard.components.Board.TileEditor.loadBoardAlertSearch', + defaultMessage: 'Search folder' } }); diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json index b533b182c..9ebe568aa 100644 --- a/src/translations/src/cboard.json +++ b/src/translations/src/cboard.json @@ -164,6 +164,12 @@ "cboard.components.Board.TileEditor.none": "None", "cboard.components.Board.TileEditor.symbols": "Symbols", "cboard.components.Board.TileEditor.editImage": "Edit image", + "cboard.components.Board.TileEditor.loadBoard": "Load folder", + "cboard.components.Board.TileEditor.loadBoardAlertTitle": "We can't find this folder", + "cboard.components.Board.TileEditor.loadBoardAlertDescription": "Try to find it manualy on your remote folders by clicking on the search button.", + "cboard.components.Board.TileEditor.loadBoardAlertDescriptionLocalId": "It's looks like this folder is localy stored on the device that you create it. If you want to use it, please make a change in it connected to the internet. Or edit this value to use another folder.", + "cboard.components.Board.TileEditor.loadBoardAlertSearch": "Search folder", + "cboard.components.LoadBoardEditor.searchFolder": "Search folder", "cboard.components.Board.boardEditTitleCancel": "Cancel", "cboard.components.Board.boardEditTitleAccept": "Accept", "cboard.components.Board.userProfileLocked": "User Profile is locked, please unlock settings to see your user profile.", From 180d1a9be38ae4e301a84860a8b288ad3d378dbb Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 20:49:46 +0200 Subject: [PATCH 11/20] Sort board list by Name --- .../Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js index 7fe47c708..d93e2d0d5 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/useAllBoardsFetcher.js @@ -14,7 +14,7 @@ const useBoardsFetcher = () => { setError(null); const response = await API.getMyBoards({ limit: LIMIT, - sort: '-createdAt', + sort: 'name', page: page }); setPageBoards(response.data); From 8061b3560853994b8db52e385d23163817f2e739 Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 21:06:05 +0200 Subject: [PATCH 12/20] Show last edited as secondary on board list --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 991306732..e6dcfa944 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -160,10 +160,15 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { const BoardsList = ({ onItemClick }) => { return ( - {pageBoards?.map(({ id, name }) => ( + {pageBoards?.map(({ id, name, lastEdited }) => ( onItemClick(id)}> - + From 3e64998a363e146b327e3b311e4ced864499545a Mon Sep 17 00:00:00 2001 From: tomivm Date: Mon, 24 Jun 2024 21:28:00 +0200 Subject: [PATCH 13/20] Remove save button --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index e6dcfa944..7857dc2b3 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -252,11 +252,9 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { input: classes.inputInput }} inputProps={{ 'aria-label': 'search' }} + onChange={onSearchChange} /> -
From c3d2d71c775fd4800e07bec692430791321cc69f Mon Sep 17 00:00:00 2001 From: tomivm Date: Tue, 25 Jun 2024 01:06:34 +0200 Subject: [PATCH 14/20] Add feature to search boards --- .../LoadBoardEditor/LoadBoardEditor.js | 46 +++++++++++++++---- .../LoadBoardEditor/useAllBoardsFetcher.js | 7 +-- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 7857dc2b3..fd517837a 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useMemo } from 'react'; import { alpha, makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; @@ -30,6 +30,7 @@ import communicatorMessages from '../../../Communicator/CommunicatorDialog/Commu import messages from './LoadBoardEditor.messages'; import moment from 'moment'; import { isCordova } from '../../../../cordova-util'; +import { debounce, set } from 'lodash'; const useStyles = makeStyles(theme => ({ appBar: { @@ -87,13 +88,15 @@ const Transition = React.forwardRef(function Transition(props, ref) { const BoardPagination = ({ pagesCount, currentPage, handleChange }) => { return (
- + {pagesCount >= 1 && ( + + )}
); }; @@ -179,6 +182,8 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { const handleClickOpen = () => { fetchBoards({}); + setSearchValue(''); + setCurrentPage(1); setOpen(true); }; @@ -188,7 +193,7 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { const handleChangeOnPage = (event, page) => { setCurrentPage(page); - fetchBoards({ page }); + fetchBoards({ page, search: searchValue ?? null }); }; const [openConfirmationDialog, setOpenConfirmationDialog] = React.useState( @@ -201,6 +206,22 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { setOpenConfirmationDialog(true); }; + const [searchValue, setSearchValue] = React.useState(''); + const debounceSearch = useMemo( + () => + debounce(value => { + setSearchValue(value); + setCurrentPage(1); + fetchBoards({ page: 1, search: value }); + }, 500), + [fetchBoards] + ); + + const onSearchChange = e => { + const searchValue = e.target.value; + debounceSearch(searchValue); + }; + return ( <> {!isLostedFolder ? ( @@ -276,7 +297,12 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { )} - {!loading && !error && } + {!loading && !error && totalPages >= 1 && ( + + )} + {!loading && !error && totalPages === 0 && ( + No boards found for '{searchValue}' + )} { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const fetchBoards = async ({ page = 1 }) => { + const fetchBoards = async ({ page = 1, search = '' }) => { try { const LIMIT = 10; setLoading(true); @@ -15,10 +15,11 @@ const useBoardsFetcher = () => { const response = await API.getMyBoards({ limit: LIMIT, sort: 'name', - page: page + page: page, + search }); setPageBoards(response.data); - const totalPages = response.total / LIMIT; + const totalPages = Math.ceil(response.total / LIMIT); setTotalBoards(totalPages); setLoading(false); } catch (error) { From 7b6f9b9633a43651e4be009decd3c8c029b26077 Mon Sep 17 00:00:00 2001 From: tomivm Date: Tue, 25 Jun 2024 01:07:49 +0200 Subject: [PATCH 15/20] remove unnecessary import --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index fd517837a..0efa0feef 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -30,7 +30,7 @@ import communicatorMessages from '../../../Communicator/CommunicatorDialog/Commu import messages from './LoadBoardEditor.messages'; import moment from 'moment'; import { isCordova } from '../../../../cordova-util'; -import { debounce, set } from 'lodash'; +import { debounce } from 'lodash'; const useStyles = makeStyles(theme => ({ appBar: { From f6a41e3e38a27ab4eb408f51b0e64e6f7f652a6f Mon Sep 17 00:00:00 2001 From: tomivm Date: Tue, 25 Jun 2024 01:24:44 +0200 Subject: [PATCH 16/20] Add formatted messages --- .../LoadBoardEditor/LoadBoardEditor.js | 14 ++++++++----- .../LoadBoardEditor.messages.js | 20 +++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 0efa0feef..d61afacdc 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -260,14 +260,14 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { - Sound + {intl.formatMessage(messages.searchForAFolder)}
{ )} {error && ( - Error getting all your folders + + {intl.formatMessage(messages.errorGettingFolders)} + )} @@ -301,7 +303,9 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { )} {!loading && !error && totalPages === 0 && ( - No boards found for '{searchValue}' + + {intl.formatMessage(messages.noBoardsFound)}'{searchValue}' + )} Date: Tue, 25 Jun 2024 01:31:52 +0200 Subject: [PATCH 17/20] Add messages to cboard.json --- .../TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js | 3 ++- src/translations/src/cboard.json | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js index 28fe76c28..32c84e812 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.messages.js @@ -32,7 +32,8 @@ export default defineMessages({ }, errorGettingFolders: { id: 'cboard.components.LoadBoardEditor.errorGettingFolders', - defaultMessage: 'Error getting all your folders' + defaultMessage: + 'Error getting all your folders. Please be sure that you have internet connection to use this feature.' }, tryAgain: { id: 'cboard.components.LoadBoardEditor.tryAgain', diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json index 9ebe568aa..d6c376209 100644 --- a/src/translations/src/cboard.json +++ b/src/translations/src/cboard.json @@ -170,6 +170,12 @@ "cboard.components.Board.TileEditor.loadBoardAlertDescriptionLocalId": "It's looks like this folder is localy stored on the device that you create it. If you want to use it, please make a change in it connected to the internet. Or edit this value to use another folder.", "cboard.components.Board.TileEditor.loadBoardAlertSearch": "Search folder", "cboard.components.LoadBoardEditor.searchFolder": "Search folder", + "cboard.components.LoadBoardEditor.searchForAFolder": "Search for a folder", + "cboard.components.LoadBoardEditor.searchPlaceholder": "Search…", + "cboard.components.LoadBoardEditor.errorGettingFolders": "Error getting all your folders. Please be sure that you have internet connection to use this feature.", + "cboard.components.LoadBoardEditor.tryAgain": "Try Again", + "cboard.components.LoadBoardEditor.noBoardsFound": "No boards found for '{searchValue}'", + "cboard.components.LoadBoardEditor.openBoardInNewTab": "Open in new tab", "cboard.components.Board.boardEditTitleCancel": "Cancel", "cboard.components.Board.boardEditTitleAccept": "Accept", "cboard.components.Board.userProfileLocked": "User Profile is locked, please unlock settings to see your user profile.", From a2c3e77047a12412320bedd5c54aecd48d1693b5 Mon Sep 17 00:00:00 2001 From: tomivm Date: Tue, 25 Jun 2024 01:33:50 +0200 Subject: [PATCH 18/20] prevent render BoardPagination on error --- .../LoadBoardEditor/LoadBoardEditor.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index d61afacdc..5b510d5dc 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -279,11 +279,13 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => {
- + {!loading && !error && ( + + )} {loading && (
@@ -307,11 +309,13 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { {intl.formatMessage(messages.noBoardsFound)}'{searchValue}' )} - + {!loading && !error && ( + + )}
Date: Tue, 25 Jun 2024 01:42:24 +0200 Subject: [PATCH 19/20] add margin to search button --- .../Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js index 5b510d5dc..3b8609b2d 100644 --- a/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js +++ b/src/components/Board/TileEditor/LoadBoardEditor/LoadBoardEditor.js @@ -239,6 +239,7 @@ const LoadBoardEditor = ({ intl, onLoadBoardChange, isLostedFolder }) => { color="primary" onClick={handleClickOpen} className={styles.searchButton} + style={{ marginTop: '8px' }} > {intl.formatMessage(messages.searchFolder)} From f8638f29a3e65d8dc4d599532e9a3015b3912704 Mon Sep 17 00:00:00 2001 From: tomivm Date: Thu, 4 Jul 2024 02:16:05 +0200 Subject: [PATCH 20/20] Add API board if is not on the store --- src/components/Board/Board.container.js | 12 ++++++++++++ .../Board/TileEditor/TileEditor.component.js | 4 +++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Board/Board.container.js b/src/components/Board/Board.container.js index 21f17788b..533e568eb 100644 --- a/src/components/Board/Board.container.js +++ b/src/components/Board/Board.container.js @@ -1541,6 +1541,17 @@ export class BoardContainer extends Component { } }; + handleAddApiBoard = async boardId => { + if (!this.props.boards.find(board => board.id === boardId)) { + try { + const board = await API.getBoard(boardId); + this.props.addBoards([board]); + } catch (err) { + console.log(err.message); + } + } + }; + render() { const { navHistory, @@ -1696,6 +1707,7 @@ export class BoardContainer extends Component { )} userData={this.props.userData} folders={this.props.boards} + onAddApiBoard={this.handleAddApiBoard} /> ); diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 933ff1175..00b4fd6ef 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/src/components/Board/TileEditor/TileEditor.component.js @@ -74,7 +74,8 @@ export class TileEditor extends Component { onAddSubmit: PropTypes.func.isRequired, boards: PropTypes.array, userData: PropTypes.object, - folders: PropTypes.array + folders: PropTypes.array, + onAddApiBoard: PropTypes.func }; static defaultProps = { @@ -430,6 +431,7 @@ export class TileEditor extends Component { handleLoadBoardChange = ({ boardId }) => { if (boardId) { + this.props.onAddApiBoard(boardId); this.updateTileProperty('loadBoard', boardId); } };