@crowdin/app-project-module 0.29.5 → 0.30.0

package/out/handlers/crowdin-update.js

@@ -11,9 +11,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("../util");
 const defaults_1 = require("../util/defaults");
+const synced_files_1 = require("../util/synced-files");
 function handle(config, integration) {
     return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c;
         const projectId = req.crowdinContext.jwtPayload.context.project_id || (req === null || req === void 0 ? void 0 : req.body.projectId);
         const uploadTranslations = req.query.uploadTranslations === 'true' || ((_a = req.body) === null || _a === void 0 ? void 0 : _a.uploadTranslations);
         (0, util_1.log)(`Updating crowdin project ${projectId}`, config.logger);
@@ -27,10 +28,18 @@ function handle(config, integration) {
         }
         const result = yield integration.updateCrowdin(projectId, req.crowdinApiClient, req.integrationCredentials, req.body, rootFolder, req.integrationSettings, uploadTranslations);
         let message;
+        let fileIds;
         if ((0, util_1.isExtendedResultType)(result)) {
             message = result.message;
+            fileIds = result.syncedFiles;
         }
         res.send({ message });
+        if ((_c = integration.filtering) === null || _c === void 0 ? void 0 : _c.syncStatus) {
+            if (!fileIds) {
+                fileIds = req.body.map((file) => file.id);
+            }
+            (0, synced_files_1.createOrUpdateSyncedFiles)({ config, req, fileIds });
+        }
     }), config.onError);
 }
 exports.default = handle;

package/out/handlers/main.js

@@ -45,6 +45,7 @@ function handle(config, integration) {
         }
         options.infoModal = integration.infoModal;
         options.syncNewElements = integration.syncNewElements;
+        options.filtering = integration.filtering;
         options.withCronSync = integration.withCronSync;
         options.webhooks = integration.webhooks
             ? {

package/out/handlers/synced-files.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="qs" />
+import { Response } from 'express';
+import { Config } from '../models';
+export default function handle(config: Config): (req: import("express").Request<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>, res: Response<any, Record<string, any>>, next: Function) => void;

package/out/handlers/synced-files.js

@@ -0,0 +1,26 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const storage_1 = require("../storage");
+const util_1 = require("../util");
+function handle(config) {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        let fileIds = [];
+        (0, util_1.log)('Loading synced files', config.logger);
+        const syncedFiles = yield (0, storage_1.getStorage)().getSyncedFiles(req.crowdinContext.clientId, req.crowdinContext.crowdinId);
+        if (syncedFiles) {
+            fileIds = JSON.parse(syncedFiles.fileIds) || [];
+        }
+        (0, util_1.log)(`Returning synced files ${JSON.stringify(fileIds, null, 2)}`, config.logger);
+        res.send(fileIds);
+    }), config.onError);
+}
+exports.default = handle;

package/out/index.js

@@ -67,6 +67,7 @@ const subscription_info_1 = __importDefault(require("./handlers/subscription-inf
 const subscription_paid_1 = __importDefault(require("./handlers/subscription-paid"));
 const sync_settings_1 = __importDefault(require("./handlers/sync-settings"));
 const sync_settings_save_1 = __importDefault(require("./handlers/sync-settings-save"));
+const synced_files_1 = __importDefault(require("./handlers/synced-files"));
 const uninstall_1 = __importDefault(require("./handlers/uninstall"));
 const crowdin_client_1 = __importStar(require("./middlewares/crowdin-client"));
 const integration_credentials_1 = __importDefault(require("./middlewares/integration-credentials"));
@@ -145,6 +146,7 @@ function addCrowdinEndpoints(app, clientConfig) {
         app.post('/api/integration/update', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, integration_update_1.default)(config, integrationLogic));
         app.get('/api/sync-settings/:provider', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, sync_settings_1.default)(config));
         app.post('/api/sync-settings', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, sync_settings_save_1.default)(config, integrationLogic));
