Add View to manage mutliple QR Codes

QRCode-List.cshtml

@@ -0,0 +1,93 @@
+@inherits Custom.Hybrid.RazorTyped
+@using ToSic.Razor.Blade;
+
+@{
+  // Get the QR-Code settings from the current item
+  var qrSettings = MyItems;
+
+  // The view identifier determines if the code should be visible or only on printing
+  var printOnly = MyView.Identifier == "print";
+
+  List<object> dataList = new List<object>();
+
+}
+
+<h3 class="mb-4" @Kit.Toolbar.Default(App.Settings)>
+  @( Kit.Edit.Enabled ? "Manage " : "Currently Available ")QR Codes
+</h3>
+
+@foreach (var qrc in qrSettings) {
+
+  // sets qrlink to specified url  
+  var qrLink = qrc.Bool("LinkCurrentPage")
+    ? Link.To(parameters: MyPage.Parameters)
+    : qrc.Url("Link");
+
+  // This ID is used to identify our unique code in the HTML DOM
+  var qrDomId = $"qr-code-js-{UniqueKey}-{qrc.Id}";
+
+  @* Add Infos for URL and Title to generate a  QR Code *@
+  <div @Kit.Edit.TagToolbar(qrc) 
+    class='@(printOnly ? "app-qrcode2-print-only" : "") mb-5'
+  >
+    <a class="@qrDomId mb-2" href='@qrLink' target="_blank"></a>
+    @if (qrc.Bool("DisplayLinkOrTitle")) {
+      var displayText = Text.First(qrc.String("Title"), qrc.String("Link"));
+      var svgFilename = ToSlug($"{displayText}-{qrc.Id}") + ".svg";
+      <h4>@displayText</h4>
+      <p><strong>Target (link):</strong> @qrLink</p>
+      <button class="btn btn-success ml-0 mb-3"
+        onclick="window.appQr2.downloadSvg({ domClass: '@qrDomId', fileName: '@svgFilename' })"
+      >
+        Download SVG
+      </button>
+    }
+  </div>
+
+  @* Show a special message to admins if the QR-Code is invisible otherwise *@
+  if (printOnly && MyUser.IsContentAdmin) {
+    <div class="alert alert-info app-qrcode2-noprint" @Kit.Edit.TagToolbar(qrc)>
+      @App.Resources.String("PrintQrAdminHint")
+    </div>
+  }
+
+  @* Generate the QR Code *@
+  // Get the settings from the current item, or fallback to App Settings
+  var qrParams = qrc.Child("QrCodeSettings") ?? App.Settings.Child("QrCodeSettings");
+  var size = qrParams.Int("Size"); // JRF set the size in App.Settings to 400 for now
+  var data = new {
+    domId = qrDomId,
+    options = new {
+      color = "#" + qrParams.String("Color").Trim('#'),
+      width = size,
+      height = size
+    }
+  };
+
+  dataList.Add(data);
+  Kit.Page.TurnOn("window.appQr2.init()", data: data);
+
+}
+
+@* When the page is ready, run appQr2 to init JS *@
+<script type="text/javascript" src="@App.Folder.Url/dist/scripts.min.js" @Kit.Page.AssetAttributes(position: "bottom")></script>
+<link rel="stylesheet" href="@App.Folder.Url/dist/styles.min.css">
+
+@functions {
+  public static string ToSlug(string phrase, int maxLength = 45)
+  {
+    // Convert Cyrillic characters to ASCII
+    byte[] bytes = System.Text.Encoding.GetEncoding("Cyrillic").GetBytes(phrase);
+    string str = System.Text.Encoding.ASCII.GetString(bytes);
+
+    str = System.Text.RegularExpressions.Regex.Replace(str.ToLower(), @"[^a-z0-9\s-]", "")
+      .Replace(" ", "-")
+      .Substring(0, Math.Min(str.Length, maxLength)).Trim();
+
+    // Replace multiple hyphens with a single hyphen and trim hyphens from the ends
+    str = System.Text.RegularExpressions.Regex.Replace(str, @"-{2,}", "-")
+      .Trim('-');
+
+    return str;
+  }
+}