Further work on moderation and localization

App_LocalResources/ClientResources.resx

@@ -120,39 +120,84 @@
   <data name="Accept" xml:space="preserve">
     <value>Accept</value>
   </data>
+  <data name="All" xml:space="preserve">
+    <value>All</value>
+  </data>
   <data name="At" xml:space="preserve">
     <value>At</value>
   </data>
   <data name="By" xml:space="preserve">
     <value>By</value>
   </data>
+  <data name="Cancel" xml:space="preserve">
+    <value>Cancel</value>
+  </data>
+  <data name="Classes" xml:space="preserve">
+    <value>Classes</value>
+  </data>
   <data name="Close" xml:space="preserve">
     <value>Close</value>
   </data>
   <data name="Code" xml:space="preserve">
     <value>Code</value>
   </data>
+  <data name="Codeblocks" xml:space="preserve">
+    <value>Codeblocks</value>
+  </data>
   <data name="Compare" xml:space="preserve">
     <value>Compare</value>
   </data>
+  <data name="Created" xml:space="preserve">
+    <value>Created</value>
+  </data>
   <data name="Current" xml:space="preserve">
     <value>Current</value>
   </data>
+  <data name="Declaration" xml:space="preserve">
+    <value>Declaration</value>
+  </data>
   <data name="Deprecated" xml:space="preserve">
     <value>Deprecated</value>
   </data>
+  <data name="DeprecatedIn" xml:space="preserve">
+    <value>Deprecated In</value>
+  </data>
   <data name="Description" xml:space="preserve">
     <value>Description</value>
   </data>
+  <data name="DisappearedIn" xml:space="preserve">
+    <value>Disappeared In</value>
+  </data>
   <data name="Documentation" xml:space="preserve">
     <value>Documentation</value>
   </data>
+  <data name="File" xml:space="preserve">
+    <value>File</value>
+  </data>
   <data name="Files" xml:space="preserve">
     <value>Files</value>
   </data>
+  <data name="FirstDetected" xml:space="preserve">
+    <value>First Detected</value>
+  </data>
   <data name="Item" xml:space="preserve">
     <value>Item</value>
   </data>
+  <data name="LastModified" xml:space="preserve">
+    <value>Last Modified</value>
+  </data>
+  <data name="Lines" xml:space="preserve">
+    <value>Lines</value>
+  </data>
+  <data name="LoadMore" xml:space="preserve">
+    <value>Load More</value>
+  </data>
+  <data name="Members" xml:space="preserve">
+    <value>Members</value>
+  </data>
+  <data name="Namespaces" xml:space="preserve">
+    <value>Namespaces</value>
+  </data>
   <data name="Process" xml:space="preserve">
     <value>Process</value>
   </data>
@@ -168,7 +213,13 @@
   <data name="Removed" xml:space="preserve">
     <value>Removed</value>
   </data>
+  <data name="Save" xml:space="preserve">
+    <value>Save</value>
+  </data>
   <data name="Uploading" xml:space="preserve">
     <value>Uploading ...</value>
   </data>
+  <data name="Version" xml:space="preserve">
+    <value>Version</value>
+  </data>
 </root>

App_LocalResources/SharedResources.resx

@@ -120,6 +120,9 @@
   <data name="Deprecated.Text" xml:space="preserve">
     <value>Deprecated</value>
   </data>
+  <data name="Moderate.Text" xml:space="preserve">
+    <value>Moderate</value>
+  </data>
   <data name="Return.Text" xml:space="preserve">
     <value>Return</value>
   </data>

Views/Documentation/Moderate.cshtml

@@ -10,6 +10,7 @@
      data-tabid="@Dnn.ActiveModule.TabID"
      data-resources="@SerializedResources()"
      data-security="@(Newtonsoft.Json.JsonConvert.SerializeObject(ApiBrowserModuleContext.Security))"
+     data-documentation-link="@Url.Action("Edit", "Documentation")"
      >
 </div>
 

js/src/ComponentLoader.tsx

@@ -46,6 +46,7 @@ export class ComponentLoader {
       var moduleId = $(el).data('moduleid');
       ReactDOM.render(<ModerationScreen
         module={AppManager.Modules.Item(moduleId.toString())}
+        documentationLink={$(el).data('documentation-link')}
         />, el);
     });
 

