All: Allow sorting notes by various fields

ReactNativeClient/lib/components/ModalDialog.js

@@ -0,0 +1,81 @@
+const React = require('react');
+const { Text, Modal, View, StyleSheet, Button } = require('react-native');
+const { themeStyle } = require('lib/components/global-style.js');
+const { _ } = require('lib/locale');
+
+class ModalDialog extends React.Component {
+
+	constructor() {
+		super();
+		this.styles_ = {};
+	}
+
+	styles() {
+		const themeId = this.props.theme;
+		const theme = themeStyle(themeId);
+
+		if (this.styles_[themeId]) return this.styles_[themeId];
+		this.styles_ = {};
+
+		let styles = {
+			modalWrapper: {
+				flex: 1,
+				justifyContent: 'center',
+			},
+			modalContentWrapper: {
+				flex:1,
+				flexDirection: 'column',
+				backgroundColor: theme.backgroundColor,
+				borderWidth: 1,
+				borderColor:theme.dividerColor,
+				margin: 20,
+				padding: 10,
+			},
+			modalContentWrapper2: {
+				paddingTop: 10,
+				flex:1,
+			},
+			title: {
+				borderBottomWidth: 1,
+				borderBottomColor: theme.dividerColor,
+				paddingBottom: 10,
+			},
+			buttonRow: {
+				flexDirection: 'row',
+				borderTopWidth: 1,
+				borderTopColor: theme.dividerColor,
+				paddingTop: 10,
+			},
+		};
+
+		this.styles_[themeId] = StyleSheet.create(styles);
+		return this.styles_[themeId];
+	}
+
+	render() {
+		const ContentComponent = this.props.ContentComponent;
+
+		return (
+			<View style={this.styles().modalWrapper}>
+				<Modal transparent={true} visible={true} onRequestClose={() => { }} >
+					<View style={this.styles().modalContentWrapper}>
+						<Text style={this.styles().title}>Title</Text>
+						<View style={this.styles().modalContentWrapper2}>
+							{ContentComponent}
+						</View>
+						<View style={this.styles().buttonRow}>
+							<View style={{flex:1}}>
+								<Button title={_('OK')} onPress={() => {}}></Button>
+							</View>
+							<View style={{flex:1, marginLeft: 5}}>
+								<Button title={_('Cancel')} onPress={() => {}}></Button>
+							</View>
+						</View>
+					</View>
+				</Modal>
+			</View>
+		);
+	}
+}
+
+module.exports = ModalDialog;

ReactNativeClient/lib/components/screen-header.js

@@ -283,6 +283,16 @@ class ScreenHeaderComponent extends Component {
 			);
 		}
 
+		function sortButton(styles, onPress) {
+			return (
+				<TouchableOpacity onPress={onPress}>
+					<View style={styles.iconButton}>
+						<Icon name='md-funnel' style={styles.topIcon} />
+					</View>
+				</TouchableOpacity>
+			);
+		}
+
 		let key = 0;
 		let menuOptionComponents = [];
 
