Feature: Mobile - Mark dirty fields in forms

app/frontend/apps/mobile/entities/organization/composables/useOrganizationEdit.ts

@@ -18,28 +18,31 @@ export const useOrganizationEdit = () => {
     EnumObjectManagerObjects.Organization,
   )
 
-  const schema = defineFormSchema([
-    {
-      name: 'name',
-      required: true,
-      screen: 'edit',
-      object: EnumObjectManagerObjects.Organization,
-    },
-    {
-      screen: 'edit',
-      object: EnumObjectManagerObjects.Organization,
-    },
-    {
-      name: 'active',
-      required: true,
-      screen: 'edit',
-      object: EnumObjectManagerObjects.Organization,
-    },
-    {
-      type: 'file',
-      name: 'attachments',
-    },
-  ])
+  const schema = defineFormSchema(
+    [
+      {
+        name: 'name',
+        required: true,
+        screen: 'edit',
+        object: EnumObjectManagerObjects.Organization,
+      },
+      {
+        screen: 'edit',
+        object: EnumObjectManagerObjects.Organization,
+      },
+      {
+        name: 'active',
+        required: true,
+        screen: 'edit',
+        object: EnumObjectManagerObjects.Organization,
+      },
+      {
+        type: 'file',
+        name: 'attachments',
+      },
+    ],
+    { showDirtyMark: true },
+  )
 
   const openEditOrganizationDialog = async (
     organization: ConfidentTake<OrganizationQuery, 'organization'>,

app/frontend/apps/mobile/entities/user/composables/useUserEdit.ts

@@ -13,18 +13,21 @@ import type { ConfidentTake } from '@shared/types/utils'
 export const useUserEdit = () => {
   const dialog = useDialogObjectForm('user-edit', EnumObjectManagerObjects.User)
 
-  const schema = defineFormSchema([
-    {
-      screen: 'edit',
-      object: EnumObjectManagerObjects.User,
-    },
-    {
-      name: 'active',
-      required: true,
-      screen: 'edit',
-      object: EnumObjectManagerObjects.User,
-    },
-  ])
+  const schema = defineFormSchema(
+    [
+      {
+        screen: 'edit',
+        object: EnumObjectManagerObjects.User,
+      },
+      {
+        name: 'active',
+        required: true,
+        screen: 'edit',
+        object: EnumObjectManagerObjects.User,
+      },
+    ],
+    { showDirtyMark: true },
+  )
 
   const openEditUserDialog = async (user: ConfidentTake<UserQuery, 'user'>) => {
     dialog.openDialog({

app/frontend/apps/mobile/form/defineFormSchema.ts

@@ -2,9 +2,14 @@
 
 import type { FormSchemaNode } from '@shared/components/Form'
 
+type FormSchemaOptions = {
+  showDirtyMark: boolean
+}
+
 // TODO: do we need this?
 export const defineFormSchema = (
   schema: FormSchemaNode[],
+  options?: FormSchemaOptions,
 ): FormSchemaNode[] => {
   const needGroup = schema.every(
     (node) => !(typeof node !== 'string' && 'isLayout' in node),
@@ -15,6 +20,7 @@ export const defineFormSchema = (
     {
       isLayout: true,
       component: 'FormGroup',
+      props: options,
       children: schema,
     },
   ]

app/frontend/apps/mobile/form/theme/global/addAbsoluteFloatingLabel.ts

@@ -17,7 +17,14 @@ export const addAbsoluteFloatingLabel = (classes: Classes = {}) => {
   } = classes
 
   return {
-    outer: `${outer} absolute-floating-input formkit-invalid:bg-red-dark formkit-errors:bg-red-dark flex-col flex px-2`,
+    outer: clean(
+      `${outer}
+      absolute-floating-input
+      relative flex-col flex px-2
+      formkit-invalid:bg-red-dark
+      formkit-errors:bg-red-dark
+    `,
+    ),
     wrapper: `${wrapper} relative flex-1`,
     inner: 'flex ltr:pr-2 rtl:pl-2',
     block: 'flex',

app/frontend/apps/mobile/form/theme/global/addBlockFloatingLabel.ts

@@ -18,7 +18,13 @@ export const addBlockFloatingLabel = (classes: Classes = {}): Classes => {
   } = classes
 
   return {
-    outer: `${outer} floating-input flex flex-col formkit-invalid:bg-red-dark formkit-errors:bg-red-dark focus-within:bg-blue-highlight px-2`,
+    outer: clean(`
+      ${outer}
+      floating-input relative flex flex-col px-2
+      formkit-invalid:bg-red-dark
+      formkit-errors:bg-red-dark
+      focus-within:bg-blue-highlight
+    `),
     wrapper: `${wrapper} relative py-1 flex-1 flex self-start justify-center flex-col`,
     inner: 'flex ltr:pr-2 rtl:pl-2 pb-1 relative',
     block: 'flex min-h-[3.5rem] cursor-pointer formkit-disabled:cursor-default',

app/frontend/apps/mobile/form/theme/global/addFloatingTextareaLabel.ts

@@ -19,7 +19,12 @@ export const addFloatingTextareaLabel = (classes: Classes = {}) => {
   } = classes
 
   return {
-    outer: `${outer} formkit-invalid:bg-red-dark formkit-errors:bg-red-dark floating-textarea px-2`,
+    outer: clean(`
+      ${outer}
+      floating-textarea relative px-2
+      formkit-invalid:bg-red-dark
+      formkit-errors:bg-red-dark
+    `),
     wrapper: `${wrapper} relative`,
     inner,
     input: clean(`

app/frontend/apps/mobile/form/theme/global/getCoreClasses.ts

@@ -71,7 +71,7 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
       ...classes.toggle,
       outer: `${
         classes.toggle?.outer || ''
-      } px-2 formkit-invalid:bg-red-dark formkit-errors:bg-red-dark`,
+      } relative px-2 formkit-invalid:bg-red-dark formkit-errors:bg-red-dark`,
       wrapper: `${classes.toggle?.wrapper || ''} inline-flex w-full h-14 px-2`,
       label: `${
         classes.toggle?.label || ''

app/frontend/apps/mobile/pages/playground/views/PlaygroundOverview.vue

@@ -292,7 +292,7 @@ query autocompleteSearchUser($input: AutocompleteSearchInput!) {
     },
   },
 ]
-const linkSchemas = defineFormSchema(linkSchemaRaw)
+const linkSchemas = defineFormSchema(linkSchemaRaw, { showDirtyMark: true })
 
 const schema = defineFormSchema([
   {

app/frontend/apps/mobile/pages/ticket/views/TicketDetailView.vue

@@ -108,6 +108,9 @@ const ticketEditSchema = [
   {
     isLayout: true,
     component: 'FormGroup',
+    props: {
+      showDirtyMark: true,
+    },
     children: [
       {
         name: 'title',