@peers-app/peers-ui 0.0.14

package/src/screens/events/event-info.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { IDoc, IPeerEventType } from "@peers-app/peers-sdk";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { Input } from "../../components/input";
+
+export const PeerEventInfo = (props: { peerEventType: IDoc<IPeerEventType> }) => {
+  const { peerEventType } = props;
+
+  return (
+    <div>
+
+      <small>Name:</small>
+      <Input
+        value={peerEventType.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Event name"
+        title="Event name"
+      />
+
+      <div className='mt-2'>
+        <small>Description:</small>
+        <MarkdownEditorInline
+          value={peerEventType.qs.description as any}
+        />
+      </div>
+
+    </div>
+  );
+};

package/src/screens/events/event-list.tsx

@@ -0,0 +1,104 @@
+import { ICursorIterable, IOSchemaType, IPeerEventType, newid, observable, PeerEventTypes } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { Input } from "../../components/input";
+import { LazyList } from "../../components/lazy-list";
+import { LoadingIndicator } from '../../components/loading-indicator';
+import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
+import { isDesktop, mainContentPath } from '../../globals';
+import { useObservable } from "../../hooks";
+
+export function PeerEventList() {
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<IPeerEventType>>());
+  const [cursorId] = useState(() => observable(newid()));
+
+  async function newCursor() {
+    const cursor = await PeerEventTypes().cursor({ name: { $matchWords: searchText } }, { sortBy: ['-createdAt'] });
+    cursorObs(cursor);
+    cursorId(newid());
+    return cursor;
+  }
+
+  useEffect(() => {
+    newCursor();
+  }, [searchText]);
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    if (!searchText.trim()) return;
+    const peerEventName = searchText.trim();
+    const event = await PeerEventTypes().initRecord({
+      name: peerEventName,
+      description: '',
+      schema: {
+        type: IOSchemaType.none,
+        fields: []
+      }
+    });
+    await PeerEventTypes().insert(event);
+    mainContentPath(`events/${event.peerEventTypeId}`);
+  }
+
+  async function loadMore(events: IPeerEventType[]): Promise<IPeerEventType[]> {
+    let moreMatches: IPeerEventType[] = [];
+    let cursor = cursorObs() || await newCursor();
+    for await (const event of cursor) {
+      if (events.find(e => e.peerEventTypeId === event.peerEventTypeId)) continue;
+      moreMatches.push(event);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 50) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }
+    return moreMatches;
+  }
+
+  return (
+    <div className='container-fluid'>
+      <Input value={searchTextObs} className="form-control mt-3" style={{ marginBottom: "10px" }} placeholder="Search or create new event"
+        autoFocus={isDesktop() ? true : false}
+        onKeyUp={evt => searchSubmit(evt)}
+      />
+
+      <div className="peers-list-container">
+        <LazyList
+          key={cursorId()}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={(events) => {
+            return events.map(event => {
+              return (
+                <div
+                  key={event.peerEventTypeId}
+                  className='container-fluid pb-4'
+                >
+                  <i className="bi bi-lightning-charge-fill"></i>&nbsp;
+                  <a href={`#events/${event.peerEventTypeId}`}>
+                    {event.name}
+                  </a>
+                  <div style={{ paddingLeft: '20px' }}>
+                    <MarkdownWithMentions content={event.description} />
+                  </div>
+
+                </div>
+              )
+            })
+          }}
+          loadingIndicator={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              <LoadingIndicator />
+            </div>
+          }
+          endOfList={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              {/* <span className="h3">End of List</span> */}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/screens/events/event-schedule.tsx

@@ -0,0 +1,130 @@
+import { IDoc, IPeerEventType, Observable, } from "@peers-app/peers-sdk";
+import React, { useEffect } from "react";
+import { Input } from "../../components/input";
+import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { Tooltip } from "../../components/tooltip";
+import { useObservableState } from "../../hooks";
+import { getCronErrors, getCronExplanation } from "./cron";
+
+export const PeerEventSchedule = (props: { peerEventType: IDoc<IPeerEventType> }) => {
+  const { peerEventType } = props;
+
+  return (
+    <div>
+
+      <div className="mt-3"></div>
+      <small>Chron Schedule</small>
+      <CronScheduleEditor cronSchedule={peerEventType.qs.cronSchedule} q={peerEventType.q} />
+
+    </div>
+  );
+};
+
+const CronScheduleEditor = (props: { cronSchedule: Observable<string | undefined>, q: Observable<number> }) => {
+  const { cronSchedule } = props;
+  const tempSchedule = useObservableState(props.cronSchedule() ?? '');
+  const cronError = useObservableState('');
+  const cronExplanation = useObservableState('');
+
+  const emptyCronMessage = [
+    'Enter a valid cron schedule to have this workflow automatically run.',
+    'For detailed information, see [Cron Schedule Syntax](https://en.wikipedia.org/wiki/Cron#CRON_expression)',
+    'and [CronTab.Guru](https://crontab.guru/)\n',
+    'The format is:',
+    '- `minute hour day-of-month month day-of-week`. ',
+    '  - `*` means every',
+    '  - `1-5` means 1 through 5',
+    '  - `1,4` means 1 and 4',
+    '',
+    'Examples:',
+    '- run every day at 3am:\n  - `0 3 * * *`',
+    '- run every Monday at 3am:\n  - `0 3 * * 1`',
+    '- run every Monday and Thursday at 3am:\n  - `0 3 * * 1,4`',
+    '- run every weekday at 3am:\n  - `0 3 * * 1-5`',
+
+  ].join('\n')
+
+
+  useEffect(() => {
+
+    function updateExplanation() {
+      if (cronError()) {
+        cronExplanation('');
+      }
+      else if (!tempSchedule()) {
+        cronExplanation(emptyCronMessage);
+      }
+      else {
+        cronExplanation(getCronExplanation(tempSchedule()));
+      }
+    }
+
+    cronExplanation(getCronExplanation(tempSchedule()));
+
+    const sub = tempSchedule.subscribe(() => {
+      // validate and format cron schedule
+      let schedule = tempSchedule() || '';
+      schedule = schedule.trim();
+      cronExplanation('');
+      cronError('');
+      cronSchedule(undefined);
+      if (!schedule) {
+        updateExplanation();
+        return;
+      }
+
+      const errors = getCronErrors(schedule);
+      if (errors) {
+        cronError(errors);
+        return;
+      }
+
+      cronSchedule(schedule);
+      updateExplanation();
+    });
+
+    const sub2 = props.q.subscribe(() => {
+      if (props.q() === 0) {
+        tempSchedule(cronSchedule() || '');
+        cronError('');
+        cronExplanation(getCronExplanation(tempSchedule()));
+      }
+    })
+    return () => {
+      sub.dispose();
+      sub2.dispose();
+    }
+  }, [cronSchedule, tempSchedule]);
+
+
+  return (
+    <>
+      <Tooltip
+        markdownContent={emptyCronMessage}
+        handleClassName={`p-2 small`}
+      />
+
+      <Input
+        value={tempSchedule}
+        className={`form-control mb-3 p-0 p-2 ` + (cronError() ? 'border-danger' : '')}
+        placeholder="minute hour day(of month) month day(of week)"
+        title="Cron Schedule"
+        style={{ fontFamily: 'monospace' }}
+      />
+      {cronError()
+        ? (
+          <div className="text-danger">
+            <MarkdownWithMentions content={cronError()} />
+          </div>
+        )
+        : (
+          <div>
+            <MarkdownWithMentions content={cronExplanation()} />
+          </div>
+        )
+      }
+
+
+    </>
+  )
+}

package/src/screens/groups/group-details.tsx

@@ -0,0 +1,306 @@
+import { getIconClassName, getUserContext, Groups, IDoc, IGroup, Observable, generateGroupShare, checkQRCodeCompatibility, copyToClipboard } from "@peers-app/peers-sdk";
+import React, { useState } from "react";
+import { Checkbox } from "../../components/checkbox";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { GroupMembersUI } from "./group-members";
+
+interface IProps {
+  groupId: string;
+}
+
+export const GroupDetails = (props: IProps) => {
+
+  const group = usePromise(async () => {
+    const userContext = await getUserContext();
+    const userGroupTable = Groups(userContext.userDataContext);
+    const group = await userGroupTable.get(props.groupId);
+    if (!group) {
+      throw new Error('Group not found');
+    }
+    updateActiveTabTitle(group.name || "Group");
+    const groupDoc = userGroupTable.initDoc(group);
+    // Bit of a hack - saves go to both the group and user db
+    const originalSave = groupDoc.save;
+    groupDoc.save = async () => {
+      const saveResult = await originalSave();
+      const groupDataContext = userContext.getDataContext(group.groupId);
+      const groupGroupTable = Groups(groupDataContext);
+      await groupGroupTable.save(saveResult.toJS());
+      return saveResult;
+    }
+    return groupDoc;
+  }, undefined, [props.groupId]);
+
+  if (!group) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className={`${getIconClassName(Groups())} me-2`}></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={group.groupId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={group.qs.name}
+            />
+          </h4>
+        </div>
+        <div className="d-flex gap-2">
+          <ShareButton groupId={props.groupId} />
+          <SaveButton
+            key={group.groupId}
+            doc={group}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={group.groupId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <GroupInfo group={group} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Members', content:
+              <ScreenTabBody>
+                <GroupMembersWrapper groupId={props.groupId} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+const GroupInfo = (props: { group: IDoc<IGroup> }) => {
+  const { group } = props
+
+  group.description = group.description || '';
+
+  return (
+    <div>
+
+      <small>Name:</small>
+      <Input
+        value={group.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Group name"
+        title="Group name"
+      />
+
+      <small>Icon Class Name:</small>
+      <Input
+        value={group.qs.iconClassName}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="bi-people-fill"
+        title="Icon class name (e.g., bi-people-fill, bi-house-fill, bi-star-fill)"
+      />
+
+      <small>Group ID:</small>
+      <div className="form-control mb-3 p-2 bg-body-secondary text-body-secondary" style={{ fontFamily: 'monospace', fontSize: '0.9em' }}>
+        {group.groupId}
+      </div>
+
+      <div className="d-flex flex-row">
+        <div className="ms-2">
+          <label className="form-label small mt-2 me-2">Disabled:</label>
+          <Checkbox
+            className="form-check-input mt-2"
+            checked={group.qs.disabled}
+          />
+        </div>
+      </div>
+
+      <br />
+
+      <small className="mt-2">Description:</small>
+      <MarkdownEditorInline
+        value={group.qs.description as Observable<string>}
+      />
+
+    </div>
+  )
+}
+
+const ShareButton = ({ groupId }: { groupId: string }) => {
+  const [isSharing, setIsSharing] = useState(false);
+  const [shareResult, setShareResult] = useState<{
+    success: boolean;
+    message: string;
+    qrInfo?: any;
+  } | null>(null);
+
+  const handleShare = async () => {
+    setIsSharing(true);
+    setShareResult(null);
+    
+    try {
+      // Generate the group share data
+      const groupShare = await generateGroupShare(groupId);
+      
+      // Check QR code compatibility
+      const qrInfo = checkQRCodeCompatibility(groupShare, 20);
+      
+      // Convert to JSON
+      const groupShareJson = JSON.stringify(groupShare, null, 2);
+      
+      // Copy to clipboard
+      const copied = await copyToClipboard(groupShareJson);
+      
+      if (copied) {
+        setShareResult({
+          success: true,
+          message: `Group share data copied to clipboard! (${qrInfo.size} chars, ${qrInfo.memberCount} admin members)`,
+          qrInfo
+        });
+      } else {
+        setShareResult({
+          success: false,
+          message: 'Failed to copy to clipboard. Please copy manually from the modal.',
+          qrInfo
+        });
+      }
+    } catch (error: any) {
+      setShareResult({
+        success: false,
+        message: `Error generating share: ${error.message}`,
+      });
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  return (
+    <>
+      <button 
+        className="btn btn-secondary btn-sm"
+        onClick={handleShare}
+        disabled={isSharing}
+        title="Share group with admin members"
+      >
+        {isSharing ? (
+          <>
+            <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+            Sharing...
+          </>
+        ) : (
+          <>
+            <i className="bi-share me-1"></i>
+            Share
+          </>
+        )}
+      </button>
+      
+      {shareResult && (
+        <div className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" 
+             style={{ backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 1050 }}>
+          <div className="card" style={{ maxWidth: '500px', width: '90%' }}>
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <h6 className="mb-0">
+                <i className={`bi-${shareResult.success ? 'check-circle text-success' : 'exclamation-triangle text-warning'} me-2`}></i>
+                Group Share {shareResult.success ? 'Ready' : 'Error'}
+              </h6>
+              <button 
+                className="btn-close" 
+                onClick={() => setShareResult(null)}
+                aria-label="Close"
+              ></button>
+            </div>
+            <div className="card-body">
+              <p className="mb-3">{shareResult.message}</p>
+              
+              {shareResult.qrInfo && (
+                <div className="mb-3">
+                  <h6>QR Code Compatibility</h6>
+                  <div className="row g-2">
+                    <div className="col-6">
+                      <small className="text-muted">Size:</small><br/>
+                      <strong>{shareResult.qrInfo.size} chars</strong>
+                    </div>
+                    <div className="col-6">
+                      <small className="text-muted">QR Version 20:</small><br/>
+                      <span className={`badge bg-${shareResult.qrInfo.fits ? 'success' : 'warning'}`}>
+                        {shareResult.qrInfo.fits ? '✓ Fits' : '⚠ Too Large'} ({shareResult.qrInfo.usagePercent}%)
+                      </span>
+                    </div>
+                  </div>
+                  
+                  {!shareResult.qrInfo.fits && (
+                    <div className="alert alert-warning mt-2 mb-0">
+                      <small>
+                        <i className="bi-exclamation-triangle me-1"></i>
+                        Data may be too large for standard QR codes. Consider reducing admin members or use text sharing.
+                      </small>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              <div className="text-end">
+                <button 
+                  className="btn btn-secondary me-2"
+                  onClick={() => setShareResult(null)}
+                >
+                  Close
+                </button>
+                {shareResult.success && (
+                  <button 
+                    className="btn btn-primary"
+                    onClick={handleShare}
+                  >
+                    Copy Again
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const GroupMembersWrapper = (props: { groupId: string }) => {
+  const userContext = usePromise(() => getUserContext());
+  if (!userContext) return null;
+
+  return <GroupMembersUI groupId={props.groupId} userContext={userContext} />;
+}
+
+registerInternalPeersUI({
+  peersUIId: '00group00details00component',
+  component: GroupDetails,
+  routes: [
+    {
+      isMatch: (props, context) => {
+        const match = context.path.match(/^groups\/([a-zA-Z0-9]{25})$/);
+        if (match) {
+          props.groupId = match[1];
+          return true;
+        }
+        return false;
+      },
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+})