Use moment with Vue.js and return the date as UTC - vue.js

I have a component that lists all the tasks.
When I create a task I want to show the date of creation on the added task and I want to list all the tasks.
The issue is all the tasks dates are converted to datetime now UTC.
<template>
<div class="tasks-wrapper">
<div class="tasks-header">
<h4>{{ $t('client.taskListingTitle') }}</h4>
<b-button variant="custom" #click="showAddTaskModal">{{ $t('client.addTask') }}</b-button>
</div>
<b-table
striped
hover
:items="tasks"
:fields="fields"
show-empty
:empty-text="$t('common.noResultsFound')">
<template #cell(createdOn)="data">
{{ formatDate(data.createdOn) }}
</template>
</b-table>
<AddTaskModal />
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import AddTaskModal from '#/components/modals/AddTaskModal'
import moment from 'moment'
export default {
name: 'TaskListing',
components: {
AddTaskModal
},
data () {
return {
tasks: [],
fields: [
{ key: 'createdOn', label: this.$t('tasks.tableFields.date'), formatter: 'formatDate' },
{ key: 'domain', label: this.$t('tasks.tableFields.task') },
{ key: 'comment', label: this.$t('tasks.tableFields.comment') },
{ key: 'status', label: this.$t('tasks.tableFields.status') }
]
}
},
computed: {
...mapGetters('users', ['user'])
},
methods: {
...mapActions('tasks', ['fetchTasks']),
...mapActions('users', ['fetchUserById']),
formatDate: function (date) {
return moment(date).utc(true).format('DD.MM.YYYY HH:mm')
},
showAddTaskModal () {
this.$bvModal.show('addTaskModal')
}
},
async mounted () {
const currUserId = this.$router.history.current.params.id
if (this.user || this.user.userId !== currUserId) {
await this.fetchUserById(currUserId)
}
if (this.user.clientNumber !== null) {
const filters = { clientReferenceNumber: { value: this.user.clientNumber } }
this.tasks = await this.fetchTasks({ filters })
}
}
}
</script>
If I delete this:
<template #cell(createdOn)="data">
{{ formatDate(data.createdOn) }}
</template>
the dates are displayed correctly on the task lists, however, when a task is added an Invalid Date is shown. I need to refresh the page of it works.
Any ideas?

Related

Vue-i18n not translating inside component script tags

Building a language switcher, all works fine but when I use the $t() inside the data object it will not be dynamic when I switch between a language.
Component.vue
<template>
// loop menu here
<div v-for="item in menu">
{{ item.label }}
</div>
</template>
<script>
const mainMenu = [
{
label: $t('dashboard'),
},
{
label: $t('users'),
},
{
label: $t('settings'),
},
}
export default {
data () {
return {
menu = MainMenu
}
}
}
</script>
i18n.js
// https://vue-i18n.intlify.dev/
import { createI18n } from 'vue-i18n'
export function loadLocalMessages () {
const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages;
}
const i18n = createI18n({
locale: 'en',// .env not working
fallbackLocale: 'en',// .env not working
messages: loadLocalMessages(),
});
export default i18n
<template>
<div v-for="item in menu">
{{ item.label }}
</div>
</template>
<script>
export default {
computed: {
menu() {
return [{
label: this.$t('dashboard'),
}, {
label: this.$t('users'),
}, {
label: this.$t('settings'),
}]
}
}
}
</script>
data is only ever called once when creating the component, and it's not intended to be reactive.
To make a property reactive on $t(), it should be computed:
export default {
computed: {
hello() {
return this.$t('hello')
}
}
}
demo

Vue: Register part of package as component

