Created
June 26, 2020 15:13
-
-
Save hereiscasio/da1206ac5562eedb82dcc4293e3b3857 to your computer and use it in GitHub Desktop.
糟糕的 Template 寫法
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template lang="pug"> | |
el-dialog( | |
v-if="teamDetailsIsNotEmpty" | |
:visible="visible" | |
:before-close="cleanUpAndClosePanel" | |
@close="closePanel" | |
width="560px" | |
) | |
template(slot="title" v-if="dataExistedInPrevMonth") | |
.toolbar | |
span.toolbar__left(v-if="shouldShowPrevMonthButton") | |
el-button.button__show-history.has-text-weight-bold( | |
type="text" | |
@click="showDataInPrevMonth()" | |
) | |
i.at-text-green.el-icon-arrow-left | |
span.at-text-green {{ prevYearWithMonth }} | |
span.at-text-green.toolbar__center {{ title }} | |
template(v-if="!dataExistedInPrevMonth") {{ $t("components.team-level.no-data") }} | |
.content-for-mentor(v-else) | |
section.introduction | |
.section__left | |
.avatar | |
at-avatar(:source="teacherInfo.avatar") | |
.description | |
h3.name-of-teacher {{ teacherInfo.name }} | |
h3.current-level.has-text-weight-bold {{ levelName }} | |
ul.section__right | |
li {{ $t("components.team-level.net-income") }}:{{ teamDetails.net_income }} | |
li {{ $t("components.team-level.team-income") }}:{{ teamDetails.team_income }} | |
li {{ $t("components.team-level.total-team-income") }}:{{ teamDetails.total_team_income }} | |
section.metrics | |
.metrics__title.has-text-weight-bold | |
| {{ levelName }} {{ $t("components.team-level.metric") }} | |
ul | |
template(v-for="(metricResult, metricTitle) in performance") | |
li | |
i.fas.fa-check.icon-check(v-if="metricResult") | |
| {{ metricTitle }} | |
i.fas.fa-times.icon-close.at-text-red(v-else) | |
| {{ metricTitle }} | |
section.level-downgrade-warning.at-text-red(v-if="shouldShowDowngradeWarning") | |
| {{ $t("components.team-level.downgrade-warning", {date: nextYearWithMonth}) }} | |
section.dropdown__show_team_members( | |
v-if="teamDetails.members.length" | |
@click="shouldShowTeamMembers = !shouldShowTeamMembers" | |
) | |
span {{ $t("components.team-level.his-team-member") }} | |
i.fas(:class="shouldShowTeamMembers ? 'fa-angle-up' : 'fa-angle-down'") | |
el-table( | |
v-show="shouldShowTeamMembers" | |
:data="teamDetails.members" | |
stripe | |
style="width: 100%" | |
) | |
el-table-column( | |
type="index" | |
width="50" | |
align="center" | |
) | |
el-table-column( | |
prop="name" | |
:label="$t('components.team-level.member-listing.name')" | |
align="center" | |
) | |
template(slot-scope="scope") | |
a(target="_blank" :href="getTeacherProfileURL(scope.row.slug)") | |
| {{ scope.row.name }} | |
el-table-column( | |
prop="level" | |
:label="$t('components.team-level.member-listing.level')" | |
align="center" | |
) | |
template(slot-scope="scope") | |
| {{ $t(`components.teacher-level.${scope.row.level}`) }} | |
el-table-column( | |
prop="net_income" | |
:label="$t('components.team-level.member-listing.net-income')" | |
align="center" | |
) | |
el-table-column( | |
prop="team_income" | |
:label="$t('components.team-level.member-listing.team-income')" | |
align="center" | |
) | |
</template> | |
<script> | |
import { METRICS } from '~/amazingtalker/module/teacher-level-metrics' | |
import { mapState } from 'vuex' | |
import { path } from '~/at-libs' | |
import * as deepFreeze from 'deep-freeze' | |
import _ from 'lodash' | |
import moment from 'moment' | |
export default { | |
watch: { | |
visible(value) { | |
if (!value) return | |
this.assignDataType() | |
this.setCurrentQuery() | |
this.getTeamDetails() | |
} | |
}, | |
props: { | |
visible: { | |
type: Boolean, | |
required: true, | |
default: false | |
}, | |
teacherInfo: { | |
type: Object, | |
required: true | |
} | |
}, | |
data() { | |
this.currentQuery = null | |
return { | |
dataType: '', | |
currentDateString: moment().toISOString(), | |
shouldShowTeamMembers: false, | |
teamDetails: {} | |
} | |
}, | |
computed: { | |
...mapState({ | |
api: state => state.helper.api | |
}), | |
shouldShowDowngradeWarning() { | |
if (this.dataType === 'future') return false | |
return this.teamDetails.months_failed === 2 | |
}, | |
levelName() { | |
if (_.isNull(this.teamDetails.level)) return '' | |
if (_.isNull(this.teamDetails.level_status)) | |
return this.$t(`components.teacher-level.${this.teamDetails.level}`) | |
return this.$t(`components.teacher-level.${this.teamDetails.level_status.level_validated}`) | |
}, | |
performance() { | |
if (_.isNull(this.teamDetails.level_status)) return {} | |
const level = this.teamDetails.level_status.level_validated | |
const levelMetrics = METRICS[level] | |
const reducer = (carry, meaning, metric) => | |
_.assign(carry, { [meaning]: this.teamDetails.level_status[metric] }) | |
return _.reduce(levelMetrics, reducer, {}) | |
}, | |
teamDetailsIsNotEmpty() { | |
return !_.isEmpty(this.teamDetails) | |
}, | |
shouldShowPrevMonthButton() { | |
if (this.dataType === 'future') return false | |
return this.dataExistedInPrevMonth | |
}, | |
title() { | |
const i18nPath = 'components.team-level.next-level-title' | |
if (this.dataType === 'future') return this.$t(i18nPath) | |
return this.currYearWithMonth | |
}, | |
dataExistedInPrevMonth() { | |
if (_.isEmpty(this.teamDetails)) return false | |
if (_.isNull(this.teamDetails.level)) return false | |
return true | |
}, | |
prevYearWithMonth() { | |
return moment(this.currentDateString) | |
.subtract(1, 'month') | |
.format('YYYY.MM') | |
}, | |
currYearWithMonth() { | |
return moment(this.currentDateString).format('YYYY.MM') | |
}, | |
nextYearWithMonth() { | |
return moment(this.currentDateString) | |
.add(1, 'month') | |
.format('YYYY.MM') | |
} | |
}, | |
methods: { | |
assignDataType(value) { | |
if (value !== undefined) return (this.dataType = value) | |
this.dataType = this.teacherInfo.showNextLevelData ? 'future' : 'initial' | |
}, | |
closePanel() { | |
this.$emit('update:visible', false) | |
}, | |
cleanUpAndClosePanel() { | |
this.assignDataType('') | |
this.currentQuery = null | |
this.currentDateString = moment().toISOString() | |
this.shouldShowTeamMembers = false | |
this.teamDetails = {} | |
this.closePanel() | |
}, | |
setCurrentQuery() { | |
const queryMap = { | |
initial: { | |
started_at: null, | |
level: null, | |
include_months_failed: true | |
}, | |
onDemand: { | |
started_at: this.currentDateString, | |
level: null, | |
include_months_failed: null | |
}, | |
future: { | |
started_at: null, | |
level: this.teacherInfo.next_level, | |
include_months_failed: null | |
} | |
} | |
this.currentQuery = queryMap[this.dataType] | |
}, | |
async getTeamDetails() { | |
const endPoint = path.flash.report.GET_team_details.replace(':teacher_id', this.teacherInfo.id) | |
const { data } = await this.api.get(endPoint, this.currentQuery) | |
this.teamDetails = deepFreeze(data) | |
}, | |
subtract1Month() { | |
this.currentDateString = moment(this.currentDateString) | |
.subtract(1, 'month') | |
.toISOString() | |
}, | |
showDataInPrevMonth() { | |
this.subtract1Month() | |
this.assignDataType('onDemand') | |
this.setCurrentQuery() | |
this.getTeamDetails() | |
}, | |
getTeacherProfileURL(slug) { | |
return this.$path('teacherProfile', { slug }) | |
} | |
} | |
} | |
</script> | |
<style lang="stylus" scoped> | |
@import '~assets/stylesheets/base/_layout' | |
.toolbar | |
display flex | |
position relative | |
align-items center | |
.toolbar__center | |
display block | |
position absolute | |
left 0 | |
right 0 | |
text-align center | |
z-index 0 | |
.toolbar__left | |
position relative | |
z-index 1 | |
.container__tabs | |
text-align center | |
height 80px | |
width 100% | |
margin 0 auto 24px | |
max-width 300px | |
display flex | |
justify-content space-between | |
.tab__title | |
margin-top 8px | |
.container__tab | |
display flex | |
flex-direction column | |
align-items center | |
padding 16px | |
::v-deep .el-dialog__header | |
padding 20px 20px 0 | |
::v-deep .el-dialog__body | |
padding 0px 20px 16px | |
.dropdown__show_team_members | |
display inline-block | |
height 45px | |
line-height 45px | |
font-size 16px | |
cursor pointer | |
text-align center | |
span | |
display inline-block | |
margin-right 0.5em | |
+at-until($tablet) | |
display block | |
text-align left | |
.name-of-teacher | |
font-size 18px | |
font-weight 600 | |
.headline | |
display block | |
width 100% | |
line-height 1.5 | |
font-size 14px | |
.metrics__title | |
margin 8px 0px | |
border-bottom 1px solid #eae1e1 | |
padding-bottom 4px | |
.metrics | |
ul | |
margin-bottom 8px | |
list-style-type none | |
.introduction | |
display flex | |
justify-content space-between | |
align-items center | |
.section__left | |
display flex | |
align-items center | |
margin 16px 0px | |
.section__right | |
margin-right 8px | |
.avatar | |
flex 0 0 auto | |
margin-right 10px | |
width 60px !important | |
height 60px !important | |
+at-from($tablet) | |
margin-right 20px | |
margin-bottom 0 | |
width 80px | |
height 80px | |
.button__show-history | |
color $ci-green | |
.el-col | |
height 100% | |
.section__right | |
list-style-type none | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment