Merge pull request #105 from AmruthPillai/develop

Feature: Language Level & Rating
2025-11-13 00:03:27 +10:00 · 2020-04-16 19:23:14 +05:30
parent b2659b6cba 668424d9b5
commit c39bc65f14
8 changed files with 123 additions and 77 deletions
--- a/src/assets/demo/data.json
+++ b/src/assets/demo/data.json
@ -66,7 +66,7 @@
          "major": "MS in Computer Science",
          "start": "Sep 2001",
          "end": "Aug 2002",
-          "grade": "",
+          "grade": "7.2 CGPA",
          "description": "",
          "enabled": true,
          "enable": true
@ -77,7 +77,7 @@
          "major": "BS in Computer Science",
          "start": "Sep 1997",
          "end": "Aug 2001",
-          "grade": "",
+          "grade": "8.4 CGPA",
          "description": "",
          "enabled": true,
          "enable": true
@ -131,8 +131,8 @@
        },
        {
          "id": "97a1a8d9-3c03-47fb-93ab-e84f864ffe17",
-          "title": "DCUCI Exam",
-          "subtitle": "",
+          "title": "DCUCI 642-999",
+          "subtitle": "Cisco Systems",
          "description": "",
          "enable": true
        }
@ -158,25 +158,32 @@
          "id": "9d34cfcb-c9f0-4d25-ab27-cf81652dd1d0",
          "key": "English (US)",
          "value": 5,
-          "enable": true
+          "enable": true,
+          "level": "",
+          "rating": 5
        },
        {
          "id": "3511a86b-7ea9-44ac-8144-6acc7f3bd54f",
          "key": "Spanish",
          "value": 4,
-          "enable": true
+          "enable": true,
+          "rating": 4
        },
        {
          "id": "d1e17542-f7cc-473a-aa0e-978765907454",
-          "key": "French",
+          "key": "Japanese",
          "value": 4,
-          "enable": true
+          "enable": true,
+          "level": "N4",
+          "rating": 2
        },
        {
          "id": "b1e8442a-7059-4c6f-8a9c-415383133b0e",
          "key": "German",
          "value": 3,
-          "enable": true
+          "enable": true,
+          "level": "B1",
+          "rating": 0
        }
      ]
    },
@ -244,24 +251,12 @@
      ]
    },
    "data": {
-      "languages": {
-        "items": [
-          null,
-          null,
-          null,
-          null,
-          {
-            "items": []
-          }
-        ]
-      }
+      "languages": { "items": [null, null, null, null, { "items": [] }] }
    }
  },
  "theme": {
-    "layout": "Gengar",
-    "font": {
-      "family": "Montserrat"
-    },
+    "layout": "castform",
+    "font": { "family": "Montserrat" },
    "colors": {
      "background": "#ffffff",
      "primary": "#212121",
--- a/src/components/LeftSidebar/tabs/Languages.js
+++ b/src/components/LeftSidebar/tabs/Languages.js
@ -1,16 +1,16 @@
-import React, { useState, useEffect, useContext } from 'react';
+import set from 'lodash/set';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import set from 'lodash/set';

-import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
+import AddItemButton from '../../../shared/AddItemButton';
 import Checkbox from '../../../shared/Checkbox';
 import Counter from '../../../shared/Counter';
-import { addItem } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
-import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
+import TextField from '../../../shared/TextField';
+import { addItem } from '../../../utils';

 const LanguagesTab = ({ data, onChange }) => {
  const context = useContext(AppContext);
@ -86,12 +86,28 @@ const Form = ({ item, onChange, identifier = '' }) => {
        onChange={v => onChange(`${identifier}key`, v)}
      />

+      <TextField
+        className="mb-6"
+        label={t('languages.level.label')}
+        placeholder="B1"
+        value={item.level}
+        onChange={v => onChange(`${identifier}level`, v)}
+      />
+
      <Counter
        className="mb-6"
        label={t('languages.rating.label')}
-        value={item.value}
-        onDecrement={() => item.value > 1 && onChange(`${identifier}value`, item.value - 1)}
-        onIncrement={() => item.value < 5 && onChange(`${identifier}value`, item.value + 1)}
+        value={item.rating}
+        onDecrement={() =>
+          item.rating > 1
+            ? onChange(`${identifier}rating`, item.rating - 1)
+            : onChange(`${identifier}rating`, 0)
+        }
+        onIncrement={() =>
+          item.rating < 5
+            ? onChange(`${identifier}rating`, item.rating + 1)
+            : onChange(`${identifier}rating`, 0)
+        }
      />
    </div>
  );
@ -103,7 +119,8 @@ const AddItem = ({ heading, dispatch }) => {
    id: uuidv4(),
    enable: true,
    key: '',
-    value: 1,
+    value: '',
+    rating: 1,
  });

  const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
@ -117,7 +134,8 @@ const AddItem = ({ heading, dispatch }) => {
      id: uuidv4(),
      enable: true,
      key: '',
-      value: 1,
+      value: '',
+      rating: 1,
    });

    setOpen(false);
--- a/src/templates/castform/Castform.js
+++ b/src/templates/castform/Castform.js
@ -143,7 +143,12 @@ const Castform = () => {

  const LanguageItem = x => (
    <div key={x.id} className="flex flex-col my-2">
+      <div className="flex justify-between items-center">
        <h6 className="text-sm font-medium mb-1">{x.key}</h6>
+        {x.level !== '' && <div className="font-bold text-sm">{x.level}</div>}
+      </div>
+
+      {x.rating !== 0 && (
        <div className="relative h-5">
          <div
            className="absolute mb-1 inset-0"
@ -154,11 +159,12 @@ const Castform = () => {
          <div
            className="absolute mb-1 inset-0 rounded"
            style={{
-            width: `${x.value * 20}%`,
+              width: `${x.rating * 20}%`,
              backgroundColor: 'rgba(0, 0, 0, 0.3)',
            }}
          />
        </div>
+      )}
    </div>
  );

--- a/src/templates/celebi/Celebi.js
+++ b/src/templates/celebi/Celebi.js
@ -34,7 +34,7 @@ const Celebi = () => {

  const Heading = ({ title, className }) => (
    <h5
-      className={`my-2 text-lg uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800 ${className}`}
+      className={`my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800 ${className}`}
    >
      {title}
    </h5>
@ -177,12 +177,17 @@ const Celebi = () => {
    <div key={x.id} className="grid grid-cols-2 items-center py-2">
      <h6 className="text-xs font-medium text-left">{x.key}</h6>
      <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
                star
              </i>
            ))}
          </div>
+        )}
+      </div>
    </div>
  );

