Many

.gitignore

@@ -1,2 +1,3 @@
 /composer.lock
-/vendor
+/vendor
+/node_modules

gulpfile.js

@@ -0,0 +1,7 @@
+var elixir = require('laravel-elixir');
+
+require('laravel-elixir-vueify');
+
+elixir(function(mix) {
+    mix.browserify('app.js');
+});

package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "scripts": {
+    "prod": "gulp --production",
+    "dev": "gulp watch"
+  },
+  "devDependencies": {
+    "babel-polyfill": "^6.13.0",
+    "email-addresses": "^2.0.2",
+    "gulp": "^3.9.1",
+    "js-cookie": "^2.1.2",
+    "laravel-elixir": "^5.0.0",
+    "laravel-elixir-vueify": "^1.0.3",
+    "vue": "^1.0.26",
+    "vue-resource": "^0.9.3"
+  }
+}

resources/assets/js/app.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import './bootstrap';
+import 'babel-polyfill'
+
+import AddManyMembers from './components/AddManyMembers.vue';
+import AddMembersFile from './components/AddMembersFile.vue';
+
+Vue.component('addManyMembers', AddManyMembers);
+Vue.component('addMembersFile', AddMembersFile);
+
+new Vue({
+    el: 'body'
+});

resources/assets/js/bootstrap.js

@@ -0,0 +1,10 @@
+import Cookies from 'js-cookie';
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+Vue.http.interceptors.push(function (request, next) {
+    request.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');
+    next();
+});

resources/assets/js/components/AddManyMembers.vue

@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <div v-if="adding">
+            <p v-if="canAddMore">Klaar! <button class="btn btn-xs btn-success" @click="addMore">Meer leden toevoegen</button></p>
+            <p v-else><strong>Toevoegen van addressen...</strong></p>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>E-mailadres</th>
+                    <th>Naam</th>
+                    <th>Status</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="address in addressesToAdd">
+                    <td>{{ address.email }}</td>
+                    <td>{{ address.name }}</td>
+                    <td>
+                        <span v-show="address.status == 'pending'">
+                            <i class="fa fa-spinner fa-pulse fa-fw"></i>
+                        </span>
+                        <span v-show="address.status == 'ok'" class="text-success">
+                            <i class="fa fa-check fa-fw"></i>
+                        </span>
+                        <span v-show="address.status == 'invalid'" class="text-danger">
+                            <i class="fa fa-times fa-fw"></i>
+                        </span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="add-form" v-else>
+            <p>Voer een door komma's gescheiden lijst met e-mailadressen in, eventueel met namen. Extra spaties zijn
+                toegestaan.</p>
+            <p>Voorbeelden van geldige invoeren:</p>
+            <ul>
+                <li><code>[email protected], [email protected], [email protected]</code></li>
+                <li><code>Jan Smit &lt;[email protected]&gt;, Piet Jansen&lt;[email protected]&gt;, "Company Example.com"
+                    &lt;[email protected]&gt;</code>
+                </li>
+                <li><code>[email protected], Piet &lt;[email protected]&gt;,[email protected]</code></li>
+            </ul>
+            <div class="form-group">
+            <textarea class="form-control" rows="5" placeholder=""
+                      style="font-family: Menlo,Monaco,Consolas,'Courier New',monospace"
+                      v-model="addressList"></textarea>
+                <div class="alert alert-danger" v-show="invalid">Ongeldige invoer</div>
+            </div>
+            <button type="button" class="btn btn-success" @click="add">Lijst toevoegen</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import emailAddresses from 'email-addresses';
+
+
+    export default {
+        props: ['listId'],
+        data() {
+            return {
+                addressList: '',
+                invalid: false,
+                adding: false,
+                addressesToAdd: [],
+                canAddMore: false,
+            };
+        },
+        methods: {
+            add() {
+                let addresses = emailAddresses.parseAddressList(this.addressList);
+                if (!addresses) {
+                    this.invalid = true;
+                } else {
+                    this.adding = true;
+                    this.invalid = false;
+                    this.addressesToAdd = [];
+                    this.canAddMore = false;
+                    Promise.all(addresses.map(this.submitAddress)).then(() => {
+                        this.canAddMore = true;
+                    });
+                }
+            },
+            submitAddress(address) {
+                let addressToAdd = {
+                    email: address.address,
+                    name: address.name,
+                    status: 'pending'
+                };
+                this.addressesToAdd.push(addressToAdd);
+                return this.$http.post(`${this.listId}/members`, {
+                    email: address.address,
+                    name: address.name
+                }).then(response => {
+                    addressToAdd.status = response.json().status;
+                });
+            },
+            addMore() {
+                this.addressList = '';
+                this.adding = false;
+            }
+        }
+    }
+</script>

