RestaurantSite/src/components/restaurants/restaurantMenuItem.vue

<template>
  <div>
    <div class="container">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <br />
              <h1 class="title-d" style="text-align:left; font-size: 250%">Menu Item</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container" v-if="!showOption">
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Category</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
            </span>
            <select class="form-control" v-model="menuItem.category">
              <option v-for="(cat, i) in categories" :key="i">{{ cat.description }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Name</label>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <eva-icon name="edit-2-outline" fill="#6c757d"></eva-icon>
            </span>
            <input class="form-control" type="text" v-model="menuItem.name" />
          </div>
        </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="edit-2-outline" fill="#6c757d"></eva-icon>
            </span>
            <input class="form-control" type="text" v-model="menuItem.description" />
          </div>
        </div>
      </div>
      <div class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Price</label>
          <div class="input-group-prepend">
            <span class="input-group-text" style="color:#6c757d">
              <b>R</b>
            </span>
            <input class="form-control" type="number" v-model="menuItem.price" />
          </div>
        </div>
      </div>
      <div v-if="!menuItem.image" class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <label>Image</label>
          <div class="input-group-prepend">
            <image-uploader
              :preview="true"
              :className="['fileinput', { 'fileinput--loaded': hasImage }]"
              capture="environment"
              :debug="1"
              doNotResize="gif"
              :autoRotate="true"
              outputFormat="verbose"
              @input="setImage"
            >
              <label for="fileInput" slot="upload-label">
                <figure>
                  <path
                    class="path1"
                    d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                  ></path>
                </figure>
              </label>
            </image-uploader>
          </div>
        </div>
      </div>
      <div v-else class="row" style="text-align:left">
        <div class="col-md-6" style="margin-bottom: 1em">
          <img :src="menuItem.image" style="height:100px; width:100px; object-fit: cover;" />
          <br />
          <span class="input-group-text" align="center" style="width:100px" @click="removeImage()">
            <eva-icon name="trash-2-outline" fill="#6c757d"></eva-icon>Delete
          </span>
        </div>
      </div>
      <div class="row" style="text-align:left" v-if="1 === 2">
        <div class="col-md-12" style="margin-bottom: 1em">
          <div class="custom-control custom-switch">
            <label>Override Options</label>
            <input
              style="margin-left: 1px"
              type="checkbox"
              class="custom-control-input"
              id="thCloseSwitch"
              :checked="menuItem.overrideOptions"
              @change="selectionChanged"
            />
            <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
              {{
              menuItem.overrideOptions
              ? "Yes - This will override any menu options set on the category"
              : "No - This will append category options to the below options"
              }}
            </label>
          </div>
        </div>
      </div>
      <div class="row" style="text-align:left" v-if="1 === 2">
        <div class="col-md-12" style="margin-bottomL 1em">
          <label>Options</label>
          <ListView
            :items="menuItem.options"
            @onEdit="OptionEdit"
            @onDelete="OptionDelete"
            @onNew="OptionNew"
          />
        </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>
    <div v-else class="containers">
      <ItemOption @Close="CloseOptions" :menuOption="CurrentOption" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Log from "../../assets/Log";
import ImageUploader from "vue-image-upload-resize";
import ListView from "../shared/listView";
import ItemOption from "./restaurantMenuItemOptions";

export default {
  name: "MenuItem",
  components: {
    ImageUploader,
    ListView,
    ItemOption,
  },
  data() {
    return {
      wait: false,
      hasImage: false,
      restaurantId: Log.restaurantId(),
      showOption: false,
      menuOption: {},
    };
  },
  methods: {
    ...mapActions("menuCategories", ["getCategories"]),
    ...mapActions("menu", ["getMenuItem", "insertMenuItem", "updateMenuItem"]),
    Save() {
      //this.wait = true;
      this.menuItem.restaurantId = this.restaurantId;
      if (this.menuItem.category !== "") {
        var category = this.categories.find(
          (c) => c.description === this.menuItem.category
        );
        this.menuItem.categoryId = category.id;
      }
      console.log(JSON.stringify(this.menuItem));

      this.insertMenuItem(this.menuItem).then((fulfilled) => {
        this.$router.push("/RestaurantMenu");
      });
    },
    Close() {
      this.$router.push("/RestaurantMenu");
    },
    setImage: function (output) {
      this.hasImage = true;
      this.menuItem.image = output.dataUrl;
    },
    removeImage() {
      this.hasImage = false;
      this.menuItem.image = null;
    },
    selectionChanged() {
      this.menuItem.overrideOptions = !this.menuItem.overrideOptions;
    },
    OptionNew() {
      //new
      this.menuOption = {};
      this.menuOption.options = [];
      this.showOption = true;
    },
    OptionEdit(item) {
      //edit
    },
    OptionDelete(item) {
      //delete
    },
    CloseOptions(item) {
      if (item) {
        this.showOption = false;
      }
    },
  },
  computed: {
    ...mapState("menuCategories", ["categories"]),
    ...mapState("menu", ["menuItem"]),
    CurrentOption() {
      return this.menuOption;
    },
  },
  mounted() {
    this.wait = true;
    this.getCategories(this.restaurantId);
    this.getMenuItem(this.$route.params.itemid);
    this.wait = false;
  },
};
</script>