Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 1. `UserApi.js`
- ```javascript
- 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)
- });
- },
- }
- ```
- 2. `users.js` store
- ```javascript
- 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
- }
- ```
- 3. `property_component.vue`
- ```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>
- ```
Add Comment
Please, Sign In to add comment