Kaynağa Gözat

Timeshare - week

master
Kobus Botha 5 yıl önce
ebeveyn
işleme
78691b8429

BIN
public/img/sort-down.png Dosyayı Görüntüle


BIN
public/img/sort-up.png Dosyayı Görüntüle


+ 5
- 16
src/components/admin/status/statusPage.vue Dosyayı Görüntüle

20
     </div>
20
     </div>
21
     <!-- </section> -->
21
     <!-- </section> -->
22
     <div class="container">
22
     <div class="container">
23
-      <table class="table table-bordered">
24
-        <thead>
25
-          <tr>
26
-            <th>Id</th>
27
-            <th>Code</th>
28
-            <th>Description</th>
29
-          </tr>
30
-        </thead>
31
-        <tbody>
32
-          <tr v-for="(item, i) in statusList" :key="i">
33
-            <td>{{item.id}}</td>
34
-            <td>{{item.code}}</td>
35
-            <td>{{item.description}}</td>
36
-          </tr>
37
-        </tbody>
38
-      </table>
23
+      <ListView :items="statusList" :columnCount="4" :compact="false" :showNew="false" />
39
     </div>
24
     </div>
40
   </div>
25
   </div>
41
 </template>
26
 </template>
42
 <script>
27
 <script>
43
 import { mapState, mapActions } from 'vuex';
28
 import { mapState, mapActions } from 'vuex';
29
+import ListView from '../../shared/listView.vue';
44
 
30
 
45
 export default {
31
 export default {
46
   name: 'StatusList',
32
   name: 'StatusList',
33
+  components: {
34
+    ListView,
35
+  },
47
   created() {
36
   created() {
48
     this.getStatusList();
37
     this.getStatusList();
49
   },
38
   },

+ 22
- 11
src/components/admin/status/timeshareAdminPage.vue Dosyayı Görüntüle

1
+/* eslint-disable no-restricted-syntax */
2
+/* eslint-disable guard-for-in */
1
 <template>
3
 <template>
2
   <div>
4
   <div>
3
-    <br />
4
-    <br />
5
-    <br />
6
-    <br />
7
     <br />
5
     <br />
8
     <div class="row">
6
     <div class="row">
9
       <div class="offset-1 col-md-3">
7
       <div class="offset-1 col-md-3">
11
           type="button"
9
           type="button"
12
           :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
10
           :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
13
           value="Verify Week(s)"
11
           value="Verify Week(s)"
14
-          :disabled="selectedItems.length > 0"
12
+          :disabled="!(selectedItems.length > 0)"
13
+          @click="onVerify()"
15
         >{{ButtonMessage}}</button>
14
         >{{ButtonMessage}}</button>
16
         <div>{{Message}}</div>
15
         <div>{{Message}}</div>
17
       </div>
16
       </div>
18
       <div class="offset-1 col-md-10">
17
       <div class="offset-1 col-md-10">
19
         <ListView
18
         <ListView
20
-          :items="items"
21
-          :allowMultipleSelect="true"
19
+          :items="getNeedsVerify"
22
           @onRowClick="onRowClick"
20
           @onRowClick="onRowClick"
23
           @onClearSelected="onClearSelected"
21
           @onClearSelected="onClearSelected"
24
-          :columnsCount="15"
25
           :title="'Pending Weeks'"
22
           :title="'Pending Weeks'"
26
           :showNew="false"
23
           :showNew="false"
27
         />
24
         />
30
   </div>
27
   </div>
31
 </template>
28
 </template>
32
 <script>
29
 <script>
33
-import { mapState, mapActions } from 'vuex';
30
+import { mapState, mapActions, mapGetters } from 'vuex';
34
 import Log from '../../../assets/Log';
31
 import Log from '../../../assets/Log';
35
 import ListView from '../../shared/listView.vue';
32
 import ListView from '../../shared/listView.vue';
36
 
33
 
47
     };
44
     };
48
   },
45
   },
49
   mounted() {
46
   mounted() {
50
-    console.log(this.user.id);
51
     this.getItems(this.user.id);
47
     this.getItems(this.user.id);
52
   },
48
   },
53
   computed: {
49
   computed: {
82
       return msg;
78
       return msg;
83
     },
79
     },
84
     ...mapState('myWeeks', ['items']),
80
     ...mapState('myWeeks', ['items']),
81
+    ...mapGetters({ getNeedsVerify: 'myWeeks/getNeedsVerify' }),
85
   },
82
   },
