[RTI][FRONTEND][TEMPLATE-MANAGER] Enhancing template manager by sehansi-9 · Pull Request #17 · LDFLK/RTI-Tracker

sehansi-9 · 2026-04-02T04:14:39Z

This pr contains the initial commit with enhanced template manager

Using user-friendly HTML elements in the markdown editor for variables
Variable dragging and dropping
Create new template functionality and CRUD operations

closes #18

…markdown editor

gemini-code-assist

Code Review

This pull request introduces the frontend application for the RTI Tracker, including the project structure, configuration files, UI components, and core pages for managing RTI requests, senders, receivers, and templates. The review feedback highlights a need to update the ESLint plugins to better align with the current TypeScript version and suggests replacing the deprecated document.caretRangeFromPoint method in the template editor with a more modern approach for handling drag-and-drop insertions.

tool/frontend/package.json

tool/frontend/src/pages/Templates.tsx

ChanukaUOJ · 2026-04-04T18:15:20Z

Take a look! This happens when the user clicks on those H1, H2, etc. buttons

ChanukaUOJ · 2026-04-04T18:20:33Z

These margins should automatically adjust based on the device width.

ChanukaUOJ · 2026-04-05T03:08:07Z

tool/frontend/src/components/Layout.tsx

+      <Sidebar />
+      <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <div className="flex-1 overflow-y-auto p-6">
+          <div className="max-w-7xl mx-auto">


This max-w-7xl limits the width of the right-side panel.

ChanukaUOJ · 2026-04-05T03:10:36Z

tool/frontend/src/components/Sidebar.tsx

+
+      <div className="p-4 border-t border-gray-200 text-xs text-gray-500">
+        <p>System Version 1.0.0</p>
+        <p className="mt-1">Open-Data Protocol</p>


Remove this Open-Data Protocol

ChanukaUOJ · 2026-04-05T03:14:09Z

tool/frontend/src/pages/Templates.tsx

+import { mockTemplates } from '../data/mockData';
+import { Template } from '../types/rti';
+import { Button } from '../components/Button';
+import { Save, Plus, Move, Trash2, X, Bold, Heading1, Heading2, Type } from 'lucide-react';


X isn't used anywhere.

ChanukaUOJ · 2026-04-05T03:22:11Z

tool/frontend/src/pages/Templates.tsx

+import { Save, Plus, Move, Trash2, X, Bold, Heading1, Heading2, Type } from 'lucide-react';
+
+export function Templates() {
+  const [templates, setTemplates] = useState<Template[]>(mockTemplates);


Instead of initializing the mokTemplates here, it's better to get them in the same way we retrieve the data from the API. So when we wire up the APIs, we have to add only the API call there.

ChanukaUOJ · 2026-04-05T03:25:55Z

tool/frontend/src/pages/Templates.tsx

+  const parseMarkdownToHtml = (markdown: string) => {
+    let html = markdown;
+
+    // 1. Handle Bold
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+    // 2. Handle Headings (simplified line-based)
+    html = html.split('\n').map(line => {
+      if (line.startsWith('# ')) return `<h1>${line.slice(2)}</h1>`;
+      if (line.startsWith('## ')) return `<h2>${line.slice(3)}</h2>`;
+      return line;
+    }).join('<br>');
+
+    // 3. Handle variables (pills)
+    html = html.replace(/{{([^}]+)}}/g, (match, p1) => {
+      const name = p1.replace(/_/g, ' ');
+      return createPillHtml(match, name);
+    });
+
+    return html;
+  };


Can we add Italic to this?

ChanukaUOJ · 2026-04-05T03:37:04Z

tool/frontend/src/types/rti.ts

+export interface Template {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+}


Put all the attributes from the rti_template table. There is nothing called name. title is there.

ChanukaUOJ · 2026-04-05T03:40:57Z

tool/frontend/src/pages/Templates.tsx

+    <div className="h-[calc(100vh-3rem)] flex flex-col space-y-4">
+      <div className="flex justify-between items-end">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Template Manager</h1>


Suggested change

<h1 className="text-2xl font-bold text-gray-900">Template Manager</h1>

<h1 className="text-2xl font-bold text-gray-900">RTI Template Manager</h1>

ChanukaUOJ · 2026-04-05T03:41:27Z

tool/frontend/src/pages/Templates.tsx

+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Template Manager</h1>
+          <p className="text-sm text-gray-600 mt-1">
+            Manage Markdown templates for RTI generation.


Suggested change

Manage Markdown templates for RTI generation.

Manage RTI templates for RTI generation.

ChanukaUOJ · 2026-04-05T03:53:44Z

tool/frontend/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RTI Request Tracker Dashboard</title>


Suggested change

<title>RTI Request Tracker Dashboard</title>

<title>RTI Tracker Tool</title>

ChanukaUOJ · 2026-04-05T03:54:48Z

tool/frontend/README.md

@@ -0,0 +1,6 @@
+# RTI Tracker


Add where to navigate and start, make it a little bit cleaner

ChanukaUOJ · 2026-04-05T03:56:09Z

Make sure to write playwright tests for this component as well. (only for desktop screen)

sehansi-9 · 2026-04-05T09:09:05Z

Take a look! This happens when the user clicks on those `H1`, `H2`, etc. buttons

the grammarly browser extension crashes when our custom react code modifies the html inside the contentEditable area.
added data-gramm="false" attribute to the contentEditable div to prevent the extension from interfering with the editor.

sehansi-9 added 3 commits March 31, 2026 13:03

initial commit with add new template function and variable pills for …

311bc8d

…markdown editor

update comments

81cb486

update readme and project name

9b77e34

gemini-code-assist bot reviewed Apr 2, 2026

View reviewed changes

tool/frontend/package.json Outdated Show resolved Hide resolved

tool/frontend/src/pages/Templates.tsx Outdated Show resolved Hide resolved

sehansi-9 added 5 commits April 2, 2026 10:11

fix bot reviews

9431057

empty template state handling

fed04c6

remove non template manager files

9321c14

update layout and editor paddings

9c83266

enhance template editor with formatting options: bold and headings

db5b05d

ChanukaUOJ reviewed Apr 5, 2026

View reviewed changes

	<h1 className="text-2xl font-bold text-gray-900">Template Manager</h1>
	<h1 className="text-2xl font-bold text-gray-900">RTI Template Manager</h1>

	Manage Markdown templates for RTI generation.
	Manage RTI templates for RTI generation.

	<title>RTI Request Tracker Dashboard</title>
	<title>RTI Tracker Tool</title>

Conversation

sehansi-9 commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

ChanukaUOJ commented Apr 4, 2026

Uh oh!

ChanukaUOJ commented Apr 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChanukaUOJ commented Apr 5, 2026

Uh oh!

sehansi-9 commented Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sehansi-9 commented Apr 2, 2026 •

edited

Loading