StreetCode
StreetCode copied to clipboard
ita-social-projects
Admin/Calendar
As an administrator, I want to view all events in a table, search, sort, and filter them, as well as create, edit, and delete events, so that I can effectively manage the content of the calendar.
Acceptance Criteria
1. Access to the Calendar Section. The administrator can access the Calendar section in the admin panel.
2. Event Table Display. The admin panel displays an event table with the following columns: 2.1. For Historical Events: -Title | Назва -Date | Дата -Related HistoryCode | Пов'язані HistoryCode -Actions: Edit, Delete | Дія: Редагувати, Видалити 2.2. For Custom Events: -Title | Назва -Date | Дата -Related HistoryCode | Пов'язані HistoryCode -Location | Локація -Organizer | Організатор -Actions: Edit, Delete | Дії: Редагувати, Видалити
3. Table Functionalities 3.1. Sorting Functionality (User Story #2464-2): -Default order – sorted by the last modification date of items. -Alphabetical sorting (A → Z, Z → A) for: Title, Related HistoryCode, Location, Organizer. -Date sorting: Oldest → Newest, Newest → Oldest. 3.2. Search Functionality (User Story #2464-3): -For historical events: by Title, Related HistoryCode. -For custom events: by Title, Related HistoryCode, Location, Organizer. 3.3. Filtering Functionality (User Story #2464-4): -By event type: Historical, Custom (displayed as a toggle). The default selection is Historical. -By event status: All, Published, Draft (displayed as a dropdown). The default selection is All. -By relevant HistoryCode: (displayed as a dropdown). The default selection is All. 3.4. Pagination is implemented for the event table (User Story #2464-5). 3.5. Changing Event Status: The administrator can change the vacancy’s state using the dropdown in the "Status" | "Статус" column. The administrator cannot choose the current one in the dropdown. 3.5.1. When the state is changed, a confirmation modal appears with "Confirm" | "Підтвердити" and "Cancel" | "Скасувати" buttons: EN: "Are you sure to change the event state?" UA: "Ви впевнені, що хочете змінити статус події?" 3.5.2. If the administrator clicks the Confirm button, the system updates the state and displays a notification: -for Published: EN: "The event has been published on the website" UA: "Подія опублікована на сайті" -for Draft: EN: "The event has been hidden from the website" UA: "Подія приховано на сайті" 3.5.3. If the Cancel button is clicked, no changes are applied. 3.6. Editing Event: Clicking the Edit icon opens the edit page. The administrator can modify all fields and save changes by clicking the Save button. The system updates the data and displays a notification: EN: "The event was successfully updated" UA: "Подію успішно оновлено" 3.7. Deleting Event: Clicking the Delete icon opens a confirmation modal: EN: "Are you sure you want to delete the event?" UA: "Ви впевнені, що хочете видалити подію?" The confirmation modal contains two buttons: "Confirm" | "Підтвердити" – confirms and deletes the event. "Cancel" | "Скасувати" – cancels the action and closes the modal. 3.7.1. If Confirm is clicked, the system displays a notification: EN: "The event successfully deleted" UA: "Подію успішно видалено"
4. Event Fields. 4.1. HistoryCode Chronology Selection (For Historical Events Only) 4.1.1. The administrator can select a HistoryCode using a dropdown selector or by manually entering part or all of the HistoryCode name and choosing from the suggested list in the dropdown. 4.1.2. After selecting a HistoryCode, the administrator can choose an event from its chronology. 4.1.3. Upon selecting an event, the system automatically fills in the Title, Date, Description, and Related HistoryCode fields if relevant data is available. 4.1.4. The administrator can manually edit the auto-filled fields. 4.2. For Historical Events: -Chronology (optional select) -Title -Date (calendar picker) -Description (optional) -Related HistoryCode (optional, searchable select) 4.3. For Custom Events: -Title -Start Date (calendar picker) -End Date (optional, calendar picker) -Description (optional) -Related HistoryCode (optional, searchable select) -Location (optional) -Organizer (optional)
5. Field Validation Rules 5.1. Title Field: Length: 1–100 characters. Allowed: Cyrillic & Latin letters, numbers, special characters (-, '), spaces. Cannot be empty. It has a character counter. The system cannot add more than 100 characters. 5.1.1. If the administrator tries to add more than 100 characters, highlights the field in red, and displays an error message under the field: EN: "Maximum of 100 characters" UA: "Не більше 100 символів" 5.1.2 If the field has invalid characters, the system highlights the field in red and displays an error message under the field: EN: "Only letters, spaces, hyphens (-), and apostrophes (') are allowed" UA: "Дозволені лише літери, пробіли, дефіси (-) та апострофи (')" 5.1.3. If the field is empty, the system highlights the field in red and displays an error message under the field: EN: "Enter title" UA: "Введіть назву події" 5.2. Date Selection: The date is selected using a calendar picker input. The administrator can navigate between months and years and manually enter the date in the input field. 5.3. Start Date & End Date Selection (For Custom Events): The date is selected using a calendar picker input. The administrator can navigate between time, months, years, and manually enter the date in the input field. The Start Date must be earlier than or the same as the End Date. 5.4. Description (optional): Length: Up to 500 characters. Allowed: Cyrillic & Latin letters, numbers, special characters, spaces. It has a character counter. The system cannot add more than 450 characters. If the administrator adds more than 500 characters, the system highlights the field in red and displays an error message under the field: EN: "Maximum of 500 characters" UA: "Не більше 500 символів" 5.5. Location & Organizer Fields: Length: Up to 200 characters. Allowed: Cyrillic & Latin letters, numbers, special characters, spaces. Cannot be empty. It has a character counter. The system cannot add more than 200 characters. 5.5.1. If the administrator tries to add more than 200 characters, highlights the field in red, and displays an error message under the field: EN: "Maximum of 200 characters" UA: "Не більше 200 символів" 5.5.2. If the field is empty, the system highlights the field in red and displays an error message under the field: EN: "Enter title" UA: "Введіть назву події" 5.6. Image Upload 5.6.1. The administrator can upload an image in two ways: -By clicking the “Upload an image” | “Завантажити зображення” button. The system opens a file selection dialog that filters and displays only compatible file formats and sizes. -By dragging and dropping an image into the upload field. File restrictions: -Size: Less than 3 MB -Formats: JPG, JPEG, PNG, WEBP 5.6.2. If the administrator selects and uploads a valid file, the system displays a success notification: EN: "The image was updated successfully" UA: "Зображення успішно збережено" 5.6.3. If the administrator selects a file that does not meet the file size or format requirements, the system must reject the file and display an error message below the upload field: EN: "Incorrect file format or size. Upload a file in JPG, JPEG, PNG, or WEBP format, and ensure it is less than 3 MB" UA: "Невірний формат або розмір файлу. Завантажте файл у форматі JPG, JPEG, PNG або WEBP, розміром до 3 МБ" 5.6.4. Remove Image: The administrator can remove the uploaded image using the trash icon. The image is replaced with a default placeholder icon, and a success notification appears: EN: "The image was successfully removed" UA: "Зображення успішно видалено" 5.6.5. View Image: Clicking the eye icon opens a full-size preview in a centered pop-up window. The administrator can close it by clicking the "X" button. 5.7. Associated Street Codes (optional): The administrator can select one or more street codes from a searchable dropdown.
6. Creating an Event 6.1. The administrator clicks the “Add Event” | “Додати подію” button in the Calendar section. 6.2. The system redirects the administrator to the event creation page. 6.3. The administrator selects the event type via the Historical, Custom toggle. By default, the Historical is selected unless a filter is applied. 6.4. The administrator must fill in the required fields according to Section 5: Field Validation Rules. 6.5. Saving an Event: 6.5.1. Publish Event: The administrator clicks “Add Event” | “Додати подію”. The system saves the event to the table, publishes it to the Calendar on the website, and displays a success notification: EN: "The event has been successfully added and published" UA: "Подію успішно додано та опубліковано" 6.5.2. Save as Draft: The administrator clicks “Save as Draft” | “Зберегти як чернетку”. The system saves the event in the table with Draft status, does not publish the event, and displays a success notification: EN: "The event has been saved as a draft" UA: "Подію збережено як чернетку" 6.6. The system must check the unique value Title field. If the value already exists, the system displays a confirmation modal: EN: "This event already exists. Replace an existing event?" UA: "Така подія вже існує. Замінити існуючу подію?" The confirmation modal contains two buttons: "Confirm" | "Підтвердити" – confirms and replace theevent. "Cancel" | "Скасувати" – cancels the action and return the modal. If Confirm is clicked, the system displays a notification: EN: "Event successfully replaced" UA: "Подію успішно замінено" 6.7. Canceling Event Creation: the administrator can cancel event creation by clicking the "<" (Back) button or using the breadcrumb navigation.
