UserApi.js
import axios from "axios"
export default {
getAllExtraCompanies: function (cb, errorCB) {
let url = '/api/backend/extra_companies'
this._sendRequestToDelivery(url, {}, 'get', cb, errorCB)
},
createExtraCompany: function (params, cb, errorCB) {
let url = '/api/backend/extra_companies'
this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
},
updateExtraCompany: function (id, params, cb, errorCB) {
let url = '/api/backend/extra_companies/' + id
this._sendRequestToDelivery(url, params, 'patch', cb, errorCB)
},
deleteExtraCompanies: function (params, cb, errorCB) {
let url = '/api/backend/extra_companies/delete_extra_companies'
this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
},
_sendRequestToDelivery: function (url, data, method, cb, errorCB) {
axios({
url: url,
method: method,
responseType: 'json',
data: data
})
.then((response) => {
cb(response.data);
}, (error) => {
errorCB(error)
});
},
}
users.js store
import UserApi from '../../api/user'
import * as types from '../mutation_types'
const state = {
all: [],
userDetail: {
sales_office: {},
branch_office: {}
},
userLoggedInDetail: {},
createdPropertyOwner: {},
officeOptions: [],
approveUsersData: {
users: [],
officeName: ''
},
accessLogsData: {
}
}
const getters = {
allUsers: state => state.all,
userDetail: state => state.userDetail,
officeOptions: state => state.officeOptions,
userLoggedInDetail: state => state.userLoggedInDetail,
approveUsersData: state => state.approveUsersData,
accessLogsData: state => state.accessLogsData
}
const actions = {
getAllUsers ({ commit }) {
UserApi.getListUsers(users =>{
commit(types.SET_LIST_USERS, {users})
})
},
getUserDetail ({ commit }, id) {
UserApi.getUserDetail(id, user =>{
commit(types.SET_USER_DETAIL, {user})
})
},
getUserLoggedInDetail ({ commit }, id) {
UserApi.getUserDetail(id, response =>{
commit(types.SET_USER_LOGGED_IN_DETAIL, { user: response.user})
})
},
getUserPassword ({ commit }, id) {
UserApi.getUserPassword(id, password => {
commit(types.SET_USER_DETAIL_PASSWORD, password)
})
},
getOfficeOptions ({ commit }, type) {
UserApi.getOfficeOPtions(type, offices => {
commit(types.SET_OFFICE_OPTIONS, offices)
})
},
}
const mutations = {
[types.SET_LIST_USERS] (state, { users }) {
state.all = users
},
[types.SET_OFFICE_OPTIONS] (state, offices) {
state.officeOptions = offices
},
[types.REMOVE_OFFICE_OPTIONS] (state) {
state.officeOptions = []
},
[types.SET_USER_DETAIL] (state, { user }) {
state.userDetail = user
},
[types.SET_USER_LOGGED_IN_DETAIL] (state, { user }) {
state.userLoggedInDetail = user
},
[types.DELETE_USER] (state, { userId }) {
state.all = state.all.filter(user => user.id != parseInt(userId))
},
[types.SET_USER_DETAIL_PASSWORD] (state, password ) {
state.userDetail = { ...state.userDetail, password: password }
},
[types.CREATED_PROPERTY_OWNER_DATA] (state, user ) {
state.createdPropertyOwner = user
}
}
export default {
state,
getters,
actions,
mutations
}
property_component.vue
<template>
<div class="col-xs-12 new-property no-padding">
<div class="modal" id="UpdatePropertyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form @submit.prevent='submitPropertyForm' id="UpdatePropertyFormData">
<div class="form-group">
<label for="">物件オーナー</label>
<v-select placeholder="選択して下さい" v-model="selectedManager" label='name' :options="listUsers">
<span slot="no-options">検索結果が見つかりませんでした。</span>
</v-select>
<input :value="selectedManager && selectedManager.id" type="hidden" name="property[manager_user_id]">
</div>
<div class="form-group">
<label for="">物件名</label>
<input :value="property.name" v-validate="'required'" type="text" name="property[name]" class="form-control" :class="{'input': true, 'is-danger': errors.has('property[name]') }">
<span v-show="errors.has('property[name]')" class="help is-danger">物件名は必須入力項目です</span>
</div>
<div class="form-group">
<label for="">郵便番号</label>
<input v-model="property.postal_code" type="text" name="property[postal_code]" v-validate="'required'" class="form-control" :class="{'input': true, 'is-danger': errors.has('property[postal_code]') }" >
<span v-show="errors.has('property[postal_code]')" class="help is-danger">郵便番号は必須入力項目です</span>
</div>
<div class="form-group">
<label for="">住所</label>
<input v-model="property.address" v-validate="'required'" type="text" name="property[address]" class="form-control">
<span v-show="errors.has('property[address]')" class="help is-danger">住所号は必須入力項目です</span>
</div>
<div class="form-group">
<label for="">電話番号</label>
<input :value="property.phone" type="text" name="property[phone]" class="form-control">
</div>
<div class="form-group">
<label for="">Box Id</label>
<input name="box[id]" type="hidden" class="form-control" v-if="property.box" :value="property.box.id">
<input readonly name="box[box_id]" type="text" class="form-control" v-if="property.box" :value="property.box.box_id">
</div>
<div class="form-group">
<label for="">Box 設置日</label>
<input readonly name="box[installed_at]" type="text" class="form-control" v-if="property.box" :value="property.box.installed_at">
</div>
<div class="form-group">
<label for="">空室日</label>
<Datepicker :value='property.room_empty_at' name="property[room_empty_at]" :placeholder="'年/月/日'" :format="'yyyy/MM/dd'" :input-class="'form-control date-time-input room-empty-at'"></Datepicker>
</div>
<div class="form-group">
<label for="">満室日</label>
<Datepicker :value='property.no_vacancy_at' name="property[no_vacancy_at]" :placeholder="'年/月/日'" :format="'yyyy/MM/dd'" :input-class="'form-control date-time-input no-vacancy-at'"></Datepicker>
</div>
<div class="new-property-of-owner center">
<button type="submit" class="btn btn-sm btn-primary">確定</button>
<span class="btn btn-sm btn-warning" @click='closeModalForm'>キャンセル</span>
<span class="btn btn-sm btn-danger" @click='deleteProperty(property.id)'> 削除</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as mutationTypes from '../../../store/mutation_types'
import PropertyApi from '../../../api/property'
import Datepicker from 'vuejs-datepicker'
import moment from 'moment'
import property from '../../../api/property'
import ApiUser from '../../../api/user'
export default {
name: 'newPropertyOfOwnerComponent',
props: ['property'],
components: {
Datepicker
},
data: function () {
return {
room_empty_at: this.formatDate(this.property.room_empty_at),
no_vacancy_at: this.formatDate(this.property.no_vacancy_at),
listUsers: [],
selectedManager: null
}
},
watch: {
property: function (newData, oldData) {
this.selectedManager = this.listUsers.filter(user => newData.manager_user_id == user.id)[0]
}
},
methods: {
formatDate: function (date) {
return moment(date).format('YYYY/MM/DD')
},
submitPropertyForm: function () {
this.$validator.validateAll().then((result) => {
if (!result) {
return;
}
PropertyApi.updateProperty(this.property.id, $('#UpdatePropertyFormData').serialize(), response => {
this._updateListProperties(response.property)
}, error =>{
swal('更新時にエラーが発生しました。もう一度お試しください')
})
})
},
closeModalForm: function() {
$('#UpdatePropertyModal').modal('hide')
},
_updateListProperties: function (property) {
this.$store.commit(mutationTypes.UPDATE_PROPERTY_DATA, property)
swal('選択した物件情報を更新しました')
.then(() => {
this.closeModalForm()
})
},
deleteProperty: function (id) {
swal({
title: "物件を削除しますか？",
buttons: ['キャンセル', '確定'],
dangerMode: true,
})
.then((sure) => {
if(!sure) { return }
PropertyApi.deleteProperty(id, data => {
this.$store.commit(mutationTypes.DELETE_PROPERTY_OF_SALES, id)
this.closeModalForm()
}, error => {
swal('物件削除が失敗しました。')
})
})
}
},
mounted: function () {
ApiUser.usersForProperty(this.$store.getters.userLoggedIn.sales_office_id, users => {
this.listUsers = users
}, error => {
})
}
}
</script>
