Merge pull request #199 from Arnei/event-upload-progress-bar

Add event upload progress

app/src/actions/notificationActions.js

@@ -22,6 +22,11 @@ export const createNotification = (notification) => ({
 	payload: { notification, id: nextNotificationId++ },
 });
 
+export const createNotificationWithId = (notification, id) => ({
+	type: CREATE_NOTIFICATION,
+	payload: { notification, id: id },
+});
+
 export const removeNotification = (id) => ({
 	type: REMOVE_NOTIFICATION,
 	payload: { id },

app/src/components/shared/Notifications.js

@@ -34,7 +34,7 @@ const Notifications = ({
 					onClick={() => closeNotification(notification.id)}
 					className="button-like-anchor fa fa-times close"
 				/>
-				<p>{t(notification.message)}</p>
+				<p>{t(notification.message, notification.parameter)}</p>
 			</div>
 		</li>
 	);

app/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -161,7 +161,7 @@
 		"SERIES_ADDED": "The series has been created",
 		"SERIES_NOT_SAVED": "The series could not be saved",
 		"EVENTS_CREATED": "The event has been created",
-		"EVENTS_UPLOAD_STARTED": "The event is being uploaded…",
+		"EVENTS_UPLOAD_STARTED": "The event is being uploaded… {{ progress }}%",
 		"EVENTS_NOT_CREATED": "The event could not be created",
 		"EVENTS_UPDATED_ALL": "All events have been successfully updated",
 		"EVENTS_NOT_UPDATED": "The event could not be saved",

app/src/reducers/notificationReducers.js

@@ -45,6 +45,21 @@ export const notifications = (state = initialState, action) => {
 	switch (type) {
 		case CREATE_NOTIFICATION: {
 			const { notification, id } = payload;
+      if (state.notifications.filter(e => e.id === id).length > 0) {
+        console.log("Notification with id: " + id + " already exists.")
+        return {
+          ...state,
+          notifications: state.notifications.map((oldNotification) => {
+            if (oldNotification.id === id) {
+              return {
+                id: id,
+                ...notification,
+              };
+            }
+            return oldNotification;
+          }),
+        };
+      }
 			return {
 				...state,
 				notifications: [

app/src/selectors/notificationSelector.js

@@ -4,8 +4,9 @@ export const getNotifications = (state) => state.notifications.notifications;
 export const getGlobalPositions = (state) =>
 	state.notifications.notificationPositionGlobal;
 
-export const getNotificationById = (id) =>
-	createSelector(getNotifications, (notifications) =>
+export const getNotificationById = createSelector(
+  getNotifications,
+  (notifications, id) =>
 		notifications.filter((notification) => notification.id === id)
 	);
 

app/src/thunks/eventThunks.js

@@ -25,12 +25,13 @@ import {
 	weekdays,
 	WORKFLOW_UPLOAD_ASSETS_NON_TRACK,
 } from "../configs/modalConfig";
-import { addNotification } from "./notificationThunks";
+import { addNotification, addNotificationWithId } from "./notificationThunks";
 import {
 	getAssetUploadOptions,
 	getSchedulingEditedEvents,
 } from "../selectors/eventSelectors";
 import { fetchSeriesOptions } from "./seriesThunks";
+import { removeNotification } from "../actions/notificationActions";
 
 // fetch events from server
 export const fetchEvents = () => async (dispatch, getState) => {
@@ -438,13 +439,22 @@ export const postNewEvent = (values, metadataInfo, extendedMetadata) => async (
 		})
 	);
 
-	// Todo: process bar notification
+	// Process bar notification
+  var config = {
+    onUploadProgress: function(progressEvent) {
+      var percentCompleted = (progressEvent.loaded * 100) / progressEvent.total;
+      dispatch(addNotificationWithId(-42000, "success", "EVENTS_UPLOAD_STARTED", -1, { "progress": percentCompleted.toFixed(2) } ))
+      if (percentCompleted >= 100) {
+        dispatch(removeNotification(-42000))
+      }
+    },
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  };
+
 	axios
-		.post("/admin-ng/event/new", formData, {
-			headers: {
-				"Content-Type": "multipart/form-data",
-			},
-		})
+		.post("/admin-ng/event/new", formData, config)
 		.then((response) => {
 			console.info(response);
 			dispatch(addNotification("success", "EVENTS_CREATED"));

app/src/thunks/notificationThunks.js

@@ -1,5 +1,6 @@
 import {
 	createNotification,
+  createNotificationWithId,
 	removeNotification,
 } from "../actions/notificationActions";
 import { getLastAddedNotification } from "../selectors/notificationSelector";
@@ -9,7 +10,7 @@ import {
 	ADMIN_NOTIFICATION_DURATION_WARNING,
 } from "../configs/generalConfig";
 
-export const addNotification = (type, key, duration, parameter, context) => (
+export const addNotification = (type, key, duration, parameter, context, id) => (
 	dispatch,
 	getState
 ) => {
@@ -49,7 +50,12 @@ export const addNotification = (type, key, duration, parameter, context) => (
 		hidden: false,
 		context: context,
 	};
-	dispatch(createNotification(notification));
+  var dispatchedNotification;
+  if (!id) {
+	  dispatchedNotification = dispatch(createNotification(notification));
+  } else {
+    dispatchedNotification = dispatch(createNotificationWithId(notification, id));
+  }
 
 	// Get newly created notification and its id
 	let latestNotification = getLastAddedNotification(getState());
@@ -65,4 +71,13 @@ export const addNotification = (type, key, duration, parameter, context) => (
 			latestNotification.duration
 		);
 	}
+
+  return dispatchedNotification.payload.id;
 };
+
+export const addNotificationWithId = (id, type, key, duration, parameter, context) => (
+	dispatch,
+	getState
+) => {
+    dispatch(addNotification(type, key, duration, parameter, context, id))
+}