Change the way we pass the control data between vue components

When passing control data between vue component, we now use an object instead of the id.
betagouv · Apr 19, 2019 · b127082 · b127082
1 parent c9950d6
commit b127082
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/control/models.py b/control/models.py
@@ -37,6 +37,12 @@ class Meta:
     def __str__(self):
         return self.title
 
+    def data(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+        }
+
 
 class Questionnaire(OrderedModel, WithNumberingMixin):
     title = models.CharField("titre", max_length=255)

diff --git a/static/src/users/UserCreate.vue b/static/src/users/UserCreate.vue
@@ -1,6 +1,6 @@
 <template>
 
-<div class="modal fade modal-add-user" :id="'modalAddUser' + controlId" tabindex="-1" role="dialog" :aria-labelledby="'modalAddUser' + controlId" aria-hidden="true">
+<div class="modal fade modal-add-user" :id="'modalAddUser' + control.id" tabindex="-1" role="dialog" :aria-labelledby="'modalAddUser' + control.id" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <form @submit.prevent="addUser">
     <div class="modal-content">
@@ -74,7 +74,7 @@
 
   export default Vue.extend({
     props: {
-      controlId: Number
+      control: Object
     },
     data: () {
       return {
@@ -96,7 +96,7 @@
         $('.modal-add-user').modal('hide');
       },
       addUser() {
-        this.formData.controls.push(this.controlId)
+        this.formData.controls.push(this.control.id)
         this.axios.post('/api/user/', this.formData)
           .then(response => {
             this.postResult = response.data

diff --git a/static/src/users/UserDeactivate.vue b/static/src/users/UserDeactivate.vue
@@ -27,11 +27,11 @@
   export default Vue.extend({
     props: {
       user: Object,
-      controlId: Number
+      control: Object
     },
     methods: {
         modalId() {
-            return 'modalDeactivateUser' + this.controlId + '-' + this.user.id
+            return 'modalDeactivateUser' + this.control.id + '-' + this.user.id
         }
     }
   })

diff --git a/static/src/users/UserList.vue b/static/src/users/UserList.vue
@@ -16,10 +16,10 @@
               <small class="d-block item-except text-sm text-muted h-1x"><a :href="'mailto:' + user.email">{{ user.email }}</a></small>
             </div>
             <div class="col-auto mr-4">
-              <button class="fe fe-user-x btn btn-outline-primary" data-toggle="modal" :data-target="'#modalDeactivateUser' + controlId + '-' + user.id"> Désactiver</button>
+              <button class="fe fe-user-x btn btn-outline-primary" data-toggle="modal" :data-target="'#modalDeactivateUser' + control.id + '-' + user.id"> Désactiver</button>
             </div>
           </div>
-          <user-deactivate :user="user" :controlId="controlId"></user-deactivate>
+          <user-deactivate :user="user" :control="control"></user-deactivate>
         </li>
       </ul>
     </div>
@@ -35,7 +35,7 @@
     props: {
       users: Array,
       profileType: String,
-      controlId: Number,
+      control: Object,
     },
     components: {
       UserDeactivate,

diff --git a/static/src/users/Users.vue b/static/src/users/Users.vue
@@ -6,16 +6,16 @@
   <div class="card-body">
 
     <div class="card" v-if="requestUserProfileType==='inspector'">
-      <button class="fe fe-plus btn btn-primary" data-toggle="modal" :data-target="'#modalAddUser' + controlId"> Ajouter une personne</button>
+      <button class="fe fe-plus btn btn-primary" data-toggle="modal" :data-target="'#modalAddUser' + control.id"> Ajouter une personne</button>
     </div>
 
-    <user-list :users="inspectorUsers()" profile-type="inspector" :control-id="controlId"></user-list>
+    <user-list :users="inspectorUsers()" profile-type="inspector" :control="control"></user-list>
 
-    <user-list :users="auditedUsers()" profile-type="audited" :control-id="controlId"></user-list>
+    <user-list :users="auditedUsers()" profile-type="audited" :control="control"></user-list>
 
     <div data-toggle="card-collapse" class="text-center bg-blue cursor-pointer text-white" style="cursor: pointer;"><i class="fe fe-chevron-up"></i></div>
 
-    <user-create :control-id="controlId"></user-create>
+    <user-create :control="control"></user-create>
 
   </div>
 </div>
@@ -34,7 +34,7 @@
 
   export default Vue.extend({
     props: {
-      controlId: Number,
+      control: Object,
       requestUserProfileType: String
     },
     data() {
@@ -46,7 +46,7 @@
       getUsers() {
         Vue.axios.get('/api/user/', {
           params: {
-            controls: this.controlId
+            controls: this.control.id
           }
         }).then((response) => {
           this.users = response.data

diff --git a/templates/ecc/questionnaire_list.html b/templates/ecc/questionnaire_list.html
@@ -59,7 +59,7 @@ <h5 class="pb-2">{{ questionnaire.title }}</h5>
 
             <tr>
               <td colspan="2">
-                <users-for-control :control-id={{ control.id }} request-user-profile-type={{ user.profile.profile_type }} :key={{ control.id }}></users-for-control>
+                <users-for-control :control="{{ control.data }}" request-user-profile-type={{ user.profile.profile_type }} :key={{ control.id }}></users-for-control>
               </td>
             </tr>