add create problem

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>

Author: ZTL-UwU

src/assets/css/basic.css

@@ -204,6 +204,23 @@ h3::before {
     position: fixed;
 }
 
+.el-dialog,
+.el-dialog__wrapper {
+    z-index: 200000 !important;
+}
+
+.v-modal {
+    z-index: 100000 !important;
+}
+
 * {
     border-radius: 0 !important;
 }
+
+.icon-error {
+    color: #f56c6c !important;
+}
+
+.icon-success {
+    color: #67c23a !important;
+}

src/components/problem/create.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    title="Create New Problem"
+    :visible.sync="$store.state.createProblem.displayCreateProblem"
+    width="500px"
+    class="max-screen"
+  >
+    <el-form>
+      <div class="icon-lable">
+        <i class="el-icon-s-operation" />
+        PID
+      </div>
+      <el-form-item prop="username">
+        <el-input v-model="pid" placeholder="PID">
+          <template slot="prepend">#.</template>
+          <i v-if="errorPID" slot="suffix" class="icon-error el-input__icon el-icon-circle-close"></i>
+          <i v-else slot="suffix" class="icon-success el-input__icon el-icon-circle-check"></i>
+        </el-input>
+      </el-form-item>
+      <div class="icon-lable">
+        <i class="el-icon-edit-outline" />
+        Title
+      </div>
+      <el-form-item>
+        <el-input v-model="title" placeholder="Title"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          v-on:click="Submit();"
+        >
+          Edit Detail
+        </el-button>
+        <el-button v-on:click="$store.state.createProblem.displayCreateProblem = false">Cancel</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import apiurl from './../../apiurl';
+
+export default {
+  name: 'CreateProblem',
+  data() {
+    return {
+      pid: null,
+      title: null,
+      errorPID: true
+    };
+  },
+  watch: {
+    pid(val) {
+      this.$axios
+        .get(apiurl('/problem/' + String(val)))
+        .then(() => {
+          this.errorPID = true;
+        })
+        .catch(() => {
+          this.errorPID = false;
+        });
+    }
+  },
+  methods: {
+    Submit() {
+      this.$axios
+        .post(apiurl('/problem'), {
+          pid: this.pid,
+          title: this.title,
+          description: 'Input description'
+        })
+        .then(() => {
+          this.$store.state.createProblem.displayCreateProblem = false;
+          this.$router.push('/problem/' + this.pid + '/edit');
+        })
+        .catch(err => {
+          if (err.request.status === 400) {
+            this.$SegmentMessage.error(this, 'PID or title is empty');
+          } else if(err.request.status === 403) {
+            this.$SegmentMessage.error(this, 'Permission denied');
+          } else {
+            this.$SegmentMessage.error(this, 'Unkown error');
+          }
+        });
+    }
+  }
+};
+</script>

src/components/problem/list.vue

@@ -44,9 +44,13 @@
           />
           <el-divider />
           <el-checkbox v-model="showTags"> Show Tags</el-checkbox>
+          <el-divider />
+          <el-button type="info" style="width: 100%" @click="$store.state.createProblem.displayCreateProblem = true" plain>Create New Problem</el-button>
         </el-card>
       </el-col>
     </el-row>
+
+    <CreateProblem />
   </div>
 </template>
 
@@ -55,6 +59,7 @@ import apiurl from './../../apiurl';
 import AjaxTable from './../lib/AjaxTable.vue';
 import JumpToProblem from './../lib/jumpToProblem.vue';
 import listTag from './listTag.vue';
+import CreateProblem from './create.vue';
 
 export default {
   name: 'ProblemList',
@@ -83,7 +88,7 @@ export default {
         sortable: false
       }, {
         name: 'tag',
-        width: '400',
+        width: '300',
         align: 'right',
         sortable: false
       }],
@@ -166,7 +171,8 @@ export default {
   },
   components: {
     AjaxTable,
-    JumpToProblem
+    JumpToProblem,
+    CreateProblem
   },
   mounted() {
     this.get_list_lenth();

src/components/user/login.vue

@@ -4,7 +4,6 @@
       title="Login"
       :visible.sync="$store.state.user.showlogin"
       :destroy-on-close="true"
-      :close-on-click-modal="false"
       width="500px"
       class="max-screen"
       >

src/store/createProblem.js

@@ -0,0 +1,7 @@
+const createProblem = {
+  state: {
+    displayCreateProblem: false
+  }
+};
+
+export default createProblem;

src/store/store.js

@@ -6,11 +6,13 @@ Vue.use(Vuex);
 import userstore from './user';
 import captchastore from './captcha';
 import tagsstore from './tags';
+import createProblem from './createProblem';
 
 export default new Vuex.Store({
   modules: {
     user: userstore,
     captcha: captchastore,
     tags: tagsstore,
+    createProblem: createProblem,
   }
 });