Refacto delete screenshot

webapp/src/main/resources/public/js/actions/branches/BranchesScreenshotViewerActions.js

@@ -7,7 +7,10 @@ class BranchesScreenshotViewerActions {
             "open",
             "close",
             "goToPrevious",
-            "goToNext"
+            "goToNext",
+            "delete",
+            "onDeleteSuccess",
+            "onDeleteFailure"
         );
     }
 }

webapp/src/main/resources/public/js/actions/screenshots/ScreenshotsDataSource.js

@@ -7,67 +7,79 @@ import ScreenshotClient from "../../sdk/ScreenshotClient";
 import {StatusCommonTypes} from "../../components/screenshots/StatusCommon";
 import SearchParamsStore from "../../stores/workbench/SearchParamsStore";
 
-const ScreenshotsDataSource = {
-    performScreenshotSearch: {
-        remote(state) {
-            let screenshotsRepositoryStoreState = ScreenshotsRepositoryStore.getState();
-            let screenshotsLocaleStoreState = ScreenshotsLocaleStore.getState();
-            let screenshotsSearchTextStoreState = ScreenshotsSearchTextStore.getState();
-            let screenshotsPaginatorStoreState = ScreenshotsPaginatorStore.getState();
+class ScreenshotsDataSource {
 
-            let promise;
+    constructor(action) {
+        this.performScreenshotSearch = {
+            remote(state) {
+                let screenshotsRepositoryStoreState = ScreenshotsRepositoryStore.getState();
+                let screenshotsLocaleStoreState = ScreenshotsLocaleStore.getState();
+                let screenshotsSearchTextStoreState = ScreenshotsSearchTextStore.getState();
+                let screenshotsPaginatorStoreState = ScreenshotsPaginatorStore.getState();
 
-            if (screenshotsRepositoryStoreState.selectedRepositoryIds.length === 0
+                let promise;
+
+                if (screenshotsRepositoryStoreState.selectedRepositoryIds.length === 0
                     || screenshotsLocaleStoreState.selectedBcp47Tags.length === 0) {
 
-                promise = new Promise((resolve) => {
-                    setTimeout(function () {
-                        resolve({'content': [], 'hasNext': false, 'size': 0});
-                    }, 0);
-                });
-            } else {
-                let params = {
-                    repositoryIds: screenshotsRepositoryStoreState.selectedRepositoryIds,
-                    bcp47Tags: screenshotsLocaleStoreState.selectedBcp47Tags,
-                    status: screenshotsSearchTextStoreState.status === StatusCommonTypes.ALL ? null : screenshotsSearchTextStoreState.status,
-                    screenshotRunType: screenshotsSearchTextStoreState.screenshotRunType,
-                    limit: screenshotsPaginatorStoreState.limit + 1,
-                    offset: screenshotsPaginatorStoreState.limit * (screenshotsPaginatorStoreState.currentPageNumber - 1),
-                };
+                    promise = new Promise((resolve) => {
+                        setTimeout(function () {
+                            resolve({'content': [], 'hasNext': false, 'size': 0});
+                        }, 0);
+                    });
+                } else {
+                    let params = {
+                        repositoryIds: screenshotsRepositoryStoreState.selectedRepositoryIds,
+                        bcp47Tags: screenshotsLocaleStoreState.selectedBcp47Tags,
+                        status: screenshotsSearchTextStoreState.status === StatusCommonTypes.ALL ? null : screenshotsSearchTextStoreState.status,
+                        screenshotRunType: screenshotsSearchTextStoreState.screenshotRunType,
+                        limit: screenshotsPaginatorStoreState.limit + 1,
+                        offset: screenshotsPaginatorStoreState.limit * (screenshotsPaginatorStoreState.currentPageNumber - 1),
+                    };
+
+                    if (screenshotsSearchTextStoreState.searchText) {
 
-                if (screenshotsSearchTextStoreState.searchText) {
+                        if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.SOURCE) {
+                            params.source = screenshotsSearchTextStoreState.searchText;
+                        } else if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.TARGET) {
+                            params.target = screenshotsSearchTextStoreState.searchText;
+                        } else if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.STRING_ID) {
+                            params.name = screenshotsSearchTextStoreState.searchText;
+                        } else {
+                            params.screenshotName = screenshotsSearchTextStoreState.searchText;
+                        }
 
-                    if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.SOURCE) {
-                        params.source = screenshotsSearchTextStoreState.searchText;
-                    } else if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.TARGET) {
-                        params.target = screenshotsSearchTextStoreState.searchText;
-                    } else if (screenshotsSearchTextStoreState.searchAttribute === SearchParamsStore.SEARCH_ATTRIBUTES.STRING_ID) {
-                        params.name = screenshotsSearchTextStoreState.searchText;
-                    } else {
-                        params.screenshotName = screenshotsSearchTextStoreState.searchText;
+                        params.searchType = screenshotsSearchTextStoreState.searchType.toUpperCase();
                     }
 
-                    params.searchType = screenshotsSearchTextStoreState.searchType.toUpperCase();
-                }
+                    promise = ScreenshotClient.getScreenshots(params).then(function (screenshots) {
 
-                promise = ScreenshotClient.getScreenshots(params).then(function (screenshots) {
+                        let hasNext = false;
 
-                    let hasNext = false;
+                        if (screenshots.length === screenshotsPaginatorStoreState.limit + 1) {
+                            hasNext = true;
+                            screenshots = screenshots.slice(0, screenshotsPaginatorStoreState.limit);
+                        }
 
-                    if (screenshots.length === screenshotsPaginatorStoreState.limit + 1) {
-                        hasNext = true;
-                        screenshots = screenshots.slice(0, screenshotsPaginatorStoreState.limit);
-                    }
+                        return {'content': screenshots, 'hasNext': hasNext, 'size': screenshots.length};
+                    });
+                }
 
-                    return {'content': screenshots, 'hasNext': hasNext, 'size': screenshots.length};
-                });
-            }
+                return promise;
+            },
+            success: action.screenshotsSearchResultsReceivedSuccess,
+            error: action.screenshotsSearchResultsReceivedError
+        }
 
-            return promise;
-        },
-        success: ScreenshotsPageActions.screenshotsSearchResultsReceivedSuccess,
-        error: ScreenshotsPageActions.screenshotsSearchResultsReceivedError
-    },
-};
+        this.delete = {
+            remote({branchStatisticScreenshots, number}) {
+                const screenshotId = branchStatisticScreenshots[number - 1].id
+                return ScreenshotClient.deleteScreenshot(screenshotId)
+            },
+            success: action.onDeleteSuccess,
+            error: action.onDeleteFailure
+        }
+    }
+}
 
 export default ScreenshotsDataSource;

