tag can now be added from frontend

src/assets/styles/components/_files.scss

 
 .files-button-responsive {
   gap: 5px;
-  width: 105px;
+  width: 85px;
   height: 31px;
 }
 
+.add-categories-files > button:first-child {
+  margin-left: 0px !important;
+}
+
 .file-viewer-close-btn {
   width: 100px;
   align-self: flex-end;

src/components/MUI/NavbarComponent.js

 import CloseIcon from "@mui/icons-material/Close";
 import LogoutIcon from "@mui/icons-material/Logout";
 import UserProfile from "../Profile/UserProfile";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 //import { userSelector } from "../../store/selectors/userSelectors";
 import { Link, useLocation } from "react-router-dom";
 import rs from "../../assets/images/rs.png";
 import en from "../../assets/images/en.png";
+import { logoutUser } from "../../store/actions/login/loginActions";
 
 const NavbarComponent = () => {
-  const navItems = [
-    "users",
-    "files"
-  ];
+  const navItems = ["users", "files"];
   const { pathname } = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [preview, setPreview] = useState(false);
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
+  const dispatch = useDispatch();
   // const toggleColorMode = useContext(ColorModeContext);
 
+  const logout = () => {
+    dispatch(logoutUser());
+  };
+
   let userRef = useRef();
   let btnRef = useRef();
 
   };
 
   const filterNavItems = () => {
-    return navItems.filter(n => ((n === "users" && user.role === "SuperAdmin") || n !== "users"))
-  }
+    return navItems.filter(
+      (n) => (n === "users" && user.role === "SuperAdmin") || n !== "users"
+    );
+  };
 
   useEffect(() => {
     let handler = (e) => {
         {/* <Typography>s</Typography> */}
         <div className="flex-center">
           <Button
+            onClick={logout}
             sx={{
               padding: "18px 72px",
               border: "1px solid #226cb0",

src/i18n/resources/en.js

     addFileSuccessfullyAddedFile: "Successfully added file",
     addFileGoBackToFiles: "Go back to all files",
     createCategoryModalTitle: "Create category",
+    createTagModalTitle: "Create tag",
     createCategoryModalPlaceholder: "Category name",
+    createTagModalPlaceholder: "Tag name",
     close: "Close",
     createCategoryModalSubmitButton: "Create category",
+    createTagModalSubmitButton: "Create tag",
     folders: "Folders",
     file: "File",
     files: "Files",
     documents: "| Documents",
     extension: "Extension",
     tags: "Tags",
-    search: "Search"
+    search: "Search",
+    tag:"Tag"
   }
 };

src/i18n/resources/rs.js

     addFileSuccessfullyAddedFile: "Uspešno dodat fajl",
     addFileGoBackToFiles: "Nazad na sve fajlove",
     createCategoryModalTitle: "Napravite kategoriju",
+    createTagModalTitle: "Napravite tag",
     createCategoryModalPlaceholder: "Naziv kategorije",
+    createTagModalPlaceholder: "Naziv taga",
     close: "Izađite",
     createCategoryModalSubmitButton: "Napravite kategoriju",
+    createTagModalSubmitButton: "Napravite tag",
     folders: "Folderi",
     file: "Fajl",
     files: "Fajlovi",
     documents: "| Dokumenti",
     extension: "Ekstenzija",
     tags: "Tagovi",
-    search: "Pretraži"
+    search: "Pretraži",
+    tag:"Tag"
   },
 };

src/pages/FilesPage/FilesPage.js

   createCategoryReq,
   setCategoriesReq,
 } from "../../store/actions/categories/categoriesAction";
+import { createTagReq } from "../../store/actions/tags/tagsAction";
 import {
   selectCategories,
   selectChildParentRelations,
   const dispatch = useDispatch();
   const [trigger, setTrigger] = useState(0);
   const [openCreateCategoryModal, setOpenCreateCategoryModal] = useState(false);
+  const [openCreateTagModal, setOpenCreateTagModal] = useState(false);
   const [createCategoryName, setCreateCategoryName] = useState("");
+  const [createTagName, setCreateTagName] = useState("");
   let { id } = useParams();
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("370"));
     setOpenCreateCategoryModal((oldState) => !oldState);
   };
 
