Merge branch 'master' of https://github.com/naturalcrit/homebrewery into experimental-development

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -20,7 +20,8 @@ const BrewItem = createClass({
 				authors     : [],
 				stubbed     : true
 			},
-			reportError : ()=>{}
+			updateListFilter : ()=>{},
+			reportError      : ()=>{}
 		};
 	},
 
@@ -44,6 +45,10 @@ const BrewItem = createClass({
 			});
 	},
 
+	updateFilter : function(type, term){
+		this.props.updateListFilter(type, term);
+	},
+
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
@@ -109,6 +114,9 @@ const BrewItem = createClass({
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
 			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
+			brew.tags.sort((a, b)=>{
+				return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+			});
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 		const authors = brew.authors.length > 0 ? brew.authors : 'No authors';
@@ -131,24 +139,17 @@ const BrewItem = createClass({
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
 						})}
 					</div>
 				</> : <></>
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
-				<i className='fas fa-user'/> {Array.isArray(authors) ? (
-  					<span>
-    					{authors.map((author, index) => (
-      					<span key={index}>
-        					<a href={`/share/${author}`}>{author}</a>
-        					{index < authors.length - 1 && ', '}
-      					</span>
-    					))}
-  					</span>
-					) : (
-  					<span>{authors}</span>
-					)}
+					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
+  					<>
+    					<a key={index} href={`/user/${author}`}>{author}</a>
+    					{index < brew.authors.length - 1 && ', '}
+  					</>))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -63,6 +63,41 @@
 		white-space: nowrap;
 		display: inline-block;
 		font-weight: bold;