86
   methods: {
83
   methods: {
87
-    ...mapActions('myWeeks', ['getItems']),
84
+    ...mapActions('myWeeks', ['getItems', 'verifyWeek']),
85
+    ...mapActions('alert', ['success']),
86
+    onVerify() {
87
+      if (this.selectedItems.length > 0) {
88
+        for (const i in this.selectedItems) {
89
+          const selectedIndex = this.selectedItems[i];
90
+          const item = this.items[selectedIndex];
91
+          if (item) {
92
+            this.verifyWeek(item.id);
93
+          }
94
+        }
95
+        this.success('Week verified!');
96
+        this.$router.push('/shared/alert');
97
+      }
98
+    },
88
     onRowClick(items) {
99
     onRowClick(items) {
89
       this.selectedItems = items;
100
       this.selectedItems = items;
90
     },
101
     },

+ 9
- 5
src/components/communication/templatePage.vue Dosyayı Görüntüle

56
   },
56
   },
57
   methods: {
57
   methods: {
58
     ...mapActions('template', ['getList']),
58
     ...mapActions('template', ['getList']),
59
-    onRowClick(item) {
60
-      if (this.detailItem !== item) {
61
-        this.detailItem = item;
62
-      } else this.detailItem = undefined;
63
-      this.clickedNew = false;
59
+    onRowClick(items) {
60
+      if (items.length > 0) {
61
+        const i = items[0];
62
+        const item = this.list[i];
63
+        if (this.detailItem !== item) {
64
+          this.detailItem = item;
65
+        } else this.detailItem = undefined;
66
+        this.clickedNew = false;
67
+      }
64
     },
68
     },
65
     onNew() {
69
     onNew() {
66
       this.detailItem = {};
70
       this.detailItem = {};

+ 30
- 0
src/components/shared/alertPage.vue Dosyayı Görüntüle

1
+<template>
2
+  <div>
3
+    <br />
4
+    <Alert :text="message" :type="type" />
5
+    <div class="row">
6
+      <div class="offset-3 col-md-2">
7
+        <button type="button" class="form-control btn btn-primary" @click="goBack()">Back</button>
8
+      </div>
9
+    </div>
10
+  </div>
11
+</template>
12
+
13
+<script>
14
+import { mapState } from 'vuex';
15
+import Alert from './alert.vue';
16
+
17
+export default {
18
+  components: {
19
+    Alert,
20
+  },
21
+  computed: {
22
+    ...mapState('alert', ['message', 'type']),
23
+  },
24
+  methods: {
25
+    goBack() {
26
+      this.$router.go(-1);
27
+    },
28
+  },
29
+};
30
+</script>

+ 49
- 7
src/components/shared/listView.vue Dosyayı Görüntüle

28
     <div v-if="items && items.length > 0" class="table-responsive">
28
     <div v-if="items && items.length > 0" class="table-responsive">
29
       <table
29
       <table
30
         id="table"
30
         id="table"
31
-        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
31
+        :class="{'table table-hover': (1 === 1), 'table-sm': compact, 'table-bordered': bordered, 'table-striped': striped}"
32
       >
32
       >
33
-        <thead class="my-table table-header">
33
+        <thead >
34
           <tr class="dnd-moved">
34
           <tr class="dnd-moved">
35
             <th v-for="(column, c) in Columns" :key="c">
35
             <th v-for="(column, c) in Columns" :key="c">
36
-              <div @click="sortBy(column)">{{ column }}</div>
36
+              <div
37
+                @click="sortBy(column)"
38
+                @mouseover="hover = c"
39
+                @mouseleave="hover = -1"
40
+                :class="{ active: hover === c }"
41
+              >
42
+                <div class="d-flex bd-highlight">
43
+                  <div class="p-2 w-100 bd-highlight">{{ column | toProper }}</div>
44
+                  <div class="p-2 flex-shrink-1 bd-highlight">
45
+                    <img
46
+                      src="../../../public/img/sort-up.png"
47
+                      height="8px;"
48
+                      v-if="sortKey === column && reverse"
49
+                    />
50
+                    <img
51
+                      src="../../../public/img/sort-down.png"
52
+                      height="8px;"
53
+                      v-if="sortKey === column && !reverse"
54
+                    />
55
+                  </div>
56
+                </div>
57
+              </div>
37
             </th>
58
             </th>
38
             <th v-if="editable"></th>
59
             <th v-if="editable"></th>
39
             <th v-if="deleteable"></th>
60
             <th v-if="deleteable"></th>
60
         </tbody>
81
         </tbody>
61
       </table>
82
       </table>
62
       <div class="d-flex justify-content-between" v-if="showPager">
83
       <div class="d-flex justify-content-between" v-if="showPager">
63
-        <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
84
+        <div
85
+          class="p-1"
86
+        >{{ currentPage + ' / ' + PageCount + (!hideItemCount ? ' - (' + items.length + ' items)' : '')}}</div>
64
         <div class="p-1">
87
         <div class="p-1">
65
           <BasePagination
88
           <BasePagination
66
             :currentPage="currentPage"
89
             :currentPage="currentPage"
136
     deleteable: {
159
     deleteable: {
137
       default: false,
160
       default: false,
138
     },
161
     },
139
-    columnsCount: {
162
+    columnCount: {
140
       default: 6,
163
       default: 6,
141
     },
164
     },
142
     showPager: {
165
     showPager: {
145
     title: {
168
     title: {
146
       default: undefined,
169
       default: undefined,
147
     },
170
     },
171
+    hideItemCount: {
172
+      default: false,
173
+    },
174
+    itemsPerPageList: {
175
+      default: ItemsPerPageList,
176
+    },
177
+    currentPage: {
178
+      default: 1
179
+    },
180
+    bordered: {
181
+      default: true
182
+    }, 
183
+    striped: {
184
+      default: true
185
+    }
148
   },
186
   },
149
   data() {
187
   data() {
150
     return {
188
     return {
189
+      hover: -1,
151
       selectedItems: [],
190
       selectedItems: [],
152
       showControl: false,
191
       showControl: false,
153
       sortKey: '',
192
       sortKey: '',
154
       reverse: false,
193
       reverse: false,
155
       searchItem: '',
194
       searchItem: '',
156
-      itemsPerPageList: ItemsPerPageList,
157
       visibleItemsPerPageCount: 0,
195
       visibleItemsPerPageCount: 0,
158
       currentPage: 1,
196
       currentPage: 1,
159
     };
197
     };
255
               !list.includes(Object.keys(item)[o])
293
               !list.includes(Object.keys(item)[o])
256
               && !Array.isArray(Object.values(item)[o])
294
               && !Array.isArray(Object.values(item)[o])
257
             ) {
295
             ) {
258
-              if (list.length < this.columnsCount) {
296
+              if (list.length < this.columnCount) {
259
                 list.push(Object.keys(item)[o]);
297
                 list.push(Object.keys(item)[o]);
260
               }
298
               }
261
             }
299
             }
295
   text-decoration: none;
333
   text-decoration: none;
296
   color: #333333;
334
   color: #333333;
297
 }
335
 }
336
+.active {
337
+  background-color: rgba(255, 255, 255, 0.5);
338
+  cursor: pointer;
339
+}
298
 .table > tbody > tr > td {
340
 .table > tbody > tr > td {
299
   vertical-align: middle;
341
   vertical-align: middle;
300
 }
342
 }

+ 4
- 1
src/components/timeshare/buy/buyPage.vue Dosyayı Görüntüle

37
           <div class="row mb-4">
37
           <div class="row mb-4">
38
             <div class="container col-md-4">
38
             <div class="container col-md-4">
39
               <div class="accordion" id="accordionExample">
39
               <div class="accordion" id="accordionExample">
40
-                <div class="card" v-for="(region, r) in availRegion" :key="r">
40
+                <div class="card darker-border" v-for="(region, r) in availRegion" :key="r">
41
                   <a
41
                   <a
42
                     class="mb-0 color-text-a"
42
                     class="mb-0 color-text-a"
43
                     data-toggle="collapse"
43
                     data-toggle="collapse"
166
   border-radius: 5px;
166
   border-radius: 5px;
167
   cursor: pointer;
167
   cursor: pointer;
168
 }
168
 }
