Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add Template

オープン
  • 何か問題がありますか？
#363 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
30/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
typescript
領域
frontend, full-stack

調査の方向性

Template-uri タブから開始し、Add Template と Add Terms Modal の Figma リファレンスを確認してから、Header、Body、Footer、preview、rich-text modal、save redirect を通る create-template フローを追跡します。ユーザーが template を作成・編集でき、無効化されたフィールドに組織データを表示でき、正常に保存でき、指定されたリンクをたどれるようになれば完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement :rocket: web-app
  • #380

User Story

As a user, I want to create contract templates, so that I can efficiently and easily generate volunteer contracts.

Description

This feature enables users to create contract templates for volunteers. The page is divided into three sections: Header, Body, and Footer.

The Header section includes a text containing key details about NGO such as the official name, address, CUI, the name of the legal representative, and their role within the organization.

The Body section contains the contract terms, featuring a text field, an "Add Text" button, and a hyperlink.

The Footer section includes the NGO's name, the legal representative's name, and empty fields for the volunteer's information and, if applicable, the legal representative for volunteers under 16.

All three sections collectively form the contract, which is displayed as a unified preview.

Actors

  • Web Users

Preconditions

  • User must be logged in and have navigated to the 'Template-uri' tab

Main Flow (create template)

  1. User clicks the "Creeaza template" button to start creating a new template.
  2. The system displays the 'Creeaza Template' page, divided into Header, Body, and Footer sections.
  3. The system auto-fills the Header and Footer sections with the organization's data.
  4. In the Preview Panel, the user can hover over highlighted text to view a tooltip.
  5. User clicks the 'Adauga text' button from the Body section.
  6. The system opens a modal with a rich text editor.
  7. User enters the contract terms and clicks 'Salveaza modificarile' button.
  8. The system updates the Body section with the entered text.
  9. User clicks the 'Salveaza' button.
  10. The system saves the template and redirects the user to the 'Template-uri' page.

Business Rules

  1. The contract template must maintain a structure with a Header, Body, and Footer.
  2. The Header and Footer sections inputs should be prefilled with the NGO data present in the NGO Hub application.
  3. The Header and Footer sections inputs must be disabled.
  4. The Body section must display an "Editeaza text" button when content has been added.

Acceptance Criteria

  1. The rich text editor should provides a full range of formatting options (bold, italic, underline, alignment, lists, etc.).
  2. Clicking the "Editeaza text" button in Body section should open the content in a modal for modifications.
  3. The contract template can be successfully created and saved after completing all steps.
  4. The 'Vezi profilul organizatiei' hyperlink must redirect user to the NGO Profile in NGO Hub application.
  5. The 'Afla Mai Multe', 'Trimite feedback-ul tau,' and 'contract de voluntariat' hyperlinks must direct users to the correct URLs, which will be provided at a later time.

Additional Information

  • Figma references:
    • Add Template Page: here
    • Add Terms Modal: here
主要言語
TypeScript
スター
3
フォーク
2
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

code4romania/vic のほかの issue

code4romania/vic の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。