+        app.get('/api/synced-files', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, synced_files_1.default)(config));
         if (integrationLogic.oauthLogin) {
             app.get((0, defaults_1.getOauthRoute)(integrationLogic), (0, oauth_login_1.default)(config, integrationLogic));
             app.post('/api/oauth-url', json_response_1.default, (0, crowdin_client_1.default)(config, false, false), (0, oauth_url_1.default)(config, integrationLogic));

package/out/models/index.d.ts

@@ -254,6 +254,10 @@ export interface IntegrationLogic {
         crowdin: boolean;
         integration: boolean;
     };
+    filtering?: {
+        crowdinLanguages: boolean;
+        syncStatus: boolean;
+    };
     /**
      * Enable integration folder open event
      */
@@ -434,6 +438,7 @@ export interface ExtendedResult<T> {
     data?: T;
     message?: string;
     stopPagination?: boolean;
+    syncedFiles: string[];
 }
 export type TreeItem = File | Folder;
 /**
@@ -868,4 +873,15 @@ export interface UpdateCrowdinWebhookPayloadsArgs {
     webhookData: any;
     req: Request;
 }
+export interface CreateOrUpdateSyncedFilesArgs {
+    config: Config;
+    req: IntegrationRequest;
+    fileIds: string[];
+}
+export interface IntegrationSyncedFiles {
+    id: number;
+    fileIds?: any;
+    integrationId: string;
+    crowdinId: string;
+}
 export {};

package/out/static/css/styles.css

@@ -23,6 +23,12 @@
     margin-bottom: 10px;
 }
 
+.top-button {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+}
+
 .login {
     margin-bottom: 10px;
     overflow: unset;
@@ -65,6 +71,10 @@
     margin: 12px 0 12px 0;
 }
 
+#subscription-info .ce-alert {
+    margin-bottom: 12px;
+}
+
 .dismiss-alert {
     position: absolute;
     top: 0;

package/out/storage/index.d.ts

@@ -1,4 +1,4 @@
-import { Config, CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings, Provider } from '../models';
+import { Config, CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncedFiles, IntegrationSyncSettings, Provider } from '../models';
 export interface Storage {
     migrate(): Promise<void>;
     saveCrowdinCredentials(credentials: CrowdinCredentials): Promise<void>;
@@ -25,6 +25,9 @@ export interface Storage {
     saveFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: Provider): Promise<void>;
     updateFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: Provider): Promise<void>;
     getFilesSnapshot(integrationId: string, crowdinId: string, provider: Provider): Promise<IntegrationFilesSnapshot | undefined>;
+    saveSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    updateSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    getSyncedFiles(integrationId: string, crowdinId: string): Promise<IntegrationSyncedFiles | undefined>;
 }
 export declare function initialize(config: Config): Promise<void>;
 export declare function getStorage(): Storage;

package/out/storage/mysql.d.ts

@@ -1,5 +1,5 @@
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncedFiles, IntegrationSyncSettings } from '../models';
 export interface MySQLStorageConfig {
     uri?: string;
     host?: string;
@@ -42,4 +42,7 @@ export declare class MySQLStorage implements Storage {
     saveFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     updateFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     getFilesSnapshot(integrationId: string, crowdinId: string, provider: string): Promise<IntegrationFilesSnapshot | undefined>;
+    saveSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    updateSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    getSyncedFiles(integrationId: string, crowdinId: string): Promise<IntegrationSyncedFiles | undefined>;
 }

package/out/storage/mysql.js

@@ -114,6 +114,15 @@ class MySQLStorage {
                 provider       varchar(255) not null
             )
             `);
+            yield connection.execute(`
+            create table if not exists synced_files
+            (
+                id             int auto_increment primary key,
+                integration_id varchar(255) not null,
+                crowdin_id     varchar(255) not null,
+                file_ids       text
+            )
+            `);
         });
     }
     saveCrowdinCredentials(credentials) {
@@ -297,7 +306,7 @@ class MySQLStorage {
     saveSyncSettings(files, integrationId, crowdinId, type, provider) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.dbPromise;
-            yield this.executeQuery((connection) => connection.execute('INSERT INTO sync_settings(files, integration_id, crowdin_id, type, provider) VALUES (?, , ?, ?, ?)', [files, integrationId, crowdinId, type, provider]));
+            yield this.executeQuery((connection) => connection.execute('INSERT INTO sync_settings(files, integration_id, crowdin_id, type, provider) VALUES (?, ?, ?, ?, ?)', [files, integrationId, crowdinId, type, provider]));
         });
     }
     updateSyncSettings(files, integrationId, crowdinId, type, provider) {
@@ -336,5 +345,34 @@ class MySQLStorage {
             }));
         });
     }
+    saveSyncedFiles(fileIds, integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((connection) => connection.execute('INSERT INTO synced_files(file_ids, integration_id, crowdin_id) VALUES (?, ?, ?)', [
+                fileIds,
+                integrationId,
+                crowdinId,
+            ]));
+        });
+    }
+    updateSyncedFiles(fileIds, integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((connection) => connection.execute('UPDATE synced_files SET file_ids = ? WHERE integration_id = ? AND crowdin_id = ?', [
+                fileIds,
+                integrationId,
+                crowdinId,
+            ]));
+        });
+    }
+    getSyncedFiles(integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            return this.executeQuery((connection) => __awaiter(this, void 0, void 0, function* () {
+                const [rows] = yield connection.execute('SELECT id, file_ids as "fileIds", integration_id as "integrationId", crowdin_id as "crowdinId" FROM synced_files WHERE integration_id = ? AND crowdin_id = ?', [integrationId, crowdinId]);
+                return (rows || [])[0];
+            }));
+        });
+    }
 }
 exports.MySQLStorage = MySQLStorage;

package/out/storage/postgre.d.ts

@@ -1,6 +1,6 @@
 import { Client } from 'pg';
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncedFiles, IntegrationSyncSettings } from '../models';
 export interface PostgreStorageConfig {
     host?: string;
     connectionString?: string;
@@ -47,4 +47,7 @@ export declare class PostgreStorage implements Storage {
     saveFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     updateFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     getFilesSnapshot(integrationId: string, crowdinId: string, provider: string): Promise<IntegrationFilesSnapshot | undefined>;
+    saveSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    updateSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    getSyncedFiles(integrationId: string, crowdinId: string): Promise<IntegrationSyncedFiles | undefined>;
 }

package/out/storage/postgre.js

@@ -128,6 +128,15 @@ class PostgreStorage {
                 provider       varchar not null
             )
             `);
+            yield client.query(`
+            create table if not exists synced_files
+            (
+                id             serial primary key,
+                integration_id varchar not null,
+                crowdin_id     varchar not null,
+                file_ids       varchar
+            )
+            `);
         });
     }
     saveCrowdinCredentials(credentials) {
@@ -350,5 +359,34 @@ class PostgreStorage {
             }));
         });
     }
+    saveSyncedFiles(fileIds, integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((client) => client.query('INSERT INTO synced_files(file_ids, integration_id, crowdin_id) VALUES ($1, $2, $3)', [
+                fileIds,
+                integrationId,
+                crowdinId,
+            ]));
+        });
+    }
+    updateSyncedFiles(fileIds, integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            yield this.executeQuery((client) => client.query('UPDATE synced_files SET file_ids = $1 WHERE integration_id = $2 AND crowdin_id = $3', [
+                fileIds,
+                integrationId,
+                crowdinId,
+            ]));
+        });
+    }
+    getSyncedFiles(integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.dbPromise;
+            return this.executeQuery((client) => __awaiter(this, void 0, void 0, function* () {
+                const res = yield client.query('SELECT id, file_ids as "fileIds", integration_id as "integrationId", crowdin_id as "crowdinId" FROM synced_files WHERE integration_id = $1 AND crowdin_id = $2', [integrationId, crowdinId]);
+                return res === null || res === void 0 ? void 0 : res.rows[0];
+            }));
+        });
+    }
 }
 exports.PostgreStorage = PostgreStorage;

package/out/storage/sqlite.d.ts

@@ -1,5 +1,5 @@
 import { Storage } from '.';
-import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncSettings } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationFilesSnapshot, IntegrationSyncedFiles, IntegrationSyncSettings } from '../models';
 export interface SQLiteStorageConfig {
     dbFolder: string;
 }
@@ -41,4 +41,7 @@ export declare class SQLiteStorage implements Storage {
     saveFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     updateFilesSnapshot(files: any, integrationId: string, crowdinId: string, provider: string): Promise<void>;
     getFilesSnapshot(integrationId: string, crowdinId: string, provider: string): Promise<IntegrationFilesSnapshot | undefined>;
+    saveSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    updateSyncedFiles(fileIds: any, integrationId: string, crowdinId: string): Promise<void>;
+    getSyncedFiles(integrationId: string, crowdinId: string): Promise<IntegrationSyncedFiles | undefined>;
 }

package/out/storage/sqlite.js

@@ -185,6 +185,15 @@ class SQLiteStorage {
                 files          varchar     null,
                 provider       varchar not null
             );
+            `, []);
+                yield this._run(`
+            create table if not exists synced_files
+            (
+                id             integer not null primary key autoincrement,
+                integration_id varchar not null,
+                crowdin_id     varchar not null,
+                file_ids       varchar     null
+            );
             `, []);
                 this._res && this._res();
                 // TODO: temporary code
@@ -351,5 +360,27 @@ class SQLiteStorage {
             }
         });
     }
+    saveSyncedFiles(fileIds, integrationId, crowdinId) {
+        return this.run('INSERT INTO synced_files(file_ids, integration_id, crowdin_id) VALUES (?, ?, ?)', [
+            fileIds,
+            integrationId,
+            crowdinId,
+        ]);
+    }
+    updateSyncedFiles(fileIds, integrationId, crowdinId) {
+        return this.run('UPDATE synced_files SET file_ids = ? WHERE integration_id = ? AND crowdin_id = ?', [
+            fileIds,
+            integrationId,
+            crowdinId,
+        ]);
+    }
+    getSyncedFiles(integrationId, crowdinId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const row = yield this.get('SELECT id, file_ids as fileIds, integration_id as integrationId, crowdin_id as crowdinId FROM synced_files WHERE integration_id = ? AND crowdin_id = ?', [integrationId, crowdinId]);
+            if (row) {
+                return row;
+            }
+        });
+    }
 }
 exports.SQLiteStorage = SQLiteStorage;

package/out/util/synced-files.d.ts

@@ -0,0 +1,2 @@
+import { CreateOrUpdateSyncedFilesArgs } from '../models';
+export declare function createOrUpdateSyncedFiles(args: CreateOrUpdateSyncedFilesArgs): Promise<void>;

package/out/util/synced-files.js

@@ -0,0 +1,31 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOrUpdateSyncedFiles = void 0;
+const storage_1 = require("../storage");
+const index_1 = require("./index");
+function createOrUpdateSyncedFiles(args) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config, req } = args;
+        let fileIds = args.fileIds;
+        const existingFiles = yield (0, storage_1.getStorage)().getSyncedFiles(req.crowdinContext.clientId, req.crowdinContext.crowdinId);
+        if (existingFiles) {
+            fileIds = [...new Set([...JSON.parse(existingFiles.fileIds), ...fileIds])];
+            (0, index_1.log)(`Updating synced files ${JSON.stringify(fileIds, null, 2)}`, config.logger);
+            yield (0, storage_1.getStorage)().updateSyncedFiles(JSON.stringify(fileIds), req.crowdinContext.clientId, req.crowdinContext.crowdinId);
+        }
+        else {
+            (0, index_1.log)(`Saving synced files ${JSON.stringify(fileIds, null, 2)}`, config.logger);
+            yield (0, storage_1.getStorage)().saveSyncedFiles(JSON.stringify(fileIds), req.crowdinContext.clientId, req.crowdinContext.crowdinId);
+        }
+    });
+}
+exports.createOrUpdateSyncedFiles = createOrUpdateSyncedFiles;

package/out/views/main.handlebars

@@ -6,21 +6,36 @@
     <div class="i_w">
         <div class="top">
             {{#if checkSubscription}}
-                <crowdin-alert id="subscription-info" no-icon="true" type="warning" style="display: none;">
+                <crowdin-alert id="subscription-info" no-icon="true" type="warning" style="display: none; margin-bottom: 12px;">
                     <div class="box-center">
                         <p class="m-0"></p>
                         <crowdin-button class="ml-1" primary onclick="window.open(subscriptionLink,'_blank')">Subscribe</crowdin-button>
                     </div>
                 </crowdin-alert>
             {{/if}}
-            {{#if infoModal}}
-            <crowdin-button icon-before="info" onclick="infoModal.open();">{{infoModal.title}}</crowdin-button>
-            {{/if}}
-            {{#if configurationFields}}
-            <crowdin-button icon-before="settings" onclick="settingsModal.open();fillSettingsForm();">Settings</crowdin-button>
-            {{/if}}
-            <crowdin-button icon-before="account_circle" onclick="integrationLogout()">Log out</crowdin-button>
-            {{#if uploadTranslations}}
+            <div class="top-button">
+                {{#if filtering}}
+                    <div class="integration-filter">
+                        <crowdin-integration-filter
+                            {{#if filtering.syncStatus}}
+                            enable-sync-status-filter
+                            {{/if}}
+                            integration-logo="logo.png"
+                        ></crowdin-integration-filter>
+                    </div>
+                {{/if}}
+
+                <div>
+                    {{#if infoModal}}
+                        <crowdin-button icon-before="info" onclick="infoModal.open();">{{infoModal.title}}</crowdin-button>
+                    {{/if}}
+                    {{#if configurationFields}}
+                        <crowdin-button icon-before="settings" onclick="settingsModal.open();fillSettingsForm();">Settings</crowdin-button>
+                    {{/if}}
+                    <crowdin-button icon-before="account_circle" onclick="integrationLogout()">Log out</crowdin-button>
+                </div>
+            </div>
+                {{#if uploadTranslations}}
                 <crowdin-alert id="translation-info" no-icon="true" style="display: none;">
                     <div class="box-center">
                         <p class="info-text">
@@ -31,7 +46,7 @@
                     </div>
                     <crowdin-button onclick="closeAlert(this)" class="dismiss-alert" icon>close</crowdin-button>
                 </crowdin-alert>
-            {{/if}}
+                {{/if}}
         </div>
         <crowdin-simple-integration
                 {{#if syncNewElements.crowdin}}
@@ -248,6 +263,11 @@
     const appComponent = document.querySelector('crowdin-simple-integration');
     const subscriptionModal = document.getElementById('subscription-modal');
 
+    {{#if filtering}}
+    let syncedFiles = [];
+    const filterIntegration = document.querySelector('crowdin-integration-filter');
+    {{/if}}
+
     const folderType = '0';
     const fileType = '1';
     const branchType = '2';
@@ -297,10 +317,16 @@
             .then((res) => {
                 project = res;
                 appComponent.setCrowdinLanguagesData(project.targetLanguages)
+                {{#if filtering}}
+                    filterIntegration.setLanguages(project.targetLanguages)
+                {{/if}}
             })
             {{#or withCronSync webhooks}}
                 .then(() => getSyncSettings('crowdin'))
             {{/or}}
+            {{#if filtering}}
+                .then(() => getSyncedFiles())
+            {{/if}}
             .catch(e => catchRejection(e, 'Can\'t fetch Crowdin data'))
             .finally(() => (appComponent.setAttribute('is-crowdin-loading', false)));
     }
@@ -761,6 +787,34 @@
         }
         checkAlert(translationInfo);
     {{/if}}
+
+    {{#if filtering}}
+    document.body.addEventListener("integrationFilterChange", filterFiles);
+
+    function filterFiles(event) {
+        const filter = event.detail;
+
+        if (filter.languages) {
+            const languageIds = filter.languages === 'all' ? [] : [filter.languages];
+            appComponent.filterCrowdinFilesByLanguages(languageIds);
+        }
+        if (filter.sync) {
+            const fileId = filter.sync === 'all' ? [] : syncedFiles;
+            appComponent.filterIntegrationFilesByIds(fileId, filter.sync !== 'not_synced');
+        }
+    }
+
+    function getSyncedFiles() {
+        checkOrigin()
+            .then(restParams => fetch('/api/synced-files' + restParams))
+            .then(checkResponse)
+            .then((res) => {
+                syncedFiles = res;
+            })
+            .catch(e => catchRejection(e, 'Can\'t fetch file progress'));
+    }
+
+    {{/if}}
 </script>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.29.5",
+  "version": "0.30.0",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",