Cat Front-end

VueJs single page application that connects to modified matecat api.

Project setup

1. Run 'npm install' to install required npm packages

2. Run 'npm run build.wc' to build web component in dist folder

3. Use built package to integrate in other projects

Project local linking

For local development and testing of the cat-tool package, follow these steps to set up live updates:

1. Execute the command npm run build:watch to initiate the watch mode for building. This will automatically rebuild the package when changes are detected.

2. Navigate to the dist directory and execute npm link. This command creates a symbolic link for the cat-tool package that can be used in other projects.

3. In any project where you wish to use the locally developed cat-tool, run the command npm link @tilde-nlp/cat-tool. This links the local version of cat-tool to your project.

4. After setting up the link, any modifications made to cat-tool and subsequently recompiled will reflect in the project where it's linked.

Build web component

npm run build.wc

Generate inline svg icons

npm run svg.generate

Customize configuration

See Configuration Reference.

Project description

Entry

Since project is built as web component, the main entry for webpack is App.vue file. It takes parameters from html element, creates app configuration, registers global components and initializes app. This app uses Vuex for state management. When App.vue has set up all configurations, it will call states init method and try to get authorized profile. If authorization fails, app will redirect to configured login url.

Basic views

Vue router uses 3 main pages:

1. Dashboard.vue - contains user file list and button for navigating to file upload

2. FileUpload.vue - contains file uploader screen

3. Translator.vue - contains the actual CAT tool

Components

Components folder contains both general components and specific components for file list and translator

1. Checkbox.vue - is used in stead of regular html checkboxes to style them using svg files in one place and then reuse

2. Dropdown.vue - same reason as checkbox, style them once and reuse

3. HugoSelect.vue - is used for specific dropdown in translator for file download and pre-translate options

4. SettingsPanel.vue - is used to encapsulate settings in translator component

5. WelcomeScreen.vue - component for first time users to show welcome message in case of empty file list

File list

1. FileListContainer.vue - houses currently selected file list with controls for each specific file

2. FileListPager.vue - contains controls for switching currently selected files in a list

3. FileListSelector.vue - contains upload form for new files aka file uploader

Translator

Contains all components that build up the actual CAT tool

1. TranslatorAssistant.vue - Contains all the controls on the right side of screen, including domain selector, suggestions, term lookup, shortcuts and comments

2. TranslatorEditor.vue - contains single text block editor field (either source block or target block), that handles input, tag visualization, in-text navigation

3. TranslatorSegment.vue - contains each separate segments, including source and target editor, segment edit type flag and number

4. TranslatorToolbox.vue - contains user controls above segment list

Axios

Axios folder contains functions to call matcat back-end api.

1. base.js - adds request interceptor to add JWT token authorization to every request
2. form-generator.js - contains method to build html form from given object with data
3. Rest of files contains actuals calls to back-end grouped by domain

Router

Contains file that defines all available routes in application. No guards are used because every request is authorized in back-end.

Vuex

Vuex state manager See Vuex Reference.

Utils

Contains helper methods for cookie manipulations, data converters, html <=> xliff converters and dom manipulations

Assets

1. css - all css is written in less and is separated into files based on domain, then everything is included in entry file cat.less to be built with webpack

2. svg files - raw svg icons are stored in root/svg folder and using npm run svg.generate can be turned into inline styles for more flexible manipulations, build inline svg files are stored in root/src/assets/svg folder

Localization

Localization files are stored in root/lang folder, in separate folders for each language, further split into multiple files by domain. App.vue file contains setUiLang() method that is used to set language from external application, like TildeMT angular website.

Configuration

When integrating with cat-tool, it exposes numerous configuration values

1. apiVersion - ["", "2"] - api version to use to connect to backend
2. dataApiUrl - url to cat-tool back end api
3. dataSystemListApiUrl - url to system list getter
4. dataTermUrl - term portal url template ("{term}", "{srcLang}", "{trgLang}" in url is replaced by actual values)
5. dataSystemAppId - appId to use when making requests to TildeMT infrastructure
6. dataSystemNameType - what type of system domain name to use
7. dataInFullWidth - flag to determine if actual cat-tool needs to be opened in full width mode or not
8. dataSupportedLanguages - define which languages to show during new file upload
9. dataDefaultFrom - default From language in file upload screen
10. dataDefaultTo - default To language in file upload screen
11. dataHideUpdateOption - show/hide Update Translation option checkbox in settings panel, default false
12. dataFileSizeLimitInfo - info for upload error if file size is too big
13. dataTmHelpUrl - url in info msg if no tm are saved
14. dataTimeSpent - show spent time, default false
15. dataTimeRemaining - show remaining time, default false
16. dataDisplayMtDropdown - set this to false in case you want to hide MT configuration dropdown
17. dataShowTranslatorToolboxBackButton - set this to false in case you want to hide Back button on Translator Toolbox page
18. dataAllRouterPathsAllowed - set this to false to disallow to upload and dashboard page navigation

Events

On app load eventListener 'cat-go-to-start' is added. App is navigated to main view (dashboard) on event.

On Dashborad view open 'cat-dashboard-open' event is dispatched.

On Translator view open 'cat-file-open' event is dispatched, event.detail contains opened file name.

On HTTP request error 'cat-http-error' event is dispatched if response contains status code. event.detail contains HTTP response status code.