split listing row into multiple partials

assets/js/Components/Admin/Header.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-module.exports = {
+export default {
   name: "admin-header",
   props: ["title"]
 };

assets/js/Components/Admin/Toolbar.vue

@@ -50,7 +50,7 @@
 <script>
 const tinycolor = require("tinycolor2");
 
-module.exports = {
+export default {
   name: "admin-toolbar",
   props: ["siteName", "menu", "labels"],
   data: () => {

assets/js/Components/Base/Notification.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-module.exports = {
+export default {
   name: "bolt-notification",
   props: ["message", "type", "time", "labels"],
   mounted(){

assets/js/Components/Editor/Partials/Label.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script>
-
-export default {
-  name: "editor-label",
-  props: ['label']
-};
+  export default {
+    name: "editor-label",
+    props: ['label']
+  };
 </script>

assets/js/Components/Listing/Filter.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-module.exports = {
+export default {
   name: "listing-filter",
   mounted() {
     const size = localStorage.getItem('listing-row-size');

assets/js/Components/Listing/Row.vue

@@ -1,56 +1,79 @@
 <template>
-  <div class="listing__row" :class="`is-${size}`">
+  <transition-group name="quickeditor" tag="div" class="listing--container">
+    <!-- row -->
     <div 
-      class="listing__row--item is-thumbnail" 
-      :style="`background-image: url(${thumbnail})`"
-      v-if="size === 'normal'"
-    ></div>
-   <div class="listing__row--item is-details" v-html="excerpt">
+      v-if="!quickEditor"
+      class="listing__row"
+      :class="`is-${size}`" 
+      key="row"
+    >
+      <!-- column thumbnail -->
+      <div
+        class="listing__row--item is-thumbnail" 
+        :style="`background-image: url(${thumbnail})`"
+        v-if="size === 'normal'"
+      ></div>
+      <!-- end column -->
 
-   </div>
-   <div class="listing__row--item is-meta">
-     <ul class="listing__row--list">
-        <li v-if="size === 'normal'">
-         <i class="fas fa-user mr-2"></i> {{author}}
-        </li>
-        <li v-if="size === 'normal'">
-         <i class="fas mr-2" :class="definition.icon_one"></i> {{definition.name}} № <strong>&nbsp;{{id}}</strong>
-        </li>
-        <li>
-         <span class="status mr-2" :class="`is-${status}`"></span>{{date.published}}
-        </li>
-     </ul>
-   </div>
-   <div class="listing__row--item is-actions">
-     <ul class="listing--actions">
-       <li>
-          <a :href="`/bolt/edit/${id}`" class="link">
-            <div class="btn-group">
-              <button class="btn btn-grey btn-block btn-sm" type="button">
-                <i class="far fa-edit mr-1"></i> Edit
-              </button>
-              <button type="button" class="btn btn-sm btn-grey dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right">
-                ...
-              </div>
-            </div>
-          </a>
-       </li>
-       <li>    
-         <a :href="`/bolt/edit/${id}`" class="link"><i class="far fa-caret-square-down mr-1"></i>Quick Edit</a>
-        </li>
-     </ul>
-   </div>
-   <button v-if="sorting" class="listing__row--move"><i class="fas px-2 fa-equals"></i></button>
-  </div>
+      <!-- column details -->
+      <div 
+        class="listing__row--item is-details" 
+        v-html="excerpt"
+      ></div>
+      <!-- end column -->
+
+      <!-- column meta -->
+      <row-meta 
+        :record-id="recordId" 
+        :definition="definition" 
+        :date="date" 
+        :status="status" 
+        :author="author" 
+        :size="size"
+      ></row-meta>
+      <!-- end column -->
+      
+      <!-- column actions -->
+      <row-actions 
+        :record-id="recordId" 
+        @quickeditor="quickEditor = $event"
+      ></row-actions>
+      <!-- end column -->
+      
+      <!-- column sorting -->
+      <button 
+        v-if="sorting" 
+        class="listing__row--move"
+      >
+        <i class="fas px-2 fa-equals"></i>
+      </button>
+      <!-- end column -->
+
+    </div>
+
+    <!-- quick editor -->
+    <row-quick-editor 
+      v-if="quickEditor" 
+      @quickeditor="quickEditor = $event" 
+      key="test"
+    ></row-quick-editor>
+
+  </transition-group>
 </template>
 
 <script>
-module.exports = {
+import QuickEditor from './Row/_QuickEditor';
+import Actions from './Row/_Actions';
+import Meta from './Row/_Meta';
+
+export default {
   name: "listing-row",
-  props: ["id", "definition", "excerpt", "date", "status", "thumbnail", "author"],
+  props: ["recordId", "definition", "excerpt", "date", "status", "thumbnail", "author"],
+  components: {
+    "row-quick-editor":   QuickEditor,
+    "row-meta":           Meta,
+    "row-actions":        Actions
+  },
   created(){
     this.$root.$on('listing-row-size', data => this.size = data);
   },
@@ -60,7 +83,8 @@ module.exports = {
   data: () => {
     return {
       size: "normal",
-      sorting: false
+      sorting: false,
+      quickEditor: false,
     };
   },
 };

assets/js/Components/Listing/Row/_Actions.vue

@@ -0,0 +1,36 @@
+<template>
+   <div class="listing__row--item is-actions">
+     <ul class="listing--actions">
+       <li>
+          <a :href="`/bolt/edit/${recordId}`" class="link">
+            <div class="btn-group">
+              <button class="btn btn-grey btn-block btn-sm" type="button">
+                <i class="far fa-edit mr-1"></i> Edit
+              </button>
+              <button type="button" class="btn btn-sm btn-grey dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="sr-only">Toggle Dropdown</span>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                ...
+              </div>
+            </div>
+          </a>
+       </li>
+       <li>    
+         <button @click="quickEditor()" type="button" class="listing--actions--quickedit"><i class="far fa-caret-square-down mr-1"></i>Quick Edit</button>
+        </li>
+     </ul>
+   </div>
+</template>
+
+<script>
+  export default {
+    name: "actions",
+    props: ["recordId"],
+    methods:{
+      quickEditor(){
+        this.$emit('quickeditor', true);
+      }
+    }
+  };
+</script>

assets/js/Components/Listing/Row/_Meta.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="listing__row--item is-meta">
+      <ul class="listing__row--list">
+          <li v-if="size === 'normal'">
+            <i class="fas fa-user mr-2"></i> {{author}}
+          </li>
+          <li v-if="size === 'normal'">
+            <i class="fas mr-2" :class="definition.icon_one"></i> {{definition.name}} № <strong>&nbsp;{{recordId}}</strong>
+          </li>
+          <li>
+            <span class="status mr-2" :class="`is-${status}`"></span>{{date.published}}
+          </li>
+      </ul>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "meta-data",
+    props: ["size", "recordId", "definition", "date", "status", "author"]
+  };
+</script>

assets/js/Components/Listing/Row/_QuickEditor.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="quickedit__row">
+    <div class="quickedit__row--item is-content">
+      <h4>quick edit settings</h4>
+    </div>
+      <div class="quickedit__row--item is-actions">
+        <button @click="cancel()" type="button" class="btn btn-sm btn-secondary">
+          <i class="fas fa-ban mr-1"></i>Cancel
+        </button>
+        <button type="button" class="btn btn-sm btn-success">
+          <i class="fas fa-save mr-1"></i>Save
+        </button>
+      </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "quick-editor",
+    methods: {
+      cancel(){
+        this.$emit('quickeditor', false);
+      }
+    }
+  };
+</script>

assets/scss/modules/listing/_filter.scss

@@ -56,8 +56,9 @@
         }
       }
       &.is-selected{
+        background: var(--primary);
         svg g{
-          fill: var(--primary);
+          fill: var(--foreground);
         }
       }
       &.is-active{

assets/scss/modules/listing/_row.scss

@@ -1,8 +1,6 @@
 //** Lisitng | Row
 
 .listing__row{
-  transition: all 0.2s ease-in-out;
-  transform-origin: center;
   box-shadow: $card-box-shadow;
   background: var(--foreground);
   border-radius: $border-radius;
@@ -101,6 +99,7 @@
       color: theme-color('secondary');
     }
   }
+
   &--move{
     flex: 0 0 15px;
     padding: 0;
@@ -127,5 +126,54 @@
         color: var(--secondary);
       }
     }
+    &--quickedit{
+      background: transparent;
+      border: 0;
+      color: var(--primary);
+      padding: 0;
+      &:hover{
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
   }
 }
+
+.quickedit__row{
+  min-height: 200px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  background: var(--foreground);
+  margin-bottom: $spacer / 1.25;
+  width: 100%;
+  &--item{
+    padding: $spacer;
+    &.is-content{
+      
+    }
+    &.is-actions{
+      background: var(--shade-100);
+      display: flex;
+      align-items: center;
+      padding: $spacer / 2;
+      justify-content: space-between;
+    }
+  }
+}
+
+.listing--container{
+  position: relative;
+  overflow: hidden;
+}
+
+.quickeditor-enter-active, .quickeditor-leave-active { 
+  transition: transform 0.45s, opacity 0.25s; 
+}
+
+.quickeditor-enter, .quickeditor-leave-to{
+  opacity: 0;
+  transform: translateY(30px);
+  transform-origin: top;
+  position: absolute;
+}

templates/_partials/_content_actions.twig

@@ -1,97 +0,0 @@
-{% import '@bolt/_macro/_macro.twig' as macro %}
-
-{% set modifiable = true %}
-{% set permissions = { 'publish': true, 'depublish': true, 'create': true, 'delete': true } %}
-
-<div class="btn-group">
-    <a href="{{ path('bolt_edit_record', {'id': record.id}) }}" class="btn btn-light">
-        <i class="fas fa-edit"></i> {{ 'edit'|trans }}
-    </a>
-    <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <span class="sr-only">{{ 'action.toggle_dropdown'|trans }}</span>
-    </button>
-  <div class="dropdown-menu dropdown-menu-right">
-
-    {% if record.status == "published" and record.link is not empty %}
-            <a class="dropdown-item" href="{{ record.link }}" target="_blank">
-                <i class="fas fa-external-link-square-alt"></i> {{ 'general.view-on-site'|trans }}
-            </a>
-    {% endif %}
-
-    {% if modifiable %}
-        {% if record.status != 'published' %}
-            {% if permissions.publish %}
-                {{ macro.actionform(record, 'publish', 'fa-circle status-published', __('contenttypes.generic.publish',{'%contenttype%':record.definition.singular_name})) }}
-            {% endif %}
-        {% else %}
-            {% if permissions.depublish %}
-                {{ macro.actionform(record, 'held', 'fa-circle status-held', __('general.status-change-held')) }}
-            {% endif %}
-        {% endif %}
-        {% if permissions.create %}
-                <a class="dropdown-item" href="{{ path('bolt_edit_record', {'id': record.id, 'duplicate': 1}) }}">
-                    <i class="fas fa-copy"></i> {{ 'contenttypes.generic.duplicate', {'%contenttype%': record.definition.singular_name}|trans }}
-                </a>
-        {% endif %}
-        {% if permissions.delete %}
-                {{ macro.actionform(record, 'delete',
-                'fa-trash',
-                __('contenttypes.generic.delete', {'%contenttype%': record.definition.singular_name}),
-                "Are you sure you want to delete '" ~ record.title ~ "'?" ) }}
-        {% endif %}
-        <div class="dropdown-divider"></div>
-    {% endif %}
-
-    <span class="dropdown-item">
-        {{ 'general.author'|trans }}:  <strong><i class="fas fa-user"></i>
-            {% set owner = record.author %}
-            {% if owner %}
-            {{ owner[:15] }}
-            {% else %}
-            <s>user {{ record.ownerid }}</s>
-                {% endif %}
-        </strong>
-    </span>
-
-        <span class="dropdown-item">{{ 'general.status-current'|trans }}:
-            <strong> {{ record.status }}</strong></span>
-        <span class="dropdown-item">{{ 'general.slug'|trans }}:
-            <code title="{{ record.slug }}">{{ record.slug|excerpt(24) }}</code>
-        </span>
-        <span class="dropdown-item">{{ 'general.created-on'|trans }}:
-            <i class="fas fa-asterisk"></i> {{ record.datecreated|date("Y-m-d H:i") }}
-        </span>
-        <span class="dropdown-item">{{ 'general.published-on'|trans }}:
-            <i class="fas fa-calendar"></i> {{ record.datepublish|date("Y-m-d H:i") }}
-        </span>
-        <span class="dropdown-item">{{ 'general.last-edited-on'|trans }}:
-            <i class="fas fa-sync-alt"></i> {{ record.datechanged|date("Y-m-d H:i") }}
-        </span>
-
-{# --
-    {% set taxonomytypes = record.taxonomy.grouped|default %}
-    {% for type, taxonomies in taxonomytypes %}
-        {% if taxonomies|length > 1 %}
-            {% set taxlist = [] %}
-            {% for taxonomy in taxonomies %}
-                {% set taxlist = taxlist|merge([taxonomy.name]) %}
-            {% endfor %}
-            <div class="item">
-                <span class="dropdown-item">{{ app.config.get('taxonomy')[type].name }}:
-                    <i class="fas fa-tag"></i> {{ taxlist|join(", ")[:24] }}
-                </span>
-            </div>
-        {% else %}
-            <div class="item">
-                {% set taxonomy = taxonomies|first %}
-                <span class="dropdown-item">{{ app.config.get('taxonomy')[type].singular_name }}:
-                    <i class="fas fa-tag"></i> {{ taxonomy.name[:24] }}
-                </span>
-            </div>
-        {% endif %}
-    {% endfor %}
--- #}
-
-  </div>
-</div>
-

templates/_partials/_content_listing.twig

@@ -6,17 +6,17 @@
     <draggable :options="{handle:'.listing__row--move', animation: 0}">
         {% for record in records %}
           <listing-row
-              :id="'{{ record.id }}'"
-              :definition="{{ record.definition|json_encode() }}"
-              :excerpt="{{ record.excerpt(150, true)|json_encode() }}"
-              :status="'{{ record.status }}'"
-              :thumbnail="'{{ record.image|thumbnail(150, 100) }}'"
-              :date="{
-              published: '{{ record.publishedAt|localizeddate('medium', 'none', null, 'UTC') }}',
-              created: '{{ record.datecreated|date("Y-m-d H:i") }}',
-              changed: '{{ record.datechanged|date("Y-m-d H:i") }}'
-              }"
-              author="{{record.author}}"
+            :record-id="'{{ record.id }}'"
+            :definition="{{ record.definition|json_encode() }}"
+            :excerpt="{{ record.excerpt(150, true)|json_encode() }}"
+            :status="'{{ record.status }}'"
+            :thumbnail="'{{ record.image|thumbnail(150, 100) }}'"
+            :date="{
+            published: '{{ record.publishedAt|localizeddate('medium', 'none', null, 'UTC') }}',
+            created: '{{ record.datecreated|date("Y-m-d H:i") }}',
+            changed: '{{ record.datechanged|date("Y-m-d H:i") }}'
+            }"
+            author="{{record.author}}"
           >
           </listing-row>
         {% endfor %}

templates/_partials/_content_record_default.twig

@@ -1,42 +0,0 @@
-<tr>
-    <td class="listing-excerpt">
-        <div class="clip-overflow">{{ record.excerpt(400, true) }}</div>
-    </td>
-    <td class="listing-meta">
-        <span>
-            {% set icon = record.definition.icon_one|default('fa-adjust') %}
-            <i class="fas {{ icon|replace({':': '-' }) }} fa-fw"></i>
-
-            {% if not app.request.get('contenttype')|default() %}
-                <a href="{{ path('bolt_contentlisting', {'contenttype': record.definition.slug }) }}">
-                    {{ record.definition.name }}
-                </a>
-            {% else %}
-                {{ record.definition.name }}
-            {% endif %}
-            {% if not record.definition.singleton %}№ {{ record.id }}{% endif %}
-        </span>
-
-        <span>
-            <i class="fas fa-user fa-fw"></i>
-            {{ record.author }}
-        </span>
-
-        <span>
-            <i class="fas fa-circle status-{{ record.status }} fa-fw"></i> {{ record.publishedAt|localizeddate('medium', 'none', null, 'UTC') }}<br>
-            {#<i class="fa fa-align-left fa-fw"></i>#}
-            {#<a href="{{ path('bolt_edit_record', {'id': record.id}) }}#taxonomy">#}
-            {#Volgorde: 81#}
-            {#</a>#}
-        </span>
-
-    </td>
-    <td class="listing-thumb">
-        <img src="{{ record.image|thumbnail(100, 72) }}">
-    </td>
-    <td class="listing-actions">
-        {% include '@bolt/_partials/_content_actions.twig' %}
-
-    </td>
-
-</tr>

webpack.config.js

@@ -24,7 +24,7 @@ Encore
   .enableSassLoader()
   .enablePostCssLoader()
 
-  .addPlugin(new WebpackBar())
+  // .addPlugin(new WebpackBar())
 
   if(Encore.isProduction()){
     Encore.configureFilenames({