CommonMixin.js

export const CommonMixin = {
    data() {
        return {
            dialog: false,
            snackbar: {
                show: false,
                message: null,
                color: null
            },
            search: "",
            message: "",
            token: "",
            user: {},
            items: [],
            selectedItem: null,
            selectedItemIndex: -1,
            branch_id: 0,
            pagination: {
                rowsPerPage: 10
            }
        };
    },
    created: function() {
        this.token = sessionStorage.getItem("token");
        this.user = JSON.parse(sessionStorage.getItem("user"));
        this.branch_id = this.user.branch_id;
    },
    methods: {
        
        getItems: function(url) {
            fetch(url, {
                method: "GET", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "JWT " + this.token
                },
            }).then(response => {
                if (response.status === 200) {
                    response.json().then(data => {
                        let count = 0;
                        data.forEach(element => {
                            element["num"] = ++count;
                        });
                        this.items = data;
                    });
                } else if (response.status === 401) {
                    this.$router.push({ name: "user-login" });
                }
            });
        },

        getItem: function(url) {
            this.axios
                .get(url)
                .then(response => {
                    if (response.status === 401) {
                        this.$router.push({ name: "user-login" });
                    }
                    this.item = response.data;
                })
                .catch(err => {
                    console.log("Error Comes=>" + err);
                });
        },

        deleteItems: function() {},

        deleteItem: function(url) {
            fetch(url, {
                method: "DELETE", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "JWT " + this.token
                }
            }).then(response => {
                if (response.status === 204) {
                    this.items.splice(this.selectedItemIndex, 1);
                    this.snackbar = {
                        message: "Record Deleted Successfully!",
                        color: "success",
                        show: true
                    };
                } else if (response.status === 401) {
                    this.$router.push({ name: "user-login" });
                }
            });
        },

        postItem: function(url) {
            fetch(url, {
                method: "POST", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "JWT " + this.token
                },
                body: JSON.stringify(this.item)
            }).then(response => {
                if (response.status === 201) {
                    response.json().then(data => {
                        data["num"] = this.items.length + 1;
                        this.items.push(data);
                    });
                    this.snackbar = {
                        message: "Record Created Successfully!",
                        color: "success",
                        show: true
                    };
                } else if (response.status === 401) {
                    this.$router.push({ name: "user-login" });
                }
            });
        },

        putItem: function(url) {
            fetch(url, {
                method: "PUT", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "JWT " + this.token
                },
                body: JSON.stringify(this.item)
            }).then(response => {
                if (response.status === 200) {
                    response.json().then(data => {
                        this.items.splice(this.selectedItemIndex, 1, data);
                        this.snackbar = {
                            message: "Record Updated Successfully!",
                            color: "success",
                            show: true
                        };
                    });
                } else if (response.status === 401) {
                    this.$router.push({ name: "user-login" });
                }
            });
        },

        saveItem: function(url) {
            if (this.item.id) {
                url = url + this.item.id + "/";
                this.putItem(url, this.item);
            } else {
                this.postItem(url, this.item);
            }
        },

        logout: function() {
            this.$session.destroy();
            localStorage.clear();
        },
        handleClose() {
            this.dialog = false;
            setTimeout(() => {
                for (var key in this.item) {
                    this.item[key] = null;
                }
            }, 300);
        }
    },

    filters: {
        decimal(value) {
            if (value > 0 && value !== "") {
                return value.toFixed(2);
            } else {
                return value;
            }
        },
        capitalize: function(str) {
            return str.charAt(0).toUpperCase() + str.slice(1);
        }
    },

    watch: {
        snackbar(new_val, old_val) {
            setTimeout(() => {
                this.snackbar = {
                    show: false,
                    message: null,
                    color: null
                };
            }, 4000);
        },
        dialog(val) {
            val || this.handleClose();
        }
    }
};

parent.vue

<template>
  <div>
    <v-toolbar flat color="white">
      <v-toolbar-title>{{item_name}}s</v-toolbar-title>
      <v-divider class="mx-2" inset vertical></v-divider>
      <v-spacer></v-spacer>
      <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
      <v-snackbar :color="snackbar.color" v-model="snackbar.show">{{ snackbar.message }}</v-snackbar>
      <v-dialog v-model="dialog" max-width="500px">
        <template v-slot:activator="{ on }">
          <v-btn color="primary" dark class="mb-2" v-on="on">New</v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span
              class="headline"
            >{{ this.account.id ? "Edit " + item_name : "Add New " + item_name }}</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="accountForm">
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6 md6>
                    <v-text-field v-model="account.family_no" label="Family #"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md6>
                    <v-text-field
                      v-model="account.father_name"
                      label="Father Name"
                      :rules="requiredRule"
                    />
                  </v-flex>
                  <v-flex xs12 sm6 md6>
                    <v-text-field
                      v-model="account.father_contact"
                      label="Father Contact"
                      :rules="requiredRule"
                    />
                  </v-flex>
                  <v-flex xs12 sm6 md6>
                    <v-text-field v-model="account.father_cnic" label="Father CNIC"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md6>
                    <v-text-field v-model="account.mother_name" label="Mother Name"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md6>
                    <v-text-field v-model="account.mother_contact" label="Mother Contact"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-form>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="handleClose">Cancel</v-btn>
            <v-btn color="blue darken-1" flat @click="handleSave">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-toolbar>

    <v-data-table
      :headers="headers"
      :items="accounts"
      :search="search"
      :pagination.sync="pagination"
      class="elevation-1"
    >
      <template v-slot:items="props">
        <td>{{ props.item.num }}</td>
        <td>{{ props.item.family_no }}</td>
        <td>{{ props.item.father_name }}</td>
        <td>{{ props.item.father_contact }}</td>
        <td>{{ props.item.father_cnic }}</td>
        <td>{{ props.item.mother_name }}</td>
        <td>{{ props.item.mother_contact }}</td>
        <td class="justify-center layout px-0">
          <v-icon small class="mr-2" @click="handleEdit(props.item)">edit</v-icon>
          <v-icon small @click="handleDelete(props.item)">delete</v-icon>
        </td>
      </template>
      <template v-slot:no-data>
        <v-btn color="primary">Reset</v-btn>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { AccountMixin, Roles } from "../../libs/AccountMixin";

export default {
  mixins: [AccountMixin],

  data: () => ({
    item_name: "Parent",
    icon: "pe-7s-plane icon-gradient bg-tempting-azure",

    dialog: false,
    headers: [
      { text: "#", align: "left", value: "num", sortable: false },
      { text: "Family #", align: "left", value: "family_no" },
      { text: "Father Name", align: "left", value: "father_name" },
      { text: "Father Contact", align: "left", value: "father_contact" },
      { text: "Father CNIC", align: "left", value: "father_cnic" },
      { text: "Mother Name", align: "left", value: "mother_name" },
      { text: "Mother Contact", align: "left", value: "mother_contact" },
      { text: "Actions", value: "name", sortable: false }
    ]
  }),

  created: function() {
    this.loadDataTable();
  },

  methods: {
    loadDataTable() {
      let accounts = JSON.parse(this.$localStorage.get("accounts"));
      if (Array.isArray(accounts)) {
        this.accounts = accounts.filter(
          account => account.role_id === Roles.Parent
        );
      }
    },

    handleSave() {
      let account = this.account;
      account.role_id = Roles.Parent;

      delete account.student_session;
      delete account.email;

      if (this.account.id) {
        this.putAccount(account);
      } else {
        this.postAccount(account);
      }
    }
  }
};
</script>