first commit

2025-10-29 11:42:25 +01:00
commit 703f50a09d
4595 changed files with 385164 additions and 0 deletions
--- a/resources/client/user-lists/pages/create-user-list-page.tsx
+++ b/resources/client/user-lists/pages/create-user-list-page.tsx
@@ -0,0 +1,53 @@
+import React, {Fragment} from 'react';
+import {useForm} from 'react-hook-form';
+import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
+import {Trans} from '@common/i18n/trans';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useCreateList} from '@app/user-lists/requests/use-create-list';
+import {CrupdateUserListForm} from '@app/user-lists/pages/crupdate-user-list-form';
+import {TITLE_MODEL} from '@app/titles/models/title';
+import {EMPTY_PAGINATION_RESPONSE} from '@common/http/backend-response/pagination-response';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {Link} from 'react-router-dom';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+export function CreateUserListPage() {
+  const form = useForm<CreateChannelPayload>({
+    defaultValues: {
+      type: 'list',
+      public: true,
+      config: {
+        contentType: 'manual',
+        contentModel: TITLE_MODEL,
+        layout: 'grid',
+        contentOrder: 'channelables.order:asc',
+      },
+      content: EMPTY_PAGINATION_RESPONSE.pagination,
+    },
+  });
+  const createList = useCreateList(form);
+
+  return (
+    <Fragment>
+      <StaticPageTitle>
+        <Trans message="New list" />
+      </StaticPageTitle>
+      <CrupdateResourceLayout
+        backButton={
+          <IconButton elementType={Link} relative="path" to="../">
+            <ArrowBackIcon />
+          </IconButton>
+        }
+        form={form}
+        onSubmit={values => {
+          createList.mutate(values);
+        }}
+        title={<Trans message="New list" />}
+        isLoading={createList.isPending}
+      >
+        <CrupdateUserListForm />
+      </CrupdateResourceLayout>
+    </Fragment>
+  );
+}
--- a/resources/client/user-lists/pages/crupdate-user-list-form.tsx
+++ b/resources/client/user-lists/pages/crupdate-user-list-form.tsx
@@ -0,0 +1,95 @@
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {Trans} from '@common/i18n/trans';
+import {ContentModelField} from '@common/admin/channels/channel-editor/controls/content-model-field';
+import {
+  channelContentConfig,
+  Layout,
+} from '@app/admin/channels/channel-content-config';
+import {NEWS_ARTICLE_MODEL} from '@app/titles/models/news-article';
+import {CHANNEL_MODEL} from '@common/channels/channel';
+import {MOVIE_MODEL, SERIES_MODEL} from '@app/titles/models/title';
+import {ContentOrderField} from '@common/admin/channels/channel-editor/controls/content-order-field';
+import {FormSelect, Option} from '@common/ui/forms/select/select';
+import {ChannelContentEditor} from '@common/admin/channels/channel-editor/channel-content-editor';
+import React from 'react';
+import {
+  ChannelContentSearchField,
+  ChannelContentSearchFieldProps,
+} from '@common/admin/channels/channel-editor/channel-content-search-field';
+import {ChannelContentItemImage} from '@app/admin/channels/channel-content-item-image';
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {SvgImage} from '@common/ui/images/svg-image/svg-image';
+import playlist from '@common/admin/channels/playlist.svg';
+import {FormSwitch} from '@common/ui/forms/toggle/switch';
+
+export function CrupdateUserListForm() {
+  return (
+    <div>
+      <FormTextField
+        name="name"
+        label={<Trans message="Name" />}
+        required
+        autoFocus
+        className="mb-24"
+      />
+      <FormTextField
+        name="description"
+        label={<Trans message="Description" />}
+        inputElementType="textarea"
+        rows={2}
+        className="mb-24"
+      />
+      <ContentModelField
+        config={channelContentConfig}
+        className="mb-24"
+        exclude={[NEWS_ARTICLE_MODEL, CHANNEL_MODEL, MOVIE_MODEL, SERIES_MODEL]}
+      />
+      <ContentOrderField config={channelContentConfig} />
+      <FormSelect
+        className="flex-auto w-full"
+        selectionMode="single"
+        name="config.layout"
+        label={<Trans message="Layout" />}
+      >
+        <Option value={Layout.grid}>
+          <Trans {...channelContentConfig.layoutMethods[Layout.grid].label} />
+        </Option>
+        <Option value={Layout.list}>
+          <Trans {...channelContentConfig.layoutMethods[Layout.list].label} />
+        </Option>
+        <Option value={Layout.landscapeGrid}>
+          <Trans
+            {...channelContentConfig.layoutMethods[Layout.landscapeGrid].label}
+          />
+        </Option>
+      </FormSelect>
+      <FormSwitch name="public" className="mt-24">
+        <Trans message="Public" />
+      </FormSwitch>
+      <ChannelContentEditor
+        title={<Trans message="List content" />}
+        searchField={<SearchField />}
+        noResultsMessage={<NoResultsMessage />}
+      />
+    </div>
+  );
+}
+
+function SearchField(props: ChannelContentSearchFieldProps) {
+  return (
+    <ChannelContentSearchField
+      {...props}
+      imgRenderer={item => <ChannelContentItemImage item={item} />}
+    />
+  );
+}
+
+function NoResultsMessage() {
+  return (
+    <IllustratedMessage
+      title={<Trans message="List is empty" />}
+      description={<Trans message="No content is attached to this list yet." />}
+      image={<SvgImage src={playlist} />}
+    />
+  );
+}
--- a/resources/client/user-lists/pages/edit-user-list-page.tsx
+++ b/resources/client/user-lists/pages/edit-user-list-page.tsx
@@ -0,0 +1,63 @@
+import React, {Fragment, ReactNode} from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {useForm} from 'react-hook-form';
+import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
+import {Trans} from '@common/i18n/trans';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useUpdateList} from '@app/user-lists/requests/use-update-list';
+import {CrupdateUserListForm} from '@app/user-lists/pages/crupdate-user-list-form';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+import {Link} from 'react-router-dom';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+import {useChannel} from '@common/channels/requests/use-channel';
+import {Channel} from '@common/channels/channel';
+
+export function EditUserListPage() {
+  const query = useChannel(undefined, 'editUserListPage');
+
+  return query.data ? (
+    <Fragment>
+      <StaticPageTitle>
+        <Trans message="Edit list" />
+      </StaticPageTitle>
+      <PageContent list={query.data.channel}>
+        <CrupdateUserListForm />
+      </PageContent>
+    </Fragment>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute m-auto inset-0" />
+  );
+}
+
+interface PageContentProps {
+  list: Channel;
+  children: ReactNode;
+}
+function PageContent({list, children}: PageContentProps) {
+  const form = useForm<CreateChannelPayload>({
+    // @ts-ignore
+    defaultValues: {
+      ...list,
+    },
+  });
+  const updateList = useUpdateList(form);
+
+  return (
+    <CrupdateResourceLayout
+      backButton={
+        <IconButton elementType={Link} relative="path" to="../../">
+          <ArrowBackIcon />
+        </IconButton>
+      }
+      form={form}
+      onSubmit={values => {
+        updateList.mutate(values);
+      }}
+      title={<Trans message="Edit “:name“ List" values={{name: list.name}} />}
+      isLoading={updateList.isPending}
+    >
+      {children}
+    </CrupdateResourceLayout>
+  );
+}
--- a/resources/client/user-lists/pages/user-lists-index-page/user-list-index-item.tsx
+++ b/resources/client/user-lists/pages/user-lists-index-page/user-list-index-item.tsx
@@ -0,0 +1,140 @@
+import {Channel} from '@common/channels/channel';
+import {Title} from '@app/titles/models/title';
+import {Person} from '@app/titles/models/person';
+import {useDeleteList} from '@app/user-lists/requests/use-delete-list';
+import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
+import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
+import {Trans} from '@common/i18n/trans';
+import React, {Fragment} from 'react';
+import {getUserListLink, UserListLink} from '@app/user-lists/user-list-link';
+import {Button} from '@common/ui/buttons/button';
+import {Link} from 'react-router-dom';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {UserListByline} from '@app/user-lists/user-list-byline';
+import {UserListDetails} from '@app/user-lists/user-list-details';
+import clsx from 'clsx';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {PersonPoster} from '@app/people/person-poster/person-poster';
+import {User} from '@common/auth/user';
+import {useAuth} from '@common/auth/use-auth';
+
+interface UserListIndexItemProps {
+  list: Channel;
+  user: User;
+  showVisibility?: boolean;
+}
+export function UserListIndexItem({
+  list,
+  user,
+  showVisibility = true,
+}: UserListIndexItemProps) {
+  const {user: authUser} = useAuth();
+  const canEdit = authUser && authUser.id === user.id;
+  return (
+    <div className="flex items-center gap-24 border-b py-24">
+      {
+        <ItemsPreview
+          className="max-md:hidden"
+          list={list as Channel<Title | Person>}
+        />
+      }
+      <section className="flex-auto">
+        <div className="flex items-center gap-8">
+          <UserListLink
+            list={list}
+            className="mr-auto block text-lg font-semibold capitalize"
+          />
+          {!list.config.preventDeletion && !list.internal && canEdit && (
+            <Fragment>
+              <Button
+                elementType={Link}
+                to={`${getUserListLink(list)}/edit`}
+                variant="outline"
+                size="2xs"
+                color="primary"
+              >
+                <Trans message="Edit" />
+              </Button>
+              <DialogTrigger type="modal">
+                <Button
+                  color="danger"
+                  variant="outline"
+                  radius="rounded"
+                  size="2xs"
+                >
+                  <Trans message="Delete" />
+                </Button>
+                <DeleteListDialog list={list} />
+              </DialogTrigger>
+            </Fragment>
+          )}
+        </div>
+        {list.description && (
+          <p className="mt-8 whitespace-nowrap text-sm text-muted">
+            {list.description}
+          </p>
+        )}
+        <div className="mt-12 text-sm">
+          <div className="items-center justify-between gap-24 md:flex">
+            {user && <UserListByline user={user} />}
+            <UserListDetails
+              list={list}
+              showVisibility={showVisibility}
+              className="max-md:mt-12"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+interface ItemPreviewProps {
+  list: Channel<Title | Person>;
+  className?: string;
+}
+function ItemsPreview({list, className}: ItemPreviewProps) {
+  if (!list.items?.length) return null;
+  return (
+    <div
+      className={clsx('flex items-center overflow-hidden rounded', className)}
+    >
+      {list.items?.map((item, index) => (
+        <div
+          key={item.id}
+          style={{zIndex: 100 - index}}
+          className={clsx(
+            'relative overflow-hidden rounded shadow-[2px_0_7px_#000]',
+            index !== 0 && '-ml-30',
+          )}
+        >
+          {item.model_type === 'title' ? (
+            <TitlePoster title={item} size="w-70" srcSize="sm" />
+          ) : (
+            <PersonPoster person={item} size="w-70" srcSize="sm" />
+          )}
+          <div className="pointer-events-none absolute inset-0 shadow-[inset_0_0_0_1px_rgba(221,238,255,.35)]" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface DeleteButtonProps {
+  list: Channel;
+}
+function DeleteListDialog({list}: DeleteButtonProps) {
+  const deleteList = useDeleteList();
+  const {close} = useDialogContext();
+
+  return (
+    <ConfirmationDialog
+      isDanger
+      title={<Trans message="Delete list" />}
+      body={<Trans message="Are you sure you want to delete this list?" />}
+      confirm={<Trans message="Delete" />}
+      isLoading={deleteList.isPending}
+      onConfirm={() => deleteList.mutate({listId: list.id}, {onSuccess: close})}
+    />
+  );
+}
--- a/resources/client/user-lists/pages/user-lists-index-page/user-lists-index-page.tsx
+++ b/resources/client/user-lists/pages/user-lists-index-page/user-lists-index-page.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {SitePageLayout} from '@app/site-page-layout';
+import {Trans} from '@common/i18n/trans';
+import {SiteSectionHeading} from '@app/titles/site-section-heading';
+import {Link} from 'react-router-dom';
+import {Button} from '@common/ui/buttons/button';
+import {Channel} from '@common/channels/channel';
+import {UserListIndexItem} from '@app/user-lists/pages/user-lists-index-page/user-list-index-item';
+import {useProfileLists} from '@app/profile/requests/use-profile-lists';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useAuth} from '@common/auth/use-auth';
+import {UseInfiniteDataResult} from '@common/ui/infinite-scroll/use-infinite-data';
+import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel';
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {SvgImage} from '@common/ui/images/svg-image/svg-image';
+import todoImage from '@app/admin/lists/todo.svg';
+
+export function UserListsIndexPage() {
+  const query = useProfileLists();
+
+  const content = query.data ? (
+    <PageContent query={query} />
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+
+  return (
+    <SitePageLayout>
+      <StaticPageTitle>
+        <Trans message="Your lists" />
+      </StaticPageTitle>
+      <div className="container mx-auto mt-48 px-24">
+        <header>
+          <SiteSectionHeading
+            headingType="h1"
+            margin="mb-34"
+            actions={
+              <Button
+                variant="flat"
+                color="primary"
+                elementType={Link}
+                to="new"
+              >
+                <Trans message="New list" />
+              </Button>
+            }
+          >
+            <Trans message="My lists" />
+          </SiteSectionHeading>
+        </header>
+        {content}
+      </div>
+    </SitePageLayout>
+  );
+}
+
+interface PageContentProps {
+  query: UseInfiniteDataResult<Channel>;
+}
+function PageContent({query}: PageContentProps) {
+  const {user} = useAuth();
+
+  if (query.noResults) {
+    return (
+      <IllustratedMessage
+        className="mt-80"
+        image={<SvgImage src={todoImage} />}
+        title={<Trans message="You have not created any lists yet." />}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {query.items.map(list => (
+        <UserListIndexItem list={list} key={list.id} user={user!} />
+      ))}
+      <InfiniteScrollSentinel query={query} />
+    </div>
+  );
+}