library: Adds columnview entry (workbenchdev#437)

* Add columnview

* test

* Update

* Clean Up and implement colview

* Refactoring and applied suggested changes

* Applied changes

* Progress

* Updated

* Update

* Update

* Reverse

* Applied Suggested Changes

* Minor Change

src/Library/demos/Column View/main.blp

@@ -0,0 +1,44 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: _("Column View");
+  description: _("Presents a large dynamic list of items using multiple columns with headers");
+  valign: start;
+
+  Adw.Clamp {
+    maximum-size: 240;
+
+    Box {
+      orientation: vertical;
+      spacing: 12;
+
+      LinkButton {
+        label: _("Documentation");
+        uri: "https://docs.gtk.org/gtk4/class.ColumnView.html";
+      }
+
+      Frame {
+        ColumnView column_view {
+          show-column-separators: true;
+          show-row-separators: true;
+
+          ColumnViewColumn col1 {
+            title: _("Name");
+            factory: SignalListItemFactory{};
+          }
+
+          ColumnViewColumn col2 {
+            title: _("Size");
+            factory: SignalListItemFactory {};
+          }
+
+          ColumnViewColumn col3 {
+            title: _("Date");
+            factory: SignalListItemFactory {};
+          }
+        }
+      }
+    }
+  }
+}

src/Library/demos/Column View/main.js

@@ -0,0 +1,105 @@
+import Gtk from "gi://Gtk";
+import Gio from "gi://Gio";
+import GObject from "gi://GObject";
+
+const column_view = workbench.builder.get_object("column_view");
+const col1 = workbench.builder.get_object("col1");
+const col2 = workbench.builder.get_object("col2");
+const col3 = workbench.builder.get_object("col3");
+
+//Model
+const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path(
+  "Library/demos",
+);
+
+const data_model = new Gtk.DirectoryList({
+  file: dir,
+  attributes: "standard::*,time::modified",
+});
+
+const sort_model = new Gtk.SortListModel({
+  model: data_model,
+  sorter: column_view.sorter,
+});
+
+column_view.model = new Gtk.SingleSelection({
+  model: sort_model,
+});
+
+col1.sorter = new Gtk.StringSorter({
+  expression: new Gtk.ClosureExpression(
+    GObject.TYPE_STRING,
+    (fileInfo) => fileInfo.get_display_name(),
+    null,
+  ),
+});
+
+col2.sorter = new Gtk.NumericSorter({
+  expression: new Gtk.ClosureExpression(
+    GObject.TYPE_INT,
+    (fileInfo) => fileInfo.get_size(),
+    null,
+  ),
+});
+
+col3.sorter = new Gtk.NumericSorter({
+  expression: new Gtk.ClosureExpression(
+    GObject.TYPE_INT64,
+    (fileInfo) => fileInfo.get_modification_date_time().to_unix(),
+    null,
+  ),
+});
+
+//View
+//Column 1
+const factory_col1 = col1.factory;
+factory_col1.connect("setup", (factory, list_item) => {
+  const label = new Gtk.Label({
+    margin_start: 12,
+    margin_end: 12,
+  });
+  list_item.set_child(label);
+});
+factory_col1.connect("bind", (factory, list_item) => {
+  const label_widget = list_item.get_child();
+  const model_item = list_item.get_item();
+  label_widget.label = model_item.get_display_name();
+});
+
+//Column 2
+const factory_col2 = col2.factory;
+factory_col2.connect("setup", (factory, list_item) => {
+  const label = new Gtk.Label({
+    margin_start: 12,
+    margin_end: 12,
+  });
+  list_item.set_child(label);
+});
+factory_col2.connect("bind", (factory, list_item) => {
+  const label_widget = list_item.get_child();
+  const model_item = list_item.get_item();
+  const size = model_item.get_size();
+  if (Math.floor(size / 1_000_000_000) > 0)
+    label_widget.label = `${(size / 1_000_000_000).toFixed(1)} GB`;
+  else if (Math.floor(size / 1_000_000) > 0)
+    label_widget.label = `${(size / 1_000_000).toFixed(1)} MB`;
+  else if (Math.floor(size / 1000) > 0)
+    label_widget.label = `${(size / 1000).toFixed(1)} kB`;
+  else label_widget.label = `${size / 1000} bytes`;
+});
+
+//Column 3
+const factory_col3 = col3.factory;
+factory_col3.connect("setup", (factory, list_item) => {
+  const label = new Gtk.Label({
+    margin_start: 12,
+    margin_end: 12,
+  });
+  list_item.set_child(label);
+});
+factory_col3.connect("bind", (factory, list_item) => {
+  const label_widget = list_item.get_child();
+  const model_item = list_item.get_item();
+  const date = model_item.get_modification_date_time();
+  label_widget.label = date.format("%F");
+});

src/Library/demos/Column View/main.json

@@ -0,0 +1,7 @@
+{
+  "name": "Column View",
+  "category": "layout",
+  "description": "Presents a large dynamic list of items using multiple columns with headers",
+  "panels": ["ui", "preview"],
+  "autorun": true
+}