OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit #69

milosh-96 · 2024-12-20T23:16:34Z

OSOE-920
Fixes #67

…ule.

…pdating migrations file.

…lues.

…erties.

…pdating the part settings edit template and adding hints and default values for each option.

…e Settings - Options (in JSON format).

…s edit page.

…ault value for CarouselWidgetPartSettings Options.

… widget; Updating UI Kit widgets tests so they work with the example page.

Lombiq.UIKit.Widgets.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs

Lombiq.UIKit.Widgets.Tests.UI/Readme.md

Lombiq.UIKit.Widgets.Tests.UI/Lombiq.UIKit.Widgets.Tests.UI.csproj

Lombiq.UIKit.Widgets/Migrations/CarouselWidgetMigrations.cs

Lombiq.UIKit.Widgets/Settings/CarouselWidgetPartSettingsDisplayDriver.cs

Lombiq.UIKit.Widgets/Settings/CarouselWidgetPartSettingsViewModel.cs

Lombiq.UIKit.Widgets/Views/Home/Index.cshtml

Lombiq.UIKit.Widgets/Views/Widget-CarouselWidget.cshtml

…dding TitlePart to Slide.

…ests.

barthamark · 2025-01-16T12:13:23Z

Lombiq.UIKit.Widgets/Constants/ContentTypes.cs

+public static class ContentTypes
+{
+    public const string SlidePart = nameof(SlidePart);
+    public const string Slide = "Slide";


You can use nameof here and below.

barthamark · 2025-01-16T12:14:50Z

Lombiq.UIKit.Widgets/Handlers/SlidePartHandler.cs

@@ -6,5 +6,5 @@ namespace Lombiq.UIKit.Widgets.Handlers;
 public class SlidePartHandler : ContentPartHandler<SlidePart>
 {
    public override Task UpdatedAsync(UpdateContentContext context, SlidePart part) =>
-        Task.Run(() => context.ContentItem.DisplayText = part.Title.Text);
+        Task.Run(() => context.ContentItem.DisplayText = part.ContentItem.Content.TitlePart.Text);


This is not necessary. The TitlePart's functionality already do this.

barthamark · 2025-01-16T12:20:46Z

Lombiq.UIKit.Widgets/Constants/ContentTypes.cs

+
+public static class ContentTypes
+{
+    public const string SlidePart = nameof(SlidePart);


Part names are not content types. You can keep reference them as nameof(PartName) so you don't need consts for these.

The SlidePart is still here.

barthamark · 2025-01-16T12:35:31Z

Lombiq.UIKit.Widgets/Views/Widget-CarouselWidget.cshtml

@@ -22,14 +22,12 @@
        var bagItems = ((ContentItem)Model.ContentItem).As<BagPart>().ContentItems.Select(contentItem => contentItem.As<SlidePart>());
        var items = new List<IShape>();

-        bagItems.ForEach(async (slide) => items.Add(await New.Slide(Title: slide.Title.Text, Image: slide.Image.Paths[0])));
+        bagItems.ForEach(async (slide) => items.Add(await New.Slide(Title: slide.ContentItem.Content.TitlePart.Text, Image: slide.Image.Paths[0])));


You can rely on the slide.ContentItem.DisplayText.

barthamark

Make sure the carousel is usable if you do this:

Setup the website using the SaaS recipe.
Run the Sample Carousel recipe.

Check if the page is imported, features are enabled, images are displayed, etc.

barthamark · 2025-01-17T16:18:34Z

Lombiq.UIKit.Widgets/Constants/ContentTypes.cs

+
+public static class ContentTypes
+{
+    public const string SlidePart = nameof(SlidePart);


The SlidePart is still here.

barthamark · 2025-01-17T17:46:22Z

Lombiq.UIKit.Widgets/Manifest.cs

+    Version = "0.0.1",
+    Description = "Module for reusable widgets based on Lombiq UI Kit.",
+    Website = "https://github.com/Lombiq/Orchard-UIKit"
+)]


Add the following dependencies: Lombiq.UIKit (use an appropriate const from the module), OrchardCore.ContentFields, OrchardCore.Media.

barthamark · 2025-01-17T17:46:33Z

Lombiq.UIKit.Widgets/Manifest.cs

+    Version = "0.0.1",
+    Description = "Module for reusable widgets based on Lombiq UI Kit.",
+    Website = "https://github.com/Lombiq/Orchard-UIKit"
+)]


Add an appropriate category.

barthamark · 2025-01-17T17:47:00Z

Lombiq.UIKit.Widgets/Recipes/Lombiq.UIKit.Widgets.Content.recipe.json

