Bläddra i källkod

add reset filter button and changed behaviour of input for full-text search

FE_dev
Dzenis Hadzifejzovic 2 år sedan
förälder
incheckning
530f096d0c

+ 4
- 0
src/assets/styles/components/_files.scss Visa fil

margin-left: 0px; margin-left: 0px;
} }


.reset-filters{
margin-left: 30px;
}

.filesPage { .filesPage {
align-self: flex-start; align-self: flex-start;
} }

+ 1
- 0
src/i18n/resources/en.js Visa fil

category: "Category", category: "Category",
creationDate: "Creation date", creationDate: "Creation date",
advancedTechnologies: "Advanced technologies", advancedTechnologies: "Advanced technologies",
resetFilters:"Reset filters"
}, },
candidates: { candidates: {
candidates: "Candidates", candidates: "Candidates",

+ 1
- 0
src/i18n/resources/rs.js Visa fil

category: "Kategorija", category: "Kategorija",
creationDate: "Datum kreiranja", creationDate: "Datum kreiranja",
advancedTechnologies: "Napredne tehnologije", advancedTechnologies: "Napredne tehnologije",
resetFilters:"Resetuj filtere"
}, },
candidates: { candidates: {
candidates: "Kandidati", candidates: "Kandidati",

+ 39
- 20
src/pages/FilesPage/FileTable.js Visa fil

getFilesReq, getFilesReq,
setContent, setContent,
updateFileReq, updateFileReq,
resetFilters
} from "../../store/actions/files/fileActions"; } from "../../store/actions/files/fileActions";
import { Fade, Pagination } from "@mui/material"; import { Fade, Pagination } from "@mui/material";
import FilterButton from "../../components/Button/FilterButton"; import FilterButton from "../../components/Button/FilterButton";
}; };


const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (
event.key === "Enter" &&
filters.content !== "" &&
filters.content !== undefined
) {
if (event.key === "Enter") {
var extFilters = []; var extFilters = [];
filters.extensions filters.extensions
?.filter((n) => n.isChecked) ?.filter((n) => n.isChecked)
} }
}; };


const input = (
<div>
<input
placeholder="Pretrazi..."
value={filters.content}
onChange={(e) => handleChangeContent(e.target.value)}
onKeyDown={handleKeyDown}
className="candidate-search-field"
style={{ width: matches ? "160px" : "816px" }}
onClick={stopPropagation}
role="input"
/>
</div>
);

const onError = (e) => { const onError = (e) => {
console.log(e, "error in file-viewer"); console.log(e, "error in file-viewer");
}; };
}); });
}; };


const resFilters = () => {
dispatch(resetFilters())
dispatch(
getFilesReq({
payload: {
pageSize: PAGE_SIZE_FILES,
currentPage: page,
categoryId: id,
extensions: [],
tags: [],
content: "",
},
})
);
};

const input = (
<div>
<input
placeholder="Pretrazi..."
value={filters.content}
onChange={(e) => handleChangeContent(e.target.value)}
onKeyDown={handleKeyDown}
className="candidate-search-field"
style={{ width: matches ? "160px" : "816px" }}
onClick={stopPropagation}
role="input"
/>
</div>
);

return isLoading ? ( return isLoading ? (
<div> <div>
<div className="l-t-rectangle"></div> <div className="l-t-rectangle"></div>
</IconButton> </IconButton>
)} )}
<FilterButton onShowFilters={handleToggleFiltersDrawer} /> <FilterButton onShowFilters={handleToggleFiltersDrawer} />
<IconButton
className="c-btn c-btn--primary-outlined candidate-btn reset-filters userPageBtn ml-20px no-padding custom-filter-button"
onClick={resFilters}
>
{!matches ? t("filters.resetFilters") : null}
</IconButton>
</div> </div>
</div> </div>
<div <div

+ 1
- 1
src/store/actions/files/fileActionConstants.js Visa fil

export const FILE_FILTERS_LOADING = createLoadingType(FILE_FILTERS_SCOPE); export const FILE_FILTERS_LOADING = createLoadingType(FILE_FILTERS_SCOPE);
export const UPDATE_FILTERS_EXTENSION = 'UPDATE_FILTERS_EXTENSION'; export const UPDATE_FILTERS_EXTENSION = 'UPDATE_FILTERS_EXTENSION';
export const UPDATE_FILTERS_TAG = 'UPDATE_FILTERS_TAG'; export const UPDATE_FILTERS_TAG = 'UPDATE_FILTERS_TAG';
export const UPDATE_FILTERS_CATEGORY = 'UPDATE_FILTERS_CATEGORY';
export const SET_CONTENT = 'SET_CONTENT' export const SET_CONTENT = 'SET_CONTENT'
export const RESET_FILTERS = 'RESET_FILTERS'


const FETCH_FILES_SCOPE = "FETCH_FILES"; const FETCH_FILES_SCOPE = "FETCH_FILES";
export const FETCH_FILES_REQ = createFetchType(FETCH_FILES_SCOPE); export const FETCH_FILES_REQ = createFetchType(FETCH_FILES_SCOPE);

