viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 7fea6db0b66607e4c04f198a1e0edf1788ca4c97

Authored by Shikha Mishra
1 parent 7281a47c49
Exists in master and in 3 other branches amber-development, development, ui-design

added feature of payroll

Showing 3 changed files with 2474 additions and 0 deletions   Show diff stats
src/pages/Payroll/hourlyTemplate.vue
Diff comments   View file @7fea6db
... ... @@ -0,0 +1,408 @@
  1 +<template>
  2 + <v-container fluid class="body-color">
  3 + <!-- ****** Edit Hourly Template ****** -->
  4 + <v-dialog v-model="editHourDialog" max-width="400px">
  5 + <v-card flat class="card-style pa-2" dark>
  6 + <v-layout>
  7 + <v-flex xs12>
  8 + <label class="title text-xs-center">Edit Hourly Template</label>
  9 + <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>
  10 + </v-flex>
  11 + </v-layout>
  12 + <v-form ref="form">
  13 + <v-container fluid>
  14 + <v-flex xs12 sm12>
  15 + <v-layout>
  16 + <v-flex xs3 class="pt-4 subheading">
  17 + <label class="right">Hourly Grades:</label>
  18 + </v-flex>
  19 + <v-flex xs8 sm7 class="ml-3">
  20 + <v-text-field
  21 + v-model="editedItem.hourlyGrades"
  22 + placeholder="please fill this field"
  23 + ></v-text-field>
  24 + </v-flex>
  25 + </v-layout>
  26 + </v-flex>
  27 + <v-flex xs12 sm12>
  28 + <v-layout>
  29 + <v-flex xs3 class="pt-4 subheading">
  30 + <label class="right">Hourly Reates:</label>
  31 + </v-flex>
  32 + <v-flex xs8 sm7 class="ml-3">
  33 + <v-text-field
  34 + v-model="editedItem.hourlyRate"
  35 + placeholder="please fill this field"
  36 + ></v-text-field>
  37 + </v-flex>
  38 + </v-layout>
  39 + </v-flex>
  40 + <v-layout>
  41 + <v-flex xs12>
  42 + <v-layout>
  43 + <v-spacer></v-spacer>
  44 + <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>
  45 + <v-spacer></v-spacer>
  46 + </v-layout>
  47 + </v-flex>
  48 + </v-layout>
  49 + </v-container>
  50 + </v-form>
  51 + </v-card>
  52 + </v-dialog>
  53 +
  54 + <!-- **** HOURLY TEMPLATE **** -->
  55 + <v-toolbar color="transparent" flat>
  56 + <v-btn
  57 + fab
  58 + dark
  59 + class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
  60 + small
  61 + @click="addHourDialog = true"
  62 + >
  63 + <v-icon dark>add</v-icon>
  64 + </v-btn>
  65 + <v-btn
  66 + round
  67 + class="open-dialog-button hidden-sm-only hidden-xs-only"
  68 + dark
  69 + @click="addHourDialog = true"
  70 + >
  71 + <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template
  72 + </v-btn>
  73 + <v-spacer></v-spacer>
  74 + <v-card-title class="body-1" v-show="show">
  75 + <v-btn icon large flat @click="displaySearch">
  76 + <v-avatar size="27">
  77 + <img src="/static/icon/search.png" alt="icon" />
  78 + </v-avatar>
  79 + </v-btn>
  80 + </v-card-title>
  81 + <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
  82 + <v-layout>
  83 + <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
  84 + <v-icon @click="closeSearch" color="error">close</v-icon>
  85 + </v-layout>
  86 + </v-flex>
  87 + </v-toolbar>
  88 +
  89 + <v-data-table
  90 + :headers="headers"
  91 + :items="hourlyData"
  92 + :pagination.sync="pagination"
  93 + :search="search"
  94 + >
  95 + <template slot="items" slot-scope="props">
  96 + <tr class="tr">
  97 + <td class="td td-row">{{ props.index + 1}}</td>
  98 + <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td>
  99 + <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>
  100 + <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->
  101 + <td class="td td-row text-xs-center">
  102 + <span>
  103 + <v-tooltip top>
  104 + <img
  105 + slot="activator"
  106 + style="cursor:pointer; width:20px; height:18px; "
  107 + class="mr-3"
  108 + @click="editItem(props.item)"
  109 + src="/static/icon/edit.png"
  110 + />
  111 + <span>Edit</span>
  112 + </v-tooltip>
  113 + <v-tooltip top>
  114 + <img
  115 + slot="activator"
  116 + style="cursor:pointer; width:20px; height:20px; "
  117 + class="mr-3"
  118 + @click="deleteItem(props.item)"
  119 + src="/static/icon/delete.png"
  120 + />
  121 + <span>Delete</span>
  122 + </v-tooltip>
  123 + </span>
  124 + </td>
  125 + </tr>
  126 + </template>
  127 + <v-alert
  128 + slot="no-results"
  129 + :value="true"
  130 + color="error"
  131 + icon="warning"
  132 + >Your search for "{{ search }}" found no results.</v-alert>
  133 + </v-data-table>
  134 +
  135 + <!-- **** Add Hourly Template **** -->
  136 + <v-dialog v-model="addHourDialog" max-width="400px">
  137 + <v-card flat class="card-style pa-2" dark>
  138 + <v-layout>
  139 + <v-flex xs12>
  140 + <label class="title text-xs-center">Add Hourly Template</label>
  141 + <v-icon size="24" class="right" @click="addHourDialog = false">cancel</v-icon>
  142 + </v-flex>
  143 + </v-layout>
  144 + <v-form ref="form" v-model="valid" lazy-validation>
  145 + <v-container fluid>
  146 + <v-flex xs12>
  147 + <v-layout>
  148 + <v-flex xs4 class="pt-4 subheading">
  149 + <label class="right">Hourly Grades:</label>
  150 + </v-flex>
  151 + <v-flex xs8 sm7 class="ml-3">
  152 + <v-text-field
  153 + placeholder="Please fill this field"
  154 + :rules="hourRules"
  155 + v-model="hourlyTypes.hourlyGrades"
  156 + ></v-text-field>
  157 + </v-flex>
  158 + </v-layout>
  159 + </v-flex>
  160 + <v-flex xs12>
  161 + <v-layout>
  162 + <v-flex xs4 class="pt-4 subheading">
  163 + <label class="right">Hourly Rate:</label>
  164 + </v-flex>
  165 + <v-flex xs8 sm7 class="ml-3">
  166 + <v-text-field
  167 + placeholder="Please fill this field"
  168 + :rules="hourRules"
  169 + v-model="hourlyTypes.hourlyRate"
  170 + ></v-text-field>
  171 + </v-flex>
  172 + </v-layout>
  173 + </v-flex>
  174 + <v-layout>
  175 + <v-flex xs12 sm12>
  176 + <v-layout>
  177 + <v-spacer></v-spacer>
  178 + <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->
  179 + <v-btn
  180 + @click="submit"
  181 + round
  182 + dark
  183 + :loading="loading"
  184 + class="add-button"
  185 + >Add Hourly Template</v-btn>
  186 + <v-spacer></v-spacer>
  187 + </v-layout>
  188 + </v-flex>
  189 + </v-layout>
  190 + </v-container>
  191 + </v-form>
  192 + </v-card>
  193 + </v-dialog>
  194 +
  195 + <v-snackbar
  196 + :timeout="timeout"
  197 + :top="y === 'top'"
  198 + :right="x === 'right'"
  199 + :vertical="mode === 'vertical'"
  200 + v-model="snackbar"
  201 + :color="color"
  202 + >{{ text }}</v-snackbar>
  203 + <div class="loader" v-if="showLoader">
  204 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  205 + </div>
  206 + </v-container>
  207 +</template>
  208 +
  209 +<script>
  210 +import http from "@/Services/http.js";
  211 +import moment from "moment";
  212 +
  213 +export default {
  214 + data: () => ({
  215 + snackbar: false,
  216 + date: null,
  217 + color: "",
  218 + y: "top",
  219 + x: "right",
  220 + mode: "",
  221 + timeout: 10000,
  222 + text: "",
  223 + show: true,
  224 + showSearch: false,
  225 + addHourDialog: false,
  226 + loading: false,
  227 + loadingSearch: false,
  228 + search: "",
  229 + showLoader: false,
  230 + editHourDialog: false,
  231 + valid: true,
  232 + disabled: true,
  233 + pagination: {
  234 + rowsPerPage: 10
  235 + },
  236 + hourRules: [v => !!v || "Field is required"],
  237 +
  238 + headers: [
  239 + {
  240 + align: "",
  241 + text: "No",
  242 + sortable: false,
  243 + value: "No"
  244 + },
  245 + {
  246 + text: "Hourly Grades",
  247 + value: "hourlyGrades",
  248 + sortable: false,
  249 + align: "center"
  250 + },
  251 + {
  252 + text: "Hourly Rate",
  253 + value: "hourlyRate",
  254 + sortable: false,
  255 + align: "center"
  256 + },
  257 + { text: "Action", value: "", sortable: false, align: "center" }
  258 + ],
  259 + hourlyTypes: [],
  260 + hourlyData: [],
  261 + editedItem: {}
  262 + }),
  263 + methods: {
  264 + close() {
  265 + this.editHourDialog = false;
  266 + },
  267 + submit() {
  268 + var Hour = {
  269 + hourlyGrades: this.hourlyTypes.hourlyGrades,
  270 + hourlyRate: this.hourlyTypes.hourlyRate
  271 + };
  272 + if (this.$refs.form.validate()) {
  273 + this.loading = true;
  274 + http()
  275 + .post("/createHourly", Hour, {
  276 + headers: { Authorization: "Bearer " + this.token }
  277 + })
  278 + .then(response => {
  279 + this.snackbar = true;
  280 + this.text = response.data.message;
  281 + this.getHourlyList();
  282 + this.color = "green";
  283 + this.addHourDialog = false;
  284 + // this.color = "success";
  285 + this.clear();
  286 + this.loading = false;
  287 + })
  288 + .catch(error => {
  289 + console.log("error", error);
  290 + this.snackbar = true;
  291 + this.color = "red";
  292 + // this.text = error.response.data.message;
  293 + this.loading = false;
  294 + });
  295 + }
  296 + },
  297 + getHourlyList() {
  298 + this.showLoader = true;
  299 + this.loadingSearch = true;
  300 + http()
  301 + .get("/getHourlyList", {
  302 + headers: { Authorization: "Bearer " + this.token }
  303 + })
  304 + .then(response => {
  305 + this.hourlyData = response.data.data;
  306 + this.showLoader = false;
  307 + this.loadingSearch = false;
  308 + })
  309 + .catch(error => {
  310 + // console.log("err====>", err);
  311 + this.showLoader = false;
  312 + this.loadingSearch = false;
  313 + this.snackbar = true;
  314 + this.text = error.response.data.message;
  315 + if (error.response.status === 401) {
  316 + this.$router.replace({ path: "/" });
  317 + this.$store.dispatch("setToken", null);
  318 + this.$store.dispatch("Id", null);
  319 + }
  320 + });
  321 + },
  322 +
  323 + editItem(item) {
  324 + this.editedIndex = this.hourlyData.indexOf(item);
  325 + this.editedItem = Object.assign({}, item);
  326 + this.editHourDialog = true;
  327 + },
  328 + deleteItem(item) {
  329 + let deleteGrade = {
  330 + hourlyId: item._id
  331 + };
  332 + http()
  333 + .delete(
  334 + "/deleteHourly",
  335 + confirm("Are you sure you want to delete this?") && {
  336 + params: deleteGrade
  337 + },
  338 + {
  339 + headers: {
  340 + Authorization: "Bearer " + this.token
  341 + }
  342 + }
  343 + )
  344 + .then(response => {
  345 + this.snackbar = true;
  346 + // this.text = "Successfully Delete Salary ";
  347 + this.text = response.data.message;
  348 + this.color = "green";
  349 + this.getHourlyList();
  350 + })
  351 + .catch(error => {
  352 + console.log("error", error);
  353 + this.snackbar = true;
  354 + this.text = error.response.data.message;
  355 + this.color = "red";
  356 + });
  357 + },
  358 +
  359 + save() {
  360 + var updateHourly = {
  361 + hourlyId: this.editedItem._id,
  362 + hourlyGrades: this.editedItem.hourlyGrades,
  363 + hourlyRate: this.editedItem.hourlyRate,
  364 + };
  365 + http()
  366 + .put("/updateHourly", updateHourly, {
  367 + headers: {
  368 + Authorization: "Bearer " + this.token
  369 + }
  370 + })
  371 + .then(response => {
  372 + // this.text = "Successfully Edit Notification";
  373 + this.getHourlyList();
  374 + this.close();
  375 + this.snackbar = true;
  376 + this.text = response.data.message;
  377 + this.color = "green";
  378 + this.editHourDialog = false;
  379 + })
  380 + .catch(error => {
  381 + console.log("error", error);
  382 + this.snackbar = true;
  383 + // this.text = error.response.data.message;
  384 + this.color = "red";
  385 + });
  386 + },
  387 +
  388 + displaySearch() {
  389 + (this.show = false), (this.showSearch = true);
  390 + },
  391 + closeSearch() {
  392 + this.showSearch = false;
  393 + this.show = true;
  394 + this.search = "";
  395 + },
  396 + clear() {
  397 + this.$refs.form.reset();
  398 + }
  399 + },
  400 + mounted() {
  401 + this.token = this.$store.state.token;
  402 + this.getHourlyList();
  403 + }
  404 +};
  405 +</script>
  406 +
  407 +<style scoped>
  408 +</style>
