Handle delete single entry

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js

@@ -10,7 +10,7 @@ import CustomInputCheckbox from '../CustomInputCheckbox';
 import { ActionContainer, Truncate, Truncated } from './styledComponents';
 
 function Row({ isBulkable, row, headers }) {
-  const { entriesToDelete, onChangeBulk } = useListView();
+  const { entriesToDelete, onChangeBulk, onClickDelete } = useListView();
 
   return (
     <>
@@ -44,7 +44,9 @@ function Row({ isBulkable, row, headers }) {
             {
               id: row.id,
               icoType: 'trash',
-              onClick: () => {},
+              onClick: () => {
+                onClickDelete(row.id);
+              },
             },
           ]}
         />

packages/strapi-plugin-content-manager/admin/src/containers/ListView/actions.js

@@ -3,9 +3,12 @@ import {
   GET_DATA_SUCCEEDED,
   ON_CHANGE_BULK,
   ON_CHANGE_BULK_SELECT_ALL,
+  ON_DELETE_DATA,
+  ON_DELETE_DATA_SUCCEEDED,
   ON_DELETE_SEVERAL_DATA,
   ON_DELETE_SEVERAL_DATA_SUCCEEDED,
   RESET_PROPS,
+  TOGGLE_MODAL_DELETE,
   TOGGLE_MODAL_DELETE_ALL,
 } from './constants';
 
@@ -39,6 +42,22 @@ export function onChangeBulkSelectall() {
   };
 }
 
