Extend edit series block (#1058)

Adds new series block configurable default values.

- Extend video list order with the `A-Z` and `Z-A` options.
- Add video list view options (List, Gallery, Slider)


![grafik](https://github.com/elan-ev/tobira/assets/35195803/22e506ca-fbec-45a9-bfe8-c30072715ef5)

backend/src/api/model/block/mod.rs

@@ -76,6 +76,21 @@ pub(crate) enum VideoListOrder {
     NewToOld,
     #[postgres(name = "old_to_new")]
     OldToNew,
+    #[postgres(name = "a_to_z")]
+    AZ,
+    #[postgres(name = "z_to_a")]
+    ZA,
+}
+
+#[derive(Debug, Clone, Copy, FromSql, ToSql, GraphQLEnum)]
+#[postgres(name = "video_list_view")]
+pub(crate) enum VideoListView {
+    #[postgres(name = "slider")]
+    Slider,
+    #[postgres(name = "gallery")]
+    Gallery,
+    #[postgres(name = "list")]
+    List,
 }
 
 /// Data shared by all blocks.
@@ -157,6 +172,7 @@ pub(crate) struct SeriesBlock {
     pub(crate) show_title: bool,
     pub(crate) show_metadata: bool,
     pub(crate) order: VideoListOrder,
+    pub(crate) view: VideoListView,
 }
 
 impl Block for SeriesBlock {
@@ -188,6 +204,10 @@ impl SeriesBlock {
         self.order
     }
 
+    fn view(&self) -> VideoListView {
+        self.view
+    }
+
     fn id(&self) -> Id {
         Block::id(self)
     }
@@ -258,6 +278,7 @@ impl_from_db!(
             text_content,
             series,
             videolist_order,
+            videolist_view,
             video,
             show_title,
             show_link,
@@ -288,6 +309,7 @@ impl_from_db!(
                 shared,
                 series: row.series::<Option<Key>>().map(Id::series),
                 order: unwrap_type_dep(row.videolist_order(), "series", "videolist_order"),
+                view: unwrap_type_dep(row.videolist_view(), "series", "videolist_view"),
                 show_title: unwrap_type_dep(row.show_title(), "series", "show_title"),
                 show_metadata: unwrap_type_dep(row.show_metadata(), "series", "show_metadata"),
             }.into(),

backend/src/api/model/block/mutations.rs

@@ -5,7 +5,7 @@ use crate::{
     db::{types::Key, util::select},
     prelude::*,
 };
-use super::{BlockValue, VideoListOrder};
+use super::{BlockValue, VideoListOrder, VideoListView};
 
 
 impl BlockValue {
@@ -60,10 +60,10 @@ impl BlockValue {
         context.db
             .execute(
                 "insert into blocks \
-                    (realm, index, type, series, videolist_order, show_title, show_metadata) \
-                    values ($1, $2, 'series', $3, $4, $5, $6)",
+                    (realm, index, type, series, videolist_order, videolist_view, show_title, show_metadata) \
+                    values ($1, $2, 'series', $3, $4, $5, $6, $7)",
                 &[&realm.key, &index, &series,
-                    &block.order, &block.show_title, &block.show_metadata],
+                    &block.order, &block.view, &block.show_title, &block.show_metadata],
             )
             .await?;
 
@@ -274,8 +274,9 @@ impl BlockValue {
             "update blocks set \
                 series = coalesce($2, series), \
                 videolist_order = coalesce($3, videolist_order), \
-                show_title = coalesce($4, show_title), \
-                show_metadata = coalesce($5, show_metadata) \
+                videolist_view = coalesce($4, videolist_view), \
+                show_title = coalesce($5, show_title), \
+                show_metadata = coalesce($6, show_metadata) \
                 where id = $1 \
                 and type = 'series' \
                 returning {selection}",
@@ -284,6 +285,7 @@ impl BlockValue {
             (&Self::key_for(id)?) as &(dyn postgres_types::ToSql + Sync),
             &series_id,
             &set.order,
+            &set.view,
             &set.show_title,
             &set.show_metadata,
         ];
@@ -390,6 +392,7 @@ pub(crate) struct NewSeriesBlock {
     pub(crate) show_title: bool,
     pub(crate) show_metadata: bool,
     pub(crate) order: VideoListOrder,
+    pub(crate) view: VideoListView,
 }
 
 #[derive(GraphQLInputObject)]
@@ -416,6 +419,7 @@ pub(crate) struct UpdateSeriesBlock {
     show_title: Option<bool>,
     show_metadata: Option<bool>,
     order: Option<VideoListOrder>,
+    view: Option<VideoListView>,
 }
 
 #[derive(GraphQLInputObject)]

backend/src/api/mutation.rs

@@ -30,6 +30,7 @@ use super::{
             UpdateVideoBlock,
             RemovedBlock,
             VideoListOrder,
+            VideoListView,
         },
     },
 };
@@ -247,6 +248,7 @@ impl Mutation {
                 show_title: false,
                 show_metadata: true,
                 order: VideoListOrder::NewToOld,
+                view: VideoListView::Gallery,
             },
             context,
         ).await?;

backend/src/cmd/import_realm_tree.rs

@@ -304,8 +304,8 @@ impl Block {
                 // Insert block
                 let query = "
                     insert into blocks
-                    (realm, type, index, series, videolist_order, show_title, show_metadata)
-                    values ($1, 'series', $2, $3, 'new_to_old', $4, $5)
+                    (realm, type, index, series, videolist_order, videolist_view, show_title, show_metadata)
+                    values ($1, 'series', $2, $3, 'new_to_old', 'gallery', $4, $5)
                     returning id
                 ";
                 db.query_one(

backend/src/db/migrations.rs

@@ -361,4 +361,5 @@ static MIGRATIONS: Lazy<BTreeMap<u64, Migration>> = include_migrations![
     26: "more-event-search-data",
     27: "users",
     28: "user-index-queue-triggers",
+    29: "extend-series-block",
 ];

backend/src/db/migrations/29-extend-series-block.sql

@@ -0,0 +1,23 @@
+-- This adds a single `videolist_view` field of type `video_list_view` to blocks,
+-- used for series to define the view
+
+create type video_list_view as enum ('slider', 'gallery', 'list');
+
+-- Add new `videolist_view` column with default value to initialize existing series blocks
+alter table blocks
+    add column videolist_view video_list_view default 'gallery';
+
+-- Drop column default and add constraints to ensure that series blocks have all required fields
+alter table blocks
+    alter column videolist_view drop default,
+    drop constraint series_block_has_fields,
+    add constraint series_block_has_fields check (type <> 'series' or (
+        videolist_order is not null and
+        videolist_view is not null and
+        show_title is not null and
+        show_metadata is not null
+    ));
+
+-- Extend `video_list_order` type to support additional sort orders
+alter type video_list_order add value 'a_to_z';
+alter type video_list_order add value 'z_to_a';

backend/src/db/tests/util.rs

@@ -136,8 +136,8 @@ impl TestDb {
 
     pub(super) async fn add_series_block(&self, realm: Key, series: Key, index: u8) -> Result<Key> {
         let row = self.query_one(
-            "insert into blocks (realm, index, type, series, show_title, videolist_order)
-                values ($1, $2, 'series', $3, true, 'new_to_old')
+            "insert into blocks (realm, index, type, series, show_title, videolist_order, videolist_view)
+                values ($1, $2, 'series', $3, true, 'new_to_old', 'gallery')
                 returning id",
             &[&realm, &(index as i16), &series],
         ).await?;

frontend/src/routes/manage/Realm/Content/AddButtons.tsx

@@ -116,6 +116,7 @@ const AddButtonsMenu: React.FC<Props & {floatingRef: RefObject<FloatingHandle>}>
         [LuType, "text", () => addBlock("Text")],
         [LuLayoutGrid, "series", () => addBlock("Series", (_store, block) => {
             block.setValue("NEW_TO_OLD", "order");
+            block.setValue("GALLERY", "view");
             block.setValue(true, "showTitle");
             block.setValue(false, "showMetadata");
         })],

frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx

@@ -8,6 +8,7 @@ import { EditModeForm } from ".";
 import { Heading } from "./util";
 import type {
     VideoListOrder,
+    VideoListView,
     SeriesEditModeBlockData$key,
 } from "./__generated__/SeriesEditModeBlockData.graphql";
 import {
@@ -25,6 +26,7 @@ import { BREAKPOINT_SMALL } from "../../../../../../GlobalStyle";
 type SeriesFormData = {
     series: string;
     order: VideoListOrder;
+    view: VideoListView;
     showTitle: boolean;
     showMetadata: boolean;
 };
@@ -34,7 +36,7 @@ type EditSeriesBlockProps = {
 };
 
 export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRef }) => {
-    const { series, showTitle, showMetadata, order } = useFragment(graphql`
+    const { series, showTitle, showMetadata, order, view } = useFragment(graphql`
         fragment SeriesEditModeBlockData on SeriesBlock {
             series {
                 id
@@ -48,6 +50,7 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
             showTitle
             showMetadata
             order
+            view
         }
     `, blockRef);
 
@@ -94,14 +97,15 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
         />
         <div
             role="group"
-            aria-labelledby={t("manage.realm.content.display-options")}
+            aria-label={t("manage.realm.content.display-options")}
             css={{
                 display: "flex",
                 flexDirection: "row",
+                flexWrap: "wrap",
                 marginTop: 12,
-                marginRight: 48,
-                justifyContent: "space-between",
-                maxWidth: 400,
+                justifyContent: "start",
+                rowGap: 12,
+                columnGap: 36,
                 [screenWidthAtMost(BREAKPOINT_SMALL)]: {
                     flexDirection: "column",
                     gap: 12,
@@ -123,6 +127,41 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                         checked: order === "OLD_TO_NEW",
                         value: "OLD_TO_NEW",
                     },
+                    {
+                        option: "order",
+                        title: t("series.settings.a-z"),
+                        checked: order === "AZ",
+                        value: "AZ",
+                    },
+                    {
+                        option: "order",
+                        title: t("series.settings.z-a"),
+                        checked: order === "ZA",
+                        value: "ZA",
+                    },
+                ]} />
+            </div>
+            <div>
+                <Heading>{t("series.settings.view")}</Heading>
+                <DisplayOptionGroup type="radio" {...{ form }} optionProps={[
+                    {
+                        option: "view",
+                        title: t("series.settings.slider"),
+                        checked: view === "SLIDER",
+                        value: "SLIDER",
+                    },
+                    {
+                        option: "view",
+                        title: t("series.settings.gallery"),
+                        checked: view === "GALLERY",
+                        value: "GALLERY",
+                    },
+                    {
+                        option: "view",
+                        title: t("series.settings.list"),
+                        checked: view === "LIST",
+                        value: "LIST",
+                    },
                 ]} />
             </div>
             <div>

frontend/src/schema.graphql

@@ -30,6 +30,8 @@ scalar ExtraMetadata
 enum VideoListOrder {
   NEW_TO_OLD
   OLD_TO_NEW
+  AZ
+  ZA
 }
 
 "A block just showing some text."
@@ -110,6 +112,7 @@ type SeriesBlock implements Block & RealmNameSourceBlock {
   showTitle: Boolean!
   showMetadata: Boolean!
   order: VideoListOrder!
+  view: VideoListView!
   id: ID!
   index: Int!
   realm: Realm!
@@ -557,6 +560,7 @@ input UpdateSeriesBlock {
   showTitle: Boolean
   showMetadata: Boolean
   order: VideoListOrder
+  view: VideoListView
 }
 
 type SearchRealm implements Node {
@@ -592,6 +596,7 @@ input NewSeriesBlock {
   showTitle: Boolean!
   showMetadata: Boolean!
   order: VideoListOrder!
+  view: VideoListView!
 }
 
 type SearchSeries implements Node {
@@ -602,6 +607,12 @@ type SearchSeries implements Node {
   hostRealms: [SearchRealm!]!
 }
 
+enum VideoListView {
+  SLIDER
+  GALLERY
+  LIST
+}
+
 type User {
   "The username, a unique string identifying the user."
   username: String!