I have got a wrapper around a package called vue-awesome-swiper, as follows:
Slider.vue
<template>
<div class="media-slider">
<slot :sliderSetting="sliderSettings" :name="name">
<swiper :options="sliderSettings[name]"
class="swiper"
v-if="slides"
ref="default-slider">
<slot name="slides" :slides="slides" :code="code">
<swiper-slide v-for="image in slides" :key="image" v-if="endpoint"
:style="{'background-image': `url('${image}')`}">
</swiper-slide>
</slot>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</slot>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import Axios from '../../../../axiosConfig';
// https://github.surmon.me/vue-awesome-swiper/
export default {
components: { Swiper, SwiperSlide },
data: function() {
return {
code: null,
images: [],
defaults: {
'default-slider': {
loop: true,
loopedSlides: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
scrollbar: {
el: '.swiper-scrollbar',
hide: true
}
}
},
sliderSettings: {}
}
},
props: {
endpoint: {
type: String,
default: null
},
settings: {
type: Object,
default: {}
},
theme: {},
name: {},
hash: {},
numberOfImages: {},
imageFormat: {},
vehicleId: {}
},
computed: {
slides() {
if (this.images.length) {
return this.images;
}
return [...Array(parseInt(this.numberOfImages))].map(
(_, i) => {
i++;
return this.imageFormat.replace('#', i);
}
);
}
}
}
</script>
As you can see I have got a slot within this component, however it must use an instance of SwiperSlide for it to work. I need to register this as a component to use it.
However this isn't working as expected:
Vue.component('slider', () => import('./components/Media/Slider/Index'));
Vue.component('slide', () => import('vue-awesome-swiper'));
How can I do this?
Edit
<slider class="app">
<template v-slot:slides="props">
<slide :style="{'background-image': `url('img-src/${props.code}/theme/slide-1.jpg')`}"></slide>
</template>
</slider>
An import like this import() is gonna import the default export of the package, what you have done here is that you have destructured the import with import { .. } from ".." that means it has an named export.
However try it like this
Vue.component('slider', () => import('./components/Media/Slider/Index'));
Vue.component('slide', async () => (await import('vue-awesome-swiper')).SwiperSlide);

Render named scopedSlot programmatically

I want to move the following template into the render function of my component, but I don't understand how.
This is my template:
<template>
<div>
<slot name="item" v-for="item in filteredItems" :item="item">
{{ item.title }}
</slot>
</div>
</template>
This is my component:
export default {
props: {
items: {
type: Array,
required: true,
},
search: {
type: String,
default: ""
}
},
methods: {
filterByTitle(item) {
if (!("title" in item)) { return false; }
return item.title.includes(this.search);
}
},
computed: {
filteredItems() {
if (this.search.length === "") {
return this.items;
}
return this.items.filter(this.filterByTitle);
}
},
render: function(h) {
// How can I transform the template so that it finds its place here?
return h('div', ...);
}
};
I thank you in advance.
To render scoped slots you can use $scopedSlots. See more here.
Example Code:
...
render(h) {
return h(
'div',
this.filteredItems.map(item => {
let slot = this.$scopedSlots[item.title]
return slot ? slot(item) : item.title
})
)
}
...
JSFiddle

problem with - TypeError: XXX is not a function

