From d7a786f4314cb937a7e0639e937eeeee1684ad3c Mon Sep 17 00:00:00 2001
From: Ching <loooching@gmail.com>
Date: Thu, 7 Oct 2021 13:52:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(week=20recipe=20page=20):=20[A]=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=B7=E6=96=B0=E6=AF=8F=E6=97=A5=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[A] 增加刷新每日菜单功能

Signed-off-by: Ching <loooching@gmail.com>
---
 .../src/components/daily_recipe_detail.vue    |   6 +-
 .../components/recipe-mobile/week-recipe.vue  | 212 +++++++++++-------
 2 files changed, 132 insertions(+), 86 deletions(-)

diff --git a/frontend/src/components/daily_recipe_detail.vue b/frontend/src/components/daily_recipe_detail.vue
index bac9cd3..24dd98a 100644
--- a/frontend/src/components/daily_recipe_detail.vue
+++ b/frontend/src/components/daily_recipe_detail.vue
@@ -97,7 +97,7 @@ export default {
     };
   },
   mounted() {
-    this.getDailyRecipy(),
+    this.getDailyRecipe(),
       axios
         .get(
           config.publicPath + '/recipe/recipe/?recipe_type=meat&page_size=500'
@@ -119,7 +119,7 @@ export default {
         .post(
           config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id
         )
-        .then((response) => (response, this.getDailyRecipy()));
+        .then((response) => (response, this.getDailyRecipe()));
     },
     submitRecipe() {
       axios.put(
@@ -136,7 +136,7 @@ export default {
       console.log(this.meat, this.vegetable, this.soup);
       this.disable_submit = false;
     },
-    getDailyRecipy() {
+    getDailyRecipe() {
       axios
         .get(
           config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id
diff --git a/frontend/src/components/recipe-mobile/week-recipe.vue b/frontend/src/components/recipe-mobile/week-recipe.vue
index abb5820..b6b75ee 100644
--- a/frontend/src/components/recipe-mobile/week-recipe.vue
+++ b/frontend/src/components/recipe-mobile/week-recipe.vue
@@ -5,107 +5,132 @@
     pulling-text="下拉重新生成每周菜谱"
     loosing-text="可以松手了..."
   >
-    <van-cell-group
-      inset
-      v-for:="daily_recipe in daily_recipes"
-      :title="formatDate(daily_recipe.date)"
-      class="daily_recipes"
-    >
-      <van-row>
-        <van-col span="3" class="recipe_type">
-          <van-grid :column-num="1">
-            <van-grid-item text="肉" class="recipe_type"></van-grid-item>
-          </van-grid>
-        </van-col>
-        <van-col span="21">
-          <van-grid :column-num="3" clickable>
-            <van-grid-item
-              v-for:="recipe in daily_recipe.meat"
-              :text="recipe.name"
+    <div v-for:="(daily_recipe, recipe_index) in daily_recipes">
+      <van-cell-group
+        inset
+        :title="formatDate(daily_recipe.date)"
+        class="daily_recipes"
+      >
+        <van-swipe-cell>
+          <van-row>
+            <van-col span="3" class="recipe_type">
+              <van-grid :column-num="1">
+                <van-grid-item text="肉" class="recipe_type"></van-grid-item>
+              </van-grid>
+            </van-col>
+            <van-col span="21">
+              <van-grid :column-num="3" clickable>
+                <van-grid-item
+                  v-for:="recipe in daily_recipe.meat"
+                  :text="recipe.name"
+                  :to="{
+                    name: 'RecipeMobileRecipeDetail',
+                    params: { id: recipe.id },
+                  }"
+                />
+                <van-grid-item
+                  v-for="value in 3 - (daily_recipe.meat.length % 3)"
+                  :key="value"
+                />
+              </van-grid>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="3">
+              <van-grid :column-num="1">
+                <van-grid-item text="菜" class="recipe_type"></van-grid-item>
+              </van-grid>
+            </van-col>
+            <van-col span="21">
+              <van-grid :column-num="3" clickable>
+                <van-grid-item
+                  v-for:="recipe in daily_recipe.vegetable"
+                  :text="recipe.name"
+                  :to="{
+                    name: 'RecipeMobileRecipeDetail',
+                    params: { id: recipe.id },
+                  }"
+                />
+                <van-grid-item
+                  v-for="value in 3 - (daily_recipe.vegetable.length % 3)"
+                  :key="value"
+                />
+              </van-grid>
+            </van-col>
+          </van-row>
+          <van-row v-if="daily_recipe.soup.length > 0">
+            <van-col span="3">
+              <van-grid :column-num="1">
+                <van-grid-item text="汤" class="recipe_type"></van-grid-item>
+              </van-grid>
+            </van-col>
+            <van-col span="21">
+              <van-grid :column-num="1" clickable>
+                <van-grid-item
+                  v-for:="recipe in daily_recipe.soup"
+                  :text="recipe.name"
+                  :to="{
+                    name: 'RecipeMobileRecipeDetail',
+                    params: { id: recipe.id },
+                  }"
+                />
+              </van-grid>
+            </van-col>
+          </van-row>
+          <template #right>
+            <van-button
+              square
+              text="编辑"
+              type="primary"
+              class="action-button"
               :to="{
-                name: 'RecipeMobileRecipeDetail',
-                params: { id: recipe.id },
+                name: 'RecipeMobileDailyRecipeDetail',
+                params: { id: daily_recipe.id },
               }"
             />
-            <van-grid-item
-              v-for="value in 3 - (daily_recipe.meat.length % 3)"
-              :key="value"
+            <van-button
+              square
+              text="刷新"
+              type="danger"
+              class="action-button"
+              @click="reGenerateRecipe(daily_recipe.id, recipe_index)"
             />
-          </van-grid>
-        </van-col>
-      </van-row>
-      <van-row>
-        <van-col span="3">
-          <van-grid :column-num="1">
-            <van-grid-item text="菜" class="recipe_type"></van-grid-item>
-          </van-grid>
-        </van-col>
-        <van-col span="21">
-          <van-grid :column-num="3" clickable>
-            <van-grid-item
-              v-for:="recipe in daily_recipe.vegetable"
-              :text="recipe.name"
-              :to="{
-                name: 'RecipeMobileRecipeDetail',
-                params: { id: recipe.id },
-              }"
-            />
-            <van-grid-item
-              v-for="value in 3 - (daily_recipe.vegetable.length % 3)"
-              :key="value"
-            />
-          </van-grid>
-        </van-col>
-      </van-row>
-      <van-row v-if="daily_recipe.soup.length > 0">
-        <van-col span="3">
-          <van-grid :column-num="1">
-            <van-grid-item text="汤" class="recipe_type"></van-grid-item>
-          </van-grid>
-        </van-col>
-        <van-col span="21">
-          <van-grid :column-num="1" clickable>
-            <van-grid-item
-              v-for:="recipe in daily_recipe.soup"
-              :text="recipe.name"
-              :to="{
-                name: 'RecipeMobileRecipeDetail',
-                params: { id: recipe.id },
-              }"
-            />
-          </van-grid>
-        </van-col>
-      </van-row>
-    </van-cell-group>
+          </template>
+        </van-swipe-cell>
+      </van-cell-group>
+    </div>
   </van-pull-refresh>
 </template>
 
 <script>
 import {
-  Tag,
+  Button,
   Cell,
   CellGroup,
   Col,
-  Row,
-  Button,
   Grid,
   GridItem,
   PullRefresh,
+  Row,
+  SwipeCell,
+  Tag,
 } from 'vant';
 import axios from 'axios';
 import config from '@/config/index';
+
 export default {
   name: 'RecipeMobileWeekRecipe',
   components: {
-    [CellGroup.name]: CellGroup,
+    [Button.name]: Button,
     [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
     [Col.name]: Col,
-    [Row.name]: Row,
-    [Tag.name]: Tag,
     [Grid.name]: Grid,
     [GridItem.name]: GridItem,
-    [Button.name]: Button,
     [PullRefresh.name]: PullRefresh,
+    [Row.name]: Row,
+    [SwipeCell.name]: SwipeCell,
+    [Tag.name]: Tag,
   },
   data() {
     return {
@@ -114,9 +139,7 @@ export default {
     };
   },
   mounted() {
-    axios
-      .get(config.publicPath + '/recipe/week-recipe/')
-      .then((response) => (this.daily_recipes = response.data));
+    this.getWeekRecipe(false);
   },
   methods: {
     formatDate(date) {
@@ -128,12 +151,31 @@ export default {
       return days[date_.getDay()];
     },
     onRefresh() {
+      this.getWeekRecipe(true);
+    },
+    getWeekRecipe(regen) {
+      if (regen) {
+        axios
+          .post(config.publicPath + '/recipe/week-recipe/')
+          .then(
+            (response) => (
+              (this.daily_recipes = response.data), (this.loading = false)
+            )
+          );
+      } else {
+        axios
+          .get(config.publicPath + '/recipe/week-recipe/')
+          .then(
+            (response) => (this.daily_recipes = response.data),
+            (this.loading = false)
+          );
+      }
+    },
+    reGenerateRecipe(daily_recipe_id, recepe_index) {
       axios
-        .post(config.publicPath + '/recipe/week-recipe/')
-        .then(
-          (response) => (
-            (this.daily_recipes = response.data), (this.loading = false)
-          )
+        .post(config.publicPath + '/recipe/daily-recipe/' + daily_recipe_id)
+        .then((response) =>
+          this.daily_recipes.splice(recepe_index, 1, response.data)
         );
     },
   },
@@ -153,4 +195,8 @@ export default {
 .daily_recipes:last-child {
   margin-bottom: 40px;
 }
+.action-button {
+  height: 100%;
+  width: 50%;
+}
 </style>