0 409 \ No newline at end of file
... ...
src/pages/Payroll/manageSalary.vue
Diff comments   View file @7fea6db
... ... @@ -0,0 +1,908 @@
  1 +<template>
  2 + <v-container fluid class="body-color">
  3 + <v-layout wrap>
  4 + <v-flex xs12 sm6>
  5 + <v-layout>
  6 + <v-flex xs4 class="pt-4 subheading">
  7 + <label class="right hidden-sm-only hidden-xs-only">Role:</label>
  8 + <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
  9 + </v-flex>
  10 + <v-flex xs8 class="ml-3">
  11 + <v-autocomplete
  12 + v-model="getReport.role"
  13 + :rules="role"
  14 + :items="getRoles"
  15 + item-text="name"
  16 + item-value="role"
  17 + placeholder="Select Role"
  18 + @change="getUserDetailWithRoles"
  19 + required
  20 + ></v-autocomplete>
  21 + </v-flex>
  22 + </v-layout>
  23 + </v-flex>
  24 + </v-layout>
  25 +
  26 + <!-- *** Salary Data *** -->
  27 + <v-data-table
  28 + :headers="headers"
  29 + :items="roleList"
  30 + :pagination.sync="pagination"
  31 + :search="search"
  32 + >
  33 + <template slot="items" slot-scope="props">
  34 + <tr class="tr">
  35 + <td class="td td-row">{{ props.index + 1}}</td>
  36 + <td class="td td-row text-xs-center">
  37 + <v-avatar size="40">
  38 + <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
  39 + <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
  40 + </v-avatar>
  41 + </td>
  42 + <td class="td td-row text-xs-center">{{ props.item.name}}</td>
  43 + <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
  44 + <td class="text-xs-center td td-row">
  45 + <span>
  46 + <v-tooltip top>
  47 + <img
  48 + slot="activator"
  49 + style="cursor:pointer; width:25px; height:25px; "
  50 + class="mr-3"
  51 + @click="profile(props.item)"
  52 + src="/static/icon/view.png"
  53 + />
  54 + <span>View</span>
  55 + </v-tooltip>
  56 + <v-tooltip top>
  57 + <img
  58 + slot="activator"
  59 + style="cursor:pointer; width:20px; height:18px; "
  60 + class="mr-3"
  61 + @click="editItem(props.item)"
  62 + src="/static/icon/edit.png"
  63 + />
  64 + <span>Edit</span>
  65 + </v-tooltip>
  66 + <v-tooltip top>
  67 + <img
  68 + slot="activator"
  69 + style="cursor:pointer; width:20px; height:20px; "
  70 + @click="deleteItem(props.item)"
  71 + src="/static/icon/delete.png"
  72 + class="mr-3"
  73 + />
  74 + <span>Delete</span>
  75 + </v-tooltip>
  76 + </span>
  77 + </td>
  78 + </tr>
  79 + </template>
  80 + <v-alert
  81 + slot="no-results"
  82 + :value="true"
  83 + color="error"
  84 + icon="warning"
  85 + >Your search for "{{ search }}" found no results.</v-alert>
  86 + </v-data-table>
  87 +
  88 + <!-- ****** PROFILE VIEW ****** -->
  89 +
  90 + <v-dialog v-model="profileSalaryDialog">
  91 + <v-card flat class="text-xs-center white--text">
  92 + <v-layout>
  93 + <v-flex xs12 class="card-style pa-2">
  94 + <label class="title text-xs-center">View Manage Salary</label>
  95 + <v-icon
  96 + size="24"
  97 + color="white"
  98 + class="right"
  99 + @click="profileSalaryDialog = false"
  100 + >cancel</v-icon>
  101 + </v-flex>
  102 + </v-layout>
  103 + <v-layout wrap>
  104 + <v-flex xs12 sm12 md4>
  105 + <v-card flat>
  106 + <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
  107 + <v-card-text>
  108 + <v-container>
  109 + <v-layout wrap>
  110 + <v-flex xs12>
  111 + <v-layout>
  112 + <v-flex
  113 + xs12
  114 + class="text-xs-center text-sm-center text-md-center text-lg-center"
  115 + >
  116 + <v-avatar size="80px">
  117 + <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
  118 + <img
  119 + :src="editedItem.profilePicUrl"
  120 + v-else-if="editedItem.profilePicUrl"
  121 + />
  122 + </v-avatar>
  123 + </v-flex>
  124 + </v-layout>
  125 + <v-layout>
  126 + <v-flex xs12 sm12>
  127 + <h3 class="text-xs-center">
  128 + <b>{{ editedItem.name }}</b>
  129 + </h3>
  130 + <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p>
  131 + </v-flex>
  132 + </v-layout>
  133 + <v-layout style="border: 1px solid lightgrey;">
  134 + <v-flex xs6 sm6 class="pa-0">
  135 + <h4 class="right">
  136 + <b>Join Date :</b>
  137 + </h4>
  138 + </v-flex>
  139 + <v-flex sm6 xs6 class="pa-0">
  140 + <h4>{{ editedItem.joinDate }}</h4>
  141 + </v-flex>
  142 + </v-layout>
  143 + <v-layout style="border: 1px solid lightgrey;">
  144 + <v-flex xs6 sm6 class="pa-0">
  145 + <h4 class="right">
  146 + <b>Date of Birth :</b>
  147 + </h4>
  148 + </v-flex>
  149 + <v-flex sm6 xs6 class="pa-0">
  150 + <h4>{{ editedItem.dob }}</h4>
  151 + </v-flex>
  152 + </v-layout>
  153 + <v-layout style="border: 1px solid lightgrey;">
  154 + <v-flex xs6 sm6 class="pa-0">
  155 + <h4 class="right">
  156 + <b>Phone No :</b>
  157 + </h4>
  158 + </v-flex>
  159 + <v-flex sm6 xs6 class="pa-0">
  160 + <h4>{{ editedItem.mobileNo }}</h4>
  161 + </v-flex>
  162 + </v-layout>
  163 + </v-flex>
  164 + </v-layout>
  165 + </v-container>
  166 + </v-card-text>
  167 + </v-card>
  168 + </v-flex>
  169 + <v-flex xs12 sm12 md8 v-if="viewSalary">
  170 + <v-card flat>
  171 + <v-flex xs12 sm12>
  172 + <v-container fluid grid-list-md>
  173 + <v-layout wrap>
  174 + <v-flex xs12 sm12 md6>
  175 + <v-card flat>
  176 + <v-form ref="form" lazy-validation class="py-4">
  177 + <v-layout>
  178 + <v-flex xs4 class="pt-4 subheading">
  179 + <label class="right hidden-xs-only">Salary Grades :</label>
  180 + </v-flex>
  181 + <v-flex xs8 sm7 class="ml-3">
  182 + <v-flex xs8 sm7 class="ml-3">
  183 + <v-text-field
  184 + solo
  185 + v-model="editedItem.salaryTemplate.salaryGrades"
  186 + readonly
  187 + ></v-text-field>
  188 + </v-flex>
  189 + </v-flex>
  190 + </v-layout>
  191 + <v-layout>
  192 + <v-flex xs4 class="pt-4 subheading">
  193 + <label class="right">Basic Salary :</label>
  194 + </v-flex>
  195 + <v-flex xs8 sm7 class="ml-3">
  196 + <v-flex xs8 sm7 class="ml-3">
  197 + <v-text-field
  198 + solo
  199 + v-model="editedItem.salaryTemplate.basicSalary"
  200 + readonly
  201 + ></v-text-field>
  202 + </v-flex>
  203 + </v-flex>
  204 + </v-layout>
  205 + </v-form>
  206 + </v-card>
  207 + </v-flex>
  208 + <v-flex xs12 sm12 md5></v-flex>
  209 + <v-flex xs12 sm12 md6>
  210 + <v-card flat>
  211 + <v-toolbar>
  212 + <h3>Allowances</h3>
  213 + </v-toolbar>
  214 + <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" :key="index">
  215 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  216 + <v-text-field
  217 + readonly
  218 + solo
  219 + label="Enter Allowances Label"
  220 + v-model="editedItem.allowancesName"
  221 + ></v-text-field>
  222 + </v-flex>
  223 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  224 + <v-text-field
  225 + readonly
  226 + solo
  227 + v-model="editedItem.allowancesValue"
  228 + label="Enter Allowances Value"
  229 + ></v-text-field>
  230 + </v-flex>
  231 + </v-layout>
  232 + </v-card>
  233 + </v-flex>
  234 + <v-flex xs12 sm12 md6>
  235 + <v-card flat>
  236 + <v-toolbar>
  237 + <h3>Deduction</h3>
  238 + </v-toolbar>
  239 + <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" :key="index">
  240 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  241 + <v-text-field
  242 + readonly
  243 + solo
  244 + label="Enter Deduction Label"
  245 + v-model="editedItem.deductionName"
  246 + ></v-text-field>
  247 + </v-flex>
  248 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  249 + <v-text-field
  250 + readonly
  251 + solo
  252 + label="Enter Deduction Value"
  253 + v-model="editedItem.deductionValue"
  254 + ></v-text-field>
  255 + </v-flex>
  256 + </v-layout>
  257 + <!-- <v-layout>
  258 + <v-flex xs4 class="pt-4 subheading">
  259 + <v-text-field
  260 + v-model="editedItem.salaryTemplate.deduction.deductionName"
  261 + readonly
  262 + ></v-text-field>
  263 + </v-flex>
  264 + <v-flex xs8 sm7 class="ml-3">
  265 + <v-flex xs8 sm7 class="ml-3">
  266 + <v-text-field
  267 + v-model="editedItem.salaryTemplate.deduction.deductionValue"
  268 + readonly
  269 + ></v-text-field>
  270 + </v-flex>
  271 + </v-flex>
  272 + </v-layout> -->
  273 + </v-card>
  274 + </v-flex>
  275 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  276 + <v-card>
  277 + <v-toolbar>
  278 + <h3>Total Salary Details</h3>
  279 + </v-toolbar>
  280 + <v-layout>
  281 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  282 + <v-text-field solo value="Gross Salary"></v-text-field>
  283 + </v-flex>
  284 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  285 + <v-flex xs8 sm7 class="ml-3">
  286 + <v-text-field
  287 + v-model="editedItem.salaryTemplate.grossSalary"
  288 + solo
  289 + readonly
  290 + ></v-text-field>
  291 + </v-flex>
  292 + </v-flex>
  293 + </v-layout>
  294 + <v-layout>
  295 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  296 + <v-text-field solo value="Total Deduction"></v-text-field>
  297 + </v-flex>
  298 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  299 + <v-flex xs8 sm7 class="ml-3">
  300 + <v-text-field
  301 + v-model="editedItem.salaryTemplate.totalDeduction"
  302 + solo
  303 + readonly
  304 + ></v-text-field>
  305 + </v-flex>
  306 + </v-flex>
  307 + </v-layout>
  308 + <v-layout>
  309 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  310 + <v-text-field solo value="Net Salary"></v-text-field>
  311 + </v-flex>
  312 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  313 + <v-flex xs8 sm7 class="ml-3">
  314 + <v-text-field
  315 + v-model="editedItem.salaryTemplate.netSalary"
  316 + solo
  317 + readonly
  318 + ></v-text-field>
  319 + </v-flex>
  320 + </v-flex>
  321 + </v-layout>
  322 + </v-card>
  323 + </v-flex>
  324 + </v-layout>
  325 + </v-container>
  326 + </v-flex>
  327 + </v-card>
  328 + </v-flex>
  329 + <v-flex xs12 sm12 md8 v-if="viewHourly">
  330 + <v-card flat>
  331 + <v-flex xs12 sm12>
  332 + <v-container fluid grid-list-md>
  333 + <v-layout wrap>
  334 + <v-flex xs12 sm12 md6>
  335 + <v-card flat>
  336 + <v-form ref="form" lazy-validation class="py-4">
  337 + <v-layout>
  338 + <v-flex xs4 class="pt-4 subheading">
  339 + <label class="right hidden-xs-only">Hourly Grades :</label>
  340 + </v-flex>
  341 + <v-flex xs8 sm7 class="ml-3">
  342 + <v-flex xs8 sm7 class="ml-3">
  343 + <v-text-field
  344 + solo
  345 + v-model="editedItem.hourlyTemplate.hourlyGrades"
  346 + readonly
  347 + ></v-text-field>
  348 + </v-flex>
  349 + </v-flex>
  350 + </v-layout>
  351 + <v-layout>
  352 + <v-flex xs4 class="pt-4 subheading">
  353 + <label class="right">Hourly Rate :</label>
  354 + </v-flex>
  355 + <v-flex xs8 sm7 class="ml-3">
  356 + <v-flex xs8 sm7 class="ml-3">
  357 + <v-text-field
  358 + solo
  359 + v-model="editedItem.hourlyTemplate.hourlyRate"
  360 + readonly
  361 + ></v-text-field>
  362 + </v-flex>
  363 + </v-flex>
  364 + </v-layout>
  365 + </v-form>
  366 + </v-card>
  367 + </v-flex>
  368 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  369 + <v-card>
  370 + <v-toolbar>
  371 + <h3>Total Salary Details</h3>
  372 + </v-toolbar>
  373 + <v-layout>
  374 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  375 + <v-text-field solo value="Gross Salary"></v-text-field>
  376 + </v-flex>
  377 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  378 + <v-flex xs8 sm7 class="ml-3">
  379 + <v-text-field
  380 + v-model="editedItem.hourlyTemplate.grossSalary"
  381 + solo
  382 + readonly
  383 + ></v-text-field>
  384 + </v-flex>
  385 + </v-flex>
  386 + </v-layout>
  387 + <v-layout>
  388 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  389 + <v-text-field solo value="Total Deduction"></v-text-field>
  390 + </v-flex>
  391 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  392 + <v-flex xs8 sm7 class="ml-3">
  393 + <v-text-field
  394 + v-model="editedItem.hourlyTemplate.totalDeduction"
  395 + solo
  396 + readonly
  397 + ></v-text-field>
  398 + </v-flex>
  399 + </v-flex>
  400 + </v-layout>
  401 + <v-layout>
  402 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  403 + <v-text-field solo value="Net Hourly Rate"></v-text-field>
  404 + </v-flex>
  405 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  406 + <v-flex xs8 sm7 class="ml-3">
  407 + <v-text-field
  408 + v-model="editedItem.hourlyTemplate.netSalary"
  409 + solo
  410 + readonly
  411 + ></v-text-field>
  412 + </v-flex>
  413 + </v-flex>
  414 + </v-layout>
  415 + </v-card>
  416 + </v-flex>
  417 + </v-layout>
  418 + </v-container>
  419 + </v-flex>
  420 + </v-card>
  421 + </v-flex>
  422 + </v-layout>
  423 + </v-card>
  424 + </v-dialog>
  425 +
  426 + <!-- ****** Edit Hourly Template ****** -->
  427 + <v-dialog v-model="editSalaryDialog" max-width="400px">
  428 + <v-card flat class="card-style pa-2" dark>
  429 + <v-layout>
  430 + <v-flex xs12>
  431 + <label class="title text-xs-center">Edit Manage Salary</label>
  432 + <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon>
  433 + </v-flex>
  434 + </v-layout>
  435 + <v-form ref="form">
  436 + <v-container fluid>
  437 + <v-flex xs12 sm12>
  438 + <v-layout>
  439 + <v-flex xs3 class="pt-4 subheading">
  440 + <label class="right">Salary:</label>
  441 + </v-flex>
  442 + <v-flex xs8 sm7 class="ml-3">
  443 + <v-select
  444 + :items="salary"
  445 + v-model="editedItem.salary"
  446 + placeholder="please fill this field"
  447 + @change="selectSalary()"
  448 + ></v-select>
  449 + </v-flex>
  450 + </v-layout>
  451 + </v-flex>
  452 + <v-flex xs12 sm12>
  453 + <v-layout>
  454 + <v-flex xs3 class="pt-4 subheading">
  455 + <label class="right">Template:</label>
  456 + </v-flex>
  457 + <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade">
  458 + <v-autocomplete
  459 + v-model="editedItem.salaryId"
  460 + :items="salaryData"
  461 + item-text="salaryGrades"
  462 + item-value="_id"
  463 + placeholder="please fill this field"
  464 + @change="selectGrade()"
  465 + required
  466 + ></v-autocomplete>
  467 + </v-flex>
  468 + <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades">
  469 + <v-autocomplete
  470 + v-model="editedItem.salaryId"
  471 + :items="hourlyData"
  472 + item-text="hourlyGrades"
  473 + item-value="_id"
  474 + placeholder="please fill this field"
  475 + @change="selectGrade()"
  476 + required
  477 + ></v-autocomplete>
  478 + </v-flex>
  479 + </v-layout>
  480 + </v-flex>
  481 + <v-layout>
  482 + <v-flex xs12>
  483 + <v-layout>
  484 + <v-spacer></v-spacer>
  485 + <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn>
  486 + <v-spacer></v-spacer>
  487 + </v-layout>
  488 + </v-flex>
  489 + </v-layout>
  490 + </v-container>
  491 + </v-form>
  492 + </v-card>
  493 + </v-dialog>
  494 + </v-container>
  495 +</template>
  496 +
  497 +<script>
  498 +import http from "@/Services/http.js";
  499 +import Util from "@/util";
  500 +import moment from "moment";
  501 +export default {
  502 + data: () => ({
  503 + search: "",
  504 + pagination: {
  505 + rowsPerPage: 10
  506 + },
  507 +
  508 + role: [v => !!v || "Role Name is required"],
  509 + getRoles: [],
  510 + teacherList: [],
  511 + roleList: [],
  512 + salaryData: [],
  513 + hourlyData: [],
  514 + salary: ["Monthly", "Hourly"],
  515 +
  516 + salaryItem: "",
  517 +
  518 + getReport: {
  519 + role: ""
  520 + },
  521 +
  522 + showTeacher: false,
  523 + editSalaryDialog: false,
  524 + profileSalaryDialog: false,
  525 + monthlyGrade: false,
  526 + hourlyGrades: false,
  527 + viewSalary: false,
  528 + viewHourly: false,
  529 +
  530 + editedItem: {
  531 + salaryTemplate: {
  532 + allowances: {
  533 +
  534 + },
  535 + deduction: {
  536 +
  537 + }
  538 + },
  539 + hourlyTemplate: {}
  540 + },
  541 +
  542 + // salaryGrades: {},
  543 + // salaryTemplate: {
  544 + // salaryGrades: ""
  545 + // },
  546 + // salaryTemplate :{
  547 + // allowances: {
  548 + // allowancesName: "",
  549 + // allowancesValue: ""
  550 + // },
  551 + // deduction: {
  552 + // deductionName: "",
  553 + // deductionValue: ""
  554 + // }
  555 + // },
  556 +
  557 + headers: [
  558 + {
  559 + text: "No",
  560 + align: "",
  561 + sortable: false,
  562 + value: "No"
  563 + },
  564 + {
  565 + text: "Profile Pic",
  566 + value: "profilePicUrl",
  567 + sortable: false,
  568 + align: "center"
  569 + },
  570 + { text: "Name", value: "name", sortable: false, align: "center" },
  571 + {
  572 + text: "Join Date",
  573 + value: "joinDate",
  574 + sortable: false,
  575 + align: "center"
  576 + },
  577 + { text: "Action", value: "", sortable: false, align: "center" }
  578 + ],
  579 + desserts: [],
  580 + }),
  581 +
  582 + methods: {
  583 + close() {
  584 + this.editHourDialog = false;
  585 + },
  586 + dates: function(date) {
  587 + return moment(date).format("MMMM DD, YYYY");
  588 + },
  589 + editItem(item) {
  590 + this.editedIndex = this.roleList.indexOf(item);
  591 + this.editedItem = Object.assign({}, item);
  592 + this.editSalaryDialog = true;
  593 + },
  594 + profile(item) {
  595 + this.editedIndex = this.roleList.indexOf(item);
  596 + this.editedItem = Object.assign({}, item);
  597 + this.profileSalaryDialog = true;
  598 + // console.log("item", item);
  599 + if(item.salaryTemplate) {
  600 + this.viewSalary = true;
  601 + this.viewHourly = false
  602 + } else {
  603 + this.viewHourly = true;
  604 + this.viewSalary = false
  605 + }
  606 + },
  607 + getRole() {
  608 + this.showLoader = true;
  609 + var token = this.$store.state.token;
  610 + http()
  611 + .get("/getRolesList", {
  612 + headers: { Authorization: "Bearer " + token }
  613 + })
  614 + .then(response => {
  615 + this.getRoles = response.data.data;
  616 + if (this.getRoles[2].role !== 3) {
  617 + this.getRoles = response.data.data;
  618 + console.log("roles", this.getRoles[2].role);
  619 + }
  620 + this.showLoader = false;
  621 + })
  622 + .catch(error => {
  623 + this.showLoader = false;
  624 + if (error.response.status === 401) {
  625 + this.$router.replace({ path: "/" });
  626 + this.$store.dispatch("setToken", null);
  627 + this.$store.dispatch("Id", null);
  628 + }
  629 + });
  630 + },
  631 +
  632 + getRoleInputs(role) {
  633 + // console.log("role", role);
  634 + if (role === 3) {
  635 + this.showTeacher = true;
  636 + this.getTeacherList();
  637 + }
  638 + },
  639 +
  640 + getTeacherList() {
  641 + this.showLoader = true;
  642 + var token = this.$store.state.token;
  643 + http()
  644 + .get("/getTeachersList", {
  645 + headers: { Authorization: "Bearer " + token }
  646 + })
  647 + .then(response => {
  648 + this.teacherList = response.data.data;
  649 + this.showTeacher = true;
  650 + this.showLoader = false;
  651 + })
  652 + .catch(error => {
  653 + this.showLoader = false;
  654 + if (error.response.status === 401) {
  655 + this.$router.replace({ path: "/" });
  656 + this.$store.dispatch("setToken", null);
  657 + this.$store.dispatch("Id", null);
  658 + }
  659 + });
  660 + },
  661 +
  662 + getUserDetailWithRoles() {
  663 + this.showLoader = true;
  664 + http()
  665 + .get(
  666 + "/getUserDetailWithRoles",
  667 + { params: { role: this.getReport.role } },
  668 + {
  669 + headers: { Authorization: "Bearer " + this.token }
  670 + }
  671 + )
  672 + .then(response => {
  673 + this.roleList = response.data.data;
  674 + this.showLoader = false;
  675 + })
  676 + .catch(err => {
  677 + this.showLoader = false;
  678 + });
  679 + },
  680 + getSalaryList() {
  681 + this.showLoader = true;
  682 + this.loadingSearch = true;
  683 + http()
  684 + .get("/getSalaryList", {
  685 + headers: { Authorization: "Bearer " + this.token }
  686 + })
  687 + .then(response => {
  688 + this.salaryData = response.data.data;
  689 + this.showLoader = false;
  690 + this.loadingSearch = false;
  691 + })
  692 + .catch(error => {
  693 + // console.log("err====>", err);
  694 + this.showLoader = false;
  695 + this.loadingSearch = false;
  696 + this.snackbar = true;
  697 + this.text = error.response.data.message;
  698 + if (error.response.status === 401) {
  699 + this.$router.replace({ path: "/" });
  700 + this.$store.dispatch("setToken", null);
  701 + this.$store.dispatch("Id", null);
  702 + }
  703 + });
  704 + },
  705 + getHourlyList() {
  706 + this.showLoader = true;
  707 + this.loadingSearch = true;
  708 + http()
  709 + .get("/getHourlyList", {
  710 + headers: { Authorization: "Bearer " + this.token }
  711 + })
  712 + .then(response => {
  713 + this.hourlyData = response.data.data;
  714 + this.showLoader = false;
  715 + this.loadingSearch = false;
  716 + })
  717 + .catch(error => {
  718 + // console.log("err====>", err);
  719 + this.showLoader = false;
  720 + this.loadingSearch = false;
  721 + this.snackbar = true;
  722 + this.text = error.response.data.message;
  723 + if (error.response.status === 401) {
  724 + this.$router.replace({ path: "/" });
  725 + this.$store.dispatch("setToken", null);
  726 + this.$store.dispatch("Id", null);
  727 + }
  728 + });
  729 + },
  730 + editItem(item) {
  731 + this.editedIndex = this.salaryData.indexOf(item);
  732 + this.editedIndex = this.hourlyData.indexOf(item);
  733 + this.editedItem = Object.assign({}, item);
  734 + this.editedItem.date =
  735 + this.editedItem.date != undefined
  736 + ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
  737 + : (this.editedItem.date = "");
  738 + this.editSalaryDialog = true;
  739 + },
  740 + selectSalary() {
  741 + if (this.editedItem.salary === "Monthly") {
  742 + this.monthlyGrade = true;
  743 + this.hourlyGrades = false;
  744 + } else {
  745 + this.monthlyGrade = false;
  746 + this.hourlyGrades = true;
  747 + }
  748 + },
  749 + selectGrade() {
  750 + console.log("this.editedItem", this.editedItem);
  751 + },
  752 + selectView() {
  753 + if (this.editedItem.view.png === "Monthly") {
  754 + this.viewSalary = true;
  755 + this.viewHourly = false;
  756 + } else {
  757 + this.viewSalary = false;
  758 + this.viewHourly = true;
  759 + }
  760 + },
  761 +
  762 + save() {
  763 + var updateSalary = {
  764 + role: this.editedItem.role,
  765 + userId: this.editedItem._id,
  766 + templateName: this.editedItem.salary,
  767 + templateId: this.editedItem.salaryId
  768 + };
  769 + http()
  770 + .put("/updateUserSalary", updateSalary, {
  771 + headers: {
  772 + Authorization: "Bearer " + this.token
  773 + }
  774 + })
  775 + .then(response => {
  776 + this.getUserDetailWithRoles();
  777 + this.close();
  778 + this.snackbar = true;
  779 + this.text = response.data.message;
  780 + this.color = "green";
  781 + this.editSalaryDialog = false;
  782 + })
  783 + .catch(error => {
  784 + console.log("error", error);
  785 + this.snackbar = true;
  786 + this.color = "red";
  787 + });
  788 + },
  789 +
  790 + deleteItem(item) {
  791 + // let deleteGrade = {
  792 + // hourlyId: item._id
  793 + // };
  794 + // http()
  795 + // .delete(
  796 + // "/deleteHourly",
  797 + // confirm("Are you sure you want to delete this?") && {
  798 + // params: deleteGrade
  799 + // },
  800 + // {
  801 + // headers: {
  802 + // Authorization: "Bearer " + this.token
  803 + // }
  804 + // }
  805 + // )
  806 + // .then(response => {
  807 + // this.snackbar = true;
  808 + // // this.text = "Successfully Delete Salary ";
  809 + // this.text = response.data.message;
  810 + // this.color = "green";
  811 + // this.getUserDetailWithRoles();
  812 + // })
  813 + // .catch(error => {
  814 + // console.log("error", error);
  815 + // this.snackbar = true;
  816 + // this.text = error.response.data.message;
  817 + // this.color = "red";
  818 + // });
  819 + }
  820 +
  821 + // selectAllowances() {
  822 + // this.salaryTypeData.push({
  823 + // allowancesValue: (this.salaryType.allowancesValue = "")
  824 + // });
  825 + // // console.log("this.salaryTypeData", this.salaryTypeData);
  826 + // var totalAllowances = "";
  827 + // this.salaryTypeData.forEach(allowancesValue_ => {
  828 + // if (allowancesValue_.allowancesValue != "") {
  829 + // // console.log("allowances", allowancesValue_.allowancesValue);
  830 + // totalAllowances =
  831 + // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  832 + // }
  833 + // this.grossSalary =
  834 + // totalAllowances + Number(this.salaryType.basicSalary);
  835 + // });
  836 + // },
  837 + // allowancesAdd() {
  838 + // this.editedItem.allowances.push({
  839 + // allowancesValue: (this.salaryType.allowancesValue = "")
  840 + // });
  841 + // var totalAllowances = "";
  842 + // this.editedItem.allowances.forEach(allowancesValue_ => {
  843 + // if (allowancesValue_.allowancesValue != "") {
  844 + // // console.log("allowances", allowancesValue_.allowancesValue);
  845 + // totalAllowances =
  846 + // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  847 + // console.log("totalAllowances", totalAllowances);
  848 + // }
  849 + // this.editedItem.grossSalary =
  850 + // totalAllowances + Number(this.editedItem.basicSalary);
  851 + // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
  852 + // });
  853 + // },
  854 + // selectDeduction() {
  855 + // this.salaryTypeDeductionData.push({
  856 + // deductionValue: (this.salaryType.deductionValue = "")
  857 + // });
  858 + // var totalDeductions = "";
  859 + // this.salaryTypeDeductionData.forEach(deductionValue_ => {
  860 + // if (deductionValue_.deductionValue != "") {
  861 + // // console.log("deduction", deductionValue_.deductionValue);
  862 + // totalDeductions =
  863 + // Number(totalDeductions) + Number(deductionValue_.deductionValue);
  864 + // }
  865 + // });
  866 + // },
  867 + // deductionAdd() {
  868 + // this.editedItem.deduction.push({
  869 + // deductionValue: (this.salaryType.deductionValue = "")
  870 + // });
  871 + // var totalDeductions = "";
  872 + // this.editedItem.deduction.forEach(deductionValue_ => {
  873 + // if (deductionValue_.deductionValue != "") {
  874 + // // console.log("deduction", deductionValue_.deductionValue);
  875 + // totalDeductions =
  876 + // Number(totalDeductions) + Number(deductionValue_.deductionValue);
  877 + // console.log("this.totalDeductions", totalDeductions);
  878 + // }
  879 + // // this.editedItem.totalDeduction = totalDeductions;
  880 + // // console.log("this.totalDeduction", this.editedItem.totalDeduction);
  881 + // });
  882 + // },
  883 + // deleteSelectAllowances: function(index) {
  884 + // this.salaryTypeData.splice(index, 1);
  885 + // },
  886 + // deleteallowancesAdd: function(index) {
  887 + // this.editedItem.allowances.splice(index, 1);
  888 + // },
  889 + // deleteSelectDeduction: function(index) {
  890 + // this.salaryTypeDeductionData.splice(index, 1);
  891 + // },
  892 + // deletedeductionAdd: function(index) {
  893 + // this.editedItem.deduction.splice(index, 1);
  894 + // },
  895 + // clear() {
  896 + // this.$refs.form.reset();
  897 + // this.disable = false;
  898 + // }
  899 + },
  900 +
  901 + mounted() {
  902 + this.token = this.$store.state.token;
  903 + this.getRole();
  904 + this.getSalaryList();
  905 + this.getHourlyList();
  906 + }
  907 +};
  908 +</script>
