ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2016-01-18 14:15:19 +01:00
commit aa00415a83
28 changed files with 199 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/actions/edition_list_actions.js
View File

@ -17,23 +17,31 @@ class EditionListActions {
);
}
fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
if((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) {
if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
orderBy = 'edition_number';
orderAsc = true;
}
// Taken from: http://stackoverflow.com/a/519157/1263876
if((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) {
if ((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) {
page = 1;
pageSize = 10;
}
let itemsToFetch = pageSize;
// If we only want to fetch up to a specified edition, fetch all pages up to it
// as one page and adjust afterwards
if (typeof maxEdition === 'number') {
itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize;
page = 1;
}
return Q.Promise((resolve, reject) => {
EditionListFetcher
.fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
.fetch({ pieceId, page, itemsToFetch, orderBy, orderAsc, filterBy })
.then((res) => {
if(res && !res.editions) {
if (res && !res.editions) {
throw new Error('Piece has no editions to fetch.');
}
@ -44,8 +52,9 @@ class EditionListActions {
orderBy,
orderAsc,
filterBy,
'editionListOfPiece': res.editions,
'count': res.count
maxEdition,
count: res.count,
editionListOfPiece: res.editions
});
resolve(res);
})
@ -54,7 +63,6 @@ class EditionListActions {
reject(err);
});
});
}
}

4
js/actions/piece_list_actions.js
View File

@ -15,7 +15,7 @@ class PieceListActions {
);
}
fetchPieceList(page, pageSize, search, orderBy, orderAsc, filterBy) {
fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
// To prevent flickering on a pagination request,
// we overwrite the piecelist with an empty list before
// pieceListCount === -1 defines the loading state
@ -34,7 +34,7 @@ class PieceListActions {
// afterwards, we can load the list
return Q.Promise((resolve, reject) => {
PieceListFetcher
.fetch(page, pageSize, search, orderBy, orderAsc, filterBy)
.fetch({ page, pageSize, search, orderBy, orderAsc, filterBy })
.then((res) => {
this.actions.updatePieceList({
page,

1
js/app.js
View File

@ -1,6 +1,7 @@
'use strict';
import 'babel/polyfill';
import 'classlist-polyfill';
import React from 'react';
import { Router, Redirect } from 'react-router';

12
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -19,9 +19,10 @@ import { getLangText } from '../../utils/lang_utils';
let AccordionListItemEditionWidget = React.createClass({
propTypes: {
className: React.PropTypes.string,
piece: React.PropTypes.object.isRequired,
toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
className: React.PropTypes.string,
onPollingSuccess: React.PropTypes.func
},
@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({
* Calls the store to either show or hide the editionListTable
*/
toggleTable() {
let pieceId = this.props.piece.id;
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
const { piece: { id: pieceId } } = this.props;
const { filterBy, isEditionListOpenForPieceId } = this.state;
const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) {
if (isEditionListOpen) {
EditionListActions.toggleEditionList(pieceId);
} else {
EditionListActions.toggleEditionList(pieceId);
EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy);
EditionListActions.fetchEditionList({ pieceId, filterBy });
}
},

20
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -66,20 +66,28 @@ let AccordionListItemTableEditions = React.createClass({
},
filterSelectedEditions() {
let selectedEditions = this.state.editionList[this.props.parentId]
.filter((edition) => edition.selected);
return selectedEditions;
return this.state
.editionList[this.props.parentId]
.filter((edition) => edition.selected);
},
loadFurtherEditions() {
const { parentId: pieceId } = this.props;
const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId];
// trigger loading animation
this.setState({
showMoreLoading: true
});
let editionList = this.state.editionList[this.props.parentId];
EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize,
editionList.orderBy, editionList.orderAsc, editionList.filterBy);
EditionListActions.fetchEditionList({
pieceId,
pageSize,
orderBy,
orderAsc,
filterBy,
page: page + 1
});
},
render() {
const { className, parentId } = this.props;

7
js/components/ascribe_accordion_list/accordion_list_item_wallet.js
View File

@ -88,11 +88,12 @@ let AccordionListItemWallet = React.createClass({
},
onPollingSuccess(pieceId) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
EditionListActions.toggleEditionList(pieceId);
let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},

34
js/components/ascribe_buttons/create_editions_button.js
View File

@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({
EditionListStore.listen(this.onChange);
},
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
componentWillUnmount() {
EditionListStore.unlisten(this.onChange);
clearInterval(this.state.pollingIntervalIndex);
@ -37,28 +43,24 @@ let CreateEditionsButton = React.createClass({
this.setState(state);
},
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
startPolling() {
// start polling until editions are defined
let pollingIntervalIndex = setInterval(() => {
// requests, will try to merge the filterBy parameter with other parameters (mergeOptions).
// Therefore it can't but null but instead has to be an empty object
EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {})
.then((res) => {
clearInterval(this.state.pollingIntervalIndex);
this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
})
.catch((err) => {
/* Ignore and keep going */
});
EditionListActions
.fetchEditionList({
pieceId: this.props.piece.id,
filterBy: {}
})
.then((res) => {
clearInterval(this.state.pollingIntervalIndex);
this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
})
.catch((err) => {
/* Ignore and keep going */
});
}, 5000);
this.setState({

7
js/components/ascribe_detail/edition_action_panel.js
View File

@ -79,9 +79,10 @@ let EditionActionPanel = React.createClass({
},
refreshCollection() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
EditionListActions.refreshEditionList({ pieceId: this.props.edition.parent });
},
handleSuccess(response) {

16
js/components/ascribe_detail/piece_container.js
View File

@ -144,15 +144,18 @@ let PieceContainer = React.createClass({
},
handleEditionCreationSuccess() {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceActions.updateProperty({ key: 'num_editions', value: 0 });
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.toggleCreateEditionsDialog();
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
@ -181,6 +184,8 @@ let PieceContainer = React.createClass({
},
handlePollingSuccess(pieceId, numEditions) {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
// we need to refresh the num_editions property of the actual piece we're looking at
PieceActions.updateProperty({
key: 'num_editions',
@ -191,8 +196,7 @@ let PieceContainer = React.createClass({
// btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion
// list item also uses the firstEdition property which we can only get from the server in that case.
// Therefore we need to at least refetch the changed piece from the server or on our case simply all
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);

43
js/components/global_action.js
View File

@ -1,43 +0,0 @@
'use strict';
import React from 'react';
let GlobalAction = React.createClass({
propTypes: {
requestActions: React.PropTypes.object
},
render() {
let pieceActions = null;
if (this.props.requestActions && this.props.requestActions.pieces){
pieceActions = this.props.requestActions.pieces.map((item) => {
return (
<div className="ascribe-global-action">
{item}
</div>);
});
}
let editionActions = null;
if (this.props.requestActions && this.props.requestActions.editions){
editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => {
return this.props.requestActions.editions[pieceId].map((item) => {
return (
<div className="ascribe-global-action">
{item}
</div>);
});
});
}
if (pieceActions || editionActions) {
return (
<div className="ascribe-global-action-wrapper">
{pieceActions}
{editionActions}
</div>);
}
return null;
}
});
export default GlobalAction;

18
js/components/piece_list.js
View File

@ -196,13 +196,14 @@ let PieceList = React.createClass({
this.state.pieceList
.forEach((piece) => {
// but only if they're actually open
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id];
if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) {
EditionListActions.refreshEditionList({
pieceId: piece.id,
filterBy
});
}
});
});
@ -212,15 +213,15 @@ let PieceList = React.createClass({
},
applyOrderBy(orderBy) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
const { orderAsc, pageSize } = this.state;
const orderBy = this.state.orderBy || this.props.orderBy;
return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
orderBy, this.state.orderAsc, filterBy);
return PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
fetchSelectedPieceEditionList() {
@ -246,8 +247,9 @@ let PieceList = React.createClass({
},
handleAclSuccess() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderBy, orderAsc, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.fetchSelectedPieceEditionList()
.forEach((pieceId) => {

15
js/components/register_piece.js
View File

@ -65,26 +65,21 @@ let RegisterPiece = React.createClass( {
this.setState(state);
},
handleSuccess(response){
handleSuccess(response) {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
// once the user was able to register a piece successfully, we need to make sure to keep
// the piece list up to date
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.history.push(`/pieces/${response.piece.id}`);
},
getSpecifyEditions() {
if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
if (this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
return (
<Property
name="num_editions"

10
js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
View File

@ -58,8 +58,9 @@ let AccordionListItemPrize = React.createClass({
},
handleSubmitPrizeSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
@ -138,8 +139,9 @@ let AccordionListItemPrize = React.createClass({
},
refreshPieceData() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
onSelectChange(){

5
js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
View File

@ -301,9 +301,10 @@ let PrizePieceRatings = React.createClass({
},
refreshPieceData() {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.props.loadPiece();
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
onSelectChange() {

5
js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
View File

@ -52,8 +52,9 @@ let CylandAccordionListItem = React.createClass({
},
handleSubmitSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);

5
js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
View File

@ -77,8 +77,9 @@ let CylandPieceContainer = React.createClass({
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them

11
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -133,14 +133,9 @@ let CylandRegisterPiece = React.createClass({
},
refreshPieceList() {
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
render() {

5
js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
View File

@ -53,8 +53,9 @@ let IkonotvAccordionListItem = React.createClass({
},
handleSubmitSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);

5
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -78,8 +78,9 @@ let IkonotvPieceContainer = React.createClass({
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them

11
js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
View File

@ -138,14 +138,9 @@ let IkonotvRegisterPiece = React.createClass({
},
refreshPieceList() {
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
canSubmit() {

11
js/components/whitelabel/wallet/components/market/market_register_piece.js
View File

@ -105,14 +105,9 @@ let MarketRegisterPiece = React.createClass({
},
refreshPieceList() {
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
render() {

6
js/fetchers/edition_list_fetcher.js
View File

@ -9,10 +9,10 @@ let EditionListFetcher = {
/**
* Fetches a list of editions from the API.
*/
fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
let ordering = generateOrderingQueryParams(orderBy, orderAsc);
fetch({ pieceId, page, pageSize, orderBy, orderAsc, filterBy }) {
const ordering = generateOrderingQueryParams(orderBy, orderAsc);
let queryParams = mergeOptions(
const queryParams = mergeOptions(
{
page,
pageSize,

6
js/fetchers/piece_list_fetcher.js
View File

@ -10,12 +10,12 @@ let PieceListFetcher = {
* Fetches a list of pieces from the API.
* Can be called with all supplied queryparams the API.
*/
fetch(page, pageSize, search, orderBy, orderAsc, filterBy) {
let ordering = generateOrderingQueryParams(orderBy, orderAsc);
fetch({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
const ordering = generateOrderingQueryParams(orderBy, orderAsc);
// filterBy is an object of acl key-value pairs.
// The values are booleans
let queryParams = mergeOptions(
const queryParams = mergeOptions(
{
page,
pageSize,

119
js/stores/edition_list_store.js
View File

@ -12,7 +12,11 @@ class EditionListStore {
this.bindActions(EditionsListActions);
}
onUpdateEditionList({ pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy }) {
onUpdateEditionList({ pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy, maxEdition }) {
// if editionList for a specific piece does not exist yet,
// just initialize a new array
const pieceEditionList = this.editionList[pieceId] || [];
/*
Basically there are two modes an edition list can be updated.
@ -20,93 +24,107 @@ class EditionListStore {
2. The elements are already defined => merge current objects with the new ones from the server
*/
for (let i = 0; i < editionListOfPiece.length; i++) {
// if editionList for a specific piece does not exist yet,
// just initialize a new array
if(!this.editionList[pieceId]) {
this.editionList[pieceId] = [];
}
// this is the index formula for accessing an edition of a specific
// page
let storeEditionIndex = (page - 1) * pageSize + i;
let editionsForPieces = this.editionList[pieceId];
editionListOfPiece.forEach((updatedEdition, index) => {
// this is the index formula for accessing an edition starting from a specific page
const storeEditionIndex = (page - 1) * pageSize + index;
// if edition already exists, just merge
if(editionsForPieces[storeEditionIndex]) {
editionsForPieces[storeEditionIndex] = React.addons.update(editionsForPieces[storeEditionIndex], {$merge: editionListOfPiece[i]});
if (pieceEditionList[storeEditionIndex]) {
pieceEditionList[storeEditionIndex] = React.addons.update(pieceEditionList[storeEditionIndex], { $merge: updatedEdition });
} else {
// if does not exist, assign
editionsForPieces[storeEditionIndex] = editionListOfPiece[i];
pieceEditionList[storeEditionIndex] = updatedEdition;
}
});
// Remove editions after specified max by finding the index of the first
// edition larger than the max edition and using that to cut off the rest of the list
if (typeof maxEdition === 'number') {
const largerThanMaxIndex = pieceEditionList.findIndex(edition => edition.edition_number > maxEdition);
if (largerThanMaxIndex !== -1) {
// The API defines inflexible page buckets based on the page number
// and page size, so we cannot just arbitrarily cut off the end of
// a page and expect get the rest of it on the next pagination request.
// Hence, we use the max edition index as a guide for which page to
// cut off to so as to always provide complete pages.
page = Math.ceil(largerThanMaxIndex / pageSize);
// We only want to cut off the list if there are more editions than
// there should be (ie. we're not already at the end of the editions)
const totalPageSize = page * pageSize;
if (pieceEditionList.length > totalPageSize) {
pieceEditionList.length = totalPageSize;
}
}
}
const lastEdition = pieceEditionList[pieceEditionList.length - 1];
/**
* page, pageSize, orderBy, orderAsc and count are specific to a single list of editions
* therefore they need to be saved in relation to their parent-piece.
*
* Default values for both are set in the editon_list_actions.
*/
this.editionList[pieceId].page = page;
this.editionList[pieceId].pageSize = pageSize;
this.editionList[pieceId].orderBy = orderBy;
this.editionList[pieceId].orderAsc = orderAsc;
this.editionList[pieceId].count = count;
this.editionList[pieceId].filterBy = filterBy;
pieceEditionList.page = page;
pieceEditionList.pageSize = pageSize;
pieceEditionList.orderBy = orderBy;
pieceEditionList.orderAsc = orderAsc;
pieceEditionList.count = count;
pieceEditionList.filterBy = filterBy;
if (pieceEditionList.maxSeen == null || lastEdition.edition_number > pieceEditionList.maxSeen) {
pieceEditionList.maxSeen = lastEdition.edition_number;
}
this.editionList[pieceId] = pieceEditionList;
}
/**
* We often just have to refresh the edition list for a certain pieceId,
* this method provides exactly that functionality without any side effects
*/
onRefreshEditionList({ pieceId, filterBy = {} }) {
onRefreshEditionList({ pieceId, filterBy }) {
const pieceEditionList = this.editionList[pieceId];
// It may happen that the user enters the site logged in already
// through /editions
// If he then tries to delete a piece/edition and this method is called,
// we'll not be able to refresh his edition list since its not yet there.
// Therefore we can just return, since there is no data to be refreshed
if(!this.editionList[pieceId]) {
if (!this.editionList[pieceId]) {
return;
}
let prevEditionListLength = this.editionList[pieceId].length;
let prevEditionListPage = this.editionList[pieceId].page;
let prevEditionListPageSize = this.editionList[pieceId].pageSize;
// we can also refresh the edition list using filterBy,
// if we decide not to do that then the old filter will just be applied.
if(filterBy && Object.keys(filterBy).length <= 0) {
filterBy = this.editionList[pieceId].filterBy;
prevEditionListLength = 10;
prevEditionListPage = 1;
prevEditionListPageSize = 10;
if (typeof filterBy !== 'object') {
filterBy = pieceEditionList.filterBy;
}
const { maxSeen, orderAsc, orderBy, pageSize } = pieceEditionList;
// to clear an array, david walsh recommends to just set it's length to zero
// http://davidwalsh.name/empty-array
this.editionList[pieceId].length = 0;
pieceEditionList.length = 0;
// refetch editions with adjusted page size
EditionsListActions.fetchEditionList(pieceId, 1, prevEditionListLength,
this.editionList[pieceId].orderBy,
this.editionList[pieceId].orderAsc,
filterBy)
.then(() => {
// reset back to the normal pageSize and page
this.editionList[pieceId].page = prevEditionListPage;
this.editionList[pieceId].pageSize = prevEditionListPageSize;
EditionsListActions
.fetchEditionList({
pieceId,
pageSize,
orderBy,
orderAsc,
filterBy,
maxSeen,
page: 1
})
.catch((err) => {
console.logGlobal(err);
});
.catch(console.logGlobal);
}
onSelectEdition({ pieceId, editionId, toValue }) {
this.editionList[pieceId].forEach((edition) => {
// Taken from: http://stackoverflow.com/a/519157/1263876
if(typeof toValue !== 'undefined' && edition.id === editionId) {
if (typeof toValue !== 'undefined' && edition.id === editionId) {
edition.selected = toValue;
} else if(edition.id === editionId) {
if(edition.selected) {
@ -132,7 +150,6 @@ class EditionListStore {
}
onToggleEditionList(pieceId) {
this.isEditionListOpenForPieceId[pieceId] = {
show: this.isEditionListOpenForPieceId[pieceId] ? !this.isEditionListOpenForPieceId[pieceId].show : true
};
@ -141,7 +158,7 @@ class EditionListStore {
// the merge fails, as the edition list is not refreshed when closed.
// Therefore in the case of a filter application when closed, we need to reload the
// edition list
if(!this.isEditionListOpenForPieceId[pieceId].show) {
if (!this.isEditionListOpenForPieceId[pieceId].show) {
// to clear an array, david walsh recommends to just set it's length to zero
// http://davidwalsh.name/empty-array

10
js/utils/store_utils.js
View File

@ -1,10 +0,0 @@
'use strict'
export function onChangeOnce(component, store) {
const onChange = (state) => {
component.setState(state);
store.unlisten(onChange);
};
store.listen(onChange);
}

1
package.json
View File

@ -48,6 +48,7 @@
"browserify": "^9.0.8",
"browserify-shim": "^3.8.10",
"camelcase": "^1.2.1",
"classlist-polyfill": "^1.0.2",
"classnames": "^1.2.2",
"compression": "^1.4.4",
"decamelize": "^1.1.1",

4
sass/ascribe_custom_style.scss
View File

@ -447,9 +447,9 @@ fieldset[disabled] .btn-secondary.active {
}
.search-bar > .form-group > .input-group {
border: 1px solid rgba(0, 0, 0, 0);
border: 1px solid $ascribe-blue-border;
&:hover, &:focus, &:active {
border-color: $ascribe-blue-border;
border-color: $ascribe-blue-border-active;
}
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);

1
sass/ascribe_variables.scss
View File

@ -5,6 +5,7 @@ $ascribe-light-blue: #D3DEE4;
$ascribe-white: #F8F8F8;
$ascribe-pink: #D10074;
$ascribe-blue-border: rgba(0, 60, 105, 0.1);
$ascribe-blue-border-active: rgba(0, 60, 105, 0.2);
$ascribe-red-error: rgb(169, 68, 66);