/mateus-avila-isidoro

Plugin test for Awesome Motive

Primary LanguageVue

Plugin Mateus Ávila Isidoro

This plugin is part of the application process to work with Awesome Motive.

Stack

Front-end: Vue 3.3, using: vite, pinia, UnoCSS, Typescript, maska, Sass, date-fns, vue chart.js, vue router, zod and @vorms.

Back-end: Wordpress, using: WP Rest API, transients, options, translations.

Functionalities

API

  • Translation to English and Brazilian Portuguese.
  • Shared language object between WP and Vue.
  • Shared nonce between WP and Vue.
  • All routes require authenticated access.
  • Route for updating the settings (using the PUT method).
  • Settings are saved using options.
  • Route for retrieving all the settings (using the GET method).
  • Implemented a transient of 1 hour to enhance backend performance.
  • Implemented checks to avoid saving duplicate emails.
  • Implemented checks to avoid saving incorrect emails.
  • Sanitized the human_date_format and rows values.
  • Converted graph data to an array instead of an object.
  • Typed all backend responses.
  • Ensured that the plugin applies JS and CSS code only within its scope.

Settings page

  • Rows only accept numbers from 1 to 5. A custom mask has been created to prevent errors.
  • Implemented a toggle box to provide better control over the checkbox.
  • The form does not allow the submission of duplicate emails.
  • Pinia is updated every time the form is successfully submitted, even on the /data route.
  • Upon the initial load of the plugin, Pinia takes full control of the data.
  • Provided translated error messages for enhanced user experience.
  • After sending the request, a modal appears to indicate that the request is processing.
  • The "Add" button is disabled when the list contains five emails.
  • The "Minus" button is disabled when the list contains only one email.
  • Sanitized the human_date_format and rows values.
  • The user's email is shared between WP and Vue.
  • WAI-ARIA principles applied in the form, to increase accessibility

Graphic page

  • Converted graph data to an array for easier implementation.
  • Converted dates to a human-readable format if the user selects this option.
  • Implemented an animation for the Chart.js when the page loads.

Home page

  • The table displays the specified number of rows.
  • Translated the table header to enhance the user experience.
  • Listed all emails in an unordered list.

Extras

  • Created composables to enhance code quality.
  • Provided translated message for users who have JavaScript blocked.
  • Utilized HTML5 Dialog in the modal, which can be cancelled with the Escape button.
  • Typed all props and emits in components.
  • Typed the translation as well.

Contribute

Clone the repository

  git clone git@github.com:mateusavila/mateus-avila-isidoro.git

Go to the front-end

  cd mateus-avila-isidoro

Install all the dependencies

  pnpm install

Start the development server to run inside Wordpress

  npm run develop