Julio Montoya
6 years ago
parent
a1bcb12f20
commit
053bcad80a
@ -0,0 +1,78 @@ |
||||
<template> |
||||
<v-app id="inspire"> |
||||
<snackbar></snackbar> |
||||
<v-navigation-drawer v-model="drawer" app> |
||||
<v-list dense> |
||||
<v-list-item> |
||||
<v-list-item-action> |
||||
<v-icon>mdi-home</v-icon> |
||||
</v-list-item-action> |
||||
<v-list-item-content> |
||||
<v-list-item-title>Home</v-list-item-title> |
||||
</v-list-item-content> |
||||
</v-list-item> |
||||
<v-list-item> |
||||
<v-list-item-action> |
||||
<v-icon>mdi-book</v-icon> |
||||
</v-list-item-action> |
||||
<v-list-item-content> |
||||
<v-list-item-title> |
||||
<router-link :to="{ name: 'CourseList' }">Courses</router-link> |
||||
</v-list-item-title> |
||||
</v-list-item-content> |
||||
</v-list-item> |
||||
<v-list-item> |
||||
<v-list-item-action> |
||||
<v-icon>mdi-book</v-icon> |
||||
</v-list-item-action> |
||||
<v-list-item-content> |
||||
<v-list-item-title> |
||||
<router-link :to="{ name: 'CourseCategoryList' }">Courses category</router-link> |
||||
</v-list-item-title> |
||||
</v-list-item-content> |
||||
</v-list-item> |
||||
|
||||
<v-list-item> |
||||
<v-list-item-action> |
||||
<v-icon>mdi-comment-quote</v-icon> |
||||
</v-list-item-action> |
||||
<v-list-item-content> |
||||
<v-list-item-title> |
||||
<router-link :to="{ name: 'ReviewList' }">Reviews</router-link> |
||||
</v-list-item-title> |
||||
</v-list-item-content> |
||||
</v-list-item> |
||||
</v-list> |
||||
</v-navigation-drawer> |
||||
<v-app-bar app color="indigo" dark> |
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> |
||||
<v-toolbar-title>Application</v-toolbar-title> |
||||
</v-app-bar> |
||||
|
||||
<v-content> |
||||
<Breadcrumb layout-class="pl-3 py-3" /> |
||||
<router-view></router-view> |
||||
</v-content> |
||||
<v-footer color="indigo" app> |
||||
<span class="white--text">© 2019</span> |
||||
</v-footer> |
||||
</v-app> |
||||
</template> |
||||
|
||||
<script> |
||||
import Breadcrumb from './components/Breadcrumb'; |
||||
import Snackbar from './components/Snackbar'; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: { |
||||
Breadcrumb, |
||||
Snackbar |
||||
}, |
||||
data: () => ({ |
||||
drawer: null |
||||
}), |
||||
beforeMount() { |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,3 @@ |
||||
export const VueConfig = { |
||||
delimiters: ['[[', ']]'] |
||||
}; |
||||
@ -0,0 +1,45 @@ |
||||
<template> |
||||
<div> |
||||
<v-row justify="space-around"> |
||||
<v-icon v-if="handleShow" small class="mr-2" @click="handleShow">mdi-eye</v-icon> |
||||
<v-icon v-if="handleEdit" small class="mr-2" @click="handleEdit">mdi-pencil</v-icon> |
||||
<v-icon v-if="handleDelete" small @click="confirmDelete = true">mdi-delete</v-icon> |
||||
</v-row> |
||||
<ConfirmDelete |
||||
v-if="handleDelete" |
||||
:visible="confirmDelete" |
||||
:handle-delete="handleDelete" |
||||
@close="confirmDelete = false" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ConfirmDelete from './ConfirmDelete'; |
||||
|
||||
export default { |
||||
name: 'ActionCell', |
||||
components: { |
||||
ConfirmDelete |
||||
}, |
||||
data() { |
||||
return { |
||||
confirmDelete: false |
||||
}; |
||||
}, |
||||
props: { |
||||
handleShow: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleEdit: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleDelete: { |
||||
type: Function, |
||||
required: false |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<div> |
||||
<v-breadcrumbs :items="items" divider="/" :class="layoutClass" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'Breadcrumb', |
||||
props: ['layoutClass'], |
||||
data() { |
||||
return {}; |
||||
}, |
||||
computed: { |
||||
items() { |
||||
const { path, matched } = this.$route; |
||||
const items = [ |
||||
{ |
||||
text: 'Home', |
||||
href: '/' |
||||
} |
||||
]; |
||||
const lastItem = matched[matched.length - 1]; |
||||
for (let i = 0, len = matched.length; i < len; i += 1) { |
||||
const route = matched[i]; |
||||
|
||||
if (route.path) { |
||||
items.push({ |
||||
text: route.name, |
||||
disabled: route.path === path || lastItem.path === route.path, |
||||
href: route.path |
||||
}); |
||||
} |
||||
} |
||||
|
||||
return items; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,45 @@ |
||||
<template> |
||||
<v-dialog v-model="show" persistent width="300"> |
||||
<v-card> |
||||
<v-card-text>{{ $t('Are you sure you want to delete this item?') }}</v-card-text> |
||||
<v-card-actions> |
||||
<v-spacer></v-spacer> |
||||
<v-btn color="error darken-1" @click="handleDelete"> |
||||
{{ $t('Delete') }} |
||||
</v-btn> |
||||
<v-btn color="secondary darken-1" text @click.stop="show = false"> |
||||
{{ $t('Cancel') }} |
||||
</v-btn> |
||||
</v-card-actions> |
||||
</v-card> |
||||
</v-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'ConfirmDelete', |
||||
props: { |
||||
visible: { |
||||
type: Boolean, |
||||
required: true, |
||||
default: () => false |
||||
}, |
||||
handleDelete: { |
||||
type: Function, |
||||
required: true |
||||
} |
||||
}, |
||||
computed: { |
||||
show: { |
||||
get() { |
||||
return this.visible; |
||||
}, |
||||
set(value) { |
||||
if (!value) { |
||||
this.$emit('close'); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<v-expansion-panels v-model="filtersExpanded"> |
||||
<v-expansion-panel> |
||||
<v-expansion-panel-header> |
||||
{{ $t('Filters') }} |
||||
|
||||
<template slot="actions"> |
||||
<v-icon large>mdi-filter-variant</v-icon> |
||||
</template> |
||||
</v-expansion-panel-header> |
||||
<v-expansion-panel-content> |
||||
<slot name="filter"></slot> |
||||
|
||||
<v-btn color="primary" @click="handleFilter">{{ $t('Filter')}}</v-btn> |
||||
<v-btn color="primary" class="ml-2" text @click="handleReset">{{ $t('Reset') }}</v-btn> |
||||
</v-expansion-panel-content> |
||||
</v-expansion-panel> |
||||
</v-expansion-panels> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'DataFilter', |
||||
props: { |
||||
handleReset: { |
||||
type: Function, |
||||
required: true |
||||
}, |
||||
handleFilter: { |
||||
type: Function, |
||||
required: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
filtersExpanded: false |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,52 @@ |
||||
<template> |
||||
<v-menu |
||||
v-model="showMenu" |
||||
:close-on-content-click="false" |
||||
:nudge-right="40" |
||||
transition="scale-transition" |
||||
offset-y |
||||
min-width="290px" |
||||
> |
||||
<template v-slot:activator="{ on }"> |
||||
<v-text-field |
||||
v-model="date" |
||||
:label="label" |
||||
prepend-icon="mdi-calendar" |
||||
readonly |
||||
v-on="on" |
||||
></v-text-field> |
||||
</template> |
||||
<v-date-picker v-model="date" @input="handleInput"></v-date-picker> |
||||
</v-menu> |
||||
</template> |
||||
|
||||
<script> |
||||
import { formatDateTime } from '../utils/dates'; |
||||
|
||||
export default { |
||||
props: { |
||||
label: { |
||||
type: String, |
||||
required: false, |
||||
default: () => '' |
||||
}, |
||||
value: String |
||||
}, |
||||
created() { |
||||
this.date = this.value ? this.value : this.date; |
||||
}, |
||||
data() { |
||||
return { |
||||
date: this.value ? this.value : new Date().toISOString().substr(0, 10), |
||||
showMenu: false |
||||
}; |
||||
}, |
||||
methods: { |
||||
formatDateTime, |
||||
handleInput() { |
||||
this.showMenu = false; |
||||
this.$emit('input', this.date); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,18 @@ |
||||
<template> |
||||
<div class="text-center"> |
||||
<v-overlay :value="visible"> |
||||
<v-progress-circular indeterminate size="64"></v-progress-circular> |
||||
</v-overlay> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
visible: { |
||||
type: Boolean, |
||||
required: true |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<v-snackbar |
||||
v-model="show" |
||||
:color="color" |
||||
:multi-line="true" |
||||
:timeout="timeout" |
||||
right |
||||
top |
||||
> |
||||
{{ text }} |
||||
<template v-if="subText"> |
||||
<p>{{ subText }}</p> |
||||
</template> |
||||
<v-btn dark text @click.native="close">{{ $t('Close') }}</v-btn> |
||||
</v-snackbar> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
computed: { |
||||
...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout']) |
||||
}, |
||||
|
||||
methods: { |
||||
close() { |
||||
this.show = false; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,137 @@ |
||||
<template> |
||||
<v-toolbar class="my-md-auto" elevation="0"> |
||||
<slot name="left"></slot> |
||||
<v-spacer /> |
||||
<div> |
||||
<v-btn |
||||
v-if="handleList" |
||||
:loading="isLoading" |
||||
color="primary" |
||||
@click="listItem" |
||||
> |
||||
{{ $t('List') }} |
||||
</v-btn> |
||||
<v-btn |
||||
v-if="handleEdit" |
||||
:loading="isLoading" |
||||
color="primary" |
||||
@click="editItem" |
||||
> |
||||
{{ $t('Edit') }} |
||||
</v-btn> |
||||
<v-btn |
||||
v-if="handleSubmit" |
||||
:loading="isLoading" |
||||
color="primary" |
||||
@click="submitItem" |
||||
> |
||||
<v-icon left>mdi-content-save</v-icon> |
||||
{{ $t('Submit') }} |
||||
</v-btn> |
||||
<v-btn |
||||
v-if="handleReset" |
||||
color="primary" |
||||
class="ml-sm-2" |
||||
@click="resetItem" |
||||
> |
||||
{{ $t('Reset') }} |
||||
</v-btn> |
||||
<v-btn |
||||
v-if="handleDelete" |
||||
color="error" |
||||
class="ml-sm-2" |
||||
@click="confirmDelete = true" |
||||
> |
||||
{{ $t('Delete') }} |
||||
</v-btn> |
||||
|
||||
<v-btn v-if="handleAdd" color="primary" rounded @click="addItem"> |
||||
<v-icon>mdi-plus-circle</v-icon> |
||||
</v-btn> |
||||
</div> |
||||
<ConfirmDelete |
||||
v-if="handleDelete" |
||||
:visible="confirmDelete" |
||||
:handle-delete="handleDelete" |
||||
@close="confirmDelete = false" |
||||
/> |
||||
</v-toolbar> |
||||
</template> |
||||
|
||||
<script> |
||||
import ConfirmDelete from './ConfirmDelete'; |
||||
|
||||
export default { |
||||
name: 'Toolbar', |
||||
components: { |
||||
ConfirmDelete |
||||
}, |
||||
data() { |
||||
return { |
||||
confirmDelete: false |
||||
}; |
||||
}, |
||||
props: { |
||||
handleList: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleEdit: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleSubmit: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleReset: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleDelete: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
handleAdd: { |
||||
type: Function, |
||||
required: false |
||||
}, |
||||
title: { |
||||
type: String, |
||||
required: false |
||||
}, |
||||
isLoading: { |
||||
type: Boolean, |
||||
required: false, |
||||
default: () => false |
||||
} |
||||
}, |
||||
methods: { |
||||
listItem() { |
||||
if (this.handleList) { |
||||
this.handleList(); |
||||
} |
||||
}, |
||||
addItem() { |
||||
if (this.handleAdd) { |
||||
this.handleAdd(); |
||||
} |
||||
}, |
||||
editItem() { |
||||
if (this.handleEdit) { |
||||
this.handleEdit(); |
||||
} |
||||
}, |
||||
submitItem() { |
||||
if (this.handleSubmit) { |
||||
this.handleSubmit(); |
||||
} |
||||
}, |
||||
resetItem() { |
||||
if (this.handleReset) { |
||||
this.handleReset(); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,76 @@ |
||||
<template> |
||||
<v-container fluid> |
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.title" |
||||
:label="$t('title')" |
||||
type="text" |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.code" |
||||
:label="$t('code')" |
||||
type="text" |
||||
/> |
||||
</v-col> |
||||
</v-row> |
||||
|
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-combobox |
||||
v-model="item.category" |
||||
:items="categorySelectItems" |
||||
:no-data-text="$t('No results')" |
||||
:label="$t('category')" |
||||
item-text="name" |
||||
item-value="@id" |
||||
chips |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-row cols="12"></v-row> |
||||
</v-row> |
||||
|
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
name: 'CourseFilter', |
||||
props: { |
||||
values: { |
||||
type: Object, |
||||
required: true |
||||
} |
||||
}, |
||||
data() { |
||||
return {}; |
||||
}, |
||||
mounted() { |
||||
this.categoryGetSelectItems(); |
||||
}, |
||||
methods: { |
||||
...mapActions({ |
||||
categoryGetSelectItems: 'coursecategory/fetchSelectItems' |
||||
}), |
||||
}, |
||||
|
||||
computed: { |
||||
...mapFields('coursecategory', { |
||||
categorySelectItems: 'selectItems' |
||||
}), |
||||
|
||||
// eslint-disable-next-line |
||||
item() { |
||||
return this.initialValues || this.values; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,173 @@ |
||||
<template> |
||||
<v-form> |
||||
<v-container fluid> |
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.title" |
||||
:error-messages="titleErrors" |
||||
:label="$t('title')" |
||||
required |
||||
@input="$v.item.title.$touch()" |
||||
@blur="$v.item.title.$touch()" |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.code" |
||||
:error-messages="codeErrors" |
||||
:label="$t('code')" |
||||
required |
||||
@input="$v.item.code.$touch()" |
||||
@blur="$v.item.code.$touch()" |
||||
/> |
||||
</v-col> |
||||
</v-row> |
||||
|
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-combobox |
||||
v-model="item.category" |
||||
:items="categorySelectItems" |
||||
:error-messages="categoryErrors" |
||||
:no-data-text="$t('No results')" |
||||
:label="$t('category')" |
||||
item-text="name" |
||||
item-value="@id" |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model.number="item.visibility" |
||||
:error-messages="visibilityErrors" |
||||
:label="$t('visibility')" |
||||
required |
||||
@input="$v.item.visibility.$touch()" |
||||
@blur="$v.item.visibility.$touch()" |
||||
/> |
||||
</v-col> |
||||
</v-row> |
||||
|
||||
</v-container> |
||||
</v-form> |
||||
</template> |
||||
|
||||
<script> |
||||
import has from 'lodash/has'; |
||||
import { validationMixin } from 'vuelidate'; |
||||
import { required } from 'vuelidate/lib/validators'; |
||||
import { mapActions } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
name: 'CourseForm', |
||||
mixins: [validationMixin], |
||||
props: { |
||||
values: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
|
||||
errors: { |
||||
type: Object, |
||||
default: () => {} |
||||
}, |
||||
|
||||
initialValues: { |
||||
type: Object, |
||||
default: () => {} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
title: null, |
||||
code: null, |
||||
category: null, |
||||
visibility: null, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapFields('coursecategory', { |
||||
categorySelectItems: 'selectItems' |
||||
}), |
||||
|
||||
// eslint-disable-next-line |
||||
item() { |
||||
return this.initialValues || this.values; |
||||
}, |
||||
|
||||
titleErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.title.$dirty) return errors; |
||||
|
||||
has(this.violations, 'title') && errors.push(this.violations.title); |
||||
|
||||
!this.$v.item.title.required && errors.push(this.$t('Field is required')); |
||||
|
||||
return errors; |
||||
}, |
||||
codeErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.code.$dirty) return errors; |
||||
|
||||
has(this.violations, 'code') && errors.push(this.violations.code); |
||||
|
||||
!this.$v.item.code.required && errors.push(this.$t('Field is required')); |
||||
|
||||
return errors; |
||||
}, |
||||
categoryErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.category.$dirty) return errors; |
||||
|
||||
has(this.violations, 'category') && errors.push(this.violations.category); |
||||
|
||||
|
||||
return errors; |
||||
}, |
||||
visibilityErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.visibility.$dirty) return errors; |
||||
|
||||
has(this.violations, 'visibility') && errors.push(this.violations.visibility); |
||||
|
||||
!this.$v.item.visibility.required && errors.push(this.$t('Field is required')); |
||||
|
||||
return errors; |
||||
}, |
||||
|
||||
violations() { |
||||
return this.errors || {}; |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.categoryGetSelectItems(); |
||||
}, |
||||
methods: { |
||||
...mapActions({ |
||||
categoryGetSelectItems: 'coursecategory/fetchSelectItems' |
||||
}), |
||||
}, |
||||
validations: { |
||||
item: { |
||||
title: { |
||||
required, |
||||
}, |
||||
code: { |
||||
required, |
||||
}, |
||||
category: { |
||||
}, |
||||
visibility: { |
||||
required, |
||||
}, |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,9 @@ |
||||
<template> |
||||
<router-view></router-view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'CourseLayout' |
||||
} |
||||
</script> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<v-container fluid> |
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.name" |
||||
:label="$t('name')" |
||||
type="text" |
||||
/> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'CourseCategoryFilter', |
||||
props: { |
||||
values: { |
||||
type: Object, |
||||
required: true |
||||
} |
||||
}, |
||||
data() { |
||||
return {}; |
||||
}, |
||||
mounted() { |
||||
}, |
||||
|
||||
computed: { |
||||
// eslint-disable-next-line |
||||
item() { |
||||
return this.initialValues || this.values; |
||||
} |
||||
}, |
||||
methods: { |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,113 @@ |
||||
<template> |
||||
<v-form> |
||||
<v-container fluid> |
||||
<v-row> |
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.name" |
||||
:error-messages="nameErrors" |
||||
:label="$t('name')" |
||||
required |
||||
@input="$v.item.name.$touch()" |
||||
@blur="$v.item.name.$touch()" |
||||
/> |
||||
</v-col> |
||||
|
||||
<v-col cols="12" sm="6" md="6"> |
||||
<v-text-field |
||||
v-model="item.code" |
||||
:error-messages="codeErrors" |
||||
:label="$t('code')" |
||||
required |
||||
@input="$v.item.code.$touch()" |
||||
@blur="$v.item.code.$touch()" |
||||
/> |
||||
</v-col> |
||||
|
||||
</v-row> |
||||
|
||||
</v-container> |
||||
</v-form> |
||||
</template> |
||||
|
||||
<script> |
||||
import has from 'lodash/has'; |
||||
import { validationMixin } from 'vuelidate'; |
||||
import { required } from 'vuelidate/lib/validators'; |
||||
import { mapActions } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
name: 'CourseCategoryForm', |
||||
mixins: [validationMixin], |
||||
props: { |
||||
values: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
|
||||
errors: { |
||||
type: Object, |
||||
default: () => {} |
||||
}, |
||||
|
||||
initialValues: { |
||||
type: Object, |
||||
default: () => {} |
||||
} |
||||
}, |
||||
mounted() { |
||||
}, |
||||
data() { |
||||
return { |
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
// eslint-disable-next-line |
||||
item() { |
||||
return this.initialValues || this.values; |
||||
}, |
||||
|
||||
nameErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.name.$dirty) return errors; |
||||
|
||||
has(this.violations, 'name') && errors.push(this.violations.name); |
||||
|
||||
!this.$v.item.name.required && errors.push(this.$t('Field is required')); |
||||
|
||||
return errors; |
||||
}, |
||||
codeErrors() { |
||||
const errors = []; |
||||
|
||||
if (!this.$v.item.code.$dirty) return errors; |
||||
|
||||
has(this.violations, 'code') && errors.push(this.violations.code); |
||||
|
||||
!this.$v.item.code.required && errors.push(this.$t('Field is required')); |
||||
|
||||
return errors; |
||||
}, |
||||
|
||||
|
||||
violations() { |
||||
return this.errors || {}; |
||||
} |
||||
}, |
||||
methods: { |
||||
}, |
||||
validations: { |
||||
item: { |
||||
name: { |
||||
required, |
||||
}, |
||||
code: { |
||||
required, |
||||
}, |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,9 @@ |
||||
<template> |
||||
<router-view></router-view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'CourseCategoryLayout' |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
export default class SubmissionError extends Error { |
||||
constructor (errors) { |
||||
super('Submit Validation Failed'); |
||||
this.errors = errors; |
||||
//Error.captureStackTrace(this, this.constructor);
|
||||
this.name = this.constructor.name; |
||||
|
||||
return this; |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
import Vue from 'vue'; |
||||
import VueI18n from 'vue-i18n'; |
||||
import messages from './locales/en'; |
||||
|
||||
Vue.use(VueI18n); |
||||
|
||||
export default new VueI18n({ |
||||
locale: process.env.VUE_APP_I18N_LOCALE || 'en', |
||||
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', |
||||
messages: { |
||||
en: messages |
||||
} |
||||
}); |
||||
@ -0,0 +1,22 @@ |
||||
export default { |
||||
'Submit': 'Submit', |
||||
'Reset': 'Reset', |
||||
'Delete': 'Delete', |
||||
'Edit': 'Edit', |
||||
'Are you sure you want to delete this item?': 'Are you sure you want to delete this item?', |
||||
'No results': 'No results', |
||||
'Close': 'Close', |
||||
'Cancel': 'Cancel', |
||||
'Updated': 'Updated', |
||||
'Field': 'Field', |
||||
'Value': 'Value', |
||||
'Filters': 'Filters', |
||||
'Filter': 'Filter', |
||||
'Data unavailable': 'Data unavailable', |
||||
'Loading...': 'Loading...', |
||||
'Deleted': 'Deleted', |
||||
'Please, insert a value bigger than zero!': 'Please, insert a value bigger than zero!', |
||||
'Please type something': 'Please type something', |
||||
'Field is required': 'Field is required', |
||||
'Records per page:': 'Records per page:', |
||||
}; |
||||
@ -0,0 +1,67 @@ |
||||
import Vue from "vue"; |
||||
import App from "./App"; |
||||
import router from "./router"; |
||||
import store from "./store"; |
||||
import courseCategoryService from './services/coursecategory'; |
||||
import courseService from './services/course'; |
||||
import makeCrudModule from './store/modules/crud'; |
||||
|
||||
// import '@mdi/font/css/materialdesignicons.css'
|
||||
|
||||
/*router.beforeEach((to, from, next) => { |
||||
// hack to allow for forward slashes in path ids
|
||||
if (to.fullPath.includes('%2F')) { |
||||
next(to.fullPath.replace('%2F', '/')); |
||||
} |
||||
next(); |
||||
});*/ |
||||
|
||||
import vuetify from './plugins/vuetify' // path to vuetify export
|
||||
|
||||
import ApolloClient from 'apollo-boost' |
||||
const apolloClient = new ApolloClient({ |
||||
// You should use an absolute URL here
|
||||
uri: '/api/graphql/' |
||||
}) |
||||
|
||||
import VueApollo from 'vue-apollo'; |
||||
Vue.use(VueApollo); |
||||
|
||||
import Vuelidate from 'vuelidate'; |
||||
import i18n from './i18n'; |
||||
Vue.config.productionTip = false; |
||||
Vue.use(Vuelidate); |
||||
|
||||
const apolloProvider = new VueApollo({ |
||||
defaultClient: apolloClient, |
||||
}); |
||||
|
||||
//import './quasar'
|
||||
|
||||
store.registerModule( |
||||
'course', |
||||
makeCrudModule({ |
||||
service: courseService |
||||
}) |
||||
); |
||||
|
||||
store.registerModule( |
||||
'coursecategory', |
||||
makeCrudModule({ |
||||
service: courseCategoryService |
||||
}) |
||||
); |
||||
|
||||
Vue.config.productionTip = false; |
||||
|
||||
new Vue({ |
||||
vuetify, |
||||
i18n, |
||||
components: {App}, |
||||
apolloProvider, |
||||
data: {}, |
||||
store, |
||||
router, |
||||
render: h => h(App) |
||||
}). |
||||
$mount("#app"); |
||||
@ -0,0 +1,41 @@ |
||||
import NotificationMixin from './NotificationMixin'; |
||||
import { formatDateTime } from '../utils/dates'; |
||||
|
||||
export default { |
||||
mixins: [NotificationMixin], |
||||
methods: { |
||||
formatDateTime, |
||||
onCreated(item) { |
||||
this.showMessage(`${item['@id']} created`); |
||||
|
||||
this.$router.push({ |
||||
name: `${this.$options.servicePrefix}Update`, |
||||
params: { id: item['@id'] } |
||||
}); |
||||
}, |
||||
onSendForm() { |
||||
const createForm = this.$refs.createForm; |
||||
createForm.$v.$touch(); |
||||
if (!createForm.$v.$invalid) { |
||||
this.create(createForm.$v.item.$model); |
||||
} |
||||
}, |
||||
resetForm() { |
||||
this.$refs.createForm.$v.$reset(); |
||||
this.item = {}; |
||||
} |
||||
}, |
||||
watch: { |
||||
created(created) { |
||||
if (!created) { |
||||
return; |
||||
} |
||||
|
||||
this.onCreated(created); |
||||
}, |
||||
|
||||
error(message) { |
||||
message && this.showError(message); |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,88 @@ |
||||
import isEmpty from 'lodash/isEmpty'; |
||||
import { formatDateTime } from '../utils/dates'; |
||||
import NotificationMixin from './NotificationMixin'; |
||||
|
||||
export default { |
||||
mixins: [NotificationMixin], |
||||
|
||||
data() { |
||||
return { |
||||
options: { |
||||
sortBy: [], |
||||
descending: false, |
||||
page: 1, |
||||
itemsPerPage: 15 |
||||
}, |
||||
filters: {} |
||||
}; |
||||
}, |
||||
|
||||
watch: { |
||||
deletedItem(item) { |
||||
this.showMessage(`${item['@id']} deleted.`); |
||||
}, |
||||
|
||||
error(message) { |
||||
message && this.showError(message); |
||||
}, |
||||
|
||||
items() { |
||||
this.options.totalItems = this.totalItems; |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
onUpdateOptions(props) { |
||||
const { page, itemsPerPage, sortBy, descending, totalItems } = props; |
||||
let params = { |
||||
...this.filters |
||||
}; |
||||
if (itemsPerPage > 0) { |
||||
params = { ...params, itemsPerPage, page }; |
||||
} |
||||
|
||||
if (!isEmpty(sortBy)) { |
||||
params[`order[${sortBy}]`] = descending ? 'desc' : 'asc'; |
||||
} |
||||
|
||||
this.getPage(params).then(() => { |
||||
this.options.sortBy = sortBy; |
||||
this.options.descending = descending; |
||||
this.options.itemsPerPage = itemsPerPage; |
||||
this.options.totalItems = totalItems; |
||||
}); |
||||
}, |
||||
|
||||
onSendFilter() { |
||||
this.resetList = true; |
||||
this.onUpdateOptions(this.options); |
||||
}, |
||||
|
||||
resetFilter() { |
||||
this.filters = {}; |
||||
}, |
||||
|
||||
addHandler() { |
||||
this.$router.push({ name: `${this.$options.servicePrefix}Create` }); |
||||
}, |
||||
|
||||
showHandler(item) { |
||||
this.$router.push({ |
||||
name: `${this.$options.servicePrefix}Show`, |
||||
params: { id: item['@id'] } |
||||
}); |
||||
}, |
||||
|
||||
editHandler(item) { |
||||
this.$router.push({ |
||||
name: `${this.$options.servicePrefix}Update`, |
||||
params: { id: item['@id'] } |
||||
}); |
||||
}, |
||||
|
||||
deleteHandler(item) { |
||||
this.deleteItem(item).then(() => this.onUpdateOptions(this.options)); |
||||
}, |
||||
formatDateTime |
||||
} |
||||
}; |
||||
@ -0,0 +1,37 @@ |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
computed: { |
||||
...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout']) |
||||
}, |
||||
|
||||
methods: { |
||||
cleanState() { |
||||
setTimeout(() => { |
||||
this.show = false; |
||||
}, this.timeout); |
||||
}, |
||||
|
||||
showError(error) { |
||||
this.showMessage(error, 'danger'); |
||||
}, |
||||
|
||||
showMessage(message, color = 'success') { |
||||
this.show = true; |
||||
this.color = color; |
||||
|
||||
if (typeof message === 'string') { |
||||
this.text = message; |
||||
this.cleanState(); |
||||
|
||||
return; |
||||
} |
||||
|
||||
this.text = message.message; |
||||
|
||||
if (message.response) this.subText = message.response.data.message; |
||||
|
||||
this.cleanState(); |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,47 @@ |
||||
import NotificationMixin from './NotificationMixin'; |
||||
import { formatDateTime } from '../utils/dates'; |
||||
|
||||
export default { |
||||
mixins: [NotificationMixin], |
||||
created() { |
||||
this.retrieve(decodeURIComponent(this.$route.params.id)); |
||||
}, |
||||
computed: { |
||||
item() { |
||||
return this.find(decodeURIComponent(this.$route.params.id)); |
||||
} |
||||
}, |
||||
methods: { |
||||
list() { |
||||
this.$router |
||||
.push({ name: `${this.$options.servicePrefix}List` }) |
||||
.catch(() => {}); |
||||
}, |
||||
del() { |
||||
this.deleteItem(this.item).then(() => { |
||||
this.showMessage(`${this.item['@id']} deleted.`); |
||||
this.$router |
||||
.push({ name: `${this.$options.servicePrefix}List` }) |
||||
.catch(() => {}); |
||||
}); |
||||
}, |
||||
formatDateTime, |
||||
editHandler() { |
||||
this.$router.push({ |
||||
name: `${this.$options.servicePrefix}Update`, |
||||
params: { id: this.item['@id'] } |
||||
}); |
||||
} |
||||
}, |
||||
watch: { |
||||
error(message) { |
||||
message && this.showError(message); |
||||
}, |
||||
deleteError(message) { |
||||
message && this.showError(message); |
||||
} |
||||
}, |
||||
beforeDestroy() { |
||||
this.reset(); |
||||
} |
||||
}; |
||||
@ -0,0 +1,79 @@ |
||||
import NotificationMixin from './NotificationMixin'; |
||||
import { formatDateTime } from '../utils/dates'; |
||||
|
||||
export default { |
||||
mixins: [NotificationMixin], |
||||
data() { |
||||
return { |
||||
item: {} |
||||
}; |
||||
}, |
||||
created() { |
||||
this.retrieve(decodeURIComponent(this.$route.params.id)); |
||||
}, |
||||
beforeDestroy() { |
||||
this.reset(); |
||||
}, |
||||
computed: { |
||||
retrieved() { |
||||
return this.find(decodeURIComponent(this.$route.params.id)); |
||||
} |
||||
}, |
||||
methods: { |
||||
del() { |
||||
this.deleteItem(this.retrieved).then(() => { |
||||
this.showMessage(`${this.item['@id']} deleted.`); |
||||
this.$router |
||||
.push({ name: `${this.$options.servicePrefix}List` }) |
||||
.catch(() => {}); |
||||
}); |
||||
}, |
||||
formatDateTime, |
||||
reset() { |
||||
this.$refs.updateForm.$v.$reset(); |
||||
this.updateReset(); |
||||
this.delReset(); |
||||
this.createReset(); |
||||
}, |
||||
|
||||
onSendForm() { |
||||
const updateForm = this.$refs.updateForm; |
||||
updateForm.$v.$touch(); |
||||
|
||||
if (!updateForm.$v.$invalid) { |
||||
this.update(updateForm.$v.item.$model); |
||||
} |
||||
}, |
||||
|
||||
resetForm() { |
||||
this.$refs.updateForm.$v.$reset(); |
||||
this.item = { ...this.retrieved }; |
||||
} |
||||
}, |
||||
watch: { |
||||
deleted(deleted) { |
||||
if (!deleted) { |
||||
return; |
||||
} |
||||
this.$router |
||||
.push({ name: `${this.$options.servicePrefix}List` }) |
||||
.catch(() => {}); |
||||
}, |
||||
|
||||
error(message) { |
||||
message && this.showError(message); |
||||
}, |
||||
|
||||
deleteError(message) { |
||||
message && this.showError(message); |
||||
}, |
||||
|
||||
updated(val) { |
||||
this.showMessage(`${val['@id']} updated.`); |
||||
}, |
||||
|
||||
retrieved(val) { |
||||
this.item = { ...val }; |
||||
} |
||||
} |
||||
}; |
||||
@ -0,0 +1,15 @@ |
||||
// src/plugins/vuetify.js
|
||||
|
||||
import Vue from 'vue' |
||||
import Vuetify from 'vuetify' |
||||
import 'vuetify/dist/vuetify.min.css' |
||||
|
||||
Vue.use(Vuetify) |
||||
|
||||
const opts = { |
||||
icons: { |
||||
iconfont: 'mdi' |
||||
} |
||||
}; |
||||
|
||||
export default new Vuetify(opts) |
||||
@ -0,0 +1,5 @@ |
||||
import Vue from 'vue' |
||||
|
||||
// import './styles/quasar.sass'
|
||||
import '@quasar/extras/material-icons/material-icons.css' |
||||
import Quasar from 'quasar/dist/quasar.umd.js' |
||||
@ -0,0 +1,28 @@ |
||||
export default { |
||||
path: '/courses', |
||||
name: 'courses', |
||||
component: () => import('../components/course/Layout'), |
||||
redirect: { name: 'CourseList' }, |
||||
children: [ |
||||
{ |
||||
name: 'CourseList', |
||||
path: '', |
||||
component: () => import('../views/course/List') |
||||
}, |
||||
{ |
||||
name: 'CourseCreate', |
||||
path: 'new', |
||||
component: () => import('../views/course/Create') |
||||
}, |
||||
{ |
||||
name: 'CourseUpdate', |
||||
path: ':id/edit', |
||||
component: () => import('../views/course/Update') |
||||
}, |
||||
{ |
||||
name: 'CourseShow', |
||||
path: ':id', |
||||
component: () => import('../views/course/Show') |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,28 @@ |
||||
export default { |
||||
path: '/course_categories', |
||||
name: 'course_categories', |
||||
component: () => import('../components/coursecategory/Layout'), |
||||
redirect: { name: 'CourseCategoryList' }, |
||||
children: [ |
||||
{ |
||||
name: 'CourseCategoryList', |
||||
path: '', |
||||
component: () => import('../views/coursecategory/List') |
||||
}, |
||||
{ |
||||
name: 'CourseCategoryCreate', |
||||
path: 'new', |
||||
component: () => import('../views/coursecategory/Create') |
||||
}, |
||||
{ |
||||
name: 'CourseCategoryUpdate', |
||||
path: ':id/edit', |
||||
component: () => import('../views/coursecategory/Update') |
||||
}, |
||||
{ |
||||
name: 'CourseCategoryShow', |
||||
path: ':id', |
||||
component: () => import('../views/coursecategory/Show') |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,18 @@ |
||||
import Vue from "vue"; |
||||
import VueRouter from "vue-router"; |
||||
|
||||
Vue.use(VueRouter); |
||||
|
||||
import courseRoutes from './course'; |
||||
import coursecategoryRoutes from './coursecategory'; |
||||
import sessionRoutes from './../../quasar/router/session'; |
||||
|
||||
export default new VueRouter({ |
||||
mode: "history", |
||||
routes: [ |
||||
courseRoutes, |
||||
...sessionRoutes, |
||||
coursecategoryRoutes, |
||||
// { path: "*", redirect: "/home" }
|
||||
] |
||||
}); |
||||
@ -0,0 +1,24 @@ |
||||
import fetch from '../utils/fetch'; |
||||
|
||||
export default function makeService(endpoint) { |
||||
return { |
||||
find(id) { |
||||
return fetch(`${id}`); |
||||
}, |
||||
findAll(params) { |
||||
return fetch(endpoint, params); |
||||
}, |
||||
create(payload) { |
||||
return fetch(endpoint, { method: 'POST', body: JSON.stringify(payload) }); |
||||
}, |
||||
del(item) { |
||||
return fetch(item['@id'], { method: 'DELETE' }); |
||||
}, |
||||
update(payload) { |
||||
return fetch(payload['@id'], { |
||||
method: 'PUT', |
||||
body: JSON.stringify(payload) |
||||
}); |
||||
} |
||||
}; |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import makeService from './api'; |
||||
|
||||
export default makeService('courses'); |
||||
@ -0,0 +1,3 @@ |
||||
import makeService from './api'; |
||||
|
||||
export default makeService('course_categories'); |
||||
@ -0,0 +1,14 @@ |
||||
import Vue from "vue"; |
||||
import Vuex from "vuex"; |
||||
|
||||
import notifications from './modules/notifications'; |
||||
//import session from './../../quasar/store/modules/session/';
|
||||
|
||||
Vue.use(Vuex); |
||||
|
||||
export default new Vuex.Store({ |
||||
modules: { |
||||
notifications, |
||||
//session,
|
||||
} |
||||
}); |
||||
@ -0,0 +1,273 @@ |
||||
import Vue from 'vue'; |
||||
import { getField, updateField } from 'vuex-map-fields'; |
||||
import remove from 'lodash/remove'; |
||||
import SubmissionError from '../../error/SubmissionError'; |
||||
|
||||
const initialState = () => ({ |
||||
allIds: [], |
||||
byId: {}, |
||||
created: null, |
||||
deleted: null, |
||||
error: "", |
||||
isLoading: false, |
||||
resetList: false, |
||||
selectItems: null, |
||||
totalItems: 0, |
||||
updated: null, |
||||
view: null, |
||||
violations: null |
||||
}); |
||||
|
||||
const handleError = (commit, e) => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
if (e instanceof SubmissionError) { |
||||
commit(ACTIONS.SET_VIOLATIONS, e.errors); |
||||
// eslint-disable-next-line
|
||||
commit(ACTIONS.SET_ERROR, e.errors._error); |
||||
|
||||
return Promise.reject(e); |
||||
} |
||||
|
||||
// eslint-disable-next-line
|
||||
commit(ACTIONS.SET_ERROR, e.message); |
||||
|
||||
return Promise.reject(e); |
||||
}; |
||||
|
||||
export const ACTIONS = { |
||||
ADD: 'ADD', |
||||
RESET_CREATE: 'RESET_CREATE', |
||||
RESET_DELETE: 'RESET_DELETE', |
||||
RESET_LIST: 'RESET_LIST', |
||||
RESET_SHOW: 'RESET_SHOW', |
||||
RESET_UPDATE: 'RESET_UPDATE', |
||||
SET_CREATED: 'SET_CREATED', |
||||
SET_DELETED: 'SET_DELETED', |
||||
SET_ERROR: 'SET_ERROR', |
||||
SET_SELECT_ITEMS: 'SET_SELECT_ITEMS', |
||||
SET_TOTAL_ITEMS: 'SET_TOTAL_ITEMS', |
||||
SET_UPDATED: 'SET_UPDATED', |
||||
SET_VIEW: 'SET_VIEW', |
||||
SET_VIOLATIONS: 'SET_VIOLATIONS', |
||||
TOGGLE_LOADING: 'TOGGLE_LOADING' |
||||
}; |
||||
|
||||
export default function makeCrudModule({ |
||||
normalizeRelations = x => x, |
||||
resolveRelations = x => x, |
||||
service |
||||
} = {}) { |
||||
return { |
||||
actions: { |
||||
create: ({ commit }, values) => { |
||||
commit(ACTIONS.SET_ERROR, ''); |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
service |
||||
.create(values) |
||||
.then(response => response.json()) |
||||
.then(data => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
commit(ACTIONS.ADD, data); |
||||
commit(ACTIONS.SET_CREATED, data); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
}, |
||||
del: ({ commit }, item) => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
service |
||||
.del(item) |
||||
.then(() => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
commit(ACTIONS.SET_DELETED, item); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
}, |
||||
fetchAll: ({ commit, state }, params) => { |
||||
if (!service) throw new Error('No service specified!'); |
||||
|
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
service |
||||
.findAll({ params }) |
||||
.then(response => response.json()) |
||||
.then(retrieved => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
commit( |
||||
ACTIONS.SET_TOTAL_ITEMS, |
||||
retrieved['hydra:totalItems'] |
||||
); |
||||
commit(ACTIONS.SET_VIEW, retrieved['hydra:view']); |
||||
|
||||
if (true === state.resetList) { |
||||
commit(ACTIONS.RESET_LIST); |
||||
} |
||||
|
||||
retrieved['hydra:member'].forEach(item => { |
||||
commit(ACTIONS.ADD, normalizeRelations(item)); |
||||
}); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
}, |
||||
fetchSelectItems: ( |
||||
{ commit }, |
||||
{ params = { properties: ['@id', 'name'] } } = {} |
||||
) => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
if (!service) throw new Error('No service specified!'); |
||||
|
||||
service |
||||
.findAll({ params }) |
||||
.then(response => response.json()) |
||||
.then(retrieved => { |
||||
commit( |
||||
ACTIONS.SET_SELECT_ITEMS, |
||||
retrieved['hydra:member'] |
||||
); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
}, |
||||
load: ({ commit }, id) => { |
||||
if (!service) throw new Error('No service specified!'); |
||||
|
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
service |
||||
.find(id) |
||||
.then(response => response.json()) |
||||
.then(item => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
commit(ACTIONS.ADD, normalizeRelations(item)); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
}, |
||||
resetCreate: ({ commit }) => { |
||||
commit(ACTIONS.RESET_CREATE); |
||||
}, |
||||
resetDelete: ({ commit }) => { |
||||
commit(ACTIONS.RESET_DELETE); |
||||
}, |
||||
resetShow: ({ commit }) => { |
||||
commit(ACTIONS.RESET_SHOW); |
||||
}, |
||||
resetUpdate: ({ commit }) => { |
||||
commit(ACTIONS.RESET_UPDATE); |
||||
}, |
||||
update: ({ commit }, item) => { |
||||
commit(ACTIONS.SET_ERROR, ''); |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
|
||||
service |
||||
.update(item) |
||||
.then(response => response.json()) |
||||
.then(data => { |
||||
commit(ACTIONS.TOGGLE_LOADING); |
||||
commit(ACTIONS.SET_UPDATED, data); |
||||
}) |
||||
.catch(e => handleError(commit, e)); |
||||
} |
||||
}, |
||||
getters: { |
||||
find: state => id => { |
||||
return resolveRelations(state.byId[id]); |
||||
}, |
||||
getField, |
||||
list: (state, getters) => { |
||||
return state.allIds.map(id => getters.find(id)); |
||||
} |
||||
}, |
||||
mutations: { |
||||
updateField, |
||||
[ACTIONS.ADD]: (state, item) => { |
||||
Vue.set(state.byId, item['@id'], item); |
||||
Vue.set(state, 'isLoading', false); |
||||
if (state.allIds.includes(item['@id'])) return; |
||||
state.allIds.push(item['@id']); |
||||
}, |
||||
[ACTIONS.RESET_CREATE]: state => { |
||||
Object.assign(state, { |
||||
isLoading: false, |
||||
error: '', |
||||
created: null, |
||||
violations: null |
||||
}); |
||||
}, |
||||
[ACTIONS.RESET_DELETE]: state => { |
||||
Object.assign(state, { |
||||
isLoading: false, |
||||
error: '', |
||||
deleted: null |
||||
}); |
||||
}, |
||||
[ACTIONS.RESET_LIST]: state => { |
||||
Object.assign(state, { |
||||
allIds: [], |
||||
byId: {}, |
||||
error: '', |
||||
isLoading: false, |
||||
resetList: false |
||||
}); |
||||
}, |
||||
[ACTIONS.RESET_SHOW]: state => { |
||||
Object.assign(state, { |
||||
error: '', |
||||
isLoading: false |
||||
}); |
||||
}, |
||||
[ACTIONS.RESET_UPDATE]: state => { |
||||
Object.assign(state, { |
||||
error: '', |
||||
isLoading: false, |
||||
updated: null, |
||||
violations: null |
||||
}); |
||||
}, |
||||
[ACTIONS.SET_CREATED]: (state, created) => { |
||||
Object.assign(state, { created }); |
||||
}, |
||||
[ACTIONS.SET_DELETED]: (state, deleted) => { |
||||
if (!state.allIds.includes(deleted['@id'])) return; |
||||
Object.assign(state, { |
||||
allIds: remove(state.allIds, item => item['@id'] === deleted['@id']), |
||||
byId: remove(state.byId, id => id === deleted['@id']), |
||||
deleted |
||||
}); |
||||
}, |
||||
[ACTIONS.SET_ERROR]: (state, error) => { |
||||
Object.assign(state, { error, isLoading: false }); |
||||
}, |
||||
[ACTIONS.SET_SELECT_ITEMS]: (state, selectItems) => { |
||||
Object.assign(state, { |
||||
error: '', |
||||
isLoading: false, |
||||
selectItems |
||||
}); |
||||
}, |
||||
[ACTIONS.SET_TOTAL_ITEMS]: (state, totalItems) => { |
||||
Object.assign(state, { totalItems }); |
||||
}, |
||||
[ACTIONS.SET_UPDATED]: (state, updated) => { |
||||
Object.assign(state, { |
||||
byId: { |
||||
[updated['@id']]: updated |
||||
}, |
||||
updated |
||||
}); |
||||
}, |
||||
[ACTIONS.SET_VIEW]: (state, view) => { |
||||
Object.assign(state, { view }); |
||||
}, |
||||
[ACTIONS.SET_VIOLATIONS]: (state, violations) => { |
||||
Object.assign(state, { violations }); |
||||
}, |
||||
[ACTIONS.TOGGLE_LOADING]: state => { |
||||
Object.assign(state, { error: '', isLoading: !state.isLoading }); |
||||
} |
||||
}, |
||||
namespaced: true, |
||||
state: initialState |
||||
}; |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import {getField, updateField} from 'vuex-map-fields'; |
||||
|
||||
export default { |
||||
namespaced: true, |
||||
state: { |
||||
show: false, |
||||
color: 'error', |
||||
text: 'An error occurred', |
||||
subText: '', |
||||
timeout: 6000 |
||||
}, |
||||
getters: { |
||||
getField |
||||
}, |
||||
mutations: { |
||||
updateField |
||||
} |
||||
}; |
||||
@ -0,0 +1,9 @@ |
||||
import moment from 'moment'; |
||||
|
||||
const formatDateTime = function(date) { |
||||
if (!date) return null; |
||||
|
||||
return moment(date).format('DD/MM/YYYY'); |
||||
}; |
||||
|
||||
export { formatDateTime }; |
||||
@ -0,0 +1,71 @@ |
||||
import isObject from 'lodash/isObject'; |
||||
import { ENTRYPOINT } from '../config/entrypoint'; |
||||
import SubmissionError from '../error/SubmissionError'; |
||||
import { normalize } from './hydra'; |
||||
|
||||
const MIME_TYPE = 'application/ld+json'; |
||||
|
||||
const makeParamArray = (key, arr) => |
||||
arr.map(val => `${key}[]=${val}`).join('&'); |
||||
|
||||
export default function(id, options = {}) { |
||||
if ('undefined' === typeof options.headers) options.headers = new Headers(); |
||||
|
||||
if (null === options.headers.get('Accept')) |
||||
options.headers.set('Accept', MIME_TYPE); |
||||
|
||||
if ( |
||||
'undefined' !== options.body && |
||||
!(options.body instanceof FormData) && |
||||
null === options.headers.get('Content-Type') |
||||
) |
||||
options.headers.set('Content-Type', MIME_TYPE); |
||||
|
||||
if (options.params) { |
||||
const params = normalize(options.params); |
||||
let queryString = Object.keys(params) |
||||
.map(key => |
||||
Array.isArray(params[key]) |
||||
? makeParamArray(key, params[key]) |
||||
: `${key}=${params[key]}` |
||||
) |
||||
.join('&'); |
||||
id = `${id}?${queryString}`; |
||||
} |
||||
|
||||
const entryPoint = ENTRYPOINT + (ENTRYPOINT.endsWith('/') ? '' : '/'); |
||||
|
||||
const payload = options.body && JSON.parse(options.body); |
||||
if (isObject(payload) && payload['@id']) |
||||
options.body = JSON.stringify(normalize(payload)); |
||||
|
||||
//console.log(id); console.log(new URL(id, entryPoint));
|
||||
|
||||
return global.fetch(new URL(id, entryPoint), options).then(response => { |
||||
if (response.ok) return response; |
||||
|
||||
return response.json().then( |
||||
json => { |
||||
const error = |
||||
json['hydra:description'] || |
||||
json['hydra:title'] || |
||||
'An error occurred.'; |
||||
|
||||
if (!json.violations) throw Error(error); |
||||
|
||||
let errors = { _error: error }; |
||||
json.violations.forEach(violation => |
||||
errors[violation.propertyPath] |
||||
? (errors[violation.propertyPath] += |
||||
'\n' + errors[violation.propertyPath]) |
||||
: (errors[violation.propertyPath] = violation.message) |
||||
); |
||||
|
||||
throw new SubmissionError(errors); |
||||
}, |
||||
() => { |
||||
throw new Error(response.statusText || 'An error occurred.'); |
||||
} |
||||
); |
||||
}); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import get from 'lodash/get'; |
||||
import has from 'lodash/has'; |
||||
import mapValues from 'lodash/mapValues'; |
||||
|
||||
export function normalize(data) { |
||||
if (has(data, 'hydra:member')) { |
||||
// Normalize items in collections
|
||||
data['hydra:member'] = data['hydra:member'].map(item => normalize(item)); |
||||
|
||||
return data; |
||||
} |
||||
|
||||
// Flatten nested documents
|
||||
return mapValues(data, value => |
||||
Array.isArray(value) |
||||
? value.map(v => get(v, '@id', v)) |
||||
: get(value, '@id', value) |
||||
); |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import moment from 'moment'; |
||||
|
||||
const date = function(value) { |
||||
return moment(value).isValid(); |
||||
}; |
||||
|
||||
export { date }; |
||||
@ -0,0 +1,46 @@ |
||||
<template> |
||||
<div> |
||||
<CourseForm ref="createForm" :values="item" :errors="violations" /> |
||||
<Loading :visible="isLoading" /> |
||||
|
||||
<Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions } from 'vuex'; |
||||
import { createHelpers } from 'vuex-map-fields'; |
||||
import CourseForm from '../../components/course/Form'; |
||||
import Loading from '../../components/Loading'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
import CreateMixin from '../../mixins/CreateMixin'; |
||||
|
||||
const servicePrefix = 'Course'; |
||||
|
||||
const { mapFields } = createHelpers({ |
||||
getterType: 'course/getField', |
||||
mutationType: 'course/updateField' |
||||
}); |
||||
|
||||
export default { |
||||
name: 'CourseCreate', |
||||
servicePrefix, |
||||
mixins: [CreateMixin], |
||||
components: { |
||||
Loading, |
||||
Toolbar, |
||||
CourseForm |
||||
}, |
||||
data() { |
||||
return { |
||||
item: {} |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapFields(['error', 'isLoading', 'created', 'violations']) |
||||
}, |
||||
methods: { |
||||
...mapActions('course', ['create', 'reset']) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,122 @@ |
||||
<template> |
||||
<div class="course-list"> |
||||
<Toolbar :handle-add="addHandler" /> |
||||
|
||||
<v-container grid-list-xl fluid> |
||||
<v-layout row wrap> |
||||
<!-- <v-flex sm12>--> |
||||
<!-- <h1>Course List</h1>--> |
||||
<!-- </v-flex>--> |
||||
<v-flex lg12> |
||||
<DataFilter :handle-filter="onSendFilter" :handle-reset="resetFilter"> |
||||
<CourseFilterForm |
||||
ref="filterForm" |
||||
:values="filters" |
||||
slot="filter" |
||||
/> |
||||
</DataFilter> |
||||
|
||||
<br /> |
||||
|
||||
<v-data-table |
||||
v-model="selected" |
||||
:headers="headers" |
||||
:items="items" |
||||
:items-per-page.sync="options.itemsPerPage" |
||||
:loading="isLoading" |
||||
:loading-text="$t('Loading...')" |
||||
:options.sync="options" |
||||
:server-items-length="totalItems" |
||||
class="elevation-1" |
||||
item-key="@id" |
||||
show-select |
||||
@update:options="onUpdateOptions" |
||||
> |
||||
<template slot="item.category" slot-scope="{ item }"> |
||||
<div v-if="item['category']"> |
||||
{{ item['category'].name }} |
||||
</div> |
||||
<div v-else> |
||||
- |
||||
</div> |
||||
</template> |
||||
|
||||
<template slot="item.visibility" slot-scope="{ item }"> |
||||
{{ $n(item['visibility']) }} |
||||
</template> |
||||
|
||||
<template slot="item.expirationDate" slot-scope="{ item }"> |
||||
{{ formatDateTime(item['expirationDate'], 'long') }} |
||||
</template> |
||||
|
||||
<ActionCell |
||||
slot="item.action" |
||||
slot-scope="props" |
||||
:handle-show="() => showHandler(props.item)" |
||||
:handle-edit="() => editHandler(props.item)" |
||||
:handle-delete="() => deleteHandler(props.item)" |
||||
></ActionCell> |
||||
</v-data-table> |
||||
</v-flex> |
||||
</v-layout> |
||||
</v-container> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import ListMixin from '../../mixins/ListMixin'; |
||||
import ActionCell from '../../components/ActionCell'; |
||||
import CourseFilterForm from '../../components/course/Filter'; |
||||
import DataFilter from '../../components/DataFilter'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
|
||||
export default { |
||||
name: 'CourseList', |
||||
servicePrefix: 'Course', |
||||
mixins: [ListMixin], |
||||
components: { |
||||
Toolbar, |
||||
ActionCell, |
||||
CourseFilterForm, |
||||
DataFilter |
||||
}, |
||||
data() { |
||||
return { |
||||
headers: [ |
||||
{ text: 'title', value: 'title' }, |
||||
{ text: 'code', value: 'code' }, |
||||
{ text: 'courseLanguage', value: 'Language' }, |
||||
{ text: 'category', value: 'category' }, |
||||
{ text: 'visibility', value: 'visibility' }, |
||||
{ |
||||
text: 'Actions', |
||||
value: 'action', |
||||
sortable: false |
||||
} |
||||
], |
||||
selected: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters('course', { |
||||
items: 'list' |
||||
}), |
||||
...mapFields('course', { |
||||
deletedItem: 'deleted', |
||||
error: 'error', |
||||
isLoading: 'isLoading', |
||||
resetList: 'resetList', |
||||
totalItems: 'totalItems', |
||||
view: 'view' |
||||
}) |
||||
}, |
||||
methods: { |
||||
...mapActions('course', { |
||||
getPage: 'fetchAll', |
||||
deleteItem: 'del' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<div> |
||||
<Toolbar |
||||
:handle-delete="del" |
||||
:handle-list="list" |
||||
> |
||||
<template slot="left"> |
||||
<v-toolbar-title v-if="item">{{ |
||||
`${$options.servicePrefix} ${item['@id']}` |
||||
}}</v-toolbar-title> |
||||
</template> |
||||
</Toolbar> |
||||
<br /> |
||||
<div v-if="item" class="table-course-show"> |
||||
<v-simple-table> |
||||
<template slot="default"> |
||||
<thead> |
||||
<tr> |
||||
<th>Field</th> |
||||
<th>Value</th> |
||||
<th>Field</th> |
||||
<th>Value</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td><strong>{{ $t('title') }}</strong></td> |
||||
<td> |
||||
{{ item['title'] }} |
||||
</td> |
||||
|
||||
<td><strong>{{ $t('code') }}</strong></td> |
||||
<td> |
||||
{{ item['code'] }} |
||||
</td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td><strong>{{ $t('courseLanguage') }}</strong></td> |
||||
<td> |
||||
{{ item['courseLanguage'] }} |
||||
</td> |
||||
|
||||
<td><strong>{{ $t('category') }}</strong></td> |
||||
<td> |
||||
<div v-if="item['category']"> |
||||
{{ item['category'].name }} |
||||
</div> |
||||
<div v-else> |
||||
- |
||||
</div> |
||||
|
||||
</td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td><strong>{{ $t('visibility') }}</strong></td> |
||||
<td> |
||||
{{ $n(item['visibility']) }} </td> |
||||
|
||||
<td><strong>{{ $t('departmentName') }}</strong></td> |
||||
<td> |
||||
{{ item['departmentName'] }} |
||||
</td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td><strong>{{ $t('departmentUrl') }}</strong></td> |
||||
<td> |
||||
{{ item['departmentUrl'] }} |
||||
</td> |
||||
|
||||
<td><strong>{{ $t('expirationDate') }}</strong></td> |
||||
<td> |
||||
{{ formatDateTime(item['expirationDate'], 'long') }} </td> |
||||
</tr> |
||||
|
||||
</tbody> |
||||
</template> |
||||
</v-simple-table> |
||||
</div> |
||||
|
||||
<Loading :visible="isLoading" /> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import Loading from '../../components/Loading'; |
||||
import ShowMixin from '../../mixins/ShowMixin'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
|
||||
const servicePrefix = 'Course'; |
||||
|
||||
export default { |
||||
name: 'CourseShow', |
||||
servicePrefix, |
||||
components: { |
||||
Loading, |
||||
Toolbar |
||||
}, |
||||
mixins: [ShowMixin], |
||||
computed: { |
||||
...mapFields('course', { |
||||
isLoading: 'isLoading' |
||||
}), |
||||
...mapGetters('course', ['find']) |
||||
}, |
||||
methods: { |
||||
...mapActions('course', { |
||||
deleteItem: 'del', |
||||
reset: 'resetShow', |
||||
retrieve: 'load' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,67 @@ |
||||
<template> |
||||
<div> |
||||
<v-card |
||||
class="mx-auto" |
||||
> |
||||
<CourseForm |
||||
ref="updateForm" |
||||
v-if="item" |
||||
:values="item" |
||||
:errors="violations" |
||||
/> |
||||
<Loading :visible="isLoading || deleteLoading" /> |
||||
<v-footer> |
||||
<Toolbar |
||||
:handle-submit="onSendForm" |
||||
:handle-reset="resetForm" |
||||
:handle-delete="del" |
||||
/> |
||||
</v-footer> |
||||
</v-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import CourseForm from '../../components/course/Form.vue'; |
||||
import Loading from '../../components/Loading'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
import UpdateMixin from '../../mixins/UpdateMixin'; |
||||
|
||||
const servicePrefix = 'Course'; |
||||
|
||||
export default { |
||||
name: 'CourseUpdate', |
||||
servicePrefix, |
||||
mixins: [UpdateMixin], |
||||
components: { |
||||
Loading, |
||||
Toolbar, |
||||
CourseForm |
||||
}, |
||||
|
||||
computed: { |
||||
...mapFields('course', { |
||||
deleteLoading: 'isLoading', |
||||
isLoading: 'isLoading', |
||||
error: 'error', |
||||
updated: 'updated', |
||||
violations: 'violations' |
||||
}), |
||||
...mapGetters('course', ['find']) |
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
...mapActions('course', { |
||||
createReset: 'resetCreate', |
||||
deleteItem: 'del', |
||||
delReset: 'resetDelete', |
||||
retrieve: 'load', |
||||
update: 'update', |
||||
updateReset: 'resetUpdate' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,45 @@ |
||||
<template> |
||||
<div> |
||||
<Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar> |
||||
<CourseCategoryForm ref="createForm" :values="item" :errors="violations" /> |
||||
<Loading :visible="isLoading" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions } from 'vuex'; |
||||
import { createHelpers } from 'vuex-map-fields'; |
||||
import CourseCategoryForm from '../../components/coursecategory/Form'; |
||||
import Loading from '../../components/Loading'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
import CreateMixin from '../../mixins/CreateMixin'; |
||||
|
||||
const servicePrefix = 'CourseCategory'; |
||||
|
||||
const { mapFields } = createHelpers({ |
||||
getterType: 'coursecategory/getField', |
||||
mutationType: 'coursecategory/updateField' |
||||
}); |
||||
|
||||
export default { |
||||
name: 'CourseCategoryCreate', |
||||
servicePrefix, |
||||
mixins: [CreateMixin], |
||||
components: { |
||||
Loading, |
||||
Toolbar, |
||||
CourseCategoryForm |
||||
}, |
||||
data() { |
||||
return { |
||||
item: {} |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapFields(['error', 'isLoading', 'created', 'violations']) |
||||
}, |
||||
methods: { |
||||
...mapActions('coursecategory', ['create', 'reset']) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,104 @@ |
||||
<template> |
||||
<div class="coursecategory-list"> |
||||
<Toolbar :handle-add="addHandler" /> |
||||
|
||||
<v-container grid-list-xl fluid> |
||||
<v-layout row wrap> |
||||
<v-flex sm12> |
||||
<h1>CourseCategory List</h1> |
||||
</v-flex> |
||||
<v-flex lg12> |
||||
<DataFilter :handle-filter="onSendFilter" :handle-reset="resetFilter"> |
||||
<CourseCategoryFilterForm |
||||
ref="filterForm" |
||||
:values="filters" |
||||
slot="filter" |
||||
/> |
||||
</DataFilter> |
||||
|
||||
<br /> |
||||
|
||||
<v-data-table |
||||
v-model="selected" |
||||
:headers="headers" |
||||
:items="items" |
||||
:items-per-page.sync="options.itemsPerPage" |
||||
:loading="isLoading" |
||||
:loading-text="$t('Loading...')" |
||||
:options.sync="options" |
||||
:server-items-length="totalItems" |
||||
class="elevation-1" |
||||
item-key="@id" |
||||
show-select |
||||
@update:options="onUpdateOptions" |
||||
> |
||||
|
||||
<ActionCell |
||||
slot="item.action" |
||||
slot-scope="props" |
||||
:handle-show="() => showHandler(props.item)" |
||||
:handle-edit="() => editHandler(props.item)" |
||||
:handle-delete="() => deleteHandler(props.item)" |
||||
></ActionCell> |
||||
</v-data-table> |
||||
</v-flex> |
||||
</v-layout> |
||||
</v-container> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import ListMixin from '../../mixins/ListMixin'; |
||||
import ActionCell from '../../components/ActionCell'; |
||||
import CourseCategoryFilterForm from '../../components/coursecategory/Filter'; |
||||
import DataFilter from '../../components/DataFilter'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
|
||||
export default { |
||||
name: 'CourseCategoryList', |
||||
servicePrefix: 'CourseCategory', |
||||
mixins: [ListMixin], |
||||
components: { |
||||
Toolbar, |
||||
ActionCell, |
||||
CourseCategoryFilterForm, |
||||
DataFilter |
||||
}, |
||||
data() { |
||||
return { |
||||
headers: [ |
||||
{ text: 'name', value: 'name' }, |
||||
{ text: 'code', value: 'code' }, |
||||
//{ text: 'description', value: 'description' }, |
||||
{ |
||||
text: 'Actions', |
||||
value: 'action', |
||||
sortable: false |
||||
} |
||||
], |
||||
selected: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters('coursecategory', { |
||||
items: 'list' |
||||
}), |
||||
...mapFields('coursecategory', { |
||||
deletedItem: 'deleted', |
||||
error: 'error', |
||||
isLoading: 'isLoading', |
||||
resetList: 'resetList', |
||||
totalItems: 'totalItems', |
||||
view: 'view' |
||||
}) |
||||
}, |
||||
methods: { |
||||
...mapActions('coursecategory', { |
||||
getPage: 'fetchAll', |
||||
deleteItem: 'del' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,87 @@ |
||||
<template> |
||||
<div> |
||||
<Toolbar :handle-edit="editHandler" :handle-delete="del"> |
||||
<template slot="left"> |
||||
<v-toolbar-title v-if="item">{{ |
||||
`${$options.servicePrefix} ${item['@id']}` |
||||
}}</v-toolbar-title> |
||||
</template> |
||||
</Toolbar> |
||||
|
||||
<br /> |
||||
|
||||
<div v-if="item" class="table-coursecategory-show"> |
||||
<v-simple-table> |
||||
<template slot="default"> |
||||
<thead> |
||||
<tr> |
||||
<th>Field</th> |
||||
<th>Value</th> |
||||
|
||||
<th>Field</th> |
||||
<th>Value</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td><strong>{{ $t('name') }}</strong></td> |
||||
<td> |
||||
{{ item['name'] }} |
||||
</td> |
||||
|
||||
<td><strong>{{ $t('code') }}</strong></td> |
||||
<td> |
||||
{{ item['code'] }} |
||||
</td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td><strong>{{ $t('description') }}</strong></td> |
||||
<td> |
||||
{{ item['description'] }} |
||||
</td> |
||||
|
||||
<td></td> |
||||
</tr> |
||||
|
||||
</tbody> |
||||
</template> |
||||
</v-simple-table> |
||||
</div> |
||||
|
||||
<Loading :visible="isLoading" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import Loading from '../../components/Loading'; |
||||
import ShowMixin from '../../mixins/ShowMixin'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
|
||||
const servicePrefix = 'CourseCategory'; |
||||
|
||||
export default { |
||||
name: 'CourseCategoryShow', |
||||
servicePrefix, |
||||
components: { |
||||
Loading, |
||||
Toolbar |
||||
}, |
||||
mixins: [ShowMixin], |
||||
computed: { |
||||
...mapFields('coursecategory', { |
||||
isLoading: 'isLoading' |
||||
}), |
||||
...mapGetters('coursecategory', ['find']) |
||||
}, |
||||
methods: { |
||||
...mapActions('coursecategory', { |
||||
deleteItem: 'del', |
||||
reset: 'resetShow', |
||||
retrieve: 'load' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,61 @@ |
||||
<template> |
||||
<div> |
||||
<Toolbar |
||||
:handle-submit="onSendForm" |
||||
:handle-reset="resetForm" |
||||
:handle-delete="del" |
||||
/> |
||||
<CourseCategoryForm |
||||
ref="updateForm" |
||||
v-if="item" |
||||
:values="item" |
||||
:errors="violations" |
||||
/> |
||||
<Loading :visible="isLoading || deleteLoading" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions, mapGetters } from 'vuex'; |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import CourseCategoryForm from '../../components/coursecategory/Form.vue'; |
||||
import Loading from '../../components/Loading'; |
||||
import Toolbar from '../../components/Toolbar'; |
||||
import UpdateMixin from '../../mixins/UpdateMixin'; |
||||
|
||||
const servicePrefix = 'CourseCategory'; |
||||
|
||||
export default { |
||||
name: 'CourseCategoryUpdate', |
||||
servicePrefix, |
||||
mixins: [UpdateMixin], |
||||
components: { |
||||
Loading, |
||||
Toolbar, |
||||
CourseCategoryForm |
||||
}, |
||||
|
||||
computed: { |
||||
...mapFields('coursecategory', { |
||||
deleteLoading: 'isLoading', |
||||
isLoading: 'isLoading', |
||||
error: 'error', |
||||
updated: 'updated', |
||||
violations: 'violations' |
||||
}), |
||||
...mapGetters('coursecategory', ['find']) |
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
...mapActions('coursecategory', { |
||||
createReset: 'resetCreate', |
||||
deleteItem: 'del', |
||||
delReset: 'resetDelete', |
||||
retrieve: 'load', |
||||
update: 'update', |
||||
updateReset: 'resetUpdate' |
||||
}) |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,11 @@ |
||||
module.exports = { |
||||
pluginOptions: { |
||||
quasar: { |
||||
importStrategy: 'manual', |
||||
rtlSupport: false |
||||
} |
||||
}, |
||||
transpileDependencies: [ |
||||
'quasar' |
||||
] |
||||
} |
||||
Loading…
Reference in new issue