medhatdawoud / words-frontend Goto Github PK

this component should be called for example limit-length and should take some values from the attributes sent like data-max-length that take number and data-show-countdown that take boolean value,

pay attention to be tested in both description (300) and example (100) fields for words, and to be reusable not to have any specific data inside it, make it generic as much as possible.

and the error message itself is not shown on typing or by blur , check the attached file

the pronounce input shouldn't accept any characters except (alphabets and -)

check the below requirements first @mahaelbasuony

Shouldn't be blue, it should be like the Word label check the following screen shot

As a user I should not be allowed to submit the add word form except with the following validations:

1. Word: (only accept alphabets, don't accept special characters or numbers, required)
2. Synonyms: (like word + max length of 20, cannot add empty, optional)
3. Pronounce: (only accept lowercase alphabet and dashes, required)
4. Description: (accept any thing, max length of 300, required)
5. Image Url: (valid URLthat ends with [jpeg | jpg | png | gif | svg] , required at least 1 image)
6. Example: (accept anything, max length of 100, required at least 1 example)
7. Tags: (accept only alphabets and dashes, max length of 20, required at least 1)

About the error messages, it should be all in localisations so we can change them later or add different language easily, for simplicity add any message for now that express the error

create this custom validator to check the minimum count of a given field and use it for the multicomponent

the words list should look much better, the boxes should be justified and fill the whole width with keeping the same ratio as a square

As a use i shouldn't be able to add any random text to the input of the image url, i should get a hint that I've entered invalid URL

Implement each section like "add word" and the words list each with the height of the viewport so the user wouldn't use the browser scrollbar by any mean

As a user i should not be able to add a duplicated word, so as a solution we should provide the user with such auto complete for the word he/she is writing so if he found the word he can add what ever he/she wants and if not he can continue adding new word.

the autocomplete should not bind the word directly, it should appear like a dropdown list below the input control and if the user click on a word from the search list, then it should be bind to the form with all the data.

the user should be able to move between the search list with the keyboard arrows (up/down) for accessibility reasons.

As a user i should have the ability to search in the words I've added by:

• word
• synonym
• tags

Add a label beside the search bar to indicate the number of the viewed words out of the whole number based on the search like:

display 20 out of 300 words

Run npm run lint and fix all the list of issues, afterwards make sure to run this command each time before commiting

As a user i should be able to view my profile with my basic information in it.

with a side menu including:

• basic information
• my favourite words

design: TBD

As a user i should be able to delete my words

Expected: the action to open the modal shouldn't be on the whole container or at-least exclude the button of edit

add implementation for the save word in the update state when the word has Id already

words should be sortable with like a dropdown list of the options that can be sorted with, for now we need to sort them with only desc and asc orders, as we need to add in the top of the list a drop down list has 2 options as follow

[
  {'label': 'Newest first', 'value' : 'desc'},
  {'label': 'Oldest first', 'value' : 'asc'}
]

As a user i should be able to mark some words as favourite and remove it from favourite

Design: TBD

As a user i should be able to switch between pages, for now we don't have except the all words page, but later on we will have more, and the login information.

the bar should include:

• the language menu.
• the login name of the user (that leads to his profile on click)
• the logo of the site

on save it's only closing the details and not resetting the form

if you open the Vegetables word for edit you can find that it has tag and synonym but when searching with any of them they are not working

As a user i should be able to login with facebook and twitter through the login/registration page

Design: TBD

All labels and text that appear to the user in the project should come from localisation files, so it should be easier later on to change language or change messages for any purpose

I should be able to click on any word square, and then a modal should open and has all the information we have in a word, for now do this with all the information in any form, the images, examples, synonyms , etc.

as a user i should be able to load only for the full screen and by scrolling i should be able to load more

To Reproduce:
focus on word field then switch to the pronounce field, no validation errors appear but if you go back to the word field and write something the validation error of require appears for the pronounce field

As a user i should not be allowed to click add when it's empty input in multi select controls

• Make folder structure
• Move all the interfaces to be in the same folder
• Collect all Constants into one file

the importing of the vendors' files should be directly to the angular-cli.json file not to a sass file, add some structure for the generic styling stuff, and set a naming convention for classes, variables, mixins, ... etc

Useful links:

• https://github.com/ngrx/ngrx.github.io

we need to have a separate custom component for the modal that take all the required information as params and return the required modal, then we don't need to copy/paste the modal each time we need to create a new one

As attached the label should be smaller and blue color

As a user I should be able to login or create an account easily.

Design: TBD

the search box and the sorting dropdown should look better

make the add word form by default hidden in the right hand side and a button appear to open it, and it should slide from right to add a form and collapse it again after adding a word

The submit button should be enabled so the user when he click it, all the validation issues show up