Bulk actions

frontend/src/questions/components/ActionHeader.jsx

@@ -6,10 +6,10 @@ import Icon from "metabase/components/Icon.jsx";
 
 import LabelPopover from "../containers/LabelPopover.jsx";
 
-const ActionHeader = ({ selectedCount, allSelected, setAllSelected, archiveSelected }) =>
+const ActionHeader = ({ selectedCount, allAreSelected, setAllSelected, setArchived, labels }) =>
     <div className={S.actionHeader}>
         <StackedCheckBox
-            checked={allSelected}
+            checked={allAreSelected}
             onChange={(e) => setAllSelected(e.target.checked)}
             className={S.allCheckbox}
             size={20} padding={3} borderColor="currentColor"
@@ -27,8 +27,9 @@ const ActionHeader = ({ selectedCount, allSelected, setAllSelected, archiveSelec
                         <Icon name="chevrondown" width={12} height={12} />
                     </span>
                 }
+                labels={labels}
             />
-            <span className={S.archiveButton} onClick={archiveSelected}>
+            <span className={S.archiveButton} onClick={() => setArchived()}>
                 <Icon name="grid" />
                 Archive
             </span>

frontend/src/questions/containers/EntityList.jsx

@@ -7,8 +7,8 @@ import List from "../components/List.jsx";
 import SearchHeader from "../components/SearchHeader.jsx";
 import ActionHeader from "../components/ActionHeader.jsx";
 
-import { setSearchText, setItemSelected, setAllSelected } from "../questions";
-import { getSearchText, getEntityType, getEntityIds, getSectionName, getSelectedCount, getVisibleCount } from "../selectors";
+import { setSearchText, setItemSelected, setAllSelected, setArchived } from "../questions";
+import { getSearchText, getEntityType, getEntityIds, getSectionName, getSelectedCount, getAllAreSelected, getLabelsWithSelectedState } from "../selectors";
 
 const mapStateToProps = (state, props) => {
   return {
@@ -19,20 +19,23 @@ const mapStateToProps = (state, props) => {
 
       name:             getSectionName(state),
       selectedCount:    getSelectedCount(state),
-      visibleCount:     getVisibleCount(state)
+      allAreSelected:   getAllAreSelected(state),
+
+      labels:           getLabelsWithSelectedState(state)
   }
 }
 
 const mapDispatchToProps = {
     setItemSelected,
     setAllSelected,
-    setSearchText
+    setSearchText,
+    setArchived
 }
 
 @connect(mapStateToProps, mapDispatchToProps)
 export default class EntityList extends Component {
     render() {
-        const { style, name, selectedCount, visibleCount, searchText, setSearchText, entityType, entityIds, setItemSelected, setAllSelected } = this.props;
+        const { style, name, selectedCount, allAreSelected, labels, searchText, setSearchText, entityType, entityIds, setItemSelected, setAllSelected, setArchived } = this.props;
         return (
             <div style={style} className={S.list}>
                 <div className={S.header}>
@@ -41,8 +44,10 @@ export default class EntityList extends Component {
                 { selectedCount > 0 ?
                     <ActionHeader
                         selectedCount={selectedCount}
-                        allSelected={selectedCount === visibleCount && visibleCount > 0}
+                        allAreSelected={allAreSelected}
                         setAllSelected={setAllSelected}
+                        setArchived={setArchived}
+                        labels={labels}
                     />
                 :
                     <SearchHeader searchText={searchText} setSearchText={setSearchText} />

frontend/src/questions/containers/LabelPopover.jsx

@@ -9,7 +9,7 @@ import { getLabels } from "../selectors";
 
 const mapStateToProps = (state, props) => {
   return {
-      labels: getLabels(state)
+      labels: props.labels || getLabels(state)
   }
 }
 

frontend/src/questions/questions.js

@@ -5,6 +5,8 @@ import { normalize, Schema, arrayOf } from 'normalizr';
 import i from "icepick";
 import _ from "underscore";
 
+import { getSelectedEntities } from "./selectors";
+
 const card = new Schema('cards');
 const label = new Schema('labels');
 card.define({
@@ -67,24 +69,38 @@ export const setFavorited = createThunkAction(SET_FAVORITED, (cardId, favorited)
 
 export const setArchived = createThunkAction(SET_ARCHIVED, (cardId, archived) => {
     return async (dispatch, getState) => {
-        let card = {
-            ...getState().questions.entities.cards[cardId],
-            archived: archived
-        };
-        return await CardApi.update(card);
+        if (cardId == null) {
+            // bulk archive
+            let selected = getSelectedEntities(getState());
+            selected.map(item => dispatch(setArchived(item.id, !selected[0].archived)));
+            // TODO: errors
+        } else {
+            let card = {
+                ...getState().questions.entities.cards[cardId],
+                archived: archived
+            };
+            return await CardApi.update(card);
+        }
     }
 });
 
 export const setLabeled = createThunkAction(SET_LABELED, (cardId, labelId, labeled) => {
     return async (dispatch, getState) => {
-        const labels = getState().questions.entities.cards[cardId].labels;
-        const newLabels = labels.filter(id => id !== labelId);
-        if (labeled) {
-            newLabels.push(labelId);
-        }
-        if (labels.length !== newLabels.length) {
-            await CardApi.updateLabels({ cardId, label_ids: newLabels });
-            return { id: cardId, labels: newLabels };
+        if (cardId == null) {
+            // bulk label
+            let selected = getSelectedEntities(getState());
+            selected.map(item => dispatch(setLabeled(item.id, labelId, labeled)));
+            // TODO: errors
+        } else {
+            const labels = getState().questions.entities.cards[cardId].labels;
+            const newLabels = labels.filter(id => id !== labelId);
+            if (labeled) {
+                newLabels.push(labelId);
+            }
+            if (labels.length !== newLabels.length) {
+                await CardApi.updateLabels({ cardId, label_ids: newLabels });
+                return { id: cardId, labels: newLabels };
+            }
         }
     }
 });

frontend/src/questions/selectors.js

@@ -18,7 +18,7 @@ export const getItemsBySectionId    = (state) => state.questions.itemsBySectionI
 
 // export const getQuestions = (state) => state.questions.questions;
 export const getSearchText          = (state) => state.questions.searchText;
-export const getSelectedIds       = (state) => state.questions.selectedIds;
+export const getSelectedIds         = (state) => state.questions.selectedIds;
 export const getAllSelected         = (state) => state.questions.allSelected
 
 export const getEntityIds = createSelector(
@@ -69,7 +69,7 @@ const getVisibleEntities = createSelector(
         allEntities.filter(entity => caseInsensitiveSearch(entity.name, searchText))
 );
 
-const getSelectedEntities = createSelector(
+export const getSelectedEntities = createSelector(
     [getVisibleEntities, getSelectedIds, getAllSelected],
     (visibleEntities, selectedIds, allSelected) =>
         visibleEntities.filter(entity => allSelected || selectedIds[entity.id])
@@ -85,6 +85,12 @@ export const getSelectedCount = createSelector(
     (selectedEntities) => selectedEntities.length
 );
 
+export const getAllAreSelected = createSelector(
+    [getSelectedCount, getVisibleCount],
+    (selectedCount, visibleCount) =>
+        selectedCount === visibleCount && visibleCount > 0
+)
+
 // FIXME:
 export const getSectionName = (state, props) =>
     sections[0].name;
@@ -106,4 +112,30 @@ export const getLabels = createSelector(
         labelIds.map(id => labelEntities[id])
 )
 
+const getLabelCountsForSelectedEntities = createSelector(
+    [getSelectedEntities],
+    (entities) => {
+        let counts = {};
+        for (let entity of entities) {
+            for (let labelId of entity.labels) {
+                counts[labelId] = (counts[labelId] || 0) + 1;
+            }
+        }
+        return counts;
+    }
+)
+
+export const getLabelsWithSelectedState = createSelector(
+    [getLabels, getSelectedCount, getLabelCountsForSelectedEntities],
+    (labels, selectedCount, counts) =>
+        labels.map(label => ({
+            ...label,
+            count: counts[label.id],
+            selected:
+                counts[label.id] === 0 || counts[label.id] == null ? false :
+                counts[label.id] === selectedCount ? true :
+                null
+        }))
+)
+
 export const getEditingLabelId = (state) => state.labels.editing;