+  const changeOpenCreateTagModal = () => {
+    setOpenCreateTagModal((oldState) => !oldState);
+  };
+
   const getNameHandler = (name) => {
     if (matches) {
       if (name.length > 7) return name.substr(0, 7) + "...";
     setOpenCreateCategoryModal(false);
   };
 
+  const onSuccessCreatingTagHandler = () => {
+    setOpenCreateTagModal(false);
+  };
+
   const createCategoryHandler = () => {
     dispatch(
       createCategoryReq({
     setCreateCategoryName("");
   };
 
+  const createTagHandler = () => {
+    dispatch(
+      createTagReq({
+        name: createTagName,
+        onSuccess: onSuccessCreatingTagHandler,
+      })
+    );
+    setCreateTagName("");
+  };
+
   const ColoredLine = () => (
     <hr
       style={{
 
   return (
     <>
-      <div className="l-t-rectangle"></div>
-      <div className="r-b-rectangle" style={{width:matches ? 100 : 180}}></div>
+      <div
+        className="l-t-rectangle"
+        style={{ height: matches ? 140 : 180 }}
+      ></div>
+      <div
+        className="r-b-rectangle"
+        style={{ width: matches ? 100 : 180 }}
+      ></div>
       <CustomModal
         classes="files-custom-modal"
         open={openCreateCategoryModal}
           </Button>
         </div>
       </CustomModal>
+      <CustomModal
+        classes="files-custom-modal"
+        open={openCreateTagModal}
+        onCloseModal={changeOpenCreateTagModal}
+      >
+        <div className="add-pattern-modal-header">
+          <div className="add-pattern-modal-header-title">
+            <div className="add-pattern-modal-header-title-image">
+              <img src={plusIcon} alt="plus" />
+            </div>
+            <div className="add-pattern-modal-header-title-title">
+              <p>{t("files.createTagModalTitle")}</p>
+            </div>
+          </div>
+          <div
+            className="add-pattern-modal-header-close"
+            onClick={changeOpenCreateTagModal}
+          >
+            <img src={xIcon} alt="close" />
+          </div>
+        </div>
+        <div className="add-category-input">
+          <input
+            type="text"
+            placeholder={t("files.createTagModalPlaceholder")}
+            value={createTagName}
+            onChange={(e) => setCreateTagName(e.target.value)}
+          />
+        </div>
+        <div className="files-category-custom-modal-buttons">
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary-outlined"
+            onClick={changeOpenCreateTagModal}
+          >
+            {t("files.close")}
+          </Button>
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary"
+            onClick={createTagHandler}
+          >
+            {t("files.createTagModalSubmitButton")}
+          </Button>
+        </div>
+      </CustomModal>
       <div
         className="pl-144"
         style={{ paddingTop: "36px" }}
             <div
               style={{
                 display: "flex",
-                alignItems: "center",
+                alignItems: matches ? "flex-start" : "center",
+                flexDirection: matches ? "column" : "row",
                 justifyContent: "space-between",
                 marginBottom: "15px",
               }}
                 >
                   + {t("files.category")}
                 </IconButton>
+                <IconButton
+                  className={
+                    `c-btn ads-page-btn c-btn--primary filesPage ` +
+                    (matches ? "files-button-responsive" : "add-ad-btn")
+                  }
+                  onClick={changeOpenCreateTagModal}
+                >
+                  + {t("files.tag")}
+                </IconButton>
               </div>
             </div>
             <ColoredLine />

src/request/tagsRequest.js

-import { getRequest } from ".";
+import { getRequest, postRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
 export const getFileFilters = () => getRequest(apiEndpoints.fileTags.filters);
-export const getAllTags = () =>
-  getRequest(apiEndpoints.tags.allTags);
+export const getAllTags = () => getRequest(apiEndpoints.tags.allTags);
+export const createTagRequest = (payload) =>
+  postRequest(apiEndpoints.fileTags.filters, payload);

src/store/actions/tags/tagsAction.js

   FETCH_TAGS_ERR,
   CHANGE_TAG_ISCHECKED_VALUE,
   RESET_CHECKED_TAGS,
+  CREATE_TAG_ERR,
+  CREATE_TAG_REQ,
+  CREATE_TAG_SUCCESS,
 } from "./tagsActionConstants";
 
 export const setTagsReq = () => ({
 export const resetIsCheckedTagsValue = () => ({
   type: RESET_CHECKED_TAGS,
 });
+
+export const createTagReq = (payload) => ({
+  type: CREATE_TAG_REQ,
+  payload,
+});
+
+export const createTagError = () => ({
+  type: CREATE_TAG_ERR,
+});
+
+export const setCreateTag = (payload) => ({
+  type: CREATE_TAG_SUCCESS,
+  payload,
+});

src/store/actions/tags/tagsActionConstants.js

 } from "../actionHelpers";
 
 const FETCH_TAGS_SCOPE = "FETCH_TAGS";
+const CREATE_TAG_SCOPE = "CREATE_TAG";
 
 export const FETCH_TAGS_REQ = createFetchType(FETCH_TAGS_SCOPE);
 export const FETCH_TAGS_ERR = createErrorType(FETCH_TAGS_SCOPE);
 
 export const CHANGE_TAG_ISCHECKED_VALUE = "CHANGE_TAG_ISCHECKED_VALUE";
 export const RESET_CHECKED_TAGS = "RESET_CHECKED_TAGS";
+
+export const CREATE_TAG_REQ = createFetchType(CREATE_TAG_SCOPE);
+export const CREATE_TAG_ERR = createErrorType(CREATE_TAG_SCOPE);
+export const CREATE_TAG_SUCCESS = createSuccessType(CREATE_TAG_SCOPE);

src/store/reducers/tag/tagsReducer.js

   FETCH_TAGS_SUCCESS,
   CHANGE_TAG_ISCHECKED_VALUE,
   RESET_CHECKED_TAGS,
+  CREATE_TAG_ERR,
+  CREATE_TAG_SUCCESS,
 } from "../../actions/tags/tagsActionConstants";
 import createReducer from "../../utils/createReducer";
 
     [FETCH_TAGS_ERR]: setTagsErrorMessage,
     [CHANGE_TAG_ISCHECKED_VALUE]: setIsCheckedTags,
     [RESET_CHECKED_TAGS]: resetIsCheckedTags,
+    [CREATE_TAG_SUCCESS]: setCreateTagReducer,
+    [CREATE_TAG_ERR]: setCreateTagErrorMessage,
   },
   initialState
 );
 }
 
 function setIsCheckedTags(state, action) {
-  const tmpIndex = state.tags.findIndex(
-    (x) => x.id === action.payload
-  );
+  const tmpIndex = state.tags.findIndex((x) => x.id === action.payload);
 
   if (tmpIndex === -1) {
     return state;
     tags: state.tags.map((tag) => ({ ...tag, isChecked: false })),
   };
 }
+
+function setCreateTagReducer(state) {
+  return {
+    ...state,
+  };
+}
+
+function setCreateTagErrorMessage(state, action) {
+  return {
+    ...state,
+    errorMessage: action.payload,
+  };
+}

src/store/saga/tagsSaga.js

 import { all, call, put, takeLatest, takeEvery } from "redux-saga/effects";
-import { setTags, setTagsError } from "../actions/tags/tagsAction";
+import {
+  setTags,
+  setTagsError,
+  setCreateTag,
+  createTagError,
+} from "../actions/tags/tagsAction";
 import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
 import { JWT_TOKEN } from "../../constants/localStorage";
 import { addHeaderToken } from "../../request";
 import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
-import { FETCH_TAGS_REQ } from "../actions/tags/tagsActionConstants";
+import { FETCH_TAGS_REQ,CREATE_TAG_REQ } from "../actions/tags/tagsActionConstants";
 import { getAllTags } from "../../request/tagsRequest";
-import { getFileFilters } from "../../request/tagsRequest";
+import { getFileFilters, createTagRequest } from "../../request/tagsRequest";
 import { FILE_FILTERS_REQ } from "../actions/files/fileActionConstants";
 import {
   getFileFiltersError,
     }
   }
 }
+
+export function* createTagSaga({ payload }) {
+  console.log("Payload je to",payload)
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    yield call(createTagRequest, {
+      name: payload.name,
+    });
+    yield put(setCreateTag());
+    if (payload.onSuccess) yield call(payload.onSuccess);
+  } catch (error) {
+    const errorMessage = yield call(rejectErrorCodeHelper, error);
+    yield put(createTagError(errorMessage));
+  }
+}
+
 export default function* tagsSaga() {
   yield all([takeLatest(FETCH_TAGS_REQ, getTags)]);
   yield all([takeEvery(FILE_FILTERS_REQ, getFileFiltersGen)]);
+  yield all([takeEvery(CREATE_TAG_REQ, createTagSaga)]);
 }