@local-civics/mgmt-ui 0.1.257 → 0.1.258

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
-import { IconChevronRight, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconMessageCircle, IconClipboardCheck, IconBuilding, IconBooks, IconBackpack, IconSearch, IconArrowLeft, IconClipboardCopy, IconTableExport, IconCaretDown, IconCaretUp, IconChevronDown, IconCheck, IconTrash, IconPlus, IconLink, IconDownload, IconCloudUpload, IconInfoCircle, IconPlaylistAdd, IconPointer, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconChevronLeft, IconRefresh } from '@tabler/icons';
+import { IconChevronRight, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconCategory2, IconRoute, IconAlbum, IconLambda, IconClipboard, IconMessageCircle, IconClipboardCheck, IconBuilding, IconBooks, IconBackpack, IconSearch, IconArrowLeft, IconClipboardCopy, IconTableExport, IconCaretDown, IconCaretUp, IconChevronDown, IconCheck, IconTrash, IconPlus, IconLink, IconDownload, IconCloudUpload, IconInfoCircle, IconPlaylistAdd, IconExternalLink, IconPointer, IconX, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconChevronLeft, IconRefresh } from '@tabler/icons';
 import { Avatar, createStyles, Modal, Center, Loader, Container, Group, Button, Title, Text, Image, Drawer, Divider, TextInput, Tooltip, ActionIcon, SimpleGrid, Badge as Badge$1, Card, UnstyledButton, Overlay, Stack as Stack$5, ThemeIcon, Checkbox, Autocomplete, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import 'external-svg-loader';
@@ -1204,6 +1204,41 @@ function Table$8(props) {
   ))));
 }
 
+const isUrl = (value) => /^https?:\/\/\S+$/i.test(value.trim());
+const isUpload = (value) => /\/\/cdn\.localcivics\.io\/v1\/store\//i.test(value);
+const hostOf = (value) => {
+  try {
+    return new URL(value).hostname.replace(/^www\./, "");
+  } catch (e) {
+    return value;
+  }
+};
+function AnswerValue(props) {
+  const values = (props.answer || []).filter((v) => typeof v === "string" && v.trim() !== "");
+  const text = values.filter((v) => !isUrl(v));
+  const links = values.filter(isUrl);
+  if (values.length === 0) {
+    return props.emptyText ? /* @__PURE__ */ React.createElement("div", { className: props.className }, props.emptyText) : null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: `flex flex-col gap-2 ${props.className || ""}` }, text.length > 0 && /* @__PURE__ */ React.createElement("div", null, text.join(", ")), links.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, links.map((link) => {
+    const upload = isUpload(link);
+    return /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        key: link,
+        href: link,
+        download: upload || void 0,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        title: link,
+        className: "flex w-fit items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
+      },
+      upload ? /* @__PURE__ */ React.createElement(IconDownload, { size: 12, stroke: 2 }) : /* @__PURE__ */ React.createElement(IconExternalLink, { size: 12, stroke: 2 }),
+      upload ? "Download" : `Open link (${hostOf(link)})`
+    );
+  })));
+}
+
 function Table$7(props) {
   const { items: sortedItems, requestSort, sortConfig } = useSortableData(props.items);
   if (props.items.length === 0) {
@@ -1226,7 +1261,7 @@ function Table$7(props) {
         className: `px-5 py-4 ${i < row.questions.length - 1 || row.reflection ? "border-b border-slate-100" : ""}`
       },
       /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold text-slate-500" }, q.questionName),
-      /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-600" }, q.answer.join(", "))
+      /* @__PURE__ */ React.createElement(AnswerValue, { answer: q.answer, className: "mt-1 text-xs text-slate-600" })
     )), row.reflection && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4 px-5 py-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold text-slate-500" }, "Reflection"), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs text-slate-600" }, row.reflection)), !!row.rating && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, row.rating.toLocaleString()))));
   })));
 }
@@ -1475,7 +1510,7 @@ const SplitButton$3 = (props) => {
 function Stack$3(props) {
   const hasAnswers = props.items.length > 0;
   const hasReflection = !!props.reflection;
-  return /* @__PURE__ */ React.createElement(Link, { to: props.href, state: props.state, className: "flex flex-col gap-4 no-underline" }, hasAnswers ? props.items.map((row) => /* @__PURE__ */ React.createElement("div", { key: row.questionName }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.questionName), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-sm text-slate-600" }, row.answer.join(", ") || "No answer."))) : !hasReflection ? /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "No question responses recorded yet.") : null, hasReflection && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "Reflection"), !!props.rating && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, props.rating)), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-sm text-slate-600" }, props.reflection)), /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-dark-blue-400 hover:underline" }, "View full response \u2192"));
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, hasAnswers ? props.items.map((row) => /* @__PURE__ */ React.createElement("div", { key: row.questionName }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, row.questionName), /* @__PURE__ */ React.createElement(AnswerValue, { answer: row.answer, emptyText: "No answer.", className: "mt-1 text-sm text-slate-600" }))) : !hasReflection ? /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "No question responses recorded yet.") : null, hasReflection && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "Reflection"), !!props.rating && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 rounded-full bg-gold-100 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, props.rating)), /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-sm text-slate-600" }, props.reflection)), /* @__PURE__ */ React.createElement(Link, { to: props.href, state: props.state, className: "w-fit text-xs font-bold text-dark-blue-400 no-underline hover:underline" }, "View full response \u2192"));
 }
 
 var __defProp$d = Object.defineProperty;