From dbd91411e94881b3f5637aee96da516d8450407c Mon Sep 17 00:00:00 2001 From: geraosio Date: Wed, 19 Aug 2020 02:10:15 -0500 Subject: [PATCH] Restructure to add ReportType to Area * Rename Categories to ReportTypes --- src/styles/styles.scss | 2 +- src/typings/index.ts | 5 +- src/views/Home.vue | 360 ++++++++++++++++++++++------------------- 3 files changed, 198 insertions(+), 169 deletions(-) diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 6f6339a..c81e74b 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -37,7 +37,7 @@ code { } .container { - margin: $margin-y-axis $margin-x-axis; + margin: $margin-y-axis $margin-x-axis #{$margin-y-axis * 2} ; } .header { diff --git a/src/typings/index.ts b/src/typings/index.ts index a831be8..ed0dc98 100644 --- a/src/typings/index.ts +++ b/src/typings/index.ts @@ -17,12 +17,13 @@ export interface Area { id: string; name: string; phones: string[]; + reportTypes: ReportType[]; } export interface ReportType { - id: string; + id?: string; name: string; - severity: string; + severity: number; } export interface Report { diff --git a/src/views/Home.vue b/src/views/Home.vue index a12d4d7..be59a64 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -34,7 +34,7 @@ v-model="selectedMachine" :options="machines" optionLabel="name" - placeholder="Selecciona la máquina" + :placeholder="machines ? 'Selecciona la máquina' : ''" :filter="machines && machines.length > 6" filterPlaceholder="Busca la máquina" :disabled="!machines" @@ -45,29 +45,27 @@
-
Categoría
+
Area
- Selecciona una categoría + Selecciona un area
@@ -77,8 +75,11 @@ rows="2" :autoResize="true" @focus="showCommentTemplates = true" + :disabled="!areas" /> - +
+ + + + Selecciona un tipo de reporte
+ +
@@ -129,6 +151,11 @@ const allPlantsQuery = gql`query getPlants { id name phones + reportTypes { + id + name + severity + } } machines { id @@ -178,14 +205,27 @@ export default class Home extends Vue { // Plants private selectedPlant: Plant = NULL private plants: Plant[] = NULL + // Machines private selectedMachine: Machine = NULL private machines: Machine[] = NULL + + // Area + private selectedArea: Area = NULL + private areas: Area[] = NULL + readonly areasPlaceholder: Area[] = [ + { id: NULL, name: 'Herramentales', phones: NULL, reportTypes: NULL }, + { id: NULL, name: 'Operaciones', phones: NULL, reportTypes: NULL } + ] + // ReportType private selectedReportType: ReportType = NULL private reportTypes: ReportType[] = NULL - // Area - private areas: Area[] = NULL + readonly reportTypesPlaceholder: ReportType[] = [ + { id: NULL, name: 'Mantenimiento', severity: 5 }, + { id: NULL, name: 'Fallo', severity: 9 } + ] + // Comment private comment = '' private showCommentTemplates = false @@ -225,6 +265,7 @@ export default class Home extends Vue { private formErrors = { plant: true, machine: true, + area: true, reportType: true } @@ -240,11 +281,6 @@ export default class Home extends Vue { return false } - mounted () { - // TODO: Get reportTypes from API - this.reportTypes = this.getReportTypes() - } - @Ref('comment') readonly commentTextArea!: Vue @Watch('selectedPlant') @@ -272,12 +308,23 @@ export default class Home extends Vue { this._checkSendButtons() } + @Watch('selectedArea') + public areaSelected () { + const area = this.selectedArea + if (area) { + if (area.reportTypes.length !== 0) this.reportTypes = this.sortReportTypes(area.reportTypes) + this.formErrors.area = false + } else { + this.formErrors.area = true + } + + this._checkSendButtons() + } + @Watch('selectedReportType') public reportTypeSelected () { if (this.selectedReportType) { - if (!this.comment) { - this.showCommentTemplates = true - } + if (!this.comment) this.showCommentTemplates = true this.formErrors.reportType = false } else { this.formErrors.reportType = true @@ -286,6 +333,10 @@ export default class Home extends Vue { this._checkSendButtons() } + private log (data: any) { + console.log(data) + } + private _checkSendButtons () { if (this.hasErrors) { this.disableSendButtons = true @@ -294,13 +345,9 @@ export default class Home extends Vue { } } - public getReportTypes (): ReportType[] { - const reportTypes: ReportType[] = [ - { id: '5f139b2373bd81e112441efc', name: 'Mantenimiento', severity: '5' }, - { id: '5f139b9473bd81e112441efe', name: 'Fallo', severity: '9' } - ] + public sortReportTypes (reportTypes: ReportType[]): ReportType[] { return reportTypes.sort((a, b): number => ( - a.severity < b.severity) ? 1 : (a.severity === b.severity) ? ((a.name > b.name) ? 1 : -1) : -1 + a.severity > b.severity) ? 1 : (a.severity === b.severity) ? ((a.name > b.name) ? 1 : -1) : -1 ) } @@ -309,7 +356,7 @@ export default class Home extends Vue { return 'info' } - if (severity > 4 && severity < 8) { + if (severity >= 4 && severity <= 7) { return 'warning' } @@ -343,6 +390,7 @@ export default class Home extends Vue { this.formErrors = { plant: !this.selectedPlant, machine: !this.selectedMachine, + area: !this.selectedArea, reportType: !this.selectedReportType } @@ -350,7 +398,7 @@ export default class Home extends Vue { } private _animateSendButton (button: HTMLElement, sent: boolean) { - const animationClass = 'area__button--' + (sent ? 'sent' : 'error') + const animationClass = 'send__button--' + (sent ? 'sent' : 'error') button.classList.add(animationClass) button.blur() @@ -361,10 +409,10 @@ export default class Home extends Vue { }, 4000) } - private _sendText (area: string): boolean { + private _sendText (): boolean { const message = `Máquina ${this.selectedMachine.name} de la planta ${this.selectedPlant.name}` + `[${this.selectedReportType.name}]\n` + - `Area ${area} notificada` + this.comment ? ` por ${this.comment}` : '' + `Area ${this.selectedArea.name} notificada` + this.comment ? ` por ${this.comment}` : '' let messageSent = false // TODO: Send the area as argument to be able to identify to whom we are sending the message @@ -390,6 +438,7 @@ export default class Home extends Vue { this.machines = NULL this.areas = NULL + this.reportTypes = NULL } private _saveReport (): Promise { @@ -405,27 +454,12 @@ export default class Home extends Vue { reportTypeID: this.lastSentReport.reportType.id, areaID: this.lastSentReport.area.id, comment: this.lastSentReport.comment - }, + } // update: (store: any, { data: { createReport } }: any) => { // const data = store.readQuery({ query: allReportsQuery }) // data.allReports.push(createReport) // store.writeQuery({ query: allReportsQuery, data }) - // }, - optimisticResponse: { - __typename: 'Mutation', - createReport: { - __typename: 'Report', - id: -1, - creation_date: this.lastSentReport.creation_date, - assist_date: this.lastSentReport.assist_date, - solved_date: this.lastSentReport.solved_date, - plant: this.lastSentReport.plant.id, - machine: this.lastSentReport.machine.id, - reportType: this.lastSentReport.reportType.id, - area: this.lastSentReport.area.id, - comment: this.lastSentReport.comment - } - } + // } }).then(({ data }: any) => { this.lastSentReport.id = data.createReport.id console.log(data) @@ -437,12 +471,8 @@ export default class Home extends Vue { }) } - public async areaButtonClickHandler (event: any, area: Area) { - let button = event.target - // When the icon inside the button is clicked target the button - if (button.tagName !== 'BUTTON') { - button = event.path[1] - } + public async areaButtonClickHandler (event: any) { + const button = event.target this._validateForm() @@ -459,23 +489,20 @@ export default class Home extends Vue { plant: this.selectedPlant, machine: this.selectedMachine, reportType: this.selectedReportType, - area: area, + area: this.selectedArea, comment: this.comment } - const reportSent = this._sendText(area.name) - const reportSaved = await this._saveReport() + // Send and save report + this.lastSentReport.sent = this._sendText() + this._animateSendButton(button, this.lastSentReport.sent) - this.lastSentReport.sent = reportSent - this.lastSentReport.saved = reportSaved + this.lastSentReport.saved = await this._saveReport() - this._animateSendButton(button, reportSent) + if (this.lastSentReport.sent || this.lastSentReport.saved) this._clearInputs() - if (reportSent) { + if (this.lastSentReport.sent) { this.showErrors = false - this._clearInputs() - this.selectedPlant = this.lastSentReport.plant - await this.$nextTick() this.disableSendButtons = true } else { // Disable send buttons for the duration of the button's animation @@ -504,7 +531,7 @@ export default class Home extends Vue { > .card { margin-bottom: 1.5rem; - &:last-child { + &:last-of-type { margin-bottom: 2rem; } } @@ -544,6 +571,21 @@ export default class Home extends Vue { } } +.listbox { + &__item { + display: block; + white-space: nowrap; + + &-badge { + margin-right: 0.5rem; + } + + &-name { + vertical-align: middle; + } + } +} + .selection { $gap: 1rem; $label-size: 1rem; @@ -595,21 +637,6 @@ export default class Home extends Vue { .dropdown { width: 100%; } - - .listbox { - &__item { - display: block; - white-space: nowrap; - - &-badge { - margin-right: 0.5rem; - } - - &-name { - vertical-align: middle; - } - } - } } .comment { @@ -622,11 +649,9 @@ export default class Home extends Vue { width: 100%; } - label::after { - font-size: .75rem; - margin-left: .25rem; + label span { + font-size: .8rem; color: var(--text-color-secondary); - content: "(opcional)"; } input:focus ~ label, @@ -659,88 +684,91 @@ export default class Home extends Vue { } } -.area { +.report-type { .card__container { - @include gap-between-items(1.25rem, button); - } + @include gap-between-items(1.25rem); - &__button { - display: flex; - flex-grow: 1; - text-align: center; - align-items: center; - justify-content: center; - font-size: 1.15rem; - transition: all .2s ease; - box-shadow: - 0 4px 6px rgba(0, 0, 0, .1), - 0 1px 3px rgba(0, 0, 0, .08); - - @mixin icon-transformation() { - i { - transform: rotate(45deg) translateY(-3px); - } + .listbox { + width: 100%; } + } +} - &:focus { - @include icon-transformation; +.send__button { + display: flex; + text-align: center; + font-size: 1rem; + margin-left: auto; + margin-right: 2rem; + transition: all .2s ease; + box-shadow: + 0 4px 6px rgba(0, 0, 0, .1), + 0 1px 3px rgba(0, 0, 0, .08); + + i { + transition: transform .3s ease; + margin-left: .25rem; + transform: rotate(45deg); + } + + @mixin icon-transformation() { + i { + transform: rotate(45deg) translateY(-3px); } + } - @media (hover) { - &:hover { - @include icon-transformation; + &:focus { + @include icon-transformation; + } - box-shadow: - 0 7px 14px rgba(0, 0, 0, .1), - 0 3px 6px rgba(0, 0, 0, .08); - } - } + @media (hover) { + &:hover { + @include icon-transformation; - i { - transition: transform .3s ease; - margin-left: .25rem; - transform: rotate(45deg); + box-shadow: + 0 7px 14px rgba(0, 0, 0, .1), + 0 3px 6px rgba(0, 0, 0, .08); } + } - @keyframes sent { - 20% { - transform: rotate(45deg) translateY(-1rem); - opacity: 0; - } - 75% { - transform: rotate(45deg) translateY(-3px); - opacity: 0; - } - 100% { - transform: rotate(45deg) translateY(0); - opacity: 1; - } + @keyframes sent { + 20% { + transform: rotate(45deg) translateY(-1rem); + opacity: 0; + } + 75% { + transform: rotate(45deg) translateY(-3px); + opacity: 0; } + 100% { + transform: rotate(45deg) translateY(0); + opacity: 1; + } + } - @keyframes send-error { - 50% { - transform: rotate(45deg) translate(50%, 50%); - opacity: 0; - } - 75% { - transform: rotate(45deg) translate(0); - opacity: 0; - } - 100% { - opacity: 1; - } + @keyframes send-error { + 50% { + transform: rotate(45deg) translate(50%, 50%); + opacity: 0; + } + 75% { + transform: rotate(45deg) translate(0); + opacity: 0; + } + 100% { + opacity: 1; } + } - &--sent { - i { - animation: sent 4s; - } + &--sent { + i { + animation: sent 4s; } + } - &--error { - i { - animation: send-error 4s; - } + &--error { + i { + animation: send-error 4s; } } }