webapp/src/main/resources/public/js/actions/workbench/GitBlameScreenshotViewerActions.js

@@ -7,7 +7,10 @@ class GitBlameScreenshotViewerActions {
             "open",
             "close",
             "goToPrevious",
-            "goToNext"
+            "goToNext",
+            "delete",
+            "onDeleteSuccess",
+            "onDeleteFailure"
         );
     }
 }

webapp/src/main/resources/public/js/components/branches/BranchesPage.js

@@ -25,7 +25,6 @@ import RepositoryStore from "../../stores/RepositoryStore";
 import SearchParamsStore from "../../stores/workbench/SearchParamsStore";
 import SearchConstants from "../../utils/SearchConstants";
 
-
 class BranchesPage extends React.Component {
 
     render() {
@@ -220,15 +219,10 @@ class BranchesPage extends React.Component {
 
                 <AltContainer store={BranchesScreenshotViewerStore}>
                     <BranchesScreenshotViewerModal
-                        onGoToPrevious={() => {
-                            BranchesScreenshotViewerActions.goToPrevious();
-                        }}
-                        onGoToNext={() => {
-                            BranchesScreenshotViewerActions.goToNext();
-                        }}
-                        onClose={() => {
-                            BranchesScreenshotViewerActions.close();
-                        }}
+                        onGoToPrevious={BranchesScreenshotViewerActions.goToPrevious}
+                        onGoToNext={BranchesScreenshotViewerActions.goToNext}
+                        onClose={BranchesScreenshotViewerActions.close}
+                        onDelete={BranchesScreenshotViewerActions.delete}
                     />
                 </AltContainer>
 

webapp/src/main/resources/public/js/components/branches/BranchesScreenshotViewerModal.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import {Col, Glyphicon, Image, Modal} from "react-bootstrap";
+import {Button, Col, Glyphicon, Image, Modal, OverlayTrigger, Popover} from "react-bootstrap";
 import keycode from "keycode";
 import ClassNames from "classnames";
 import {injectIntl} from "react-intl";
@@ -12,9 +12,21 @@ class BranchesScreenshotViewerModal extends React.Component {
         "number": PropTypes.number.isRequired,
         "total": PropTypes.number.isRequired,
         "src": PropTypes.string,
+        "isDeleting": PropTypes.bool,
         "onClose": PropTypes.func.isRequired,
         "onGoToPrevious": PropTypes.func.isRequired,
-        "onGoToNext": PropTypes.func.isRequired
+        "onGoToNext": PropTypes.func.isRequired,
+        "onDelete": PropTypes.func.isRequired
+    }
+
+    popover() {
+        return <Popover id="remove-screenshot-popover">
+            <div>Are you sure you wish to remove this screenshot?</div>
+            <Button bsStyle="danger" id="remove-screenshot-confirm-btn"
+                    onClick={this.props.onDelete}>
+                Yes
+            </Button>
+        </Popover>
     }
 
     componentDidMount() {
@@ -55,22 +67,19 @@ class BranchesScreenshotViewerModal extends React.Component {
     }
 
     renderTextUnit(textUnit) {
-        return (
-            <div key={textUnit.id} className="mbm">
+        return (<div key={textUnit.id} className="mbm">
                 <div>{textUnit.tmTextUnit.name}</div>
                 <div className="color-gray-light">{textUnit.tmTextUnit.content}</div>
-            </div>
-        );
+            </div>);
     }
 
     render() {
 
         let hasPrevious = this.props.number > 1;
         let hasNext = this.props.number < this.props.total;
 
-        return this.props.show && (
-            <Modal show={this.props.show} onHide={this.props.onClose}
-                   dialogClassName="branches-screenshotviewer-modal">
+        return this.props.show && (<Modal show={this.props.show} onHide={this.props.onClose}
+                                          dialogClassName="branches-screenshotviewer-modal">
                 <Modal.Header closeButton>
                     <Modal.Title>
                         {this.props.number} / {this.props.total}
@@ -83,6 +92,15 @@ class BranchesScreenshotViewerModal extends React.Component {
                             <div className="branches-screenshotviewer-modal-textunits">
                                 {this.props.textUnits.map((tu) => this.renderTextUnit(tu))}
                             </div>
+                            {this.props.isDeleting ? <div>loading</div> :
+                                <div className="branches-screenshotviewer-modal-delete-container">
+                                    <OverlayTrigger trigger="click" placement="top" overlay={this.popover()}>
+                                        <Button bsStyle="danger" style={{fontSize: 11}}>
+                                            Remove
+                                        </Button>
+                                    </OverlayTrigger>
+                                </div>
+                            }
                         </div>
                     </Col>
 
@@ -105,8 +123,7 @@ class BranchesScreenshotViewerModal extends React.Component {
                     </span>
 
                 </Modal.Body>
-            </Modal>
-        )
+            </Modal>)
     }
 }
 

webapp/src/main/resources/public/js/components/workbench/Workbench.js

@@ -87,15 +87,15 @@ let Workbench = createReactClass({
         return (
             <div>
                 <div className="pull-left">
-                    <RepositoryDropDown />
-                    <LocalesDropdown />
+                    <RepositoryDropDown/>
+                    <LocalesDropdown/>
                 </div>
 
-                <SearchText />
-                <StatusDropdown />
+                <SearchText/>
+                <StatusDropdown/>
 
                 <div className="mtl mbl">
-                    <SearchResults />
+                    <SearchResults/>
                 </div>
                 <AltContainer store={GitBlameStore}>
                     <GitBlameInfoModal
@@ -106,15 +106,10 @@ let Workbench = createReactClass({
                 </AltContainer>
                 <AltContainer store={GitBlameScreenshotViewerStore}>
                     <BranchesScreenshotViewerModal
-                        onGoToPrevious={() => {
-                            GitBlameScreenshotViewerActions.goToPrevious();
-                        }}
-                        onGoToNext={() => {
-                            GitBlameScreenshotViewerActions.goToNext();
-                        }}
-                        onClose={() => {
-                            GitBlameScreenshotViewerActions.close();
-                        }}
+                        onGoToPrevious={GitBlameScreenshotViewerActions.goToPrevious}
+                        onGoToNext={GitBlameScreenshotViewerActions.goToNext}
+                        onClose={GitBlameScreenshotViewerActions.close}
+                        onDelete={GitBlameScreenshotViewerActions.delete}
                     />
                 </AltContainer>
                 <AltContainer store={TranslationHistoryStore}>

webapp/src/main/resources/public/js/sdk/ScreenshotClient.js

@@ -12,7 +12,7 @@ class ScreenshotClient extends BaseClient {
     getScreenshots(params) {
         return this.get(this.getUrl(), params);
     }
- 
+
     updateScreenshot(screenshot) {
         return this.put(this.getUrl() + '/' + screenshot.id, screenshot);
     }
@@ -24,8 +24,15 @@ class ScreenshotClient extends BaseClient {
     getEntityName() {
         return 'screenshots';
     }
+
+    deleteScreenshot(screenshotId) {
+        // return this.delete(`${this.getUrl()}/${screenshotId}`)
+        console.log('deleteScreenshot')
+        return Promise.resolve();
+
+    }
 }
-;
+
 
 export default new ScreenshotClient();
 

webapp/src/main/resources/public/js/stores/ScreenshotViewerStore.js

@@ -1,3 +1,5 @@
+import ScreenshotsDataSource from "../actions/screenshots/ScreenshotsDataSource";
+
 class ScreenshotViewerStore {
 
     constructor() {
@@ -11,6 +13,7 @@ class ScreenshotViewerStore {
         this.total = 0;
         this.branchStatisticScreenshots = [];
         this.textUnits = [];
+        this.isDeleting = false
     }
 
     open(branchStatisticsScreenshots) {
@@ -44,6 +47,27 @@ class ScreenshotViewerStore {
             this.loadScreenshot(this.number + 1);
         }
     }
+
+    delete() {
+        console.log("delete func is being accessed by both stores simultaneously")
+        this.isDeleting = true;
+        this.getInstance().delete()
+    }
+
+    onDeleteSuccess() {
+        console.log("onDeleteSuccess func would also be accessed by both stores simultaneously on the DataSource callback")
+        // if (this.branchStatisticScreenshots.length - 1) {
+        //     this.branchStatisticScreenshots.splice(this.number - 1, 1)
+        //     this.loadScreenshot(1);
+        // } else {
+        //     this.close()
+        // }
+        this.isDeleting = false
+    }
+
+    onDeleteFailure() {
+        this.isDeleting = false
+    }
 }
 
 export default ScreenshotViewerStore;