Theme

Category: ROCKEN Documentation

  • Story 1.0.12.4. CRM. Filter component. Proper date picker

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance Criteria ]

    General info

    Feature: Proper date picker

    Purpose: This date picker component allows users to select a date range, specifying both a start date and an end date.

    This story implements a date picker within the filter panel of the CRM’s Vacancy List page. The date picker allows users to specify a start and end date for filtering vacancies by their creation dates. The component includes an interactive calendar, options to apply or cancel the selection, and functionality to clear the selected date range. The goal is to improve user experience by providing an intuitive method for date-based filtering, ensuring accurate and relevant vacancy listings according to the specified date range.

    User story

    As a CRM user,
    I want a proper date picker component within the filter panel,
    So that I can select a specific date range easily and apply it to filter vacancies by their created dates.


    RT-5506
    –
    Получение подробных данных проблемы…
    СТАТУС

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=57396-41427&t=yewaRcer9mRvdwyT-4

    #

    Acceptance Criteria

    01

    Scenario: Opening the date picker
    Given I am on the Vacancy List filter panel
    When I click on the "Created Date" field
    Then a date picker should open, displaying a calendar view with selectable dates.

    image-20241112-143855.png

    02

    Scenario: Selecting a date range
    Given the date picker is open
    When I select a start date and an end date
    Then both dates should be highlighted, and the range should be visually indicated within the calendar.

    03

    Scenario: Applying the date filter
    Given I have selected a date range
    When I click the "Apply" button
    Then the selected date range should be applied to the Created Date filter, and the vacancy list should update to reflect this range.

    04

    Scenario: Canceling the date selection
    Given the date picker is open
    When I click the "Cancel" button or press the "Esc" key
    Then the date picker should close without applying any changes to the Created Date filter.

    05

    Scenario: Clearing the date filter
    Given a date range has been applied
    When I click "Clear" next to the Created Date field
    Then the filter should be reset, removing the selected date range, and the vacancy list should display all dates again.

    06

    Scenario: Applying date filter with Enter
    Given I have selected a date range
    When I press the "Enter" key
    Then the selected date range should be applied, and the vacancy list should update accordingly.

  • Story 1.0.12.2. CRM. Filter component. Simple select

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance Criteria ]

    General info

    Feature: Simple Select Filter Component

    Purpose: Allows users to filter items based on a single-select dropdown menu.

    User story

    As a CRM user,
    I want a simple select dropdown filter component,
    so that I can easily filter items by selecting a specific status.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=57381-23679&t=aLfLqWjgjni4WYGn-4

    #

    Acceptance Criteria

    01

    Scenario: Display of options in the dropdown
    Given the user is on a page with the status filter
    When they click on the dropdown menu
    Then they should see a list of available status options, such as "New," "On hold," "Active," and "Inactive."

    image-20241112-075407.png

    02

    Scenario: Selection of a status
    Given the dropdown menu is expanded
    When the user selects a status from the list
    Then the selected status should appear in the input field, and the filter should be applied.

    03

    Scenario: Closing the dropdown with Esc
    Given the dropdown is open
    When the user presses the "Esc" key
    Then the dropdown should close without selecting a status.

    04

    OOS Scenario: Clearing the selected status
    Given a status is selected
    When the user clicks on "Clear"
    Then the selected status should be removed, and the filter should reset.

    05

    OOS Scenario: Keyboard interaction
    Given the dropdown is open
    When the user navigates using the arrow keys and presses "Enter" on a status
    Then the selected status should be applied, and the dropdown should close.

  • Story 1.0.12.3. CRM. Filter component. Simple Date Picker (From-To)

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance Criteria ]

    General info

    Feature: Simple Date Picker (From-To) Component

    Purpose: This date picker component allows users to select a date range, specifying both a start date ("From") and an end date ("To").

    User story

    As a CRM user,
    I want a simple date picker with "From" and "To" fields,
    so that I can easily filter items by a specific date range.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=57410-52804&t=aLfLqWjgjni4WYGn-4

    #

    Acceptance Criteria

    01

    Scenario: User sees date picker
    Given the user is on a page with date filtering
    When the user views the "Created Date" filter
    Then they should see a date picker component with "From" and "To" input fields.

    image-20241112-065729.png

    02

    Scenario: User inputs a date range
    Given the user is on a page with the date picker
    When the user selects a start date in the "From" field and an end date in the "To" field
    Then the selected date range should be displayed in both fields and applied to filter results.

    03

    Scenario: User exits date picker with Esc
    Given the user has opened the date picker
    When they press the "Esc" key
    Then the date picker should close, and any unsaved changes should not be applied.

    04

    OOS Scenario: User clears date inputs
    Given a date range is selected
    When the user clicks "Clear"
    Then both "From" and "To" fields should reset, and the date filter should no longer be applied.

    05

    OOS Scenario: User can input custom dates
    Given the user wants to apply dates outside the suggestions
    When they manually enter any date
    Then the date should be accepted and applied upon pressing "Enter".

  • Story 3.7.4. RJ. T&C. Sidebar Navigation

    Content

    General info

    Create a sidebar navigation menu on the "Datenschutzerklärung & AGB" page that allows users to quickly access different sections of the document. The sidebar will include clickable links for each section, such as "Erklärung," "Verantwortlichkeit," and "Welche Personendaten bearbeiten wir?", making navigation more efficient for users.

    User story

    As a user
    I want a sidebar navigation on the "Datenschutzerklärung & AGB" page
    So that I can easily jump to specific sections without scrolling through the entire page.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=54459-21970&t=oksihauKMaV5Yuqc-4

     

    #

    Acceptance Criteria

     

    01

    Scenario: Sidebar displays section links.
    Given I am on the "Datenschutzerklärung & AGB" page,
    When I look at the sidebar navigation,
    Then I should see links for each major section, such as "Erklärung" and "Verantwortlichkeit."

     

     

    02

    Scenario: Clickable sidebar links.
    Given I am viewing the sidebar,
    When I click on a section link,
    Then the page should automatically scroll to the respective section content.

     

     

    03

    Scenario: Sidebar remains visible during scrolling.
    Given I am scrolling through the "Datenschutzerklärung & AGB" page,
    When I look at the sidebar,
    Then the sidebar should remain visible on the screen for easy access to other sections.

     

     

  • Story 3.7.3. RJ. T&C. Content

    Content

    General info

    Organize and format the content of the "Datenschutzerklärung & AGB" page to ensure readability and accessibility. The content will be divided into sections such as "Erklärung," "Verantwortlichkeit," and "Welche Personendaten bearbeiten wir?" Each section should have clear headings, structured paragraphs, and be presented in a user-friendly format.

    User story

    As a user
    I want to view clearly organized content within the "Datenschutzerklärung & AGB" page
    So that I can easily read and understand each section related to data protection and terms of use.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=54459-21970&t=oksihauKMaV5Yuqc-4

     

    #

    Acceptance Criteria

     

    01

    Scenario: Content is divided into sections.
    Given I am on the "Datenschutzerklärung & AGB" page,
    When I scroll through the content,
    Then I should see it divided into clear sections with headings like "Erklärung," "Verantwortlichkeit," etc.

     

     

    02

    Scenario: Readable paragraph formatting.
    Given I am reading a section on the page,
    When I view the paragraphs,
    Then the content should be formatted with sufficient spacing, font size, and line height to enhance readability.

     

     

  • Story 3.7.2. RJ. T&C. Title

    Content

    General info

    Ensure the title "Datenschutzerklärung & AGB" is prominently displayed at the top of the page. The title should be styled consistently with other major headings on the site and clearly indicate the content’s focus to help users recognize the page’s purpose.

    User story

    As a user
    I want to see a clear and prominent title at the top of the "Datenschutzerklärung & AGB" page
    So that I immediately understand what information is available on this page.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/Rocken-Design?node-id=54459-21970&t=oksihauKMaV5Yuqc-4

     

    #

    Acceptance Criteria

     

    01

    Scenario: Display title at the top.
    Given I am on the "Datenschutzerklärung & AGB" page,
    When the page loads,
    Then I should see the title "Datenschutzerklärung & AGB" clearly displayed at the top.

     

     

    02

    Scenario: Consistent title styling.
    Given I am viewing the title on the page,
    When I compare it with other major headings on the site,
    Then the title should follow the same styling conventions for font, size, and color.

     

     

  • Story 1.0.12.1. CRM. Filter component. Select with autosuggest

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance Criteria ]

    General info

    This user story focuses on implementing a filter component with an autosuggest feature in the CRM. The filter will allow users to search for specific titles dynamically by typing partial keywords, which will prompt the system to suggest matching titles. The feature should enhance user experience by allowing quick selection, filtering, and clearing of search terms. Additionally, users should be able to apply the filter by pressing "Enter" and cancel by pressing "Esc."

    User story

    As a CRM user,
    I want to be able to filter results by dynamically searching titles using an autosuggest feature,
    So that I can easily locate specific roles or positions without scrolling through a long list.

    Visual design:

    https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/ROCKEN-jobs-%2F-talent?node-id=57364-40187&t=vx0POzVgTznhpOQ8-4

    #

    Acceptance Criteria

    01

    Scenario: Filter panel with autosuggest is displayed
    Given the user is on the CRM filter panel
    When the user selects the "Title" filter field
    Then an input field is shown, allowing the user to type and activate the autosuggest feature.

    02

    Scenario: Typing to activate autosuggest
    Given the "Title" filter field is active
    When the user types a partial term (e.g., "pro")
    Then a list of matching titles (such as Product Designer, Project Manager, Provider) appears as suggestions.

    image-20241107-070121.png

    03

    Scenario: Selecting a suggestion
    Given a list of suggestions is displayed
    When the user clicks on one suggestion (e.g., Product Designer) or several
    AND click “Apply“ button
    Then the suggestion (or several) is shown as a tag above the select field, and the input clears.

    image-20241107-071438.png

    04

    Scenario: Applying custom entries not in the suggestion list
    Given the user types a title not appearing in the autosuggest list (e.g., "ABC123")
    When the user presses "Enter"
    Then the entered title is accepted as a tag and applied to the filter criteria.

    05

    Scenario: Clearing selected filters
    Given one or more tags are in the "Title" field
    When the user clicks the "Clear" button
    Then all tags are removed, resetting the filter to display all titles in the results.

    06

    Scenario: Cancelling the filter selection
    Given the autosuggest dropdown is open
    When the user clicks the "Cancel" button
    Then the dropdown closes, and no changes are applied to the filter selection.

    07

    Scenario: Cancelling the filter selection using "Esc"
    Given the autosuggest dropdown is open
    When the user presses the "Esc" on the keyboard
    Then the dropdown closes, and no changes are applied to the filter selection.

    08

    Scenario: Reset single filter
    Given one or more tags are selected
    When the user hover on the tag
    AND clicks on the "x"
    Then filter by this tag is removed and page reflect on this change immediatelly

    image-20241114-073628.png

    09

    Scenario: appear cross icon during typing
    Given select field
    When user type at least one symbol
    Then clear icon “x“ is appeared in the field

    image-20241114-074023.png

    10

    Scenario: Clear entered text in the field
    Given some text is typed in the select field
    When the user clicks on the "x"
    Then text in the field is removed

    		 image-20241114-074023.png

  • Epic 1.0.12. CRM. Filter components

    Content

    [ Content ] [ General info ] [ User stories ] [ Visual design ]

    General info

    Epic ticket:


    RT-5516
    –
    Получение подробных данных проблемы…
    СТАТУС

    User stories

    Visual design

  • Story 2.2.2.6. RT. Profile account. Profile page. Column Jobs

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance criteria ]

    General info

     

     

    User story

    As a …

    I want …

    So that …

     

    Visual design:

    Desktop:

    Mobile:

     

     

    Acceptance criteria

     

    01

    Given:

    When:

    Then:

     

    02

    Given:

    When:

    Then:

     

    03

    Given:

    When:

    Then:

     

  • Story 2.2.2.5. RT. Profile account. Profile page. Column notifications. Slider tips

    Content

    [ Content ] [ General info ] [ User story ] [ Visual design: ] [ Acceptance criteria ]

    General info

    The notifications column on the Rocken Talent profile page includes a rotating slider of tips designed to help users optimize their experience on the platform. The tips provide guidance on enhancing profile visibility and engaging with job offers. The slider rotates automatically and can also be navigated manually.

    Sliders (Deutsch)

    Aktualisiere Dein Profil regelmässig

    • Halte Deine Angaben, wie Lebenslauf, Fähigkeiten und Präferenzen, stets aktuell. So erhöhst Du die Chance, genau die passenden Jobvorschläge zu erhalten.

    • Tipp: Verfeinere Deine Skills und füge relevante Erfahrungen hinzu, um Deine Chancen auf passende Matches zu maximieren.

    Gib uns Feedback zu den Jobvorschlägen

    • Wir schlagen Dir interessante Stellenangebote vor. Dein Feedback ist dabei entscheidend: Unsere Consultants passen auf dieser Grundlage ihre Vorschläge an und finden noch besser passende Optionen für Dich.

    • Tipp: Teile uns mit, welche Angebote Dich ansprechen oder warum ein Vorschlag weniger passt – so können wir noch genauer auf Deine Wünsche eingehen.

    Sei aktiv im Bewerbungsprozess

    • Bleib am Ball! Wenn Du Interesse an einer Stelle hast, melde Dich und lass uns wissen. So bringen wir Dich schnellstmöglich ins Gespräch mit dem Unternehmen.

    • Tipp: Nutze die Plattform regelmässig und verfolge den Status Deiner Bewerbungen, um keine Chance zu verpassen.

    Sliders (English)

    Update Your Profile Regularly

    • Keep your information, such as resume, skills, and preferences, up-to-date. This increases your chances of receiving the most relevant job suggestions.

    • Tip: Refine your skills and add relevant experiences to maximize your chances of matching with suitable opportunities.

    Provide Feedback on Job Suggestions

    • We present you with interesting job offers. Your feedback is essential: our consultants use it to adjust their recommendations and find even better options for you.

    • Tip: Let us know which offers appeal to you or why a suggestion may not fit – this helps us to align our recommendations more closely with your preferences.

    Stay Active in the Application Process

    • Stay engaged! If you’re interested in a position, let us know. This way, we can connect you with the company as quickly as possible.

    • Tip: Use the platform regularly and monitor the status of your applications to ensure you don’t miss any opportunities.

    User story

    As a Rocken Talent user
    I want to see a rotating slider with helpful tips in the notifications column on my profile page
    So that I can improve my profile visibility and interact more effectively with job suggestions

    Visual design:

    –

     

     

    Acceptance criteria

     

    01

    Scenario: Display tips in notifications column
    Given I am on the Rocken Talent profile page
    When I look at the notifications column
    Then I should see a slider displaying tips relevant to the Rocken Talent platform.

    (all texts in general info section above)

     

    image-20241107-063109.png

    02

    OOS Scenario: Automatic rotation of tips
    Given the slider is displayed
    When I don’t interact with it
    Then the tips should rotate automatically every few seconds.

     

    03

    Scenario: Manual navigation
    Given I see the slider
    When I click on the forward or backward arrows
    Then I should be able to manually navigate between the tips.

     

    04

    Scenario: Tips content display
    Given the slider is displayed
    When I view each tip
    Then I should see the following tips in order (as per document): "Update Your Profile Regularly", "Provide Feedback on Job Suggestions", and "Stay Active in the Application Process."

    05

    Scenario: Language consistency
    Given my language settings
    When I view the tips
    Then the tips should appear in the selected language.