@@ -424,6 +434,7 @@ class ScreenHeaderComponent extends Component {
 		const backButtonComp = backButton(this.styles(), () => this.backButton_press(), !this.props.historyCanGoBack);
 		const searchButtonComp = this.props.noteSelectionEnabled ? null : searchButton(this.styles(), () => this.searchButton_press());
 		const deleteButtonComp = this.props.noteSelectionEnabled ? deleteButton(this.styles(), () => this.deleteButton_press()) : null;
+		const sortButtonComp = this.props.sortButton_press ? sortButton(this.styles(), () => this.props.sortButton_press()) : null;
 		const windowHeight = Dimensions.get('window').height - 50;
 
 		const menuComp = (
@@ -448,6 +459,7 @@ class ScreenHeaderComponent extends Component {
 					{ titleComp }
 					{ searchButtonComp }
 					{ deleteButtonComp }
+					{ sortButtonComp }
 					{ menuComp }
 				</View>
 				{ warningComp }

ReactNativeClient/lib/components/screens/note.js

@@ -65,9 +65,9 @@ class NoteScreenComponent extends BaseScreenComponent {
 		const saveDialog = async () => {
 			if (this.isModified()) {
 				let buttonId = await dialogs.pop(this, _('This note has been modified:'), [
-					{ title: _('Save changes'), id: 'save' },
-					{ title: _('Discard changes'), id: 'discard' },
-					{ title: _('Cancel'), id: 'cancel' },
+					{ text: _('Save changes'), id: 'save' },
+					{ text: _('Discard changes'), id: 'discard' },
+					{ text: _('Cancel'), id: 'cancel' },
 				]);
 
 				if (buttonId == 'cancel') return true;

ReactNativeClient/lib/components/screens/notes.js

@@ -1,5 +1,6 @@
 const React = require('react'); const Component = React.Component;
-const { View, Button } = require('react-native');
+const { View, Button, Text } = require('react-native');
+const { stateUtils } = require('lib/reducer.js');
 const { connect } = require('react-redux');
 const { reg } = require('lib/registry.js');
 const { Log } = require('lib/log.js');
@@ -10,7 +11,7 @@ const Note = require('lib/models/Note.js');
 const Setting = require('lib/models/Setting.js');
 const { themeStyle } = require('lib/components/global-style.js');
 const { ScreenHeader } = require('lib/components/screen-header.js');
-const { MenuOption, Text } = require('react-native-popup-menu');
+const { MenuOption } = require('react-native-popup-menu');
 const { _ } = require('lib/locale.js');
 const { ActionButton } = require('lib/components/action-button.js');
 const { dialogs } = require('lib/dialogs.js');
@@ -23,6 +24,43 @@ class NotesScreenComponent extends BaseScreenComponent {
 		return { header: null };
 	}
 
+	constructor() {
+		super();
+
+		this.sortButton_press = async () => {
+			const buttons = [];
+			const sortNoteOptions = Setting.enumOptions('notes.sortOrder.field');
+
+			const makeCheckboxText = function(selected, sign, label) {
+				const s = sign === 'tick' ? '✓' : '⬤'
+				return (selected ? (s + ' ') : '') + label;
+			}
+
+			for (let field in sortNoteOptions) {
+				if (!sortNoteOptions.hasOwnProperty(field)) continue;
+				buttons.push({
+					text: makeCheckboxText(Setting.value('notes.sortOrder.field') === field, 'bullet', sortNoteOptions[field]),
+					id: { name: 'notes.sortOrder.field', value: field },
+				});
+			}
+
+			buttons.push({
+				text: makeCheckboxText(Setting.value('notes.sortOrder.reverse'), 'tick', '[ ' + Setting.settingMetadata('notes.sortOrder.reverse').label() + ' ]'),
+				id: { name: 'notes.sortOrder.reverse', value: !Setting.value('notes.sortOrder.reverse') },
+			});
+
+			buttons.push({
+				text: makeCheckboxText(Setting.value('uncompletedTodosOnTop'), 'tick', '[ ' + Setting.settingMetadata('uncompletedTodosOnTop').label() + ' ]'),
+				id: { name: 'uncompletedTodosOnTop', value: !Setting.value('uncompletedTodosOnTop') },
+			});
+
+			const r = await dialogs.pop(this, Setting.settingMetadata('notes.sortOrder.field').label(), buttons);
+			if (!r) return;
+
+			Setting.setValue(r.name, r.value);
+		}
+	}
+
 	async componentDidMount() {
 		await this.refreshNotes();
 	}
@@ -42,6 +80,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 		let options = {
 			order: props.notesOrder,
 			uncompletedTodosOnTop: props.uncompletedTodosOnTop,
+			caseInsensitive: true,
 		};
 
 		const parent = this.parentItem(props);
@@ -155,6 +194,7 @@ class NotesScreenComponent extends BaseScreenComponent {
 					title={title}
 					menuOptions={this.menuOptions()}
 					parentComponent={thisComp}
+					sortButton_press={this.sortButton_press}
 					folderPickerOptions={{
 						enabled: this.props.noteSelectionEnabled,
 						mustSelect: true,
@@ -178,11 +218,11 @@ const NotesScreen = connect(
 			selectedTagId: state.selectedTagId,
 			notesParentType: state.notesParentType,
 			notes: state.notes,
-			notesOrder: state.notesOrder,
 			notesSource: state.notesSource,
 			uncompletedTodosOnTop: state.settings.uncompletedTodosOnTop,
 			theme: state.settings.theme,
 			noteSelectionEnabled: state.noteSelectionEnabled,
+			notesOrder: stateUtils.notesOrder(state.settings),
 		};
 	}
 )(NotesScreenComponent)