Blame view

src/pages/generalSetting/generalSetting.vue 9.25 KB
79583580d   Neeraj Sharma   implement task ma...
1
2
  <template>
    <v-app id="login">
d9bb52b5b   Neeraj Sharma   implement trello ...
3
      <v-container>
79583580d   Neeraj Sharma   implement task ma...
4
5
        <v-layout>
          <v-flex xs12 sm12 md12 lg12 class="mt-5">
68d742034   Neeraj Sharma   implement new des...
6
7
8
9
10
11
            <v-card flat class="card-style pa-2" dark>
              <v-layout>
                <v-flex xs12>
                  <label class="title text-xs-center">General Setting</label>
                </v-flex>
              </v-layout>
79583580d   Neeraj Sharma   implement task ma...
12
13
14
              <v-card-text>
                <v-flex xs12>
                  <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
d9bb52b5b   Neeraj Sharma   implement trello ...
15
16
17
18
19
                    <v-layout>
                      <v-flex
                        xs12
                        class="text-xs-center text-sm-center text-md-center text-lg-center mb-4"
                      >
68d742034   Neeraj Sharma   implement new des...
20
                        <v-avatar size="80px">
d9bb52b5b   Neeraj Sharma   implement trello ...
21
22
23
24
25
26
27
28
29
                          <img src="/static/icon/user.png" v-if="!imageUrl" />
                        </v-avatar>
                        <input
                          type="file"
                          style="display: none"
                          ref="image"
                          accept="image/*"
                          @change="onFilePicked"
                        />
68d742034   Neeraj Sharma   implement new des...
30
                        <img :src="imageData.imageUrl" height="150" width="150" v-if="imageUrl" />
d9bb52b5b   Neeraj Sharma   implement trello ...
31
32
                      </v-flex>
                    </v-layout>
79583580d   Neeraj Sharma   implement task ma...
33
34
                    <v-flex xs12>
                      <!-- <v-layout> -->
d9bb52b5b   Neeraj Sharma   implement trello ...
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Site Title:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Site title"
                              v-model="setting.name"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Phone:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Phone number"
                              v-model="setting.mobile"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
d9bb52b5b   Neeraj Sharma   implement trello ...
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Email:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your email"
                              v-model="setting.email"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Address:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Address"
                              v-model="setting.address"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label>
                            <label
                              class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4"
                            >Uplaod :</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              label="Select Image"
                              @click="pickFile"
                              v-model="imageName"
                              append-icon="attach_file"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
79583580d   Neeraj Sharma   implement task ma...
110
111
112
113
114
115
116
                    </v-flex>
                  </v-form>
                </v-flex>
              </v-card-text>
              <v-card-actions>
                <v-flex text-xs-center>
                  <v-btn
68d742034   Neeraj Sharma   implement new des...
117
                    class="mt-3 add-button"
79583580d   Neeraj Sharma   implement task ma...
118
                    round
