From 12bab61ce2b9ee103e915580a7018ccac1efb7ba Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 May 2023 23:59:15 +0300 Subject: [PATCH] [DE mobile] Adding rename file --- apps/documenteditor/mobile/locale/en.json | 4 +- .../mobile/src/controller/Main.jsx | 2 + .../mobile/src/controller/Toolbar.jsx | 18 ++++- .../src/controller/settings/DocumentInfo.jsx | 70 ++++++++++++++++++- .../mobile/src/store/documentInfo.js | 9 ++- .../mobile/src/view/Toolbar.jsx | 53 +++++++++++++- .../mobile/src/view/settings/DocumentInfo.jsx | 4 +- .../mobile/src/view/settings/Settings.jsx | 7 +- 8 files changed, 153 insertions(+), 14 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 1034785623..b3343da09f 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -733,6 +733,8 @@ "stayButtonText": "Stay on this page", "textOk": "OK", "textSwitchedMobileView": "Switched to Mobile view", - "textSwitchedStandardView": "Switched to Standard view" + "textSwitchedStandardView": "Switched to Standard view", + "textRenameFile": "Rename File", + "textEnterNewFileName": "Enter a new file name" } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 3c35103d39..be4226fc3f 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -173,8 +173,10 @@ class MainController extends Component { // Document Info const storeDocumentInfo = this.props.storeDocumentInfo; + // this.document storeDocumentInfo.setDataDoc(this.document); + storeDocumentInfo.setDocInfo(docInfo); // Common.SharedSettings.set('document', data.doc); diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index e2eec7f0d5..f70489a92d 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -24,9 +24,9 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto const disabledEditControls = storeToolbarSettings.disabledEditControls; const disabledSettings = storeToolbarSettings.disabledSettings; const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights; - const docInfo = props.storeDocumentInfo; - const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : ''; - const docTitle = docInfo.dataDoc ? docInfo.dataDoc.title : ''; + const storeDocumentInfo = props.storeDocumentInfo; + const docExt = storeDocumentInfo.dataDoc ? storeDocumentInfo.dataDoc.fileType : ''; + const docTitle = storeDocumentInfo.dataDoc ? storeDocumentInfo.dataDoc.title : ''; const isAvailableExt = docExt && docExt !== 'oform'; useEffect(() => { @@ -205,6 +205,17 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto api.ChangeReaderMode(); } + const changeTitle = (name) => { + const api = Common.EditorApi.get(); + const docInfo = storeDocumentInfo.docInfo; + const title = `${name}.${docExt}`; + + storeDocumentInfo.changeTitle(title); + docInfo.put_Title(title); + storeDocumentInfo.setDocInfo(docInfo); + api.asc_setDocInfo(docInfo); + } + return ( ) })); diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx index 6f859d0513..5f77077c31 100644 --- a/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx @@ -1,7 +1,9 @@ import React, { Component } from "react"; import { observer, inject } from "mobx-react"; import DocumentInfo from "../../view/settings/DocumentInfo"; +import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; +import { Device } from "../../../../../common/mobile/utils/device"; class DocumentInfoController extends Component { constructor(props) { @@ -11,6 +13,7 @@ class DocumentInfoController extends Component { this.docInfoObject = {}; this.getAppProps = this.getAppProps.bind(this); + this.changeTitleHandler = this.changeTitleHandler.bind(this); if(this.docProps) { this.updateFileInfo(this.docProps); @@ -144,6 +147,70 @@ class DocumentInfoController extends Component { } } + changeTitleHandler() { + const { t } = this.props; + const storeDocumentInfo = this.props.storeDocumentInfo; + const docTitle = storeDocumentInfo.dataDoc.title; + + f7.dialog.create({ + title: t('Toolbar.textRenameFile'), + text : t('Toolbar.textEnterNewFileName'), + content: Device.ios ? + '
' : '
', + cssClass: 'dlg-adv-options', + buttons: [ + { + text: t('Edit.textCancel') + }, + { + text: t('Edit.textOk'), + cssClass: 'btn-change-title', + bold: true, + close: false, + onClick: () => { + const titleFieldValue = document.querySelector('#modal-title').value; + if(titleFieldValue.trim().length) { + this.changeTitle(titleFieldValue); + f7.dialog.close(); + } + } + } + ], + on: { + opened: () => { + const nameDoc = docTitle.split('.')[0]; + const titleField = document.querySelector('#modal-title'); + const btnChangeTitle = document.querySelector('.btn-change-title'); + + titleField.value = nameDoc; + titleField.focus(); + titleField.select(); + + titleField.addEventListener('input', () => { + if(titleField.value.trim().length) { + btnChangeTitle.classList.remove('disabled'); + } else { + btnChangeTitle.classList.add('disabled'); + } + }); + } + } + }).open(); + } + + changeTitle(name) { + const api = Common.EditorApi.get(); + const storeDocumentInfo = this.props.storeDocumentInfo; + const docInfo = storeDocumentInfo.docInfo; + const docExt = storeDocumentInfo.dataDoc.fileType; + const title = `${name}.${docExt}`; + + storeDocumentInfo.changeTitle(title); + docInfo.put_Title(title); + storeDocumentInfo.setDocInfo(docInfo); + api.asc_setDocInfo(docInfo); + } + componentDidMount() { const api = Common.EditorApi.get(); api.startGetDocInfo(); @@ -154,10 +221,11 @@ class DocumentInfoController extends Component { ); } } -export default inject("storeAppOptions")(observer(withTranslation()(DocumentInfoController))); +export default inject("storeAppOptions", "storeDocumentInfo")(observer(withTranslation()(DocumentInfoController))); diff --git a/apps/documenteditor/mobile/src/store/documentInfo.js b/apps/documenteditor/mobile/src/store/documentInfo.js index e79cfdf0d9..1809b30a3c 100644 --- a/apps/documenteditor/mobile/src/store/documentInfo.js +++ b/apps/documenteditor/mobile/src/store/documentInfo.js @@ -9,7 +9,9 @@ export class storeDocumentInfo { switchIsLoaded: action, changeCount: action, setDataDoc: action, - changeTitle: action + changeTitle: action, + docInfo: observable, + setDocInfo: action }); } @@ -23,6 +25,11 @@ export class storeDocumentInfo { isLoaded = true; dataDoc; + docInfo; + + setDocInfo(docInfo) { + this.docInfo = docInfo; + } switchIsLoaded(value) { this.isLoaded = value; diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 47c8267a66..9dc69b7f46 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -1,6 +1,6 @@ -import React, {Fragment, useEffect} from 'react'; +import React, { Fragment, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react'; +import { NavLeft, NavRight, NavTitle, Link, Icon, f7 } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import EditorUIController from '../lib/patch'; @@ -33,6 +33,53 @@ const ToolbarView = props => { } }; + const changeTitleHandler = () => { + f7.dialog.create({ + title: t('Toolbar.textRenameFile'), + text : t('Toolbar.textEnterNewFileName'), + content: Device.ios ? + '
' : '
', + cssClass: 'dlg-adv-options', + buttons: [ + { + text: t('Edit.textCancel') + }, + { + text: t('Edit.textOk'), + cssClass: 'btn-change-title', + bold: true, + close: false, + onClick: () => { + const titleFieldValue = document.querySelector('#modal-title').value; + if(titleFieldValue.trim().length) { + props.changeTitle(titleFieldValue); + f7.dialog.close(); + } + } + } + ], + on: { + opened: () => { + const nameDoc = docTitle.split('.')[0]; + const titleField = document.querySelector('#modal-title'); + const btnChangeTitle = document.querySelector('.btn-change-title'); + + titleField.value = nameDoc; + titleField.focus(); + titleField.select(); + + titleField.addEventListener('input', () => { + if(titleField.value.trim().length) { + btnChangeTitle.classList.remove('disabled'); + } else { + btnChangeTitle.classList.add('disabled'); + } + }); + } + } + }).open(); + } + useEffect(() => { const elemTitle = document.querySelector('.subnavbar .title'); @@ -53,7 +100,7 @@ const ToolbarView = props => { onRedoClick: props.onRedo })} - {(!Device.phone || isViewer) &&
{docTitle}
} + {(!Device.phone || isViewer) &&
{docTitle}
} {(Device.android && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo, diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx index fe45f5191f..6a9491807c 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx @@ -3,7 +3,7 @@ import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react"; import { useTranslation } from "react-i18next"; -const PageDocumentInfo = (props) => { +const PageDocumentInfo = props => { const { t } = useTranslation(); const _t = t("Settings", { returnObjects: true }); const storeInfo = props.storeDocumentInfo; @@ -44,7 +44,7 @@ const PageDocumentInfo = (props) => { {_t.textDocumentTitle} - + ) : null} diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index f7d9d9af6f..52921d7fef 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -103,12 +103,13 @@ const SettingsList = inject("storeAppOptions", "storeReview", "storeDocumentInfo const canProtect = appOptions.canProtect; const storeReview = props.storeReview; const displayMode = storeReview.displayMode; - const navbar = - {!props.inPopover && {_t.textDone}} - ; const docInfo = props.storeDocumentInfo; + const docTitle = docInfo.dataDoc.title; const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : ''; const isNotForm = docExt && docExt !== 'oform'; + const navbar = + {!props.inPopover && {_t.textDone}} + ; const onoptionclick = page => { if ( props.onOptionClick )