Error: Bulma CSS Form TYPE ('.$type.') not defined.
';
+ break;
+ }
+
+ } else {
+ return 'Error: Bulma CSS Form TYPE not defined.
';
+ }
+
+ }
+
+ static function build_field_input($label, $name, $value, $class, $rows=10){
+
+ $string_label = $label !== '' ? sprintf(''.$v.'';
+ }
+
+ $string =
+ '
+
+
+
+
+
+
+
+
+
+
+
'
+ return '
+
+ ';
+ } else {
+ return '';
+ }
+ return ''.$icon_class[1].'';
+
+ }
+
+}
+
+\Template::instance()->extend('icons', 'IconsHelper::icons');
+--- End File: app/extensions/IconsHelper.php ---
+
+
+--- File: app/extensions/ParsedownHelper.php ---
+text($args[0]);
+
+ return '
+
+ ';
+
+ }
+
+ // return ''.print_r($args,1).'
';
+
+ $content = $args[0];
+ $content_token = \Template::instance()->token($content);
+
+ return '
+
+ build('.$content_token.'); ?>
+ ';
+ }
+
+ function build($content){
+ return \ParsedownTableExtension::instance()->text($content);
+ }
+}
+
+\Template::instance()->extend('parsedown', 'ParsedownHelper::render');
+--- End File: app/extensions/ParsedownHelper.php ---
+
+
+--- File: app/extensions/ParsedownTableExtension.php ---
+ 'table',
+ // 'handler' => 'elements',
+ // 'text' => [ ... ],
+ // 'attributes' => [...],
+ // ]
+
+ // Add your custom class to the itself:
+ if (!isset($Block['element']['attributes'])) {
+ $Block['element']['attributes'] = [];
+ }
+ $Block['element']['attributes']['class'] = 'table is-bordered';
+
+ // Wrap the in a :
+ $wrapped = [
+ 'name' => 'div',
+ 'attributes' => [
+ 'class' => 'table-container',
+ ],
+ 'handler' => 'elements',
+ 'text' => [
+ $Block['element'], // the
itself
+ ],
+ ];
+
+ // Replace the original element with our wrapped version:
+ $Block['element'] = $wrapped;
+ }
+
+ return $Block;
+ }
+}
+--- End File: app/extensions/ParsedownTableExtension.php ---
+
+
+--- File: app/interfaces/CRUD.php ---
+db->exec(
+ 'SELECT a.*, u.username
+ FROM attachments a
+ LEFT JOIN users u ON u.id = a.uploaded_by
+ WHERE a.ticket_id = ?
+ ORDER BY a.created_at DESC',
+ [$ticket_id]
+ );
+ }
+
+}
+--- End File: app/models/Attachment.php ---
+
+
+--- File: app/models/Comment.php ---
+db->exec(
+ 'SELECT c.*, u.username AS author_name
+ FROM ticket_comments c
+ LEFT JOIN users u ON c.created_by = u.id
+ WHERE c.ticket_id = ?
+ ORDER BY c.created_at DESC',
+ [$ticket_id]
+ );
+ }
+ }
+--- End File: app/models/Comment.php ---
+
+
+--- File: app/models/Tag.php ---
+tag_table = $type . '_tags';
+ $this->tag_table_id = $type . '_id';
+ parent::__construct($db, $this->tag_table);
+ }
+ return $this;
+ }
+
+ // VERIFY: possible issue with this?
+ public function getTagsFor($objects, $id_key = 'id')
+ {
+ // echo $this->get('_type_id'); exit;
+ // printf('%s
', print_r($this,1)); exit;
+ if(empty($objects)) return [];
+ $ids = array_column($objects, $id_key);
+ $placeholders = implode(',', array_fill(0, count($ids), '?'));
+ $sql =
+ 'SELECT tt.%1$s, t.id, t.name, t.color
+ FROM %2$s tt
+ INNER JOIN tags t ON tt.tag_id = t.id
+ WHERE tt.%1$s IN (%3$s)';
+ $sql_sprintf = sprintf($sql, $this->tag_table_id, $this->tag_table, $placeholders);
+ $rows = $this->db->exec($sql_sprintf, $ids);
+
+ $tags_map = [];
+ foreach($rows as $row)
+ {
+ $tags_map[$row[$this->tag_table_id]][] = $row;
+ }
+
+ foreach($objects as &$object)
+ {
+ $object['tags'] = $tags_map[$object[$id_key]] ?? [];
+ }
+ return $objects;
+
+ }
+
+ public function getTagsForID($id, $id_key = 'id')
+ {
+ $sql = 'SELECT tt.%1$s, t.id, t.name, t.color
+ FROM %2$s tt
+ INNER JOIN tags t ON tt.tag_id = t.id
+ WHERE tt.%1$s = ?';
+ $sql_sprintf = sprintf($sql, $this->tag_table_id, $this->tag_table);
+ $rows = $this->db->exec($sql_sprintf, $id);
+ return $rows;
+ }
+
+ public function findLinkedTags($id = '')
+ {
+ $sql = '
+ SELECT t.name, t.color
+ FROM `?` tt
+ LEFT JOIN `tags` t ON t.id = tt.id
+ WHERE tt.`?` = ?
+ ';
+ $params = [
+ $this->_type,
+ $this->_type_id,
+ $id
+ ];
+ return $this->db->exec($sql, $params);
+ }
+
+
+}
+--- End File: app/models/Tag.php ---
+
+
+--- File: app/models/Ticket.php ---
+db->exec(
+ 'SELECT t.id, t.title, t.created_at,
+ tp.name AS priority_name, ts.name AS status_name, u.display_name
+ FROM tickets t
+ LEFT JOIN ticket_priorities tp ON t.priority_id = tp.id
+ LEFT JOIN ticket_statuses ts ON t.status_id = ts.id
+ LEFT JOIN users u ON t.created_by = u.id
+ WHERE t.recycled = 0
+ ORDER BY t.created_at DESC'
+ );
+ $result = $this->getTagsForTickets($tickets);
+ return $result;
+ }
+
+ public function findFiltered(string $filter): array
+ {
+ $sql = '
+ SELECT t.*, tp.name AS priority_name, ts.name AS status_name, u.display_name
+ FROM tickets t
+ LEFT JOIN ticket_priorities tp ON t.priority_id = tp.id
+ LEFT JOIN ticket_statuses ts ON t.status_id = ts.id
+ LEFT JOIN users u ON t.created_by = u.id
+ WHERE t.recycled = 0
+ ';
+ $params = [];
+ switch($filter){
+ case 'open':
+ $sql .= ' AND status_id = ?';
+ $params[] = 1;
+ break;
+ case 'in_progress':
+ $sql .= ' AND status_id = ?';
+ $params[] = 2;
+ break;
+ case 'on_hold':
+ $sql .= ' AND status_id = ?';
+ $params[] = 3;
+ break;
+ case 'completed':
+ $sql .= ' AND status_id = ?';
+ $params[] = 4;
+ break;
+ }
+
+ $sql .= ' ORDER BY t.created_at DESC';
+ $tickets = $this->db->exec($sql, $params);
+ $result = $this->getTagsForTickets($tickets);
+ return $result;
+ }
+
+ public function getTagsForTickets(array $tickets)
+ {
+ $tag_mapper = new Tag($this->db, 'ticket');
+ $tickets = $tag_mapper->getTagsFor($tickets);
+
+ return $tickets;
+ }
+
+ public function findById($id): ?Ticket
+ {
+ $this->status_name = 'SELECT name FROM ticket_statuses WHERE tickets.status_id = ticket_statuses.id';
+ $this->priority_name = 'SELECT name FROM ticket_priorities WHERE tickets.priority_id = ticket_priorities.id';
+ $this->load(['id = ?', $id]);
+ $this->tags = (new Tag($this->db,'ticket'))->getTagsForID($id, 'ticket_id');
+ return $this->dry() ? null : $this;
+ }
+
+ public function createTicket(array $data): int
+ {
+ $this->reset();
+
+ $this->title = $data['title'] ?? '';
+ $this->description = $data['description'] ?? '';
+ //
+ $this->priority_id = $data['priority_id'] ?? null;
+ $this->status_id = $data['status_id'] ?? null;
+ //
+ $this->created_by = $data['created_by'] ?? null;
+ $this->created_at = ($data['created_at'] == '' ? date('Y-m-d H:i:s') : $data['created_at']) ?? date('Y-m-d H:i:s');
+ $this->updated_at = date('Y-m-d H:i:s');
+
+ $this->save();
+ return (int)$this->id;
+ }
+
+ public function updateTicket(array $data): void
+ {
+ if(isset($data['title'])){ $this->title = $data['title']; }
+ if(isset($data['description'])) { $this->description = $data['description']; }
+ if(isset($data['priority_id'])) { $this->priority_id = $data['priority_id']; }
+ if(isset($data['status_id'])) { $this->status_id = $data['status_id']; }
+ if(isset($data['updated_by'])) { $this->updated_by = $data['updated_by']; }
+ $this->created_at = ($data['created_at'] == '' ? date('Y-m-d H:i:s') : $data['created_at']) ?? date('Y-m-d H:i:s');
+ $this->updated_at = date('Y-m-d H:i:s');
+ $this->save();
+ }
+
+ public function softDelete():void {
+ $this->recycled = 1;
+ $this->save();
+ }
+
+ public function attachments(){
+ $attachment = new Attachment($this->db);
+ return $attachment->findWithUserByTicketId($this->id);
+ }
+
+ public function comments(){
+ $comment = new Comment($this->db);
+ return $comment->findWithUserByTicketId($this->id);
+ }
+
+ public function getParentTickets()
+ {
+ return $this->db->exec(
+ 'SELECT p.*
+ FROM ticket_relations r
+ INNER JOIN tickets p ON r.parent_ticket_id = p.id
+ WHERE r.child_ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function getChildTickets()
+ {
+ return $this->db->exec(
+ 'SELECT c.*
+ FROM ticket_relations r
+ INNER JOIN tickets c ON r.child_ticket_id = c.id
+ WHERE r.parent_ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function addChildTicket(int $childId)
+ {
+ $this->db->exec(
+ 'INSERT IGNORE INTO ticket_relations (parent_ticket_id, child_ticket_id)
+ VALUES (?, ?)',
+ [$this->id, $childId]
+ );
+ }
+
+ // meta data
+ public function getMeta()
+ {
+ return $this->db->exec(
+ 'SELECT id, meta_key, meta_value
+ FROM ticket_meta
+ WHERE ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function getMetaAssoc()
+ {
+ $rows = $this->getMeta();
+ $assoc = [];
+ foreach($rows as $row){
+ $assoc[$row['meta_key']] = $row['meta_value'];
+ }
+ return $assoc;
+ }
+
+ public function assocExistingMeta($meta_ids, $meta_keys, $meta_values){
+ if(is_array($meta_ids) && is_array($meta_keys) && is_array($meta_values)){
+ $field_assoc = [];
+ foreach($meta_ids as $i => $m_id){
+ $key = $meta_keys[$i] ?? '';
+ $value = $meta_values[$i] ?? '';
+ if(!empty($key) && $value !== ''){
+ $field_assoc[$key] = $value;
+ }
+ }
+ return $field_assoc;
+ }
+ return [];
+ }
+
+ public function assocMetaFromKeyValue($meta_keys, $meta_values)
+ {
+ if(is_array($meta_keys) && is_array($meta_values)){
+ $field_assoc = [];
+ foreach($meta_keys as $i => $key){
+ $val = $meta_values[$i] ?? '';
+ if(!empty($key) && $val != ''){
+ $field_assoc[$key] = $val;
+ }
+ }
+ return $field_assoc;
+ }
+ return [];
+ }
+
+ public function setCustomFields(array $fields)
+ {
+ $this->db->exec(
+ 'DELETE FROM ticket_meta WHERE ticket_id = ?', [$this->id]
+ );
+
+ foreach($fields as $key => $value){
+ $this->db->exec(
+ 'INSERT INTO ticket_meta (ticket_id, meta_key, meta_value)
+ VALUES (?, ?, ?)',
+ [$this->id, $key, $value]
+ );
+ }
+ }
+
+}
+--- End File: app/models/Ticket.php ---
+
+
+--- File: app/models/TicketPriority.php ---
+db->exec(
+ 'SELECT * FROM ticket_priorities ORDER BY sort_order ASC'
+ );
+ }
+}
+--- End File: app/models/TicketPriority.php ---
+
+
+--- File: app/models/TicketStatus.php ---
+db->exec(
+ 'SELECT * FROM ticket_statuses ORDER BY sort_order ASC'
+ );
+ }
+}
+--- End File: app/models/TicketStatus.php ---
+
+
+--- File: app/traits/RequiresAuth.php ---
+exists('SESSION.user')){
+ // $f3->set('SESSION.error', 'You don\'t have permission for this ticket.');
+ $f3->set('SESSION.redirect', $f3->get('PATH'));
+ $f3->reroute('/login');
+ }
+ }
+
+}
+--- End File: app/traits/RequiresAuth.php ---
+
+
+--- File: public/index.php ---
+config('../app/config/.env.cfg');
+$f3->set('DEBUG', 3); // development debug
+$f3->set('CACHE', FALSE);
+
+/**
+ * Not required yet
+ */
+$htmlpurifier = \HTMLPurifier::instance();
+// $htmlpurifier->purify($input);
+$md = \ParsedownTableExtension::instance();
+$md->setSafeMode(true);
+
+$f3->set('EXT', [new ParsedownHelper, new BulmaFormHelper, new IconsHelper]);
+
+$f3->set('DB', new \DB\SQL(
+ 'mysql:host=localhost;port=3306;dbname=' . $f3->get('database.db_name'),
+ $f3->get('database.username'),
+ $f3->get('database.password')
+));
+
+new \DB\SQL\Session($f3->get('DB'));
+$f3->set('SESSION.status', 'running');
+
+$f3->run();
+--- End File: public/index.php ---
+
+
+--- File: public/logo.svg ---
+
+--- End File: public/logo.svg ---
+
+
+--- File: public/style.css ---
+html, body {padding:0; margin:0;}
+html, body, #sidebar, #page,#base_body {
+ min-height: 100%
+}
+
+#page { min-height: calc(100vh - 170px - 52px) }
+i.fa { font-weight: 100 !important ; }
+
+.table th.th-icon { width: 2rem; }
+
+#ticket_list .g-flex-item { border-bottom: 1px solid var(--bulma-text-soft); }
+
+a { word-break: break-word; }
+
+/* parsedown check-checkbox */
+li.parsedown-task-list {
+ list-style: none;
+}
+
+/* List Component */
+.list{
+ --be-list-color:var(--bulma-text);
+ --be-list-item-description-color:var(--bulma-text-50);
+ --be-list-item-divider-color:var(--bulma-border);
+ --be-list-item-hover-color:var(--bulma-scheme-main-bis);
+ --be-list-item-image-margin:.75em;
+ --be-list-item-padding:.75em;
+ --be-list-item-title-color:var(--bulma-text-strong);
+ --be-list-item-title-weight:var(--bulma-weight-semibold);
+ color:var(--be-list-color);
+ flex-direction:column;
+ display:flex
+}
+.list.has-hidden-images .list-item-image{
+ display:none
+}
+.list.has-hoverable-list-items .list-item:hover{
+ background-color:var(--be-list-item-hover-color)
+}
+.list.has-overflow-ellipsis .list-item-content{
+ min-inline-size:0;
+ max-inline-size:calc(var(--length)*1ch)
+}
+.list.has-overflow-ellipsis .list-item-content>*{
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ overflow:hidden
+}
+@media (hover:hover){
+ .list:not(.has-visible-pointer-controls) .list-item-controls{
+ opacity:0;
+ visibility:hidden
+ }
+}
+.list .list-item{
+ align-items:center;
+ transition:background-color .125s ease-out;
+ display:flex;
+ position:relative;
+ /* TP: update + align top */
+ align-items: flex-start;
+}
+@media (hover:hover){
+ .list .list-item:hover .list-item-controls,.list .list-item:focus-within .list-item-controls{
+ opacity:initial;
+ visibility:initial
+ }
+}
+.list .list-item:not(.box){
+ padding-block:var(--be-list-item-padding);
+ padding-inline:var(--be-list-item-padding)
+}
+.list .list-item:not(:last-child):not(.box){
+ border-block-end:1px solid var(--be-list-item-divider-color)
+}
+@media screen and (width<=768px){
+ .list:not(.has-overflow-ellipsis) .list .list-item{
+ flex-wrap:wrap
+ }
+}
+.list .list-item-image{
+ flex-shrink:0;
+ margin-inline-end:var(--be-list-item-image-margin);
+ /* TP: update + add margin-top */
+ margin-top: 0.5rem;
+}
+@media screen and (width<=768px){
+ .list .list-item-image{
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+.list .list-item-content{
+ flex-direction:column;
+ flex-grow:1;
+ display:flex
+}
+@media screen and (width<=768px){
+ .list .list-item-content{
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+.list .list-item-title{
+ color:var(--be-list-item-title-color);
+ font-weight:var(--be-list-item-title-weight);
+ margin-bottom: .25rem;
+}
+.list .list-item-description{
+ color:var(--be-list-item-description-color)
+}
+.list .list-item-controls{
+ flex-shrink:0;
+ transition:opacity .125s ease-out
+}
+@media screen and (width<=768px){
+ .list .list-item-controls{
+ flex-wrap:wrap;
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+@media screen and (width>=769px),print{
+ .list .list-item-controls{
+ padding-inline-start:var(--be-list-item-padding)
+ }
+ .list:not(.has-visible-pointer-controls) .list .list-item-controls{
+ block-size:100%;
+ align-items:center;
+ padding-block-end:var(--be-list-item-padding);
+ display:flex;
+ position:absolute;
+ inset-inline-end:0
+ }
+}
+--- End File: public/style.css ---
+
+
+--- File: public/test.md.php ---
+
+
+
+
+
+
+
+
+
+
+
+
+ MD Testing
+
+1. MD CONTENT
+2. list item two
+
+and something else
+
+- and then
+- and then
+- and then
+
+
+--- End File: public/test.md.php ---
+
+
+--- File: public/js/kb_edit.js ---
+
+
+// switch to target tab pane
+function switchTab(targetId){
+ var panes = document.querySelectorAll('.tab-content .tab-pane');
+ for (var i=0; i< panes.length; i++){
+ panes[i].style.display = 'none';
+ }
+ var targetPane = document.getElementById(targetId);
+ if(targetPane){
+ targetPane.style.display = 'block';
+ }
+}
+
+// send ajax post request with content to specified url
+function ajaxPost(content, url, callback){
+ var xhr = new XMLHttpRequest();
+ xhr.open('POST', url, true);
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ xhr.onreadystatechange = function(){
+ if(xhr.readyState === XMLHttpRequest.DONE){
+ if(xhr.status === 200){
+ callback(xhr.responseText);
+ } else {
+ console.error("AJAX error: " + xhr.status);
+ }
+ }
+ };
+ var params = 'content=' + encodeURIComponent(content);
+ xhr.send(params);
+}
+
+// load preview via ajax into preview element
+function loadPreview(previewElement){
+ var sourceId = previewElement.getAttribute('data-source');
+ var handlerUrl = previewElement.getAttribute('data-handler');
+ var method = previewElement.getAttribute('data-method');
+ var sourceElement = document.getElementById(sourceId);
+ if(sourceElement){
+ var content = sourceElement.value;
+ if(method && method.toLowerCase() == 'post'){
+ ajaxPost(content, handlerUrl, function (response){
+ previewElement.innerHTML = response;
+ });
+ }
+ }
+}
+
+// initialise tab links to handle tab switching
+function initTabs(){
+ var tabLinks = document.querySelectorAll('.tabs a[data-target]');
+ for(var i=0; i {
+ link.addEventListener('click', (e) => this.handleTabClick(e, link));
+ });
+ }
+
+ async handleTabClick(e, link) {
+ e.preventDefault();
+ const selectedTab = link.getAttribute('data-tab');
+
+ // Update active tab
+ this.tabParent.querySelectorAll('li').forEach(li => li.classList.remove('is-active'));
+ link.parentElement.classList.add('is-active');
+
+ // Show active content
+ document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
+ const activeContent = document.getElementById(`${this.contentPrefix}-${selectedTab}`);
+ if (activeContent) activeContent.style.display = '';
+
+ if (selectedTab === 'preview') {
+ await this.loadPreview();
+ }
+ }
+
+ async loadPreview() {
+ const previewTarget = document.getElementById('preview-output');
+ if (!previewTarget) return;
+
+ previewTarget.innerHTML = `
+
+ `;
+
+ await new Promise(resolve => setTimeout(resolve, 500));
+
+ const textarea = document.querySelector(this.textareaSelector);
+ const markdown = textarea ? textarea.value : '';
+
+ const res = await fetch(this.previewUrl, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: `content=${encodeURIComponent(markdown)}`
+ });
+
+ const html = await res.text();
+ previewTarget.innerHTML = html;
+ }
+ }
+
+ // Usage
+ document.addEventListener('DOMContentLoaded', () => {
+ new TabSwitcherController({
+ tabSelector: '.tabs',
+ contentPrefix: 'tab',
+ textareaSelector: '#description',
+ previewUrl: '/parsedown/preview'
+ });
+ });
+
+--- End File: public/js/markdown_preview.js ---
+
+
+--- File: public/js/ticket_view.js ---
+document.addEventListener('DOMContentLoaded', function(){
+ const ticket_id = window.location.pathname.split('/')[2];
+ const comments_url = `/ticket/${ticket_id}/comments`;
+ const attachments_url = `/ticket/${ticket_id}/attachments`;
+
+ function ajax(url, containerID){
+ fetch(url)
+ .then(response => {
+ if(!response.ok){
+ throw new Error('Network response was not ok.');
+ }
+ return response.text();
+ })
+ .then(html => {
+ const container_el = document.getElementById(containerID);
+ if(container_el){
+ container_el.innerHTML += html;
+ } else {
+ throw new Error('Coments container does not exist');
+ }
+ })
+ .catch(error => {
+ console.log('Error fetching comments', error);
+ });
+ }
+
+ ajax(attachments_url, 'attachments')
+ ajax(comments_url, 'comments')
+});
+
+
+--- End File: public/js/ticket_view.js ---
+
+
+--- File: public/js/tp_md_editor.js ---
+/**
+ * tp_md_editor.js
+ * Self-contained Markdown Editor with Toolbar Buttons
+ * Usage: tp_md_editor.init(config)
+ */
+
+class TPMarkdownEditor {
+ static init(config = {}) {
+ document.querySelectorAll('tp-md-editor').forEach(editor => {
+ new TPMarkdownEditor(editor, config);
+ });
+ }
+
+ constructor(wrapper, config) {
+ this.wrapper = wrapper;
+ this.name = wrapper.getAttribute('name');
+ this.config = config;
+ this.textarea = document.createElement('textarea');
+ this.textarea.name = this.name;
+ this.textarea.rows = 25;
+ this.toolbar = document.createElement('tp-md-toolbar');
+
+ this.undoStack = []
+ this.redoStack = []
+ this.localStorageKey = this.getStorageKey();
+ this.unsaved = false;
+ this.autosaveInterval = null;
+
+ // this.loadInitialContent();
+ this.captureInitialContent();
+ this.createUnsavedBanner();
+ this.loadFromLocalStorage();
+
+ this.wrapper.appendChild(this.unsavedBanner);
+ this.wrapper.appendChild(this.toolbar);
+ this.wrapper.appendChild(this.textarea);
+
+ this.buttonClasses = TPMarkdownEditor.defaultButtons();
+ this.buildToolbar();
+ this.setupAutoList();
+ this.setupUndoRedo();
+ this.setupPersistence();
+ this.setupAutoSave();
+ }
+
+ getStorageKey(){
+ const path = window.location.pathname;
+ return `tp_md_editor:${path}:${this.name}`;
+ }
+
+ createUnsavedBanner(){
+ const container = document.createElement('div');
+ container.style.cssText = 'background: #fff3cd; color: #856404; padding: 5px 10px; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; display: none;';
+
+ const text = document.createElement('span');
+ text.textContent = 'You have unsaved changes.';
+
+ const discardBtn = document.createElement('button');
+ discardBtn.textContent = 'Discard';
+ discardBtn.style.cssText = 'margin-left: auto; background: none; border: none; color: #856404; text-decoration: underline; cursor: pointer;';
+ discardBtn.addEventListener('click', () => {
+ localStorage.removeItem(this.localStorageKey);
+ const hidden = this.wrapper.querySelector('.tp-md-initial');
+ if(hidden){
+ this.textarea.value = hidden.textContent;
+ }
+ this.clearUnsaved();
+ });
+
+ container.appendChild(text);
+ container.appendChild(discardBtn);
+ this.unsavedBanner = container
+ }
+
+ markUnsaved(){
+ this.unsaved = true;
+ this.unsavedBanner.style.display = 'block';
+ }
+
+ clearUnsaved(){
+ this.unsaved = false;
+ this.unsavedBanner.style.display = 'none';
+ }
+
+ setupPersistence(){
+ window.addEventListener('beforeunload', (e) => {
+ if(this.unsaved){
+ localStorage.setItem(this.localStorageKey, this.textarea.value);
+ }
+ });
+ }
+
+ setupAutoSave(){
+ this.autosaveInterval = setInterval(() => {
+ if(this.unsaved){
+ localStorage.setItem(this.localStorageKey, this.textarea.value);
+ }
+ }, 5000); // save every 5 sec
+ }
+
+ loadFromLocalStorage(){
+ const saved = localStorage.getItem(this.localStorageKey);
+ if(saved){
+ this.textarea.value = saved;
+ this.markUnsaved();
+ }
+ }
+
+ buildToolbar() {
+ const groups = this.config.groups || [Object.keys(this.buttonClasses)];
+ groups.forEach(group => {
+ const groupEl = document.createElement('tp-md-toolbar-group');
+ group.forEach(btnType => {
+ const BtnClass = this.buttonClasses[btnType];
+ if (BtnClass) {
+ const btn = new BtnClass(this.textarea);
+ groupEl.appendChild(btn.element);
+ }
+ });
+ this.toolbar.appendChild(groupEl);
+ });
+ }
+
+ setupUndoRedo(){
+ this.textarea.addEventListener('input', ()=>{
+ this.undoStack.push(this.textarea.value);
+ if(this.undoStack > 100) this.undoStack.shift();
+ this.redoStack = [];
+ this.markUnsaved();
+ });
+
+ this.textarea.addEventListener('keydown', (e) => {
+ if(e.ctrlKey && e.key === 'z'){
+ e.preventDefault();
+ if(this.undoStack.length > 0 ){
+ this.redoStack.push(this.textarea.value);
+ this.textarea.value = this.undoStack.pop();
+ this.markUnsaved();
+ }
+ } else if (e.ctrlKey && (e.key === 'y')) { // || e.shiftkey && e.key === 'z'
+ e.preventDefault();
+ if(this.redoStack.length > 0){
+ this.undoStack.push(this.textarea.value);
+ this.textarea.value = this.redoStack.pop();
+ this.markUnsaved();
+ }
+ }
+ });
+ }
+
+ setupAutoList() {
+ this.textarea.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ const pos = this.textarea.selectionStart;
+ const before = this.textarea.value.slice(0, pos);
+ const after = this.textarea.value.slice(pos);
+ const lines = before.split('\n');
+ const lastLine = lines[lines.length - 1];
+
+ // need order of task > ul
+ let match;
+ if ((match = lastLine.match(/^(\s*)- \[( |x)\] /))) {
+ // task
+ e.preventDefault();
+ if (lastLine.trim() === '- [ ]' || lastLine.trim() === '- [x]') {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const insert = '\n' + match[1] + '- [ ] ';
+ this.insertAtCursor(insert);
+ }
+ } else if ((match = lastLine.match(/^(\s*)([-*+] )/))) {
+ // ul
+ e.preventDefault();
+ if (lastLine.trim() === match[2].trim()) {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const insert = '\n' + match[1] + match[2];
+ this.insertAtCursor(insert);
+ }
+ } else if ((match = lastLine.match(/^(\s*)(\d+)\. /))) {
+ // ol
+ e.preventDefault();
+ if (lastLine.trim() === `${match[2]}.`) {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const nextNum = parseInt(match[2]) + 1;
+ const insert = `\n${match[1]}${nextNum}. `;
+ this.insertAtCursor(insert);
+ }
+ }
+ }
+ });
+ }
+
+ removeLastLine(cursorPos, lengthToRemove) {
+ const start = cursorPos - lengthToRemove;
+ this.textarea.setRangeText('', start, cursorPos, 'start');
+ this.textarea.setSelectionRange(start, start);
+ }
+
+ insertAtCursor(text) {
+ const start = this.textarea.selectionStart;
+ const end = this.textarea.selectionEnd;
+ this.textarea.setRangeText(text, start, end, 'end');
+ const newPos = start + text.length;
+ this.textarea.setSelectionRange(newPos, newPos)
+ this.markUnsaved();
+ }
+
+ captureInitialContent() {
+ const hidden = document.createElement('script');
+ hidden.type = 'text/plain';
+ // hidden.style.display = 'none';
+ hidden.classList.add('tp-md-initial');
+ hidden.textContent = this.wrapper.textContent.trim();
+ // clear inner content so it's not visible twice
+ this.wrapper.textContent = '';
+
+ this.wrapper.appendChild(hidden);
+ this.textarea.value = hidden.textContent;
+ }
+
+ static defaultButtons() {
+ return {
+ h1: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '# ', 'H1', 'fas fa-heading', '', 'fas fa-1'); }
+ },
+ h2: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '## ', 'H2', 'fas fa-heading', '', 'fas fa-2'); }
+ },
+ h3: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '### ', 'H3', 'fas fa-heading', '', 'fas fa-3'); }
+ },
+ bold: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '**', 'Bold', 'fas fa-bold', '**'); }
+ },
+ italic: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '_', 'Italic', 'fas fa-italic', '_'); }
+ },
+ quote: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '> ', 'Quote', 'fas fa-quote-right'); }
+ },
+ code: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '`', 'Code', 'fas fa-code', '`'); }
+ formatSelection(sel) {
+ if (!sel || !sel.includes('\n')) {
+ return '`' + (sel || 'code') + '`';
+ }
+ return '```\n' + sel + '\n```';
+ }
+ },
+ link: class extends TPMarkdownButton {
+ constructor(textarea) {
+ super(textarea, '[', 'Link', 'fas fa-link', '](url)');
+ }
+ formatSelection(sel) {
+ return `[${sel || 'text'}](url)`;
+ }
+ },
+ bullet: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '- ', 'Bullet', 'fas fa-list-ul'); }
+ formatSelection(sel){
+ return sel.split('\n').map(line => '- ' + line).join('\n');
+ }
+ },
+ number: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '1. ', 'Numbered', 'fas fa-list-ol'); }
+ formatSelection(sel){
+ return sel.split('\n').map((line, i) => `${i+1}. ${line}`).join('\n');
+ }
+ },
+ task: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '- [ ] ', 'Task', 'fas fa-tasks'); }
+ formatSelection(sel){
+ return sel.split('\n').map(line => ' - [ ]' + line).join('\n')
+ }
+ },
+ hr: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '---\n', 'HR', 'fas fa-minus'); }
+ },
+ table: class extends TPMarkdownButton {
+ constructor(textarea) {
+ super(textarea, '', 'Table', 'fas fa-table');
+ }
+ formatSelection(_) {
+ return '| Col1 | Col2 |\n|------|------|\n| Val1 | Val2 |';
+ }
+ },
+ };
+ }
+}
+
+class TPMarkdownButton {
+ constructor(textarea, prefix = '', title = '', icon = '', suffix = '', icon_offset = '') {
+ this.textarea = textarea;
+ this.prefix = prefix;
+ this.suffix = suffix;
+ this.element = document.createElement('tp-md-toolbar-button');
+ this.element.title = title;
+ if (icon_offset == '') {
+ this.element.innerHTML = ``;
+ } else {
+ this.element.innerHTML = ``;
+ }
+ this.element.addEventListener('click', () => this.apply());
+ }
+
+ formatSelection(sel) {
+ return this.prefix + (sel || 'text') + this.suffix;
+ }
+
+ apply() {
+ const textarea = this.textarea;
+ const start = textarea.selectionStart;
+ const end = textarea.selectionEnd;
+ const text = textarea.value;
+ this.previousValue = textarea.value;
+ const selected = text.substring(start, end);
+ const formatted = this.formatSelection(selected);
+ textarea.setRangeText(formatted, start, end, 'end');
+
+ if(this.previousValue !== textarea.value){
+ if(!textarea.undoStack) textarea.undoStack = [];
+ textarea.undoStack.push(this.previousValue);
+ }
+
+ textarea.focus();
+ }
+}
+
+// Export as global
+window.tp_md_editor = TPMarkdownEditor;
+--- End File: public/js/tp_md_editor.js ---
+
+
+--- File: scss/main.scss ---
+// import bulma
+@use "vendor/bulma";
+
+// import custom components
+@use "components/ticket-item";
+--- End File: scss/main.scss ---
+
+
+--- File: scss/components/_ticket-item.scss ---
+@use "../vendor/bulma";
+
+.ticket-item {
+ @extend .is-flex;
+ @extend .mb-1;
+ @extend .pt-1;
+ @extend .pb-2;
+ @extend .is-align-items-flex-start;
+ border-bottom: 1px solid var(--bulma-text-90);
+
+ .ticket-icon {
+ @extend .mr-2;
+ display: flex;
+ align-items: baseline;
+
+ .checkbox {
+ margin-right: 0.5rem;
+ }
+ }
+
+ .ticket-content {
+ @extend .is-flex;
+ @extend .is-flex-direction-column;
+ @extend .is-flex-grow-1;
+ align-self: baseline;
+
+ .ticket-header {
+ @extend .is-flex;
+ @extend .is-justify-content-flex-start;
+ @extend .is-flex-wrap-wrap;
+ @extend .mb-1;
+ align-items: center;
+
+ .ticket-title {
+ @extend .title;
+ @extend .mb-0;
+ @extend .is-5;
+ font-weight: normal;
+ }
+
+ .tags {
+ @extend .ml-2;
+ }
+ }
+
+ .ticket-meta {
+ @extend .is-flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+
+ p {
+ @extend .subtitle;
+ @extend .is-6;
+ font-weight: 300;
+ margin: 0;
+ }
+ }
+ }
+}
+--- End File: scss/components/_ticket-item.scss ---
+
+
+--- File: scss/vendor/_bulma-tools.scss ---
+@use "../../node_modules/bulma/sass/utilities/" as bulma-utils;
+@use "../../node_modules/bulma/sass/helpers/" as bulma-helpers;
+@use "../../node_modules/bulma/sass/elements/" as bulma-elements;
+--- End File: scss/vendor/_bulma-tools.scss ---
+
+
+--- File: scss/vendor/_bulma.scss ---
+@forward "../../node_modules/bulma/bulma";
+--- End File: scss/vendor/_bulma.scss ---
+
+
+--- File: ui/partials/ticket_item.html ---
+
+
+
+
+
+
+
{{@ticket.status_name}}
+
+
+
+
+
+
+ Paste or drag an image here
+
+
![image preview]()
+
+
+
+
+ {{ @SESSION.error }}
+
+
+--- End File: ui/session/error.html ---
+
+
+--- File: ui/templates/layout.html ---
+
+
+
+
+
+
+ TP ServiceDesk
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--- End File: ui/templates/layout.html ---
+
+
+--- File: ui/views/dashboard.html ---
+Dashboard
+--- End File: ui/views/dashboard.html ---
+
+
+--- File: ui/views/home.html ---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ticketing System
+
+ - Create & Track tickets
+ - Assign priorities & statuses
+ - Link child/parent tickets
+
+
+
+
+
+
+
+
+
+
Knowledge Base
+
+ - Markdown-powered articles
+ - Tagging and filtering
+ - Fast searching
+
+
+
+
+
+
+
+
+
+
Projects
+
+ - Track ongoing projects
+ - Integreate tasks and tickets
+ - Monitor progress
+
+
+
+
+
+
+
+
+
+
Collaboration
+
+ - Comment threads
+ - File attachments
+ - Role-based user access
+
+
+
+
+
+
+
+
+
+
Custom fields
+
+ - Define ticket meta data
+ - Configure and store extra info
+ - Easily editable in forms
+
+
+
+
+
+
+
+
+
+
Administration
+
+ - Manage user roles
+ - Create new account
+ - Edit existing users
+
+
+
+
+
+
+
+
+
Please Log In
+
+
+
+
+
+
+--- End File: ui/views/login.html ---
+
+
+--- File: ui/views/admin/index.html ---
+Admin
+
+
+
+--- End File: ui/views/admin/index.html ---
+
+
+--- File: ui/views/admin/priorities/create.html ---
+Create Ticket Priority
+TODO:
+--- End File: ui/views/admin/priorities/create.html ---
+
+
+--- File: ui/views/admin/priorities/index.html ---
+Admin: Ticket Priorities
+create priority
+
+
+
+
+
+ | id |
+ name |
+ sort_order |
+ |
+
+
+
+
+
+
+ | {{@priority.id}} |
+ {{@priority.name}} |
+ {{@priority.sort_order}} |
+
+
+
+
+
+ |
+
+
+
+
+--- End File: ui/views/admin/priorities/index.html ---
+
+
+--- File: ui/views/attachment/index.html ---
+
+
+
Attachments
+
+
+
+
+
+
+ |
+ File Name |
+ Uploaded By |
+ Created At |
+ Version |
+
+
+
+
+
+ |
+
+ |
+ {{ @attach.file_name }} |
+ {{ @attach.username }} |
+ {{ @attach.created_at }} |
+ {{ @attach.version_number }} |
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+--- End File: ui/views/comments/view.html ---
+
+
+--- File: ui/views/kb/create.html ---
+Create Knowledge Base Article
+
+
+
+--- End File: ui/views/kb/create.html ---
+
+
+--- File: ui/views/kb/edit.html ---
+Edit Knowledge Base Article
+
+
+
+--- End File: ui/views/kb/edit.html ---
+
+
+--- File: ui/views/kb/index.html ---
+Knowledge Base
+create kb article
+
+
+
+
+
+
+
+
+ | id | title | created_at |
+ |
+
+
+
+
+
+
+ | {{@article.id}} |
+ {{@article.title}} |
+ {{@article.created_at}} |
+
+
+ |
+
+
+
+
+
+
+
+
+
+--- End File: ui/views/kb/index.html ---
+
+
+--- File: ui/views/kb/view.html ---
+{{@article.title}}
+edit article
+
+
+
+
{{ @article.content | raw }}
+
+
+
+ | Property | Value |
|---|
+
+
+
+ | {{@key}} | {{@value}} |
+
+
+
+
+ TODO: create form.
+
+--- End File: ui/views/project/create.html ---
+
+
+--- File: ui/views/project/edit.html ---
+
+ TODO: edit form
+
+--- End File: ui/views/project/edit.html ---
+
+
+--- File: ui/views/project/index.html ---
+Projects
+create project
+
+
+
+
+
+ | ID |
+ Title |
+ Requester |
+ Created By |
+ Created At |
+ Start Date |
+ End Date |
+
+
+
+
+
+ | {{ @p.id }} |
+ {{ @p.title }} |
+ {{ @p.requester }} |
+ {{ @p.created_by }} |
+ {{ @p.created_at }} |
+ {{ @p.start_date }} |
+ {{ @p.end_date }} |
+
+
+
+
+
+--- End File: ui/views/project/index.html ---
+
+
+--- File: ui/views/project/view.html ---
+{{ @project.title }}
+edit project
+
+
+
+
Overview
+
+
{{ @project.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+---
+## View project
+
+A central place to see everything for this project:
+
+- Overview: (title, description, links, start/end dates).
+- related tickets (with status and priorities)
+- events
+- tasks
+- timeline combining events, tickets, milestone dates
+
+## Example Workflow
+
+- create a project - `team manager overview`
+-- attach relevant links
+- add tickets - each new request or issue can be a ticket referencing this project
+- add events - quick notes about management meetings, or verbal discussions that don't need ticket overhead
+-- meeting on 01 jan to discuss layout
+-- teams message on 28 jan clarifying data requirements
+- project tasks - for smaller to do items that don't warrant a full ticket
+-- identify location of required data, create initial pq connections, build a mockup layout
+
+## Reporting Timelines
+- timeline view - merge ticket data with project_events sorted by date - chronological Overview
+- status summaries - how many tickets open, on hold, completed
+- progress tracking - sumarries or gantt style charts
+
+--- End File: ui/views/project/view.html ---
+
+
+--- File: ui/views/tag/create.html ---
+Create Tag
+
+
+--- End File: ui/views/tag/create.html ---
+
+
+--- File: ui/views/tag/index.html ---
+Tags
+create tag
+
+
+
+
+
+
+
+
+ No tags found
+
+
+
+
+
+
+
+
Color Examples
+
The following color names can be used for tags
+
+
+ Black
+ Dark
+ Light
+ White
+ Primary
+ Link
+ Info
+ Success
+ Warning
+ Danger
+
+
Create Ticket Form
+
+
+--- End File: ui/views/ticket/create.html ---
+
+
+--- File: ui/views/ticket/edit.html ---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--- End File: ui/views/ticket/edit.html ---
+
+
+--- File: ui/views/ticket/edit.html.v1 ---
+Edit Ticket Form
+
+
+--- End File: ui/views/ticket/edit.html.v1 ---
+
+
+--- File: ui/views/ticket/index.html ---
+Tickets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+*/
+?>
+--- End File: ui/views/ticket/index.html ---
+
+
+--- File: ui/views/ticket/index_row.html ---
+
+
+
+ {{@ticket.status_name}}
+
+
+
+
+
#{{@ticket.id}} opened 2025-03-25 by {{@ticket.display_name}}
+
+
+
+
{{ @ticket.title }}
+
+
+
+
+
+
+
+
+
{{ @ticket.created_at }}
+
+
{{ @ticket.description | raw }}
+
+
+
+
+
+
+
+
+
+ {{@tag.name}}
+
+
+
+
+ | Property | Value |
|---|
+
+
+
+
+ | {{@key}} | {{@value}} |
+
+
+
+
+
+
+
+
Linked Tickets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
All Users
+
+
+
+ | ID | Username | Role | Actions |
+
+
+
+
+ | {{ @u.id }} |
+ {{ @u.username }} |
+ {{ @u.role_name }} ( {{ @u.role }} ) |
+
+
+
+
+
Error: Bulma CSS Form TYPE ('.$type.') not defined.
';
+ break;
+ }
+
+ } else {
+ return 'Error: Bulma CSS Form TYPE not defined.
';
+ }
+
+ }
+
+ static function build_field_input($label, $name, $value, $class, $rows=10){
+
+ $string_label = $label !== '' ? sprintf('', $label) : '';
+ $string = '
+
+ ';
+ return sprintf($string, $string_label, $name, $value, $class, $rows);
+ }
+
+ static function build_field_textarea($label, $name, $value, $class, $rows=10)
+ {
+ $string_label = $label !== '' ? sprintf('', $label) : '';
+ $string = '
+
+ ';
+ return sprintf($string, $string_label, $name, $value, $class,$rows);
+ }
+
+ static function build_h_field_textarea($label, $name, $value){
+ $string = '
+
+ ';
+ return $string;
+ }
+
+ static function build_h_field_input($label, $name, $value){
+ $string = '
+
+ ';
+ return $string;
+ }
+
+
+ /**
+ * build_field_select_new
+ *
+ * ``
+ *
+ * @param mixed $attr
+ * @return void
+ */
+ static function build_field_select($attr)
+ {
+ $f3 = \Base::instance();
+
+ $class = $attr['class'] ?? '';
+ $label = $attr['label'] ?? '';
+ $name = $attr['name'] ?? '';
+ // $options_arr = $attr['options'] ?? [];
+ $option_value = $attr['option_value'] ?? 'id';
+ $option_name = $attr['option_name'] ?? 'name';
+
+ $options = \Template::instance()->token($attr['options']);
+ $selected = \Template::instance()->token($attr['selected']);
+
+ // TODO: label - this could be moved into a seperate function
+ $html_label = $label !== '' ? sprintf('', $label) : '';
+
+ $tmp_options = 'field_select('.
+ $options.', '.$selected.', "'.$option_value.'", "'.$option_name.'"); ?>';
+
+ $html = '
+
+ ';
+
+ return sprintf($html, $html_label, $tmp_options, $name, $class);
+ }
+
+ function field_select($options, $selected, $option_value, $option_name){
+ $html_options = '';
+ foreach ($options as $option) {
+ $value = $option[$option_value] ?? '';
+ $text = $option[$option_name] ?? '';
+ $html_selected = ((string)$value === (string)$selected) ? ' selected="selected"' : '';
+ $html_option = '';
+ $html_options .= sprintf($html_option, $value, $html_selected, $text);
+ }
+ echo $html_options;
+ }
+
+ static function build_h_field_select_new($attr)
+ {
+ $f3 = \Base::instance();
+
+ $label = $attr['label'] ?? '';
+ $name = $attr['name'] ?? '';
+ $options_arr = $attr['options'] ?? [];
+ $optionValue = $attr['option_value'] ?? 'id';
+ $optionName = $attr['option_name'] ?? 'name';
+ $selected = $attr['selected'] ?? '';
+
+ $options = $f3->get($options_arr);
+
+ $html = '';
+ if (!empty($label)) {
+ $html .= '';
+ }
+ $html .= '
';
+ $html .= '
';
+ $html .= '';
+ $html .= '
+
+
+
+
+
+
+
+
+
+
+
'
+ return '
+
+ ';
+ } else {
+ return '';
+ }
+ return ''.$icon_class[1].'';
+
+ }
+
+}
+
+\Template::instance()->extend('icons', 'IconsHelper::icons');
+--- End File: app/extensions/IconsHelper.php ---
+
+
+--- File: app/extensions/ParsedownHelper.php ---
+text($args[0]);
+
+ return '
+
+ ';
+
+ }
+
+ // return ''.print_r($args,1).'
';
+
+ $content = $args[0];
+ $content_token = \Template::instance()->token($content);
+
+ return '
+
+ build('.$content_token.'); ?>
+ ';
+ }
+
+ function build($content){
+ return \ParsedownTableExtension::instance()->text($content);
+ }
+}
+
+\Template::instance()->extend('parsedown', 'ParsedownHelper::render');
+--- End File: app/extensions/ParsedownHelper.php ---
+
+
+--- File: app/extensions/ParsedownTableExtension.php ---
+ 'table',
+ // 'handler' => 'elements',
+ // 'text' => [ ... ],
+ // 'attributes' => [...],
+ // ]
+
+ // Add your custom class to the itself:
+ if (!isset($Block['element']['attributes'])) {
+ $Block['element']['attributes'] = [];
+ }
+ $Block['element']['attributes']['class'] = 'table is-bordered';
+
+ // Wrap the in a :
+ $wrapped = [
+ 'name' => 'div',
+ 'attributes' => [
+ 'class' => 'table-container',
+ ],
+ 'handler' => 'elements',
+ 'text' => [
+ $Block['element'], // the
itself
+ ],
+ ];
+
+ // Replace the original element with our wrapped version:
+ $Block['element'] = $wrapped;
+ }
+
+ return $Block;
+ }
+}
+--- End File: app/extensions/ParsedownTableExtension.php ---
+
+
+--- File: app/interfaces/CRUD.php ---
+db->exec(
+ 'SELECT a.*, u.username
+ FROM attachments a
+ LEFT JOIN users u ON u.id = a.uploaded_by
+ WHERE a.ticket_id = ?
+ ORDER BY a.created_at DESC',
+ [$ticket_id]
+ );
+ }
+
+}
+--- End File: app/models/Attachment.php ---
+
+
+--- File: app/models/Comment.php ---
+db->exec(
+ 'SELECT c.*, u.username AS author_name
+ FROM ticket_comments c
+ LEFT JOIN users u ON c.created_by = u.id
+ WHERE c.ticket_id = ?
+ ORDER BY c.created_at DESC',
+ [$ticket_id]
+ );
+ }
+ }
+--- End File: app/models/Comment.php ---
+
+
+--- File: app/models/Tag.php ---
+tag_table = $type . '_tags';
+ $this->tag_table_id = $type . '_id';
+ parent::__construct($db, $this->tag_table);
+ }
+ return $this;
+ }
+
+ // VERIFY: possible issue with this?
+ public function getTagsFor($objects, $id_key = 'id')
+ {
+ // echo $this->get('_type_id'); exit;
+ // printf('%s
', print_r($this,1)); exit;
+ if(empty($objects)) return [];
+ $ids = array_column($objects, $id_key);
+ $placeholders = implode(',', array_fill(0, count($ids), '?'));
+ $sql =
+ 'SELECT tt.%1$s, t.id, t.name, t.color
+ FROM %2$s tt
+ INNER JOIN tags t ON tt.tag_id = t.id
+ WHERE tt.%1$s IN (%3$s)';
+ $sql_sprintf = sprintf($sql, $this->tag_table_id, $this->tag_table, $placeholders);
+ $rows = $this->db->exec($sql_sprintf, $ids);
+
+ $tags_map = [];
+ foreach($rows as $row)
+ {
+ $tags_map[$row[$this->tag_table_id]][] = $row;
+ }
+
+ foreach($objects as &$object)
+ {
+ $object['tags'] = $tags_map[$object[$id_key]] ?? [];
+ }
+ return $objects;
+
+ }
+
+ public function getTagsForID($id, $id_key = 'id')
+ {
+ $sql = 'SELECT tt.%1$s, t.id, t.name, t.color
+ FROM %2$s tt
+ INNER JOIN tags t ON tt.tag_id = t.id
+ WHERE tt.%1$s = ?';
+ $sql_sprintf = sprintf($sql, $this->tag_table_id, $this->tag_table);
+ $rows = $this->db->exec($sql_sprintf, $id);
+ return $rows;
+ }
+
+ public function findLinkedTags($id = '')
+ {
+ $sql = '
+ SELECT t.name, t.color
+ FROM `?` tt
+ LEFT JOIN `tags` t ON t.id = tt.id
+ WHERE tt.`?` = ?
+ ';
+ $params = [
+ $this->_type,
+ $this->_type_id,
+ $id
+ ];
+ return $this->db->exec($sql, $params);
+ }
+
+
+}
+--- End File: app/models/Tag.php ---
+
+
+--- File: app/models/Ticket.php ---
+db->exec(
+ 'SELECT t.id, t.title, t.created_at,
+ tp.name AS priority_name, ts.name AS status_name, u.display_name
+ FROM tickets t
+ LEFT JOIN ticket_priorities tp ON t.priority_id = tp.id
+ LEFT JOIN ticket_statuses ts ON t.status_id = ts.id
+ LEFT JOIN users u ON t.created_by = u.id
+ WHERE t.recycled = 0
+ ORDER BY t.created_at DESC'
+ );
+ $result = $this->getTagsForTickets($tickets);
+ return $result;
+ }
+
+ public function findFiltered(string $filter): array
+ {
+ $sql = '
+ SELECT t.*, tp.name AS priority_name, ts.name AS status_name, u.display_name
+ FROM tickets t
+ LEFT JOIN ticket_priorities tp ON t.priority_id = tp.id
+ LEFT JOIN ticket_statuses ts ON t.status_id = ts.id
+ LEFT JOIN users u ON t.created_by = u.id
+ WHERE t.recycled = 0
+ ';
+ $params = [];
+ switch($filter){
+ case 'open':
+ $sql .= ' AND status_id = ?';
+ $params[] = 1;
+ break;
+ case 'in_progress':
+ $sql .= ' AND status_id = ?';
+ $params[] = 2;
+ break;
+ case 'on_hold':
+ $sql .= ' AND status_id = ?';
+ $params[] = 3;
+ break;
+ case 'completed':
+ $sql .= ' AND status_id = ?';
+ $params[] = 4;
+ break;
+ }
+
+ $sql .= ' ORDER BY t.created_at DESC';
+ $tickets = $this->db->exec($sql, $params);
+ $result = $this->getTagsForTickets($tickets);
+ return $result;
+ }
+
+ public function getTagsForTickets(array $tickets)
+ {
+ $tag_mapper = new Tag($this->db, 'ticket');
+ $tickets = $tag_mapper->getTagsFor($tickets);
+
+ return $tickets;
+ }
+
+ public function findById($id): ?Ticket
+ {
+ $this->status_name = 'SELECT name FROM ticket_statuses WHERE tickets.status_id = ticket_statuses.id';
+ $this->priority_name = 'SELECT name FROM ticket_priorities WHERE tickets.priority_id = ticket_priorities.id';
+ $this->load(['id = ?', $id]);
+ $this->tags = (new Tag($this->db,'ticket'))->getTagsForID($id, 'ticket_id');
+ return $this->dry() ? null : $this;
+ }
+
+ public function createTicket(array $data): int
+ {
+ $this->reset();
+
+ $this->title = $data['title'] ?? '';
+ $this->description = $data['description'] ?? '';
+ //
+ $this->priority_id = $data['priority_id'] ?? null;
+ $this->status_id = $data['status_id'] ?? null;
+ //
+ $this->created_by = $data['created_by'] ?? null;
+ $this->created_at = ($data['created_at'] == '' ? date('Y-m-d H:i:s') : $data['created_at']) ?? date('Y-m-d H:i:s');
+ $this->updated_at = date('Y-m-d H:i:s');
+
+ $this->save();
+ return (int)$this->id;
+ }
+
+ public function updateTicket(array $data): void
+ {
+ if(isset($data['title'])){ $this->title = $data['title']; }
+ if(isset($data['description'])) { $this->description = $data['description']; }
+ if(isset($data['priority_id'])) { $this->priority_id = $data['priority_id']; }
+ if(isset($data['status_id'])) { $this->status_id = $data['status_id']; }
+ if(isset($data['updated_by'])) { $this->updated_by = $data['updated_by']; }
+ $this->created_at = ($data['created_at'] == '' ? date('Y-m-d H:i:s') : $data['created_at']) ?? date('Y-m-d H:i:s');
+ $this->updated_at = date('Y-m-d H:i:s');
+ $this->save();
+ }
+
+ public function softDelete():void {
+ $this->recycled = 1;
+ $this->save();
+ }
+
+ public function attachments(){
+ $attachment = new Attachment($this->db);
+ return $attachment->findWithUserByTicketId($this->id);
+ }
+
+ public function comments(){
+ $comment = new Comment($this->db);
+ return $comment->findWithUserByTicketId($this->id);
+ }
+
+ public function getParentTickets()
+ {
+ return $this->db->exec(
+ 'SELECT p.*
+ FROM ticket_relations r
+ INNER JOIN tickets p ON r.parent_ticket_id = p.id
+ WHERE r.child_ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function getChildTickets()
+ {
+ return $this->db->exec(
+ 'SELECT c.*
+ FROM ticket_relations r
+ INNER JOIN tickets c ON r.child_ticket_id = c.id
+ WHERE r.parent_ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function addChildTicket(int $childId)
+ {
+ $this->db->exec(
+ 'INSERT IGNORE INTO ticket_relations (parent_ticket_id, child_ticket_id)
+ VALUES (?, ?)',
+ [$this->id, $childId]
+ );
+ }
+
+ // meta data
+ public function getMeta()
+ {
+ return $this->db->exec(
+ 'SELECT id, meta_key, meta_value
+ FROM ticket_meta
+ WHERE ticket_id = ?',
+ [$this->id]
+ );
+ }
+
+ public function getMetaAssoc()
+ {
+ $rows = $this->getMeta();
+ $assoc = [];
+ foreach($rows as $row){
+ $assoc[$row['meta_key']] = $row['meta_value'];
+ }
+ return $assoc;
+ }
+
+ public function assocExistingMeta($meta_ids, $meta_keys, $meta_values){
+ if(is_array($meta_ids) && is_array($meta_keys) && is_array($meta_values)){
+ $field_assoc = [];
+ foreach($meta_ids as $i => $m_id){
+ $key = $meta_keys[$i] ?? '';
+ $value = $meta_values[$i] ?? '';
+ if(!empty($key) && $value !== ''){
+ $field_assoc[$key] = $value;
+ }
+ }
+ return $field_assoc;
+ }
+ return [];
+ }
+
+ public function assocMetaFromKeyValue($meta_keys, $meta_values)
+ {
+ if(is_array($meta_keys) && is_array($meta_values)){
+ $field_assoc = [];
+ foreach($meta_keys as $i => $key){
+ $val = $meta_values[$i] ?? '';
+ if(!empty($key) && $val != ''){
+ $field_assoc[$key] = $val;
+ }
+ }
+ return $field_assoc;
+ }
+ return [];
+ }
+
+ public function setCustomFields(array $fields)
+ {
+ $this->db->exec(
+ 'DELETE FROM ticket_meta WHERE ticket_id = ?', [$this->id]
+ );
+
+ foreach($fields as $key => $value){
+ $this->db->exec(
+ 'INSERT INTO ticket_meta (ticket_id, meta_key, meta_value)
+ VALUES (?, ?, ?)',
+ [$this->id, $key, $value]
+ );
+ }
+ }
+
+}
+--- End File: app/models/Ticket.php ---
+
+
+--- File: app/models/TicketPriority.php ---
+db->exec(
+ 'SELECT * FROM ticket_priorities ORDER BY sort_order ASC'
+ );
+ }
+}
+--- End File: app/models/TicketPriority.php ---
+
+
+--- File: app/models/TicketStatus.php ---
+db->exec(
+ 'SELECT * FROM ticket_statuses ORDER BY sort_order ASC'
+ );
+ }
+}
+--- End File: app/models/TicketStatus.php ---
+
+
+--- File: app/traits/RequiresAuth.php ---
+exists('SESSION.user')){
+ // $f3->set('SESSION.error', 'You don\'t have permission for this ticket.');
+ $f3->set('SESSION.redirect', $f3->get('PATH'));
+ $f3->reroute('/login');
+ }
+ }
+
+}
+--- End File: app/traits/RequiresAuth.php ---
+
+
+--- File: public/index.php ---
+config('../app/config/.env.cfg');
+$f3->set('DEBUG', 3); // development debug
+$f3->set('CACHE', FALSE);
+
+/**
+ * Not required yet
+ */
+$htmlpurifier = \HTMLPurifier::instance();
+// $htmlpurifier->purify($input);
+$md = \ParsedownTableExtension::instance();
+$md->setSafeMode(true);
+
+$f3->set('EXT', [new ParsedownHelper, new BulmaFormHelper, new IconsHelper]);
+
+$f3->set('DB', new \DB\SQL(
+ 'mysql:host=localhost;port=3306;dbname=' . $f3->get('database.db_name'),
+ $f3->get('database.username'),
+ $f3->get('database.password')
+));
+
+new \DB\SQL\Session($f3->get('DB'));
+$f3->set('SESSION.status', 'running');
+
+$f3->run();
+--- End File: public/index.php ---
+
+
+--- File: public/logo.svg ---
+
+--- End File: public/logo.svg ---
+
+
+--- File: public/style.css ---
+html, body {padding:0; margin:0;}
+html, body, #sidebar, #page,#base_body {
+ min-height: 100%
+}
+
+#page { min-height: calc(100vh - 170px - 52px) }
+i.fa { font-weight: 100 !important ; }
+
+.table th.th-icon { width: 2rem; }
+
+#ticket_list .g-flex-item { border-bottom: 1px solid var(--bulma-text-soft); }
+
+a { word-break: break-word; }
+
+/* parsedown check-checkbox */
+li.parsedown-task-list {
+ list-style: none;
+}
+
+/* List Component */
+.list{
+ --be-list-color:var(--bulma-text);
+ --be-list-item-description-color:var(--bulma-text-50);
+ --be-list-item-divider-color:var(--bulma-border);
+ --be-list-item-hover-color:var(--bulma-scheme-main-bis);
+ --be-list-item-image-margin:.75em;
+ --be-list-item-padding:.75em;
+ --be-list-item-title-color:var(--bulma-text-strong);
+ --be-list-item-title-weight:var(--bulma-weight-semibold);
+ color:var(--be-list-color);
+ flex-direction:column;
+ display:flex
+}
+.list.has-hidden-images .list-item-image{
+ display:none
+}
+.list.has-hoverable-list-items .list-item:hover{
+ background-color:var(--be-list-item-hover-color)
+}
+.list.has-overflow-ellipsis .list-item-content{
+ min-inline-size:0;
+ max-inline-size:calc(var(--length)*1ch)
+}
+.list.has-overflow-ellipsis .list-item-content>*{
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ overflow:hidden
+}
+@media (hover:hover){
+ .list:not(.has-visible-pointer-controls) .list-item-controls{
+ opacity:0;
+ visibility:hidden
+ }
+}
+.list .list-item{
+ align-items:center;
+ transition:background-color .125s ease-out;
+ display:flex;
+ position:relative;
+ /* TP: update + align top */
+ align-items: flex-start;
+}
+@media (hover:hover){
+ .list .list-item:hover .list-item-controls,.list .list-item:focus-within .list-item-controls{
+ opacity:initial;
+ visibility:initial
+ }
+}
+.list .list-item:not(.box){
+ padding-block:var(--be-list-item-padding);
+ padding-inline:var(--be-list-item-padding)
+}
+.list .list-item:not(:last-child):not(.box){
+ border-block-end:1px solid var(--be-list-item-divider-color)
+}
+@media screen and (width<=768px){
+ .list:not(.has-overflow-ellipsis) .list .list-item{
+ flex-wrap:wrap
+ }
+}
+.list .list-item-image{
+ flex-shrink:0;
+ margin-inline-end:var(--be-list-item-image-margin);
+ /* TP: update + add margin-top */
+ margin-top: 0.5rem;
+}
+@media screen and (width<=768px){
+ .list .list-item-image{
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+.list .list-item-content{
+ flex-direction:column;
+ flex-grow:1;
+ display:flex
+}
+@media screen and (width<=768px){
+ .list .list-item-content{
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+.list .list-item-title{
+ color:var(--be-list-item-title-color);
+ font-weight:var(--be-list-item-title-weight);
+ margin-bottom: .25rem;
+}
+.list .list-item-description{
+ color:var(--be-list-item-description-color)
+}
+.list .list-item-controls{
+ flex-shrink:0;
+ transition:opacity .125s ease-out
+}
+@media screen and (width<=768px){
+ .list .list-item-controls{
+ flex-wrap:wrap;
+ padding-block:.5rem;
+ padding-inline:0
+ }
+}
+@media screen and (width>=769px),print{
+ .list .list-item-controls{
+ padding-inline-start:var(--be-list-item-padding)
+ }
+ .list:not(.has-visible-pointer-controls) .list .list-item-controls{
+ block-size:100%;
+ align-items:center;
+ padding-block-end:var(--be-list-item-padding);
+ display:flex;
+ position:absolute;
+ inset-inline-end:0
+ }
+}
+--- End File: public/style.css ---
+
+
+--- File: public/test.md.php ---
+
+
+
+
+
+
+
+
+
+
+
+
+ MD Testing
+
+1. MD CONTENT
+2. list item two
+
+and something else
+
+- and then
+- and then
+- and then
+
+
+--- End File: public/test.md.php ---
+
+
+--- File: public/js/kb_edit.js ---
+
+
+// switch to target tab pane
+function switchTab(targetId){
+ var panes = document.querySelectorAll('.tab-content .tab-pane');
+ for (var i=0; i< panes.length; i++){
+ panes[i].style.display = 'none';
+ }
+ var targetPane = document.getElementById(targetId);
+ if(targetPane){
+ targetPane.style.display = 'block';
+ }
+}
+
+// send ajax post request with content to specified url
+function ajaxPost(content, url, callback){
+ var xhr = new XMLHttpRequest();
+ xhr.open('POST', url, true);
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ xhr.onreadystatechange = function(){
+ if(xhr.readyState === XMLHttpRequest.DONE){
+ if(xhr.status === 200){
+ callback(xhr.responseText);
+ } else {
+ console.error("AJAX error: " + xhr.status);
+ }
+ }
+ };
+ var params = 'content=' + encodeURIComponent(content);
+ xhr.send(params);
+}
+
+// load preview via ajax into preview element
+function loadPreview(previewElement){
+ var sourceId = previewElement.getAttribute('data-source');
+ var handlerUrl = previewElement.getAttribute('data-handler');
+ var method = previewElement.getAttribute('data-method');
+ var sourceElement = document.getElementById(sourceId);
+ if(sourceElement){
+ var content = sourceElement.value;
+ if(method && method.toLowerCase() == 'post'){
+ ajaxPost(content, handlerUrl, function (response){
+ previewElement.innerHTML = response;
+ });
+ }
+ }
+}
+
+// initialise tab links to handle tab switching
+function initTabs(){
+ var tabLinks = document.querySelectorAll('.tabs a[data-target]');
+ for(var i=0; i {
+ link.addEventListener('click', (e) => this.handleTabClick(e, link));
+ });
+ }
+
+ async handleTabClick(e, link) {
+ e.preventDefault();
+ const selectedTab = link.getAttribute('data-tab');
+
+ // Update active tab
+ this.tabParent.querySelectorAll('li').forEach(li => li.classList.remove('is-active'));
+ link.parentElement.classList.add('is-active');
+
+ // Show active content
+ document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
+ const activeContent = document.getElementById(`${this.contentPrefix}-${selectedTab}`);
+ if (activeContent) activeContent.style.display = '';
+
+ if (selectedTab === 'preview') {
+ await this.loadPreview();
+ }
+ }
+
+ async loadPreview() {
+ const previewTarget = document.getElementById('preview-output');
+ if (!previewTarget) return;
+
+ previewTarget.innerHTML = `
+
+ `;
+
+ await new Promise(resolve => setTimeout(resolve, 500));
+
+ const textarea = document.querySelector(this.textareaSelector);
+ const markdown = textarea ? textarea.value : '';
+
+ const res = await fetch(this.previewUrl, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: `content=${encodeURIComponent(markdown)}`
+ });
+
+ const html = await res.text();
+ previewTarget.innerHTML = html;
+ }
+ }
+
+ // Usage
+ document.addEventListener('DOMContentLoaded', () => {
+ new TabSwitcherController({
+ tabSelector: '.tabs',
+ contentPrefix: 'tab',
+ textareaSelector: '#description',
+ previewUrl: '/parsedown/preview'
+ });
+ });
+
+--- End File: public/js/markdown_preview.js ---
+
+
+--- File: public/js/ticket_view.js ---
+document.addEventListener('DOMContentLoaded', function(){
+ const ticket_id = window.location.pathname.split('/')[2];
+ const comments_url = `/ticket/${ticket_id}/comments`;
+ const attachments_url = `/ticket/${ticket_id}/attachments`;
+
+ function ajax(url, containerID){
+ fetch(url)
+ .then(response => {
+ if(!response.ok){
+ throw new Error('Network response was not ok.');
+ }
+ return response.text();
+ })
+ .then(html => {
+ const container_el = document.getElementById(containerID);
+ if(container_el){
+ container_el.innerHTML += html;
+ } else {
+ throw new Error('Coments container does not exist');
+ }
+ })
+ .catch(error => {
+ console.log('Error fetching comments', error);
+ });
+ }
+
+ ajax(attachments_url, 'attachments')
+ ajax(comments_url, 'comments')
+});
+
+
+--- End File: public/js/ticket_view.js ---
+
+
+--- File: public/js/tp_md_editor.js ---
+/**
+ * tp_md_editor.js
+ * Self-contained Markdown Editor with Toolbar Buttons
+ * Usage: tp_md_editor.init(config)
+ */
+
+class TPMarkdownEditor {
+ static init(config = {}) {
+ document.querySelectorAll('tp-md-editor').forEach(editor => {
+ new TPMarkdownEditor(editor, config);
+ });
+ }
+
+ constructor(wrapper, config) {
+ this.wrapper = wrapper;
+ this.name = wrapper.getAttribute('name');
+ this.config = config;
+ this.textarea = document.createElement('textarea');
+ this.textarea.name = this.name;
+ this.textarea.rows = 25;
+ this.toolbar = document.createElement('tp-md-toolbar');
+
+ this.undoStack = []
+ this.redoStack = []
+ this.localStorageKey = this.getStorageKey();
+ this.unsaved = false;
+ this.autosaveInterval = null;
+
+ // this.loadInitialContent();
+ this.captureInitialContent();
+ this.createUnsavedBanner();
+ this.loadFromLocalStorage();
+
+ this.wrapper.appendChild(this.unsavedBanner);
+ this.wrapper.appendChild(this.toolbar);
+ this.wrapper.appendChild(this.textarea);
+
+ this.buttonClasses = TPMarkdownEditor.defaultButtons();
+ this.buildToolbar();
+ this.setupAutoList();
+ this.setupUndoRedo();
+ this.setupPersistence();
+ this.setupAutoSave();
+ }
+
+ getStorageKey(){
+ const path = window.location.pathname;
+ return `tp_md_editor:${path}:${this.name}`;
+ }
+
+ createUnsavedBanner(){
+ const container = document.createElement('div');
+ container.style.cssText = 'background: #fff3cd; color: #856404; padding: 5px 10px; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; display: none;';
+
+ const text = document.createElement('span');
+ text.textContent = 'You have unsaved changes.';
+
+ const discardBtn = document.createElement('button');
+ discardBtn.textContent = 'Discard';
+ discardBtn.style.cssText = 'margin-left: auto; background: none; border: none; color: #856404; text-decoration: underline; cursor: pointer;';
+ discardBtn.addEventListener('click', () => {
+ localStorage.removeItem(this.localStorageKey);
+ const hidden = this.wrapper.querySelector('.tp-md-initial');
+ if(hidden){
+ this.textarea.value = hidden.textContent;
+ }
+ this.clearUnsaved();
+ });
+
+ container.appendChild(text);
+ container.appendChild(discardBtn);
+ this.unsavedBanner = container
+ }
+
+ markUnsaved(){
+ this.unsaved = true;
+ this.unsavedBanner.style.display = 'block';
+ }
+
+ clearUnsaved(){
+ this.unsaved = false;
+ this.unsavedBanner.style.display = 'none';
+ }
+
+ setupPersistence(){
+ window.addEventListener('beforeunload', (e) => {
+ if(this.unsaved){
+ localStorage.setItem(this.localStorageKey, this.textarea.value);
+ }
+ });
+ }
+
+ setupAutoSave(){
+ this.autosaveInterval = setInterval(() => {
+ if(this.unsaved){
+ localStorage.setItem(this.localStorageKey, this.textarea.value);
+ }
+ }, 5000); // save every 5 sec
+ }
+
+ loadFromLocalStorage(){
+ const saved = localStorage.getItem(this.localStorageKey);
+ if(saved){
+ this.textarea.value = saved;
+ this.markUnsaved();
+ }
+ }
+
+ buildToolbar() {
+ const groups = this.config.groups || [Object.keys(this.buttonClasses)];
+ groups.forEach(group => {
+ const groupEl = document.createElement('tp-md-toolbar-group');
+ group.forEach(btnType => {
+ const BtnClass = this.buttonClasses[btnType];
+ if (BtnClass) {
+ const btn = new BtnClass(this.textarea);
+ groupEl.appendChild(btn.element);
+ }
+ });
+ this.toolbar.appendChild(groupEl);
+ });
+ }
+
+ setupUndoRedo(){
+ this.textarea.addEventListener('input', ()=>{
+ this.undoStack.push(this.textarea.value);
+ if(this.undoStack > 100) this.undoStack.shift();
+ this.redoStack = [];
+ this.markUnsaved();
+ });
+
+ this.textarea.addEventListener('keydown', (e) => {
+ if(e.ctrlKey && e.key === 'z'){
+ e.preventDefault();
+ if(this.undoStack.length > 0 ){
+ this.redoStack.push(this.textarea.value);
+ this.textarea.value = this.undoStack.pop();
+ this.markUnsaved();
+ }
+ } else if (e.ctrlKey && (e.key === 'y')) { // || e.shiftkey && e.key === 'z'
+ e.preventDefault();
+ if(this.redoStack.length > 0){
+ this.undoStack.push(this.textarea.value);
+ this.textarea.value = this.redoStack.pop();
+ this.markUnsaved();
+ }
+ }
+ });
+ }
+
+ setupAutoList() {
+ this.textarea.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ const pos = this.textarea.selectionStart;
+ const before = this.textarea.value.slice(0, pos);
+ const after = this.textarea.value.slice(pos);
+ const lines = before.split('\n');
+ const lastLine = lines[lines.length - 1];
+
+ // need order of task > ul
+ let match;
+ if ((match = lastLine.match(/^(\s*)- \[( |x)\] /))) {
+ // task
+ e.preventDefault();
+ if (lastLine.trim() === '- [ ]' || lastLine.trim() === '- [x]') {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const insert = '\n' + match[1] + '- [ ] ';
+ this.insertAtCursor(insert);
+ }
+ } else if ((match = lastLine.match(/^(\s*)([-*+] )/))) {
+ // ul
+ e.preventDefault();
+ if (lastLine.trim() === match[2].trim()) {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const insert = '\n' + match[1] + match[2];
+ this.insertAtCursor(insert);
+ }
+ } else if ((match = lastLine.match(/^(\s*)(\d+)\. /))) {
+ // ol
+ e.preventDefault();
+ if (lastLine.trim() === `${match[2]}.`) {
+ this.removeLastLine(pos, lastLine.length);
+ } else {
+ const nextNum = parseInt(match[2]) + 1;
+ const insert = `\n${match[1]}${nextNum}. `;
+ this.insertAtCursor(insert);
+ }
+ }
+ }
+ });
+ }
+
+ removeLastLine(cursorPos, lengthToRemove) {
+ const start = cursorPos - lengthToRemove;
+ this.textarea.setRangeText('', start, cursorPos, 'start');
+ this.textarea.setSelectionRange(start, start);
+ }
+
+ insertAtCursor(text) {
+ const start = this.textarea.selectionStart;
+ const end = this.textarea.selectionEnd;
+ this.textarea.setRangeText(text, start, end, 'end');
+ const newPos = start + text.length;
+ this.textarea.setSelectionRange(newPos, newPos)
+ this.markUnsaved();
+ }
+
+ captureInitialContent() {
+ const hidden = document.createElement('script');
+ hidden.type = 'text/plain';
+ // hidden.style.display = 'none';
+ hidden.classList.add('tp-md-initial');
+ hidden.textContent = this.wrapper.textContent.trim();
+ // clear inner content so it's not visible twice
+ this.wrapper.textContent = '';
+
+ this.wrapper.appendChild(hidden);
+ this.textarea.value = hidden.textContent;
+ }
+
+ static defaultButtons() {
+ return {
+ h1: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '# ', 'H1', 'fas fa-heading', '', 'fas fa-1'); }
+ },
+ h2: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '## ', 'H2', 'fas fa-heading', '', 'fas fa-2'); }
+ },
+ h3: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '### ', 'H3', 'fas fa-heading', '', 'fas fa-3'); }
+ },
+ bold: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '**', 'Bold', 'fas fa-bold', '**'); }
+ },
+ italic: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '_', 'Italic', 'fas fa-italic', '_'); }
+ },
+ quote: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '> ', 'Quote', 'fas fa-quote-right'); }
+ },
+ code: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '`', 'Code', 'fas fa-code', '`'); }
+ formatSelection(sel) {
+ if (!sel || !sel.includes('\n')) {
+ return '`' + (sel || 'code') + '`';
+ }
+ return '```\n' + sel + '\n```';
+ }
+ },
+ link: class extends TPMarkdownButton {
+ constructor(textarea) {
+ super(textarea, '[', 'Link', 'fas fa-link', '](url)');
+ }
+ formatSelection(sel) {
+ return `[${sel || 'text'}](url)`;
+ }
+ },
+ bullet: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '- ', 'Bullet', 'fas fa-list-ul'); }
+ formatSelection(sel){
+ return sel.split('\n').map(line => '- ' + line).join('\n');
+ }
+ },
+ number: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '1. ', 'Numbered', 'fas fa-list-ol'); }
+ formatSelection(sel){
+ return sel.split('\n').map((line, i) => `${i+1}. ${line}`).join('\n');
+ }
+ },
+ task: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '- [ ] ', 'Task', 'fas fa-tasks'); }
+ formatSelection(sel){
+ return sel.split('\n').map(line => ' - [ ]' + line).join('\n')
+ }
+ },
+ hr: class extends TPMarkdownButton {
+ constructor(textarea) { super(textarea, '---\n', 'HR', 'fas fa-minus'); }
+ },
+ table: class extends TPMarkdownButton {
+ constructor(textarea) {
+ super(textarea, '', 'Table', 'fas fa-table');
+ }
+ formatSelection(_) {
+ return '| Col1 | Col2 |\n|------|------|\n| Val1 | Val2 |';
+ }
+ },
+ };
+ }
+}
+
+class TPMarkdownButton {
+ constructor(textarea, prefix = '', title = '', icon = '', suffix = '', icon_offset = '') {
+ this.textarea = textarea;
+ this.prefix = prefix;
+ this.suffix = suffix;
+ this.element = document.createElement('tp-md-toolbar-button');
+ this.element.title = title;
+ if (icon_offset == '') {
+ this.element.innerHTML = ``;
+ } else {
+ this.element.innerHTML = ``;
+ }
+ this.element.addEventListener('click', () => this.apply());
+ }
+
+ formatSelection(sel) {
+ return this.prefix + (sel || 'text') + this.suffix;
+ }
+
+ apply() {
+ const textarea = this.textarea;
+ const start = textarea.selectionStart;
+ const end = textarea.selectionEnd;
+ const text = textarea.value;
+ this.previousValue = textarea.value;
+ const selected = text.substring(start, end);
+ const formatted = this.formatSelection(selected);
+ textarea.setRangeText(formatted, start, end, 'end');
+
+ if(this.previousValue !== textarea.value){
+ if(!textarea.undoStack) textarea.undoStack = [];
+ textarea.undoStack.push(this.previousValue);
+ }
+
+ textarea.focus();
+ }
+}
+
+// Export as global
+window.tp_md_editor = TPMarkdownEditor;
+--- End File: public/js/tp_md_editor.js ---
+
+
+--- File: scss/main.scss ---
+// import bulma
+@use "vendor/bulma";
+
+// import custom components
+@use "components/ticket-item";
+--- End File: scss/main.scss ---
+
+
+--- File: scss/components/_ticket-item.scss ---
+@use "../vendor/bulma";
+
+.ticket-item {
+ @extend .is-flex;
+ @extend .mb-1;
+ @extend .pt-1;
+ @extend .pb-2;
+ @extend .is-align-items-flex-start;
+ border-bottom: 1px solid var(--bulma-text-90);
+
+ .ticket-icon {
+ @extend .mr-2;
+ display: flex;
+ align-items: baseline;
+
+ .checkbox {
+ margin-right: 0.5rem;
+ }
+ }
+
+ .ticket-content {
+ @extend .is-flex;
+ @extend .is-flex-direction-column;
+ @extend .is-flex-grow-1;
+ align-self: baseline;
+
+ .ticket-header {
+ @extend .is-flex;
+ @extend .is-justify-content-flex-start;
+ @extend .is-flex-wrap-wrap;
+ @extend .mb-1;
+ align-items: center;
+
+ .ticket-title {
+ @extend .title;
+ @extend .mb-0;
+ @extend .is-5;
+ font-weight: normal;
+ }
+
+ .tags {
+ @extend .ml-2;
+ }
+ }
+
+ .ticket-meta {
+ @extend .is-flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+
+ p {
+ @extend .subtitle;
+ @extend .is-6;
+ font-weight: 300;
+ margin: 0;
+ }
+ }
+ }
+}
+--- End File: scss/components/_ticket-item.scss ---
+
+
+--- File: scss/vendor/_bulma-tools.scss ---
+@use "../../node_modules/bulma/sass/utilities/" as bulma-utils;
+@use "../../node_modules/bulma/sass/helpers/" as bulma-helpers;
+@use "../../node_modules/bulma/sass/elements/" as bulma-elements;
+--- End File: scss/vendor/_bulma-tools.scss ---
+
+
+--- File: scss/vendor/_bulma.scss ---
+@forward "../../node_modules/bulma/bulma";
+--- End File: scss/vendor/_bulma.scss ---
+
+
+--- File: ui/partials/ticket_item.html ---
+
+
+
+
+
+
+
{{@ticket.status_name}}
+
+
+
+
+
+
+ Paste or drag an image here
+
+
![image preview]()
+
+
+
+
+ {{ @SESSION.error }}
+
+
+--- End File: ui/session/error.html ---
+
+
+--- File: ui/templates/layout.html ---
+
+
+
+
+
+
+ TP ServiceDesk
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--- End File: ui/templates/layout.html ---
+
+
+--- File: ui/views/dashboard.html ---
+Dashboard
+--- End File: ui/views/dashboard.html ---
+
+
+--- File: ui/views/home.html ---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ticketing System
+
+ - Create & Track tickets
+ - Assign priorities & statuses
+ - Link child/parent tickets
+
+
+
+
+
+
+
+
+
+
Knowledge Base
+
+ - Markdown-powered articles
+ - Tagging and filtering
+ - Fast searching
+
+
+
+
+
+
+
+
+
+
Projects
+
+ - Track ongoing projects
+ - Integreate tasks and tickets
+ - Monitor progress
+
+
+
+
+
+
+
+
+
+
Collaboration
+
+ - Comment threads
+ - File attachments
+ - Role-based user access
+
+
+
+
+
+
+
+
+
+
Custom fields
+
+ - Define ticket meta data
+ - Configure and store extra info
+ - Easily editable in forms
+
+
+
+
+
+
+
+
+
+
Administration
+
+ - Manage user roles
+ - Create new account
+ - Edit existing users
+
+
+
+
+
+
+
+
+
Please Log In
+
+
+
+
+
+
+--- End File: ui/views/login.html ---
+
+
+--- File: ui/views/admin/index.html ---
+Admin
+
+
+
+--- End File: ui/views/admin/index.html ---
+
+
+--- File: ui/views/admin/priorities/create.html ---
+Create Ticket Priority
+TODO:
+--- End File: ui/views/admin/priorities/create.html ---
+
+
+--- File: ui/views/admin/priorities/index.html ---
+Admin: Ticket Priorities
+create priority
+
+
+
+
+
+ | id |
+ name |
+ sort_order |
+ |
+
+
+
+
+
+
+ | {{@priority.id}} |
+ {{@priority.name}} |
+ {{@priority.sort_order}} |
+
+
+
+
+
+ |
+
+
+
+
+--- End File: ui/views/admin/priorities/index.html ---
+
+
+--- File: ui/views/attachment/index.html ---
+
+
+
Attachments
+
+
+
+
+
+
+ |
+ File Name |
+ Uploaded By |
+ Created At |
+ Version |
+
+
+
+
+
+ |
+
+ |
+ {{ @attach.file_name }} |
+ {{ @attach.username }} |
+ {{ @attach.created_at }} |
+ {{ @attach.version_number }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--- End File: ui/views/comments/view.html ---
+
+
+--- File: ui/views/kb/create.html ---
+Create Knowledge Base Article
+
+
+
+--- End File: ui/views/kb/create.html ---
+
+
+--- File: ui/views/kb/edit.html ---
+Edit Knowledge Base Article
+
+
+
+--- End File: ui/views/kb/edit.html ---
+
+
+--- File: ui/views/kb/index.html ---
+Knowledge Base
+create kb article
+
+
+
+
+
+
+
+
+ | id | title | created_at |
+ |
+
+
+
+
+
+
+ | {{@article.id}} |
+ {{@article.title}} |
+ {{@article.created_at}} |
+
+
+ |
+
+
+
+
+
+
+
+
+
+--- End File: ui/views/kb/index.html ---
+
+
+--- File: ui/views/kb/view.html ---
+{{@article.title}}
+edit article
+
+
+
+
{{ @article.content | raw }}
+
+
+
+ | Property | Value |
|---|
+
+
+
+ | {{@key}} | {{@value}} |
+
+
+
+
+ TODO: create form.
+
+--- End File: ui/views/project/create.html ---
+
+
+--- File: ui/views/project/edit.html ---
+
+ TODO: edit form
+
+--- End File: ui/views/project/edit.html ---
+
+
+--- File: ui/views/project/index.html ---
+Projects
+create project
+
+
+
+
+
+ | ID |
+ Title |
+ Requester |
+ Created By |
+ Created At |
+ Start Date |
+ End Date |
+
+
+
+
+
+ | {{ @p.id }} |
+ {{ @p.title }} |
+ {{ @p.requester }} |
+ {{ @p.created_by }} |
+ {{ @p.created_at }} |
+ {{ @p.start_date }} |
+ {{ @p.end_date }} |
+
+
+
+
+
+--- End File: ui/views/project/index.html ---
+
+
+--- File: ui/views/project/view.html ---
+{{ @project.title }}
+edit project
+
+
+
+
Overview
+
+
{{ @project.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+---
+## View project
+
+A central place to see everything for this project:
+
+- Overview: (title, description, links, start/end dates).
+- related tickets (with status and priorities)
+- events
+- tasks
+- timeline combining events, tickets, milestone dates
+
+## Example Workflow
+
+- create a project - `team manager overview`
+-- attach relevant links
+- add tickets - each new request or issue can be a ticket referencing this project
+- add events - quick notes about management meetings, or verbal discussions that don't need ticket overhead
+-- meeting on 01 jan to discuss layout
+-- teams message on 28 jan clarifying data requirements
+- project tasks - for smaller to do items that don't warrant a full ticket
+-- identify location of required data, create initial pq connections, build a mockup layout
+
+## Reporting Timelines
+- timeline view - merge ticket data with project_events sorted by date - chronological Overview
+- status summaries - how many tickets open, on hold, completed
+- progress tracking - sumarries or gantt style charts
+
+--- End File: ui/views/project/view.html ---
+
+
+--- File: ui/views/tag/create.html ---
+Create Tag
+
+
+--- End File: ui/views/tag/create.html ---
+
+
+--- File: ui/views/tag/index.html ---
+Tags
+create tag
+
+
+
+
+
+
+
+
+ No tags found
+
+
+
+
+
+
+
+
Color Examples
+
The following color names can be used for tags
+
+
+ Black
+ Dark
+ Light
+ White
+ Primary
+ Link
+ Info
+ Success
+ Warning
+ Danger
+
+
Create Ticket Form
+
+
+--- End File: ui/views/ticket/create.html ---
+
+
+--- File: ui/views/ticket/edit.html ---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--- End File: ui/views/ticket/edit.html ---
+
+
+--- File: ui/views/ticket/edit.html.v1 ---
+Edit Ticket Form
+
+
+--- End File: ui/views/ticket/edit.html.v1 ---
+
+
+--- File: ui/views/ticket/index.html ---
+Tickets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+*/
+?>
+--- End File: ui/views/ticket/index.html ---
+
+
+--- File: ui/views/ticket/index_row.html ---
+
+
+
+ {{@ticket.status_name}}
+
+
+
+
+
#{{@ticket.id}} opened 2025-03-25 by {{@ticket.display_name}}
+
+
+
+
{{ @ticket.title }}
+
+
+
+
+
+
+
+
+
{{ @ticket.created_at }}
+
+
{{ @ticket.description | raw }}
+
+
+
+
+
+
+
+
+
+ {{@tag.name}}
+
+
+
+
+ | Property | Value |
|---|
+
+
+
+
+ | {{@key}} | {{@value}} |
+
+
+
+
+
+
+
+
Linked Tickets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
All Users
+
+
+
+ | ID | Username | Role | Actions |
+
+
+
+
+ | {{ @u.id }} |
+ {{ @u.username }} |
+ {{ @u.role_name }} ( {{ @u.role }} ) |
+
+
+
+
+