+ 15
- 15
src/store/actions/files/fileActions.js Visa fil

FILE_FILTERS_ERR, FILE_FILTERS_ERR,
FILE_FILTERS_REQ, FILE_FILTERS_REQ,
FILE_FILTERS_SUCCESS, FILE_FILTERS_SUCCESS,
UPDATE_FILTERS_CATEGORY,
UPDATE_FILTERS_EXTENSION, UPDATE_FILTERS_EXTENSION,
UPDATE_FILTERS_TAG, UPDATE_FILTERS_TAG,
SET_CONTENT, SET_CONTENT,
DELETE_FILE_SUCCESS, DELETE_FILE_SUCCESS,
UPDATE_FILE_REQ, UPDATE_FILE_REQ,
UPDATE_FILE_ERR, UPDATE_FILE_ERR,
UPDATE_FILE_SUCCESS
UPDATE_FILE_SUCCESS,
RESET_FILTERS,
} from "./fileActionConstants"; } from "./fileActionConstants";


export const getFileFiltersReq = () => ({ export const getFileFiltersReq = () => ({
type: UPDATE_FILTERS_TAG, type: UPDATE_FILTERS_TAG,
payload, payload,
}); });
export const updateFileFilterCat = (payload) => ({
type: UPDATE_FILTERS_CATEGORY,
payload,
});


export const getFilesReq = (payload) => ({ export const getFilesReq = (payload) => ({
type: FETCH_FILES_REQ, type: FETCH_FILES_REQ,
payload
payload,
}); });


export const getFileError = (payload) => ({ export const getFileError = (payload) => ({
}); });


export const setContent = (payload) => ({ export const setContent = (payload) => ({
type:SET_CONTENT,
payload
})
type: SET_CONTENT,
payload,
});


export const updateFileReq = (payload) => ({ export const updateFileReq = (payload) => ({
type: UPDATE_FILE_REQ, type: UPDATE_FILE_REQ,
payload
payload,
}); });


export const updateFileError = (payload) => ({ export const updateFileError = (payload) => ({


export const updateFileAction = (payload) => ({ export const updateFileAction = (payload) => ({
type: UPDATE_FILE_SUCCESS, type: UPDATE_FILE_SUCCESS,
payload
payload,
}); });


export const deleteFileReq = (payload) => ({ export const deleteFileReq = (payload) => ({
type: DELETE_FILE_REQ, type: DELETE_FILE_REQ,
payload
payload,
}); });


export const deleteFileError = (payload) => ({ export const deleteFileError = (payload) => ({


export const deleteFileAction = (payload) => ({ export const deleteFileAction = (payload) => ({
type: DELETE_FILE_SUCCESS, type: DELETE_FILE_SUCCESS,
payload
});
payload,
});

export const resetFilters = () => ({
type: RESET_FILTERS,
});

+ 12
- 11
src/store/reducers/files/fileFiltersReducer.js Visa fil

import { import {
FILE_FILTERS_ERR, FILE_FILTERS_ERR,
FILE_FILTERS_SUCCESS, FILE_FILTERS_SUCCESS,
UPDATE_FILTERS_CATEGORY,
UPDATE_FILTERS_EXTENSION, UPDATE_FILTERS_EXTENSION,
UPDATE_FILTERS_TAG, UPDATE_FILTERS_TAG,
SET_CONTENT
SET_CONTENT,
RESET_FILTERS,
} from "../../actions/files/fileActionConstants"; } from "../../actions/files/fileActionConstants";


const initialState = { const initialState = {
[FILE_FILTERS_ERR]: setFileFiltersErrorMessage, [FILE_FILTERS_ERR]: setFileFiltersErrorMessage,
[UPDATE_FILTERS_EXTENSION]: updateFileFilterExtension, [UPDATE_FILTERS_EXTENSION]: updateFileFilterExtension,
[UPDATE_FILTERS_TAG]: updateFileFilterTag, [UPDATE_FILTERS_TAG]: updateFileFilterTag,
[UPDATE_FILTERS_CATEGORY]: updateFileFilterCategory,
[SET_CONTENT]:setContent
[SET_CONTENT]: setContent,
[RESET_FILTERS]: resetFilters,
}, },
initialState initialState
); );
}; };
} }


function updateFileFilterCategory(state, action) {
function setContent(state, action) {
return { return {
...state, ...state,
filters: { filters: {
...state.filters, ...state.filters,
categories: state.filters.categories?.map((n) =>
n.name === action.payload ? { ...n, isChecked: !n.isChecked } : n
),
content: action.payload,
}, },
}; };
} }


function setContent(state, action) {
function resetFilters(state) {
return { return {
...state, ...state,
filters: { filters: {
...state.filters,
content:action.payload
tags: state.filters.tags?.map((t) => ({ ...t, isChecked: false })),
extensions: state.filters.extensions?.map((c) => ({
...c,
isChecked: false,
})),
}, },
}; };
} }

Laddar…
Avbryt
Spara