Merge branch 'dev' into matvienko-856-Create-HomeworkStudent-model

ita-social-projects · Dec 9, 2021 · 277efa1 · 277efa1
2 parents 949dafe + 9ce0802
commit 277efa1
Show file tree

Hide file tree

Showing 32 changed files with 991 additions and 146 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2021: true,
+    jest: true,
   },
   extends: [
     'plugin:react/recommended',
@@ -19,22 +20,21 @@ module.exports = {
     },
     ecmaVersion: 12,
   },
-  plugins: [
-    'babel',
-    'react',
-    'react-hooks',
-    'prettier',
-  ],
+  plugins: ['babel', 'react', 'react-hooks', 'prettier'],
   rules: {
     semi: ['error', 'always'],
     quotes: ['error', 'single'],
     'linebreak-style': 0,
     'eol-last': 0,
     'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
     'import/prefer-default-export': 'off',
-    'import/extensions': ['error', 'ignorePackages', {
-      js: 'always',
-    }],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'always',
+      },
+    ],
     'react/button-has-type': 'off',
     'object-curly-spacing': [2, 'always'],
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
     "test": "jest --collectCoverage",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test:watch": "jest --watch"
   },
   "repository": {
     "type": "git",

diff --git a/src/components/blocks/blocks.js b/src/components/blocks/blocks.js
@@ -1,9 +1,9 @@
 
-import {commonHelpers} from "@/utils";
+import { commonHelpers } from "@/utils";
 import Icon from "@/icon";
 import styles from "./blocks.scss";
 import React from "react";
-
+import { Button } from '@/components/index.js';
 
 /**
  *
@@ -42,9 +42,7 @@ export const Blocks = (
         style={{
           width: '31%',
           margin: '1%',
-          cursor: 'pointer',
         }}
-        onClick={handleDetails ? () => handleDetails(id) : null}
         key={id}
       >
         <div className="card-body d-flex justify-content-between">
@@ -93,13 +91,17 @@ export const Blocks = (
             )}
             {fieldsToShow.includes('email') && email && <div>{email}</div>}
             {fieldsToShow.includes('custom') && custom && <div>{custom}</div>}
+
+            <Button onClick={handleDetails ? () => handleDetails(id) : null} className={styles.btnDetails}>
+              <span>Details</span>
+            </Button>
           </div>
           {fieldsToShow.includes('edit') && access && (
             <div
               onClick={handleEdit ? (event) => handleEdit(event, id) : null}
             >
               <Icon
-                icon="Edit"              
+                icon="Edit"
                 className={styles.scale}
                 color="#2E3440"
                 size={30}

diff --git a/src/components/blocks/blocks.scss b/src/components/blocks/blocks.scss
@@ -1,9 +1,11 @@
 .scale {
   transition: .3s ease;
   padding-top: 3px;
-  cursor: pointer;
   &:hover {
     transform: scale(1.4);
     padding-top: 5px;
   }
+}
+.btnDetails{
+  margin-top: 10px;
 }
diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -3,11 +3,18 @@ import propTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './table.scss';
 
-export const Table = ({ sortingCategories, currentUser, onClick, data, access, children: list}) => {
-  const handleSortByParam = (event) => onClick(getSortedByParam(data, event.target.dataset), event.target.dataset)
+export const Table = ({
+  sortingCategories,
+  currentUser,
+  onClick,
+  data,
+  access,
+  children: list,
+}) => {
+  const handleSortByParam = (event) =>
+    onClick(getSortedByParam(data, event.target.dataset), event.target.dataset);
 
   const getSortedByParam = (data, activeCategory) => {
-
     const { sortingParam, sortedByAscending } = activeCategory;
     const sortingCoefficient = Number(sortedByAscending) ? 1 : -1;
 
@@ -23,34 +30,38 @@ export const Table = ({ sortingCategories, currentUser, onClick, data, access, c
     <table className="table table-hover">
       <thead>
         <tr>
-          {sortingCategories.map(({ id, name, tableHead, sortedByAscending }) => (
-            <th
-              key={id}
-              className={styles['table-head']}
-            >
-              <span
-                data-sorting-param={name}
-                data-sorted-by-ascending={Number(sortedByAscending)}
-                onClick={handleSortByParam}
-                className={classNames({ [styles.rotate]: !sortedByAscending })}
-              >
-                {tableHead}
-              </span>
+          {sortingCategories.map(
+            ({ id, name, tableHead, sortedByAscending }) => (
+              <th key={id} className={styles['table-head']}>
+                <span
+                  data-sorting-param={name}
+                  data-sorted-by-ascending={Number(sortedByAscending)}
+                  onClick={handleSortByParam}
+                  className={classNames({
+                    [styles.rotate]: !sortedByAscending,
+                  })}
+                >
+                  {tableHead}
+                </span>
+              </th>
+            )
+          )}
+          {currentUser && currentUser.role != 4 ? (
+            !access.unruledUser.some((el) => currentUser.role == el) ? (
+              <th scope="col" className="text-center">
+                Edit
+              </th>
+            ) : null
+          ) : access.unassigned != 'unassigned' ? (
+            <th scope="col" className="text-center">
+              Edit
             </th>
-          ))}
-          { currentUser && currentUser.role != 4 ?
-              !access.unruledUser.some(el => currentUser.role == el ) ?
-                  <th scope="col" className="text-center">Edit</th>
-                      : null
-                        : access.unassigned != 'unassigned' ?
-                          <th scope="col" className="text-center">Edit</th>
-                          : <th className="text-center">Choose role</th>
-          }
+          ) : (
+            <th className="text-center">Choose role</th>
+          )}
         </tr>
       </thead>
-      <tbody>
-        {list}
-      </tbody>
+      <tbody className={styles['table-body']}>{list}</tbody>
     </table>
   );
 };
@@ -62,4 +73,4 @@ Table.propTypes = {
   children: propTypes.node.isRequired,
   onClick: propTypes.func.isRequired,
   data: propTypes.array.isRequired,
-};
+};
diff --git a/src/components/table/table.scss b/src/components/table/table.scss
@@ -15,7 +15,7 @@
 
     &:hover {
       opacity: 0.7;
-      transition: .4s;
+      transition: 0.4s;
     }
 
     &::after {
@@ -32,7 +32,7 @@
       border-left: 1px solid #000;
 
       transform: rotateZ(45deg);
-      transition: .3s;
+      transition: 0.3s;
     }
 
     &.rotate::after {
@@ -42,7 +42,11 @@
   }
 }
 
+.table-body {
+  word-break: break-all;
+}
+
 .table-row {
   cursor: pointer;
-  transition: all .2s ease-out;
-}
+  transition: all 0.2s ease-out;
+}