Merge pull request #754 from Cannonb4ll/3.0

[3.x] Another way for tags displaying & collapsable panels
laravel · Feb 4, 2020 · f9f9e12 · f9f9e12
2 parents aa1ead1 + f432348
commit f9f9e12
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/resources/js/screens/recentJobs/index.vue b/resources/js/screens/recentJobs/index.vue
@@ -132,16 +132,19 @@
                 <h5>Recent Jobs</h5>
             </div>
 
-            <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
+            <div v-if="!ready"
+                 class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color">
-                    <path d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z"></path>
+                    <path
+                        d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z"></path>
                 </svg>
 
                 <span>Loading...</span>
             </div>
 
 
-            <div v-if="ready && jobs.length == 0" class="d-flex flex-column align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
+            <div v-if="ready && jobs.length == 0"
+                 class="d-flex flex-column align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
                 <span>There aren't any jobs.</span>
             </div>
 
@@ -158,7 +161,8 @@
                 <tbody>
                 <tr v-if="hasNewEntries" key="newEntries" class="dontanimate">
                     <td colspan="100" class="text-center card-bg-secondary py-1">
-                        <small><a href="#" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New Entries</a></small>
+                        <small><a href="#" v-on:click.prevent="loadNewEntries" v-if="!loadingNewEntries">Load New
+                            Entries</a></small>
 
                         <small v-if="loadingNewEntries">Loading...</small>
                     </td>
@@ -174,7 +178,9 @@
                         <small class="text-muted">
                             <router-link :to="{name: 'recent-jobs-preview', params: {jobId: job.id}}">View detail</router-link> |
                             Queue: {{job.queue}}
-                            <span v-if="job.payload.tags.length">| Tags: {{ job.payload.tags && job.payload.tags.length ? job.payload.tags.join(', ') : '' }}</span>
+                            <span v-if="job.payload.tags.length">
+                                | Tags: {{ job.payload.tags && job.payload.tags.length ? job.payload.tags.slice(0,3).join(', ') : '' }}<span v-if="job.payload.tags.length > 3"> ({{ job.payload.tags.length - 3 }} more)</span>
+                            </span>
                         </small>
                     </td>
                     <td class="table-fit">

diff --git a/resources/js/screens/recentJobs/job.vue b/resources/js/screens/recentJobs/job.vue
@@ -58,6 +58,10 @@
             <div class="card-header d-flex align-items-center justify-content-between">
                 <h5 v-if="!ready">Job Preview</h5>
                 <h5 v-if="ready">{{job.name}}</h5>
+
+                <a data-toggle="collapse" href="#collapseDetails" role="button">
+                    Collapse
+                </a>
             </div>
 
             <div v-if="!ready" class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
@@ -68,7 +72,7 @@
                 <span>Loading...</span>
             </div>
 
-            <div class="card-body card-bg-secondary" v-if="ready">
+            <div class="card-body card-bg-secondary collapse show" id="collapseDetails" v-if="ready">
                 <div class="row mb-2">
                     <div class="col-md-2"><strong>ID</strong></div>
                     <div class="col">{{job.id}}</div>
@@ -77,10 +81,6 @@
                     <div class="col-md-2"><strong>Queue</strong></div>
                     <div class="col">{{job.queue}}</div>
                 </div>
-                <div class="row mb-2">
-                    <div class="col-md-2"><strong>Tags</strong></div>
-                    <div class="col">{{ job.payload.tags && job.payload.tags.length ? job.payload.tags.join(', ') : '' }}</div>
-                </div>
                 <div class="row">
                     <div class="col-md-2"><strong>Completed At</strong></div>
                     <div class="col">{{readableTimestamp(job.completed_at)}}</div>
@@ -92,11 +92,29 @@
         <div class="card mt-4" v-if="ready">
             <div class="card-header d-flex align-items-center justify-content-between">
                 <h5>Data</h5>
+
+                <a data-toggle="collapse" href="#collapseData" role="button">
+                    Collapse
+                </a>
             </div>
 
-            <div class="card-body code-bg text-white">
+            <div class="card-body code-bg text-white collapse show" id="collapseData">
                 <vue-json-pretty :data="prettyPrintJob(job.payload.data)"></vue-json-pretty>
             </div>
         </div>
+
+        <div class="card mt-4" v-if="ready && job.payload.tags.length">
+            <div class="card-header d-flex align-items-center justify-content-between">
+                <h5>Tags</h5>
+
+                <a data-toggle="collapse" href="#collapseTags" role="button">
+                    Collapse
+                </a>
+            </div>
+
+            <div class="card-body code-bg text-white collapse show" id="collapseTags">
+                <vue-json-pretty :data="job.payload.tags"></vue-json-pretty>
+            </div>
+        </div>
     </div>
 </template>