ExportView.svelte raw

   1  <script>
   2      export let isLoggedIn = false;
   3      export let currentEffectiveRole = "";
   4      export let aclMode = "";
   5      export let isExporting = false;
   6  
   7      import { createEventDispatcher } from "svelte";
   8      const dispatch = createEventDispatcher();
   9  
  10      // When ACL is "none", allow access without login
  11      $: canAccess = aclMode === "none" || isLoggedIn;
  12      $: canExportAll = aclMode === "none" || currentEffectiveRole === "admin" || currentEffectiveRole === "owner";
  13  
  14      function exportMyEvents() {
  15          dispatch("exportMyEvents");
  16      }
  17  
  18      function exportAllEvents() {
  19          dispatch("exportAllEvents");
  20      }
  21  
  22      function openLoginModal() {
  23          dispatch("openLoginModal");
  24      }
  25  </script>
  26  
  27  {#if canAccess}
  28      {#if isLoggedIn}
  29          <div class="export-section">
  30              <h3>Export My Events</h3>
  31              <p>Download your personal events as a JSONL file.</p>
  32              <button class="export-btn" on:click={exportMyEvents} disabled={isExporting}>
  33                  {#if isExporting}
  34                      Exporting...
  35                  {:else}
  36                      Export My Events
  37                  {/if}
  38              </button>
  39          </div>
  40      {/if}
  41      {#if canExportAll}
  42          <div class="export-section">
  43              <h3>Export All Events</h3>
  44              <p>
  45                  Download the complete database as a JSONL file. This includes
  46                  all events from all users.
  47              </p>
  48              <button class="export-btn" on:click={exportAllEvents} disabled={isExporting}>
  49                  {#if isExporting}
  50                      Exporting...
  51                  {:else}
  52                      Export All Events
  53                  {/if}
  54              </button>
  55          </div>
  56      {/if}
  57  {:else}
  58      <div class="login-prompt">
  59          <p>Please log in to access export functionality.</p>
  60          <button class="login-btn" on:click={openLoginModal}>Log In</button>
  61      </div>
  62  {/if}
  63  
  64  <style>
  65      .export-section {
  66          border-radius: 8px;
  67          padding: 1em;
  68          margin: 1em;
  69          width: 100%;
  70          max-width: 32em;
  71          box-sizing: border-box;
  72          background-color: var(--card-bg);
  73      }
  74  
  75      .export-section h3 {
  76          margin: 0 0 1rem 0;
  77          color: var(--text-color);
  78          font-size: 1.2rem;
  79          font-weight: 600;
  80      }
  81  
  82      .export-section p {
  83          margin: 0 0 1.5rem 0;
  84          color: var(--text-color);
  85          opacity: 0.8;
  86          line-height: 1.4;
  87      }
  88  
  89      .export-btn {
  90          background-color: var(--primary);
  91          color: var(--text-color);
  92          border: none;
  93          padding: 0.75em 1.5em;
  94          border-radius: 0.5em;
  95          cursor: pointer;
  96          font-weight: bold;
  97          font-size: 0.9em;
  98          transition: background-color 0.2s;
  99      }
 100  
 101      .export-btn:hover:not(:disabled) {
 102          background-color: var(--accent-hover-color);
 103      }
 104  
 105      .export-btn:disabled {
 106          opacity: 0.6;
 107          cursor: not-allowed;
 108      }
 109  
 110      .login-prompt {
 111          text-align: center;
 112          padding: 2em;
 113          background-color: var(--card-bg);
 114          border-radius: 8px;
 115          border: 1px solid var(--border-color);
 116          width: 100%;
 117          max-width: 32em;
 118          box-sizing: border-box;
 119      }
 120  
 121      .login-prompt p {
 122          margin: 0 0 1.5rem 0;
 123          color: var(--text-color);
 124          font-size: 1.1rem;
 125      }
 126  
 127      .login-btn {
 128          background-color: var(--primary);
 129          color: var(--text-color);
 130          border: none;
 131          padding: 0.75em 1.5em;
 132          border-radius: 4px;
 133          cursor: pointer;
 134          font-weight: bold;
 135          font-size: 0.9em;
 136          transition: background-color 0.2s;
 137      }
 138  
 139      .login-btn:hover {
 140          background-color: var(--accent-hover-color);
 141      }
 142  </style>
 143