Ops-Toolshed-Extension/approvers.html at main · harrydbarnes/Ops-Toolshed-Extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prisma Approver Search</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="approvers.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Prisma Approver Search</h1>
            <p>Find and manage your preferred approvers</p>
        </div>

        <div class="search-container">
            <i class="fas fa-search"></i>
            <input type="text" id="search-input" placeholder="Search by name or email...">
        </div>

        <div class="favorites-container">
            <button id="favorites-only-button" class="filter-button">
                <i class="far fa-star"></i> Favourites Only
            </button>
        </div>

        <div class="filter-section">
            <h3>Business Units</h3>
            <div id="business-units-filters" class="filter-buttons">
                <!-- Business unit buttons will be dynamically inserted here -->
            </div>
        </div>

        <div class="filter-section">
            <h3>Clients</h3>
            <div id="clients-filters" class="filter-buttons">
                <!-- Client buttons will be dynamically inserted here -->
            </div>
        </div>

        <div id="approvers-count"></div>
        <div id="approvers-list" class="approvers-grid">
            <!-- Approver cards will be dynamically inserted here -->
        </div>

        <div id="footer-actions" class="footer-actions hidden">
            <span id="selected-count">0 approvers selected</span>
            <div class="footer-actions-buttons">
                <button id="copy-button" class="button-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
                    <span>Copy Approvers</span>
                </button>
                <button id="copy-save-button" class="button-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
                    <span>Copy and Save as Favourites</span>
                </button>
            </div>
        </div>
        <div class="feedback">
            <a href="https://teams.microsoft.com/l/chat/0/0?users=harry.barnes@essencemediacom.com&topicname=Chat" target="_blank">Submit feedback / compliment the chef here!</a>
        </div>
    </div>
    <script type="module" src="approvers.js"></script>
    <div id="toast-notification" class="toast">
      <div class="toast-message">Approver emails copied to clipboard!</div>
    </div>
</body>
</html>