# 基本商品編輯 ( Vue )

###### codepen在這裡：https://codepen.io/liu_0821/pen/gOjMBaa?editors=1010

## 前情提要
#### 主要還是跟著課程內容實作後，再依照自己的想法(?)去新增東西，如果有錯或是有什麼更好的做法歡迎告訴我耶耶。
#### 額外增加的內容
#### 1. 刪除功能與提示視窗修改(sweetalert)
#### 2. 新增鈕可以判斷表單要收起還是出現
#### 3. 送出的表單填入產品圖片，更新時會自動帶入預設圖片

## HTML

<div id="app">
  <div class="text-end">
    <button class="btn btn-primary" type="button" v-on:click="addItem">
      新增
    </button>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>標題</th>
        <th>圖片</th>
        <th>銷售狀態</th>
        <th>編輯</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in products" :key="item.id" :class="{'table-success': item.onStock}">
        <!-- v-bind:class="{'table-success':item.onStock} 判斷式-->
        <td>{{ item.name }}</td>
        <td>
          <img :src="item.imageUrl" alt="" height="100" />
        </td>
        <td>
          <input type="checkbox" v-model="item.onStock" />
        </td>
        <td>
          <button type="button" class="btn btn-outline-primary" v-on:click="editItem(item)" >
            <!-- 這裡的item是前面陣列傳進來的-->
            修改
          </button>
          <button type="button" class="btn btn-outline-danger" v-on:click="deleteItem(item)" >
            刪除
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <form v-if="isNew || temp.id">
    <div class="mb-3">
      <label for="productName" class="form-label">產品名稱</label>
      <input type="text" id="productName" class="form-control" v-model="temp.name"/>
    </div>
    <div class="mb-3">
      <label for="productImage" class="form-label">產品圖片</label></br>
      <img :src="temp.imageUrl" ><!-- 可以動態預覽新增的圖片 -->
      <input type="text" id="productImage" class="form-control" v-model="temp.imageUrl"/>
    </div>
    <button type="button" class="btn btn-secondary" v-on:click="confirmEdit">
      更新
    </button>
  </form>
</div>

## CSS
>##### 主要還是bootstrap去做css的，這個部分就是微調~~~

html,body{
  margin: 0;
  padding: 0;
}

#app{
  width: 80%;
  height: auto;
  margin: auto;
  margin-top: 5%;
  padding: 20px;
  border-radius: 25px;
  background-color: #fdfdfd;
  box-shadow: 0px 0px 15px #ccc;
}

input[type="checkbox"]{
  width: 20px;
  height: 20px;
}

td > button{
  margin-left: 5px;
}

## JS（Vue）
>##### 重頭戲在這邊~~

const products = [
  {
    id: "1",
    imageUrl:
    "https://images.unsplash.com/photo-1516906571665-49af58989c4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=300&q=80",
    name: "MacBook Pro",
    onStock: false,
  },
  {
    id: "2",
    imageUrl:
    "https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80",
    name: "iPhone",
    onStock: false,
  },
];

const app = {
  data(){
    return {
      products: [],
      temp: {},
      isNew: false,
    };
  },
  methods: {
    addItem() {
      if(this.isNew == false){
        this.isNew = true;
        this.temp = {};
      }else{
        this.isNew = false;
      }
    },
    editItem(item1) {
      this.temp = { ...item1 }; /* 這裡的item1是自定義的的 */
    },
    deleteItem(item2){
      swal({
        title: "確定要刪除嗎?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          this.products.splice(this.products.indexOf(item2), 1);
          swal("刪除成功", {
            icon: "success",
          });
        } else {
          swal("刪除失敗");
        }
      });
    },
    confirmEdit() {
      if (!this.temp.id) {
        // 新增資料
        this.temp.id = new Date().getTime(); //unix timestamp
        console.log(this.temp.id)
        this.temp.onStock = false;
        this.products.push(this.temp);
      } else {
        // 修改資料
        this.products.forEach((item, i) => {
          if (item.id === this.temp.id) {
            this.products[i] = this.temp;
          }
        });
      }
      this.isNew = false; // 編輯完成後要再做隱藏
      this.temp = {};
    },
  },
  created() {
    this.products = products;
  }
};

Vue.createApp(app).mount("#app");

## 補充
##### 課程上完還有一些小問題，我把他補充在這邊~~

##### Q：為什麼新增的 `this.temp.id` 是用 new Date().getTime() 下去表示？
##### A：原因是 id 通常是不重複的，所以可以利用 Date().getTime() 的方式來取得一段不重複的數字。

---

#### ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人

##### 以上 如果註解哪裡有錯誤或有問題，歡迎提出來一起討論~~~~