cssd-back/resources/js/vue/views/MedicalCenter/AddEdit.vue

<template>
  <v-form ref="form">
    <v-container grid-list-xs>
      <material-card class color="black" title="Add Medical Center" text>
        <v-layout row wrap class="px-5 mb-3">
          <v-flex xs12 md3 xs3>
            <v-text-field
              v-model="medicalCenter.name"
              label="Name"
              color="black"
              class="pa-2"
              :rules="[rules.required, rules.counter]"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 md3 xs3>
              <v-select
                :items="cities"
                item-text="name_en"
                item-value="id"
                v-model="medicalCenter.city_id"
                label="Select City"
              ></v-select>
          </v-flex>
          <v-flex xs12 md3 xs3>
            <v-text-field
              v-model="medicalCenter.address"
              label="Address"
              color="black"
              class="pa-2"
              :rules="[rules.required]"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 md3 xs3>
            <v-text-field
              v-model="medicalCenter.phone_number"
              label="Phone Number"
              color="black"
              class="pa-2"
              :rules="[rules.required]"
            ></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout row wrap align-center justify-center class="mt-3">
          <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" style="padding:10px 60px">
            <template v-if="$route.params.medicalCenter">
              <v-icon class="white--text mr-2 caption">fas fa-edit</v-icon>
              <span class="white--text">Edit</span>
            </template>
            <template v-else>
              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
              <span class="white--text">Add</span>
            </template>
          </v-btn>
          <router-link :to="{name:'ManageMedicalCenter'}">
            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
              <span class="black--text">Back</span>
            </v-btn>
          </router-link>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
  data() {
    return {
      medicalCenter: {
        name: "",
        address : "",
        city_id : "",
        phone_number : ""
      },
      rules: {
        required: value => !!value || "Required.",
        counter: value => value.length <= 30 || "Max 30 characters"
    },
    cities : []
    };
  },
  created() {
    if (this.$route.params.medicalCenter) {
      this.load(this.$route.params.medicalCenter);
      }
      this.loadCities();
  },
  methods: {
    async load(id) {
      const result = await ApiService.get(urls.editMedicalCenter(id));
      if (result && result.status == 200) {
        this.medicalCenter = result.data.data;
      }
    },
    async loadCities() {
        const result = await ApiService.get(urls.allCities);
        if (result.status == 200) {
            this.cities = result.data.data;
        }
    },
    async AddMedicalCenter() {
      if (this.$refs.form.validate()) {
        if (this.$route.params.medicalCenter) {
          var result = await ApiService.put(urls.updateMedicalCenter(this.$route.params.medicalCenter), this.medicalCenter);
        } else {
          var result = await ApiService.post(urls.storeMedicalCenter, this.medicalCenter);
        }
        if (result && result.status == 200) {
          this.$router.push({name : "ManageMedicalCenter"});
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
</style>