+		border-color: currentColor;
+		cursor : pointer;
+		&:before {
+			font-family: 'Font Awesome 5 Free';
+			font-size: 12px;
+			margin-right: 3px;
+		}
+		&.type {
+			background-color: #0080003b;
+			color: #008000;
+			&:before{
+				content: '\f0ad';
+			}
+		}
+		&.group {
+			background-color: #5050503b;
+			color: #000000;
+			&:before{
+				content: '\f500';
+			}
+		}
+		&.meta {
+			background-color: #0000803b;
+			color: #000080;
+			&:before{
+				content: '\f05a';
+			}
+		}
+		&.system {
+			background-color: #8000003b;
+			color: #800000;
+			&:before{
+				content: '\f518';
+			}
+		}
 	}
 	&:hover{
 		.links{

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -36,6 +36,7 @@ const ListPage = createClass({
 
 		return {
 			filterString   : this.props.query?.filter || '',
+			filterTags     : [],
 			sortType       : this.props.query?.sort || null,
 			sortDir        : this.props.query?.dir || null,
 			query          : this.props.query,
@@ -82,7 +83,7 @@ const ListPage = createClass({
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
 		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
 		});
 	},
 
@@ -136,13 +137,33 @@ const ListPage = createClass({
 		return;
 	},
 
-	updateUrl : function(filterTerm, sortType, sortDir){
+	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
 		urlParams.set('sort', sortType);
 		urlParams.set('dir', sortDir);
 
+		let filterTags = urlParams.getAll('tag');
+		if(filterTag != '') {
+			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+				filterTags.push(filterTag);
+			} else {
+				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+			}
+		}
+		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
+		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+
+		this.setState({
+			filterTags
+		});
+
 		if(!filterTerm)
 			urlParams.delete('filter');
 		else
@@ -166,6 +187,16 @@ const ListPage = createClass({
 		</div>;
 	},
 
+	renderTagsOptions : function(){
+		if(this.state.filterTags?.length == 0) return;
+		return <div className='tags-container'>
+			{_.map(this.state.filterTags, (tag, idx)=>{
+				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
+			})}
+		</div>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<h6>Sort by :</h6>
@@ -176,9 +207,6 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
-
-
-
 		</div>;
 	},
 
@@ -186,14 +214,28 @@ const ListPage = createClass({
 		const testString = _.deburr(this.state.filterString).toLowerCase();
 
 		brews = _.filter(brews, (brew)=>{
+			// Filter by user entered text
 			const brewStrings = _.deburr([
 				brew.title,
 				brew.description,
 				brew.tags].join('\n')
 				.toLowerCase());
 
-			return brewStrings.includes(testString);
+			const filterTextTest = brewStrings.includes(testString);
+
+			// Filter by user selected tags
+			let filterTagTest = true;
+			if(this.state.filterTags.length > 0){
+				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
+					return brew.tags.findIndex((brewTag)=>{
+						return brewTag.toLowerCase() == tag.toLowerCase();
+					}) >= 0;
+				});
+			}
+
+			return filterTextTest && filterTagTest;
 		});
+
 		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
@@ -220,10 +262,11 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
+			<link href='/themes/V3/Blank/style.css' type="text/css" rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type="text/css" rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -53,7 +53,7 @@
 			}
 		}
 	}
-	.sort-container{
+	.sort-container {
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -125,4 +125,66 @@
 
 
 	}
+	.tags-container {
+		height             : 30px;
+		background-color   : #555;
+		border-top         : 1px solid #666;
+		border-bottom      : 1px solid #666;
+		color              : white;
+		display            : flex;
+		justify-content    : center;
+		align-items        : center;
+		column-gap         : 15px;
+		row-gap            : 5px;
+		flex-wrap          : wrap;
+		span {
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			border         : 1px solid;
+			border-radius  : 3px;
+			padding        : 3px;
+			cursor         : pointer;
+			color: #dfdfdf;
+			&:before {
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-right: 3px;
+			}
+			&:after {
+				content: '\f00d';
+				font-family: 'Font Awesome 5 Free';
+				font-size: 12px;
+				margin-left: 3px;
+			}
+			&.type {
+				background-color: #008000;
+				border-color: #00a000;
+				&:before{
+					content: '\f0ad';
+				}
+			}
+			&.group {
+				background-color: #505050;
+				border-color: #000000;
+				&:before{
+					content: '\f500';
+				}
+			}
+			&.meta {
+				background-color: #000080;
+				border-color: #0000a0;
+				&:before{
+					content: '\f05a';
+				}
+			}
+			&.system {
+				background-color: #800000;
+				border-color: #a00000;
+				&:before{
+					content: '\f518';
+				}
+			}
+		}
+	}
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -113,7 +113,7 @@ const EditPage = createClass({
 			brew              : { ...prevState.brew, text: text },
 			isPending         : true,
 			htmlErrors        : htmlErrors,
-			currentEditorPage : this.refs.editor.getCurrentPage()
+			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -122,6 +122,16 @@ const errorIndex = (props)=>{
 		An error occurred while attempting to remove the user from the Homebrewery document author list!
 		
 		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Brew locked by Administrators error
+		'100' : dedent`
+		## This brew has been locked.
+		
+		Please contact the Administrators to unlock this document.
+		
+		**Brew ID:**  ${props.brew.brewId}
+		
+		**Brew Title:** ${props.brew.brewTitle}`,
 	};
 };
 

client/homebrew/pages/homePage/homePage.jsx

@@ -31,9 +31,10 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew        : this.props.brew,
-			welcomeText : this.props.brew.text,
-			error       : undefined
+			brew              : this.props.brew,
+			welcomeText       : this.props.brew.text,
+			error             : undefined,
+			currentEditorPage : 0
 		};
 	},
 	handleSave : function(){
@@ -53,7 +54,8 @@ const HomePage = createClass({
 	},
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text }
+			brew              : { ...prevState.brew, text: text },
+			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 	},
 	renderNavbar : function(){
@@ -85,7 +87,12 @@ const HomePage = createClass({
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						currentEditorPage={this.state.currentEditorPage}
+					/>
 				</SplitPane>
 			</div>
 

client/homebrew/pages/homePage/welcome_msg.md

@@ -143,6 +143,7 @@ Much nicer than `<br><br><br><br><br>`
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
 
+\column
 ### Tables
 Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
 

client/homebrew/pages/newPage/newPage.jsx

@@ -38,11 +38,12 @@ const NewPage = createClass({
 		const brew = this.props.brew;
 
 		return {
-			brew       : brew,
-			isSaving   : false,
-			saveGoogle : (global.account && global.account.googleId ? true : false),
-			error      : null,
-			htmlErrors : Markdown.validate(brew.text)
+			brew              : brew,
+			isSaving          : false,
+			saveGoogle        : (global.account && global.account.googleId ? true : false),
+			error             : null,
+			htmlErrors        : Markdown.validate(brew.text),
+			currentEditorPage : 0
 		};
 	},
 
@@ -104,8 +105,9 @@ const NewPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -220,7 +222,15 @@ const NewPage = createClass({
 						onMetaChange={this.handleMetaChange}
 						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} lang={this.state.brew.lang} errors={this.state.htmlErrors}/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						theme={this.state.brew.theme}
+						errors={this.state.htmlErrors}
+						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
+					/>
 				</SplitPane>
 			</div>
 		</div>;

client/homebrew/pages/printPage/printPage.jsx

@@ -21,7 +21,8 @@ const PrintPage = createClass({
 			brew  : {
 				text     : '',
 				style    : '',
-				renderer : 'legacy'
+				renderer : 'legacy',
+				lang     : ''
 			}
 		};
 	},
@@ -32,7 +33,8 @@ const PrintPage = createClass({
 				text     : this.props.brew.text     || '',
 				style    : this.props.brew.style    || undefined,
 				renderer : this.props.brew.renderer || 'legacy',
-				theme    : this.props.brew.theme    || '5ePHB'
+				theme    : this.props.brew.theme    || '5ePHB',
+				lang	 : this.props.brew.lang     || 'en'
 			}
 		};
 	},
@@ -49,7 +51,8 @@ const PrintPage = createClass({
 						text     : brewStorage,
 						style    : styleStorage,
 						renderer : metaStorage?.renderer || 'legacy',
-						theme    : metaStorage?.theme    || '5ePHB'
+						theme    : metaStorage?.theme    || '5ePHB',
+						lang	 : metaStorage?.lang	 || 'en'
 					}
 				};
 			});
@@ -93,14 +96,14 @@ const PrintPage = createClass({
 
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
-			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+			<link href={`/themes/${rendererPath}/Blank/style.css`} type="text/css" rel='stylesheet'/>
 			{baseThemePath &&
-				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type="text/css" rel='stylesheet'/>
 			}
-			<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+			<link href={`/themes/${rendererPath}/${themePath}/style.css`} type="text/css" rel='stylesheet'/>
 			{/* Apply CSS from Style tab */}
 			{this.renderStyle()}
-			<div className='pages' ref='pages'>
+			<div className='pages' ref='pages' lang={this.state.brew.lang}>
 				{this.renderPages()}
 			</div>
 		</div>;