Možnost odebrání volby ikonou

client/babel-plugin-macros.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    'fontawesome-svg-core': {
+        'license': 'free'
+    }
+}

client/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = function (api) {
+    return {
+        plugins: ['macros'],
+    }
+}

client/package.json

@@ -4,6 +4,10 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,6 +15,7 @@
     "@types/node": "^16.18.23",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
+    "babel-plugin-macros": "^3.1.0",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",

client/src/App.css

@@ -66,3 +66,9 @@
 #basic-navbar-nav {
   justify-content: flex-end;
 }
+
+.trash-icon {
+  color: rgb(0, 89, 255);
+  cursor: pointer;
+  margin-left: 10px;
+}

client/src/App.tsx

@@ -7,6 +7,8 @@ import Login from './Login';
 import { Locations, ClientData } from './Types';
 import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
+import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './App.css';
 
 const EVENT_CONNECT = "connect"
@@ -77,6 +79,15 @@ function App() {
     }
   }
 
+  const removeChoice = async (key: string) => {
+    if (auth?.login) {
+      await updateChoice(auth.login, null);
+      if (choiceRef?.current?.value) {
+        choiceRef.current.value = "";
+      }
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -133,7 +144,7 @@ function App() {
                 <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
               </Form.Select>
               <p style={{ fontSize: "12px", marginTop: "5px" }}>
-                Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
+                Aktuálně je možné vybrat pouze jednu variantu.
               </p>
               {Object.keys(data.choices).length > 0 ?
                 <Table striped bordered hover className='results-table mt-5'>
@@ -143,7 +154,11 @@ function App() {
                         <td>{Object.values(Locations)[Number(key)]}</td>
                         <td>
                           <ul>
-                            {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
+                            {data.choices[Number(key)].map((p: string, index: number) =>
+                              <li key={index}>{p} {p === auth.login && <FontAwesomeIcon onClick={() => {
+                                removeChoice(key);
+                              }} title='Odstranit' className='trash-icon' icon={icon({ name: 'trash-can', style: 'regular' })} />}</li>
+                            )}
                           </ul>
                         </td>
                       </tr>

client/yarn.lock

@@ -1227,6 +1227,39 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.38.0.tgz#73a8a0d8aa8a8e6fe270431c5e72ae91b5337892"
   integrity sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==
 
+"@fortawesome/fontawesome-common-types@6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
+  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
+
+"@fortawesome/fontawesome-svg-core@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
+  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-regular-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
+  integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"