feat(recipe detail page): 菜谱编辑页增加删除按钮

菜谱编辑页增加删除按钮

Signed-off-by: Ching <loooching@gmail.com>

frontend/src/components/input_recipe.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row justify="left">
+  <el-row justify="left" gutter="10">
     <el-col>
       <el-form :rules="rules" ref="form" :model="form" label-position="left">
         <el-form-item label="名字" prop="name">
@@ -54,6 +54,7 @@
           <el-input type="textarea" v-model="form.note"></el-input>
         </el-form-item>
         <el-form-item>
+          <el-col :span="12" v-if="recipe_id">
             <el-button
               type="primary"
               plain
@@ -61,6 +62,25 @@
               @click="onSubmit(recipe_id)"
               >提交</el-button
             >
+          </el-col>
+          <el-col :span="24" v-else>
+            <el-button
+              type="primary"
+              plain
+              class="summit-recipe"
+              @click="onSubmit(recipe_id)"
+              >提交</el-button
+            >
+          </el-col>
+          <el-col :span="12" v-if="recipe_id">
+            <el-button
+              type="danger"
+              plain
+              class="summit-recipe"
+              @click="onSubmitDelete(recipe_id)"
+              >删除</el-button
+            >
+          </el-col>
         </el-form-item>
       </el-form>
     </el-col>
@@ -69,6 +89,8 @@
 <script>
 import axios from 'axios';
 import config from '@/config/index';
