feat: import modal and various fixes

src/views/Admin/OrganizationList.vue

@@ -9,25 +9,28 @@
       >
         <template v-slot:top>
           <v-toolbar flat color="white">
-            <v-toolbar-title v-if="!$vuetify.breakpoint.mobile">
+            <!-- <v-toolbar-title v-if="!$vuetify.breakpoint.mobile">
               Gestion des associations
-            </v-toolbar-title>
+            </v-toolbar-title> -->
             <v-spacer></v-spacer>
             <v-btn
-              outlined
+              outlined small icon dark
-              color="primary"
+              color="primary" class="mb-2 mr-2"
-              dark
+              @click="openImportModal()"
-              @click="fetchData()"
-              class="mb-2 mr-2"
             >
-              <v-icon>refresh</v-icon>
+              <v-icon small>publish</v-icon>
+            </v-btn>
+            <v-btn
+              outlined small icon dark
+              color="primary" class="mb-2 mr-4"
+              @click="fetchData()"
+            >
+              <v-icon small>refresh</v-icon>
             </v-btn>
             <v-dialog v-model="dialog" max-width="500px">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn
-                  color="primary"
+                  dark color="primary" class="mb-2"
-                  dark
-                  class="mb-2"
                   v-bind="attrs"
                   v-on="on"
                 >
@@ -211,12 +214,15 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <v-dialog v-model="detailsModal" max-width="600">
+    <v-dialog
+      v-model="detailsModal"
+      max-width="600px"
+      :fullscreen="$vuetify.breakpoint.mobile">
       <v-card>
         <v-card-title>
           Détails et actions sur l'association {{ toSeeItem.adminName }}
         </v-card-title>
-        <v-card-text>
+        <v-card-text :class="$vuetify.breakpoint.mobile ? 'mx-0' : ''">
           <!-- show dates, status, current and published version page link, token -->
           <!-- action: reset token, send email -->
           <v-list two-line>
@@ -339,6 +345,32 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="importModal" max-width="500px">
+      <v-card>
+        <v-card-title>Importer depuis un fichier CSV</v-card-title>
+        <v-card-text>
+          <v-textarea
+            label="Depuis une chaîne de caractères"
+            :disabled="importFile !== null"
+            v-model="importData"/>
+          <v-file-input
+            label="Depuis un fichier texte ou csv"
+            :disabled="importData !== ''"
+            v-model="importFile"
+            />
+        </v-card-text>
+        <v-card-actions>
+          <v-btn text @click="importModal = false">Fermer</v-btn>
+          <v-spacer />
+          <v-btn
+            color="primary" text
+            :loading="importLoading"
+            @click="importOrganizations()">
+            Valider
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-row>
 </template>
 
@@ -391,7 +423,11 @@ export default {
       toApproveItem: item,
       rejectionDescription: '',
       approved: false,
-      rejectionModal: false
+      rejectionModal: false,
+      importModal: false,
+      importData: '',
+      importFile: null,
+      importLoading: false
     }
   },
 
@@ -568,6 +604,8 @@ export default {
         this.organizations = this.organizations.map(o => {
           if (o._id === this.toApproveItem._id) {
             o.validationState = 'published'
+            o.publishedAt = 'Dans cette session'
+            // todo: get the actual date object from the server
           }
           return o
         })
@@ -631,6 +669,42 @@ export default {
         case 'pending':
           return 'En attente'
       }
+    },
+    openImportModal () {
+      this.importModal = true
+    },
+
+    importOrganizations () {
+      this.importLoading = true
+      const exec = data => {
+        this.$apitator.post('/admin/organizations/import', { data }, { withAuth: true }).then(() => {
+          this.approveModal = false
+          this.importLoading = false
+          this.$store.commit('ADD_ALERT', {
+            color: 'success',
+            text: 'Importation réussite, une grande aventure commence...'
+          })
+        }).catch(() => {
+          this.importLoading = false
+          this.$store.commit('ADD_ALERT', {
+            color: 'error',
+            text: "L'importation a échoué, cela peut être du à un problème de format (colonnes) des données"
+          })
+        })
+      }
+      if (this.importData.length > 0) {
+        console.log('use str')
+        exec(this.importData)
+      } else {
+        const reader = new FileReader()
+        reader.readAsText(this.importFile)
+        reader.onloadend = (event) => {
+          exec(event.target.result)
+        }
+        reader.onerror = () => {
+          console.log(reader.error)
+        }
+      }
     }
   }
 }