Skip to content

Commit 523e3dc

Browse files
szdytomszdytom
authored
Merge pull request #91 from segment-oj/improve-problem-list-add-problem
improved problem list style
2 parents 69017c9 + f755534 commit 523e3dc

File tree

8 files changed

+211
-73
lines changed

8 files changed

+211
-73
lines changed

‎src/assets/css/basic.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,36 @@ h3::before {
191191
margin-top: 0;
192192
}
193193

194+
.problem-list-pagination {
195+
border: 1px solid #ebeef5;
196+
background: #ffffff;
197+
margin-left: -20px;
198+
padding: 10px;
199+
height: 36px;
200+
max-width: 100vw;
201+
width: 827px;
202+
text-align: center;
203+
bottom: 0;
204+
position: fixed;
205+
}
206+
207+
.el-dialog,
208+
.el-dialog__wrapper {
209+
z-index: 200000 !important;
210+
}
211+
212+
.v-modal {
213+
z-index: 100000 !important;
214+
}
215+
194216
* {
195217
border-radius: 0 !important;
196218
}
219+
220+
.icon-error {
221+
color: #f56c6c !important;
222+
}
223+
224+
.icon-success {
225+
color: #67c23a !important;
226+
}

‎src/components/lib/AjaxTable.vue‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="ajax-table">
2+
<div>
33
<el-table
44
v-loading="loading"
55
:data="tableData"
@@ -16,14 +16,15 @@
1616
:sortable="item.sortable"
1717
/>
1818
</el-table>
19-
<el-pagination
20-
:page-size="this.limit"
21-
background
22-
layout="prev, pager, next, jumper"
23-
@current-change="this.onPageChange"
24-
class="pagination"
25-
:total="this.own_total"
26-
/>
19+
<div :class="pagination_class + ' top-zindex'">
20+
<el-pagination
21+
:page-size="this.limit"
22+
background
23+
layout="prev, pager, next, jumper"
24+
@current-change="this.onPageChange"
25+
:total="this.own_total"
26+
/>
27+
</div>
2728
</div>
2829
</template>
2930

@@ -111,15 +112,11 @@ export default {
111112
default_sort: {
112113
type: Object,
113114
default: null
115+
},
116+
pagination_class: {
117+
type: String,
118+
default: 'pagination'
114119
}
115120
},
116121
};
117122
</script>
118-
119-
<style scoped>
120-
.pagination {
121-
height: 36px;
122-
margin-top: 20px;
123-
text-align: center;
124-
}
125-
</style>

‎src/components/lib/jumpToProblem.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<div>
33
<el-card>
4-
<i class="el-icon-s-promotion" />
5-
Jump to
4+
<div slot="header" class="clearfic">
5+
<i class="el-icon-s-promotion" />
6+
Jump to
7+
</div>
68
<el-input
79
placeholder="PID"
810
v-model="jumpToProblem"
9-
class="input-with-select"
10-
style="margin-top: 9px;"
11+
class="input-with-select"
1112
>
1213
<template slot="prepend">#.</template>
1314
<el-button slot="append" icon="el-icon-top-right" @click="jump"></el-button>

‎src/components/problem/create.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<el-dialog
3+
title="Create New Problem"
4+
:visible.sync="$store.state.createProblem.displayCreateProblem"
5+
width="500px"
6+
class="max-screen"
7+
>
8+
<el-form>
9+
<div class="icon-lable">
10+
<i class="el-icon-s-operation" />
11+
PID
12+
</div>
13+
<el-form-item prop="username">
14+
<el-input v-model="pid" placeholder="PID">
15+
<template slot="prepend">#.</template>
16+
<i v-if="errorPID" slot="suffix" class="icon-error el-input__icon el-icon-circle-close"></i>
17+
<i v-else slot="suffix" class="icon-success el-input__icon el-icon-circle-check"></i>
18+
</el-input>
19+
</el-form-item>
20+
<div class="icon-lable">
21+
<i class="el-icon-edit-outline" />
22+
Title
23+
</div>
24+
<el-form-item>
25+
<el-input v-model="title" placeholder="Title">
26+
<i v-if="errorTitle" slot="suffix" class="icon-error el-input__icon el-icon-circle-close"></i>
27+
<i v-else slot="suffix" class="icon-success el-input__icon el-icon-circle-check"></i>
28+
</el-input>
29+
</el-form-item>
30+
<el-form-item>
31+
<el-button
32+
type="primary"
33+
v-on:click="Submit();"
34+
:disabled="errorPID || errorTitle"
35+
>
36+
Edit Detail
37+
</el-button>
38+
<el-button v-on:click="$store.state.createProblem.displayCreateProblem = false">Cancel</el-button>
39+
</el-form-item>
40+
</el-form>
41+
</el-dialog>
42+
</template>
43+
44+
<script>
45+
import apiurl from './../../apiurl';
46+
47+
export default {
48+
name: 'CreateProblem',
49+
data() {
50+
return {
51+
pid: null,
52+
title: null,
53+
errorPID: true,
54+
errorTitle: true
55+
};
56+
},
57+
watch: {
58+
pid(val) {
59+
if (val === '') {
60+
this.errorPID = true;
61+
} else {
62+
this.$axios
63+
.get(apiurl('/problem/' + String(val)))
64+
.then(() => {
65+
this.errorPID = true;
66+
})
67+
.catch(() => {
68+
this.errorPID = false;
69+
});
70+
}
71+
},
72+
title(val) {
73+
if (val !== null && val !== '') {
74+
this.errorTitle = false;
75+
}
76+
}
77+
},
78+
methods: {
79+
Submit() {
80+
this.$axios
81+
.post(apiurl('/problem'), {
82+
pid: this.pid,
83+
title: this.title,
84+
description: 'Input description'
85+
})
86+
.then(() => {
87+
this.$store.state.createProblem.displayCreateProblem = false;
88+
this.$router.push('/problem/' + this.pid + '/edit');
89+
})
90+
.catch(err => {
91+
if (err.request.status === 400) {
92+
this.$SegmentMessage.error(this, 'PID or title is empty');
93+
} else if(err.request.status === 403) {
94+
this.$SegmentMessage.error(this, 'Permission denied');
95+
} else {
96+
this.$SegmentMessage.error(this, 'Unkown error');
97+
}
98+
});
99+
}
100+
}
101+
};
102+
</script>

