Merge pull request #1012 from mzimandl/improvements

Support for link template in matching docs + paginator as global component
czcorpus · Oct 22, 2021 · 2ca9def · 2ca9def
2 parents 65f3192 + 7b8a506
commit 2ca9def
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 157 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "ajv": "^8.6.3",
     "axios": "^0.23.0",
     "buffer": "^6.0.3",
-    "cnc-tskit": "^1.3.1",
+    "cnc-tskit": "^1.4.1",
     "cookie-parser": "^1.4.5",
     "d3": "^7.1.1",
     "express": "^4.17.1",

diff --git a/src/js/models/tiles/matchingDocs.ts b/src/js/models/tiles/matchingDocs.ts
@@ -46,4 +46,5 @@ export interface MatchingDocsModelState {
     searchAttrs:Array<string>|null;
     data:Array<DataRow>;
     minFreq:number;
+    linkTemplate:string;
 }
diff --git a/src/js/tiles/core/concordance/style.tsx b/src/js/tiles/core/concordance/style.tsx
@@ -201,25 +201,3 @@ export const Controls = styled.form`
         display: inline-block;
     }
 `;
-
-export const Paginator = styled.span`
-    a {
-        cursor: pointer;
-    }
-
-    a.disabled {
-        cursor: default;
-    }
-
-    .arrow {
-        width: 1em;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    input.page {
-        width: 3em;
-        margin-left: 0.3em;
-        margin-right: 0.3em;
-    }
-`;
diff --git a/src/js/tiles/core/concordance/views.tsx b/src/js/tiles/core/concordance/views.tsx
@@ -32,53 +32,7 @@ import * as S from './style';
 
 export function init(dispatcher:IActionDispatcher, ut:ViewUtils<GlobalComponents>, model:ConcordanceTileModel):TileComponent {
 
-    const globalCompontents = ut.getComponents();
-
-    // ------------------ <Paginator /> --------------------------------------------
-
-    const Paginator:React.FC<{
-        page:number;
-        numPages:number;
-        tileId:number;
-
-    }> = (props) => {
-
-        const handlePrevPage = () => {
-            if (props.page > 1) {
-                dispatcher.dispatch<typeof Actions.LoadPrevPage>({
-                    name: Actions.LoadPrevPage.name,
-                    payload: {
-                        tileId: props.tileId
-                    }
-                });
-            }
-        };
-
-        const handleNextPage = () => {
-            if (props.page < props.numPages) {
-                dispatcher.dispatch<typeof Actions.LoadNextPage>({
-                    name: Actions.LoadNextPage.name,
-                    payload: {
-                        tileId: props.tileId
-                    }
-                });
-            }
-        };
-
-        return (
-            <S.Paginator>
-                <a onClick={handlePrevPage} className={`${props.page === 1 ? 'disabled' : null}`}>
-                    <img className="arrow" src={ut.createStaticUrl(props.page === 1 ? 'triangle_left_gr.svg' : 'triangle_left.svg')}
-                        alt={ut.translate('global__img_alt_triable_left')} />
-                </a>
-                <input className="page" type="text" readOnly={true} value={props.page} />
-                <a onClick={handleNextPage} className={`${props.page === props.numPages ? 'disabled' : null}`}>
-                    <img className="arrow" src={ut.createStaticUrl(props.page === props.numPages ? 'triangle_right_gr.svg' : 'triangle_right.svg')}
-                        alt={ut.translate('global__img_alt_triable_right')} />
-                </a>
-            </S.Paginator>
-        );
-    };
+    const globalComponents = ut.getComponents();
 
     // ------------------ <ViewModeSwitch /> --------------------------------------------
 
@@ -147,11 +101,33 @@ export function init(dispatcher:IActionDispatcher, ut:ViewUtils<GlobalComponents
         currVisibleQueryIdx:number;
 
     }> = (props) => {
+        const handlePrevPage = () => {
+            if (props.currPage > 1) {
+                dispatcher.dispatch<typeof Actions.LoadPrevPage>({
+                    name: Actions.LoadPrevPage.name,
+                    payload: {
+                        tileId: props.tileId
+                    }
+                });
+            }
+        };
+
+        const handleNextPage = () => {
+            if (props.currPage < props.numPages) {
+                dispatcher.dispatch<typeof Actions.LoadNextPage>({
+                    name: Actions.LoadNextPage.name,
+                    payload: {
+                        tileId: props.tileId
+                    }
+                });
+            }
+        };
+
         return (
             <S.Controls className="cnc-form tile-tweak">
                 <fieldset>
                         <label>{ut.translate('concordance__page')}:{'\u00a0'}
-                        <Paginator page={props.currPage} numPages={props.numPages} tileId={props.tileId} />
+                            <globalComponents.Paginator page={props.currPage} numPages={props.numPages} onNext={handleNextPage} onPrev={handlePrevPage} />
                         </label>
                         <label title={props.viewModeEnabled ? null : ut.translate('global__func_not_avail')}>{ut.translate('concordance__view_mode')}:{'\u00a0'}
                             <ViewModeSwitch mode={props.viewMode} tileId={props.tileId} isEnabled={props.viewModeEnabled} />
@@ -340,7 +316,7 @@ export function init(dispatcher:IActionDispatcher, ut:ViewUtils<GlobalComponents
             const conc = this.props.concordances[this.props.visibleQueryIdx];
 
             return (
-                <globalCompontents.TileWrapper tileId={this.props.tileId} isBusy={this.props.isBusy} error={this.props.error}
+                <globalComponents.TileWrapper tileId={this.props.tileId} isBusy={this.props.isBusy} error={this.props.error}
                         hasData={this.props.concordances.some(conc => conc.lines.length > 0)}
                         sourceIdent={{corp: this.props.corpname, subcorp: this.props.subcDesc}}
                         backlink={this.props.backlinks}
@@ -398,7 +374,7 @@ export function init(dispatcher:IActionDispatcher, ut:ViewUtils<GlobalComponents
                             </tbody>
                         </table>
                     </S.ConcordanceTileView>
-                </globalCompontents.TileWrapper>
+                </globalComponents.TileWrapper>
             );
         }
     }

diff --git a/src/js/tiles/core/matchingDocs/config-schema.json b/src/js/tiles/core/matchingDocs/config-schema.json
@@ -48,6 +48,9 @@
         "minFreq": {
             "type": "number"
         },
+        "linkTemplate": {
+            "type": "string"
+        },
         "tileType": {
             "description": "An identifier as defined by tiles configuration interface",
             "type": "string"

diff --git a/src/js/tiles/core/matchingDocs/index.ts b/src/js/tiles/core/matchingDocs/index.ts
@@ -35,6 +35,7 @@ export interface MatchingDocsTileConf extends TileConf {
     maxNumCategories:number;
     maxNumCategoriesPerPage:number;
     minFreq?:number;
+    linkTemplate?:string;
 }
 
 function getSearchAttrs(conf:MatchingDocsTileConf):Array<string> {
@@ -100,7 +101,8 @@ export class MatchingDocsTile implements ITileProvider {
                 maxNumCategories: conf.maxNumCategories || 20,
                 maxNumCategoriesPerPage: conf.maxNumCategoriesPerPage || 10,
                 backlink: null,
-                subqSyncPalette: false
+                subqSyncPalette: false,
+                linkTemplate: conf.linkTemplate,
             },
             queryMatches
         });

diff --git a/src/js/tiles/core/matchingDocs/model.ts b/src/js/tiles/core/matchingDocs/model.ts
@@ -21,8 +21,7 @@ import { concatMap } from 'rxjs/operators';
 
 import { IAppServices } from '../../../appServices';
 import { Actions as GlobalActions } from '../../../models/actions';
-import { ConcLoadedPayload } from '../concordance/actions';
-import { Actions, DataLoadedPayload } from './actions';
+import { Actions } from './actions';
 import { MatchingDocsModelState } from '../../../models/tiles/matchingDocs';
 import { MatchingDocsAPI } from '../../../api/abstract/matchingDocs';
 import { findCurrQueryMatch } from '../../../models/query';

diff --git a/src/js/tiles/core/matchingDocs/style.tsx b/src/js/tiles/core/matchingDocs/style.tsx
@@ -37,25 +37,3 @@ export const MatchingDocsTile = styled.div`
         min-width: 10%;
     }
 `;
-
-export const Paginator = styled.span`
-    a {
-        cursor: pointer;
-    }
-
-    a.disabled {
-        cursor: default;
-    }
-
-    .arrow {
-        width: 1em;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    input.page {
-        width: 3em;
-        margin-left: 0.3em;
-        margin-right: 0.3em;
-    }
-`;