RestaurantSite/src/components/restaurants/restaurantMenuItemOptions.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Menu Option</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Description</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
          </span>
          <input class="form-control" type="text" v-model="menuOption.description" />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Option Type</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
          </span>
          <select class="form-control" v-model="menuOption.optionType">
            <option v-for="item in optionTypes" :value="item.id" :key="item.id">
              {{
              item.description
              }}
            </option>
          </select>
        </div>
      </div>
      <div class="col-md-6" style="margin-bottom: 1em" v-if="menuOption.optionType === 3">
        <label>Option Limit</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
          </span>
          <input class="form-control" type="number" v-model="menuOption.optionLimit" />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Is Base Price?</label>
        <div class="input-group-prepend">
          <input
            style="margin-left: 1px"
            type="checkbox"
            class="custom-control-input"
            id="thCloseSwitch"
            :checked="menuOption.isBasePrice"
            @change="selectionChanged"
          />
          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
            {{
            menuOption.isBasePrice ? "Yes" : "No"
            }}
          </label>
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Rank</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#6c757d"></eva-icon>
          </span>
          <input class="form-control" type="number" v-model="menuOption.rank" />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Options</label>
        <ListView
          :items="menuOption.options"
          :showColumnChooser="false"
          :editable="true"
          :deleteable="true"
          :displayColumns="columns"
          @onEdit="Edit"
          @onDelete="Delete"
          @onNew="New"
        />
        <modal name="OptionItem" :width="600" :height="400">
          <OptionItem @MenuItemUpdated="MenuItemUpdated" :editMenuOptionItem="selectedItem" />
        </modal>
      </div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottomL 1em">
        <div class="row offset-md-5">
          <div class="col-md-2">
            <b-button class="mt-2" @click="Save()">Save</b-button>
          </div>
          <div class="col-md-2">
            <b-button class="mt-2" @click="Close()">Close</b-button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
import ListView from "../shared/listView";
import { mapState, mapActions } from "vuex";
import OptionItem from "./restaurantMenuOptionItem";
import Log from "../../assets/Log";

export default {
  name: "MenuOption",
  components: {
    ListView,
    OptionItem,
  },
  props: {
    menuOption: { default: {} },
  },
  data() {
    return {
      selectedOption: "Single",
      selectedItem: {},
      isEdit: false,
      columns: ["description", "price", "rank"],
      wait: false,
      restaurantId: Log.restaurantId(),
      menuItemId: 0,
    };
  },
  methods: {
    ...mapActions("menuOptions", ["getOptionTypes"]),
    selectionChanged() {
      this.menuOption.isBasePrice = !this.menuOption.isBasePrice;
    },
    Close() {
      this.$emit("Close", true);
    },
    Save() {
      //this.wait = true;
      alert(JSON.stringify(this.menuOption));
      //   if (this.menuOption.categoryDescription !== "All") {
      //     var category = this.categories.find(
      //       c => c.description === this.menuOption.categoryDescription
      //     );
      //     this.menuOption.categoryId = category.id;
      //   } else {
      //     this.menuOption.categoryId = 0;
      //   }

      //   if (this.menuOption.id === 0) {
      //     this.addMenuOption(this.menuOption).then(result => {
      //       this.$router.push("/MenuOptions");
      //     });
      //   } else {
      //     this.updateMenuOption(this.menuOption);
      //     this.$router.push("/MenuOptions");
      //   }
    },
    New() {
      this.selectedItem = null;
      this.$modal.show("OptionItem");
    },
    Edit(item) {
      this.isEdit = true;
      this.selectedItem = item;
      this.$modal.show("OptionItem");
    },
    Delete(item) {
      this.deleteMenuOptionItem(item);
    },
    MenuItemUpdated(item) {
      //alert(JSON.stringify(item));
      item.menuOptionId = this.menuOption.id;
      if (this.isEdit) {
        this.menuOption.options.push(item);
      }

      this.$modal.hide("OptionItem");
      this.isEdit = false;
    },
  },
  computed: {
    ...mapState("menuOptions", ["optionTypes"]),
  },
  mounted() {
    this.wait = false;
    this.getOptionTypes();
  },
  watch: {
    menuOption: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.menuOption = val;
        }
      },
    },
  },
};
</script>