169
+.darker-border {
170
+  border-color: #A5A5A5;
171
+}
169
 </style>
172
 </style>

+ 1
- 0
src/components/timeshare/myWeeksPage.vue Dosyayı Görüntüle

5
     <br />
5
     <br />
6
     <br />
6
     <br />
7
     <br />
7
     <br />
8
+    
8
     <div class="row">
9
     <div class="row">
9
       <div class="offset-1 col-md-10">
10
       <div class="offset-1 col-md-10">
10
         <ListView :items="items" :editable="true" @onEdit="onEdit" />
11
         <ListView :items="items" :editable="true" @onEdit="onEdit" />

+ 9
- 0
src/main.js Dosyayı Görüntüle

38
   return `R ${formatter.format(value)}`;
38
   return `R ${formatter.format(value)}`;
39
 });
39
 });
40
 
40
 
41
+Vue.filter('toProper', (value) => {
42
+  if (typeof value !== 'string') {
43
+    console.log(typeof value);
44
+    return value;
45
+  }
46
+  value = value.replace(/([a-z])([A-Z])/g, '$1 $2');
47
+  return value.charAt(0).toUpperCase() + value.slice(1);
48
+});
49
+
41
 
50
 
42
 Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
51
 Vue.filter('toDate', value => value.substring(0, value.length > 9 ? 10 : value.length));
