Add OSM ID to campaign managers

flask_project/campaign_manager/forms/campaign.py

@@ -74,8 +74,8 @@ class CampaignForm(FlaskForm):
         validators=[InputRequired()],
         render_kw={'placeholder': 'End Date', 'type': 'date'}
     )
-    campaign_managers = ManagerSelectMultipleField(
-        u'Managers of campaign',
+    campaign_managers = HiddenField(
+        u'Project managers',
         validators=[InputRequired()])
     remote_projects = ManagerSelectMultipleField(
         u'Remote Projects'

flask_project/campaign_manager/models/campaign.py

@@ -627,6 +627,12 @@ def parse_types_string(types_string):
                 value['tags'] = json_tags
         return types
 
+
+    @staticmethod
+    def parse_managers_string(managers_string):
+        managers = parse_json_string(managers_string)
+        return managers
+
     def calculate_areas_covered(self):
         completed_areas = 0
         for area in self.geometry['features']:

flask_project/campaign_manager/static/js/create/types_tags.js

@@ -107,10 +107,11 @@ function slugify(string) {
 
 function addTypes(featureName) {
     var template = _.template($("#_template-feature-tile").html());
+    var osmFeature = types && types[featureName] ? types[featureName].feature : '';
     var html = template({
         name: featureName,
         slug: slugify(featureName),
-        osmFeature: types[featureName]['feature']
+        osmFeature
     });
     var row = $("<div/>");
     row.addClass("row");

flask_project/campaign_manager/styles/components/_details-list.scss

@@ -20,7 +20,6 @@
       }
     }
     a {
-      margin-right: 16px;
       color: $blue-dark;
       svg {
         margin-left: 10px;

flask_project/campaign_manager/templates/campaign_detail.html

@@ -234,7 +234,13 @@ <h2>Details</h2>
     var managers = {{ campaign_managers | safe
   }};
   if (typeof (user) !== 'undefined') {
-    if ($.inArray(user.display_name, managers) > -1) {
+    const managerNames = managers.map(manager=> {
+      if (manager && manager.name) {
+        return manager.name;
+      }
+      return manager;
+    })
+    if ($.inArray(user.display_name, managerNames) > -1) {
       $('.button-manage').show();
     }
   }

flask_project/campaign_manager/templates/campaign_index.html

@@ -322,7 +322,13 @@ <h2>Create your first project</h2>
     var isActive = campaignStatus(campaign);
     var daysLeft = getDaysLeft(campaign);
     var warning = daysLeft > 0 ? `${daysLeft} day${daysLeft > 1 ? 's' : ''} left!` : 'Finished'
-    var isManager = $.inArray(user, campaign.campaign_managers) > -1;
+    var managerNames = campaign.campaign_managers.map(manager=> {
+      if (manager && manager.name) {
+        return manager.name;
+      }
+      return manager;
+    })
+    var isManager = $.inArray(user, managerNames) > -1;
     return `
     <li class="campaign ${!isActive ? 'in' : ''}active-campaign ${isManager ? 'editable-campaign' : 'viewable-campaign'}">
       <div class="campaign-card panel panel-tile ${isActive ? 'active' : ''}" onclick="openCampaign(event, this, '${campaign.uuid}')">

flask_project/campaign_manager/templates/components/project_header.html

@@ -56,12 +56,9 @@ <h1>{{ name }}</h1>
               <path stroke-linecap="round" stroke-linejoin="round" d="M15.867 15.354H6c0-2.577 2.184-4.934 4.934-4.934s4.933 2.357 4.933 4.934z" />
               <rect width="21" height="19" x=".5" y=".5" rx="4" />
             </g>
-          </svg>Managers: <i>{% if campaign_managers %}
-            {% for campaign_manager in campaign_managers %}
-            <a href="https://www.openstreetmap.org/user/{{ campaign_manager }}" target="_blank">{{ campaign_manager }}</a>
-            {% if campaign_manager != campaign_managers[-1] %}
-            ,
-            {% endif %}
+          </svg>Managers: <i>{% if campaign_manager_names %}
+            {% for campaign_manager in campaign_manager_names %}
+            <a href="https://www.openstreetmap.org/user/{{ campaign_manager }}" target="_blank">{{ campaign_manager }}</a>{% if campaign_manager != campaign_manager_names[-1] %},{% endif %}
             {% endfor %}
             {% else %}
             -

flask_project/campaign_manager/templates/create_campaign.html

@@ -20,7 +20,7 @@ <h1>Create Project</h1>
   <div class="row">
     <div class="col-xs-12 col-sm-6">
       <div class="tab-content">
-        <div class="tab-pane" id="general-information">
+        <div class="tab-pane active" id="general-information">
           <fieldset id="fieldset-1" data-fieldset-step="1">
             <div class="form-group">
               <label for="project-name">Project Name <span class="required">*</span></label>
@@ -108,7 +108,7 @@ <h1>Create Project</h1>
             </div>
           </fieldset>
         </div>
-        <div class="tab-pane active" id="settings">
+        <div class="tab-pane" id="settings">
           <fieldset id="fieldset-4" data-fieldset-step="4">
             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
               <div class="panel panel-default">
@@ -139,7 +139,7 @@ <h4 class="panel-title">
                               <button type="button" class="btn btn-default" id="add-to-managers">Add manager</button>
                             </div>
                             <div id="managers-list" class="manager-list"></div>
-                            <select id="campaign_managers" multiple name="campaign_managers" style="display: none;"></select>
+                            <input id="campaign_managers" name="campaign_managers" type="hidden" />
                             <p class="helock"></p>
                           </div>
                         </div>
@@ -442,7 +442,7 @@ <h4 class="panel-name">
 <script type='text/template' id='_template-manager'>
   <span class="manager" data-manager="<%=name%>">
     <span class="manager-icon" aria-hidden="true"><%=name[0]%>
-      <% if (!isManager) { %>
+      <% if (!isCreator) { %>
         <span class="remove-manager" onclick="removeManager(this, '<%=name%>')">Remove</span>
       <% } %>
     </span>
@@ -471,6 +471,11 @@ <h4 class="panel-name">
   var managers_list = [];
   {% if form.campaign_managers.data %}
   managers_list = {{ form.campaign_managers.data | safe }};
+  managers_list = managers_list.map(manager=>{
+    const name = manager.name || manager;
+    const osm_id = manager.osm_id || '';
+    return { name, osm_id }
+  })
   {% endif %}
   {% if campaign_creator %}
   var campaign_creator = '{{ campaign_creator }}';
@@ -479,46 +484,46 @@ <h4 class="panel-name">
   function updateManagerList() {
     $('#managers-list').html('');
     if (managers_list.length > 0) {
-      $.each(managers_list, function (index, value) {
+      $.each(managers_list, function (index, manager) {
+        const name = manager.name || manager;
         const managerTemplate = _.template($("#_template-manager").html());
         const managerEl = managerTemplate({
-          name: value,
-          isManager: typeof campaign_creator !== 'undefined' && value == campaign_creator
+          name,
+          isCreator: typeof campaign_creator !== 'undefined' && name == campaign_creator
         });
         $('#managers-list').append(managerEl);
       })
+      $('#campaign-managers').val(JSON.stringify(managers_list));
     }
   }
   $('#form-panel').hide();
   $(function () {
     updateManagerList();
   });
 
-  function removeManager(e, manager) {
-    var index = managers_list.indexOf(manager);
-    if (index > -1) {
-      managers_list.splice(index, 1);
-    }
-    $('[data-manager=' + manager + ']').remove();
+  function removeManager(e, name) {
+    managers_list = managers_list.filter(manager=>manager.name !== name);
+    $('[data-manager=' + name + ']').remove();
+  }
+
+  function addManager(manager, isCreator) {
+    const name = manager.name;
+    const managerTemplate = _.template($("#_template-manager").html());
+    $('#managers-list').append(managerTemplate({name, isCreator}));
+    managers_list.push(manager);
   }
 
   $("#add-to-managers").click(function () {
     var listOsmUsers = [];
     $('#list-osm-users :selected').each(function (i, selected) {
-      listOsmUsers[i] = $(selected).text();
+      listOsmUsers[i] = { name: $(selected).text(), osm_id: $(selected).data('osm-id').toString() };
     });
 
     $('.error-managers').hide();
 
     for (var i = 0; i < listOsmUsers.length; i++) {
       if ($.inArray(listOsmUsers[i], managers_list) === -1) {
-        managers_list.push(listOsmUsers[i]);
-        const managerTemplate = _.template($("#_template-manager").html());
-        const managerEl = managerTemplate({
-          name: listOsmUsers[i],
-          isManager: false
-        });
-        $('#managers-list').append(managerEl)
+        addManager(listOsmUsers[i]);
       }
     }
 
@@ -544,22 +549,23 @@ <h4 class="panel-name">
     $('#users-found').hide();
     $.ajax({
       url: url,
-      success: function (data) {
-        const names = _.map(data, (user)=>user.names[0]);
+      success: function (users) {
         $searchOsmButton.removeAttr('disabled');
         $searchOsmButton.LoadingOverlay("hide");
         $('#list-osm-users').html('');
 
-        if (names.length > 0) {
+        if (users.length > 0) {
           $('#users-found').show("slow");
         } else {
           $('#users-not-found').show("slow");
         }
 
-        $.each(names, function (index, value) {
+        $.each(users, function (index, user) {
+          const name = user.names[0];
           $('#list-osm-users').append($('<option/>', {
-            value: value,
-            text: value
+            value: name,
+            text: name,
+            'data-osm-id': user.id.toString()
           }));
         });
       }
@@ -590,7 +596,13 @@ <h4 class="panel-name">
 
   function updated(response) {
     {% if action == 'edit' %}
-    var is_manager = $.inArray(response.display_name, managers_list);
+    var managerNames = managers_list ? managers_list.map(manager=>{
+      if (manager.name) {
+        return manager.name;
+      }
+      return manager;
+    }) : [];
+    var is_manager = $.inArray(response.display_name, managerNames);
     if (is_manager == -1) {
       location.href = '/404';
     } else {
@@ -604,13 +616,7 @@ <h4 class="panel-name">
     $('#submit').show();
     {% endif %}
     {% if action == 'create' %}
-    managers_list.push(response.display_name);
-    const managerTemplate = _.template($("#_template-manager").html());
-    const managerEl = managerTemplate({
-      name: response.display_name,
-      isManager: true
-    });
-    $('#managers-list').append(managerEl);
+    addManager({ name: response.display_name, osm_id: response.id }, true);
     $("#user_id").val(response.id);
     {% endif %}
   }
@@ -853,11 +859,8 @@ <h4 class="panel-name">
   function preprocessSubmitForm() {
     $("#uploader").val($("#profile-name").html());
 
-    $('#campaign_managers').html('');
-    $.each(managers_list, function (index, value) {
-      $('#campaign_managers').append('<option selected="selected" value="' + value + '">' + value + '</option>')
-    });
-
+    $('#campaign_managers').val(JSON.stringify(managers_list))
+
     $('#campaign_status').val('Start');
 
     // Processing selected function

flask_project/campaign_manager/test/test_api.py

@@ -15,9 +15,9 @@ def mock_get_campaign():
     campaign.total_participants_count = 3
     campaign.campaign_creator = 'test_creator'
     campaign.campaign_managers = [
-        'test_manager1',
-        'test_manager2',
-        'test_creator'
+        { 'name': 'test_manager1', 'osm_id': '12345' },
+        { 'name': 'test_manager2', 'osm_id': '54321' },
+        { 'name': 'test_creator', 'osm_id': '98765' }
     ]
     campaign._content_json = {
         'name': campaign.name,

flask_project/campaign_manager/views.py

@@ -382,9 +382,14 @@ def get_campaign(uuid):
         type[1]['type'],
         context['types'].items()))
 
+    campaign_manager_names = []
+    for manager in Campaign.parse_managers_string(campaign.campaign_managers):
+        campaign_manager_names.append(manager['name'])
+
     context['oauth_consumer_key'] = OAUTH_CONSUMER_KEY
     context['oauth_secret'] = OAUTH_SECRET
     context['map_provider'] = map_provider()
+    context['campaign_manager_names'] = campaign_manager_names
     context['participants'] = len(campaign.campaign_managers)
 
     context['pct_covered_areas'] = campaign.calculate_areas_covered()
@@ -832,7 +837,7 @@ def edit_campaign(uuid):
         if request.method == 'GET':
             form = CampaignForm()
             form.name.data = campaign.name
-            form.campaign_managers.data = campaign.campaign_managers
+            form.campaign_managers.data = Campaign.parse_managers_string(campaign.campaign_managers)
             form.remote_projects.data = campaign.remote_projects
             form.types.data = campaign.types
             form.description.data = campaign.description