js/src/Components/Browser/Browser.tsx

@@ -175,7 +175,23 @@ export default class Browser extends React.Component<IBrowserProps, IBrowserStat
         });
     }
     private editMemberDescription(memberId: number, newDescription: string): void {
-        //
+        this.props.module.service.saveMemberDescription(memberId, newDescription, (member: Models.IMember) => {
+            var apiClass = this.state.selectedClass;
+            var newClassList = this.state.classes.map(c => {
+                if (c.ClassId == member.ClassId) {
+                    var newMembers = (c.Members as Models.IMember[]).map(m => {
+                        return m.MemberId == member.MemberId ? member : m;
+                    });
+                    c.Members = newMembers;
+                    apiClass = c;
+                }
+                return c;
+            });
+            this.setState({
+                selectedClass: apiClass,
+                classes: newClassList
+            });
+        });
     }
     private editClassDescription(classId: number, newDescription: string): void {
         this.props.module.service.saveClassDescription(classId, newDescription, (apiClass: Models.IApiClass) => {

js/src/Components/Browser/ClassDetails.tsx

@@ -19,7 +19,7 @@ export default class ClassDetails extends React.Component<IClassDetailsProps> {
         declaration: HTMLElement;
     }
     componentDidUpdate(prevProps: IClassDetailsProps) {
-      hljs.highlightBlock(this.refs.declaration);
+        hljs.highlightBlock(this.refs.declaration);
     }
     public render(): JSX.Element {
         var props = [];
@@ -57,19 +57,19 @@ export default class ClassDetails extends React.Component<IClassDetailsProps> {
                     <dd>
                         {this.props.apiclass.ComponentName}
                     </dd>
-                    <dt>First detected:</dt>
+                    <dt>{this.props.module.resources.FirstDetected}:</dt>
                     <dd>
                         {this.props.apiclass.AppearedInVersion}
                     </dd>
                     {props}
                 </dl>
-                <h4>Description</h4>
+                <h4>{this.props.module.resources.Description}</h4>
                 <EditableText module={this.props.module} element={this.props.apiclass as Models.IClassOrMember}
                     update={(description) => this.props.updateDescription(this.props.apiclass.ClassId, description)} />
-                <h4>Declaration</h4>
+                <h4>{this.props.module.resources.Declaration}</h4>
                 <pre><code className="cs" ref="declaration">{this.props.apiclass.Declaration}</code></pre>
                 {members}
-                <h4>Documentation {docedit}</h4>
+                <h4>{this.props.module.resources.Documentation} {docedit}</h4>
                 {documentation}
             </div>
         );

js/src/Components/Browser/MemberDetails.tsx

@@ -48,11 +48,11 @@ export default class MemberDetails extends React.Component<IMemberDetailsProps>
         }
         var props = [];
         if (this.props.member.DeprecatedInVersion) {
-            props.push(<dt className="red">Deprecated in:</dt>);
+            props.push(<dt className="red">{this.props.module.resources.DeprecatedIn}:</dt>);
             props.push(<dd className="red">{this.props.apiclass.DeprecatedInVersion}</dd>);
         }
         if (this.props.member.DisappearedInVersion) {
-            props.push(<dt className="red">Disappeared in:</dt>);
+            props.push(<dt className="red">{this.props.module.resources.DisappearedIn}:</dt>);
             props.push(<dd className="red">{this.props.member.DisappearedInVersion}</dd>);
         }
         var deprecation = this.props.member.DeprecationMessage == undefined ? this.props.apiclass.DeprecationMessage == undefined ? null : (
@@ -97,28 +97,28 @@ export default class MemberDetails extends React.Component<IMemberDetailsProps>
                     <dd>
                         {this.props.member.ComponentName}
                     </dd>
-                    <dt>First detected:</dt>
+                    <dt>{this.props.module.resources.FirstDetected}:</dt>
                     <dd>
                         {this.props.member.AppearedInVersion}
                     </dd>
                     {props}
-                    <dt>Codeblocks:</dt>
+                    <dt>{this.props.module.resources.Codeblocks}:</dt>
                     <dd>
                         {this.props.member.CodeBlockCount}
                     </dd>
                 </dl>
-                <h4>Description</h4>
+                <h4>{this.props.module.resources.Description}</h4>
                 <EditableText module={this.props.module} element={this.props.member as Models.IClassOrMember}
                     update={(description) => this.props.updateDescription(this.props.member.MemberId, description)} />
-                <h4>Declaration</h4>
+                <h4>{this.props.module.resources.Declaration}</h4>
                 <pre><code className="cs" ref="declaration">{this.props.member.Declaration}</code></pre>
-                <h4>Codeblocks</h4>
+                <h4>{this.props.module.resources.Codeblocks}</h4>
                 <table className="table">
                     <thead>
                         <tr>
-                            <th>Version</th>
-                            <th>File</th>
-                            <th>Lines</th>
+                            <th>{this.props.module.resources.Version}</th>
+                            <th>{this.props.module.resources.File}</th>
+                            <th>{this.props.module.resources.Lines}</th>
                             <th></th>
                         </tr>
                     </thead>
@@ -127,7 +127,7 @@ export default class MemberDetails extends React.Component<IMemberDetailsProps>
                     </tbody>
                 </table>
                 <CodeBlock ref="codeblock" module={this.props.module} />
-                <h4>Documentation {docedit}</h4>
+                <h4>{this.props.module.resources.Documentation} {docedit}</h4>
                 {documentation}
             </div>
         );

js/src/Components/Browser/MemberList.tsx

@@ -12,7 +12,7 @@ export default class MemberList extends React.Component<IMemberListProps> {
     public render(): JSX.Element {
         return (
             <div>
-                <h4>Members</h4>
+                <h4>{this.props.module.resources.Members}</h4>
                 <MemberSublist module={this.props.module} title="Constructors" members={this.props.members} memberType={0} changeSelection={(a, b) => this.props.changeSelection(a, b)} />
                 <MemberSublist module={this.props.module} title="Fields" members={this.props.members} memberType={2} changeSelection={(a, b) => this.props.changeSelection(a, b)} />
                 <MemberSublist module={this.props.module} title="Properties" members={this.props.members} memberType={3} changeSelection={(a, b) => this.props.changeSelection(a, b)} />

js/src/Components/Browser/NamespaceDetails.tsx

@@ -32,7 +32,7 @@ export default class NamespaceDetails extends React.Component<INamespaceDetailsP
             <div>
                 <h2>{this.props.namespace.NamespaceName} Namespace</h2>
                 <p>{this.props.namespace.Description}</p>
-                <h3>Classes</h3>
+                <h3>{this.props.module.resources.Classes}</h3>
                 <table className="table">
                     <tbody>
                         {classRows}

js/src/Components/ClassesAndNamespaces/Grid.tsx

@@ -129,18 +129,18 @@ export default class Grid extends React.Component<IGridProps, IGridState> {
             );
         });
         var loadMore = this.state.loading || this.state.lastPage ? null : (
-            <div ref="test" className="btn btn-default btn-block" onClick={e => this.loadMore()}>Load More</div>
+            <div ref="test" className="btn btn-default btn-block" onClick={e => this.loadMore()}>{this.props.module.resources.LoadMore}</div>
         );
         return (
             <div>
                 <div className="row">
                     <div className="col-sm-4 listoptions">
                         <input type="radio" name="cl" value="all" checked={this.state.classes && this.state.namespaces} onChange={e => this.changeType('all')} />
-                        <span>All</span>
+                        <span>{this.props.module.resources.All}</span>
                         <input type="radio" name="cl" value="class" checked={this.state.classes && !this.state.namespaces} onChange={e => this.changeType('class')} />
-                        <span>Classes</span>
+                        <span>{this.props.module.resources.Classes}</span>
                         <input type="radio" name="cl" value="namespace" checked={!this.state.classes && this.state.namespaces} onChange={e => this.changeType('namespace')} />
-                        <span>Namespaces</span>
+                        <span>{this.props.module.resources.Namespaces}</span>
                     </div>
                     <div className="col-sm-8">
                         <div className="input-group">

js/src/Components/ClassesAndNamespaces/GridRow.tsx

@@ -86,8 +86,8 @@ export default class GridRow extends React.Component<IGridRowProps, IGridRowStat
                     </textarea>
                     <br />
                     <div className="text-right">
-                        <a href="#" className="btn btn-default" onClick={e => this.cancel(e)}>Cancel</a>
-                        <a href="#" className="btn btn-primary" onClick={e => this.save(e)}>Save</a>
+                        <a href="#" className="btn btn-default" onClick={e => this.cancel(e)}>{this.props.module.resources.Cancel}</a>
+                        <a href="#" className="btn btn-primary" onClick={e => this.save(e)}>{this.props.module.resources.Save}</a>
                     </div>
                 </td>
             </tr>

js/src/Components/Editor/DocumentationEditor.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as Models from '../../Models/';
 import DocumentationList from './DocumentationList';
+import Viewer from './Viewer';
 const ReactMarkdown = require('react-markdown');
 
 interface IDocumentationEditorProps {
@@ -19,6 +20,7 @@ interface IDocumentationEditorState {
 export default class DocumentationEditor extends React.Component<IDocumentationEditorProps, IDocumentationEditorState> {
 
     refs: {
+        viewer: Viewer;
     }
 
     constructor(props: IDocumentationEditorProps) {
@@ -118,6 +120,7 @@ export default class DocumentationEditor extends React.Component<IDocumentationE
                             copy={d => this.copy(d)}
                             delete={d => this.delete(d)}
                             setLastVersion={d => this.setCrtVersion(d)}
+                            show={d => this.refs.viewer.show(d)}
                         />
                     </div>
                 </div>
@@ -137,6 +140,7 @@ export default class DocumentationEditor extends React.Component<IDocumentationE
                     <a href="#" className="btn btn-primary"
                         onClick={e => this.save(e)}>Save</a>
                 </div>
+                <Viewer ref="viewer" module={this.props.module} />
             </div>
         );
     }

js/src/Components/Editor/DocumentationList.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as Models from '../../Models/';
+import * as moment from 'moment';
 
 interface IDocumentationListProps {
     module: Models.IAppModule;
@@ -8,6 +9,7 @@ interface IDocumentationListProps {
     copy: (d: Models.IDocumentation) => void;
     delete: (d: Models.IDocumentation) => void;
     setLastVersion: (d: Models.IDocumentation) => void;
+    show: (d: Models.IDocumentation) => void;
 };
 
 export default class DocumentationList extends React.Component<IDocumentationListProps> {
@@ -38,12 +40,17 @@ export default class DocumentationList extends React.Component<IDocumentationLis
                     <i className="glyphicon glyphicon-remove"></i></a>
             ) : null;
             return (
-                <tr>
+                <tr key={d.DocumentationId}>
                     <td>{d.DocumentationId}</td>
-                    <td>{d.CreatedOnDate}</td>
+                    <td>{moment(d.CreatedOnDate).format('l')}</td>
                     <td>{d.CreatedByUserDisplayName}</td>
-                    <td>{d.LastModifiedOnDate}</td>
+                    <td>{moment(d.LastModifiedOnDate).format('l')}</td>
                     <td>{d.LastModifiedByUserDisplayName}</td>
+                    <td style={btncol}>
+                        <a href="#" className="btn btn-info"
+                            onClick={e => { e.preventDefault(); this.props.show(d) }}>
+                            <i className="glyphicon glyphicon-eye-open"></i></a>
+                    </td>
                     <td style={btncol}>{editbtn}</td>
                     <td style={btncol}>{copybtn}</td>
                     <td style={btncol}>{deletebtn}</td>
@@ -56,10 +63,10 @@ export default class DocumentationList extends React.Component<IDocumentationLis
                 <thead>
                     <tr>
                         <th>ID</th>
-                        <th>Created</th>
-                        <th>By</th>
-                        <th>Last Modified</th>
-                        <th>By</th>
+                        <th>{this.props.module.resources.Created}</th>
+                        <th>{this.props.module.resources.By}</th>
+                        <th>{this.props.module.resources.LastModified}</th>
+                        <th>{this.props.module.resources.By}</th>
                         <th></th>
                         <th></th>
                         <th></th>