HoangLaoTa
/
gk_se_web_report
2
1
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add ui assign teacher

Browse Source
master
HOANGLAOTA 4 months ago
parent 391738c4e1
commit 2021081587
6 changed files with 164 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/assets/imgs/icon_assign_class.png
  2. BIN
      public/assets/imgs/icon_group.png
  3. 162
      src/_screens/home/headmaster/headmaster.style.scss
  4. 64
      src/_screens/home/headmaster/index.js
  5. 15
      src/_screens/home/teacher/index.js
  6. 19
      src/_screens/home/teacher/teacherHome.style.scss

BIN
public/assets/imgs/icon_assign_class.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
public/assets/imgs/icon_group.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

162
src/_screens/home/headmaster/headmaster.style.scss
Unescape View File

@ -1,5 +1,15 @@
@import "/src/_styles/mixin"; @import "/src/_styles/mixin";
:root {
--height-avatar: 88px;
--width-avatar: 88px;
@include screen_pc_sm {
--height-avatar: 70px;
--width-avatar: 70px;
}
}
.headmaster-home-container { .headmaster-home-container {
display: flex; display: flex;
gap: 32px; gap: 32px;
@ -160,12 +170,10 @@
gap: 16px; gap: 16px;
} }
.headmaster-home-item-teacher { .headmaster-home-item-teacher-container {
padding: 8px; padding: 8px 8px 32px;
border: 1.25px solid #e5e5e5; border: 1.25px solid var(--primary-color);
border-radius: 4px; border-radius: 4px;
display: flex;
gap: 16px;
background-color: #fff; background-color: #fff;
transition: all 0.5s linear; transition: all 0.5s linear;
@ -174,83 +182,94 @@
cursor: pointer; cursor: pointer;
} }
.headmaster-home-avatar-teacher { .headmaster-home-item-teacher {
width: 88px; display: flex;
height: 88px; gap: 16px;
border-radius: 5px; border-bottom: 1px solid #939393;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, padding-bottom: 12px;
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
@include screen_pc_sm {
height: 70px;
width: 70px;
}
img { .headmaster-home-avatar-teacher {
width: 100%; width: var(--width-avatar);
height: 100%; height: var(--height-avatar);
object-fit: cover;
border-radius: 5px; border-radius: 5px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
// @include screen_pc_sm {
// height: 70px;
// width: 70px;
// }
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
} }
}
.headmaster-home-detail-teacher {
display: flex;
flex: 1;
justify-content: space-between;
gap: 24px;
.headmaster-home-info-teacher { .headmaster-home-detail-teacher {
display: flex; display: flex;
flex-direction: column; flex: 1;
justify-content: space-between;
.headmaster-info-teacher-name { gap: 24px;
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
.headmaster-info-teacher-text { .headmaster-home-info-teacher {
font-size: 1.8rem; display: flex;
} flex-direction: column;
} position: relative;
flex: 1;
height: 100%;
.headmaster-home-criteria-teacher { .headmaster-info-teacher-name {
display: flex; font-size: 2rem;
flex-direction: column; font-weight: 700;
color: var(--primary-color);
}
.headmaster-criteria-teacher-title { .headmaster-info-teacher-text {
font-size: 2rem; font-size: 1.8rem;
font-weight: 700; }
color: var(--primary-color);
} }
.headmaster-criteria-teacher-row { .headmaster-home-criteria-teacher {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
gap: 8px; position: relative;
.criteria-teacher-title { .headmaster-criteria-teacher-title {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
color: var(--primary-color);
} }
.headmaster-criteria-teacher-criteria { .headmaster-criteria-teacher-row {
font-size: 1.8rem; display: flex;
font-weight: 400; justify-content: space-between;
position: relative; gap: 8px;
padding-left: 12px;
.criteria-teacher-title {
&::before { font-size: 2rem;
content: ""; font-weight: 700;
display: block; }
position: absolute;
left: 0; .headmaster-criteria-teacher-criteria {
top: 12px; font-size: 1.8rem;
width: 5px; font-weight: 400;
height: 5px; position: relative;
background-color: var(--primary-color); padding-left: 12px;
border-radius: 50%;
&::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 12px;
width: 5px;
height: 5px;
background-color: var(--primary-color);
border-radius: 50%;
}
} }
} }
} }
@ -259,4 +278,15 @@
} }
} }
} }
.headmaster-home-teacher-assign-text {
position: absolute;
bottom: -4rem;
left: 0;
font-weight: 700;
@include screen_pc_sm {
bottom: -4.6rem;
}
}
} }

64
src/_screens/home/headmaster/index.js
Unescape View File

