lupine.api 1.0.41

package/admin/admin-test-edit.tsx

@@ -0,0 +1,319 @@
+import {
+  CssProps,
+  RefProps,
+  EditableLabel,
+  HtmlVar,
+  ModalWindow,
+  NotificationColor,
+  NotificationMessage,
+  PagingLink,
+  ToggleBaseHookProps,
+  ToggleSwitch,
+  ToggleSwitchSize,
+} from 'lupine.components';
+
+type SampleDataProps = {
+  id: number;
+  name: string;
+  info: string;
+  checked: boolean;
+};
+const _DEFAULT_PAGE_LIMIT = 10;
+const _DEFAULT_ITEM_COUNT = 101;
+const sampleData: SampleDataProps[] = Array.from({ length: _DEFAULT_ITEM_COUNT }, (_, i) => ({
+  id: i + 1,
+  name: `Book Name ${i + 1}`,
+  info: `This is the info field ${i + 1}`,
+  checked: true,
+}));
+const getSampleData = (pageIndex = 0, searchTexts: string[] = []) => {
+  const filterItems = sampleData.filter((item) =>
+    searchTexts.every(
+      (text) =>
+        item.name.toLowerCase().includes(text.toLowerCase()) || item.info.toLowerCase().includes(text.toLowerCase())
+    )
+  );
+  const pageLimit = _DEFAULT_PAGE_LIMIT;
+  const itemsCount = filterItems.length;
+  let maxPages = Math.floor(itemsCount / pageLimit);
+  if (itemsCount % pageLimit !== 0) {
+    maxPages++;
+  }
+  if (pageIndex > maxPages) {
+    pageIndex = maxPages - 1;
+  }
+  const offset = pageIndex * pageLimit;
+  return {
+    status: 'ok',
+    itemsCount,
+    pageIndex,
+    result: filterItems.slice(offset, offset + pageLimit),
+  };
+};
+const removeSampleData = (itemId: number) => {
+  const index = sampleData.findIndex((item) => item.id === itemId);
+  if (index !== -1) {
+    sampleData.splice(index, 1);
+  }
+};
+const updateSampleData = (item: SampleDataProps) => {
+  const index = sampleData.findIndex((i) => i.id === item.id);
+  if (index !== -1) {
+    sampleData[index] = { ...item };
+  } else {
+    // it's a new record
+    let newId = sampleData.length + 1;
+    while (sampleData.some((item) => item.id === newId)) {
+      newId++;
+    }
+    item.id = newId;
+    sampleData.push({ ...item });
+  }
+  return item;
+};
+
+type SampleDataUpdateProps = {
+  save?: () => SampleDataProps | null;
+  cancel?: () => void;
+};
+// show dialog to edit one item, and call update when save the result
+const showBookEditItem = async (item: SampleDataProps, update: (item: SampleDataProps) => void) => {
+  const handleClicked = async (index: number) => {
+    if (index === 1) {
+      updateFn.cancel?.();
+      modalClose();
+    }
+    if (index === 0) {
+      const newItem = updateFn.save?.();
+      if (newItem) {
+        update(newItem);
+        modalClose();
+      }
+    }
+  };
+  const updateFn: SampleDataUpdateProps = {};
+  const modalClose = await ModalWindow.show({
+    title: 'Edit Sample Data',
+    buttons: ['Save', 'Cancel'],
+    // contentMaxHeight: '400px',
+    handleClicked,
+    children: <BookEditItem item={item} update={updateFn}></BookEditItem>,
+    closeWhenClickOutside: false,
+  });
+};
+
+// edit one item
+export const BookEditItem = (props: { item: SampleDataProps; update: SampleDataUpdateProps }) => {
+  const ref: RefProps = { id: '' };
+  const css: CssProps = {
+    padding: '10px',
+    border: 'solid 1px gray',
+    margin: '1px',
+    position: 'relative',
+    '.lable': {
+      width: '70px',
+    },
+  };
+  props.update.save = () => {
+    const name = ref.$('input.name').value;
+    const info = ref.$('input.info').value;
+    if (name && info) {
+      const newItem = updateSampleData({ id: props.item.id, name, info, checked: switchUpdate.getChecked!() });
+      props.item.name = newItem.name;
+      props.item.info = newItem.info;
+      props.item.checked = newItem.checked;
+      props.item.id = newItem.id;
+      return newItem;
+    }
+    NotificationMessage.sendMessage('Please input name and info', NotificationColor.Error);
+    return null;
+  };
+  const switchUpdate: ToggleBaseHookProps = {};
+  return (
+    <div ref={ref} css={css} class='sample-data'>
+      <div class='row-box'>
+        <div class='lable'>Name: </div>
+        <div>
+          <input type='text' class='input-base name' value={props.item.name} />
+        </div>
+      </div>
+      <div class='row-box mt-m'>
+        <div class='lable'>Info: </div>
+        <div>
+          <input type='text' class='input-base info' value={props.item.info} />
+        </div>
+      </div>
+      <div class='row-box mt-m'>
+        <div class='lable'>Checked: </div>
+        <ToggleSwitch size={ToggleSwitchSize.Small} hook={switchUpdate} checked={props.item.checked} />
+      </div>
+    </div>
+  );
+};
+
+// show one item
+export const BookShowItem = (props: { item: SampleDataProps }) => {
+  const ref: RefProps = { id: '' };
+  const css: CssProps = {
+    padding: '10px',
+    border: 'solid 1px gray',
+    margin: '1px',
+    position: 'relative',
+    '.control-box': {
+      display: 'none',
+      position: 'absolute',
+      right: '10px',
+      top: '10px',
+    },
+    '&:hover .control-box': {
+      display: 'block',
+    },
+    '.lable': {
+      width: '70px',
+    },
+  };
+  const onEdit = (ev: any) => {
+    const update = (item: SampleDataProps) => {
+      dom.value = makeDom(item);
+    };
+    showBookEditItem(props.item, update);
+  };
+  const onRemove = (ev: any) => {
+    removeSampleData(props.item.id);
+    ref.current.remove();
+  };
+
+  const makeDom = (item: SampleDataProps) => {
+    const saveText = (text: string) => {
+      item.name = text;
+      updateSampleData(item);
+      dom.value = makeDom(item);
+    };
+    return (
+      <>
+        <div class='control-box'>
+          <button class='button-base button-ss' onClick={onEdit}>
+            Edit
+          </button>
+          <button class='button-base button-ss' onClick={onRemove}>
+            Delete
+          </button>
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Name: </div>
+          <div>{item.name}</div>
+          <div class='px-m'>Double Click to edit: </div>
+          <EditableLabel text={item.name} save={saveText} type='text' />
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Info: </div>
+          <div>{item.info}</div>
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Checked: </div>
+          <div>{item.checked ? 'Yes' : 'No'}</div>
+        </div>
+      </>
+    );
+  };
+
+  const dom = HtmlVar(makeDom(props.item));
+  return (
+    <div ref={ref} css={css} class='sample-data'>
+      {dom.node}
+    </div>
+  );
+};
+
+// show the list
+export const BookList = () => {
+  let currentIndex = 0;
+  let searchTexts: string[] = [];
+  let items = getSampleData(currentIndex, searchTexts);
+  const ref: RefProps = { onLoad: async (self: Element) => {} };
+  const onAdd = async () => {
+    const update = (item: SampleDataProps) => {
+      // new item is added at the list end, so update the last page
+      currentIndex = Math.floor((items.itemsCount + 1) / _DEFAULT_PAGE_LIMIT);
+      listDom.value = makeList(currentIndex);
+    };
+    showBookEditItem(
+      {
+        id: -1,
+        name: '',
+        info: '',
+        checked: false,
+      },
+      update
+    );
+  };
+  const onSearch = () => {
+    searchTexts = ref.$('input.search').value.trim().split(' ');
+    items = getSampleData(currentIndex, searchTexts);
+    listDom.value = makeList(currentIndex);
+  };
+  const makeList = (pageIndex: number) => {
+    const onLinkClick = (index: number) => {
+      currentIndex = index;
+      listDom.value = makeList(currentIndex);
+    };
+    const items = getSampleData(pageIndex, searchTexts);
+    return (
+      <div>
+        <PagingLink
+          itemsCount={items.itemsCount}
+          pageIndex={pageIndex}
+          pageLimit={_DEFAULT_PAGE_LIMIT}
+          onClick={onLinkClick}
+          baseLink=''
+        ></PagingLink>
+        {items.result.map((item) => (
+          <BookShowItem item={item}></BookShowItem>
+        ))}
+        <PagingLink
+          itemsCount={items.itemsCount}
+          pageIndex={pageIndex}
+          pageLimit={_DEFAULT_PAGE_LIMIT}
+          onClick={onLinkClick}
+          baseLink=''
+        ></PagingLink>
+      </div>
+    );
+  };
+  const listDom = HtmlVar(makeList(currentIndex));
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    '.label': {
+      width: '70px',
+    },
+  };
+  return (
+    <div ref={ref} css={css}>
+      <div>
+        <div class='row-box'>
+          <div class='label'>Search: </div>
+          <input type='text' class='input-base search' />
+          <button class='button-base mr-s' onClick={onSearch}>
+            Search
+          </button>
+          <button class='button-base' onClick={onAdd}>
+            Add
+          </button>
+        </div>
+      </div>
+      <div class='list'>{listDom.node}</div>
+    </div>
+  );
+};
+
+export const AdminTestEditPage = () => {
+  return (
+    <div>
+      <div>
+        <div>Test editing.</div>
+        <BookList />
+      </div>
+    </div>
+  );
+};

