toodles-1.2.1: web/html/index.html
<head>
<title>Toodles</title>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/app.js"></script>
<link rel="stylesheet" href="/static/css/bulma.min.css">
<link rel="stylesheet" href="/static/css/toodles.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="/static/img/favicon.png"/>
</head>
<body>
<div id="top-div">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<div class="navbar-item" href="#">
<span><img src="/static/img/favicon.png" alt="favicon" height="25" width="25"></span>
<span class="toodles-nav-title-text">Toodles</span>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" v-on:click="toggleMenuBurger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item edit-todos" v-on:click="editSeletedTodos" v-show="todos.filter(t => t.selected).some(t => !!t)">
<span class="icon">
<i class="fa fa-edit"></i>
</span>
<span>Edit</span>
</div>
<div class="navbar-item delete-todo" v-on:click="deleteSeletedTodos" v-show="todos.filter(t => t.selected).some(t => !!t)">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
<span>Delete</span>
</div>
<div class="navbar-item deselect-all" v-on:click="deselectAll" v-show="todos.length && todos.every(t => t.selected)">
<span class="icon">
<i class="fa fa-square"></i>
</span>
<span>Deselect All</span>
</div>
<div class="select-all navbar-item" v-on:click="selectAll" v-show="todos.some(t => !t.selected)">
<span class="icon">
<i class="fa fa-check-square"></i>
</span>
<span>Select All</span>
</div>
<div class="refresh navbar-item" v-on:click="refresh(true)()">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>Refresh</span>
</div>
</div>
</div>
</nav>
<div class="modal">
<div class="modal-background" @click="closeModal"></div>
<div class="modal-content">
<div class="edit-todo-form container">
<div class="field edit-todo-field-input">
<label class="label">Set Assignee</label>
<div class="control">
<input class="input" type="text" placeholder="Assignee" v-model="setAssignee" @keyup.enter="submitTodoEdits">
</div>
</div>
<div class="field edit-todo-field-input">
<label class="label">Add Tag (comma separated)</label>
<div class="control">
<input class="input" type="text" placeholder="#bug,#techdebt,..." v-model="addTags" @keyup.enter="submitTodoEdits">
</div>
</div>
<div class="field edit-todo-field-input">
<label class="label">Add Custom Attributes (comma separated)</label>
<div class="input-error key-val-parse-error" v-show="addKeyValParseError">Parse error, check your formatting and try again</div>
<div class="control">
<input class="input" type="text" placeholder="key1=val1,key2=val2,..." v-model="addKeyVals" @keyup.enter="submitTodoEdits">
</div>
</div>
<div class="field edit-todo-field-input">
<label class="label">Set Priority</label>
<div class="control">
<input class="input" type="number" placeholder="Number" v-model="setPriority" @keyup.enter="submitTodoEdits">
</div>
</div>
<div class="input-error nothing-filled-error" v-show="nothingFilledError">Add some changes before submitting</div>
<button class="button is-primary submit-todo-edits" v-on:click="submitTodoEdits">Submit</button>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="closeModal"></button>
</div>
<div class="columns content-container">
<div class="side-bar column is-one-quarter">
<label for="todo-search">Filter</label>
<input placeholder="Search text, assignee, tags" class="input filter-todos" name="todo-search" type="text" v-model="todoSearch">
<br><br>
<span>
<div class="select">
<select v-model="customSortSelected" @change="sortTodos">
<option value="">Custom Attribute Sort</option>
<option v-for="attrKey in customAttributeKeys">{{ attrKey }}</option>
</select>
</div>
<button class="button" v-show="customSortSelected" v-on:click="sortTodos">
<span class="icon">
<i class="fa fa-sort"></i>
</span>
</button>
</span>
</div>
<div class="main-container container content column is-three-quarters">
<div class="loading-spinner" v-show="loading"><a class="button is-loading">Loading</a> Loading
TODO's. If your project is large, this can take a few moments.
Try configuring toodles to ignore large, autogenerated, or
third-party files.
<a target="_blank" href="https://github.com/aviaviavi/toodles/blob/master/.toodles.yaml">More info on configuring toodles</a>
</div>
<div class="box">
<div class="table-container">
<table class="table is-striped is-narrow is-hoverable is-fullwidth table-container todo-list">
<thead>
<tr>
<td></td>
<th v-on:click="sortTodos('priority')" class="sortable priority-column">
Priority
<span class="icon">
<i class="fa fa-sort"></i>
</span>
</th>
<th>Flag</th>
<th class="todo-item-body">Body</th>
<th>Assignee</th>
<th class="todo-item-tags">Tags</th>
</tr>
</thead>
<tr class="todo-item" v-for="todo in todos" v-if="todo.body.indexOf(todoSearch) !== -1 || (todo.assignee || '').indexOf(todoSearch) !== -1 || (todo.tags || []).toString().indexOf(todoSearch) !== -1 || (todo.flag || '').indexOf(todoSearch) !== -1" @change="updateTodo('top level')" @click="toggleTodo(todo)">
<td><input type="checkbox" v-model="todo.selected"></td>
<td class="todo-item-priority" >
<div v-show="todo.priority !== undefined">{{ todo.priority }}</div>
</td>
<td class="todo-item-flag" >{{ todo.flag }}</td>
<td class='todo-item-body'>
<div class="todo-source-link" @click="stopPropagation"><a :href="'/source_file/' + todo.id + '#line-' + todo.lineNumber" target="_blank">{{ todo.sourceFile }}:{{ todo.lineNumber}}</a></div>
<div>{{ todo.body }}</div>
</td>
<td class="todo-item-assignee" >{{ todo.assignee }}</td>
<td class="todo-item-customAttributes">
<div v-show="Object.keys(todo.customAttributes).length" class="attribute-block">
<span v-for="entry in Object.entries(todo.customAttributes)" class="attribute-item" @change="updateTodo('here')">
<span >{{entry[0]}}</span>=<span >{{entry[1]}}</span>
</span>
</div>
<div class="tag-block" v-show="Object.keys(todo.tags).length">
<span v-for="tag in todo.tags" class="tag-item">
<span >{{tag}}</span>
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>