I am having an issue with calling a parent function:
Error in v-on handler: "TypeError: self.$parent.testAddCompontnet222 is not a function"
So i have setup a test function (method) in the following file called testAddCompontnet222()
parent file: PageAdd.vue
<template>
<b-container>
<b-container>
testVar2: (( {{ testVar2 }} ))
<b-button #click="testAddCompontnet222();">Add Test 2</b-button>
<SingleBlockTemplate v-if="componentTypeSelected == 1"></SingleBlockTemplate>
<TripleBlockTemplate v-if="componentTypeSelected == 2"></TripleBlockTemplate>
</b-container>
</b-container>
</template>
<script>
import axios from 'axios';
import SingleBlockTemplate from './component_templates/SingleBlockTemplate.vue';
import TripleBlockTemplate from './component_templates/TripleBlockTemplate.vue';
import ComponentAddForm from './ComponentAddForm.vue';
export default {
data(){
return {
title: 'Case Studies',
excerpt: 'some text here for reference',
slug: 'unique',
meta_title: 'title for search engines (should be the same as the page title)',
meta_description: 'meta descriptions for search engines',
meta_keywords: 'keywords',
order: '1',
status: '1',
showAddComponentForm: false,
error: false,
errors: {},
testVar2: '2',
newContentData: {},
componentTypeSelected: '2',
componentTypes: {},
componentList: {}
};
},
mounted: function () {
this.getComponentTypes();
//this.componentTypeToCreate =
},
methods: {
testAddCompontnet222(){
this.testVar2 = '222!';
console.log("test 222222!")
},
addPage(){
axios({
method: 'post',
url: this.$appAPI+'/twg-cms/page',
data: {
title: this.title,
excerpt: this.excerpt,
slug: this.slug,
meta_title: this.meta_title,
meta_description: this.meta_description,
meta_keywords: this.meta_keywords,
order: this.order,
status: this.status
}
}).then(response => {
console.log(response.data)
}).catch(e => {
console.log(e)
this.errors.push(e)
});
},
getComponentTypes(){
axios.get(this.$appAPI+`/twg-cms/component_types`)
.then((response) => {
this.componentTypes = response.data.data;
})
.catch(() => {
console.log('handle server error from here');
});
},
componentTypeOnChange(value){
//console.log(this.componentTypeSelected)
}
},
components: {
ComponentAddForm,
SingleBlockTemplate,
TripleBlockTemplate
}
}
</script>
I then attempt to call the function from a child element (imported file): TripleBlockTemplate.vue
I have tried using just this.$parent.testAddCompontnet222(); and as you can see below currently self.$parent.testAddCompontnet222();
But both return the same error. I have this working in exactly the same way on other components
<template>
<form autocomplete="off" #submit.prevent="addComponent" method="post">
<b-button #click="testAddCompontnet();">Add Test</b-button>
<p>This is a triple block component</p>
<ckeditor :editor="editor" v-model="content[0]" :config="editorConfig"></ckeditor>
<ckeditor :editor="editor" v-model="content[1]" :config="editorConfig"></ckeditor>
<ckeditor :editor="editor" v-model="content[2]" :config="editorConfig"></ckeditor>
<b-button #click="addComponent" variant="outline-primary">Save component</b-button>
</form>
</template>
<script>
import axios from 'axios';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
data(){
return {<template>
<form autocomplete="off" #submit.prevent="addComponent" method="post">
<b-button #click="testAddCompontnet();">Add Test</b-button>
<p>This is a triple block component</p>
<ckeditor :editor="editor" v-model="content[0]" :config="editorConfig"></ckeditor>
<ckeditor :editor="editor" v-model="content[1]" :config="editorConfig"></ckeditor>
<ckeditor :editor="editor" v-model="content[2]" :config="editorConfig"></ckeditor>
<b-button #click="addComponent" variant="outline-primary">Save component</b-button>
</form>
</template>
<script>
import axios from 'axios';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
data(){
return {
editor: ClassicEditor,
name: 'Name here',
class: 'Class here',
html_id: 'ID here',
content:[
'<div><h1>Title 1</h1><br /><p>some simple text here</p></div>',
'<div><h1>Title 2</h1><br /><p>some simple text here</p></div>',
'<div><h1>Title 3</h1><br /><p>some simple text here</p></div>'
],
editorConfig: {
// The configuration of the editor.
}
};
},
methods: {
testAddCompontnet(){
var self = this;
self.$parent.testAddCompontnet222();
console.log("test 222!")
},
addComponent(){
axios({
method: 'post',
url: this.$appAPI+'/twg-cms/component',
data: {
name: this.name,
content: JSON.stringify({content: this.content}),
class: this.class,
html_id: this.html_id
}
}).then(response => {
console.log(response.data)
}).catch(e => {
console.log(e)
this.errors.push(e)
});
}
}
}
</script>
editor: ClassicEditor,
name: 'Name here',
class: 'Class here',
html_id: 'ID here',
content:[
'<div><h1>Title 1</h1><br /><p>some simple text here</p></div>',
'<div><h1>Title 2</h1><br /><p>some simple text here</p></div>',
'<div><h1>Title 3</h1><br /><p>some simple text here</p></div>'
],
editorConfig: {
// The configuration of the editor.
}
};
},
methods: {
testAddCompontnet(){
var self = this;
self.$parent.testAddCompontnet222();
console.log("test 222!")
},
addComponent(){
axios({
method: 'post',
url: this.$appAPI+'/twg-cms/component',
data: {
name: this.name,
content: JSON.stringify({content: this.content}),
class: this.class,
html_id: this.html_id
}
}).then(response => {
console.log(response.data)
}).catch(e => {
console.log(e)
this.errors.push(e)
});
}
}
}
</script>
Finally here is a working method which i am currently not using...
The following code, would allow me to use the same/similar code to update/change the parent variable testVar1 to update it's parent: ComponentAddForm.vue below
testAddCompontnet(){
var self = this;
self.$parent.testVar1 = '11111! test;
console.log("test 222!")
},
ComponentAddForm.vue:
<template>
<b-container>
testVar1: (( {{ testVar1 }} ))
<b-button #click="testAddCompontnet222();">Add Test 2</b-button>
<SingleBlockTemplate v-if="this.componentTemplateId == 1"></SingleBlockTemplate>
<TripleBlockTemplate v-if="this.componentTemplateId == 2"></TripleBlockTemplate>
</b-container>
</template>
<script>
import axios from 'axios';
import SingleBlockTemplate from './component_templates/SingleBlockTemplate.vue';
import TripleBlockTemplate from './component_templates/TripleBlockTemplate.vue';
export default {
props: ['componentTemplateId'],
data(){
return {
name: 'Case Studies',
testVar1: '1'
};
},
mounted: function () {
this.showComponentTemplate();
},
methods: {
testAddCompontnet222(){
this.$parent.testVar2 = '222!';
console.log("we made it here <--------");
},
showComponentTemplate(){
if(this.componentTemplateId === '1'){
console.log('test 1')
}
if(this.componentTemplateId === '2'){
console.log('test 2')
}
}
},
components: {
SingleBlockTemplate,
TripleBlockTemplate
}
}
</script>

