366 fe implement delete tag functionality

app/content-panel/tags/TagManagementControls.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import Button from '../../../components/reusable-components/button/Button';
+import Input from '../../../components/reusable-components/input/Input';
+import styles from './tagManagementControls.module.scss';
+
+interface TagManagementControlsProps {
+  onAddClick: () => void;
+}
+
+const TagManagementControls: React.FC<TagManagementControlsProps> = ({ onAddClick }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <div className={styles.controls}>
+      <div className={styles.searchInputWrapper}>
+        <Input
+          type="text"
+          placeholder="Search tags..."
+          value={searchTerm}
+          onChange={setSearchTerm}
+        />
+      </div>
+      <Button onClick={onAddClick} type="button" buttonText="Add Tag" buttonClass={['addButton']} />
+    </div>
+  );
+};
+
+export default TagManagementControls;

app/content-panel/tags/TagTable.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useState } from 'react';
+import ReusableTable from '../../../components/reusable-components/reusable-table/ReusableTable';
+import Button from '../../../components/reusable-components/button/Button';
+import ReusableModal from '../../../components/reusable-components/reusable-modal/ReusableModal';
+
+interface Tag {
+  id: string;
+  name: string;
+}
+
+interface TagTableProps {
+  tags: Tag[];
+  onDelete: (id: string) => void;
+}
+
+const TagTable: React.FC<TagTableProps> = ({ tags, onDelete }) => {
+  const [deleteTagId, setDeleteTagId] = useState<string>('');
+  const headers: (keyof Tag)[] = ['name'];
+  const displayNames: { [key in keyof Tag]?: string } = { name: 'Tag Name' };
+
+  const handleEdit = (id: string) => {
+    console.log('Edit tag', id);
+  };
+
+  const renderActions = (item: Tag) => (
+    <>
+      <Button
+        type="button"
+        buttonText="Edit"
+        buttonClass={['editButton']}
+        onClick={() => handleEdit(item.id)}
+        aria-label={`Edit ${item.name}`}
+      />
+      <Button
+        type="button"
+        buttonText="Delete"
+        buttonClass={['deleteButton']}
+        onClick={() => setDeleteTagId(item.id)}
+        aria-label={`Delete ${item.name}`}
+      />
+    </>
+  );
+
+  return (
+    <>
+      <ReusableTable<Tag>
+        headers={headers}
+        displayNames={displayNames}
+        data={tags}
+        renderActions={renderActions}
+      />
+
+      <ReusableModal
+        isOpen={!!deleteTagId}
+        title="Delete Tag"
+        description="Are you sure you want to delete this tag?"
+        onClose={() => setDeleteTagId('')}
+        onPrimaryButtonClick={() => {
+          onDelete(deleteTagId);
+          setDeleteTagId('');
+        }}
+      />
+    </>
+  );
+};
+
+export default TagTable;

app/content-panel/tags/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import { toast } from 'react-toastify';
 import styles from '../../../components/module-components/tags/Tags.module.scss';
 import TagManagementControls from '../../../components/module-components/tags/TagManagementControls';
 import TagTable from '../../../components/module-components/tags/TagTable';
@@ -11,21 +12,23 @@ interface Tag {
 }
 
 const Tags = () => {
+  const [showAddTag, setShowAddTag] = useState(false);
   const [tags, setTags] = useState<Tag[]>([
     { id: '1', name: 'React' },
     { id: '2', name: 'TypeScript' },
     { id: '3', name: 'NextJS' },
   ]);
-  const [showAddTag, setShowAddTag] = useState(false);
 
-  const addTag = (newTag: string) => {
-    console.log(newTag);
+  const handleDelete = (id: string) => {
+    setTags(tags.filter((tag) => tag.id !== id));
+    toast.success('Тагот беше успешно избришан.');
   };
 
   return (
     <div className={styles.container}>
       <TagManagementControls onAddClick={() => setShowAddTag(true)} />
-      <TagTable handleDelete={() => {}} handleEdit={() => {}} tags={tags} />
+      {showAddTag && <div className={styles.addTag}>Add Tag</div>}
+      <TagTable tags={tags} handleEdit={() => {}} onDelete={handleDelete} />
     </div>
   );
 };

app/content-panel/tags/tagManagementControls.module.scss

@@ -0,0 +1,21 @@
+@import '../../../app/styles/utils/breakpoints.scss';
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  @include breakpoint(small) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.searchInputWrapper {
+  width: 100%;
+  @include breakpoint(small) {
+    width: 300px;
+  }
+}

app/layout.tsx

@@ -5,6 +5,7 @@ import React, { Suspense } from 'react';
 import Head from 'next/head';
 import Script from 'next/script';
 import './styles/main.scss';
+import { ToastContainer } from 'react-toastify';
 import Loading from './loading';
 import Footer from '../components/reusable-components/footer/Footer';
 import Navigation from '../components/reusable-components/navigation/Navigation';
@@ -50,6 +51,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
           </noscript>
         )}
         <ThemeProvider>
