Add translation progress bar (#40)

* create query to get story translation progress * return percentage in get/update translation * update progress bar styling
uwblueprint · Jul 13, 2021 · 85d186a · 85d186a
1 parent 747dde7
commit 85d186a
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 15 deletions.
diff --git a/backend/python/app/graphql/types/story_type.py b/backend/python/app/graphql/types/story_type.py
@@ -73,3 +73,4 @@ class StoryTranslationResponseDTO(graphene.ObjectType):
     description = graphene.String(required=True)
     youtube_link = graphene.String(required=True)
     level = graphene.Int(required=True)
+    num_translated_lines = graphene.Int()
diff --git a/backend/python/app/services/implementations/story_service.py b/backend/python/app/services/implementations/story_service.py
@@ -139,11 +139,15 @@ def get_story_translation(self, id):
                 .join(StoryTranslation, Story.id == StoryTranslation.story_id)
                 .filter(StoryTranslation.id == id)
                 .one()
+                ._asdict()
             )
 
+            story_details["num_translated_lines"] = self._get_num_translated_lines(
+                translation.translation_contents
+            )
             response = {
                 **translation.to_dict(include_relationships=True),
-                **story_details._asdict(),
+                **story_details,
             }
             return response
 
@@ -172,22 +176,20 @@ def assign_user_as_reviewer(self, user, story_translation):
 
     def update_story_translation_content(self, story_translation_content):
         try:
-            old_translation_content = StoryTranslationContent.query.get(
-                story_translation_content.id
-            )
+            story_translation = StoryTranslationContent.query.filter_by(
+                id=story_translation_content.id
+            ).first()
 
-            if not old_translation_content:
+            if not story_translation:
                 raise Exception(
                     "story_translation_content_id {id} not found".format(
                         id=story_translation_content.id
                     )
                 )
 
-            story_translation = StoryTranslationContent.query.filter_by(
-                id=story_translation_content.id
-            ).first()
-
-            story_translation.translation_content: story_translation_content.translation_content
+            story_translation.translation_content = (
+                story_translation_content.translation_content
+            )
             db.session.commit()
         except Exception as error:
             reason = getattr(error, "message", None)
@@ -199,9 +201,9 @@ def update_story_translation_content(self, story_translation_content):
             raise error
 
         return StoryTranslationContentResponseDTO(
-            id=story_translation_content.id,
-            line_index=old_translation_content.line_index,
-            translation_content=story_translation_content.translation_content,
+            story_translation_content.id,
+            story_translation.line_index,
+            story_translation_content.translation_content,
         )
 
     def update_story_translation_contents(self, story_translation_contents):
@@ -246,3 +248,8 @@ def get_story_translations_available_for_review(self, language, level):
         except Exception as error:
             self.logger.error(str(error))
             raise error
+
+    def _get_num_translated_lines(self, translation_contents):
+        return len(translation_contents) - [
+            _.translation_content for _ in translation_contents
+        ].count("")
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
     <title>React App</title>
   </head>
   <body>

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -11,6 +11,7 @@ import DisplayPage from "./components/pages/DisplayPage";
 import HomePage from "./components/pages/HomePage";
 import NotFound from "./components/pages/NotFound";
 import UpdatePage from "./components/pages/UpdatePage";
+import TranslationPage from "./components/pages/TranslationPage";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
 import AuthContext, { AuthenticatedUser } from "./contexts/AuthContext";
 import { getLocalStorageObj } from "./utils/LocalStorageUtils";
@@ -35,6 +36,11 @@ const App = () => {
           <PrivateRoute exact path="/entity/update" component={UpdatePage} />
           <PrivateRoute exact path="/entity" component={DisplayPage} />
           <PrivateRoute exact path="/stories" component={HomePage} />
+          <PrivateRoute
+            exact
+            path="/translation/:storyId/:storyTranslationId"
+            component={TranslationPage}
+          />
           <Route exact path="*" component={NotFound} />
         </Switch>
       </Router>

diff --git a/frontend/src/components/pages/TranslationPage.css b/frontend/src/components/pages/TranslationPage.css
@@ -0,0 +1,16 @@
+.translation {
+    display: flex;
+    flex-direction: row;
+}
+
+.translation-container {
+    flex-basis: 75%;
+}
+
+.translation-sidebar {
+    flex-basis: 25%;
+}
+
+.translation-progress-bar {
+    margin: 20px 30px 0 0;
+}
diff --git a/frontend/src/components/pages/TranslationPage.tsx b/frontend/src/components/pages/TranslationPage.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import "./TranslationPage.css";
+import { useParams } from "react-router-dom";
+import TranslationProgressBar from "../translation/TranslationProgressBar";
+
+type TranslationPageProps = {
+  storyId: string | undefined;
+  storyTranslationId: string | undefined;
+};
+
+const TranslationPage = () => {
+  const { storyId, storyTranslationId } = useParams<TranslationPageProps>();
+  // TODO: set percentageComplete based on return from get translation query,
+  // and update when edits made to page
+  // const [percentageComplete, setPercentageComplete] = useState(0);
+  const [percentageComplete] = useState(25);
+  if (storyId === undefined || storyTranslationId === undefined) {
+    return (
+      <div className="error">
+        <p>Error loading page</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="translation">
+      <div className="translation-container" />
+      <div className="translation-sidebar">
+        <div className="translation-progress-bar">
+          <TranslationProgressBar percentageComplete={percentageComplete} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TranslationPage;
diff --git a/frontend/src/components/translation/TranslationProgressBar.css b/frontend/src/components/translation/TranslationProgressBar.css
@@ -0,0 +1,22 @@
+.progress-bar-container {
+    max-width: 123px;
+    padding: 5px;
+}
+
+.progress {
+    background-color: #ECF1F4;
+    border-radius: 8px;
+    box-shadow: inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1);
+    height: 6px;
+}
+
+.progress-bar {
+    background-color: var(--dark-blue);
+}
+
+.progress-label {
+    color: var(--interactive-grey);
+    font-size: 10px;
+    line-height: 14px;
+    margin-bottom: 8px;
+}
diff --git a/frontend/src/components/translation/TranslationProgressBar.tsx b/frontend/src/components/translation/TranslationProgressBar.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ProgressBar } from "react-bootstrap";
+import "./TranslationProgressBar.css";
+
+type TranslationProgressBarProps = {
+  percentageComplete: number;
+};
+
+const TranslationProgressBar = ({
+  percentageComplete,
+}: TranslationProgressBarProps) => {
+  return (
+    <div className="progress-bar-container">
+      <p className="progress-label">
+        Translation Progress: {percentageComplete}%
+      </p>
+      <div>
+        <ProgressBar now={percentageComplete} />
+      </div>
+    </div>
+  );
+};
+
+export default TranslationProgressBar;
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+:root {
+  --dark-blue: #1D6CA5;
+  --interactive-grey: #606062;
+}