‎src/components/problem/list.vue‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,63 @@
11
<template>
22
<div>
3-
<el-row :gutter="20">
4-
<el-col :span="10">
3+
<el-row :gutter="20" style="margin-bottom: 30px;">
4+
<el-col :span="18">
5+
<el-card v-if="alive">
6+
<AjaxTable
7+
:ajax_url="ajax_url"
8+
:columns="columns"
9+
:limit="limit"
10+
:total="data_count"
11+
:process="process"
12+
:default_sort="{prop: 'pid', order: 'ascending'}"
13+
:costumData="{title:title}"
14+
pagination_class="problem-list-pagination"
15+
/>
16+
</el-card>
17+
</el-col>
18+
19+
<el-col :span="6">
520
<el-card>
6-
<i class="el-icon-search" />
7-
Search
21+
<div slot="header" class="clearfix">
22+
<i class="el-icon-search" />
23+
Search
24+
</div>
825
<el-input
926
placeholder="Search"
1027
v-model="searchTitle"
11-
class="input-with-select"
12-
style="margin-top: 9px;"
28+
class="input-with-select"
1329
clearable
1430
>
1531
</el-input>
1632
</el-card>
17-
</el-col>
18-
<el-col :span="6">
19-
<JumpToProblem />
20-
</el-col>
21-
<el-col :span="8">
22-
<el-card>
23-
<el-row :gutter="20">
24-
<el-col :span="16">
25-
<span>
26-
<i class="el-icon-s-grid" />
27-
Columns
28-
</span>
29-
<el-slider
30-
v-model="limit"
31-
:step="10"
32-
:min="10"
33-
style="margin-top: 10px;"
34-
/>
35-
</el-col>
36-
<el-col :span="8">
37-
<div>
38-
<i class="el-icon-collection-tag" />
39-
Show Tags
40-
</div>
41-
<el-switch
42-
v-model="showTags"
43-
active-color="#13ce66"
44-
inactive-color="#ff4949"
45-
style="margin-top: 18px;"
46-
/>
47-
</el-col>
48-
</el-row>
33+
<JumpToProblem class="item" />
34+
<el-card class="item">
35+
<span>
36+
<i class="el-icon-s-grid" />
37+
Columns
38+
</span>
39+
<el-slider
40+
v-model="limit"
41+
:step="10"
42+
:min="10"
43+
style="margin-top: 10px;"
44+
/>
45+
<el-divider />
46+
<el-checkbox v-model="showTags"> Show Tags</el-checkbox>
47+
<el-divider />
48+
<el-button
49+
style="width: 100%;"
50+
@click="$store.state.createProblem.displayCreateProblem = true;"
51+
size="medium"
52+
>
53+
<i class="el-icon-circle-plus" />
54+
Create New Problem
55+
</el-button>
4956
</el-card>
5057
</el-col>
5158
</el-row>
52-
<el-card class="item" v-if="alive">
53-
<AjaxTable
54-
:ajax_url="ajax_url"
55-
:columns="columns"
56-
:limit="limit"
57-
:total="data_count"
58-
:process="process"
59-
:default_sort="{prop: 'pid', order: 'ascending'}"
60-
:costumData="{title:title}"
61-
/>
62-
</el-card>
59+
60+
<CreateProblem />
6361
</div>
6462
</template>
6563

@@ -68,6 +66,7 @@ import apiurl from './../../apiurl';
6866
import AjaxTable from './../lib/AjaxTable.vue';
6967
import JumpToProblem from './../lib/jumpToProblem.vue';
7068
import listTag from './listTag.vue';
69+
import CreateProblem from './create.vue';
7170
7271
export default {
7372
name: 'ProblemList',
@@ -96,7 +95,7 @@ export default {
9695
sortable: false
9796
}, {
9897
name: 'tag',
99-
width: '400',
98+
width: '300',
10099
align: 'right',
101100
sortable: false
102101
}],
@@ -179,7 +178,8 @@ export default {
179178
},
180179
components: {
181180
AjaxTable,
182-
JumpToProblem
181+
JumpToProblem,
182+
CreateProblem
183183
},
184184
mounted() {
185185
this.get_list_lenth();

‎src/components/user/login.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
title="Login"
55
:visible.sync="$store.state.user.showlogin"
66
:destroy-on-close="true"
7-
:close-on-click-modal="false"
87
width="500px"
98
class="max-screen"
109
>

‎src/store/createProblem.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const createProblem = {
2+
state: {
3+
displayCreateProblem: false
4+
}
5+
};
6+
7+
export default createProblem;

‎src/store/store.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ Vue.use(Vuex);
66
import userstore from './user';
77
import captchastore from './captcha';
88
import tagsstore from './tags';
9+
import createProblem from './createProblem';
910

1011
export default new Vuex.Store({
1112
modules: {
1213
user: userstore,
1314
captcha: captchastore,
1415
tags: tagsstore,
16+
createProblem: createProblem,
1517
}
1618
});

0 commit comments

Comments
 (0)