People.Client: translated Profile component

2019-08-27 16:11:42 +03:00 · 2019-08-27 16:11:42 +03:00 · 6f60ebf51a
commit 6f60ebf51a
parent 019c126e90
7 changed files with 73 additions and 86 deletions
--- a/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js
+++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js
@ -129,7 +129,7 @@ const ProfileInfo = (props) => {
  const { isVisitor, email, activationStatus, department, title, mobilePhone, sex, workFrom, birthday, location, cultureName, currentCulture } = props.profile;
  const isAdmin = props.isAdmin;
  const isSelf = props.isSelf;
-  const { t, i18n } = useTranslation();
+  const t = props.t;

  const type = isVisitor ? "Guest" : "Employee";
  const language = cultureName || currentCulture;
@ -147,7 +147,7 @@ const ProfileInfo = (props) => {
    <InfoContainer>
      <InfoItem>
        <InfoItemLabel>
-          {t('Resource:UserType')}:
+          {t('UserType')}:
        </InfoItemLabel>
        <InfoItemValue>
          {type}
@ -156,7 +156,7 @@ const ProfileInfo = (props) => {
      {email &&
        <InfoItem>
          <InfoItemLabel>
-            {t('Resource:Email')}:
+            {t('Email')}:
          </InfoItemLabel>
          <InfoItemValue>
            <Link
@ -167,18 +167,18 @@ const ProfileInfo = (props) => {
              onClick={onEmailClick}
            >
              {activationStatus === 2 && (isAdmin || isSelf) &&
-                <IconButtonWrapper isBefore={true} title='Pending'>
+                <IconButtonWrapper isBefore={true} title={t('PendingTitle')}>
                  <IconButton color='#C96C27' size={16} iconName='DangerIcon' isFill={true} />
                </IconButtonWrapper>
              }
              {email}
              {(isAdmin || isSelf) &&
-                <IconButtonWrapper title='Change e-mail' >
+                <IconButtonWrapper title={t('EmailChangeButton')} >
                  <IconButton color="#A3A9AE" size={16} iconName='AccessEditIcon' isFill={true} />
                </IconButtonWrapper>
              }
              {activationStatus === 2 && (isAdmin || isSelf) &&
-                <IconButtonWrapper title='Send invitation once again'>
+                <IconButtonWrapper title={t('SendInviteAgain')}>
                  <IconButton color="#A3A9AE" size={16} iconName='FileActionsConvertIcon' isFill={true} />
                </IconButtonWrapper>
              }
@ -209,12 +209,12 @@ const ProfileInfo = (props) => {
      {(mobilePhone || isSelf) &&
        <InfoItem>
          <InfoItemLabel>
-            Phone:
+          {t('PhoneLbl')}:
          </InfoItemLabel>
          <InfoItemValue>
            {mobilePhone}
            {(isAdmin || isSelf) &&
-            <IconButtonWrapper title='Change phone' >
+            <IconButtonWrapper title={t('PhoneChange')} >
              <IconButton color="#A3A9AE" size={16} iconName='AccessEditIcon' isFill={true} />
            </IconButtonWrapper>
            }
@ -224,7 +224,7 @@ const ProfileInfo = (props) => {
      {sex &&
        <InfoItem>
          <InfoItemLabel>
-            {t('Resource:Sex')}:
+            {t('Sex')}:
          </InfoItemLabel>
          <InfoItemValue>
            {formatedSex}
@ -244,7 +244,7 @@ const ProfileInfo = (props) => {
      {birthday &&
        <InfoItem>
          <InfoItemLabel>
-            {t('Resource:Birthdate')}:
+            {t('Birthdate')}:
          </InfoItemLabel>
          <InfoItemValue>
            {birthDayDate}
@ -254,7 +254,7 @@ const ProfileInfo = (props) => {
      {location &&
        <InfoItem>
          <InfoItemLabel>
-            {t('Resource:Location')}:
+            {t('Location')}:
          </InfoItemLabel>
          <InfoItemValue>
            {location}
@ -264,7 +264,7 @@ const ProfileInfo = (props) => {
      {isSelf &&
        <InfoItem>
          <InfoItemLabel>
-            {t('Resource:Language')}:
+            {t('Language')}:
          </InfoItemLabel>
          <InfoItemValue>
            {language}
@ -276,7 +276,7 @@ const ProfileInfo = (props) => {
 };

 const SectionBodyContent = props => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
  const { profile, history, settings, isAdmin, viewer } = props;

  const contacts = profile.contacts && getUserContacts(profile.contacts);
@ -308,20 +308,20 @@ const SectionBodyContent = props => {
          <EditButtonWrapper>
            <Button
              size="big"
-              label={t("Resource:EditUserDialogTitle")}
+              label={t("EditUserDialogTitle")}
              onClick={onEditProfileClick}
            />
          </EditButtonWrapper>
        )}
      </AvatarWrapper>
-      <ProfileInfo profile={profile} isSelf={isSelf} isAdmin={isAdmin} />
+      <ProfileInfo profile={profile} isSelf={isSelf} isAdmin={isAdmin} t={t}/>
      {isSelf && (
        <ToggleWrapper isSelf={true} >
-          <ToggleContent label={t('Resource:Subscriptions')} isOpen={true} >
+          <ToggleContent label={t('Subscriptions')} isOpen={true} >
            <Text.Body as="span">
              <Button
                size="big"
-                label="Edit subscriptions"
+                label={t('EditSubscriptionsBtn')}
                primary={true}
                onClick={onEditSubscriptionsClick}
              />
@ -331,21 +331,21 @@ const SectionBodyContent = props => {
      )}
      {profile.notes && (
        <ToggleWrapper>
-          <ToggleContent label={t('Resource:Comments')} isOpen={true} >
+          <ToggleContent label={t('Comments')} isOpen={true} >
            <Text.Body as="span">{profile.notes}</Text.Body>
          </ToggleContent>
        </ToggleWrapper>
      )}
      {profile.contacts && (
        <ToggleWrapper isContacts={true} >
-          <ToggleContent label={t('Resource:ContactInformation')} isOpen={true} >
+          <ToggleContent label={t('ContactInformation')} isOpen={true} >
            <Text.Body as="span">{infoContacts}</Text.Body>
          </ToggleContent>
        </ToggleWrapper>
      )}
      {profile.contacts && (
        <ToggleWrapper isContacts={true} >
-          <ToggleContent label={t('Resource:SocialProfiles')} isOpen={true} >
+          <ToggleContent label={t('SocialProfiles')} isOpen={true} >
            <Text.Body as="span">{socialContacts}</Text.Body>
          </ToggleContent>
        </ToggleWrapper>
--- a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
@ -9,6 +9,7 @@ import {
 import { withRouter } from "react-router";
 import { isAdmin, isMe } from "../../../../../store/auth/selectors";
 import { getUserStatus } from "../../../../../store/people/selectors";
+import { useTranslation } from 'react-i18next';

 const wrapperStyle = {
  display: "flex",
@ -67,7 +68,7 @@ const SectionHeaderContent = props => {
    toastr.success("Context action: Invite again");
  };

-  const getUserContextOptions = (user, viewer) => {
+  const getUserContextOptions = (user, viewer, t) => {

    let status = "";

@ -81,32 +82,32 @@ const SectionHeaderContent = props => {
        return [
          {
            key: "edit",
-            label: "Edit profile",
+            label: t('EditUserDialogTitle'),
            onClick: onEditClick.bind(this, user)
          },
          {
            key: "edit-photo",
-            label: "Edit Photo",
+            label: t('EditPhoto'),
            onClick: onEditPhoto
          },
          {
            key: "change-email",
-            label: "Change e-mail",
+            label: t('EmailChangeButton'),
            onClick: onChangeEmailClick
          },
          {
            key: "change-phone",
-            label: "Change phone",
+            label: t('PhoneChange'),
            onClick: onChangePhoneClick
          },
          {
            key: "change-password",
-            label: "Change password",
+            label: t('PasswordChangeButton'),
            onClick: onChangePasswordClick
          },
          {
            key: "disable",
-            label: "Disable",
+            label: t('DisableUserButton'),
            onClick: onDisableClick
          }
        ];
@ -114,27 +115,27 @@ const SectionHeaderContent = props => {
        return [
          {
            key: "enable",
-            label: "Enable",
+            label: t('EnableUserButton'),
            onClick: onEnableClick
          },
          {
            key: "edit-photo",
-            label: "Edit photo",
+            label: t('EditPhoto'),
            onClick: onEditPhoto
          },
          {
            key: "reassign-data",
-            label: "Reassign data",
+            label: t('ReassignData'),
            onClick: onReassignDataClick
          },
          {
            key: "delete-personal-data",
-            label: "Delete personal data",
+            label: t('RemoveData'),
            onClick: onDeletePersonalDataClick.bind(this, user)
          },
          {
            key: "delete-profile",
-            label: "Delete profile",
+            label: t('DeleteSelfProfile'),
            onClick: onDeleteProfileClick
          }
        ];
@ -142,22 +143,22 @@ const SectionHeaderContent = props => {
        return [
          {
            key: "edit",
-            label: "Edit",
+            label: t('EditButton'),
            onClick: onEditClick.bind(this, user)
          },
          {
            key: "edit-photo",
-            label: "Edit Photo",
+            label: t('EditPhoto'),
            onClick: onEditPhoto
          },
          {
            key: "invite-again",
-            label: "Invite again",
+            label: t('InviteAgainLbl'),
            onClick: onInviteAgainClick
          },
          {
            key: "key5",
-            label: "Disable",
+            label: t('DisableUserButton'),
            onClick: onDisableClick
          }
        ];
@ -166,7 +167,8 @@ const SectionHeaderContent = props => {
    }
  };

-  const contextOptions = () => getUserContextOptions(profile, viewer);
+  const { t } = useTranslation();
+  const contextOptions = () => getUserContextOptions(profile, viewer, t);

  return (
    <div style={wrapperStyle}>
@ -180,12 +182,12 @@ const SectionHeaderContent = props => {
      </div>
      <Text.ContentHeader truncate={true} style={textStyle}>
        {profile.displayName}
-        {profile.isLDAP && " (LDAP)"}
+        {profile.isLDAP && ` (${t('LDAPLbl')})`}
      </Text.ContentHeader>
      {(isAdmin || isMe(viewer, profile.userName)) && (
        <ContextMenuButton
          directionX="right"
-          title="Actions"
+          title={t('Actions')}
          iconName="VerticalDotsIcon"
          size={16}
          color="#A3A9AE"
--- a/products/ASC.People/Client/src/components/pages/Profile/i18n.js
+++ b/products/ASC.People/Client/src/components/pages/Profile/i18n.js
@ -1,17 +1,16 @@
 import i18n from 'i18next';
 import Backend from 'i18next-xhr-backend';
+import config from '../../../../package.json';

 const newInstance = i18n.createInstance();

 newInstance
  .use(Backend)
  .init({
-    lng: 'ru',
    fallbackLng: 'en',
    debug: true,
-    ns: ['Resource', 'translation'],
    backend: {
-      loadPath: `/products/people/locales/Profile/{{lng}}/{{ns}}.json`,
+      loadPath: `${config.homepage}/locales/Profile/{{lng}}/{{ns}}.json`,
    },

    interpolation: {
--- a/products/ASC.People/Client/src/components/pages/Profile/locales/en/translation.json
+++ b/products/ASC.People/Client/src/components/pages/Profile/locales/en/translation.json
@ -0,0 +1,30 @@
+{
+  "UserType": "Type",
+  "Email": "Email",
+  "Sex": "Sex",
+  "Birthdate": "Date of Birth",
+  "Location": "Location",
+  "Language": "Language",
+  "EditUserDialogTitle": "Edit Profile",
+  "Subscriptions": "Subscriptions",
+  "Comments": "Comments",
+  "ContactInformation": "Contact Information",
+  "PendingTitle": "Pending",
+  "EmailChangeButton": "Change email",
+  "SendInviteAgain": "Send invitation once again",
+  "EditPhoto": "Edit Photo",
+  "PasswordChangeButton": "Change password",
+  "DisableUserButton": "Disable",
+  "EnableUserButton": "Enable",
+  "ReassignData": "Reassign data",
+  "RemoveData": "Delete personal data",
+  "DeleteSelfProfile": "Delete profile",
+  "EditButton": "Edit",
+  "Actions": "Actions",
+  
+  "PhoneChange": "Change phone",
+  "PhoneLbl": "Phone",
+  "EditSubscriptionsBtn": "Edit subscriptions",
+  "InviteAgainLbl": "Invite again",
+  "LDAPLbl": "LDAP"
+}
--- a/products/ASC.People/Client/src/components/pages/Profile/translations/en/Resource.json
+++ b/products/ASC.People/Client/src/components/pages/Profile/translations/en/Resource.json
@ -1,31 +0,0 @@
-{
-  "Profile": "Profile",
-  "AboutCompanyTitle": "About this program",
-  "LogoutButton": "Sign Out",
-  "AddPhoto": "Add Photo",
-  "EditPhoto": "Edit Photo",
-  "FirstName": "First Name",
-  "LastName": "Last Name",
-  "Email": "Email",
-  "Password": "Password",
-  "Comments": "Comments",
-  "ContactInformation": "Contact Information",
-  "UserType": "Type",
-  "Sex": "Sex",
-  "SexMale": "Male",
-  "SexFemale": "Female",
-  "Birthdate": "Date of Birth",
-  "EmployedSinceDate": "Employed since",
-  "Location": "Location",
-  "Position": "Position",
-  "Departments": "Departments",
-  "Language": "Language",
-  "Subscriptions": "Subscriptions",
-  "SocialProfiles": "Social Profiles",
-  "PendingTitle": "Pending",
-  "EditUserDialogTitle": "Edit Profile",
-  "LoadingProcessing": "Loading...",
-  "LoadingDescription": "Please wait...",
-  "ActivationLink": "Activation link",
-  "TemporaryPassword": "Temporary password"
-}
--- a/products/ASC.People/Client/src/components/pages/Profile/translations/en/translation.json
+++ b/products/ASC.People/Client/src/components/pages/Profile/translations/en/translation.json
@ -1,9 +0,0 @@
-{
-  "LoadingProcessing": "Loading...",
-  "LoginButton": "Sign In",
-  "Password": "Password",
-  "RegistrationEmailWatermark": "Your registration email",
-  "Profile": "Profile",
-  "LogoutButton": "Sign Out",
-  "AboutCompanyTitle": "About this program!!!"
-}
--- a/products/ASC.People/Client/src/components/pages/Profile/translations/ru/translation.json
+++ b/products/ASC.People/Client/src/components/pages/Profile/translations/ru/translation.json
@ -1,4 +0,0 @@
-{
-  "Profile": "Профиль",
-  "LogoutButton": "Выйти"
-}