feat: schedule (#430)

assets/css/components/field.css

@@ -129,7 +129,7 @@
 /* Text */
 
 .safira-text-input {
-  @apply block w-full rounded-md text-dark border border-lightShade placeholder:text-darkMuted focus:outline-2 focus:border-lightShade ring-0 focus:outline-dark focus:outline-offset-2 dark:outline-darkShade dark:bg-dark dark:text-light dark:placeholder-lightMuted dark:focus:border-darkShade dark:border-darkShade focus:ring-0 dark:focus:outline-light;
+  @apply block w-full rounded-md text-dark border border-lightShade placeholder:text-darkMuted focus:outline-2 focus:border-lightShade ring-0 focus:outline-dark focus:outline-offset-2 dark:outline-darkShade dark:bg-dark dark:text-light dark:placeholder-lightMuted dark:focus:border-darkShade dark:border-darkShade focus:ring-0 dark:focus:outline-light dark:[color-scheme:dark];
 }
 
 /* Code */
@@ -196,3 +196,29 @@
 .safira-form-help-text {
   @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
 }
+
+/* Multiselect */
+
+.safira-multiselect-dropdown {
+  @apply absolute z-50 border border-t-0 border-lightShade dark:border-darkShade mt-1 rounded-b-md pb-1 bg-light dark:bg-dark;
+}
+
+.safira-multiselect-dropdown-option {
+  @apply mx-1 my-1 px-3 py-1 hover:bg-lightShade/40 dark:hover:bg-darkShade cursor-pointer rounded-md text-sm;
+}
+
+.safira-multiselect-dropdown-option-selected {
+  @apply opacity-60;
+}
+
+.safira-multiselect-dropdown-tags-container {
+  @apply absolute flex mt-12 gap-1 flex-wrap;
+}
+
+.safira-multiselect-dropdown-tag {
+  @apply text-xs flex items-center border border-lightShade dark:border-darkShade pl-2 rounded-md z-30;
+}
+
+.safira-multiselect-dropdown-tag-remove {
+  @apply cursor-pointer dark:opacity-80 scale-75;
+}

assets/js/app.js

@@ -21,13 +21,15 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import live_select from "live_select"
 import { QrScanner, Wheel, Confetti, Sorting } from "./hooks";
 
 let Hooks = {
   QrScanner: QrScanner,
   Wheel: Wheel,
   Confetti: Confetti,
-  Sorting: Sorting
+  Sorting: Sorting,
+  ...live_select
 };
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

lib/safira/accounts/roles/permissions.ex

@@ -14,6 +14,7 @@ defmodule Safira.Accounts.Roles.Permissions do
       "badges" => ["show", "edit", "delete", "give", "revoke", "give_without_restrictions"],
       "minigames" => ["show", "edit", "simulate"],
       "spotlights" => ["edit"],
+      "schedule" => ["edit"],
       "statistics" => ["show"],
       "mailer" => ["send"]
     }