mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-07 16:44:27 +01:00
Improved feat-/#220
This commit is contained in:
parent
1804454ff0
commit
336ad38cb9
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { IconSearch, IconFolders, IconSortAZ } from '@tabler/icons';
|
||||
import { IconSearch, IconFolders, IconArrowsSort, IconSortAscendingLetters, IconSortDescendingLetters } from '@tabler/icons';
|
||||
import Collection from '../Collections/Collection';
|
||||
import CreateCollection from '../CreateCollection';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
@ -11,6 +11,23 @@ import { sortCollections } from 'providers/ReduxStore/slices/collections/actions
|
||||
|
||||
const CollectionsBadge = () => {
|
||||
const dispatch = useDispatch()
|
||||
const { collections } = useSelector((state) => state.collections);
|
||||
const { collectionSortOrder } = useSelector((state) => state.collections);
|
||||
const sortCollectionOrder = () => {
|
||||
let order;
|
||||
switch (collectionSortOrder) {
|
||||
case 'default':
|
||||
order = 'alphabetical'
|
||||
break;
|
||||
case 'alphabetical':
|
||||
order = 'reverseAlphabetical'
|
||||
break;
|
||||
case 'reverseAlphabetical':
|
||||
order = 'default'
|
||||
break;
|
||||
}
|
||||
dispatch(sortCollections({ order }))
|
||||
}
|
||||
return (
|
||||
<div className="items-center mt-2 relative">
|
||||
<div className='collections-badge flex items-center justify-between px-2' >
|
||||
@ -20,9 +37,16 @@ const CollectionsBadge = () => {
|
||||
</span>
|
||||
<span>Collections</span>
|
||||
</div>
|
||||
<button onClick={() => dispatch(sortCollections())} >
|
||||
<IconSortAZ size={18} strokeWidth={1.5} />
|
||||
</button>
|
||||
{
|
||||
collections.length >= 1 && <button onClick={() => sortCollectionOrder()} >
|
||||
{
|
||||
collectionSortOrder == 'default' ? <IconArrowsSort size={18} strokeWidth={1.5} /> : collectionSortOrder == 'alphabetical' ?
|
||||
<IconSortAscendingLetters size={18} strokeWidth={1.5} /> : <IconSortDescendingLetters size={18} strokeWidth={1.5} />
|
||||
}
|
||||
|
||||
</button>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -34,12 +34,12 @@ import {
|
||||
renameItem as _renameItem,
|
||||
cloneItem as _cloneItem,
|
||||
deleteItem as _deleteItem,
|
||||
sortCollections as _sortCollections,
|
||||
saveRequest as _saveRequest,
|
||||
selectEnvironment as _selectEnvironment,
|
||||
createCollection as _createCollection,
|
||||
renameCollection as _renameCollection,
|
||||
removeCollection as _removeCollection,
|
||||
sortCollections as _sortCollections,
|
||||
collectionAddEnvFileEvent as _collectionAddEnvFileEvent
|
||||
} from './index';
|
||||
|
||||
@ -145,7 +145,10 @@ export const cancelRequest = (cancelTokenUid, item, collection) => (dispatch) =>
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
};
|
||||
|
||||
export const sortCollections = (order) => (dispatch) => {
|
||||
console.log("working")
|
||||
dispatch(_sortCollections(order))
|
||||
}
|
||||
export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const collection = findCollectionByUid(state.collections.collections, collectionUid);
|
||||
@ -375,9 +378,6 @@ export const deleteItem = (itemUid, collectionUid) => (dispatch, getState) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const sortCollections = () => (dispatch) => {
|
||||
dispatch(_sortCollections());
|
||||
};
|
||||
export const moveItem = (collectionUid, draggedItemUid, targetItemUid) => (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const collection = findCollectionByUid(state.collections.collections, collectionUid);
|
||||
|
@ -28,7 +28,8 @@ import { getSubdirectoriesFromRoot, getDirectoryName } from 'utils/common/platfo
|
||||
const PATH_SEPARATOR = path.sep;
|
||||
|
||||
const initialState = {
|
||||
collections: []
|
||||
collections: [],
|
||||
collectionSortOrder: 'default'
|
||||
};
|
||||
|
||||
export const collectionsSlice = createSlice({
|
||||
@ -38,13 +39,14 @@ export const collectionsSlice = createSlice({
|
||||
createCollection: (state, action) => {
|
||||
const collectionUids = map(state.collections, (c) => c.uid);
|
||||
const collection = action.payload;
|
||||
|
||||
// last action is used to track the last action performed on the collection
|
||||
// this is optional
|
||||
// this is used in scenarios where we want to know the last action performed on the collection
|
||||
// and take some extra action based on that
|
||||
// for example, when a env is created, we want to auto select it the env modal
|
||||
collection.importedAt = new Date().getTime()
|
||||
collection.lastAction = null;
|
||||
console.log(collection)
|
||||
|
||||
collapseCollection(collection);
|
||||
addDepth(collection.items);
|
||||
@ -70,8 +72,19 @@ export const collectionsSlice = createSlice({
|
||||
removeCollection: (state, action) => {
|
||||
state.collections = filter(state.collections, (c) => c.uid !== action.payload.collectionUid);
|
||||
},
|
||||
sortCollections: (state) => {
|
||||
state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name))
|
||||
sortCollections: (state, action) => {
|
||||
state.collectionSortOrder = action.payload.order
|
||||
switch (action.payload.order) {
|
||||
case 'default':
|
||||
state.collections = state.collections.sort((a, b) => a.importedAt - b.importedAt)
|
||||
break;
|
||||
case 'alphabetical':
|
||||
state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name))
|
||||
break;
|
||||
case 'reverseAlphabetical':
|
||||
state.collections = state.collections.sort((a, b) => b.name.localeCompare(a.name))
|
||||
break;
|
||||
}
|
||||
},
|
||||
updateLastAction: (state, action) => {
|
||||
const { collectionUid, lastAction } = action.payload;
|
||||
|
Loading…
Reference in New Issue
Block a user