Cv2 4498 edit article

localization/react-intl/src/app/components/article/ArticleForm.json

@@ -19,6 +19,26 @@
     "description": "Title for the slideout edit fact-check form",
     "defaultMessage": "Edit Claim & Fact-Check"
   },
+  {
+    "id": "articleForm.editedByLabel",
+    "description": "Label to convey when the item was last edited",
+    "defaultMessage": "Edited by:"
+  },
+  {
+    "id": "articleForm.publishedAtDate",
+    "description": "Label to convey when the item was last published",
+    "defaultMessage": "Last Published:"
+  },
+  {
+    "id": "articleForm.publishedReport",
+    "description": "A label on a button that opens the report for this item. This displays if the report for this media item is currently in the 'Published' state.",
+    "defaultMessage": "Published report"
+  },
+  {
+    "id": "articleForm.unpublishedReport",
+    "description": "A label on a button that opens the report for this item. This displays if the report for this media item is NOT currently in the 'Published' state.",
+    "defaultMessage": "Unpublished report"
+  },
   {
     "id": "articleForm.claim",
     "description": "Title of the claim section.",
@@ -123,10 +143,5 @@
     "id": "articleForm.formSaveButton",
     "description": "the save button for the article forom",
     "defaultMessage": "Create content"
-  },
-  {
-    "id": "articleForm.formDeleteButton",
-    "description": "delete the current article",
-    "defaultMessage": "Move to Trash"
   }
 ]

src/app/components/article/ArticleForm.module.css

@@ -15,9 +15,37 @@
   z-index: 10;
 }
 
+.article-rating-wrapper {
+  display: flex;
+  gap: 4px;
+  padding-bottom: 5px;
+}
+
 .article-form-no-claim-container {
   color: var(--color-blue-32);
   margin: 0 20px;
   position: absolute;
   top: 30%;
 }
+
+.article-form-info {
+  border: 1px solid var(--color-gray-88);
+  border-radius: 5px;
+  display: flex;
+  margin-bottom: 10px;
+  padding: 8px;
+
+  .article-form-info-labels {
+    align-items: flex-end;
+    display: flex;
+    flex-flow: column;
+    padding-right: 8px;
+  }
+
+  .article-form-info-content {
+    align-items: flex-start;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-around;
+  }
+}

src/app/components/article/Articles.js

@@ -12,6 +12,8 @@ import ListSort from '../cds/inputs/ListSort';
 import { getStatus } from '../../helpers';
 import MediasLoading from '../media/MediasLoading';
 import ArticleFilters from './ArticleFilters';
+import ClaimFactCheckForm from './ClaimFactCheckForm';
+import ExplainerForm from './ExplainerForm';
 import searchResultsStyles from '../search/SearchResults.module.css';
 
 const pageSize = 50;
@@ -30,10 +32,13 @@ const ArticlesComponent = ({
   onChangeSearchParams,
   statuses,
   teamTags,
+  teamLanguages,
   articles,
   articlesCount,
   updateMutation,
 }) => {
+  const [openEdit, setOpenEdit] = React.useState(false);
+  const [selectedArticle, setSelectedArticle] = React.useState(null);
   const setFlashMessage = React.useContext(FlashMessageSetterContext);
 
   const handleChangeSort = ({ sort: newSort, sortType: newSortType }) => {
@@ -89,6 +94,13 @@ const ArticlesComponent = ({
     });
   };
 
+  const handleClick = (article) => {
+    if (!openEdit) {
+      setSelectedArticle(article);
+      setOpenEdit(true);
+    }
+  };
+
   return (
     <React.Fragment>
       <div className={searchResultsStyles['search-results-header']}>
@@ -153,26 +165,66 @@ const ArticlesComponent = ({
             }
 
             return (
-              <ArticleCard
-                key={article.id}
-                variant={type}
-                title={article.title || article.claim_description?.description}
-                summary={article.description}
-                url={article.url}
-                languageCode={article.language !== 'und' ? article.language : null}
-                date={article.updated_at}
-                tags={article.tags}
-                tagOptions={teamTags}
-                statusColor={currentStatus ? currentStatus.style?.color : null}
-                statusLabel={currentStatus ? currentStatus.label : null}
-                publishedAt={article.claim_description?.project_media?.report_status === 'published' && article.claim_description?.project_media?.published ? parseInt(article.claim_description?.project_media?.published, 10) : null}
-                onChangeTags={(tags) => {
-                  handleUpdateTags(article.id, tags);
-                }}
-              />
+              <>
+                <ArticleCard
+                  key={article.id}
+                  variant={type}
+                  title={article.title || article.claim_description?.description}
+                  summary={article.description}
+                  url={article.url}
+                  languageCode={article.language !== 'und' ? article.language : null}
+                  date={article.updated_at}
+                  tags={article.tags}
+                  tagOptions={teamTags}
+                  rating={article.rating}
+                  statusColor={currentStatus ? currentStatus.style?.color : null}
+                  statusLabel={currentStatus ? currentStatus.label : null}
+                  lastUserName={article.user?.name || null}
+                  publishedAt={article.claim_description?.project_media?.report_status === 'published' && article.claim_description?.project_media?.published ? parseInt(article.claim_description?.project_media?.published, 10) : null}
+                  onChangeTags={(tags) => {
+                    handleUpdateTags(article.id, tags);
+                  }}
+                  handleClick={() => handleClick(article)}
+                />
+              </>
             );
           })}
         </div>
