6d5f44110e
* Add search and filter functionality to conversations page - Add Search Conversations and Clear Filters buttons with icons - Implement text search support for conversation messages - Add event handlers for search button with loading feedback - Add clear filters functionality to reset all filter inputs - Support Enter key to trigger search from text input * Remove unnecessary submit button --------- Co-authored-by: Matthew Holt <mholt@users.noreply.github.com>
110 lines
No EOL
3.4 KiB
HTML
110 lines
No EOL
3.4 KiB
HTML
<title>Conversations</title>
|
|
<link rel="stylesheet" href="/resources/css/conversations.css">
|
|
|
|
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row g-4">
|
|
<div class="col-3 filter-column">
|
|
<form class="filter">
|
|
<div class="page-pretitle">
|
|
Explore
|
|
</div>
|
|
<h2 class="page-title">
|
|
<a id="conversations-reset">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-messages">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10" />
|
|
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
|
|
</svg>
|
|
Conversations
|
|
</a>
|
|
</h2>
|
|
<div id="showing-info" class="text-secondary mt-1 mb-4">Showing <span id="convos-count"></span> most
|
|
recent (<span id="convos-duration"></span>)</div>
|
|
|
|
|
|
<label class="form-label">People involved</label>
|
|
<div class="mb-4">
|
|
<select class="entity-input form-select" placeholder="Name or contact info">
|
|
</select>
|
|
<label class="form-check mt-2">
|
|
<input type="checkbox" class="form-check-input" id="selected-entities-only" value="1"
|
|
disabled>
|
|
<span class="form-check-label">Only these people</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="tl-date-picker">
|
|
|
|
</div>
|
|
|
|
<label class="form-label">Text search</label>
|
|
<div class="mb-4">
|
|
<input type="text" class="form-control" placeholder="Key word or phrase" id="message-substring">
|
|
</div>
|
|
|
|
|
|
<select multiple class="tl-data-source form-select mb-3" placeholder="Data sources"
|
|
autocomplete="off">
|
|
|
|
</select>
|
|
|
|
<div class="mb-4 tl-item-class-dropdown">
|
|
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 mb-4">
|
|
<button type="button" class="btn btn-outline-secondary" id="clear-filter">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
Clear Filters
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-9 content-column">
|
|
<div id="convos-container" class="filter-results row row-cards d-none">
|
|
|
|
</div>
|
|
<div id="convo-container" class="filter-results card d-none">
|
|
<div class="chat card-body">
|
|
<div class="chat-bubbles">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<template id="tpl-convo">
|
|
<div class="convo-card col-sm-6 col-lg-4 mb-4">
|
|
<a class="card card-link card-stacked">
|
|
<div class="card-body">
|
|
<h3 class="card-title"></h3>
|
|
<p class="convo-preview text-secondary"></p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row align-items-center justify-content-between">
|
|
<div class="col">
|
|
<div class="convo-datetime text-secondary"></div>
|
|
</div>
|
|
<div class="col-auto d-flex justify-content-center">
|
|
<div class="avatar-list avatar-list-stacked"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</template> |