79583580d   Neeraj Sharma   implement task ma...
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
                    dark
                    large
                    :loading="loading"
                    @click="reset"
                  >submit</v-btn>
                </v-flex>
              </v-card-actions>
              <v-snackbar
                :timeout="timeout"
                :top="y === 'top'"
                :right="x === 'right'"
                :vertical="mode === 'vertical'"
                v-model="snackbar"
                :color="color"
              >{{ text }}</v-snackbar>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-app>
  </template>
  <script>
  import http from "@/Services/http.js";
  
  export default {
    data() {
      return {
        snackbar: false,
        y: "top",
        x: "right",
        mode: "",
        timeout: 4000,
        text: "",
        color: "",
        setting: {},
        valid: true,
        loading: false,
d9bb52b5b   Neeraj Sharma   implement trello ...
156
157
158
159
160
        text: "",
        imageData: {},
        imageName: "",
        imageUrl: "",
        imageFile: ""
79583580d   Neeraj Sharma   implement task ma...
161
162
163
164
165
166
167
      };
    },
    mounted() {
      this.token = this.$store.state.token;
      // this.getRole();
    },
    methods: {
d9bb52b5b   Neeraj Sharma   implement trello ...
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
      pickFile() {
        this.$refs.image.click();
      },
      onFilePicked(e) {
        // console.log(e)
        const files = e.target.files;
        this.imageData.upload = e.target.files[0];
        if (files[0] !== undefined) {
          this.imageName = files[0].name;
          if (this.imageName.lastIndexOf(".") <= 0) {
            return;
          }
          const fr = new FileReader();
          fr.readAsDataURL(files[0]);
          fr.addEventListener("load", () => {
            this.imageUrl = fr.result;
            this.imageFile = files[0]; // this is an image file that can be sent to server...
            this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
          });
        } else {
          this.imageName = "";
          this.imageFile = "";
          this.imageUrl = "";
        }
      },
79583580d   Neeraj Sharma   implement task ma...
193
194
195
      reset() {
        if (this.$refs.form.validate()) {
          this.loading = true;
d9bb52b5b   Neeraj Sharma   implement trello ...
196
197
198
199
200
          if (this.imageUrl) {
            var str = this.imageUrl;
            const [baseUrl, imageUrl] = str.split(/,/);
            this.setting.upload = imageUrl;
          }
79583580d   Neeraj Sharma   implement task ma...
201
202
203
204
205
206
207
208
209
210
          this.setting.schoolId = this.$store.state.id;
          http()
            .put("/updateSchool", this.setting, {
              headers: { Authorization: "Bearer " + this.token }
            })
            .then(response => {
              this.loading = false;
              this.snackbar = true;
              this.text = response.data.message;
              this.color = "green";
d9bb52b5b   Neeraj Sharma   implement trello ...
211
              this.imageUrl = "";
79583580d   Neeraj Sharma   implement task ma...
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
              this.clear();
            })
            .catch(error => {
              // console.log("err====>",err);
              this.snackbar = true;
              this.text = error.response.data.message;
              this.color = "error";
              this.loading = false;
            });
        }
      },
      // getRole() {
      //   this.showLoader = true;
      //   http()
      //     .get("/getRolesList", {
      //       headers: { Authorization: "Bearer " + this.token }
      //     })
      //     .then(response => {
      //       for (let i = 0; i < response.data.data.length; i++) {
      //         if (
      //           response.data.data[i].name != "SUPERADMIN" &&
      //           response.data.data[i].name != "ADMIN"
      //         ) {
      //           this.getRoles.push(response.data.data[i]);
      //           this.showLoader = false;
      //         }
      //       }
      //     })
      //     .catch(error => {
      //       this.showLoader = false;
      //       if (error.response.status === 401) {
      //         this.$router.replace({ path: "/" });
      //         this.$store.dispatch("setToken", null);
      //         this.$store.dispatch("Id", null);
      //       }
      //     });
      // },
      clear() {
        this.$refs.form.reset();
      }
      // getUsers(roles) {
      //   this.showLoader = true;
      //   http()
      //     .get("/getUserWithRole", {
      //       params: {
      //         name: roles
      //       },
      //       headers: { Authorization: "Bearer " + this.token }
      //     })
      //     .then(response => {
      //       this.getUsersName = response.data.data;
      //     })
      //     .catch(error => {
      //       this.showLoader = false;
      //       if (error.response.status === 401) {
      //         this.$router.replace({ path: "/" });
      //         this.$store.dispatch("setToken", null);
      //         this.$store.dispatch("Id", null);
      //       }
      //     });
      // }
    }
  };
  </script>
  <style scoped>
79583580d   Neeraj Sharma   implement task ma...
277
278
279
280
281
282
283
284
285
286
287
  .v-btn--large {
    padding: 0px 74px;
  }
  @media screen and (max-width: 769px) {
    .v-btn--large {
      font-size: 14px;
      height: 44px;
      padding: 0 32px;
    }
  }
  </style>