(ui) use user-profile-form in admin/members/new

app/frontend/src/javascript/api/member.ts

@@ -14,7 +14,7 @@ export default class MemberAPI {
     if (user.profile_attributes.user_avatar_attributes.attachment_files[0]) {
       data.set('user[profile_attributes][user_avatar_attributes][attachment]', user.profile_attributes.user_avatar_attributes.attachment_files[0]);
     }
-    const res: AxiosResponse<User> = await apiClient.post('/api/members/create', data, {
+    const res: AxiosResponse<User> = await apiClient.post('/api/members', data, {
       headers: {
         'Content-Type': 'multipart/form-data'
       }

app/frontend/src/javascript/components/user/user-profile-form.tsx

@@ -143,13 +143,13 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
     return value === true || (t('app.shared.user_profile_form.must_accept_terms') as string);
   };
 
-  const userNetworks = new UserLib(user).getUserSocialNetworks(user);
+  const userNetworks = new UserLib(user).getUserSocialNetworks();
 
   return (
     <form className={`user-profile-form user-profile-form--${size} ${className}`} onSubmit={onSubmit}>
       <div className="avatar-group">
-        <AvatarInput currentAvatar={output.profile_attributes.user_avatar_attributes?.attachment_url}
+        <AvatarInput currentAvatar={output.profile_attributes?.user_avatar_attributes?.attachment_url}
-                     userName={`${output.profile_attributes.first_name} ${output.profile_attributes.last_name}`}
+                     userName={`${output.profile_attributes?.first_name} ${output.profile_attributes?.last_name}`}
                      register={register}
                      setValue={setValue}
                      size={size} />

app/frontend/src/javascript/controllers/admin/members.js

@@ -816,7 +816,7 @@ Application.Controllers.controller('EditMemberController', ['$scope', '$state',
     /**
      * Callback triggered when the user was successfully updated
      */
-    $scope.onUserSuccess = (user) => {
+    $scope.onUserSuccess = () => {
       growl.success(_t('app.admin.members_edit.update_success'));
       $state.go('app.admin.members');
     };
@@ -937,8 +937,8 @@ Application.Controllers.controller('EditMemberController', ['$scope', '$state',
 /**
  * Controller used in the member's creation page (admin view)
  */
-Application.Controllers.controller('NewMemberController', ['$scope', '$state', 'Member', 'Training', 'Group', 'CSRF', 'settingsPromise',
+Application.Controllers.controller('NewMemberController', ['$scope', '$state', 'Member', 'Training', 'Group', 'CSRF', 'settingsPromise', 'growl', '_t',
-  function ($scope, $state, Member, Training, Group, CSRF, settingsPromise) {
+  function ($scope, $state, Member, Training, Group, CSRF, settingsPromise, growl, _t) {
     CSRF.setMetaTags();
 
     /* PUBLIC SCOPE */
@@ -976,6 +976,21 @@ Application.Controllers.controller('NewMemberController', ['$scope', '$state', '
       }
     };
 
+    /**
+     * Callback triggered when the user was successfully updated
+     */
+    $scope.onUserSuccess = () => {
+      growl.success(_t('app.admin.members_new.create_success'));
+      $state.go('app.admin.members');
+    };
+
+    /**
+     * Callback triggered in case of error
+     */
+    $scope.onError = (message) => {
+      growl.error(message);
+    };
+
     // Using the MembersController
     return new MembersController($scope, $state, Group, Training);
   }

app/frontend/src/javascript/lib/user.ts

@@ -1,3 +1,4 @@
+import { isNil, isEmpty } from 'lodash';
 import { User } from '../models/user';
 import { supportedNetworks, SupportedSocialNetwork } from '../models/social-network';
 
@@ -24,10 +25,15 @@ export default class UserLib {
   /**
    * Filter social networks from the user's profile
    */
-  getUserSocialNetworks = (customer: User): {name: string, url: string}[] => {
+  getUserSocialNetworks = (): { name: string, url: string }[] => {
-    const userNetworks = [];
+    if (!this.isUser()) {
+      return supportedNetworks.map(network => {
+        return { name: network, url: '' };
+      });
+    }
 
-    for (const [name, url] of Object.entries(customer.profile_attributes)) {
+    const userNetworks = [];
+    for (const [name, url] of Object.entries(this.user.profile_attributes)) {
       supportedNetworks.includes(name as SupportedSocialNetwork) && userNetworks.push({ name, url });
     }
     return userNetworks;
@@ -57,4 +63,13 @@ export default class UserLib {
       return !(email.match(/^<([^>]+)>.{20}-duplicate$/) === null);
     }
   };
+
+  /**
+   * Check if the current user is not empty
+   */
+  private isUser = (): boolean => {
+    if (isNil(this.user)) return false;
+
+    return !(isEmpty(this.user.invoicing_profile_attributes) && isEmpty(this.user.statistic_profile_attributes));
+  };
 }

app/frontend/templates/admin/members/new.html

@@ -29,38 +29,20 @@
 
 
   <div class="row no-gutter">
-    <div class=" col-sm-12 col-md-9 b-r nopadding">
+    <div class="col-md-12 b-r nopadding">
 
-      <form role="form" name="userForm" class="form-horizontal" novalidate  action="{{ actionUrl }}" ng-upload="submited(content)" upload-options-enable-rails-csrf="true">
+      <section class="panel panel-default bg-light m-lg">
+        <div class="panel-body m-r">
 
-        <section class="panel panel-default bg-light m-lg">
+          <user-profile-form user="user"
-          <div class="panel-body m-r">
+                             action="'create'"
-
+                             on-error="onError"
-            <div class="row m-t">
+                             on-success="onUserSuccess"
-              <div class="col-sm-6 col-sm-offset-5">
+                             show-group-input="true"
-                <div class="form-group checkbox-group">
+                             show-tags-input="true"
-                  <input type="checkbox"
+                             show-trainings-input="true" />
-                         name="organization"
+        </div>
-                         id="organization"
+      </section>
-                         ng-model="user.organization"
-                         ng-change="toggleOrganization()"
-                         value="false"/>
-                  <label for="organization" translate>{{ 'app.admin.members_new.user_is_an_organization' }}</label>
-                </div>
-              </div>
-            </div>
-
-            <ng-include src="'/shared/_member_form.html'"></ng-include>
-
-            <ng-include src="'/admin/members/_form.html'"></ng-include>
-          </div>   <!-- ./panel-body  -->
-
-
-          <div class="panel-footer no-padder">
-            <input type="submit" value="{{ 'app.shared.buttons.save' | translate }}" class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c" ng-disabled="userForm.$invalid"/>
-          </div>
-        </section>
-      </form>
 
     </div>
   </div>

config/locales/app.admin.en.yml

@@ -905,6 +905,7 @@ en:
       members_new:
         add_a_member: "Add a member"
         user_is_an_organization: "User is an organization"
+        create_success: "Member successfully created"
       #members bulk import
       members_import:
         import_members: "Import members"