[Задача 12794] Доделал отображение карточек, добавил метод для получения…

cp/application/controllers/users/Typos.php

@@ -100,6 +100,17 @@ class Typos extends CI_Controller {
         echo json_encode($this->typo->getMessagesList($data));
     }
 
+    function getSiteTypos($siteId = null) {
+        if (is_null($siteId)) {
+            return $this->output->set_status_header(400)
+                ->set_output("Missing siteId parameter!");
+        }
+
+        return $this->output->set_content_type("application/json")
+            ->set_status_header(200)
+            ->set_output(json_encode($this->typo->getSiteTypos($siteId)));
+    }
+
     /*Управление сайтами*/
     function panel_sites()  {
         $id_site = $this->input->get("id");

cp/application/models/Typo.php

@@ -181,6 +181,20 @@ class Typo extends CI_Model {
         return $this->db->get()->result();
     }
 
+    /**
+     * Получает список опечаток текущего пользователя для данного
+     * сайта. Возвращает список.
+     *
+     * @param $siteId
+     */
+    function getSiteTypos($siteId) {
+        $this->db->select("id, text as originalText, context, comment as correctedText, date, status as isCorrected");
+        $this->db->from("messages");
+        $this->db->where("site_id", $siteId);
+
+        return $this->db->get()->result();
+    }
+
     /* Получаем список сообщений об опечатках */
 
     function getMessagesList($data) {

cp/javascript/src/components/Application.jsx

 import React from 'react';
-import Typo from './Typo'
+import Typo from './Typo/index'
 
 export default class Application extends Component {
     render() {

cp/javascript/src/components/SiteList.jsx

@@ -33,7 +33,7 @@ export default class SiteList extends React.Component {
 
     loadSiteTypos(siteId, done) {
         $.ajax({
-            url: window.baseUrl + "/users/typos/getSiteTypos?siteId=" + this.sites[siteId],
+            url: `${window.baseUrl}/users/typos/getSiteTypos/${this.sites[siteId].id}`,
         }).done((typos) => {
             this.typos = typos;
 

cp/javascript/src/components/Typo.jsx → cp/javascript/src/components/Typo/index.jsx

 import React, {Component} from 'react';
-import {Card, CardBody, CardText} from 'reactstrap'
+import {Card, CardHeader, CardTitle, CardFooter, CardBody, CardText} from 'reactstrap'
+
+import './style.css'
 
 export default class Typo extends Component {
 
@@ -11,22 +13,32 @@ export default class Typo extends Component {
         const {typo} = this.props;
 
         const display = this.state.show ? "d-block" : "d-none";
+        const textColor = "text-white";
+        const backgroundColor = "bg-primary";
+
+        const className = `TypoCard text-center ${display} ${backgroundColor} ${textColor}`;
 
         return (
-            <Card className={display}>
+            <Card className={className}>
                 <CardHeader>
                     Опечатка #{typo.id}
                 </CardHeader>
 
                 <CardBody>
-                    <CardTitle><del>{typo.original}</del> -> {typo.corrected}</CardTitle>
+                    <CardTitle><del>{typo.originalText}</del> -> {typo.correctedText}</CardTitle>
                     <CardText>{typo.context}</CardText>
 
-                    <a href="#" className="btn btn-primary">Исправить</a>
-                    <a href="#" className="btn btn-danger">Отклонить</a>
-
-                    <CardFooter>{typo.comment}</CardFooter>
+                    <div className="card-buttons">
+                        <div className="buttons-wrapper">
+                            <button className="accept-button btn btn-success">Исправить</button>
+                            <button className="decline-button btn btn-danger">Отклонить</button>
+                        </div>
+                    </div>
                 </CardBody>
+                <CardFooter>
+                    <p>Тут должен отображаться комментарий</p>
+                    Добавлена <small>{typo.date}</small>
+                </CardFooter>
             </Card>
         );
     }

cp/javascript/src/components/TypoList.jsx

 import React, {Component} from 'react';
-import Typo from "./Typo";
+import Typo from "./Typo/index";
 
 export default class TypoList extends Component {
-    typos = this.props.typos;
-
     state = {
         currentTypo: 0
     };
 
     render() {
 
-        const typoCards = this.typos.map((typo, index) =>
-            <Typo typo={this.typos[this.state.currentTypo]}
+        const {typos} = this.props;
+
+        const typoCards = typos.map((typo, index) =>
+            <Typo key={typo.id} typo={typos[this.state.currentTypo]}
                   show={this.state.currentTypo === index}/>
         );
 
-        return <div>
-            {typoCards}
-        </div>
+        return (
+            <div>
+                {typoCards}
+            </div>
+        )
     }
 }
\ No newline at end of file