Testing a Chart.js component with Vue test utils throws a window.matchMedia error

I'm trying to write Mocha/Chai tests for a Vue component which utilizes Chart.js. All tests pass, but I then get this error:
C:\repos\security-center-frontend-2\security-center-frontend\node_modules\mocha\lib\runner.js:726
err.uncaught = true;
^
TypeError: Cannot create property 'uncaught' on string
'window.matchMedia not found! Make sure you're using a polyfill.'
I think that this has to do with the way Vue test utils represent the window object, and that I should somehow stub it, but am not sure of the proper syntax.
My component:
<template>
<card>
<template slot="header">
<h4 v-if="$slots.title || title" class="card-title">
<slot name="title">
{{title}}
</slot>
</h4>
<p class="card-category">
<slot name="subTitle">
{{subTitle}}
</slot>
</p>
</template>
<div>
<div :id="chartId" class="ct-chart"></div>
<div class="footer">
<div class="chart-legend">
<slot name="legend"></slot>
</div>
<hr>
<div class="stats">
<slot name="footer"></slot>
</div>
<div class="pull-right">
</div>
</div>
</div>
</card>
</template>
<script>
import Card from './Card.vue';
export default {
name: 'chart-card',
components: {
Card
},
props: {
footerText: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
},
chartType: {
type: String,
default: 'Line' // Line | Pie | Bar
},
chartOptions: {
type: Object,
default: () => {
return {};
}
},
chartData: {
type: Object,
default: () => {
return {
labels: [],
series: []
};
}
}
},
data () {
return {
chartId: 'no-id'
};
},
methods: {
/***
* Initializes the chart by merging the chart options sent via props and the default chart options
*/
initChart (Chartist) {
const chartIdQuery = `#${this.chartId}`;
Chartist[this.chartType](
chartIdQuery,
this.chartData,
this.chartOptions
);
},
/***
* Assigns a random id to the chart
*/
updateChartId () {
const currentTime = new Date().getTime().toString();
const randomInt = this.getRandomInt(0, currentTime);
this.chartId = `div_${randomInt}`;
},
getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
},
mounted () {
this.updateChartId();
import('chartist').then((Chartist) => {
let ChartistLib = Chartist.default || Chartist;
this.$nextTick(() => {
this.initChart(ChartistLib);
});
});
}
};
</script>
<style>
</style>
My tests:
import { expect } from 'chai';
import { mount } from '#vue/test-utils';
import ChartCard from '#/components/Cards/ChartCard.vue';
describe('ChartCard.vue', () => {
it('Has a title', () => {
const wrapper = mount(ChartCard);
wrapper.setProps({title: 'test title'});
expect(wrapper.contains('.card-title')).to.be.true;
});
it('Displays passed title', () => {
const wrapper = mount(ChartCard);
wrapper.setProps({title: 'test title'});
expect(wrapper.text()).to.include('test title');
});
});