Code Monkey home page Code Monkey logo

formjam's Introduction

FormJAM: Another form app

App Banner

This is a simple app created using Vue 3 and Pocketbase. The src documentation found here can help newcomers understand how the project is broken down based on folder structure. โš ๏ธ The docs for different folders are still being worked on.

๐Ÿ’ป The Tech I Used

Front end

Back end

๐Ÿ› ๏ธ How To Run

First, copy the values from .env.example into a .env file and set the value according what your specific setup (Please see values below). Afterwards, navigate the root folder and run any of the following commands.

VITE_POCKET_BASE="http://127.0.0.1:8090" # default port for pocketbase
BASE_URL="http://localhost:5173" # default port for app

API_URL="http://127.0.0.1:8090" # same as the local or production pocketbase instance
USER_EMAIL="[email protected]"
USER_PASSWORD="password"

Install the dependencies

pnpm install

Run dev mode

pnpm dev

Type-check and run build for production

pnpm build

Run production preview

pnpm preview

Run E2E tests with headless browser/electron

pnpm test:e2e

Run E2E tests with Cypress UI

pnpm cypress:open

How to contribute

Please check out CONTRIBUTING.md

formjam's People

Contributors

dependabot[bot] avatar dre-bk201 avatar github-actions[bot] avatar m-facey avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

3c0n0mist

formjam's Issues

Write cypress tests for forgot password flow

Description

The forgot password (aka reset password) flow consists of two steps.

  1. Password Reset - This is where the user send a reset password link and instruction to their email.
  2. Confirm (New) Password - This is where the user enters their new password.

In order to test these, the request need to be intercepted and mocked. Please see the intercept docs on cypress for more information.

Duplicating Question | Create Form Page

Description

We need to be able to duplicate question when creating a form. When a question is duplicated, it should be placed directly below the original.

Collab with @M-Facey to get more info to finish this.

Implement functionality for profile page

Description

We should add functionality to the profile page, which is inclusive of the following:

Endpoints

How to update the profile info (including the password)

// example update data
const data = {
    "username": "test_username_update",
    "emailVisibility": false,
    "password": "87654321",
    "passwordConfirm": "87654321",
    "oldPassword": "12345678",
    "name": "test"
};

const record = await pb.collection('users').update('RECORD_ID', data);

How to delete the user profile

await pb.collection('users').delete('RECORD_ID');

You should use the useConfirm (this is for the delete modal) and useToast (this is for the pop up notification) services from primevue, which you can find in the Form Card component

Validations

Please look how validation is done using vee-validate in the Signup.vue. Please note: The name attributes used to reference to input elements.

Create validation config for short answer question type

Types of validations

  • Number
    • Greater than
    • Greater than or equal to
    • Less than
    • Less than or equal to
    • Equal to
    • Not equal to
    • Between
    • Not between
    • Is number
    • Whole Number
  • Text
    • Contains
    • Doesn't contain
    • Email
    • URL
  • Length
    • Maximum character count
    • Minimum character count
  • Regular Expression
    • Contains
    • Doesn't contains
    • Matches
    • Doesn't match

Question Validation Config

Description

We need to add a section where the validation config for each question can be added. Please Note: there are various kinds of validation configs which differ based on question type,

Implement functionality for submitting form | View Page

Description

The preview section has been implemented on this route, /form/:id/view?preview=true. We need to implement the functionality for when the user actually tries to submit a form.

Things to do

  1. We need to generate a unique id for each form submission. This should be sorted inside local storage.
  2. Add validation using vee-validate and yup somehow
  3. Regenerate unique id from form, is there want to submit another one

To be done later

  • We need to implement a step form cuz why not?

Change title name based on current page

Description

We should change the title of the page depending on what page it is. Here is a list of the rough idea of what they should be (please note: you can change them if you think you have a more appropriate name)

Most pages will have just be the <name_of_page> | FormJAM, however, the create / edit form page is an exception as it will use <form_title> | FormJAM

Create bulk delete feature | Dashboard

Description

Due to how the test was written, a lot of unused form will be created without getting deleted. We need to find a way to minimize its impact by either:

  • #33
  • Allow for bulk deletion of forms

Profile Page Tests

Description

Once the functionality for the profile page is added, we need to write some cypress test to ensure the functionality works as expected.

This is related to #28

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.