@ -290,40 +290,44 @@ export default function HeadmasterHome() {
)} )}
{listTeacher.map((item, index) => { {listTeacher.map((item, index) => {
return ( return (
<div className="headmaster-home-item-teacher" key={index} onClick={() => handleClickTeacherItem(item)}> <div className="headmaster-home-item-teacher-container" key={index} onClick={() => handleClickTeacherItem(item)}>
<div className="headmaster-home-avatar-teacher"> <div className="headmaster-home-item-teacher" >
<img src={configConstants.BASE_URL + item?.avatar} /> <div className="headmaster-home-avatar-teacher">
</div> <img src={configConstants.BASE_URL + item?.avatar} />
<div className="headmaster-home-detail-teacher">
<div className="headmaster-home-info-teacher">
<p className="headmaster-info-teacher-name">
{item?.teacher_name}
</p>
<p className="headmaster-info-teacher-text">
{item?.email}
</p>
<p className="headmaster-info-teacher-text">
{item?.phone}
</p>
</div> </div>
<div className="headmaster-home-criteria-teacher"> <div className="headmaster-home-detail-teacher">
<div className="headmaster-criteria-teacher-row"> <div className="headmaster-home-info-teacher">
<p className="headmaster-criteria-teacher-title"> <p className="headmaster-info-teacher-name">
Mức độ CĐS Sunday English {item?.teacher_name}
</p> </p>
<RateStar rate={item?.criteria_teacher?.criteria_level} /> <p className="headmaster-info-teacher-text">
</div> {item?.email}
<div className="headmaster-criteria-teacher-row">
<p className="headmaster-criteria-teacher-criteria">
Tiêu chí giao bài
</p> </p>
<RateStar rate={item?.criteria_teacher?.assign_number_level} /> <p className="headmaster-info-teacher-text">
</div> {item?.phone}
<div className="headmaster-criteria-teacher-row">
<p className="headmaster-criteria-teacher-criteria">
Tiêu chí tỷ lệ học sinh làm bài
</p> </p>
<RateStar rate={item?.criteria_teacher?.student_done_per_level} /> <p className="headmaster-home-teacher-assign-text">{'Số lần giao bài: ' + item?.total_assign}</p>
</div>
<div className="headmaster-home-criteria-teacher">
<div className="headmaster-criteria-teacher-row">
<p className="headmaster-criteria-teacher-title">
Mức độ CĐS Sunday English
</p>
<RateStar rate={item?.criteria_teacher?.criteria_level} />
</div>
<div className="headmaster-criteria-teacher-row">
<p className="headmaster-criteria-teacher-criteria">
Tiêu chí giao bài
</p>
<RateStar rate={item?.criteria_teacher?.assign_number_level} />
</div>
<div className="headmaster-criteria-teacher-row">
<p className="headmaster-criteria-teacher-criteria">
Tiêu chí tỷ lệ học sinh làm bài
</p>
<RateStar rate={item?.criteria_teacher?.student_done_per_level} />
</div>
<p className="headmaster-home-teacher-assign-text">{'Số lớp đã giao: ' + item?.assign_class + '/' + item?.total_class}</p>
</div> </div>
</div> </div>
</div> </div>

15
src/_screens/home/teacher/index.js
Unescape View File

@ -13,6 +13,7 @@ import {
LIST_SCHOOL_YEAR, LIST_SCHOOL_YEAR,
LIST_SEMESTER, LIST_SEMESTER,
listAlphabet, listAlphabet,
PRIMARY_COLOR,
} from "../../../_constants/common"; } from "../../../_constants/common";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { apiCaller, history } from "../../../_helpers"; import { apiCaller, history } from "../../../_helpers";
@ -152,6 +153,20 @@ export default function TeacherHome() {
Áp dụng Áp dụng
</PrimaryButton> </PrimaryButton>
</div> </div>
<div className="d-flex gap-16 justify-content-center align-item-center" style={{padding: '24px 16px 0', width: '100%'}}>
<div className="teacher-home-info-assign-box">
<img src="/assets/imgs/icon_group.png" />
<span style={{fontWeight: 700}}>{"Tổng số lớp: "}
<span style={{color: PRIMARY_COLOR}}>5</span>
</span>
</div>
<div className="teacher-home-info-assign-box">
<img src="/assets/imgs/icon_assign_class.png" />
<span style={{fontWeight: 700}}>{"Tổng số lần giao: "}
<span style={{color: PRIMARY_COLOR}}>50</span>
</span>
</div>
</div>
<div className="teacher-home-overview"> <div className="teacher-home-overview">
<p className="teacher-home-overview-title font_news"> <p className="teacher-home-overview-title font_news">
Mức độ CĐS Sunday Englsih của Giáo viên Mức độ CĐS Sunday Englsih của Giáo viên

19
src/_screens/home/teacher/teacherHome.style.scss
Unescape View File

@ -17,9 +17,26 @@
gap: 16px; gap: 16px;
} }
.teacher-home-info-assign-box {
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 6px 24px 6px 8px;
background-color: #fff;
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
}
.teacher-home-overview { .teacher-home-overview {
padding: 16px; padding: 16px;
margin: 48px 16px 0; margin: 24px 16px 0;
box-shadow: 0px 0px 8px 0px #00000040; box-shadow: 0px 0px 8px 0px #00000040;
border-radius: 12px; border-radius: 12px;
background-color: #fff; background-color: #fff;

Write Preview
Loading…
Cancel
Save