Skip to content

Commit

Permalink
Entity generation and User Management using Vue-Class-Component
Browse files Browse the repository at this point in the history
  • Loading branch information
sahbi-ktifa committed Dec 12, 2018
1 parent b729b53 commit 411e209
Show file tree
Hide file tree
Showing 29 changed files with 949 additions and 751 deletions.
4 changes: 4 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,7 @@ trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

[*.ejs]
indent_style = space
indent_size = 2
5 changes: 2 additions & 3 deletions generators/client/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ const vueFiles = {
'components/ribbon/ribbon.vue',
'components/ribbon/ribbon.component.ts',
'shared/date/filters.ts',
'shared/sort/sorts.ts',
'shared/data/DataUtilsService.vue',
'shared/jhi-item-count.vue'
]
Expand Down Expand Up @@ -196,7 +197,7 @@ const vueFiles = {
'components/admin/user-management/user-management-view.component.ts',
'components/admin/user-management/user-management-edit.vue',
'components/admin/user-management/user-management-edit.component.ts',
'components/admin/user-management/UserManagementService.ts'
'components/admin/user-management/user-management.service.ts'
]
},
{
Expand Down Expand Up @@ -282,8 +283,6 @@ function writeFiles() {
mkdirp(MAIN_SRC_DIR);
// write React files
this.writeFilesToDisk(vueFiles, this, false, `${CLIENT_VUE_TEMPLATES_DIR}`);
const entityFolderName = this.getEntityFolderName(this.clientRootFolder, 'user');
this.copy('vue/src/main/webapp/app/entities/UserService.vue', `src/main/webapp/app/entities/${entityFolderName}/user.service.vue`);

utils.addLanguagesToApplication(this);
utils.addLanguagesToWebPackConfiguration(this);
Expand Down
2 changes: 1 addition & 1 deletion generators/client/templates/vue/package.json.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"sockjs-client": "1.1.4",
"webstomp-client": "1.2.0",
<%_ } _%>
"vue": "^2.5.2",
"vue": "2.5.17",
"vue-class-component": "^6.3.2",
"vue-cookie": "^1.1.4",
"vue-i18n": "^8.0.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { email, maxLength, minLength, required } from 'vuelidate/lib/validators';
import LanguageService from '../../../locale/LanguageService.vue';

import UserManagementService from './UserManagementService';
import Component, { mixins } from 'vue-class-component';
import { mixins } from 'vue-class-component';
import { Component, Inject } from 'vue-property-decorator';
import LanguageService from '@/locale/LanguageService.vue';
import UserManagementService from './user-management.service';

function loginValidator(value) {
if (typeof value === 'undefined' || value === null || value === '') {
Expand Down Expand Up @@ -46,7 +46,8 @@ const beforeRouteEnter = (to, from, next) => {
validations,
beforeRouteEnter
})
export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends mixins(UserManagementService, LanguageService) {
export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends mixins(LanguageService) {
@Inject('userService') private userManagementService: () => UserManagementService;
public userAccount: any;
public isSaving: boolean;
private authorities: any[];
Expand All @@ -67,9 +68,9 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends mixins(
}

public init(userId: number): void {
this.get(userId).then(res => {
this.userManagementService().get(userId).then(res => {
this.userAccount = res.data;
this.retrieveAuthorities().then(res => {
this.userManagementService().retrieveAuthorities().then(res => {
this.authorities = res.data;
});
});
Expand All @@ -82,12 +83,12 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends mixins(
public save(): void {
this.isSaving = true;
if (this.userAccount.id) {
this.update(this.userAccount).then(() => this.returnToList());
this.userManagementService().update(this.userAccount).then(() => this.returnToList());
} else {

<% if (!enableTranslation) { %>
this.userAccount.langKey = 'en';<% } %>
this.create(this.userAccount).then(() => this.returnToList());
this.userManagementService().create(this.userAccount).then(() => this.returnToList());
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Component, { mixins } from 'vue-class-component';

import UserManagementService from './UserManagementService';
import Vue from 'vue';
import { Component, Inject } from 'vue-property-decorator';
import UserManagementService from './user-management.service';

const beforeRouteEnter = (to, from, next) => {
next(vm => {
Expand All @@ -13,8 +13,8 @@ const beforeRouteEnter = (to, from, next) => {
@Component({
beforeRouteEnter
})
export default class <%=jhiPrefixCapitalized%>UserManagementView extends mixins(UserManagementService) {

export default class <%=jhiPrefixCapitalized%>UserManagementView extends Vue {
@Inject('userService') private userManagementService: () => UserManagementService;
public user: any;

constructor() {
Expand All @@ -23,7 +23,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementView extends mixins(
}

public init(userId: number): void {
this.get(userId).then(res => {
this.userManagementService().get(userId).then(res => {
this.user = res.data;
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Component, { mixins } from 'vue-class-component';

import UserManagementService from './UserManagementService';
import { mixins } from 'vue-class-component';
import { Component, Inject } from 'vue-property-decorator';
import UserManagementService from './user-management.service';
import Principal from '../../account/Principal.vue';

@Component
export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends mixins(UserManagementService, Principal) {

export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends mixins(Principal) {
@Inject('userService') private userManagementService: () => UserManagementService;
public error: string;
public success: string;
public users: any[];
Expand Down Expand Up @@ -39,7 +39,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends mi

public setActive(user, isActivated): void {
user.activated = isActivated;
this.update(user)
this.userManagementService().update(user)
.then(() => {
this.error = null;
this.success = 'OK';
Expand All @@ -53,7 +53,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends mi
}

public loadAll(): void {
this.query(<% if (databaseType !== 'cassandra') { %>{
this.userManagementService().retrieve(<% if (databaseType !== 'cassandra') { %>{
page: this.page - 1,
size: this.itemsPerPage,
sort: this.sort()}<% } %>).then(res => {
Expand Down Expand Up @@ -92,7 +92,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends mi
<%_ } _%>

public deleteUser(): void {
this.remove(this.removeId).then(() => {
this.userManagementService().remove(this.removeId).then(() => {
this.removeId = null;
this.loadAll();
});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from 'axios';

import Vue from 'vue';
import Component from 'vue-class-component';
import buildPaginationQueryOpts from '@/shared/sort/sorts';

@Component
export default class UserManagementService extends Vue {
Expand All @@ -22,15 +22,8 @@ export default class UserManagementService extends Vue {
return axios.delete(`api/users/${userId}`);
}

public query(req): Promise<any> {
let sorts = '';
for (let idx in req.sort) {
if (sorts.length > 0) {
sorts += '&';
}
sorts += 'sort=' + req.sort[idx];
}
return axios.get(`api/users?${sorts}&page=${req.page}&size=${req.size}`);
public retrieve(req?: any): Promise<any> {
return axios.get(`api/users?${buildPaginationQueryOpts(req)}`);
}

public retrieveAuthorities(): Promise<any> {
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import JhiItemCountComponent from './shared/jhi-item-count.vue';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import UserManagementService from '@/components/admin/user-management/user-management.service';

Vue.config.productionTip = false;
// jhipster-needle-add-entity-service-to-main-import - JHipster will import entities services here

setupAxiosInterceptors(() => console.log('Unauthorized!'));
Vue.config.productionTip = false;

<%_ if (enableTranslation) { _%>
const i18n = config.initI18N(Vue);
Expand All @@ -34,6 +35,10 @@ new Vue({
components: { App },
template: '<App/>',
router,
provide: {
userService: () => new UserManagementService()
// jhipster-needle-add-entity-service-to-main - JHipster will import entities services here
},
<%_ if (enableTranslation) { _%> i18n,<%_ } _%>
store
});
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,6 @@
* Method to clear the input
*/
clearInputImage(entity, elementRef, field, fieldContentType, idInput) {
console.log(elementRef);
console.log(entity);
if (entity && field && fieldContentType) {
if (entity.hasOwnProperty(field)) {
entity[field] = null;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function buildPaginationQueryOpts(paginationQuery) {
if (paginationQuery) {
let sorts = '';
for (let idx in paginationQuery.sort) {
if (sorts.length > 0) {
sorts += '&';
}
sorts += 'sort=' + paginationQuery.sort[idx];
}
return `${sorts}&page=${paginationQuery.page}&size=${paginationQuery.size}`;
}
return '';
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import * as config from '@/shared/config';
import UserManagementEdit from '@/components/admin/user-management/user-management-edit.vue';
import UserManagementEditClass from '@/components/admin/user-management/user-management-edit.component';
import UserManagementService from '@/components/admin/user-management/user-management.service';

const localVue = createLocalVue();
const mockedAxios: any = axios;
Expand All @@ -25,7 +26,7 @@ describe('UserManagementEdit Component', () => {
let userManagementEdit: UserManagementEditClass;

beforeEach(() => {
wrapper = shallowMount<UserManagementEditClass>(UserManagementEdit, { store, i18n, localVue });
wrapper = shallowMount<UserManagementEditClass>(UserManagementEdit, { store, i18n, localVue, provide: { userService: () => new UserManagementService() } });
userManagementEdit = wrapper.vm;
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import * as config from '@/shared/config';
import UserManagementView from '@/components/admin/user-management/user-management-view.vue';
import UserManagementViewClass from '@/components/admin/user-management/user-management-view.component';
import UserManagementService from '@/components/admin/user-management/user-management.service';

const localVue = createLocalVue();
const mockedAxios: any = axios;
Expand All @@ -26,7 +27,7 @@ describe('UserManagementView Component', () => {
let userManagementView: UserManagementViewClass;

beforeEach(() => {
wrapper = shallowMount<UserManagementViewClass>(UserManagementView, { store, i18n, localVue });
wrapper = shallowMount<UserManagementViewClass>(UserManagementView, { store, i18n, localVue, provide: { userService: () => new UserManagementService() } });
userManagementView = wrapper.vm;
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import * as config from '@/shared/config';
import UserManagement from '@/components/admin/user-management/user-management.vue';
import UserManagementClass from '@/components/admin/user-management/user-management.component';
import UserManagementService from '@/components/admin/user-management/user-management.service';

const localVue = createLocalVue();
const mockedAxios: any = axios;
Expand Down Expand Up @@ -46,6 +47,9 @@ describe('UserManagement Component', () => {
bPagination: true,
jhiItemCount: true,
bModal: true
},
provide: {
userService: () => new UserManagementService()
}
});
userManagement = wrapper.vm;
Expand Down
13 changes: 11 additions & 2 deletions generators/entity-client/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,13 @@ const vueFiles = {
renameTo: generator => `entities/${generator.entityFolderName}/${generator.entityFileName}.component.ts`
},
{
file: 'entities/entity.service.vue',
renameTo: generator => `entities/${generator.entityFolderName}/${generator.entityFileName}.service.vue`
file: 'entities/entity.service.ts',
renameTo: generator => `entities/${generator.entityFolderName}/${generator.entityFileName}.service.ts`
},
{
file: 'entities/entity.model.ts',
// using entityModelFileName so that there is no conflict when generating microservice entities
renameTo: generator => `shared/model/${generator.entityModelFileName}.model.ts`
}
]
}
Expand Down Expand Up @@ -128,6 +133,10 @@ function writeFiles() {
utils.addEntityToRouterImport(this, className, this.entityFileName, this.entityFolderName);
utils.addEntityToRouter(this, entityName, this.entityFileName, className);

// Add entity services to main
utils.addEntityServiceToMainImport(this, className, this.entityFileName, this.entityFolderName);
utils.addEntityServiceToMain(this, entityName, className);

if (!this.enableTranslation) {
clientUtils.replaceTranslation(this, [
`app/entities/${this.entityFolderName}/${this.entityFileName}.vue`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
import <%= entityAngularName %>Service from './<%= entityFileName %>.service.vue';
import { Component,<% if (!fieldsContainBlob) { %> Vue,<% } %> Inject } from 'vue-property-decorator';
<% if (fieldsContainBlob) { %>
import JhiDataUtils from '../../<% if (clientRootFolder) { %>../<% } %>shared/data/DataUtilsService.vue';
import { mixins } from 'vue-class-component';
import JhiDataUtils from '@/shared/data/DataUtilsService.vue';
<% } %>
import { I<%= entityAngularName %> } from '@/shared/model/<%= entityModelFileName %>.model';
import <%= entityAngularName %>Service from './<%= entityFileName %>.service';

const <%= entityAngularName %>Details = {
mixins: [<%= entityAngularName %>Service<% if (fieldsContainBlob) { %>, JhiDataUtils<% } %>],
data() {
return {
<%= entityInstance %>: {}
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
if (to.params.<%= entityInstance %>Id) {
vm.retrieve<%= entityAngularName %>(to.params.<%= entityInstance %>Id);
}
})
},
methods: {
retrieve<%= entityAngularName %>(<%= entityInstance %>Id) {
this.find<%= entityAngularName %>(<%= entityInstance %>Id).then((res) => {
this.<%= entityInstance %> = res.data;
});
},
previousState() {
this.$router.go(-1);
}
const beforeRouteEnter = (to, from, next) => {
next(vm => {
if (to.params.<%= entityInstance %>Id) {
vm.retrieve<%= entityAngularName %>(to.params.<%= entityInstance %>Id);
}
});
};

export default <%= entityAngularName %>Details;
@Component({
beforeRouteEnter
})
export default class <%= entityAngularName %>Details extends <% if (fieldsContainBlob) { %>mixins(JhiDataUtils)<% } else { %>Vue<% } %> {
@Inject('<%= entityInstance %>Service') private <%= entityInstance %>Service : () => <%= entityAngularName %>Service;
public <%= entityInstance %>: I<%= entityAngularName %>;

constructor() {
super();
this.<%= entityInstance %> = {};
}

public retrieve<%= entityAngularName %>(<%= entityInstance %>Id) {
this.<%= entityInstance %>Service().find(<%= entityInstance %>Id).then((res) => {
this.<%= entityInstance %> = res;
});
}

public previousState() {
this.$router.go(-1);
}
}
Loading

0 comments on commit 411e209

Please sign in to comment.