refacto: Add TextHelpersMixin.vue

src/mixins/TextHelpersMixin.vue

+<script>
+export default {
+  methods: {
+    stripHtml(content){
+      return content.replace(/<\/?[^>]+>/ig, " ");
+    },
+    textTruncate(content, size) {
+      return content.length > size ? `${content.slice(0, size-1)}...` : content;
+    },
+  },
+};
+</script>

src/views/Dashboard.vue

@@ -13,11 +13,15 @@
 </template>
 
 <script>
-import CrudList from '@/components/crud/CrudList';
 import { mapState, mapGetters, mapActions } from 'vuex';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
+import CrudList from '@/components/crud/CrudList';
 
 export default {
   name: 'Dashboard',
+  mixins: [
+    TextHelpersMixin,
+  ],
   components: {
     CrudList,
   },
@@ -69,12 +73,6 @@ export default {
     onPagination(pagination){
       this.retrieveProjects({ page: pagination.page, size: pagination.itemsPerPage});
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
     requestProjectsDeletion(idList) {
       this.requestDeletion(idList)
     }

src/views/home.vue

@@ -54,11 +54,15 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
-import CrudListPublic from '@/components/crud/CrudListPublic'
+import { mapActions, mapGetters } from 'vuex';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
+import CrudListPublic from '@/components/crud/CrudListPublic';
 
 export default {
   name: 'HomePage',
+  mixins: [
+    TextHelpersMixin,
+  ],
   components: {
     CrudListPublic,
     Hopla: () => import('@/components/renderer/file/model/Hopla'),
@@ -356,12 +360,6 @@ export default {
     loadPage(page) {
       this.loadProjectList({ page, size: 8})
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
   },
   created() {
     this.loadProjectList({ size: 8 })

src/views/projects/ProjectGroups.vue

@@ -21,12 +21,14 @@
 import store from '@/store';
 import { mapGetters, mapActions } from 'vuex'
 import RequiresManagerMixin from '@/mixins/RequiresManagerMixin';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudList from '@/components/crud/CrudList';
 
 export default {
   name: 'ProjectGroups',
   mixins: [
     RequiresManagerMixin,
+    TextHelpersMixin,
   ],
   components: {
     CrudList,
@@ -83,12 +85,6 @@ export default {
         this.deletedGroup = {};
       })
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
   },
   beforeRouteEnter(to, from, next) {
     store.dispatch('group/loadProjectGroups').then(() => next());

src/views/projects/ProjectPublic.vue

@@ -44,11 +44,15 @@
 <script>
 import store from '@/store';
 import { mapState, mapActions } from 'vuex';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudItemHeader from '@/components/crud/CrudItemHeader';
 import CrudListPublic from '@/components/crud/CrudListPublic';
 
 export default {
   name: 'ProjectPublic',
+  mixins: [
+    TextHelpersMixin,
+  ],
   props: {
     projectId: {
       type: String,
@@ -96,12 +100,6 @@ export default {
     loadPage(page) {
       this.loadSetList({ page, size: 8, projectId: this.currentProject.id })
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
   },
   beforeRouteEnter(to, from, next) {
     store

src/views/projects/ProjectSets.vue

@@ -13,10 +13,14 @@
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudList from '@/components/crud/CrudList';
 
 export default {
   name: 'ProjectSets',
+  mixins: [
+    TextHelpersMixin,
+  ],
   components: {
     CrudList,
   },
@@ -45,15 +49,6 @@ export default {
         isSelectable: !set.numItems,
         updatedAt: set.updatedAt,
         to: `/sets/${set.id}/items`,
-        // Feature to come soon
-        // actions: this.isManager ?
-        //   [
-        //     {
-        //       name: 'delete',
-        //       icon: 'mdi-delete',
-        //     },
-        //   ] :
-        //   undefined,
       }));
     },
   },
@@ -62,12 +57,6 @@ export default {
     onPagination(pagination){
       this.loadProjectSets({ page: pagination.page, size: pagination.itemsPerPage});
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
     deleteSetList(idList) {
       this.deleteMultiSet(idList)
     }

src/views/projects/ProjectTemplates.vue

@@ -12,12 +12,14 @@
 import store from '@/store';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import RequiresManagerMixin from '@/mixins/RequiresManagerMixin';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudList from '@/components/crud/CrudList';
 
 export default {
   name: 'ProjectTemplates',
   mixins: [
     RequiresManagerMixin,
+    TextHelpersMixin,
   ],
   components: {
     CrudList,
@@ -73,12 +75,6 @@ export default {
     // onPublish(templateId) {
     //   console.log(`Publishing ${templateId}`);
     // },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
   },
   beforeRouteEnter(to, from, next) {
     const loadPublicTemplate = store.dispatch('template/loadPublicTemplates');

src/views/sets/SetItems.vue

@@ -13,10 +13,14 @@
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudList from '@/components/crud/CrudList';
 
 export default {
   name: 'SetItems',
+  mixins: [
+    TextHelpersMixin,
+  ],
   components: {
     CrudList,
   },
@@ -49,15 +53,6 @@ export default {
         isSelectable: item.canEdit,
         updatedAt: item.updatedAt,
         to: `/items/${item.id}/viewer`,
-        // Feature to come soon
-        // actions: this.canContribute?
-        //   [
-        //     {
-        //       name: 'delete',
-        //       icon: 'mdi-delete',
-        //     },
-        //   ] :
-        //   undefined,
       }));
     },
   },
@@ -66,12 +61,6 @@ export default {
     onPagination(pagination){
       this.setItemsLoad({ page: pagination.page, size: pagination.itemsPerPage});
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
     deleteItemList(idList) {
       this.itemMultiDelete(idList)
     }

src/views/sets/SetPublic.vue

@@ -88,11 +88,15 @@
 import { VContainer } from 'vuetify/lib';
 import store from '@/store';
 import { mapState, mapActions } from 'vuex';
+import TextHelpersMixin from '@/mixins/TextHelpersMixin';
 import CrudItemHeader from '@/components/crud/CrudItemHeader';
 import CrudListPublic from '@/components/crud/CrudListPublic';
 
 export default {
   name: 'SetPublic',
+  mixins: [
+    TextHelpersMixin,
+  ],
   props: {
     setId: {
       type: String,
@@ -163,12 +167,6 @@ export default {
       if (this.item_ids) payload = { item_ids, ...payload };
       this.loadItemList(payload);
     },
-    stripHtml(content) {
-      return content.replace(/<\/?[^>]+>/ig, " ");
-    },
-    textTruncate(content, size) {
-      return content.length > size ? `${content.slice(0, size-1)}...` : content;
-    },
   },
   beforeRouteEnter(to, from, next) {
     next((vm) => {