+export function onDeleteData(id, uid, source, emitEvent) {
+  return {
+    type: ON_DELETE_DATA,
+    id,
+    uid,
+    source,
+    emitEvent,
+  };
+}
+
+export function onDeleteDataSucceeded() {
+  return {
+    type: ON_DELETE_DATA_SUCCEEDED,
+  };
+}
+
 export function onDeleteSeveralData(ids, slug, source) {
   return {
     type: ON_DELETE_SEVERAL_DATA,
@@ -63,3 +82,9 @@ export function toggleModalDeleteAll() {
     type: TOGGLE_MODAL_DELETE_ALL,
   };
 }
+
+export function toggleModalDelete() {
+  return {
+    type: TOGGLE_MODAL_DELETE,
+  };
+}

packages/strapi-plugin-content-manager/admin/src/containers/ListView/constants.js

@@ -3,6 +3,9 @@ export const GET_DATA_SUCCEEDED = 'ContentManager/ListView/GET_DATA_SUCCEEDED';
 export const ON_CHANGE_BULK = 'ContentManager/ListView/ON_CHANGE_BULK';
 export const ON_CHANGE_BULK_SELECT_ALL =
   'ContentManager/ListView/ON_CHANGE_BULK_SELECT_ALL';
+export const ON_DELETE_DATA = 'ContentManager/ListView/ON_DELETE_DATA';
+export const ON_DELETE_DATA_SUCCEEDED =
+  'ContentManager/ListView/ON_DELETE_DATA_SUCCEEDED';
 export const ON_DELETE_SEVERAL_DATA =
   'ContentManager/ListView/ON_DELETE_SEVERAL_DATA';
 export const ON_DELETE_SEVERAL_DATA_SUCCEEDED =
@@ -10,3 +13,5 @@ export const ON_DELETE_SEVERAL_DATA_SUCCEEDED =
 export const RESET_PROPS = 'ContentManager/ListView/RESET_PROPS';
 export const TOGGLE_MODAL_DELETE_ALL =
   'ContentManager/ListView/TOGGLE_MODAL_DELETE_ALL';
+export const TOGGLE_MODAL_DELETE =
+  'ContentManager/ListView/TOGGLE_MODAL_DELETE';

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -34,8 +34,10 @@ import {
   getData,
   onChangeBulk,
   onChangeBulkSelectall,
+  onDeleteData,
   onDeleteSeveralData,
   resetProps,
+  toggleModalDelete,
   toggleModalDeleteAll,
 } from './actions';
 import reducer from './reducer';
@@ -58,10 +60,13 @@ function ListView({
   onChangeBulk,
   onChangeBulkSelectall,
   onChangeListLabels,
+  onDeleteData,
   onDeleteSeveralData,
   resetListLabels,
   resetProps,
   shouldRefetchData,
+  showWarningDelete,
+  toggleModalDelete,
   showWarningDeleteAll,
   toggleModalDeleteAll,
 }) {
@@ -71,6 +76,7 @@ function ListView({
   const getLayoutSettingRef = useRef();
   const [isLabelPickerOpen, setLabelPickerState] = useState(false);
   const [isFilterPickerOpen, setFilterPickerState] = useState(false);
+  const [idToDelete, setIdToDelete] = useState(null);
 
   getLayoutSettingRef.current = settingName =>
     get(layouts, [slug, 'settings', settingName], '');
@@ -176,6 +182,10 @@ function ListView({
     resetProps();
     getData(slug, updatedSearch);
   };
+  const handleClickDelete = id => {
+    setIdToDelete(id);
+    toggleModalDelete();
+  };
 
   const handleSubmit = () => {
     emitEvent('didFilterEntries');
@@ -220,6 +230,7 @@ function ListView({
         onChangeBulk={onChangeBulk}
         onChangeBulkSelectall={onChangeBulkSelectall}
         onChangeParams={handleChangeParams}
+        onClickDelete={handleClickDelete}
         onDeleteSeveralData={onDeleteSeveralData}
         searchParams={getSearchParams()}
         slug={slug}
@@ -333,14 +344,30 @@ function ListView({
             </div>
           </Wrapper>
         </Container>
+        <PopUpWarning
+          isOpen={showWarningDelete}
+          toggleModal={toggleModalDelete}
+          content={{
+            title: `${pluginId}.popUpWarning.title`,
+            message: `${pluginId}.popUpWarning.bodyMessage.contentType.delete`,
+            cancel: `${pluginId}.popUpWarning.button.cancel`,
+            confirm: `${pluginId}.popUpWarning.button.confirm`,
+          }}
+          popUpWarningType="danger"
+          onConfirm={() => {
+            onDeleteData(idToDelete, slug, getSearchParams().source, emitEvent);
+          }}
+        />
         <PopUpWarning
           isOpen={showWarningDeleteAll}
           toggleModal={toggleModalDeleteAll}
           content={{
-            title: 'content-manager.popUpWarning.title',
-            // message: this.getPopUpDeleteAllMsg(),
-            cancel: 'content-manager.popUpWarning.button.cancel',
-            confirm: 'content-manager.popUpWarning.button.confirm',
+            title: `${pluginId}.popUpWarning.title`,
+            message: `${pluginId}.popUpWarning.bodyMessage.contentType.delete${
+              entriesToDelete.length > 1 ? '.all' : ''
+            }`,
+            cancel: `${pluginId}.popUpWarning.button.cancel`,
+            confirm: `${pluginId}.popUpWarning.button.confirm`,
           }}
           popUpWarningType="danger"
           onConfirm={() => {
@@ -381,11 +408,14 @@ ListView.propTypes = {
   onChangeBulk: PropTypes.func.isRequired,
   onChangeBulkSelectall: PropTypes.func.isRequired,
   onChangeListLabels: PropTypes.func.isRequired,
+  onDeleteData: PropTypes.func.isRequired,
   onDeleteSeveralData: PropTypes.func.isRequired,
   resetListLabels: PropTypes.func.isRequired,
   resetProps: PropTypes.func.isRequired,
   shouldRefetchData: PropTypes.bool.isRequired,
+  showWarningDelete: PropTypes.bool.isRequired,
   showWarningDeleteAll: PropTypes.bool.isRequired,
+  toggleModalDelete: PropTypes.func.isRequired,
   toggleModalDeleteAll: PropTypes.func.isRequired,
 };
 
@@ -398,9 +428,11 @@ export function mapDispatchToProps(dispatch) {
       onChangeBulk,
       onChangeBulkSelectall,
       onChangeListLabels,
+      onDeleteData,
       onDeleteSeveralData,
       resetListLabels,
       resetProps,
+      toggleModalDelete,
       toggleModalDeleteAll,
     },
     dispatch

packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js

@@ -10,7 +10,9 @@ import {
   RESET_PROPS,
   ON_CHANGE_BULK,
   ON_CHANGE_BULK_SELECT_ALL,
+  ON_DELETE_DATA_SUCCEEDED,
   ON_DELETE_SEVERAL_DATA_SUCCEEDED,
+  TOGGLE_MODAL_DELETE,
   TOGGLE_MODAL_DELETE_ALL,
 } from './constants';
 
@@ -20,6 +22,7 @@ export const initialState = fromJS({
   entriesToDelete: List([]),
   isLoading: true,
   shouldRefetchData: false,
+  showWarningDelete: false,
   showWarningDeleteAll: false,
 });
 
@@ -48,12 +51,20 @@ function listViewReducer(state = initialState, action) {
 
         return state.get('data').map(value => toString(value.id));
       });
+    case ON_DELETE_DATA_SUCCEEDED:
+      return state
+        .update('shouldRefetchData', v => !v)
+        .update('showWarningDelete', () => false);
     case ON_DELETE_SEVERAL_DATA_SUCCEEDED:
       return state
         .update('shouldRefetchData', v => !v)
         .update('showWarningDeleteAll', () => false);
     case RESET_PROPS:
       return initialState;
+    case TOGGLE_MODAL_DELETE:
+      return state
+        .update('entriesToDelete', () => List([]))
+        .update('showWarningDelete', v => !v);
     case TOGGLE_MODAL_DELETE_ALL:
       return state.update('showWarningDeleteAll', v => !v);
     default:

packages/strapi-plugin-content-manager/admin/src/containers/ListView/saga.js

@@ -3,9 +3,12 @@ import { request } from 'strapi-helper-plugin';
 import { set, unset } from 'lodash';
 import pluginId from '../../pluginId';
 
-import { getDataSucceeded, onDeleteSeveralDataSucceeded } from './actions';
-import { GET_DATA, ON_DELETE_SEVERAL_DATA } from './constants';
-// import {} from './selectors';
+import {
+  getDataSucceeded,
+  onDeleteSeveralDataSucceeded,
+  onDeleteDataSucceeded,
+} from './actions';
+import { GET_DATA, ON_DELETE_DATA, ON_DELETE_SEVERAL_DATA } from './constants';
 
 const getRequestUrl = path => `/${pluginId}/explorer/${path}`;
 
@@ -34,15 +37,31 @@ export function* getData({ uid, params }) {
 
     yield put(getDataSucceeded(count, data));
   } catch (err) {
-    console.log({ err });
-    strapi.notification.error('content-manager.error.model.fetch');
+    strapi.notification.error(`${pluginId}.error.model.fetch`);
+  }
+}
+
+export function* deleteData({ id, uid, source, emitEvent }) {
+  try {
+    const params = { source };
+
+    emitEvent('willDeleteEntry');
+    yield call(request, getRequestUrl(`${uid}/${id}`), {
+      method: 'DELETE',
+      params,
+    });
+
+    strapi.notification.success(`${pluginId}.success.record.delete`);
+    yield put(onDeleteDataSucceeded());
+    emitEvent('didDeleteEntry');
+  } catch (err) {
+    strapi.notification.error(`${pluginId}.error.record.delete`);
   }
 }
 
 export function* deleteAll({ ids, slug, source }) {
   try {
     const params = Object.assign(ids, { source });
-    console.log({ params });
 
     yield call(request, getRequestUrl(`deleteAll/${slug}`), {
       method: 'DELETE',
@@ -50,10 +69,10 @@ export function* deleteAll({ ids, slug, source }) {
     });
 
     yield put(onDeleteSeveralDataSucceeded());
-    // yield call(dataGet, { currentModel: model, source });
-    strapi.notification.success('content-manager.success.record.delete');
+
+    strapi.notification.success(`${pluginId}.success.record.delete`);
   } catch (err) {
-    strapi.notification.error('content-manager.error.record.delete');
+    strapi.notification.error(`${pluginId}.error.record.delete`);
   }
 }
 
@@ -61,6 +80,7 @@ function* defaultSaga() {
   try {
     yield all([
       fork(takeLatest, GET_DATA, getData),
+      fork(takeLatest, ON_DELETE_DATA, deleteData),
       fork(takeLatest, ON_DELETE_SEVERAL_DATA, deleteAll),
     ]);
   } catch (err) {