--- a/src/templates/gengar/Gengar.js
+++ b/src/templates/gengar/Gengar.js
@ -25,8 +25,9 @@ const Gengar = () => {

  const FullName = () => (
    <div>
-      <h1 className="text-2xl font-bold">{data.profile.firstName}</h1>
-      <h1 className="text-2xl font-bold">{data.profile.lastName}</h1>
+      <h1 className="text-2xl font-bold leading-tight">{data.profile.firstName}</h1>
+      <h1 className="text-2xl font-bold leading-tight">{data.profile.lastName}</h1>
+      <div className="text-xs font-medium mt-2">{data.profile.subtitle}</div>
    </div>
  );

@ -196,12 +197,17 @@ const Gengar = () => {
    <div key={x.id} className="grid grid-cols-2 items-center py-2">
      <h6 className="text-sm font-medium">{x.key}</h6>
      <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
                star
              </i>
            ))}
          </div>
+        )}
+      </div>
    </div>
  );

--- a/src/templates/glalie/Glalie.js
+++ b/src/templates/glalie/Glalie.js
@ -195,12 +195,17 @@ const Glalie = () => {
    <div key={x.id} className="grid grid-cols-2 items-center py-2">
      <h6 className="text-xs font-medium text-left">{x.key}</h6>
      <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
                star
              </i>
            ))}
          </div>
+        )}
+      </div>
    </div>
  );

--- a/src/templates/onyx/Onyx.js
+++ b/src/templates/onyx/Onyx.js
@ -171,12 +171,17 @@ const Onyx = () => {
    <div key={x.id} className="grid grid-cols-2 items-center py-2">
      <h6 className="text-sm font-medium">{x.key}</h6>
      <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
                star
              </i>
            ))}
          </div>
+        )}
+      </div>
    </div>
  );

@ -255,6 +260,7 @@ const Onyx = () => {
            value={data.profile.email}
            link={`mailto:${data.profile.email}`}
          />
+          <ContactItem icon="location_on" value={data.profile.address.line3} />
        </div>
      </div>

--- a/src/templates/pikachu/Pikachu.js
+++ b/src/templates/pikachu/Pikachu.js
@ -101,12 +101,17 @@ const Pikachu = () => {
    <div key={x.id} className="grid grid-cols-2 items-center py-2">
      <h6 className="text-sm font-medium">{x.key}</h6>
      <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
                star
              </i>
            ))}
          </div>
+        )}
+      </div>
    </div>
  );