antoniomaracil/admin-vacation-form (db)

src/views/calendar-view.js

@@ -56,7 +56,6 @@ class CalendarView extends LitElement {
 
   async updateItem(e) {
     const request = await updateItem(e.detail.body);
-
     if (!request.error) {
       await this.getList();
       this.shadowRoot

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` <admin-vacation-form .list="${empData}" .nElements="${10}" @update-array="${this.updateArray}">
-    </admin-vacation-form>`,
+  adminVacationForm: () => html` <admin-vacation-view> </admin-vacation-view>`,
   documentList: () => html`<document-list .list="${empDocument}"></document-list>`,
 };
 

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,6 +93,47 @@ 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_' + index);
+    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;
+
+    return {
+      name,
+      applicationDate,
+      startDate,
+      endDate,
+      newStatus,
+      statusDate,
+    };
+  }
+
+  saveEdition(index, id) {
+    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);
+  }
+
   renderStepper() {
     return html`
       <div class="stepper">
@@ -150,19 +196,32 @@ export class AdminVacationForm extends LitElement {
               ${this.renderHeader()}
             </thead>
             ${this.list.slice(this.from, this.to).map(
-              (item) => html`
-                <tr>
+              (item, i) => html`
+                <tr id="row_${i}">
                   <td class="name" data-label="Nombre">${item.name.toUpperCase()}</td>
                   <td class="grey-date" data-label="Fecha de solicitud">
                     ${dateFormatter(item.applicationDate).default}
                   </td>
                   <td class="black-date" data-label="Fecha de inicio">${dateFormatter(item.startDate).default}</td>
                   <td class="black-date" data-label="Fecha de fin">${dateFormatter(item.endDate).default}</td>
                   <td>
-                    <select id="sel-${item.id}" class="selectOptions">
-                      <option value="0">Pendiente de aprobación</option>
-                      <option value="1">Aprobado</option>
-                      <option value="2">No aprobado</option>
+                    <select
+                      someattr="${item.status}"
+                      value="${item.status}"
+                      id="sel-${item.id}"
+                      class="selectOptions"
+                      @change="${() => this.saveEdition(i, item._id)}"
+                    >
+                      ${this.options.map(
+                        (option) => html`
+                          <option
+                            selected="${ifDefined(option.value === item.status ? 'true' : undefined)}"
+                            value="${option.value}"
+                          >
+                            ${option.text}
+                          </option>
+                        `,
+                      )}
                     </select>
                   </td>
                   <td class="grey-date" data-label="Fecha de estado">

src/works/antoniomaracil/components/admin-vacation-form/views/admin-vacation-view.js

@@ -0,0 +1,51 @@
+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();
+    }
+  }
+
+  render() {
+    return html`
+      <admin-vacation-form
+        .list="${this.list}"
+        .nElements="${10}"
+        @update-item="${this.updateItem}"
+      ></admin-vacation-form>
+    `;
+  }
+}
+
+window.customElements.define('admin-vacation-view', AdminVacationView);

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),
+  });
+};

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 };
+    });
+};