+  ],
+  "tags": [
+    "developer",
+    "training",


You can leave out the training.

barthamark · 2025-01-17T17:47:52Z

Lombiq.UIKit.Widgets/Recipes/Lombiq.UIKit.Widgets.Content.recipe.json

+                      "SlidePart": {
+                        "Image": {
+                          "Paths": [
+                            "about-bg.jpg"


These images won't be loaded because these are not part of the recipe so won't be imported. Add a media step where you also upload these images and make them part of the repo as well.

barthamark · 2025-01-17T17:49:25Z

Lombiq.UIKit.Widgets/Recipes/Lombiq.UIKit.Widgets.Content.recipe.json

+    {
+      "name": "feature",
+      "enable": [
+        "Lombiq.UIKit.Widgets"


Also enable the Helpful Content Types feature because the Page content type won't be loaded otherwise.

…de and information and dependencies for the project.

milosh-96 added 30 commits December 4, 2024 22:59

Setting up Lombiq.UIKit.Widgets project.

d3b05a4

Removing Controller, Views and cleaning up Startup.cs for Widgets mod…

a8df717

…ule.

Reorganizing some code.

945bb38

Removing capabilities from Slide and CarouselWidget content types.

4df70b0

Removing capabilities from Slide and CarouselWidget content types - u…

423df7d

…pdating migrations file.

Adding Slide shapes to be displayed in SlickCarousel shape.

75f59d8

Fixing formatting.

78c61c2

Updating namespace.

c4708d0

Adding Settings class for CarouselWidget.

f5aca16

Working on Carousel Widget Settings; Adding DefaultValues class.

9f5e92c

Completing Carousel Widget part settings and utilizing the default va…

78b402f

…lues.

Completing the viewmodel class for CarouselPartSettings with all prop…

1fe6382

…erties.

Adding CenterMode setting property.

9e7bc9f

Adding missing options; utilizing reflection to map all properties; u…

d4b2477

…pdating the part settings edit template and adding hints and default values for each option.

Merge branch 'dev' into issue/OSOE-920

a3b7f0c

Updating NuGET packages in Lombiq.UIKit.Widgets project.

40d5514

Removing all options from the part settings and adding just one in th…

11779ad

…e Settings - Options (in JSON format).

Adding content recipe for demo of carousel widget.

5748fd7

Utilizing CodeMirror for JSON editing on Carousel widget part setting…

acdc4f3

…s edit page.

Adding Lombiq UI Kit Widgets tests.

2e1ade4

Working on testing behaviour.

80fb030

Adding nullable types in viewmodels.

83e9220

Fixing nullable reference type error in display driver and adding def…

f7d710b

…ault value for CarouselWidgetPartSettings Options.

Changing package version in Widgets project to 2.1.0.

b5cd1f0

Updating Lombiq.Tests.UI package to 12.0.0.

08dfa9e

Fixing code formatting issues in Lombiq.UIKit.Widgets.

3bdaf05

Removing async methods from Lombiq.UIKit.Widgets UI Test case class.

36a942d

Adding options test for CarouselWidget part.

6d10194

Removing unused namespaces.

47296ca

Merge branch 'dev' into issue/OSOE-920

c92d294

Adding an example page for Carousel widget and removing the home page…

08f8513

… widget; Updating UI Kit widgets tests so they work with the example page.

barthamark requested changes Jan 13, 2025

View reviewed changes

milosh-96 added 2 commits January 13, 2025 17:52

Fixing project details (name, description..); Cleaning up the code; a…

2ce2a89

…dding TitlePart to Slide.

Renaming 'SlidesToShow' JSON property to 'slidesToShow' in Carousel t…

08d874f

…ests.

barthamark requested changes Jan 16, 2025

View reviewed changes

Improving code style.

b9fd301

barthamark requested changes Jan 17, 2025

View reviewed changes

Updating recipe to include its media; adding image files; updating co…

63530b0

…de and information and dependencies for the project.

barthamark approved these changes Jan 18, 2025

View reviewed changes

barthamark merged commit dc54346 into dev Jan 18, 2025
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit #69

OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit #69

milosh-96 commented Dec 20, 2024 •

edited by jira bot

Loading

barthamark Jan 16, 2025

barthamark Jan 16, 2025

barthamark Jan 16, 2025

barthamark Jan 17, 2025

barthamark Jan 16, 2025

barthamark left a comment

barthamark Jan 17, 2025

barthamark Jan 17, 2025

barthamark Jan 17, 2025

barthamark Jan 17, 2025

barthamark Jan 17, 2025

barthamark Jan 17, 2025

OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit #69

OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit #69

Conversation

milosh-96 commented Dec 20, 2024 • edited by jira bot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

barthamark left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

milosh-96 commented Dec 20, 2024 •

edited by jira bot

Loading