Merge pull request #10 from ahmedkandel/master

Author: Brian Dillingham

dist/js/field.js

@@ -43,6 +43,7 @@ You can set min, max, size or custom rule objects
 Here are a few customization options
 
 - `->showCounts()` Shows "selected/total"
+- `->showPreview()` Shows only selected
 - `->hideToolbar()` Removes search & select all
 - `->height('500px')` Set custom height
 - `->fullWidth()` Set to full width

readme.md

@@ -2,7 +2,10 @@
     <default-field :field="field" :full-width-content="field.fullWidth" :show-help-text="false">
         <template slot="field" :class="{'border-danger border': hasErrors}">
             <div :class="{'border-danger border': hasErrors}">
-                <div v-if="field.showToolbar" class="flex border border-40">
+                <div v-if="field.showToolbar" class="flex border-b-0 border border-40 relative">
+                    <div v-if="preview" class="flex justify-center items-center absolute pin z-10 bg-white">
+                        <h3>{{ __('Selected Items') }} ({{ selected.length  }})</h3>
+                    </div>
                     <div @click="selectAll" class="w-16 text-center flex justify-center items-center">
                         <fake-checkbox :checked="selectingAll" class="cursor-pointer"></fake-checkbox>
                     </div>
@@ -11,7 +14,7 @@
                         <span v-if="search" @click="clearSearch" class="pin-r font-sans font-bolder absolute pr-8 cursor-pointer text-black hover:text-80">x</span>
                     </div>
                 </div>
-                <div class="border-t-0 border border-40 relative overflow-auto" :style="{ height: field.height }">
+                <div class="border border-40 relative overflow-auto" :style="{ height: field.height }">
                     <div v-for="resource in resources" :key="resource.value" @click="toggle($event, resource.value)" class="flex py-3 cursor-pointer select-none hover:bg-30">
                         <div class="w-16 flex justify-center">
                             <fake-checkbox :checked="selected.includes(resource.value)" />
@@ -29,9 +32,13 @@
                 <span v-if="field.showCounts" class="pr-2">
                     {{ selected.length  }} / {{ available.length }}
                 </span>
-                <span v-if="field.helpText">
+                <span v-if="field.helpText" class="pr-2">
                     {{ field.helpText }}
                 </span>
+                <span v-if="field.showPreview" @click="togglePreview($event)" class="flex cursor-pointer select-none float-right">
+                    <span class="pr-2">{{ __('Preview') }}</span>
+                    <fake-checkbox class="flex" :checked="preview" />
+                </span>
             </div>
 
         </template>
@@ -51,7 +58,8 @@ export default {
             search: null,
             selected: [],
             selectingAll: false,
-            available: []
+            available: [],
+            preview: false
         }
     },
     methods: {
@@ -142,7 +150,7 @@ export default {
         },
         checkIfSelectAllIsActive() {
 
-            if(this.resources.length === 0) {
+            if(this.resources.length === 0 || this.preview) {
                 this.selectingAll = false; return;
             }
 
@@ -155,10 +163,19 @@ export default {
             })
 
             this.selectingAll = visibleAndSelected.length == this.resources.length;
+        },
+        togglePreview(event){
+            this.preview = ! this.preview;
         }
     },
     computed: {
         resources: function() {
+            if(this.preview) {
+                return this.available.filter((resource) => {
+                    return this.selected.includes(resource.value)
+                });
+            }
+
             if(this.search == null) {
                 return this.available;
             }

resources/js/components/FormField.vue

@@ -21,6 +21,8 @@ class AttachMany extends Field
 
     public $showCounts = false;
 
+    public $showPreview = false;
+
     public $showOnIndex = false;
 
     public $showOnDetail = false;
@@ -65,6 +67,7 @@ public function resolve($resource, $attribute = null)
             'height' => $this->height,
             'fullWidth' => $this->fullWidth,
             'showCounts' => $this->showCounts,
+            'showPreview' => $this->showPreview,
             'showToolbar' => $this->showToolbar
         ]);
     }
@@ -107,4 +110,11 @@ public function showCounts($showCounts=true)
 
         return $this;
     }
+
+    public function showPreview($showPreview=true)
+    {
+        $this->showPreview = $showPreview;
+
+        return $this;
+    }
 }