W on CMS pages

Author: ALPIXELMaiki

dist/build.js

@@ -77,6 +77,10 @@
         return _.truncate(str, {'length':length})
     })
 
+    Vue.filter('sanitize',(str) => {
+        return str.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
+    })
+
 
 
 </script>

dist/build.js.map

@@ -77,9 +77,6 @@
                                     <th @click="sortBy('title')" :class="[{ active: sortKey == 'title' },sortType[0], 'sort']">
                                         Title
                                     </th>
-                                    <th @click="sortBy('type')" :class="[{ active: sortKey == 'type' },sortType[0], 'sort']">
-                                        Type
-                                    </th>
                                     <th @click="sortBy('dateCreated')" :class="[{ active: sortKey == 'dateCreated' },sortType[0], 'sort']">
                                         Date de création
                                     </th>
@@ -106,9 +103,6 @@
                                     <th>
                                         Title
                                     </th>
-                                    <th>
-                                        Type
-                                    </th>
                                     <th>
                                         Date de création
                                     </th>
@@ -132,21 +126,17 @@
                                     <td>
                                         {{ data.lang }}
                                     </td>
-                                    <td>
+                                    <td :title="data.title">
                                         {{ data.title | truncate }}
-
                                     </td>
-                                    <td>
-                                        {{ data.type }}
-                                    </td>
-                                    <td>
+                                    <td class="data-date">
                                         {{ data.dateCreated | formatDate('fr','[Le] DD.MM.YYYY') }}
                                     </td>
-                                    <td>
+                                    <td class="data-date">
                                         {{ data.dateUpdated | formatDate('fr','[Le] DD.MM.YYYY') }}
                                     </td>
                                     <td>
-                                        {{ data.status }}
+                                        <span class="badge" :class="data.status | sanitize">{{ data.status | capitalize }}</span>
                                     </td>
                                     <td>
                                         <router-link class="btn cc-bg-primary fa-edit" :to="{name:'admin-profile', params:{id: data.id}}">@TODO : Edit</router-link>
@@ -458,7 +448,7 @@
 
                 // Make an array with matching search
                 let filtered_datas = _.filter(that.datas, function(p){
-                  return _.includes(p.id,that.searchQuery.toLowerCase()) || _.includes(p.title.toLowerCase(),that.searchQuery.toLowerCase())
+                  return _.includes(p.id,that.searchQuery.toLowerCase()) || _.includes(p.title.toLowerCase(),that.searchQuery.toLowerCase()) || _.includes(p.status.toLowerCase(),that.searchQuery.toLowerCase())
                 })
 
                 // set datasFiltered with filtered results

src/js/components/filters.vue

@@ -126,7 +126,7 @@
                                     <td>
                                         {{ data.name.last | upper }}
                                     </td>
-                                    <td>
+                                    <td class="data-date">
                                         {{ data.registered | formatDate('fr','[Le] DD.MM.YYYY') }}
                                     </td>
                                     <td>

src/js/views/pages/cms/cms.vue

@@ -126,7 +126,7 @@
                                     <td>
                                         {{ data.name.last | upper }}
                                     </td>
-                                    <td>
+                                    <td class="data-date">
                                         {{ data.registered | formatDate('fr','[Le] DD.MM.YYYY') }}
                                     </td>
                                     <td>

src/js/views/persons/admins/admins.vue

@@ -82,5 +82,28 @@
                 }
             }
         }
+
+        td {
+
+            &.data-date {
+                font-size: 1.3rem;
+                color:@gray
+            }
+        }
+
+        .badge {
+            font-size: 1.2rem;
+            border-radius: 2px;
+
+            &.published {
+                background-color:@green;
+                color:white;
+            }
+
+            &.pending {
+                background-color:@red;
+                color:white;
+            }
+        }
     }
 } // end/ -> Users Homepage