content.js
1 year ago
filters.js
1 year ago
header.js
1 year ago
import-modal.js
1 year ago
list-item.js
1 year ago
notices.js
5 years ago
pagination.js
5 years ago
preview.js
1 year ago
publish-button.js
2 years ago
template-predefine.js
2 years ago
templates-content.js
1 year ago
tpc-templates-button.js
2 years ago
templates-content.js
272 lines
| 1 | /* global tiTpc */ |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { Placeholder, Spinner } from '@wordpress/components'; |
| 4 | import { withSelect, useDispatch } from '@wordpress/data'; |
| 5 | import { Fragment, useEffect, useState } from '@wordpress/element'; |
| 6 | |
| 7 | import classnames from 'classnames'; |
| 8 | |
| 9 | import Filters from './filters'; |
| 10 | import ListItem from './list-item'; |
| 11 | import Pagination from './pagination'; |
| 12 | import { fetchLibrary, fetchTemplates } from './../data/templates-cloud/index'; |
| 13 | |
| 14 | const TemplatesContent = ( { |
| 15 | importBlocks, |
| 16 | isGeneral = false, |
| 17 | isFetching, |
| 18 | items, |
| 19 | currentPage, |
| 20 | totalPages, |
| 21 | getOrder, |
| 22 | setQuery, |
| 23 | getSearchQuery, |
| 24 | setSorting, |
| 25 | } ) => { |
| 26 | const { setFetching } = useDispatch( 'tpc/block-editor' ); |
| 27 | const [ layout, setLayout ] = useState( 'grid' ); |
| 28 | const [ showFSE, setShowFSE ] = useState( |
| 29 | tiTpc.isFSETheme ? window?.localStorage?.tpcShowFse === 'true' : false |
| 30 | ); |
| 31 | |
| 32 | const [ isSearch, setSearch ] = useState( { |
| 33 | templates: false, |
| 34 | library: false, |
| 35 | } ); |
| 36 | |
| 37 | const setSearchStatus = ( status ) => { |
| 38 | if ( isGeneral ) { |
| 39 | return setSearch( { |
| 40 | ...isSearch, |
| 41 | templates: status, |
| 42 | } ); |
| 43 | } |
| 44 | |
| 45 | return setSearch( { |
| 46 | ...isSearch, |
| 47 | library: status, |
| 48 | } ); |
| 49 | }; |
| 50 | |
| 51 | const getSearchStatus = () => { |
| 52 | if ( isGeneral ) { |
| 53 | return isSearch.templates; |
| 54 | } |
| 55 | |
| 56 | return isSearch.library; |
| 57 | }; |
| 58 | |
| 59 | const init = async () => { |
| 60 | setFetching( true ); |
| 61 | const order = getOrder(); |
| 62 | if ( isGeneral ) { |
| 63 | await fetchTemplates( { |
| 64 | search: getSearchQuery(), |
| 65 | showFSE, |
| 66 | ...order, |
| 67 | } ); |
| 68 | } else { |
| 69 | await fetchLibrary( { |
| 70 | search: getSearchQuery(), |
| 71 | showFSE, |
| 72 | ...order, |
| 73 | } ); |
| 74 | } |
| 75 | setFetching( false ); |
| 76 | }; |
| 77 | |
| 78 | useEffect( () => { |
| 79 | if ( items && items.length > 0 ) { |
| 80 | return; |
| 81 | } |
| 82 | init(); |
| 83 | }, [ isGeneral ] ); |
| 84 | |
| 85 | const changePage = async ( index ) => { |
| 86 | setFetching( true ); |
| 87 | const order = getOrder(); |
| 88 | if ( isGeneral ) { |
| 89 | await fetchTemplates( { |
| 90 | search: getSearchQuery(), |
| 91 | page: index, |
| 92 | ...order, |
| 93 | } ); |
| 94 | } else { |
| 95 | await fetchLibrary( { |
| 96 | search: getSearchQuery(), |
| 97 | page: index, |
| 98 | ...order, |
| 99 | } ); |
| 100 | } |
| 101 | |
| 102 | setFetching( false ); |
| 103 | }; |
| 104 | |
| 105 | const onSearch = async ( search = getSearchQuery() ) => { |
| 106 | setFetching( true ); |
| 107 | |
| 108 | if ( search ) { |
| 109 | setSearchStatus( true ); |
| 110 | } else { |
| 111 | setSearchStatus( false ); |
| 112 | } |
| 113 | |
| 114 | const order = getOrder(); |
| 115 | if ( isGeneral ) { |
| 116 | await fetchTemplates( { |
| 117 | search, |
| 118 | ...order, |
| 119 | } ); |
| 120 | } else { |
| 121 | await fetchLibrary( { |
| 122 | search, |
| 123 | ...order, |
| 124 | } ); |
| 125 | } |
| 126 | |
| 127 | setFetching( false ); |
| 128 | }; |
| 129 | |
| 130 | const onFSEChange = async () => { |
| 131 | setFetching( true ); |
| 132 | |
| 133 | const newValue = ! showFSE; |
| 134 | setShowFSE( newValue ); |
| 135 | window.localStorage.setItem( 'tpcShowFse', newValue.toString() ); |
| 136 | |
| 137 | const order = getOrder(); |
| 138 | const search = getSearchQuery(); |
| 139 | |
| 140 | if ( isGeneral ) { |
| 141 | await fetchTemplates( { |
| 142 | search, |
| 143 | ...order, |
| 144 | showFSE: newValue, |
| 145 | } ); |
| 146 | } else { |
| 147 | await fetchLibrary( { |
| 148 | search, |
| 149 | ...order, |
| 150 | showFSE: newValue, |
| 151 | } ); |
| 152 | } |
| 153 | |
| 154 | setFetching( false ); |
| 155 | }; |
| 156 | |
| 157 | const changeOrder = async ( order ) => { |
| 158 | setFetching( true ); |
| 159 | if ( isGeneral ) { |
| 160 | await fetchTemplates( { |
| 161 | ...order, |
| 162 | search: getSearchQuery(), |
| 163 | } ); |
| 164 | } else { |
| 165 | await fetchLibrary( { |
| 166 | ...order, |
| 167 | search: getSearchQuery(), |
| 168 | } ); |
| 169 | } |
| 170 | |
| 171 | setFetching( false ); |
| 172 | }; |
| 173 | |
| 174 | if ( isFetching ) { |
| 175 | return ( |
| 176 | <Fragment> |
| 177 | <Filters |
| 178 | showFSE={ showFSE } |
| 179 | onFSEChange={ onFSEChange } |
| 180 | layout={ layout } |
| 181 | sortingOrder={ getOrder() } |
| 182 | setLayout={ setLayout } |
| 183 | isSearch={ getSearchStatus() } |
| 184 | searchQuery={ getSearchQuery() } |
| 185 | onSearch={ onSearch } |
| 186 | setSearchQuery={ setQuery } |
| 187 | setSortingOrder={ setSorting } |
| 188 | changeOrder={ changeOrder } |
| 189 | /> |
| 190 | |
| 191 | <Placeholder> |
| 192 | <Spinner /> |
| 193 | </Placeholder> |
| 194 | </Fragment> |
| 195 | ); |
| 196 | } |
| 197 | |
| 198 | if ( ! Boolean( items.length ) ) { |
| 199 | return ( |
| 200 | <div className="table-content"> |
| 201 | <Filters |
| 202 | showFSE={ showFSE } |
| 203 | onFSEChange={ onFSEChange } |
| 204 | layout={ layout } |
| 205 | sortingOrder={ getOrder() } |
| 206 | setLayout={ setLayout } |
| 207 | isSearch={ getSearchStatus() } |
| 208 | searchQuery={ getSearchQuery() } |
| 209 | onSearch={ onSearch } |
| 210 | setSearchQuery={ setQuery } |
| 211 | setSortingOrder={ setSorting } |
| 212 | changeOrder={ changeOrder } |
| 213 | /> |
| 214 | |
| 215 | { __( |
| 216 | 'No templates available. Add a new one?', |
| 217 | 'templates-patterns-collection' |
| 218 | ) } |
| 219 | </div> |
| 220 | ); |
| 221 | } |
| 222 | |
| 223 | const contentClasses = classnames( 'table-content', { |
| 224 | 'is-grid': 'grid' === layout, |
| 225 | } ); |
| 226 | |
| 227 | return ( |
| 228 | <Fragment> |
| 229 | <Filters |
| 230 | showFSE={ showFSE } |
| 231 | onFSEChange={ onFSEChange } |
| 232 | layout={ layout } |
| 233 | sortingOrder={ getOrder() } |
| 234 | setLayout={ setLayout } |
| 235 | isSearch={ getSearchStatus() } |
| 236 | searchQuery={ getSearchQuery() } |
| 237 | onSearch={ onSearch } |
| 238 | setSearchQuery={ setQuery } |
| 239 | setSortingOrder={ setSorting } |
| 240 | changeOrder={ changeOrder } |
| 241 | /> |
| 242 | |
| 243 | <div className={ contentClasses }> |
| 244 | { items.map( ( item ) => ( |
| 245 | <ListItem |
| 246 | sortingOrder={ getOrder() } |
| 247 | deletable={ ! isGeneral } |
| 248 | key={ item.template_id } |
| 249 | layout={ layout } |
| 250 | item={ item } |
| 251 | importBlocks={ importBlocks } |
| 252 | /> |
| 253 | ) ) } |
| 254 | </div> |
| 255 | |
| 256 | <Pagination |
| 257 | onChange={ changePage } |
| 258 | current={ currentPage } |
| 259 | total={ totalPages } |
| 260 | /> |
| 261 | </Fragment> |
| 262 | ); |
| 263 | }; |
| 264 | |
| 265 | export default withSelect( ( select, { isGeneral } ) => { |
| 266 | const library = isGeneral |
| 267 | ? select( 'tpc/block-editor' ).getTemplates() |
| 268 | : select( 'tpc/block-editor' ).getLibrary(); |
| 269 | const { items = [], currentPage, totalPages } = library; |
| 270 | return { items, currentPage, totalPages }; |
| 271 | } )( TemplatesContent ); |
| 272 |