43
 
52
 

+ 6
- 0
src/router/index.js Dosyayı Görüntüle

50
 import TemplatePage from '../components/communication/templatePage.vue';
50
 import TemplatePage from '../components/communication/templatePage.vue';
51
 import CarouselList from '../components/admin/misc/carouselList.vue';
51
 import CarouselList from '../components/admin/misc/carouselList.vue';
52
 import CarouselDetail from '../components/admin/misc/carousel.vue';
52
 import CarouselDetail from '../components/admin/misc/carousel.vue';
53
+import AlertPage from '../components/shared/alertPage.vue';
53
 
54
 
54
 Vue.use(Router);
55
 Vue.use(Router);
55
 
56
 
249
     component: TimeshareSell,
250
     component: TimeshareSell,
250
     props: true,
251
     props: true,
251
   },
252
   },
253
+  {
254
+    path: '/shared/alert',
255
+    name: 'AlertPage',
256
+    component: AlertPage,
257
+  },
252
   {
258
   {
253
     path: '/MakeOffer',
259
     path: '/MakeOffer',
254
     name: 'MakeOffer',
260
     name: 'MakeOffer',

+ 2
- 0
src/store/index.js Dosyayı Görüntüle

25
 import PropertyEdit from './modules/property/propertyEdit';
25
 import PropertyEdit from './modules/property/propertyEdit';
26
 import Carousel from './modules/misc/carousel';
26
 import Carousel from './modules/misc/carousel';
27
 import Individual from './modules/user/individual';
27
 import Individual from './modules/user/individual';
28
+import Alert from './modules/misc/alert';
28
 
29
 
29
 Vue.use(Vuex);
30
 Vue.use(Vuex);
30
 /* eslint no-param-reassign: ["error", { "props": false }] */
31
 /* eslint no-param-reassign: ["error", { "props": false }] */
54
     propertyEdit: PropertyEdit,
55
     propertyEdit: PropertyEdit,
55
     carousel: Carousel,
56
     carousel: Carousel,
56
     individual: Individual,
57
     individual: Individual,
58
+    alert: Alert,
57
   },
59
   },
58
 });
60
 });

+ 21
- 0
src/store/modules/misc/alert.js Dosyayı Görüntüle

1
+export default {
2
+  namespaced: true,
3
+  state: {
4
+    type: undefined,
5
+    message: undefined,
6
+  },
7
+  mutations: {
8
+    setSuccess(state, msg) {
9
+      state.type = 'SUCCESS';
10
+      state.message = msg;
11
+    },
12
+  },
13
+  getters: {},
14
+  actions: {
15
+    success({
16
+      commit,
17
+    }, msg) {
18
+      commit('setSuccess', msg);
19
+    },
20
+  },
21
+};

+ 17
- 2
src/store/modules/timeshare/myWeeks.js Dosyayı Görüntüle

1
+/* eslint-disable no-restricted-syntax */
2
+/* eslint-disable guard-for-in */
1
 import axios from 'axios';
3
 import axios from 'axios';
2
 
4
 
3
 export default {
5
 export default {
4
   namespaced: true,
6
   namespaced: true,
5
   state: {
7
   state: {
6
-    test: 'kobus',
7
     items: [],
8
     items: [],
8
   },
9
   },
9
   mutations: {
10
   mutations: {
11
       state.items = list;
12
       state.items = list;
12
     },
13
     },
13
   },
14
   },
14
-  getters: {},
15
+  getters: {
16
+    getNeedsVerify(state) {
17
+      return _.filter(state.items, x => x.status && x.status.code === 'A1');
18
+    },
19
+  },
15
   actions: {
20
   actions: {
16
     getItems({
21
     getItems({
17
       commit,
22
       commit,
21
           .error,
26
           .error,
22
       );
27
       );
23
     },
28
     },
29
+    verifyWeek({
30
+      commit,
31
+    }, id) {
32
+      try {
33
+        axios.post(`/api/timeshareweek/verifyweek/${id}`).catch(console.error);
34
+      } catch (err) {
35
+        console.log(err);
36
+      }
37
+    },
38
+
24
   },
39
   },
25
 };
40
 };

Loading…
İptal
Kaydet