fix(notices): missing create notice option

src/client/actions/notices.js

@@ -2,7 +2,11 @@ import { createAction } from 'redux-actions'
 import { FETCH_NOTICES, CREATE_NOTICE, UPDATE_NOTICE, DELETE_NOTICE, UNLOAD_NOTICES } from 'actions/types'
 
 export const fetchNotices = createAction(FETCH_NOTICES.ACTION)
-export const createNotice = createAction(CREATE_NOTICE.ACTION)
+export const createNotice = createAction(
+  CREATE_NOTICE.ACTION,
+  payload => payload,
+  () => ({ thunk: true })
+)
 export const updateNotice = createAction(UPDATE_NOTICE.ACTION)
 export const unloadNotices = createAction(
   UNLOAD_NOTICES.ACTION,

src/client/api/index.js

@@ -251,6 +251,12 @@ api.departments.delete = ({ _id }) => {
 }
 
 api.notices = {}
+api.notices.create = payload => {
+  return axios.post('/api/v2/notices', payload).then(res => {
+    return res.data
+  })
+}
+
 api.notices.get = () => {
   return axios.get('/api/v2/notices').then(res => {
     return res.data

src/client/containers/Modals/CreateNoticeModal.jsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { PopoverColorPicker } from 'components/PopoverColorPicker'
+import Button from 'components/Button'
+import BaseModal from 'containers/Modals/BaseModal'
+import { observer } from 'mobx-react'
+import { makeObservable, observable } from 'mobx'
+
+import { createNotice } from 'actions/notices'
+
+import helpers from 'lib/helpers'
+import $ from 'jquery'
+
+@observer
+class CreateNoticeModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    makeObservable(this)
+  }
+
+  @observable name = ''
+  @observable message = ''
+  @observable color = ''
+  @observable fontColor = ''
+
+  componentDidMount () {
+    this.color = '#4CAF50'
+    this.fontColor = '#ffffff'
+
+    helpers.UI.inputs()
+    helpers.UI.reRenderInputs()
+    helpers.formvalidator()
+  }
+
+  componentDidUpdate (prevProps, prevState, snapshot) {
+    helpers.UI.reRenderInputs()
+  }
+
+  onInputChange (target, e) {
+    this[target] = e.target.value
+  }
+
+  onFormSubmit (e) {
+    e.preventDefault()
+    const $form = $(e.target)
+    if (!$form.isValid(null, null, false)) return false
+
+    const payload = {
+      name: this.name,
+      message: this.message,
+      color: this.color,
+      fontColor: this.fontColor
+    }
+
+    this.props.createNotice(payload).then(() => {
+      helpers.resizeAll()
+    })
+  }
+
+  render () {
+    return (
+      <BaseModal {...this.props} options={{ bgclose: false }}>
+        <div className={'mb-25'}>
+          <h2>Create Notice</h2>
+        </div>
+        <form className={'uk-form-stacked'} onSubmit={e => this.onFormSubmit(e)}>
+          <div className={'uk-margin-medium-bottom'}>
+            <label>Name</label>
+            <input
+              type='text'
+              className={'md-input'}
+              value={this.name}
+              onChange={e => this.onInputChange('name', e)}
+              data-validation='length'
+              data-validation-length={'min2'}
+              data-validation-error-msg={'Please enter a notice name. (Must contain 2 characters)'}
+            />
+          </div>
+          <div className={'uk-margin-medium-bottom'}>
+            <label>Message</label>
+            <textarea
+              className={'md-input'}
+              value={this.message}
+              onChange={e => this.onInputChange('message', e)}
+              data-validation='length'
+              data-validation-length={'min10'}
+              data-validation-error-msg={'Please enter a notice message. (Must contain 10 characters)'}
+            />
+          </div>
+          <div>
+            <span style={{ display: 'inline-block', float: 'left', paddingTop: 5 }}>Background Color</span>
+            <PopoverColorPicker
+              color={this.color}
+              onChange={c => {
+                this.color = c
+              }}
+              style={{ float: 'left', marginLeft: 5, marginRight: 15 }}
+            />
+            <span style={{ display: 'inline-block', float: 'left', paddingTop: 5 }}>Font Color</span>
+            <PopoverColorPicker
+              color={this.fontColor}
+              onChange={c => {
+                this.fontColor = c
+              }}
+              style={{ float: 'left', marginLeft: 5 }}
+            />
+          </div>
+
+          <div className='uk-modal-footer uk-text-right'>
+            <Button text={'Close'} flat={true} waves={true} extraClass={'uk-modal-close'} />
+            <Button text={'Create Notice'} flat={true} waves={true} style={'primary'} type={'submit'} />
+          </div>
+        </form>
+      </BaseModal>
+    )
+  }
+}
+
+CreateNoticeModal.propTypes = {
+  createNotice: PropTypes.func.isRequired
+}
+
+const mapStateToProps = state => ({})
+
+export default connect(mapStateToProps, { createNotice })(CreateNoticeModal)

src/client/containers/Modals/index.jsx

@@ -38,6 +38,7 @@ import CreateTeamModal from './CreateTeamModal'
 import EditTeamModal from './EditTeamModal'
 import CreateDepartmentModal from './CreateDepartmentModal'
 import EditDepartmentModal from './EditDepartmentModal'
+import CreateNoticeModal from 'containers/Modals/CreateNoticeModal'
 import EditNoticeModal from 'containers/Modals/EditNoticeModal'
 import LinkWarningModal from 'containers/Modals/LinkWarningModal'
 
@@ -63,6 +64,7 @@ const MODAL_COMPONENTS = {
   EDIT_TEAM: EditTeamModal,
   CREATE_DEPARTMENT: CreateDepartmentModal,
   EDIT_DEPARTMENT: EditDepartmentModal,
+  CREATE_NOTICE: CreateNoticeModal,
   EDIT_NOTICE: EditNoticeModal,
   LINK_WARNING: LinkWarningModal
 }

src/client/containers/Notice/NoticeContainer.jsx

@@ -29,6 +29,10 @@ class NoticeContainer extends React.Component {
     this.props.fetchNotices()
   }
 
+  componentDidUpdate () {
+    helpers.resizeAll()
+  }
+
   componentWillUnmount () {
     this.props.unloadNotices()
   }
@@ -145,6 +149,18 @@ class NoticeContainer extends React.Component {
                     onClick={() => this.onDeactivateNotice()}
                   />
                 )}
+                {helpers.canUser('notices:create') && (
+                  <Button
+                    text={'Create'}
+                    flat={false}
+                    small={true}
+                    waves={false}
+                    extraClass={'hover-success'}
+                    onClick={() => {
+                      this.props.showModal('CREATE_NOTICE')
+                    }}
+                  />
+                )}
               </div>
             </div>
           }

