Skip to content

Commit 0076ae4

Browse files
szdytomszdytom
authored
Merge pull request #115 from segment-oj/update-user-page-ztl
[feature] new user page
2 parents ab3941f + 833a661 commit 0076ae4

File tree

6 files changed

+363
-295
lines changed

6 files changed

+363
-295
lines changed

‎src/components/lib/MarkdownEditor.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<el-tab-pane label="Edit" name="first" />
55
<el-tab-pane label="Preview" name="second" />
66
</el-tabs>
7-
<div :class="editorVisbleClassName">
7+
<div :class="editorVisibleClassName">
88
<textarea
99
:value="value"
1010
@input="handleInput($event.target.value)"
@@ -89,9 +89,9 @@ export default {
8989
computed: {
9090
editorVisbleClassName() {
9191
if (this.activeName == 'first') {
92-
return 'dispaly-visble';
92+
return 'display-visible';
9393
}
94-
return 'dispaly-invisble';
94+
return 'display-invisible';
9595
}
9696
},
9797
props: {
@@ -114,11 +114,11 @@ export default {
114114
</script>
115115

116116
<style scoped>
117-
.dispaly-visble {
117+
.display-visible {
118118
display: block;
119119
}
120120
121-
.dispaly-invisble {
121+
.display-invisible {
122122
display: none;
123123
}
124124

‎src/components/user/content.vue‎

Lines changed: 32 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -6,161 +6,39 @@
66
<img src="./../../assets/icon/SOJ-thick-white-background.png" />
77
</el-avatar>
88
</el-card>
9-
<!-- Mobile screen -->
10-
<el-card class="item float" v-if="!smallScreen">
11-
<el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');" icon="el-icon-edit" circle />
12-
<el-button @click="$router.go(-1);" icon="el-icon-back" circle />
13-
</el-card>
14-
<!-- Normal screen -->
15-
<el-card class="item" v-else>
16-
<el-button v-if="ismine" type="primary" @click="$router.push('/account/' + $route.params.id + '/edit');">Edit</el-button>
17-
<el-button @click="$router.go(-1);">Back</el-button>
18-
</el-card>
199
</div>
20-
<div id="info" v-loading="userLoading">
21-
<el-row :gutter="20">
22-
<el-col :span="18">
23-
<el-card shadow="never">
24-
<div slot="header" class="clearfix">
25-
<i class="el-icon-user" />
26-
<span class="label"> User</span>
27-
Name
28-
</div>
29-
{{username}}
30-
</el-card>
31-
</el-col>
32-
<el-col :span="6">
33-
<el-card shadow="never">
34-
<div slot="header" class="clearfix">
35-
<i class="el-icon-warning-outline" />
36-
<span class="label"> User</span>
37-
ID
38-
</div>
39-
{{userid}}
40-
</el-card>
41-
</el-col>
42-
</el-row>
43-
<el-row :gutter="20">
44-
<el-col :span="12">
45-
<el-card shadow="never" class="item">
46-
<div slot="header" class="clearfix">
47-
<i class="el-icon-message" /> Email
48-
</div>
49-
{{email}}
50-
</el-card>
51-
</el-col>
52-
<el-col :span="6">
53-
<el-card shadow="never" class="item">
54-
<div slot="header" class="clearfix">
55-
<i class="el-icon-date" />
56-
<span class="label"> Time Joined</span>
57-
</div>
58-
{{timeJoin}}
59-
</el-card>
60-
</el-col>
61-
<el-col :span="6">
62-
<el-card shadow="never" class="item">
63-
<div slot="header" class="clearfix">
64-
<i class="el-icon-time" />
65-
<span class="label"> Last Login</span>
66-
</div>
67-
{{lastLogin}}
68-
</el-card>
69-
</el-col>
70-
</el-row>
71-
<el-row :gutter="20">
72-
<el-col :span="4">
73-
<el-card class="item">
74-
<div slot="header" class="clearfix">
75-
<i class="el-icon-s-operation" />
76-
<span class="label"> Lang</span>
77-
</div>
78-
{{langTable[lang].label}}
79-
</el-card>
80-
</el-col>
81-
<el-col :span="6">
82-
<el-card shadow="never" class="item">
83-
<div slot="header" class="clearfix">
84-
<i class="el-icon-check" />
85-
<span class="label"> Solved</span>
86-
<div class="small-label"> AC</div>
87-
</div>
88-
<div class="clearfix">
89-
{{solved}}
90-
<span class="label"> Problems</span>
91-
</div>
92-
</el-card>
93-
</el-col>
94-
<el-col :span="6">
95-
<el-card shadow="never" class="item">
96-
<div slot="header" class="clearfix">
97-
<i class="el-icon-upload2" />
98-
<span class="label"> Submited</span>
99-
<div class="small-label"> SU</div>
100-
</div>
101-
<div class="clearfix">
102-
{{submit}}
103-
<span class="label"> Times</span>
104-
</div>
105-
</el-card>
106-
</el-col>
107-
<el-col :span="8">
108-
<el-card shadow="never" class="item">
109-
<div slot="header" class="clearfix">
110-
<i class="el-icon-finished" />
111-
<span class="label"> AC</span>
112-
Rate
113-
</div>
114-
<el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
115-
</el-card>
116-
</el-col>
117-
</el-row>
118-
<el-card shadow="never" class="item">
119-
<div slot="header" class="clearfix">
120-
<i class="el-icon-chat-line-square" />
121-
Introductions
122-
</div>
123-
<MarkdownContainer v-if="introduction" :content="introduction"/>
124-
</el-card>
125-
<el-card class="item">
126-
<div slot="header" class="clearfix"><i class="el-icon-user" /> Permissions</div>
127-
<el-checkbox v-model="isStaff" disabled>Staff</el-checkbox>
128-
<el-checkbox v-model="isRoot" disabled>Root</el-checkbox>
129-
<el-checkbox v-model="isActive" disabled>Active</el-checkbox>
130-
</el-card>
10+
11+
<div id="info">
12+
<el-tabs v-model="activetab" :tab-position="'right'">
13+
<el-tab-pane label="Information" name="first">
14+
<userinfo></userinfo>
15+
</el-tab-pane>
16+
<el-tab-pane v-if="canedit" label="Edit" name="second">
17+
<useredit></useredit>
18+
</el-tab-pane>
19+
<el-tab-pane v-if="ismine" label="Security" name="third">
20+
<usersucure></usersucure>
21+
</el-tab-pane>
22+
</el-tabs>
13123
</div>
132-
</div>
24+
</div>
13325
</template>
13426

13527
<script>
136-
import timeFormat from './../../methods/time';
13728
import apiurl from './../../apiurl';
138-
import MarkdownContainer from './../lib/MarkdownContainer.vue';
139-
import sfconfig from './../../sfconfig';
29+
import userinfo from './information.vue';
30+
import useredit from './edit.vue';
31+
import usersucure from './secure.vue';
14032
14133
export default {
14234
name: 'UserHomepage',
14335
data() {
14436
return {
145-
staff: false,
146-
username: 'Unknown',
147-
userid: '-',
148-
email: 'Unknown',
149-
introduction: null,
150-
solved: '-',
151-
submit: '-',
152-
rate: 100,
37+
activetab: 'first',
15338
ismine: false,
154-
timeJoin: 'Unknown',
155-
lastLogin: 'Unknown',
156-
userLoading: true,
157-
isRoot: false,
158-
isStaff: false,
159-
isActive: true,
39+
canedit: false,
16040
avatarWidth: 800 < screen.width ? 300 : screen.width - 40,
16141
smallScreen: 700 < screen.width,
162-
langTable: sfconfig.langTable,
163-
lang: 0
16442
};
16543
},
16644
methods: {
@@ -169,43 +47,14 @@ export default {
16947
.get(apiurl('/account/' + this.$route.params.id))
17048
.then(res => {
17149
let data = res.data.res;
172-
this.username = data.username;
17350
this.userid = data.id;
174-
this.email = data.email;
175-
this.solved = data.solved;
176-
this.submit = data.submit_time;
177-
this.timeJoin = timeFormat(data.date_joined);
178-
if (data.last_login == null) {
179-
this.lastLogin = 'Never';
180-
} else {
181-
this.lastLogin = timeFormat(data.last_login);
182-
}
183-
this.isRoot = data.is_superuser;
18451
this.isStaff = data.is_staff;
185-
this.isActive = data.is_active;
186-
this.lang = data.lang;
187-
if (this.submit === 0) {
188-
this.rate = 100;
189-
} else {
190-
this.rate = (this.solved * 100.0) / this.submit;
191-
this.rate = this.rate.toFixed(2);
192-
}
193-
if (this.$store.state.user.isStaff || this.userid == String(this.$store.state.user.userid)) {
52+
if (this.userid == String(this.$store.state.user.userid)) {
19453
this.ismine = true;
19554
}
196-
this.$axios
197-
.get(apiurl('/account/' + this.$route.params.id + '/introduction'))
198-
.then(detail => {
199-
this.introduction = detail.data.res.introduction;
200-
})
201-
.catch(err => {
202-
if(err.request.status === 404) {
203-
this.$SegmentMessage.error(this, 'User does not exist');
204-
} else {
205-
this.$SegmentMessage.error(this, 'Unknown error');
206-
}
207-
});
208-
this.userLoading = false;
55+
if (this.$store.state.user.isStaff || this.ismine) {
56+
this.canedit = true;
57+
}
20958
})
21059
.catch(err => {
21160
if(err.request.status === 404) {
@@ -216,35 +65,19 @@ export default {
21665
this.userLoading = false;
21766
});
21867
},
219-
ACRateColorMode(percentage) {
220-
if (percentage < 20) {
221-
return '#F56C6C';
222-
} else if (percentage < 30) {
223-
return '#E6A23C';
224-
} else if (percentage < 50) {
225-
return '#67C23A';
226-
}
227-
return '#409EFF';
228-
}
22968
},
23069
mounted() {
23170
this.showHomepage();
23271
},
23372
components: {
234-
MarkdownContainer
73+
userinfo,
74+
useredit,
75+
usersucure
23576
}
23677
};
23778
</script>
23879

23980
<style scoped>
240-
.small-label {
241-
display: none;
242-
}
243-
244-
.clearfix {
245-
display: block ruby;
246-
}
247-
24881
.item {
24982
margin-top: 20px;
25083
}
@@ -262,20 +95,6 @@ export default {
26295
#user-content {
26396
display: inline;
26497
}
265-
266-
#info {
267-
margin-left: 0;
268-
margin-top: 20px;
269-
max-width: 100vw;
270-
}
271-
272-
.label {
273-
display: none;
274-
}
275-
276-
.small-label {
277-
display: unset;
278-
}
27998
}
28099
281100
@media only screen and (max-width: 700px) {
@@ -297,5 +116,11 @@ export default {
297116
z-index: 1000;
298117
opacity: 1;
299118
}
119+
120+
#info {
121+
margin-top: 20px;
122+
margin-left: 0;
123+
width: 800px;
124+
}
300125
}
301126
</style>

0 commit comments

Comments
 (0)