+import { ElMessage } from 'element-plus';
+
 export default {
   props: ['recipe_'],
   watch: {
@@ -105,6 +127,10 @@ export default {
         axios
           .post(config.publicPath + '/recipe/recipe/', data)
           .then(function () {
+            ElMessage({
+              message: '创建成功.',
+              type: 'success',
+            });
             location.reload();
           })
           .catch(function (error) {
@@ -114,13 +140,27 @@ export default {
         axios
           .put(config.publicPath + '/recipe/recipe/' + recipe_id, data)
           .then(function () {
-            location.reload();
+            ElMessage({
+              message: '修改成功.',
+              type: 'success',
+            });
           })
           .catch(function (error) {
             console.log(error);
           });
       }
     },
+    onSubmitDelete(recipe_id) {
+      axios
+        .delete(config.publicPath + '/recipe/recipe/' + recipe_id)
+        .then(function () {
+          ElMessage.error('删除成功.');
+          location.reload();
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
@@ -128,5 +168,6 @@ export default {
 <style scoped>
 .summit-recipe {
   width: 100%;
+  margin-bottom: 10px;
 }
 </style>

frontend/src/components/recipe-mobile/recipe-edit.vue

@@ -43,10 +43,12 @@
       />
     </van-cell-group>
     <div class="recipe-create">
+      <van-row gutter="20">
+        <van-col span="12" v-if="recipe_id">
           <van-button
+            class="submit-button"
             round
             type="primary"
-        block
             plain
             hairline
             :disabled="disable_submit"
@@ -54,6 +56,34 @@
             :loading="loading"
             >提交</van-button
           >
+        </van-col>
+        <van-col span="24" v-else>
+          <van-button
+            class="submit-button"
+            round
+            type="primary"
+            plain
+            hairline
+            :disabled="disable_submit"
+            @click="onSubmit(recipe_id)"
+            :loading="loading"
+            >提交</van-button
+          >
+        </van-col>
+        <van-col span="12" v-if="recipe_id">
+          <van-button
+            class="submit-button"
+            round
+            type="danger"
+            plain
+            hairline
+            :disabled="disable_submit"
+            @click="onSubmitDelete(recipe_id)"
+            :loading="loading"
+            >删除</van-button
+          >
+        </van-col>
+      </van-row>
     </div>
   </van-form>
 </template>
@@ -68,6 +98,8 @@ import {
   Rate,
   Button,
   Toast,
+  Col,
+  Row,
 } from 'vant';
 import axios from 'axios';
 import config from '@/config/index';
@@ -90,6 +122,8 @@ export default {
     [RadioGroup.name]: RadioGroup,
     [Rate.name]: Rate,
     [Button.name]: Button,
+    [Col.name]: Col,
+    [Row.name]: Row,
   },
   data() {
     return {
@@ -137,6 +171,20 @@ export default {
         );
       }
     },
+    onSubmitDelete(recipe_id) {
+      if (!this.form.name) {
+        return;
+      }
+      this.loading = true;
+      axios.delete(config.publicPath + '/recipe/recipe/' + recipe_id).then(
+        (Toast.success({
+          message: '删除成功',
+          forbidClick: true,
+          duration: 500,
+        }),
+        (this.loading = false))
+      );
+    },
   },
 };
 </script>
@@ -144,4 +192,7 @@ export default {
 .recipe-create {
   margin: 20px 16px;
 }
+.submit-button {
+  width: 100%;
+}
 </style>

recipe/migrations/0003_recipe_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.6 on 2022-02-04 16:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('recipe', '0002_auto_20211002_1926'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='recipe',
+            name='status',
+            field=models.CharField(default='active', max_length=32),
+        ),
+    ]

recipe/models.py

@@ -9,6 +9,7 @@ import utils
 class Recipe(models.Model):
     name = models.CharField(max_length=128)
     recipe_type = models.CharField(max_length=32, default=const.RECIPE_TYPE_MEAT)
+    status = models.CharField(max_length=32, default=const.RECIPE_STATUS_ACTIVE)
     note = models.TextField(null=True)
     rate = models.IntegerField(default=0)
     difficulty = models.IntegerField(default=0)
@@ -125,7 +126,12 @@ class DailyRecipe(models.Model):
         # meat
         for x in range(0, 2):
             while True:
-                recipe = Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_MEAT).order_by('?').first()
+                recipe = (
+                    Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_MEAT)
+                    .exclude(status=const.RECIPE_STATUS_DELETED)
+                    .order_by('?')
+                    .first()
+                )
                 if recipe and recipe.id not in recipes and recipe.id not in prev_recipes:
                     recipes.append(recipe.id)
                     break
@@ -138,7 +144,12 @@ class DailyRecipe(models.Model):
         # vegetable
         for x in range(0, 1):
             while True:
-                recipe = Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_VEGETABLE).order_by('?').first()
+                recipe = (
+                    Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_VEGETABLE)
+                    .exclude(status=const.RECIPE_STATUS_DELETED)
+                    .order_by('?')
+                    .first()
+                )
                 if recipe and recipe.id not in recipes and recipe.id not in prev_recipes:
                     recipes.append(recipe.id)
                     break
@@ -150,7 +161,12 @@ class DailyRecipe(models.Model):
 
         # soup
         if random.randint(0, 2):
-            recipe = Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_SOUP).order_by('?').first()
+            recipe = (
+                Recipe.objects.filter(recipe_type=const.RECIPE_TYPE_SOUP)
+                .exclude(status=const.RECIPE_STATUS_DELETED)
+                .order_by('?')
+                .first()
+            )
             # if recipe not in recipes and recipe not in prev_recipes:
             if recipe:
                 recipes.append(recipe.id)

recipe/views.py

@@ -12,7 +12,7 @@ import recipe.serializers
 from utils import const
 
 
-class RecipeAPI(rest_framework.generics.RetrieveUpdateAPIView):
+class RecipeAPI(rest_framework.generics.RetrieveUpdateDestroyAPIView):
 
     # authentication_classes = (authentication.TokenAuthentication,
     #                           authentication.SessionAuthentication,
@@ -21,6 +21,10 @@ class RecipeAPI(rest_framework.generics.RetrieveUpdateAPIView):
     queryset = recipe.models.Recipe.objects.all()
     serializer_class = recipe.serializers.RecipeSerializer
 
+    def perform_destroy(self, instance):
+        instance.status = const.RECIPE_STATUS_DELETED
+        instance.save(update_fields=['status'])
+
 
 class RecipeListAPI(rest_framework.generics.ListAPIView, rest_framework.generics.CreateAPIView):
 
@@ -28,7 +32,7 @@ class RecipeListAPI(rest_framework.generics.ListAPIView, rest_framework.generics
     #                           authentication.SessionAuthentication,
     #                           authentication.BasicAuthentication)
     # permission_classes = (permissions.IsAuthenticated,)
-    queryset = recipe.models.Recipe.objects.all()
+    queryset = recipe.models.Recipe.objects.exclude(status=const.RECIPE_STATUS_DELETED)
     serializer_class = recipe.serializers.RecipeSerializer
     filterset_fields = {
         'recipe_type': const.FILTER_EXACT,

utils/const.py

@@ -11,6 +11,9 @@ RECIPE_TYPE_MEAT = 'meat'
 RECIPE_TYPE_VEGETABLE = 'vegetable'
 RECIPE_TYPE_SOUP = 'soup'
 
+RECIPE_STATUS_ACTIVE = 'active'
+RECIPE_STATUS_DELETED = 'deleted'
+
 RECIPE_TYPE_CHOICE = [RECIPE_TYPE_MEAT, RECIPE_TYPE_VEGETABLE, RECIPE_TYPE_SOUP]
 
 FILTER_EXACT = ['exact']