daily pastebin goal
10%
SHARE
TWEET

Untitled

a guest May 23rd, 2018 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 1. `UserApi.js`
  2. ```javascript
  3. import axios from "axios"
  4.  
  5. export default {
  6.   getAllExtraCompanies: function (cb, errorCB) {
  7.     let url = '/api/backend/extra_companies'
  8.     this._sendRequestToDelivery(url, {}, 'get', cb, errorCB)
  9.   },
  10.  
  11.   createExtraCompany: function (params, cb, errorCB) {
  12.     let url = '/api/backend/extra_companies'
  13.     this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
  14.   },
  15.  
  16.   updateExtraCompany: function (id, params, cb, errorCB) {
  17.     let url = '/api/backend/extra_companies/' + id
  18.     this._sendRequestToDelivery(url, params, 'patch', cb, errorCB)
  19.   },
  20.  
  21.   deleteExtraCompanies: function (params, cb, errorCB) {
  22.     let url = '/api/backend/extra_companies/delete_extra_companies'
  23.     this._sendRequestToDelivery(url, params, 'post', cb, errorCB)
  24.   },
  25.  
  26.   _sendRequestToDelivery: function (url, data, method, cb, errorCB) {
  27.     axios({
  28.       url: url,
  29.       method: method,
  30.       responseType: 'json',
  31.       data: data
  32.     })
  33.       .then((response) => {
  34.         cb(response.data);
  35.       }, (error) => {
  36.         errorCB(error)
  37.       });
  38.   },
  39. }
  40. ```
  41.  
  42. 2. `users.js` store
  43.  
  44. ```javascript
  45.   import UserApi from '../../api/user'
  46. import * as types from '../mutation_types'
  47.  
  48. const state = {
  49.   all: [],
  50.   userDetail: {
  51.     sales_office: {},
  52.     branch_office: {}
  53.   },
  54.   userLoggedInDetail: {},
  55.   createdPropertyOwner: {},
  56.   officeOptions: [],
  57.   approveUsersData: {
  58.     users: [],
  59.     officeName: ''
  60.   },
  61.  
  62.   accessLogsData: {
  63.   }
  64. }
  65.  
  66. const getters = {
  67.   allUsers: state => state.all,
  68.   userDetail: state => state.userDetail,
  69.   officeOptions: state => state.officeOptions,
  70.   userLoggedInDetail: state => state.userLoggedInDetail,
  71.   approveUsersData: state => state.approveUsersData,
  72.   accessLogsData: state => state.accessLogsData
  73. }
  74.  
  75. const actions = {
  76.   getAllUsers ({ commit }) {
  77.     UserApi.getListUsers(users =>{
  78.       commit(types.SET_LIST_USERS, {users})
  79.     })
  80.   },
  81.  
  82.   getUserDetail ({ commit }, id) {
  83.     UserApi.getUserDetail(id, user =>{
  84.       commit(types.SET_USER_DETAIL, {user})
  85.     })
  86.   },
  87.  
  88.   getUserLoggedInDetail ({ commit }, id) {
  89.     UserApi.getUserDetail(id, response =>{
  90.       commit(types.SET_USER_LOGGED_IN_DETAIL, { user: response.user})
  91.     })
  92.   },
  93.  
  94.   getUserPassword ({ commit }, id) {
  95.     UserApi.getUserPassword(id, password => {
  96.       commit(types.SET_USER_DETAIL_PASSWORD, password)
  97.     })
  98.   },
  99.  
  100.   getOfficeOptions ({ commit }, type) {
  101.     UserApi.getOfficeOPtions(type, offices => {
  102.       commit(types.SET_OFFICE_OPTIONS, offices)
  103.     })
  104.   },
  105. }
  106.  
  107. const mutations = {
  108.   [types.SET_LIST_USERS] (state, { users }) {
  109.     state.all = users
  110.   },
  111.  
  112.   [types.SET_OFFICE_OPTIONS] (state, offices) {
  113.     state.officeOptions = offices
  114.   },
  115.  
  116.   [types.REMOVE_OFFICE_OPTIONS] (state) {
  117.     state.officeOptions = []
  118.   },
  119.  
  120.   [types.SET_USER_DETAIL] (state, { user }) {
  121.     state.userDetail = user
  122.   },
  123.  
  124.   [types.SET_USER_LOGGED_IN_DETAIL] (state, { user }) {
  125.     state.userLoggedInDetail = user
  126.   },
  127.  
  128.   [types.DELETE_USER] (state, { userId }) {
  129.     state.all = state.all.filter(user => user.id != parseInt(userId))
  130.   },
  131.  
  132.   [types.SET_USER_DETAIL_PASSWORD] (state, password ) {
  133.     state.userDetail = { ...state.userDetail, password: password }
  134.   },
  135.  
  136.   [types.CREATED_PROPERTY_OWNER_DATA] (state, user ) {
  137.     state.createdPropertyOwner = user
  138.   }
  139. }
  140.  
  141. export default {
  142.   state,
  143.   getters,
  144.   actions,
  145.   mutations
  146. }
  147.  
  148. ```
  149.  
  150. 3. `property_component.vue`
  151.  
  152. ```vue
  153. <template>
  154.   <div class="col-xs-12 new-property no-padding">
  155.     <div class="modal" id="UpdatePropertyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  156.       <div class="modal-dialog" role="document">
  157.         <div class="modal-content">
  158.           <div class="modal-body">
  159.             <form @submit.prevent='submitPropertyForm' id="UpdatePropertyFormData">
  160.               <div class="form-group">
  161.                 <label for="">物件オーナー</label>
  162.                 <v-select placeholder="選択して下さい" v-model="selectedManager" label='name' :options="listUsers">
  163.                   <span slot="no-options">検索結果が見つかりませんでした。</span>
  164.                 </v-select>
  165.                 <input :value="selectedManager && selectedManager.id" type="hidden" name="property[manager_user_id]">
  166.               </div>
  167.               <div class="form-group">
  168.                 <label for="">物件名</label>
  169.                 <input :value="property.name" v-validate="'required'" type="text" name="property[name]" class="form-control" :class="{'input': true, 'is-danger': errors.has('property[name]') }">
  170.                 <span v-show="errors.has('property[name]')" class="help is-danger">物件名は必須入力項目です</span>
  171.               </div>
  172.               <div class="form-group">
  173.                 <label for="">郵便番号</label>
  174.                 <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]') }" >
  175.                 <span v-show="errors.has('property[postal_code]')" class="help is-danger">郵便番号は必須入力項目です</span>
  176.               </div>
  177.               <div class="form-group">
  178.                 <label for="">住所</label>
  179.                 <input v-model="property.address" v-validate="'required'" type="text" name="property[address]" class="form-control">
  180.                 <span v-show="errors.has('property[address]')" class="help is-danger">住所号は必須入力項目です</span>
  181.               </div>
  182.               <div class="form-group">
  183.                 <label for="">電話番号</label>
  184.                 <input :value="property.phone" type="text" name="property[phone]" class="form-control">
  185.               </div>
  186.               <div class="form-group">
  187.                 <label for="">Box Id</label>
  188.                 <input name="box[id]" type="hidden" class="form-control" v-if="property.box" :value="property.box.id">
  189.                 <input readonly name="box[box_id]" type="text" class="form-control" v-if="property.box" :value="property.box.box_id">
  190.               </div>
  191.               <div class="form-group">
  192.                 <label for="">Box 設置日</label>
  193.                 <input readonly name="box[installed_at]" type="text" class="form-control" v-if="property.box" :value="property.box.installed_at">
  194.               </div>
  195.               <div class="form-group">
  196.                 <label for="">空室日</label>
  197.                 <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>
  198.               </div>
  199.               <div class="form-group">
  200.                 <label for="">満室日</label>
  201.                 <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>
  202.               </div>
  203.               <div class="new-property-of-owner center">
  204.                 <button type="submit" class="btn btn-sm btn-primary">確定</button>
  205.                 <span class="btn btn-sm btn-warning" @click='closeModalForm'>キャンセル</span>
  206.                 <span class="btn btn-sm btn-danger"  @click='deleteProperty(property.id)'> 削除</span>
  207.               </div>
  208.             </form>
  209.           </div>
  210.         </div>
  211.       </div>
  212.     </div>
  213.   </div>
  214. </template>
  215.  
  216. <script>
  217. import { mapGetters } from 'vuex'
  218. import * as mutationTypes from '../../../store/mutation_types'
  219. import PropertyApi from '../../../api/property'
  220. import Datepicker from 'vuejs-datepicker'
  221. import moment from 'moment'
  222. import property from '../../../api/property'
  223. import ApiUser from '../../../api/user'
  224.  
  225. export default {
  226.   name: 'newPropertyOfOwnerComponent',
  227.   props: ['property'],
  228.  
  229.   components: {
  230.     Datepicker
  231.   },
  232.  
  233.   data: function () {
  234.     return {
  235.       room_empty_at: this.formatDate(this.property.room_empty_at),
  236.       no_vacancy_at: this.formatDate(this.property.no_vacancy_at),
  237.       listUsers: [],
  238.       selectedManager: null
  239.     }
  240.   },
  241.  
  242.   watch: {
  243.     property: function (newData, oldData) {
  244.       this.selectedManager = this.listUsers.filter(user => newData.manager_user_id == user.id)[0]
  245.     }
  246.   },
  247.  
  248.   methods: {
  249.     formatDate: function (date) {
  250.       return moment(date).format('YYYY/MM/DD')
  251.     },
  252.  
  253.     submitPropertyForm: function () {
  254.       this.$validator.validateAll().then((result) => {
  255.         if (!result) {
  256.           return;
  257.         }
  258.         PropertyApi.updateProperty(this.property.id, $('#UpdatePropertyFormData').serialize(), response => {
  259.           this._updateListProperties(response.property)
  260.         }, error =>{
  261.           swal('更新時にエラーが発生しました。もう一度お試しください')
  262.         })
  263.       })
  264.     },
  265.  
  266.     closeModalForm: function() {
  267.       $('#UpdatePropertyModal').modal('hide')
  268.     },
  269.  
  270.     _updateListProperties: function (property) {
  271.       this.$store.commit(mutationTypes.UPDATE_PROPERTY_DATA, property)
  272.  
  273.       swal('選択した物件情報を更新しました')
  274.       .then(() => {
  275.         this.closeModalForm()
  276.       })
  277.     },
  278.  
  279.     deleteProperty: function (id) {
  280.       swal({
  281.         title: "物件を削除しますか?",
  282.         buttons: ['キャンセル', '確定'],
  283.         dangerMode: true,
  284.       })
  285.       .then((sure) => {
  286.         if(!sure) { return }
  287.         PropertyApi.deleteProperty(id, data => {
  288.           this.$store.commit(mutationTypes.DELETE_PROPERTY_OF_SALES, id)
  289.           this.closeModalForm()
  290.         }, error => {
  291.           swal('物件削除が失敗しました。')
  292.         })
  293.       })
  294.     }
  295.   },
  296.  
  297.   mounted: function () {
  298.     ApiUser.usersForProperty(this.$store.getters.userLoggedIn.sales_office_id, users => {
  299.       this.listUsers = users
  300.     }, error => {
  301.     })
  302.   }
  303. }
  304. </script>
  305.  
  306. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top