src/client/reducers/noticesReducer.js

@@ -1,6 +1,6 @@
 import { fromJS, List } from 'immutable'
 import { handleActions } from 'redux-actions'
-import { FETCH_NOTICES, UPDATE_NOTICE, DELETE_NOTICE, UNLOAD_NOTICES } from 'actions/types'
+import { FETCH_NOTICES, UPDATE_NOTICE, DELETE_NOTICE, UNLOAD_NOTICES, CREATE_NOTICE } from 'actions/types'
 
 const initialState = {
   notices: List([]),
@@ -24,6 +24,15 @@ const reducer = handleActions(
       }
     },
 
+    [CREATE_NOTICE.SUCCESS]: (state, action) => {
+      const notice = action.response.notice
+
+      return {
+        ...state,
+        notices: state.notices.push(fromJS(notice))
+      }
+    },
+
     [UPDATE_NOTICE.SUCCESS]: (state, action) => {
       const notice = action.response.notice
       const idx = state.notices.findIndex(n => {

src/client/sagas/notices/index.js

@@ -13,7 +13,7 @@
  */
 
 import { call, put, takeLatest } from 'redux-saga/effects'
-import { FETCH_NOTICES, UPDATE_NOTICE, DELETE_NOTICE, UNLOAD_NOTICES, HIDE_MODAL } from 'actions/types'
+import { FETCH_NOTICES, UPDATE_NOTICE, DELETE_NOTICE, UNLOAD_NOTICES, HIDE_MODAL, CREATE_NOTICE } from 'actions/types'
 
 import api from '../../api'
 import Log from '../../logger'
@@ -31,6 +31,23 @@ function * fetchNotices ({ payload }) {
   }
 }
 
+function * createNotice ({ payload, meta }) {
+  try {
+    const response = yield call(api.notices.create, payload)
+    yield put({ type: CREATE_NOTICE.SUCCESS, response, meta })
+    yield put({ type: HIDE_MODAL.ACTION })
+    helpers.UI.showSnackbar('Notice Created')
+  } catch (error) {
+    const errorText = error.response ? error.response.data.error : error
+    if (error.response && error.response.status !== (401 || 403)) {
+      Log.error(errorText, error)
+      helpers.UI.showSnackbar(`Error: ${errorText}`, true)
+    }
+
+    yield put({ type: CREATE_NOTICE.ERROR, error })
+  }
+}
+
 function * updateNotice ({ payload }) {
   try {
     const response = yield call(api.notices.update, payload)
@@ -71,6 +88,7 @@ function * unloadThunk ({ payload, meta }) {
 }
 
 export default function * watch () {
+  yield takeLatest(CREATE_NOTICE.ACTION, createNotice)
   yield takeLatest(FETCH_NOTICES.ACTION, fetchNotices)
   yield takeLatest(UPDATE_NOTICE.ACTION, updateNotice)
   yield takeLatest(DELETE_NOTICE.ACTION, deleteNotice)

src/controllers/api/v2/notices.js

@@ -12,10 +12,29 @@
  *  Copyright (c) 2014-2022. All rights reserved.
  */
 
-var apiUtils = require('../apiUtils')
-var Notice = require('../../../models/notice')
+const winston = require('../../../logger')
+const apiUtils = require('../apiUtils')
+const Notice = require('../../../models/notice')
 
-var apiNotices = {}
+const apiNotices = {}
+
+apiNotices.create = async (req, res) => {
+  const payload = req.body
+
+  try {
+    const notice = await Notice.create({
+      name: payload.name,
+      message: payload.message,
+      color: payload.color,
+      fontColor: payload.fontColor
+    })
+
+    return apiUtils.sendApiSuccess(res, { notice })
+  } catch (err) {
+    winston.debug(err)
+    return apiUtils.sendApiError(res, 500, err.message)
+  }
+}
 
 apiNotices.get = function (req, res) {
   Notice.find({}, function (err, notices) {

src/controllers/api/v2/routes.js

@@ -64,6 +64,7 @@ module.exports = function (middleware, router, controllers) {
 
   // Notices
   router.get('/api/v2/notices', apiv2Auth, apiv2.notices.get)
+  router.post('/api/v2/notices', apiv2Auth, canUser('notices:create'), apiv2.notices.create)
   // router.get('/api/v2/notices/active', apiv2Auth, apiv2.notices.getActive)
   router.put('/api/v2/notices/:id', apiv2Auth, canUser('notices:update'), apiv2.notices.update)
   router.put('/api/v2/notices/:id/activate', apiv2Auth, canUser('notices:activate'), apiv2.notices.activate)