resources/assets/js/components/AddMembersFile.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+
+    </div>
+</template>

resources/views/admin/lists/show.blade.php

@@ -10,39 +10,42 @@
     <a href="{{ route('admin.newsletters.lists.index') }}" class="btn btn-primary margin-bottom">
         <i class="fa fa-arrow-left"></i> Terug
     </a>
-    <div class="box box-primary">
-        <div class="box-header with-border">
-            <h3 class="box-title">Lid toevoegen</h3>
-        </div>
-        <div class="box-body">
-            <form method="post"
-                  action="{{ route('admin.newsletters.lists.members.store', $list) }}"
-                  style="display: flex; margin-bottom: 1em"
-            >
-                {{ csrf_field() }}
-                <input type="text"
-                       name="email"
-                       value="{{ old('email', '') }}"
-                       class="form-control"
-                       placeholder="E-mailadres"
-                       style="margin-right: 10px;"
-                >
-                <input type="text"
-                       name="name"
-                       value="{{ old('name', '') }}"
-                       class="form-control"
-                       placeholder="Naam (optioneel)"
-                       style="margin-right: 10px;"
+
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li class="active"><a href="#addOneMember" data-toggle="tab">Enkel lid toevoegen</a></li>
+            <li><a href="#addManyMembers" data-toggle="tab">Kommagescheiden lijst toevoegen</a></li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane active" id="addOneMember">
+                <form method="post"
+                      action="{{ route('admin.newsletters.lists.members.store', $list) }}"
+                      style="display: flex;"
                 >
-                <button type="submit" class="btn btn-success">Toevoegen</button>
-            </form>
-            @if(count($errors))
-                <div class="alert alert-danger">
-                    {{ $errors->first() }}
-                </div>
-            @endif
+                    {{ csrf_field() }}
+                    <input type="text"
+                           name="email"
+                           value="{{ old('email', '') }}"
+                           class="form-control"
+                           placeholder="E-mailadres"
+                           style="margin-right: 10px;"
+                    >
+                    <input type="text"
+                           name="name"
+                           value="{{ old('name', '') }}"
+                           class="form-control"
+                           placeholder="Naam (optioneel)"
+                           style="margin-right: 10px;"
+                    >
+                    <button type="submit" class="btn btn-success">Toevoegen</button>
+                </form>
+            </div>
+            <div class="tab-pane" id="addManyMembers">
+                <add-many-members list-id="{{ $list->getId() }}"></add-many-members>
+            </div>
         </div>
     </div>
+
     <div class="box box-primary">
         <div class="box-header with-border">
             <h3 class="box-title">
@@ -93,4 +96,8 @@ class="btn btn-xs btn-default"
             </div>
         </div>
     </div>
-@endsection
+@endsection
+
+@section('js')
+    <script src="{{ asset('vendor/newsletter/js/app.js') }}"></script>
+@append

src/Http/Controllers/Admin/Members.php

@@ -47,10 +47,17 @@ public function store($listId, Request $request)
         $name = $request->input('name');
 
         if (!$this->emailValidator->isValid($email)) {
+            if ($request->wantsJson()) {
+                return ['status' => 'invalid'];
+            }
             return $this->redirector->back()->withInput()->withErrors(['Ongeldig e-mailadres']);
         }
 
         $this->mailgun->addMember($listId, $email, $name);
+
+        if ($request->wantsJson()) {
+            return ['status' => 'ok'];
+        }
         return $this->redirectToList($listId);
     }
 

src/ServiceProvider.php

@@ -15,12 +15,13 @@
 use JeroenNoten\LaravelNewsletter\Mailgun\MailgunInterface;
 use JeroenNoten\LaravelPackageHelper\ServiceProviderTraits\Config;
 use JeroenNoten\LaravelPackageHelper\ServiceProviderTraits\Migrations;
+use JeroenNoten\LaravelPackageHelper\ServiceProviderTraits\PublicAssets;
 use JeroenNoten\LaravelPackageHelper\ServiceProviderTraits\Views;
 use Mailgun\Mailgun as BaseMailgun;
 
 class ServiceProvider extends BaseServiceProvider
 {
-    use Views, Config, Migrations;
+    use Views, Config, Migrations, PublicAssets;
 
     public function boot(Router $router, Dispatcher $events)
     {
@@ -32,6 +33,8 @@ public function boot(Router $router, Dispatcher $events)
             $viewsPath => base_path("resources/views/vendor/{$this->name()}/mails"),
         ], 'mails');
 
+        $this->publishPublicAssets();
+
         $this->publishConfig();
         $this->publishMigrations();
         $this->routes($router);