From 125de87103777e23ba4f6d466dfd67c98a35ed20 Mon Sep 17 00:00:00 2001 From: Antonio M Date: Mon, 16 Nov 2020 11:49:29 +0100 Subject: [PATCH 1/3] feat: new routes file, get methods working --- .../antoniomaracil/antoniomaracil-page.js | 8 +-- .../views/admin-vacation-view.js | 56 +++++++++++++++++++ .../antoniomaracil/utils/api/api-request.js | 13 +++++ src/works/antoniomaracil/utils/api/utils.js | 19 +++++++ 4 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js create mode 100644 src/works/antoniomaracil/utils/api/api-request.js create mode 100644 src/works/antoniomaracil/utils/api/utils.js diff --git a/src/works/antoniomaracil/antoniomaracil-page.js b/src/works/antoniomaracil/antoniomaracil-page.js index 600f1400..b33ca52a 100644 --- a/src/works/antoniomaracil/antoniomaracil-page.js +++ b/src/works/antoniomaracil/antoniomaracil-page.js @@ -1,16 +1,14 @@ /* eslint-disable no-console */ import { LitElement, html } from 'lit-element'; import { commonStyles } from '../../utils/custom-styles'; -import { empData, empDocument } from './utils/constants'; +import { empDocument } from './utils/constants'; import '../../components/common-header'; import '../../components/work-header'; -import './components/admin-vacation-form/components/admin-vacation-form'; +import './components/admin-vacation-form/views/admin-vacation-view'; import './components/document-list/components/document-list'; const components = { - adminVacationForm: () => - html` - `, + adminVacationForm: () => html` `, documentList: () => html``, }; diff --git a/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js new file mode 100644 index 00000000..25cc5f7d --- /dev/null +++ b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js @@ -0,0 +1,56 @@ +import { LitElement, html } from 'lit-element'; +import { getInfo, updateItem } from '../../../utils/api/api-request'; +import '../components/admin-vacation-form'; + +class AdminVacationView extends LitElement { + static get styles() {} + + static get properties() { + return { + list: { type: Array }, + }; + } + + constructor() { + super(); + this.list = []; + } + + async firstUpdated() { + await this.getList(); + } + + async getList() { + const request = await getInfo(); + if (!request.error) { + this.list = [...request.data]; + } else if (request.errorCode === 500) { + // eslint-disable-next-line no-alert + alert(request.error); + } + } + + async updateItem(e) { + const request = await updateItem(e.detail.body); + + if (!request.error) { + await this.getList(); + this.shadowRoot + .querySelector('item-list') + .shadowRoot.querySelector(`#_${e.detail.index}`) + .classList.remove('edit'); + } + } + + render() { + return html` + + `; + } +} + +window.customElements.define('admin-vacation-view', AdminVacationView); diff --git a/src/works/antoniomaracil/utils/api/api-request.js b/src/works/antoniomaracil/utils/api/api-request.js new file mode 100644 index 00000000..b4396e69 --- /dev/null +++ b/src/works/antoniomaracil/utils/api/api-request.js @@ -0,0 +1,13 @@ +import { url, commonFetch } from './utils'; + +export const getInfo = async () => { + return commonFetch(`${url}/get-data`, { method: 'GET' }); +}; + +export const updateItem = async (data) => { + return commonFetch(`${url}/update-data`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + }); +}; diff --git a/src/works/antoniomaracil/utils/api/utils.js b/src/works/antoniomaracil/utils/api/utils.js new file mode 100644 index 00000000..a61f0c5a --- /dev/null +++ b/src/works/antoniomaracil/utils/api/utils.js @@ -0,0 +1,19 @@ +export const url = 'http://localhost:3000'; + +const errorHandler = (response) => { + if (!response.ok) { + return { error: response.statusText, errorCode: response.status }; + } + return response.json(); +}; + +export const commonFetch = async (url, options) => { + return fetch(url, options) + .then(errorHandler) + .then((response) => { + return response; + }) + .catch((error) => { + return { error }; + }); +}; From c04ea55b3bb6910f8cf84fdb09a774e0fabb369d Mon Sep 17 00:00:00 2001 From: Antonio M Date: Mon, 16 Nov 2020 16:11:31 +0100 Subject: [PATCH 2/3] feat: update item method --- src/views/calendar-view.js | 1 - .../components/admin-vacation-form.js | 60 ++++++++++++++++++- .../views/admin-vacation-view.js | 8 +-- 3 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/views/calendar-view.js b/src/views/calendar-view.js index fde1f231..8bae704e 100644 --- a/src/views/calendar-view.js +++ b/src/views/calendar-view.js @@ -46,7 +46,6 @@ class CalendarView extends LitElement { async updateItem(e) { const request = await updateItem(e.detail.body); - if (!request.error) { await this.getList(); this.shadowRoot diff --git a/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js b/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js index d2e61d3f..4b572106 100644 --- a/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js +++ b/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js @@ -88,6 +88,55 @@ export class AdminVacationForm extends LitElement { this.showPage(0); } + getEdition(index, _id) { + const original = this.list.find((x) => x.id === _id); + const row = this.shadowRoot.getElementById('row_' + _id); + const name = original.name; + const applicationDate = original.applicationDate; + const startDate = original.startDate; + const endDate = original.endDate; + const newStatus = parseInt(row.querySelector('select').value); + const statusDate = original.statusDate; + + const isEditedStatus = newStatus !== original.status; + + return { + name, + applicationDate, + startDate, + endDate, + newStatus, + statusDate, + isEditedStatus, + }; + } + + saveEdition(index, id) { + const { name, applicationDate, startDate, endDate, newStatus, statusDate, isEditedStatus } = this.getEdition( + index, + id, + ); + + if (isEditedStatus) { + const event = new CustomEvent('update-item', { + detail: { + body: { + id, + name: name, + startDate: startDate, + applicationDate: applicationDate, + endDate: endDate, + status: newStatus, + statusDate: statusDate, + }, + index, + }, + }); + + this.dispatchEvent(event); + } + } + renderStepper() { return html`
@@ -150,8 +199,8 @@ export class AdminVacationForm extends LitElement { ${this.renderHeader()} ${this.list.slice(this.from, this.to).map( - (item) => html` - + (item, i) => html` + ${item.name.toUpperCase()} ${dateFormatter(item.applicationDate).default} @@ -159,7 +208,12 @@ export class AdminVacationForm extends LitElement { ${dateFormatter(item.startDate).default} ${dateFormatter(item.endDate).default} - diff --git a/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js index 25cc5f7d..21596fd5 100644 --- a/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js +++ b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js @@ -32,13 +32,9 @@ class AdminVacationView extends LitElement { async updateItem(e) { const request = await updateItem(e.detail.body); - + debugger; if (!request.error) { await this.getList(); - this.shadowRoot - .querySelector('item-list') - .shadowRoot.querySelector(`#_${e.detail.index}`) - .classList.remove('edit'); } } @@ -47,7 +43,7 @@ class AdminVacationView extends LitElement { `; } From 6f4d7214dccd2f48f2e83c31c06df84af321ce0b Mon Sep 17 00:00:00 2001 From: Antonio M Date: Mon, 16 Nov 2020 17:09:15 +0100 Subject: [PATCH 3/3] feat: update method working --- .../components/admin-vacation-form.js | 73 ++++++++++--------- .../views/admin-vacation-view.js | 1 - 2 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js b/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js index 4b572106..bb0e873b 100644 --- a/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js +++ b/src/works/antoniomaracil/components/admin-vacation-form/components/admin-vacation-form.js @@ -1,5 +1,6 @@ /* eslint-disable no-console */ import { LitElement, html } from 'lit-element'; +import { ifDefined } from 'lit-html/directives/if-defined'; import { adminVacationStyles } from '../../../utils/custom-styles'; import { dateFormatter, orderedList } from '../../../utils/functions'; @@ -14,7 +15,7 @@ export class AdminVacationForm extends LitElement { nElements: { type: Number }, list: { type: Array }, stepper: { type: Array }, - arrOptions: { type: Array }, + options: { type: Array }, index: { type: Number, attribute: false }, from: { type: Number, attribute: false }, to: { type: Number, attribute: false }, @@ -29,7 +30,11 @@ export class AdminVacationForm extends LitElement { this.to = this.nElements; this.index = 0; this.stepper = []; - this.arrOptions = ['Pendiente de aprobación', 'Aprobado', 'No aprobado']; + this.options = [ + { value: 0, text: 'Pendiente de Aprobación' }, + { value: 1, text: 'Aprobado' }, + { value: 2, text: 'No Aprobado' }, + ]; } async firstUpdated() { @@ -88,9 +93,9 @@ export class AdminVacationForm extends LitElement { this.showPage(0); } - getEdition(index, _id) { - const original = this.list.find((x) => x.id === _id); - const row = this.shadowRoot.getElementById('row_' + _id); + getEdition(index, id) { + const original = this.list.find((x) => x._id === id); + const row = this.shadowRoot.getElementById('row_' + index); const name = original.name; const applicationDate = original.applicationDate; const startDate = original.startDate; @@ -98,8 +103,6 @@ export class AdminVacationForm extends LitElement { const newStatus = parseInt(row.querySelector('select').value); const statusDate = original.statusDate; - const isEditedStatus = newStatus !== original.status; - return { name, applicationDate, @@ -107,34 +110,28 @@ export class AdminVacationForm extends LitElement { endDate, newStatus, statusDate, - isEditedStatus, }; } saveEdition(index, id) { - const { name, applicationDate, startDate, endDate, newStatus, statusDate, isEditedStatus } = this.getEdition( - index, - id, - ); - - if (isEditedStatus) { - const event = new CustomEvent('update-item', { - detail: { - body: { - id, - name: name, - startDate: startDate, - applicationDate: applicationDate, - endDate: endDate, - status: newStatus, - statusDate: statusDate, - }, - index, + const { name, applicationDate, startDate, endDate, newStatus, statusDate } = this.getEdition(index, id); + + const event = new CustomEvent('update-item', { + detail: { + body: { + id, + name: name, + startDate: startDate, + applicationDate: applicationDate, + endDate: endDate, + status: newStatus, + statusDate: statusDate, }, - }); + index, + }, + }); - this.dispatchEvent(event); - } + this.dispatchEvent(event); } renderStepper() { @@ -200,7 +197,7 @@ export class AdminVacationForm extends LitElement { ${this.list.slice(this.from, this.to).map( (item, i) => html` - + ${item.name.toUpperCase()} ${dateFormatter(item.applicationDate).default} @@ -209,14 +206,22 @@ export class AdminVacationForm extends LitElement { ${dateFormatter(item.endDate).default} diff --git a/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js index 21596fd5..abba9962 100644 --- a/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js +++ b/src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js @@ -32,7 +32,6 @@ class AdminVacationView extends LitElement { async updateItem(e) { const request = await updateItem(e.detail.body); - debugger; if (!request.error) { await this.getList(); }