package/admin/admin-test-themes.tsx

@@ -0,0 +1,56 @@
+import { CssProps, darkThemes, lightThemes } from 'lupine.components';
+
+const TestThemes = () => {
+  const lightNames = Object.keys(lightThemes);
+  const css: CssProps = {
+    '.theme-title': {
+      width: '200px',
+    },
+    '.theme-item1': {
+      width: '10%',
+    },
+    '.theme-item2': {
+      width: '10%',
+    },
+    '.theme-item3': {
+      width: '10%',
+    },
+    '.theme-item4': {
+      width: '10%',
+    },
+  };
+  return (
+    <div css={css}>
+      <div class='row-box mb-s'>
+        <div class='theme-title bold mb-s'>Theme attributes</div>
+        <div class='theme-item1 mb-s'>Light</div>
+        <div class='theme-item2 mb-s'></div>
+        <div class='theme-item3 mb-s'>Dark</div>
+        <div class='theme-item4 mb-s'></div>
+      </div>
+
+      {lightNames.map((themeName) => (
+        <div key={themeName} class='row-box mb-s'>
+          <div class='theme-title bold mb-s'>{themeName}</div>
+          <div class='theme-item1 mb-s' style={{ color: lightThemes[themeName] }}>
+            {lightThemes[themeName]}
+          </div>
+          <div class='theme-item2 mb-s' style={{ background: lightThemes[themeName] }}>
+            {lightThemes[themeName]}
+          </div>
+
+          <div class='theme-item3 mb-s' style={{ color: darkThemes[themeName] }}>
+            {darkThemes[themeName]}
+          </div>
+          <div class='theme-item4 mb-s' style={{ background: darkThemes[themeName] }}>
+            {darkThemes[themeName]}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const TestThemesPage = () => {
+  return <TestThemes />;
+};

package/admin/admin-tokens.tsx

@@ -0,0 +1,338 @@
+import {
+  CssProps,
+  getRenderPageProps,
+  RefProps,
+  EditableLabel,
+  HtmlVar,
+  ModalWindow,
+  NotificationColor,
+  NotificationMessage,
+  PagingLink,
+} from 'lupine.components';
+
+export type TokenProps = {
+  token: string;
+  description: string;
+  timestamp?: number;
+};
+
+const getTokenData = async (pageIndex = 0, searchText: string = '') => {
+  const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/tokens/list', {
+    q: searchText,
+  });
+  const dataResponse = await response.json;
+  let pageLimit = 15;
+  let tokenList: TokenProps[] = [];
+  if (dataResponse && dataResponse.status === 'ok') {
+    tokenList = dataResponse.result;
+    pageLimit = dataResponse.pageLimit;
+    tokenList;
+  }
+
+  const itemsCount = tokenList.length;
+  let maxPages = Math.floor(itemsCount / pageLimit);
+  if (itemsCount % pageLimit !== 0) {
+    maxPages++;
+  }
+  if (pageIndex > maxPages - 1) {
+    pageIndex = maxPages - 1;
+  }
+  const offset = pageIndex * pageLimit;
+  return {
+    status: 'ok',
+    itemsCount,
+    pageIndex,
+    pageLimit,
+    result: tokenList.slice(offset, offset + pageLimit),
+  };
+};
+const generateToken = async () => {
+  const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/tokens/generate');
+  const dataResponse = await response.json;
+  if (dataResponse && dataResponse.status === 'ok') {
+    NotificationMessage.sendMessage(dataResponse.message || 'Token generated successfully', NotificationColor.Success);
+  } else {
+    NotificationMessage.sendMessage(dataResponse.message || 'Failed to generate token', NotificationColor.Error);
+  }
+  return dataResponse.result;
+};
+const addTokenData = async (item: TokenProps) => {
+  const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/tokens/add', { ...item });
+  const dataResponse = await response.json;
+  if (dataResponse && dataResponse.status === 'ok') {
+    NotificationMessage.sendMessage(dataResponse.message || 'Token added successfully', NotificationColor.Success);
+  } else {
+    NotificationMessage.sendMessage(dataResponse.message || 'Failed to add token', NotificationColor.Error);
+  }
+  return { ...item };
+};
+
+const removeTokenData = async (token: string) => {
+  const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/tokens/remove', { token });
+  const dataResponse = await response.json;
+  if (dataResponse && dataResponse.status === 'ok') {
+    NotificationMessage.sendMessage(dataResponse.message || 'Token removed successfully', NotificationColor.Success);
+  } else {
+    NotificationMessage.sendMessage(dataResponse.message || 'Failed to remove token', NotificationColor.Error);
+  }
+};
+const updateTokenData = async (item: TokenProps) => {
+  const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/tokens/update', { ...item });
+  const dataResponse = await response.json;
+  if (dataResponse && dataResponse.status === 'ok') {
+    NotificationMessage.sendMessage(dataResponse.message || 'Token updated successfully', NotificationColor.Success);
+  } else {
+    NotificationMessage.sendMessage(dataResponse.message || 'Failed to update token', NotificationColor.Error);
+  }
+  return { ...item };
+};
+
+type TokenDataUpdateProps = {
+  save?: (isNew: boolean) => Promise<TokenProps | null>;
+  cancel?: () => void;
+};
+// show dialog to edit one item, and call update when save the result
+const showTokenEditItem = async (item: TokenProps, update: (item: TokenProps) => void, isNew: boolean) => {
+  const handleClicked = async (index: number) => {
+    if (index === 1) {
+      updateFn.cancel?.();
+      modalClose();
+    }
+    if (index === 0) {
+      const newItem = await updateFn.save?.(isNew);
+      if (newItem) {
+        update(newItem);
+        modalClose();
+      }
+    }
+  };
+  const updateFn: TokenDataUpdateProps = {};
+  const modalClose = await ModalWindow.show({
+    title: 'Edit Token Data',
+    buttons: ['Save', 'Cancel'],
+    // contentMaxHeight: '400px',
+    handleClicked,
+    children: <TokenEditItem item={item} update={updateFn}></TokenEditItem>,
+    closeWhenClickOutside: false,
+  });
+};
+
+// edit one item
+export const TokenEditItem = (props: { item: TokenProps; update: TokenDataUpdateProps }) => {
+  const ref: RefProps = { id: '' };
+  const css: CssProps = {
+    padding: '10px',
+    border: 'solid 1px gray',
+    margin: '1px',
+    position: 'relative',
+    '.lable': {
+      width: '90px',
+    },
+  };
+  props.update.save = async (isNew: boolean) => {
+    const token = ref.$('input.token').value;
+    const description = ref.$('input.description').value;
+    if (token && description) {
+      const newItem = isNew
+        ? await addTokenData({ token, description })
+        : await updateTokenData({ token, description });
+      props.item.token = newItem.token;
+      props.item.description = newItem.description;
+      return newItem;
+    }
+    NotificationMessage.sendMessage('Please input token and description', NotificationColor.Error);
+    return null;
+  };
+  return (
+    <div ref={ref} css={css} class='sample-data'>
+      <div class='row-box mt-m'>
+        <div class='lable'>Token: </div>
+        <div>
+          <input type='text' class='input-base token' value={props.item.token} readonly={true} />
+        </div>
+      </div>
+      <div class='row-box'>
+        <div class='lable'>Description: </div>
+        <div>
+          <input type='text' class='input-base description' value={props.item.description} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// show one item
+export const TokenShowItem = (props: { item: TokenProps }) => {
+  const ref: RefProps = {};
+  const css: CssProps = {
+    padding: '10px',
+    border: 'solid 1px gray',
+    margin: '1px',
+    position: 'relative',
+    '.control-box': {
+      display: 'none',
+      position: 'absolute',
+      right: '10px',
+      top: '10px',
+    },
+    '&:hover .control-box': {
+      display: 'block',
+    },
+    '.lable': {
+      width: '85px',
+    },
+    '.token': {
+      lineBreak: 'anywhere',
+      wordBreak: 'break-all',
+    },
+  };
+  const onEdit = (ev: any) => {
+    const update = (item: TokenProps) => {
+      dom.value = makeDom(item);
+    };
+    showTokenEditItem(props.item, update, false);
+  };
+  const onRemove = async (ev: any) => {
+    if (!confirm('Are you sure you want to delete this token?')) {
+      return;
+    }
+    await removeTokenData(props.item.token);
+    ref.current.remove();
+  };
+
+  const makeDom = (item: TokenProps) => {
+    const saveText = (text: string) => {
+      item.description = text;
+      updateTokenData(item);
+      dom.value = makeDom(item);
+    };
+    return (
+      <div>
+        <div class='control-box'>
+          <button class='button-base button-ss' onClick={onEdit}>
+            Edit
+          </button>
+          <button class='button-base button-ss' onClick={onRemove}>
+            Delete
+          </button>
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Token: </div>
+          <div class='token'>{item.token}</div>
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Description: </div>
+          <div class='flex-1'>
+            <EditableLabel text={item.description} save={saveText} type='text' />
+          </div>
+        </div>
+        <div class='row-box'>
+          <div class='lable'>Timestamp: </div>
+          <div>{new Date(item.timestamp || 0).toLocaleString()}</div>
+        </div>
+      </div>
+    );
+  };
+
+  const dom = HtmlVar(makeDom(props.item));
+  return (
+    <div ref={ref} css={css} class='sample-data'>
+      {dom.node}
+    </div>
+  );
+};
+
+// show the list
+const TokenList = () => {
+  let currentIndex = 0;
+  let searchText = '';
+  let maxPages = 0;
+  const ref: RefProps = {
+    onLoad: async (self: Element) => {
+      await makeList(currentIndex);
+    },
+  };
+  const onAdd = async () => {
+    const update = async (item: TokenProps) => {
+      // new item is added at the list end, so update the last page
+      await makeList(maxPages + 1);
+    };
+    showTokenEditItem(
+      {
+        token: await generateToken(),
+        description: '',
+      },
+      update,
+      true
+    );
+  };
+  const onSearch = async () => {
+    searchText = ref.$('input.search').value.trim();
+    await makeList(currentIndex);
+  };
+  const makeList = async (pageIndex: number) => {
+    const onLinkClick = async (index: number) => {
+      currentIndex = index;
+      await makeList(currentIndex);
+    };
+    const items = await getTokenData(pageIndex, searchText);
+    maxPages = Math.floor((items.itemsCount + 1) / items.pageLimit);
+    listDom.value = (
+      <div>
+        <PagingLink
+          itemsCount={items.itemsCount}
+          pageIndex={pageIndex}
+          pageLimit={items.pageLimit}
+          onClick={onLinkClick}
+          baseLink=''
+        ></PagingLink>
+        {items.result.map((item) => (
+          <TokenShowItem item={item}></TokenShowItem>
+        ))}
+        <PagingLink
+          itemsCount={items.itemsCount}
+          pageIndex={pageIndex}
+          pageLimit={items.pageLimit}
+          onClick={onLinkClick}
+          baseLink=''
+        ></PagingLink>
+      </div>
+    );
+  };
+  const listDom = HtmlVar(<div></div>);
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    '.label': {
+      width: '70px',
+    },
+  };
+  return (
+    <div ref={ref} css={css}>
+      <div>
+        <div class='row-box'>
+          <div class='label'>Search: </div>
+          <input type='text' class='input-base search' />
+          <button class='button-base mr-s' onClick={onSearch}>
+            Search
+          </button>
+          <button class='button-base' onClick={onAdd}>
+            Add
+          </button>
+        </div>
+      </div>
+      <div class='list'>{listDom.node}</div>
+    </div>
+  );
+};
+
+export const AdminTokensPage = () => {
+  return (
+    <div>
+      <div>
+        <div>Tokens management</div>
+        <TokenList />
+      </div>
+    </div>
+  );
+};