show an option to select if a mailing is to be shown in the registrat…

…ion form
my-koop · Nov 27, 2014 · daf419d · daf419d
1 parent be525e0
commit daf419d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 42 deletions.
diff --git a/components/MailingListAdminPage.jsx b/components/MailingListAdminPage.jsx
@@ -39,10 +39,13 @@ var MailingListAdminPage = React.createClass({
     });
   },
 
+  newMailingListId: -1,
   createNewMailingList: function () {
     var newMailingList = {
-      id: -1,
-      name: ""
+      id: this.newMailingListId--,
+      name: "",
+      description: null,
+      showAtRegistration: 0
     };
     this.state.mailingLists.push(newMailingList);
     this.setState({
@@ -59,29 +62,37 @@ var MailingListAdminPage = React.createClass({
     });
   },
 
-  requestChange: function(mailingList, field, newValue) {
-    mailingList[field] = newValue;
+  requestChange: function(mailingList, field, parseFunc, newValue) {
+    mailingList[field] = parseFunc(newValue);
     this.setState({
       mailingLists: this.state.mailingLists
     });
   },
 
-  makeValueLink: function(mailingList, field) {
+  makeValueLink: function(mailingList, field, parseFunc) {
+    parseFunc = parseFunc || _.identity;
     return {
       value: mailingList[field],
-      requestChange: _.bind(this.requestChange, this, mailingList, field)
+      requestChange: _.bind(this.requestChange, this, mailingList, field, parseFunc)
     }
   },
 
   render: function() {
     var self = this;
     var mailingLists = _.map(this.state.mailingLists, function(mailingList, i) {
       return (
-        <BSCol md={4} sm={6} key={i}>
+        <BSCol md={6} sm={12} key={i}>
           <MKMailingListEditPanel
             idLink={self.makeValueLink(mailingList, "id")}
             nameLink={self.makeValueLink(mailingList, "name")}
             descriptionLink={self.makeValueLink(mailingList, "description")}
+            showAtRegistrationLink={self.makeValueLink(
+              mailingList,
+              "showAtRegistration",
+              function(newValue) {
+                return +newValue;
+              }
+            )}
             onDelete={_.bind(self.mailingListDeleted, self, i)}
           />
         </BSCol>
@@ -94,7 +105,7 @@ var MailingListAdminPage = React.createClass({
         </h1>
         <BSRow>
           {mailingLists}
-          <BSCol md={4} sm={6} key="newMailingList">
+          <BSCol md={6} sm={12} key="newMailingList">
             <BSPanel className="mailingList-new-panel" onClick={this.createNewMailingList}>
               <MKIcon glyph="plus-circle" className="mailingList-new" />
             </BSPanel>

diff --git a/components/MailingListEditPanel.jsx b/components/MailingListEditPanel.jsx
@@ -14,22 +14,19 @@ var __ = require("language").__;
 var _ = require("lodash");
 var actions = require("actions");
 
+var valueLinkProps = React.PropTypes.shape({
+  value: React.PropTypes.any,
+  requestChange: React.PropTypes.func.isRequired
+}).isRequired;
+
 var MailingListEditPanel = React.createClass({
   mixins: [React.addons.LinkedStateMixin, MKFeedbacki18nMixin],
 
   propTypes: {
-    idLink: React.PropTypes.shape({
-      value: React.PropTypes.number.isRequired,
-      requestChange: React.PropTypes.func.isRequired
-    }).isRequired,
-    nameLink: React.PropTypes.shape({
-      value: React.PropTypes.string.isRequired,
-      requestChange: React.PropTypes.func.isRequired
-    }).isRequired,
-    descriptionLink: React.PropTypes.shape({
-      value: React.PropTypes.string,
-      requestChange: React.PropTypes.func.isRequired
-    }).isRequired,
+    idLink: valueLinkProps,
+    nameLink: valueLinkProps,
+    descriptionLink: valueLinkProps,
+    showAtRegistrationLink: valueLinkProps,
     onDelete: React.PropTypes.func,
     onSave: React.PropTypes.func
   },
@@ -42,8 +39,7 @@ var MailingListEditPanel = React.createClass({
     // update state if a new mailing is taking this spot
     // except this spot was for a new mailing list
     if(
-        nextProps.idLink.value !== this.props.idLink.value &&
-        this.props.idLink.value !== -1
+        nextProps.idLink.value !== this.props.idLink.value
     ) {
       // FIXME:: do not modify this.props directly
       this.props = nextProps;
@@ -55,7 +51,8 @@ var MailingListEditPanel = React.createClass({
     return {
       id: this.getField("id"),
       name: this.getField("name"),
-      description: this.getField("description")
+      description: this.getField("description"),
+      showAtRegistration: this.getField("showAtRegistration")
     };
   },
 
@@ -64,12 +61,13 @@ var MailingListEditPanel = React.createClass({
   },
 
   hasChanges: function() {
-    return (this.getField("name") !== this.state.name) ||
-      this.getField("description") !== this.state.description;
+    var values = this.getValues();
+    var oldValues = _.pick(this.state, _.keys(values));
+    return !_.isEqual(values, oldValues);
   },
 
   isNewMailingList: function() {
-    return this.getField("id") === -1;
+    return this.getField("id") < 0;
   },
 
   saveChanges: function() {
@@ -80,14 +78,10 @@ var MailingListEditPanel = React.createClass({
       : actions.mailinglist.update
     action({
       i18nErrors: {
-        keys: ["app", "validation"],
+        keys: ["app"],
         prefix: "mailinglist::errors"
       },
-      data: {
-        id: !isNew ? this.getField("id") : undefined,
-        name: this.getField("name"),
-        description: this.getField("description")
-      }
+      data: this.getValues()
     }, function(err, res) {
       if(err) {
         console.error(err);
@@ -129,6 +123,7 @@ var MailingListEditPanel = React.createClass({
   },
 
   render: function() {
+    var self = this;
     var isNew = this.isNewMailingList();
     var buttonsConfig = [
       {
@@ -160,17 +155,46 @@ var MailingListEditPanel = React.createClass({
       buttonsConfig[1].icon = "remove";
       buttonsConfig[1].warningMessage = __("areYouSure");
     }
+    var showAtRegistration = !!this.props.showAtRegistrationLink.value;
+    var registrationButton = [{
+      icon:"check",
+      tooltip: {
+        text: __(
+          "mailinglist::showAtRegistrationTooltip",
+          {context: showAtRegistration ? "unset" : "set"}
+        ),
+        overlayProps: {
+          placement: "top"
+        }
+      },
+      props:{
+        className: showAtRegistration ?
+          "active"
+        : undefined
+      },
+      callback: function(e) {
+        self.props.showAtRegistrationLink.requestChange(!showAtRegistration);
+        e.target.blur();
+      }
+    }];
 
     return (
       <BSPanel className="mailingList-edit-min-height">
         {this.renderFeedback()}
         <BSGrid className="mailingListPanel" fluid>
           <BSRow>
             <BSCol md={4} className="pull-right mailingList-actions-buttons">
+
+
               <MKListModButtons
                 className="pull-right"
                 buttons={buttonsConfig}
               />
+              <MKListModButtons
+                className="pull-right"
+                style={{marginRight: "10px"}}
+                buttons={registrationButton}
+              />
             </BSCol>
             <BSCol md={8} className="mailingList-name-form">
               <BSInput

diff --git a/locales/en/mailinglist.json5 b/locales/en/mailinglist.json5
@@ -6,14 +6,14 @@
   deleteMailingListWarning: "Warning! Deleting a mailing list removes all users linked to it. $t(areYouSure)",
   mailingListTab: "Mailing lists",
 
+  showAtRegistrationTooltip: "Show this mailing in the registration form for new users",
+  showAtRegistrationTooltip_set: "$t(mailinglist::showAtRegistrationTooltip)",
+  showAtRegistrationTooltip_unset: "Do not $t(mailinglist::showAtRegistrationTooltip)",
+
   errors: {
     app: {
       name: {
-        duplicate: "This name is already used"
-      }
-    },
-    validation: {
-      name: {
+        duplicate: "This name is already used",
         empty: "Name cannot be blank",
         tooShort: "Name must be at least __variable__ characters long",
         tooLong: "Name must be at most __variable__ characters long"

diff --git a/locales/fr/mailinglist.json5 b/locales/fr/mailinglist.json5
@@ -6,14 +6,14 @@
   deleteMailingListWarning: "Attention! La suppression d'une liste de diffusion retire tous les utilisateurs associés. $t(areYouSure)",
   mailingListTab: "Listes de diffusion",
 
+  showAtRegistrationTooltip: "Afficher cette liste de diffusion dans le formulaire d'inscription des nouveaux utilisateurs",
+  showAtRegistrationTooltip_set: "$t(mailinglist::showAtRegistrationTooltip)",
+  showAtRegistrationTooltip_unset: "Ne pas $t(mailinglist::showAtRegistrationTooltip)",
+
   errors: {
     app: {
       name: {
-        duplicate: "Ce nom est déjà utilisé"
-      }
-    },
-    validation: {
-      name: {
+        duplicate: "Ce nom est déjà utilisé",
         empty: "Le nom ne peut être vide",
         tooShort: "Le nom doit contenir un minimum de __variable__ caractères",
         tooLong: "Le nom doit contenir un maximum de __variable__ caractères"