feat: shift system

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

collectivo/app/i18n.config.ts

@@ -1,4 +1,5 @@
 export default defineI18nConfig(() => ({
   missingWarn: false,
-  silentTranslationWarn: true,
+  translationWarn: false,
+  fallbackWarn: false,
 }));

collectivo/app/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
     "@collectivo/collectivo",
     "@collectivo/payments",
     "@collectivo/memberships",
+    "@collectivo/shifts",
   ],
   i18n: {
     lazy: true,

collectivo/app/package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "@collectivo/collectivo": "workspace:*",
     "@collectivo/memberships": "workspace:*",
-    "@collectivo/payments": "workspace:*"
+    "@collectivo/payments": "workspace:*",
+    "@collectivo/shifts": "workspace:*"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.1",

collectivo/collectivo/app.config.ts

@@ -115,41 +115,41 @@ export default defineAppConfig({
         },
       },
     },
-    modal: {
-      wrapper: "relative z-50",
-      inner: "fixed inset-0 overflow-y-auto",
-      container:
-        "flex min-h-full items-end sm:items-center justify-center text-center",
-      padding: "p-4 sm:p-0",
-      margin: "sm:my-8",
-      base: "relative text-left rtl:text-right overflow-hidden w-full flex flex-col",
-      overlay: {
-        base: "fixed inset-0 transition-opacity",
-        background: "bg-primary/20 dark:bg-gray-800/75",
-        transition: {
-          enter: "ease-out duration-300",
-          enterFrom: "opacity-0",
-          enterTo: "opacity-100",
-          leave: "ease-in duration-200",
-          leaveFrom: "opacity-100",
-          leaveTo: "opacity-0",
-        },
-      },
-      background: "bg-white dark:bg-gray-900",
-      ring: "",
-      rounded: "border border-purple-500 rounded-xl",
-      shadow: "",
-      width: "sm:max-w-[520px]",
-      height: "",
-      transition: {
-        enter: "ease-out duration-300",
-        enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-        enterTo: "opacity-100 translate-y-0 sm:scale-100",
-        leave: "ease-in duration-200",
-        leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
-        leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-      },
-    },
+    // modal: {
+    //   wrapper: "relative z-50",
+    //   inner: "fixed inset-0 overflow-y-auto",
+    //   container:
+    //     "flex min-h-full items-end sm:items-center justify-center text-center",
+    //   padding: "p-4 sm:p-0",
+    //   margin: "sm:my-8",
+    //   base: "relative text-left rtl:text-right overflow-hidden w-full flex flex-col",
+    //   overlay: {
+    //     base: "fixed inset-0 transition-opacity",
+    //     background: "bg-primary/20 dark:bg-gray-800/75",
+    //     transition: {
+    //       enter: "ease-out duration-300",
+    //       enterFrom: "opacity-0",
+    //       enterTo: "opacity-100",
+    //       leave: "ease-in duration-200",
+    //       leaveFrom: "opacity-100",
+    //       leaveTo: "opacity-0",
+    //     },
+    //   },
+    //   background: "bg-white dark:bg-gray-900",
+    //   ring: "",
+    //   rounded: "border border-purple-500 rounded-xl",
+    //   shadow: "",
+    //   width: "sm:max-w-[520px]",
+    //   height: "",
+    //   transition: {
+    //     enter: "ease-out duration-300",
+    //     enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+    //     enterTo: "opacity-100 translate-y-0 sm:scale-100",
+    //     leave: "ease-in duration-200",
+    //     leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+    //     leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+    //   },
+    // },
     pagination: {
       wrapper: "flex items-center gap-1 lg:gap-2",
       base: "h-8 w-8 lg:h-12 lg:w-12",

collectivo/collectivo/composables/page.ts

@@ -1,9 +1,19 @@
 export const useCollectivoTitle = () =>
   useState<string>("collectivoTitle", () => "");
 
-export const setCollectivoTitle = (title: string) => {
-  useCollectivoTitle().value = title;
+export const useCollectivoBackLink = () =>
+  useState<string | undefined>("collectivoBackLink", () => "");
+
+interface CollectivoTitleOptions {
+  backLink?: string;
+}
 
+export const setCollectivoTitle = (
+  title: string,
+  options?: CollectivoTitleOptions,
+) => {
+  useCollectivoTitle().value = title;
+  useCollectivoBackLink().value = options?.backLink;
   useHead({
     title: title + " - " + useAppConfig().collectivo.projectName,
   });

collectivo/collectivo/composables/toasts.ts

@@ -0,0 +1,48 @@
+type types = "error" | "success" | "warn" | "info";
+type colors = "red" | "green" | "yellow" | "blue";
+
+const defaultTitles = {
+  error: "Error",
+  success: "Success",
+  warn: "Warning",
+  info: "Info",
+};
+
+const defaultDescriptions = {
+  error: "An error occurred",
+  success: "Operation successful",
+  warn: "",
+  info: "",
+};
+
+const defaultColors: { [index: string]: colors } = {
+  error: "red",
+  success: "green",
+  warn: "yellow",
+  info: "blue",
+};
+
+const defaultIcons = {
+  error: "i-heroicons-exclamation-triangle",
+  success: "i-heroicons-check",
+  warn: "i-heroicons-exclamation-triangle",
+  info: "i-heroicons-information-circle",
+};
+
+export function showCollectivoToast(options: {
+  type?: types;
+  title?: string;
+  description?: any;
+  icon?: string;
+  color?: colors;
+}) {
+  const toast = useToast();
+  const type = options.type ?? "info";
+
+  toast.add({
+    title: options.title ?? defaultTitles[type],
+    description: options.description ?? defaultDescriptions[type],
+    icon: options.icon ?? defaultIcons[type],
+    color: options.color ?? defaultColors[type],
+  });
+}

collectivo/collectivo/layouts/default.vue

@@ -3,10 +3,12 @@ import Sidebar from "./components/Sidebar.vue";
 import MobileHeader from "./components/MobileHeader.vue";
 import MobileMenu from "./components/MobileMenu.vue";
 import ProfileMenu from "./components/ProfileMenu.vue";
+import { useCollectivoBackLink } from "~/composables/page";
 
 const { t } = useI18n();
 const config = useAppConfig();
 const pageTitle = useCollectivoTitle();
+const backLink = useCollectivoBackLink();
 const sidebarWidthMd = String(config.collectivo.sidebarWidth + 65) + "px";
 const sidebarWidthLg = String(config.collectivo.sidebarWidth + 90) + "px";
 </script>
@@ -67,7 +69,11 @@ const sidebarWidthLg = String(config.collectivo.sidebarWidth + 90) + "px";
     <div class="main">
       <div class="main__top">
         <div class="main__top__left">
-          <h1>
+          <h1 class="flex flex-wrap align-middle items-center gap-3">
+            <NuxtLink v-if="backLink" :to="backLink" class="flex items-center">
+              <UIcon name="i-heroicons-arrow-left-circle-16-solid" />
+            </NuxtLink>
+
             {{ t(pageTitle) }}
           </h1>
         </div>

collectivo/collectivo/nuxt.config.ts

@@ -18,6 +18,8 @@ export default defineNuxtConfig({
     public: {
       debug: false,
       collectivoUrl: process.env.COLLECTIVO_URL || "http://localhost:3000",
+      collectivoContactEmail:
+        process.env.COLLECTIVO_CONTACT_EMAIL || "[email protected]",
       authService: process.env.COLLECTIVO_AUTH_SERVICE || "keycloak",
       keycloakUrl: process.env.KEYCLOAK_URL || "http://keycloak:8080",
       keycloakRealm: process.env.KEYCLOAK_REALM || "collectivo",

collectivo/collectivo/server/utils/directusFields.ts

@@ -2,6 +2,12 @@ import type { DirectusField, NestedPartial } from "@directus/sdk";
 
 type PartialField = NestedPartial<DirectusField<any>>;
 
+export enum ItemStatus {
+  ARCHIVED = "archived",
+  DRAFT = "draft",
+  PUBLISHED = "published",
+}
+
 export function directusStatusField(
   collection: string,
   fieldName: string,
@@ -16,9 +22,9 @@ export function directusStatusField(
       width: "full",
       options: {
         choices: [
-          { text: "$t:published", value: "published" },
-          { text: "$t:draft", value: "draft" },
-          { text: "$t:archived", value: "archived" },
+          { text: "$t:published", value: ItemStatus.PUBLISHED },
+          { text: "$t:draft", value: ItemStatus.DRAFT },
+          { text: "$t:archived", value: ItemStatus.ARCHIVED },
         ],
       },
       translations: [
@@ -33,27 +39,27 @@ export function directusStatusField(
         choices: [
           {
             text: "$t:published",
-            value: "published",
+            value: ItemStatus.PUBLISHED,
             foreground: "#FFFFFF",
             background: "var(--primary)",
           },
           {
             text: "$t:draft",
-            value: "draft",
+            value: ItemStatus.DRAFT,
             foreground: "#18222F",
             background: "#D3DAE4",
           },
           {
             text: "$t:archived",
-            value: "archived",
+            value: ItemStatus.ARCHIVED,
             foreground: "#FFFFFF",
             background: "var(--warning)",
           },
         ],
       },
       ...field?.meta,
     },
-    schema: { default_value: "draft", is_nullable: false },
+    schema: { default_value: ItemStatus.DRAFT, is_nullable: false },
   };
 }
 

collectivo/extensions/memberships/index.d.ts

@@ -9,7 +9,7 @@ declare global {
     memberships: MembershipsMembership[] | number[];
   }
 
-  interface MembershipsMembership {
+  export interface MembershipsMembership {
     id: number;
     name: string;
     memberships_user: DirectusUser | number;
@@ -19,4 +19,9 @@ declare global {
   }
 }
 
+// Types for input of app.config.ts
+declare module "nuxt/schema" {
+  interface AppConfigInput {}
+}
+
 export {};

collectivo/extensions/memberships/server/examples/examples.ts

@@ -1,4 +1,5 @@
 import { createItem, deleteItems, readUsers } from "@directus/sdk";
+import { MembershipStatus } from "@collectivo/memberships/server/schemas/memberships_01";
 
 export default async function examples() {
   console.info("Creating example data for memberships");
@@ -12,11 +13,11 @@ export default async function examples() {
   console.info("Creating memberships");
 
   const users = [
-    ["Alice", "applied"],
-    ["Bob", "approved"],
-    ["Charlie", "approved"],
-    ["Dave", "in-cancellation"],
-    ["User", "approved"],
+    ["Alice", MembershipStatus.APPLIED, null],
+    ["Bob", MembershipStatus.APPROVED, new Date(2023, 1, 5)],
+    ["Charlie", MembershipStatus.APPROVED, new Date(2023, 6, 12)],
+    ["Dave", MembershipStatus.IN_CANCELLATION, new Date(2024, 1, 2)],
+    ["User", MembershipStatus.APPROVED, new Date(2024, 3, 6)],
   ];
 
   for (const user of users) {
@@ -26,12 +27,12 @@ export default async function examples() {
     )[0];
 
     // Create membership
-
     await directus.request(
       createItem("memberships", {
         memberships_user: user_id,
         memberships_type: "normal",
         memberships_status: user[1],
+        memberships_date_approved: user[2],
       }),
     );
   }