+          <ToastContainer />
           <ReactQueryProvider>
             <Navigation />
             <main className={styles.main}>

components/module-components/contact/ContactForm.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { useFormik } from 'formik';
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
 import * as Yup from 'yup';
 import 'react-toastify/dist/ReactToastify.css';
 import Turnstile from 'react-turnstile';
@@ -60,7 +60,6 @@ const ContactForm = () => {
 
   return (
     <div>
-      <ToastContainer />
       <form onSubmit={formik.handleSubmit}>
         <TextInput
           placeholder="Внесете го вашето име"

components/module-components/tags/TagTable.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Button from '../../reusable-components/button/Button';
 import ReusableTable from '../../reusable-components/reusable-table/ReusableTable';
+import ReusableModal from '../../reusable-components/reusable-modal/ReusableModal';
 
 interface Tag {
   id: string;
@@ -12,10 +13,11 @@ interface Tag {
 interface TagTableProps {
   tags: Tag[];
   handleEdit: (id: string) => void;
-  handleDelete: (id: string) => void;
+  onDelete: (id: string) => void;
 }
 
-const TagTable: React.FC<TagTableProps> = ({ tags, handleEdit, handleDelete }) => {
+const TagTable: React.FC<TagTableProps> = ({ tags, handleEdit, onDelete }) => {
+  const [deleteTagId, setDeleteTagId] = useState<string>('');
   const headers: (keyof Tag)[] = ['name'];
   const displayNames: { [key in keyof Tag]?: string } = { name: 'Име на таг' };
 
@@ -27,25 +29,37 @@ const TagTable: React.FC<TagTableProps> = ({ tags, handleEdit, handleDelete }) =
         buttonClass={['editButton']}
         onClick={() => handleEdit(item.id)}
       />
-
       <Button
         type="button"
         buttonText="Избриши"
         buttonClass={['deleteButton']}
-        onClick={() => {
-          handleDelete(item.id);
-        }}
+        onClick={() => setDeleteTagId(item.id)}
       />
     </>
   );
 
   return (
-    <ReusableTable<Tag>
-      headers={headers}
-      displayNames={displayNames}
-      data={tags}
-      renderActions={renderActions}
-    />
+    <>
+      <ReusableTable<Tag>
+        headers={headers}
+        displayNames={displayNames}
+        data={tags}
+        renderActions={renderActions}
+      />
+
+      <ReusableModal
+        isOpen={!!deleteTagId}
+        title="Бришење на таг"
+        description="Дали си сигурен дека сакаш да го избришеш тагот?"
+        onClose={() => setDeleteTagId('')}
+        primaryButtonLabel="Избриши"
+        secondaryButtonLabel="Откажи"
+        onPrimaryButtonClick={() => {
+          onDelete(deleteTagId);
+          setDeleteTagId('');
+        }}
+      />
+    </>
   );
 };
 

components/module-components/tags/addTags.module.scss

@@ -1,14 +0,0 @@
-@import '../../../app/styles/utils/breakpoints.scss';
-
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 20px;
-
-  @include breakpoint(small) {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-}

components/reusable-components/button/button.module.scss

@@ -185,6 +185,11 @@
   }
 }
 
+.createTag {
+  @extend .saveButton;
+  width: 125px;
+}
+
 .editButton {
   background-color: #2196f3;
   color: white;