+
+        <>
+          {openEdit && selectedArticle && type === 'fact-check' && <ClaimFactCheckForm
+            onClose={setOpenEdit}
+            team={{ teamTags, get_languages: teamLanguages }}
+            article={{
+              ...selectedArticle,
+              summary: selectedArticle.description,
+              created_at: selectedArticle.created_at,
+              statuses,
+              language: selectedArticle.language !== 'und' ? selectedArticle.language : null,
+              claim_description: {
+                description: selectedArticle.claim_description.description,
+                context: selectedArticle.claim_description.context,
+                id: selectedArticle.claim_description.id,
+                project_media: {
+                  id: selectedArticle.claim_description.project_media?.dbid,
+                  status: selectedArticle.claim_description.project_media?.status,
+                  published: selectedArticle.claim_description.project_media?.published,
+                  report_status: selectedArticle.claim_description.project_media?.report_status,
+                },
+              },
+
+            }}
+          />}
+          {openEdit && selectedArticle && type === 'explainer' && <ExplainerForm
+            onClose={setOpenEdit}
+            team={{ teamTags, get_languages: teamLanguages }}
+            article={{
+              ...selectedArticle,
+              created_at: selectedArticle.created_at,
+              language: selectedArticle.language !== 'und' ? selectedArticle.language : null,
+            }}
+          />}
+        </>
       </div>
     </React.Fragment>
   );
@@ -187,6 +239,7 @@ ArticlesComponent.defaultProps = {
   filters: {},
   statuses: {},
   teamTags: null,
+  teamLanguages: null,
   articles: [],
   articlesCount: 0,
 };
@@ -209,6 +262,7 @@ ArticlesComponent.propTypes = {
   })),
   statuses: PropTypes.object,
   teamTags: PropTypes.arrayOf(PropTypes.string),
+  teamLanguages: PropTypes.string,
   articlesCount: PropTypes.number,
   articles: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -217,10 +271,13 @@ ArticlesComponent.propTypes = {
     url: PropTypes.string,
     language: PropTypes.string,
     updated_at: PropTypes.number,
+    created_at: PropTypes.number,
+    rating: PropTypes.string,
     tags: PropTypes.arrayOf(PropTypes.string),
     claim_description: PropTypes.shape({
       description: PropTypes.string,
       project_media: PropTypes.shape({
+        dbid: PropTypes.string,
         status: PropTypes.string,
         published: PropTypes.string, // Timestamp
         report_status: PropTypes.string,
@@ -281,6 +338,7 @@ const Articles = ({
             $report_status: [String], $verification_status: [String],
           ) {
             team(slug: $slug) {
+              get_languages
               verification_statuses
               tag_texts(last: 50) {
                 edges {
@@ -307,7 +365,11 @@ const Articles = ({
                       url
                       language
                       updated_at
+                      created_at
                       tags
+                      user {
+                        name
+                      }
                     }
                     ... on FactCheck {
                       id
@@ -316,10 +378,18 @@ const Articles = ({
                       url
                       language
                       updated_at
+                      created_at
+                      rating
                       tags
+                      user {
+                        name
+                      }
                       claim_description { # There will be no N + 1 problem here because the backend uses eager loading
                         description
+                        context
+                        id
                         project_media {
+                          dbid
                           status
                           published
                           report_status
@@ -358,6 +428,7 @@ const Articles = ({
                 articles={props.team.articles.edges.map(edge => edge.node)}
                 articlesCount={props.team.articles_count}
                 statuses={props.team.verification_statuses}
+                teamLanguages={props.team.get_languages}
                 teamTags={props.team.tag_texts.edges.length > 0 ? props.team.tag_texts.edges.map(tag => tag.node.text) : null}
                 onChangeSearchParams={handleChangeSearchParams}
                 updateMutation={updateMutation}