0 909 \ No newline at end of file
... ...
src/pages/Payroll/salaryTemplate.vue
Diff comments   View file @7fea6db
... ... @@ -0,0 +1,1158 @@
  1 +<template>
  2 + <v-container fluid class="body-color" style="box-sizing: border-box;">
  3 + <!-- ****** EDIT SALARY ****** -->
  4 + <v-dialog v-model="editSalaryDialog">
  5 + <v-card flat class="text-xs-center white--text">
  6 + <v-layout>
  7 + <v-flex xs12 class="card-style pa-2">
  8 + <label class="title text-xs-center">Edit Salary</label>
  9 + <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
  10 + </v-flex>
  11 + </v-layout>
  12 +
  13 + <v-flex xs12 sm12>
  14 + <v-container fluid grid-list-md>
  15 + <v-layout wrap>
  16 + <v-flex xs12 sm12 md6>
  17 + <v-card flat>
  18 + <v-toolbar dark class="card-styles" flat>
  19 + <v-spacer></v-spacer>
  20 + <h3>Salary Template</h3>
  21 + <v-spacer></v-spacer>
  22 + </v-toolbar>
  23 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  24 + <v-layout>
  25 + <v-flex xs4 class="pt-4 subheading">
  26 + <label class="right hidden-xs-only">Salary Grades :</label>
  27 + </v-flex>
  28 + <v-flex xs8 sm7 class="ml-3">
  29 + <v-flex xs8 sm7 class="ml-3">
  30 + <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field>
  31 + </v-flex>
  32 + </v-flex>
  33 + </v-layout>
  34 + <v-layout>
  35 + <v-flex xs4 class="pt-4 subheading">
  36 + <label class="right">Basic Salary :</label>
  37 + </v-flex>
  38 + <v-flex xs8 sm7 class="ml-3">
  39 + <v-flex xs8 sm7 class="ml-3">
  40 + <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field>
  41 + </v-flex>
  42 + </v-flex>
  43 + </v-layout>
  44 + <v-layout>
  45 + <v-flex xs4 class="pt-4 subheading">
  46 + <label class="right">Overtime Rate (Per Hour) :</label>
  47 + </v-flex>
  48 + <v-flex xs8 sm7 class="ml-3">
  49 + <v-flex xs8 sm7 class="ml-3">
  50 + <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field>
  51 + </v-flex>
  52 + </v-flex>
  53 + </v-layout>
  54 + </v-form>
  55 + </v-card>
  56 + </v-flex>
  57 + <!-- <v-flex xs12 sm12 md5></v-flex> -->
  58 + <v-flex xs12 sm12 md6>
  59 + <v-card flat>
  60 + <v-toolbar dark class="card-styles" flat>
  61 + <v-spacer></v-spacer>
  62 + <h3>Allowances</h3>
  63 + <v-spacer></v-spacer>
  64 + </v-toolbar>
  65 + <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
  66 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  67 + <v-text-field
  68 + solo
  69 + label="Enter Allowances Label"
  70 + v-model="editedItem.allowancesName"
  71 + ></v-text-field>
  72 + </v-flex>
  73 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  74 + <v-text-field
  75 + solo
  76 + v-model="editedItem.allowancesValue"
  77 + label="Enter Allowances Value"
  78 + v-on:keyup="addAllowancesValue"
  79 + ></v-text-field>
  80 + </v-flex>
  81 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  82 + <v-btn
  83 + color="white"
  84 + round
  85 + class="right mt-3"
  86 + @click="deleteallowancesAdd(index)"
  87 + v-if="index != 0"
  88 + >
  89 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  90 + </v-btn>
  91 + <v-btn color="white" round class="right mt-3" @click="allowancesAdd">
  92 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  93 + </v-btn>
  94 + </v-flex>
  95 + </v-layout>
  96 + <!-- <v-flex xs12 sm12 md6> -->
  97 + <v-card flat>
  98 + <v-toolbar dark class="card-styles" flat>
  99 + <v-spacer></v-spacer>
  100 + <h3>Deduction</h3>
  101 + <v-spacer></v-spacer>
  102 + </v-toolbar>
  103 + <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
  104 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  105 + <v-text-field
  106 + solo
  107 + label="Enter Deduction Label"
  108 + v-model="editedItem.deductionName"
  109 + ></v-text-field>
  110 + </v-flex>
  111 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  112 + <v-text-field
  113 + solo
  114 + label="Enter Deduction Value"
  115 + v-model="editedItem.deductionValue"
  116 + v-on:keyup="addDeductionValue"
  117 + ></v-text-field>
  118 + </v-flex>
  119 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  120 + <v-btn
  121 + color="white"
  122 + round
  123 + class="right mt-3"
  124 + @click="deletedeductionAdd(index)"
  125 + v-if="index != 0"
  126 + >
  127 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  128 + </v-btn>
  129 + <v-btn color="white" round class="right mt-3" @click="deductionAdd">
  130 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  131 + </v-btn>
  132 + </v-flex>
  133 + </v-layout>
  134 + </v-card>
  135 + <!-- </v-flex> -->
  136 + </v-card>
  137 + </v-flex>
  138 + <!-- <v-flex xs12 sm12 md6>
  139 + <v-card flat>
  140 + <v-toolbar dark class="card-styles" flat>
  141 + <v-spacer></v-spacer>
  142 + <h3>Deduction</h3>
  143 + <v-spacer></v-spacer>
  144 + </v-toolbar>
  145 + <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
  146 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  147 + <v-text-field
  148 + solo
  149 + label="Enter Deduction Label"
  150 + v-model="editedItem.deductionName"
  151 + ></v-text-field>
  152 + </v-flex>
  153 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  154 + <v-text-field
  155 + solo
  156 + label="Enter Deduction Value"
  157 + v-model="editedItem.deductionValue"
  158 + v-on:keyup="addDeductionValue"
  159 + ></v-text-field>
  160 + </v-flex>
  161 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  162 + <v-btn
  163 + color="white"
  164 + round
  165 + class="right mt-3"
  166 + @click="deletedeductionAdd(index)"
  167 + v-if="index != 0"
  168 + >
  169 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  170 + </v-btn>
  171 + <v-btn color="white" round class="right mt-3" @click="deductionAdd">
  172 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  173 + </v-btn>
  174 + </v-flex>
  175 + </v-layout>
  176 + </v-card>
  177 + </v-flex>-->
  178 + <!-- <v-flex xs12 sm12 md4></v-flex> -->
  179 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  180 + <v-card flat>
  181 + <v-toolbar dark class="card-styles" flat>
  182 + <v-spacer></v-spacer>
  183 + <h3>Total Salary Details</h3>
  184 + <v-spacer></v-spacer>
  185 + </v-toolbar>
  186 + <v-layout>
  187 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  188 + <v-text-field solo value="Gross Salary"></v-text-field>
  189 + </v-flex>
  190 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  191 + <v-flex xs8 sm7 class="ml-3">
  192 + <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field>
  193 + </v-flex>
  194 + </v-flex>
  195 + </v-layout>
  196 + <v-layout>
  197 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  198 + <v-text-field solo value="Total Deduction"></v-text-field>
  199 + </v-flex>
  200 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  201 + <v-flex xs8 sm7 class="ml-3">
  202 + <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field>
  203 + </v-flex>
  204 + </v-flex>
  205 + </v-layout>
  206 + <v-layout>
  207 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  208 + <v-text-field solo value="Net Salary"></v-text-field>
  209 + </v-flex>
  210 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  211 + <v-flex xs8 sm7 class="ml-3">
  212 + <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field>
  213 + </v-flex>
  214 + </v-flex>
  215 + </v-layout>
  216 + </v-card>
  217 + <v-layout>
  218 + <v-flex xs12>
  219 + <v-card-actions>
  220 + <v-spacer class="hidden-xs-only"></v-spacer>
  221 + <v-btn
  222 + color="open-dialog-button"
  223 + dark
  224 + class="right mt-3"
  225 + @click="save"
  226 + >Update Salary Template</v-btn>
  227 + </v-card-actions>
  228 + </v-flex>
  229 + </v-layout>
  230 + </v-flex>
  231 + </v-layout>
  232 + </v-container>
  233 + </v-flex>
  234 + </v-card>
  235 + </v-dialog>
  236 +
  237 + <!-- ****** PROFILE VIEW ****** -->
  238 +
  239 + <v-dialog v-model="profileSalaryDialog">
  240 + <v-card flat class="text-xs-center white--text">
  241 + <v-layout>
  242 + <v-flex xs12 class="card-style pa-2">
  243 + <label class="title text-xs-center">View Salary</label>
  244 + <v-icon
  245 + size="24"
  246 + color="white"
  247 + class="right"
  248 + @click="profileSalaryDialog = false"
  249 + >cancel</v-icon>
  250 + </v-flex>
  251 + </v-layout>
  252 +
  253 + <v-flex xs12 sm12>
  254 + <v-container fluid grid-list-md>
  255 + <v-layout wrap>
  256 + <v-flex xs12 sm12 md6>
  257 + <v-card flat>
  258 + <v-toolbar dark class="card-styles" flat>
  259 + <v-spacer></v-spacer>
  260 + <h3>Salary Template</h3>
  261 + <v-spacer></v-spacer>
  262 + </v-toolbar>
  263 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  264 + <v-layout>
  265 + <v-flex xs4 class="pt-4 subheading">
  266 + <label class="right hidden-xs-only">Salary Grades :</label>
  267 + </v-flex>
  268 + <v-flex xs8 sm7 class="ml-3">
  269 + <v-flex xs8 sm7 class="ml-3">
  270 + <v-text-field
  271 + :rules="salaryRules"
  272 + v-model="editedItem.salaryGrades"
  273 + readonly
  274 + ></v-text-field>
  275 + </v-flex>
  276 + </v-flex>
  277 + </v-layout>
  278 + <v-layout>
  279 + <v-flex xs4 class="pt-4 subheading">
  280 + <label class="right">Basic Salary :</label>
  281 + </v-flex>
  282 + <v-flex xs8 sm7 class="ml-3">
  283 + <v-flex xs8 sm7 class="ml-3">
  284 + <v-text-field
  285 + :rules="basicRules"
  286 + v-model="editedItem.basicSalary"
  287 + readonly
  288 + ></v-text-field>
  289 + </v-flex>
  290 + </v-flex>
  291 + </v-layout>
  292 + <v-layout>
  293 + <v-flex xs4 class="pt-4 subheading">
  294 + <label class="right">Overtime Rate (Per Hour) :</label>
  295 + </v-flex>
  296 + <v-flex xs8 sm7 class="ml-3">
  297 + <v-flex xs8 sm7 class="ml-3">
  298 + <v-text-field
  299 + :rules="overtimeRules"
  300 + v-model="editedItem.overtimeRate"
  301 + readonly
  302 + ></v-text-field>
  303 + </v-flex>
  304 + </v-flex>
  305 + </v-layout>
  306 + </v-form>
  307 + </v-card>
  308 + </v-flex>
  309 + <!-- <v-flex xs12 sm12 md5></v-flex> -->
  310 + <v-flex xs12 sm12 md6>
  311 + <v-card flat>
  312 + <v-toolbar dark class="card-styles" flat>
  313 + <v-spacer></v-spacer>
  314 + <h3>Allowances</h3>
  315 + <v-spacer></v-spacer>
  316 + </v-toolbar>
  317 + <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
  318 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  319 + <v-text-field
  320 + solo
  321 + label="Enter Allowances Label"
  322 + v-model="editedItem.allowancesName"
  323 + ></v-text-field>
  324 + </v-flex>
  325 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  326 + <v-text-field
  327 + solo
  328 + v-model="editedItem.allowancesValue"
  329 + label="Enter Allowances Value"
  330 + ></v-text-field>
  331 + </v-flex>
  332 + </v-layout>
  333 + <!-- <v-flex xs12 sm12 md6> -->
  334 + <v-card flat>
  335 + <v-toolbar dark class="card-styles" flat>
  336 + <v-spacer></v-spacer>
  337 + <h3>Deduction</h3>
  338 + <v-spacer></v-spacer>
  339 + </v-toolbar>
  340 + <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
  341 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  342 + <v-text-field
  343 + solo
  344 + label="Enter Deduction Label"
  345 + v-model="editedItem.deductionName"
  346 + ></v-text-field>
  347 + </v-flex>
  348 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  349 + <v-text-field
  350 + solo
  351 + label="Enter Deduction Value"
  352 + v-model="editedItem.deductionValue"
  353 + ></v-text-field>
  354 + </v-flex>
  355 + </v-layout>
  356 + </v-card>
  357 + <!-- </v-flex> -->
  358 + </v-card>
  359 + </v-flex>
  360 + <!-- <v-flex xs12 sm12 md6>
  361 + <v-card flat>
  362 + <v-toolbar dark class="card-styles" flat>
  363 + <v-spacer></v-spacer>
  364 + <h3>Deduction</h3>
  365 + <v-spacer></v-spacer>
  366 + </v-toolbar>
  367 + <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
  368 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  369 + <v-text-field
  370 + solo
  371 + label="Enter Deduction Label"
  372 + v-model="editedItem.deductionName"
  373 + ></v-text-field>
  374 + </v-flex>
  375 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  376 + <v-text-field
  377 + solo
  378 + label="Enter Deduction Value"
  379 + v-model="editedItem.deductionValue"
  380 + ></v-text-field>
  381 + </v-flex>
  382 + </v-layout>
  383 + </v-card>
  384 + </v-flex>-->
  385 + <!-- <v-flex xs12 sm12 md4></v-flex> -->
  386 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  387 + <v-card flat>
  388 + <v-toolbar dark class="card-styles" flat>
  389 + <v-spacer></v-spacer>
  390 + <h3>Total Salary Details</h3>
  391 + <v-spacer></v-spacer>
  392 + </v-toolbar>
  393 + <v-layout>
  394 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  395 + <v-text-field solo value="Gross Salary"></v-text-field>
  396 + </v-flex>
  397 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  398 + <v-flex xs8 sm7 class="ml-3">
  399 + <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field>
  400 + </v-flex>
  401 + </v-flex>
  402 + </v-layout>
  403 + <v-layout>
  404 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  405 + <v-text-field solo value="Total Deduction"></v-text-field>
  406 + </v-flex>
  407 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  408 + <v-flex xs8 sm7 class="ml-3">
  409 + <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field>
  410 + </v-flex>
  411 + </v-flex>
  412 + </v-layout>
  413 + <v-layout>
  414 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  415 + <v-text-field solo value="Net Salary"></v-text-field>
  416 + </v-flex>
  417 + <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
  418 + <v-flex xs8 sm7 class="ml-3">
  419 + <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field>
  420 + </v-flex>
  421 + </v-flex>
  422 + </v-layout>
  423 + </v-card>
  424 + </v-flex>
  425 + </v-layout>
  426 + </v-container>
  427 + </v-flex>
  428 + </v-card>
  429 + </v-dialog>
  430 + <!-- ****** EXAM TABLE****** -->
  431 +
  432 + <v-toolbar color="transparent" flat>
  433 + <v-btn
  434 + fab
  435 + dark
  436 + class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
  437 + small
  438 + @click="addSalaryDialog = true"
  439 + >
  440 + <v-icon dark>add</v-icon>
  441 + </v-btn>
  442 + <v-btn
  443 + round
  444 + class="open-dialog-button hidden-sm-only hidden-xs-only"
  445 + dark
  446 + @click="addSalaryDialog = true"
  447 + >
  448 + <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary
  449 + </v-btn>
  450 + <v-spacer></v-spacer>
  451 + <v-card-title class="body-1" v-show="show">
  452 + <v-btn icon large flat @click="displaySearch">
  453 + <v-avatar size="27">
  454 + <img src="/static/icon/search.png" alt="icon" />
  455 + </v-avatar>
  456 + </v-btn>
  457 + </v-card-title>
  458 + <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
  459 + <v-layout>
  460 + <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
  461 + <v-icon @click="closeSearch" color="error">close</v-icon>
  462 + </v-layout>
  463 + </v-flex>
  464 + </v-toolbar>
  465 + <v-data-table
  466 + :headers="headers"
  467 + :items="salaryData"
  468 + :pagination.sync="pagination"
  469 + :search="search"
  470 + >
  471 + <template slot="items" slot-scope="props">
  472 + <tr class="tr">
  473 + <td class="td td-row">{{ props.index + 1}}</td>
  474 + <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td>
  475 + <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td>
  476 + <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td>
  477 + <td class="td td-row text-xs-center">
  478 + <span>
  479 + <v-tooltip top>
  480 + <img
  481 + slot="activator"
  482 + style="cursor:pointer; width:25px; height:25px; "
  483 + class="mr-3"
  484 + @click="profile(props.item)"
  485 + src="/static/icon/view.png"
  486 + />
  487 + <span>View</span>
  488 + </v-tooltip>
  489 + <v-tooltip top>
  490 + <img
  491 + slot="activator"
  492 + style="cursor:pointer; width:20px; height:18px; "
  493 + class="mr-3"
  494 + @click="editItem(props.item)"
  495 + src="/static/icon/edit.png"
  496 + />
  497 + <span>Edit</span>
  498 + </v-tooltip>
  499 + <v-tooltip top>
  500 + <img
  501 + slot="activator"
  502 + style="cursor:pointer; width:20px; height:20px; "
  503 + class="mr-3"
  504 + @click="deleteItem(props.item)"
  505 + src="/static/icon/delete.png"
  506 + />
  507 + <span>Delete</span>
  508 + </v-tooltip>
  509 + </span>
  510 + </td>
  511 + </tr>
  512 + </template>
  513 + <v-alert
  514 + slot="no-results"
  515 + :value="true"
  516 + color="error"
  517 + icon="warning"
  518 + >Your search for "{{ search }}" found no results.</v-alert>
  519 + </v-data-table>
  520 +
  521 + <!-- ****** ADD SALARY ****** -->
  522 + <v-dialog v-model="addSalaryDialog">
  523 + <v-card flat class="text-xs-center white--text">
  524 + <v-layout>
  525 + <v-flex xs12 class="card-style pa-2">
  526 + <label class="title text-xs-center">Add Salary</label>
  527 + <v-icon size="24" color="white" class="right" @click="addSalaryDialog = false">cancel</v-icon>
  528 + </v-flex>
  529 + </v-layout>
  530 +
  531 + <v-flex xs12 sm12>
  532 + <v-container fluid grid-list-md>
  533 + <v-layout wrap>
  534 + <v-flex xs12 sm12 md6>
  535 + <v-card flat>
  536 + <v-toolbar dark class="card-styles" flat>
  537 + <v-spacer></v-spacer>
  538 + <h3>Salary Template</h3>
  539 + <v-spacer></v-spacer>
  540 + </v-toolbar>
  541 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  542 + <v-layout>
  543 + <v-flex xs4 class="pt-4 subheading">
  544 + <label class="right hidden-xs-only">Salary Grades :</label>
  545 + </v-flex>
  546 + <v-flex xs8 sm7 class="ml-3">
  547 + <v-flex xs8 sm7 class="ml-3">
  548 + <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field>
  549 + </v-flex>
  550 + </v-flex>
  551 + </v-layout>
  552 + <v-layout>
  553 + <v-flex xs4 class="pt-4 subheading">
  554 + <label class="right">Basic Salary :</label>
  555 + </v-flex>
  556 + <v-flex xs8 sm7 class="ml-3">
  557 + <v-flex xs8 sm7 class="ml-3">
  558 + <v-text-field
  559 + :rules="basicRules"
  560 + v-on:keyup="addSalary"
  561 + v-model="salaryType.basicSalary"
  562 + ></v-text-field>
  563 + </v-flex>
  564 + </v-flex>
  565 + </v-layout>
  566 + <v-layout>
  567 + <v-flex xs4 class="pt-4 subheading">
  568 + <label class="right">Overtime Rate (Per Hour) :</label>
  569 + </v-flex>
  570 + <v-flex xs8 sm7 class="ml-3">
  571 + <v-flex xs8 sm7 class="ml-3">
  572 + <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field>
  573 + </v-flex>
  574 + </v-flex>
  575 + </v-layout>
  576 + </v-form>
  577 + </v-card>
  578 + </v-flex>
  579 + <!-- <v-flex xs12 sm12 md5></v-flex> -->
  580 + <v-flex xs12 sm12 md6>
  581 + <v-card flat>
  582 + <v-toolbar dark class="card-styles" flat>
  583 + <v-spacer></v-spacer>
  584 + <h3>Allowances</h3>
  585 + <v-spacer></v-spacer>
  586 + </v-toolbar>
  587 + <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index">
  588 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  589 + <v-text-field
  590 + solo
  591 + label="Enter Allowances Label"
  592 + v-model="salaryType.allowancesName"
  593 + ></v-text-field>
  594 + </v-flex>
  595 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  596 + <v-text-field
  597 + solo
  598 + v-model="salaryType.allowancesValue"
  599 + label="Enter Allowances Value"
  600 + v-on:keyup="addAllowances"
  601 + ></v-text-field>
  602 + </v-flex>
  603 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  604 + <v-btn
  605 + color="white"
  606 + round
  607 + class="right mt-3"
  608 + @click="deleteSelectAllowances(index)"
  609 + v-if="index != 0"
  610 + >
  611 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  612 + </v-btn>
  613 + <v-btn color="white" round class="right mt-3" @click="selectAllowances">
  614 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  615 + </v-btn>
  616 + </v-flex>
  617 + </v-layout>
  618 + <!-- <v-flex xs12 sm12 md6> -->
  619 + <v-card flat>
  620 + <v-toolbar dark class="card-styles" flat>
  621 + <v-spacer></v-spacer>
  622 + <h3>Deduction</h3>
  623 + <v-spacer></v-spacer>
  624 + </v-toolbar>
  625 + <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
  626 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  627 + <v-text-field
  628 + solo
  629 + label="Enter Deduction Label"
  630 + v-model="salaryType.deductionName"
  631 + ></v-text-field>
  632 + </v-flex>
  633 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  634 + <v-text-field
  635 + solo
  636 + label="Enter Deduction Value"
  637 + v-model="salaryType.deductionValue"
  638 + v-on:keyup="addDeduction"
  639 + ></v-text-field>
  640 + </v-flex>
  641 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  642 + <v-btn
  643 + color="white"
  644 + round
  645 + class="right mt-3"
  646 + @click="deleteSelectDeduction(index)"
  647 + v-if="index != 0"
  648 + >
  649 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  650 + </v-btn>
  651 + <v-btn color="white" round class="right mt-3" @click="selectDeduction">
  652 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  653 + </v-btn>
  654 + </v-flex>
  655 + </v-layout>
  656 + </v-card>
  657 + <!-- </v-flex> -->
  658 + </v-card>
  659 + </v-flex>
  660 + <!-- <v-flex xs12 sm12 md6>
  661 + <v-card flat>
  662 + <v-toolbar dark class="card-styles" flat>
  663 + <v-spacer></v-spacer>
  664 + <h3>Deduction</h3>
  665 + <v-spacer></v-spacer>
  666 + </v-toolbar>
  667 + <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
  668 + <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
  669 + <v-text-field
  670 + solo
  671 + label="Enter Deduction Label"
  672 + v-model="salaryType.deductionName"
  673 + ></v-text-field>
  674 + </v-flex>
  675 + <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
  676 + <v-text-field
  677 + solo
  678 + label="Enter Deduction Value"
  679 + v-model="salaryType.deductionValue"
  680 + v-on:keyup="addDeduction"
  681 + ></v-text-field>
  682 + </v-flex>
  683 + <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
  684 + <v-btn
  685 + color="white"
  686 + round
  687 + class="right mt-3"
  688 + @click="deleteSelectDeduction(index)"
  689 + v-if="index != 0"
  690 + >
  691 + <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
  692 + </v-btn>
  693 + <v-btn color="white" round class="right mt-3" @click="selectDeduction">
  694 + <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
  695 + </v-btn>
  696 + </v-flex>
  697 + </v-layout>
  698 + </v-card>
  699 + </v-flex>-->
  700 + <!-- <v-flex xs12 sm12 md4></v-flex> -->
  701 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  702 + <v-card flat>
  703 + <v-toolbar dark class="card-styles" flat>
  704 + <v-spacer></v-spacer>
  705 + <h3>Total Salary Details</h3>
  706 + <v-spacer></v-spacer>
  707 + </v-toolbar>
  708 + <v-layout>
  709 + <v-flex xs4 class="pt-4 subheading">
  710 + <v-text-field solo value="Gross Salary"></v-text-field>
  711 + </v-flex>
  712 + <v-flex xs8 sm7 class="ml-3">
  713 + <v-flex xs8 sm7 class="ml-3">
  714 + <v-text-field v-model="grossSalary" box readonly></v-text-field>
  715 + </v-flex>
  716 + </v-flex>
  717 + </v-layout>
  718 + <v-layout>
  719 + <v-flex xs4 class="pt-4 subheading">
  720 + <v-text-field solo value="Total Deduction"></v-text-field>
  721 + </v-flex>
  722 + <v-flex xs8 sm7 class="ml-3">
  723 + <v-flex xs8 sm7 class="ml-3">
  724 + <v-text-field v-model="totalDeduction" box readonly></v-text-field>
  725 + </v-flex>
  726 + </v-flex>
  727 + </v-layout>
  728 + <v-layout>
  729 + <v-flex xs4 class="pt-4 subheading">
  730 + <v-text-field solo value="Net Salary"></v-text-field>
  731 + </v-flex>
  732 + <v-flex xs8 sm7 class="ml-3">
  733 + <v-flex xs8 sm7 class="ml-3">
  734 + <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field>
  735 + </v-flex>
  736 + </v-flex>
  737 + </v-layout>
  738 + </v-card>
  739 + <v-layout>
  740 + <v-flex xs12>
  741 + <v-card-actions>
  742 + <v-spacer class="hidden-xs-only"></v-spacer>
  743 + <v-btn
  744 + color="open-dialog-button"
  745 + dark
  746 + class="right mt-3"
  747 + @click="submit"
  748 + >Add Salary Template</v-btn>
  749 + </v-card-actions>
  750 + </v-flex>
  751 + </v-layout>
  752 + </v-flex>
  753 + </v-layout>
  754 + </v-container>
  755 + </v-flex>
  756 + </v-card>
  757 + </v-dialog>
  758 + <v-snackbar
  759 + :timeout="timeout"
  760 + :top="y === 'top'"
  761 + :right="x === 'right'"
  762 + :vertical="mode === 'vertical'"
  763 + v-model="snackbar"
  764 + :color="color"
  765 + >{{ text }}</v-snackbar>
  766 + <div class="loader" v-if="showLoader">
  767 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  768 + </div>
  769 + </v-container>
  770 +</template>
  771 +
  772 +<script>
  773 +import http from "@/Services/http.js";
  774 +import moment from "moment";
  775 +
  776 +export default {
  777 + data: () => ({
  778 + snackbar: false,
  779 + date: null,
  780 + color: "",
  781 + y: "top",
  782 + x: "right",
  783 + mode: "",
  784 + timeout: 10000,
  785 + text: "",
  786 + show: true,
  787 + showSearch: false,
  788 + addSalaryDialog: false,
  789 + loading: false,
  790 + loadingSearch: false,
  791 + search: "",
  792 + showLoader: false,
  793 + editSalaryDialog: false,
  794 + profileSalaryDialog: false,
  795 + valid: true,
  796 + disabled: true,
  797 + showAllowances: false,
  798 + showDeduction: false,
  799 + pagination: {
  800 + rowsPerPage: 10
  801 + },
  802 + salaryTypes: [],
  803 + salaryTypeData: [
  804 + {
  805 + allowancesValue: "",
  806 + allowancesName: "House Rent",
  807 + totalAllowances: 0
  808 + }
  809 + ],
  810 + salaryTypeDeductionData: [
  811 + {
  812 + deductionValue: "",
  813 + deductionName: "Provident fund",
  814 + totalDeductions: 0
  815 + }
  816 + ],
  817 + grossSalary: 0,
  818 + totalDeduction: 0,
  819 + salaryType: {
  820 + netSalary: 0,
  821 + salaryGrades: "",
  822 + allowancesValue: "",
  823 + deductionValue: "",
  824 + overtimeRate: ""
  825 + },
  826 +
  827 + basicRules: [v => !!v || " Basic Salary is required"],
  828 + salaryRules: [v => !!v || "Salary Grades is required"],
  829 + overtimeRules: [v => !!v || "Overtime Rate is required"],
  830 +
  831 + headers: [
  832 + {
  833 + align: "",
  834 + text: "No",
  835 + sortable: false,
  836 + value: "No"
  837 + },
  838 + {
  839 + text: "Salary Grades",
  840 + value: "salaryGrades",
  841 + sortable: false,
  842 + align: "center"
  843 + },
  844 + {
  845 + text: "Basic Salary",
  846 + value: "basicSalary",
  847 + sortable: false,
  848 + align: "center"
  849 + },
  850 + {
  851 + text: "Overtime Rate",
  852 + value: "overtimeRate",
  853 + sortable: false,
  854 + align: "center"
  855 + },
  856 + { text: "Action", value: "", sortable: false, align: "center" }
  857 + ],
  858 + salaryData: [],
  859 + editedItem: {},
  860 + token: ""
  861 + }),
  862 + methods: {
  863 + getSalaryList() {
  864 + this.showLoader = true;
  865 + this.loadingSearch = true;
  866 + http()
  867 + .get("/getSalaryList", {
  868 + headers: { Authorization: "Bearer " + this.token }
  869 + })
  870 + .then(response => {
  871 + this.salaryData = response.data.data;
  872 + this.showLoader = false;
  873 + this.loadingSearch = false;
  874 + })
  875 + .catch(error => {
  876 + // console.log("err====>", err);
  877 + this.showLoader = false;
  878 + this.loadingSearch = false;
  879 + this.snackbar = true;
  880 + this.text = error.response.data.message;
  881 + if (error.response.status === 401) {
  882 + this.$router.replace({ path: "/" });
  883 + this.$store.dispatch("setToken", null);
  884 + this.$store.dispatch("Id", null);
  885 + }
  886 + });
  887 + },
  888 + editItem(item) {
  889 + this.editedIndex = this.salaryData.indexOf(item);
  890 + this.editedItem = Object.assign({}, item);
  891 + this.editedItem.date =
  892 + this.editedItem.date != undefined
  893 + ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
  894 + : (this.editedItem.date = "");
  895 + this.editSalaryDialog = true;
  896 + },
  897 + profile(item) {
  898 + this.editedIndex = this.salaryData.indexOf(item);
  899 + this.editedItem = Object.assign({}, item);
  900 + this.profileSalaryDialog = true;
  901 + },
  902 + deleteItem(item) {
  903 + let Salary = {
  904 + salaryId: item._id
  905 + };
  906 + http()
  907 + .delete(
  908 + "/deleteSalary",
  909 + confirm("Are you sure you want to Delete this?") && {
  910 + params: Salary
  911 + },
  912 + {
  913 + headers: { Authorization: "Bearer " + this.token }
  914 + }
  915 + )
  916 + .then(response => {
  917 + this.snackbar = true;
  918 + this.text = "Successfully Delete Salary ";
  919 + this.text = response.data.message;
  920 + this.color = "green";
  921 + this.getSalaryList();
  922 + })
  923 + .catch(error => {
  924 + this.snackbar = true;
  925 + this.text = error.response.data.message;
  926 + this.color = "red";
  927 + });
  928 + },
  929 + close() {
  930 + this.editSalaryDialog = false;
  931 + },
  932 + submit() {
  933 + var salary = {
  934 + salaryGrades: this.salaryType.salaryGrades,
  935 + basicSalary: this.salaryType.basicSalary,
  936 + overtimeRate: this.salaryType.overtimeRate,
  937 + allowances: this.salaryTypeData,
  938 + deduction: this.salaryTypeDeductionData,
  939 + grossSalary: this.grossSalary,
  940 + totalDeduction: this.totalDeduction,
  941 + netSalary: this.salaryType.netSalary
  942 + };
  943 + if (this.$refs.form.validate()) {
  944 + this.loading = true;
  945 + // console.log("api data", this.salaryType);
  946 + http()
  947 + .post("/createSalary", salary)
  948 + .then(response => {
  949 + // console.log("response", response);
  950 + this.snackbar = true;
  951 + this.text = "Successfully Created Salary ";
  952 + this.text = response.data.message;
  953 + this.color = "green";
  954 + this.addSalaryDialog = false;
  955 + this.getSalaryList();
  956 + this.color = "success";
  957 + this.salaryTypeData = [];
  958 + this.salaryTypeDeductionData = [];
  959 + this.salaryType = "";
  960 + this.grossSalary = "";
  961 + this.totalDeduction = "";
  962 + this.loading = false;
  963 + this.clear();
  964 + })
  965 + .catch(error => {
  966 + console.log("error", error);
  967 + this.snackbar = true;
  968 + this.text = error.response.data.message;
  969 + this.color = "red";
  970 + this.loading = false;
  971 + });
  972 + }
  973 + },
  974 + selectAllowances() {
  975 + this.salaryTypeData.push({
  976 + allowancesValue: (this.salaryType.allowancesValue = "")
  977 + });
  978 + // console.log("this.salaryTypeData", this.salaryTypeData);
  979 + var totalAllowances = "";
  980 + this.salaryTypeData.forEach(allowancesValue_ => {
  981 + if (allowancesValue_.allowancesValue != "") {
  982 + // console.log("allowances", allowancesValue_.allowancesValue);
  983 + totalAllowances =
  984 + Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  985 + }
  986 + this.grossSalary =
  987 + totalAllowances + Number(this.salaryType.basicSalary);
  988 + });
  989 + },
  990 + allowancesAdd() {
  991 + this.editedItem.allowances.push({
  992 + allowancesValue: (this.salaryType.allowancesValue = "")
  993 + });
  994 + var totalAllowances = "";
  995 + this.editedItem.allowances.forEach(allowancesValue_ => {
  996 + if (allowancesValue_.allowancesValue != "") {
  997 + // console.log("allowances", allowancesValue_.allowancesValue);
  998 + totalAllowances =
  999 + Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  1000 + console.log("totalAllowances", totalAllowances);
  1001 + }
  1002 + this.editedItem.grossSalary =
  1003 + totalAllowances + Number(this.editedItem.basicSalary);
  1004 + console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
  1005 + });
  1006 + },
  1007 + selectDeduction() {
  1008 + this.salaryTypeDeductionData.push({
  1009 + deductionValue: (this.salaryType.deductionValue = "")
  1010 + });
  1011 + var totalDeductions = "";
  1012 + this.salaryTypeDeductionData.forEach(deductionValue_ => {
  1013 + if (deductionValue_.deductionValue != "") {
  1014 + // console.log("deduction", deductionValue_.deductionValue);
  1015 + totalDeductions =
  1016 + Number(totalDeductions) + Number(deductionValue_.deductionValue);
  1017 + }
  1018 + });
  1019 + },
  1020 + deductionAdd() {
  1021 + this.editedItem.deduction.push({
  1022 + deductionValue: (this.salaryType.deductionValue = "")
  1023 + });
  1024 + var totalDeductions = "";
  1025 + this.editedItem.deduction.forEach(deductionValue_ => {
  1026 + if (deductionValue_.deductionValue != "") {
  1027 + // console.log("deduction", deductionValue_.deductionValue);
  1028 + totalDeductions =
  1029 + Number(totalDeductions) + Number(deductionValue_.deductionValue);
  1030 + console.log("this.totalDeductions", totalDeductions);
  1031 + }
  1032 + // this.editedItem.totalDeduction = totalDeductions;
  1033 + // console.log("this.totalDeduction", this.editedItem.totalDeduction);
  1034 + });
  1035 + },
  1036 + deleteSelectAllowances: function(index) {
  1037 + this.salaryTypeData.splice(index, 1);
  1038 + },
  1039 + deleteallowancesAdd: function(index) {
  1040 + this.editedItem.allowances.splice(index, 1);
  1041 + },
  1042 + deleteSelectDeduction: function(index) {
  1043 + this.salaryTypeDeductionData.splice(index, 1);
  1044 + },
  1045 + deletedeductionAdd: function(index) {
  1046 + this.editedItem.deduction.splice(index, 1);
  1047 + },
  1048 + clear() {
  1049 + this.$refs.form.reset();
  1050 + this.disable = false;
  1051 + },
  1052 + save() {
  1053 + var updateSalary = {
  1054 + salaryId: this.editedItem._id,
  1055 + salaryGrades: this.editedItem.salaryGrades,
  1056 + basicSalary: this.editedItem.basicSalary,
  1057 + overtimeRate: this.editedItem.overtimeRate,
  1058 + allowances: this.salaryTypeData,
  1059 + deduction: this.salaryTypeDeductionData,
  1060 + grossSalary: this.editedItem.grossSalary,
  1061 + totalDeduction: this.editedItem.totalDeduction,
  1062 + netSalary: this.editedItem.netSalary
  1063 + };
  1064 + http()
  1065 + .put("/updateSalary", updateSalary)
  1066 + .then(response => {
  1067 + this.snackbar = true;
  1068 + this.text = response.data.message;
  1069 + this.color = "green";
  1070 + this.getSalaryList();
  1071 + this.close();
  1072 + })
  1073 + .catch(error => {
  1074 + this.snackbar = true;
  1075 + this.text = error.response.data.message;
  1076 + this.color = "red";
  1077 + });
  1078 + },
  1079 + displaySearch() {
  1080 + (this.show = false), (this.showSearch = true);
  1081 + },
  1082 + closeSearch() {
  1083 + this.showSearch = false;
  1084 + this.show = true;
  1085 + this.search = "";
  1086 + },
  1087 + addSalary: function() {
  1088 + var showSalary = this.salaryType.basicSalary;
  1089 + this.grossSalary = showSalary;
  1090 + // console.log("salary", this.grossSalary);
  1091 + },
  1092 + addAllowances: function() {
  1093 + var totalAllowances = "";
  1094 + this.salaryTypeData.forEach(allowancesValue_ => {
  1095 + if (allowancesValue_.allowancesValue != "") {
  1096 + totalAllowances =
  1097 + Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  1098 + }
  1099 + this.grossSalary =
  1100 + totalAllowances +
  1101 + Number(this.salaryType.basicSalary) +
  1102 + Number(this.salaryType.allowancesValue);
  1103 + });
  1104 + },
  1105 + addAllowancesValue: function() {
  1106 + var totalAllowances = "";
  1107 + this.editedItem.allowances.forEach(allowancesValue_ => {
  1108 + if (allowancesValue_.allowancesValue != "") {
  1109 + totalAllowances =
  1110 + Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
  1111 + }
  1112 + this.grossSalary =
  1113 + totalAllowances +
  1114 + Number(this.editedItem.basicSalary) +
  1115 + Number(this.editedItem.allowancesValue);
  1116 + });
  1117 + },
  1118 + addDeduction: function() {
  1119 + // console.log(
  1120 + // "this.salaryType.deductionValue",
  1121 + // this.salaryType.deductionValue
  1122 + // );
  1123 + var totalDeductions = "";
  1124 + this.salaryTypeDeductionData.forEach(deductionValue_ => {
  1125 + if (deductionValue_.deductionValue != "") {
  1126 + totalDeductions =
  1127 + Number(totalDeductions) + Number(deductionValue_.deductionValue);
  1128 + }
  1129 + });
  1130 + // console.log("deduction", totalDeductions);
  1131 + this.totalDeduction = totalDeductions;
  1132 + this.salaryType.netSalary = this.grossSalary - this.totalDeduction;
  1133 + },
  1134 + addDeductionValue: function() {
  1135 + var totalDeductions = "";
  1136 + this.editedItem.deduction.forEach(deductionValue_ => {
  1137 + if (deductionValue_.deductionValue != "") {
  1138 + totalDeductions =
  1139 + Number(totalDeductions) + Number(deductionValue_.deductionValue);
  1140 + }
  1141 + // this.totalDeduction = totalDeductions;
  1142 + // console.log("this.totalDeductions", this.totalDeduction);
  1143 + });
  1144 + this.editedItem.totalDeduction = totalDeductions;
  1145 + this.editedItem.netSalary =
  1146 + this.editedItem.grossSalary - this.editedItem.totalDeduction;
  1147 + }
  1148 + },
  1149 +
  1150 + mounted() {
  1151 + this.token = this.$store.state.token;
  1152 + this.getSalaryList();
  1153 + }
  1154 +};
  1155 +</script>
  1156 +
  1157 +<style scoped>
  1158 +</style>
0 1159 \ No newline at end of file
... ...