@raclettejs/workbench 0.1.33-canary.3 → 0.1.34

package/plugins/pacifico__users/frontend/widgets/UserListWidget.vue

@@ -1,52 +1,70 @@
 <template>
-  <BaseDataTable
-    :items="parsedUsers"
-    :exportable-items="exportableUsers"
-    :loading="usersLoading || tagsLoading"
-    :headers="headers"
-    create-interaction-link-id="userCreateInteractionLink"
-    edit-interaction-link-id="userEditInteractionLink"
-    :data-name="$t('workbench.userList.dataName')"
-    :data-article="$t('workbench.userList.dataArticle')"
-    :delete-validator="(user) => user._id !== $user?._id"
-    @delete="deleteUser"
-    :items-deleted="showDeleted"
-  >
-    <template #toolbar-leading>
-      <v-tooltip
-        :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
-      >
-        <template #activator="{ props: activatorProps }">
-          <v-btn-toggle
-            density="compact"
-            v-bind="activatorProps"
-            v-model="showDeleted"
-            mandatory
-            :color="showDeleted ? 'error' : 'success'"
-          >
-            <v-btn :value="true">
-              <v-icon>mdi-table-eye-off</v-icon>
-            </v-btn>
-            <v-btn :value="false"><v-icon>mdi-table-eye</v-icon></v-btn>
-          </v-btn-toggle>
-        </template>
-      </v-tooltip>
-    </template>
-    <template #prepend-row-actions="{ item }">
-      <v-icon
-        v-if="showDeleted"
-        color="green"
-        class="mr-2"
-        @click.stop.prevent="restore(item._id)"
-        :title="
-          $t('workbench.baseDataTable.restoreDataTitle', {
-            dataName: item.title,
-          })
-        "
-        icon="mdi-delete-restore"
-      />
-    </template>
-  </BaseDataTable>
+  <div class="tw:p-4">
+    <BaseDataTable
+      :items="parsedUsers"
+      :exportable-items="exportableUsers"
+      :loading="usersLoading || tagsLoading"
+      :headers="headers"
+      :row-click-handler="handleRowClick"
+      :data-name="$t('workbench.userList.dataName')"
+      :show-filters="true"
+      :items-deleted="showDeleted"
+    >
+      <template #toolbar-end>
+        <v-btn
+          prepend-icon="mdi-plus"
+          variant="flat"
+          color="success"
+          :text="
+            $t('core.baseDataTable.createDataButton', {
+              dataName: $t('workbench.userList.dataName'),
+            })
+          "
+          @click="goToCreate('userCreateInteractionLink')"
+        />
+      </template>
+      <template #toolbar-actions-menu>
+        <v-list-item
+          :title="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+          prepend-icon="mdi-delete-outline"
+        >
+          <template #append>
+            <v-switch
+              v-model="showDeleted"
+              color="error"
+              density="compact"
+              hide-details
+              inset
+            />
+          </template>
+        </v-list-item>
+      </template>
+      <template #prepend-row-actions="{ item }">
+        <v-icon
+          v-if="showDeleted"
+          color="green"
+          class="mr-2"
+          @click.stop.prevent="restore(item._id)"
+          :title="
+            $t('workbench.baseDataTable.restoreDataTitle', {
+              dataName: item.title,
+            })
+          "
+          icon="mdi-delete-restore"
+        />
+      </template>
+      <template #row-actions="{ item }">
+        <v-btn
+          v-if="item._id !== $user?._id"
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click.stop.prevent="deleteUser(item)"
+        />
+      </template>
+    </BaseDataTable>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -56,6 +74,7 @@ import type { User } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
 import { useI18n } from "vue-i18n"
 import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.vue"
+import { useWorkbenchTableActions } from "@app/composables/useWorkbenchTableActions"
 const showDeleted = ref(false)
 
 const props = defineProps<{
@@ -63,6 +82,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const { goToCreate, goToEditById } = useWorkbenchTableActions()
 
 const headers = computed<{ title: string; key: keyof User }[]>(() => [
   {
@@ -108,15 +128,13 @@ const userTableRows = (relativeUpdatedAt: boolean) => {
     return []
   }
 
-  return Object.values(users.value as { [key: string]: User }).map(
-    (user) => ({
-      ...user,
-      tags: user.tags.map((tag) => tags.value?.[tag]),
-      ...(relativeUpdatedAt
-        ? { updatedAt: formatDistance(new Date(user.updatedAt), new Date()) }
-        : {}),
-    }),
-  )
+  return Object.values(users.value as { [key: string]: User }).map((user) => ({
+    ...user,
+    tags: user.tags.map((tag) => tags.value?.[tag]),
+    ...(relativeUpdatedAt
+      ? { updatedAt: formatDistance(new Date(user.updatedAt), new Date()) }
+      : {}),
+  }))
 }
 
 const parsedUsers = computed(() => userTableRows(true))
@@ -132,6 +150,10 @@ const deleteUser = async (user: User) => {
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }
+
+const handleRowClick = (item: User) =>
+  goToEditById("userEditInteractionLink", item._id)
+
 $socket.on("userCreated", () => execute({ isDeleted: showDeleted.value }))
 watch(
   showDeleted,

package/services/frontend/src/app/components/dynamicForm/DynamicForm.vue

@@ -1,69 +1,97 @@
 <template>
-  <div class="tw:p-6" :class="{ 'tw:max-w-6xl': !fluid }">
-    <div v-if="title" class="tw:mb-6 tw:flex tw:gap-1 tw:items-center">
-      <v-btn
-        v-if="routeBackInteractionLinkId"
-        @click="navigateBack"
-        density="comfortable"
-        icon="mdi-chevron-left"
-        flat
-      />
-      <h1 v-if="title" class="tw:text-2xl tw:font-bold">
-        {{ title }}
-      </h1>
-    </div>
-
-    <v-form @submit.prevent="onFormSubmit">
-      <!-- body -->
-      <div class="tw:grid tw:gap-6">
-        <template v-for="(value, key) in props.data" :key="key">
-          <TextDivider v-if="'divider' in value" :label="value.divider" />
-          <DynamicInput
-            v-else
-            v-model="modelProxy[value.field]"
-            :input-type="value.inputType"
-            :value="value"
-            :disabled="!!disabled"
-            :error-message="getValidationError(value)"
-            @validate="validateField(value)"
-          />
-        </template>
-      </div>
-
-      <!-- button area -->
-      <slot name="button-area-override">
-        <v-btn type="submit" class="tw:hidden!" />
-        <div
-          class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
-          v-if="$slots?.['button-area']"
+  <div :class="wrapperClasses">
+    <v-form
+      class="tw:flex tw:min-h-0 tw:w-full tw:flex-col"
+      @submit.prevent="onFormSubmit"
+    >
+      <div class="tw:flex tw:min-h-0 tw:w-full tw:flex-col">
+        <header
+          v-if="title || routeBackInteractionLinkId"
+          class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:pt-3"
         >
-          <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
-          <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
+          <div class="tw:flex tw:min-w-0 tw:items-center tw:gap-2">
+            <v-btn
+              v-if="routeBackInteractionLinkId"
+              @click="navigateBack"
+              :density="vuetifyDensity"
+              icon="mdi-chevron-left"
+              variant="text"
+              aria-label="Go back"
+            />
+            <h1
+              v-if="title"
+              class="tw:min-w-0 tw:truncate tw:font-semibold tw:tracking-tight tw:text-[color:rgb(var(--v-theme-on-surface))]"
+              :class="titleClasses"
+            >
+              {{ title }}
+            </h1>
+          </div>
+        </header>
+
+        <!-- body -->
+        <div class="tw:grid" :class="bodyClasses">
+          <template v-for="(value, key) in props.data" :key="key">
+            <TextDivider
+              v-if="'divider' in value"
+              :label="value.divider"
+              :density="density"
+            />
+            <DynamicInput
+              v-else
+              v-model="modelProxy[value.field]"
+              :input-type="value.inputType"
+              :value="value"
+              :disabled="!!disabled"
+              :error-message="getValidationError(value)"
+              :density="density"
+              @validate="validateField(value)"
+            />
+          </template>
+        </div>
+
+        <!-- button area -->
+        <slot name="button-area-override">
+          <v-btn type="submit" class="tw:hidden!" />
+          <footer
+            v-if="$slots?.['button-area']"
+            class="tw:flex tw:flex-wrap tw:items-center tw:justify-end"
+            :class="actionClasses"
+          >
+            <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
+            <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
         <v-btn color="secondary" variant="outlined"> Reset Form </v-btn>
         <v-btn color="info" variant="outlined"> Show Form Data </v-btn> -->
-        </div>
-      </slot>
+          </footer>
+        </slot>
+      </div>
     </v-form>
   </div>
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, ref, watch, watchEffect } from "vue"
+import { computed, ref, watch, watchEffect, withDefaults } from "vue"
 import DynamicInput from "./DynamicInput.vue"
 import TextDivider from "./TextDivider.vue"
 import { DynamicFormItem, DynamicFormField } from "./DynamicFormTypes"
 import { useI18n } from "vue-i18n"
 import { useRouteState } from "@raclettejs/core/orchestrator/composables"
 
-const props = defineProps<{
-  title?: string
-  data: DynamicFormItem<T>[]
-  modelValue: T
-  disabled?: Boolean
-  validateOnChange?: boolean
-  fluid?: boolean
-  routeBackInteractionLinkId?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    data: DynamicFormItem<T>[]
+    modelValue: T
+    disabled?: Boolean
+    validateOnChange?: boolean
+    /** When false, constrains width (previous default). Default true fills the layout. */
+    fluid?: boolean
+    routeBackInteractionLinkId?: string
+    density?: "compact" | "comfortable" | "spacious"
+  }>(),
+  {
+    fluid: true,
+  },
+)
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: T): void
@@ -75,6 +103,66 @@ const { t } = useI18n()
 const { triggerInteractionLinkById } = useRouteState()
 
 const validationErrors = ref<Record<string, string>>({})
+const density = computed(() => props.density ?? "comfortable")
+
+const vuetifyDensity = computed(() => {
+  if (density.value === "spacious") {
+    return "default"
+  }
+  return density.value
+})
+
+const horizontalInsetClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:px-3 sm:tw:px-4"
+  }
+  if (density.value === "spacious") {
+    return "tw:px-5 tw:mdpx-6"
+  }
+  return "tw:px-4 tw:mdpx-5"
+})
+
+const wrapperClasses = computed(() => [
+  "tw:box-border tw:flex tw:min-h-0 tw:w-full tw:flex-col",
+  horizontalInsetClasses.value,
+  !props.fluid ? "tw:mx-auto tw:max-w-6xl" : "",
+])
+
+const titleClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-lg"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:text-2xl"
+  }
+
+  return "tw:text-xl"
+})
+
+const bodyClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-0"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:gap-4"
+  }
+
+  return "tw:gap-2"
+})
+
+const actionClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-2 tw:py-3"
+  }
+
+  if (density.value === "spacious") {
+    return "tw:gap-4 tw:py-5"
+  }
+
+  return "tw:gap-3 tw:py-4"
+})
 
 const isValid = computed(() => Object.keys(validationErrors.value).length === 0)
 

package/services/frontend/src/app/components/dynamicForm/DynamicInput.vue

@@ -1,11 +1,33 @@
 <template>
-  <div class="tw:grid tw:grid-cols-12 tw:gap-6">
-    <label class="tw:col-span-5" :for="inputId" v-if="hasTitleOrDescription">
-      <div class="tw:text-sm tw:font-bold">
+  <div
+    class="tw:grid tw:grid-cols-1 tw:rounded-md tw:p-2 tw:grid-cols-12"
+    :class="rowGapClasses"
+  >
+    <label
+      class="tw:col-span-5"
+      :class="labelSpacingClasses"
+      :for="inputId"
+      v-if="hasTitleOrDescription"
+    >
+      <div
+        class="tw:font-semibold tw:leading-5 tw:text-[color:rgb(var(--v-theme-on-surface))]"
+        :class="labelTextClasses"
+      >
         {{ value.title }}
-        <span v-if="value.validation?.required" class="tw:text-red-500">*</span>
+        <span
+          v-if="value.validation?.required"
+          class="tw:ml-0.5 tw:text-[color:rgb(var(--v-theme-error))]"
+          aria-hidden="true"
+        >
+          *
+        </span>
       </div>
-      <div class="tw:text-xs">
+      <div
+        v-if="value.description"
+        :id="descriptionHtmlId ?? undefined"
+        class="tw:mt-1 tw:max-w-prose tw:leading-snug tw:text-[color:rgb(var(--v-theme-on-surface))]"
+        :class="descriptionTextClasses"
+      >
         {{ value.description }}
       </div>
     </label>
@@ -66,6 +88,7 @@
         <RecordInput
           v-model="recordModel"
           :input-id="inputId"
+          v-bind="additionalInputBindings"
           @blur="$emit('validate')"
         />
       </template>
@@ -87,6 +110,7 @@
           v-model="objectArrayModel"
           :fields="value.fields"
           :disabled="!!disabled"
+          :density="density"
           @validate="$emit('validate')"
         />
       </template>
@@ -239,6 +263,7 @@ const props = defineProps<{
   disabled?: boolean
   errorMessage?: string
   hideDetails?: boolean
+  density?: "compact" | "comfortable" | "spacious"
 }>()
 
 defineEmits<{
@@ -262,6 +287,69 @@ const id = useId()
 const attrs = useAttrs()
 
 const inputId = computed(() => `dynamic-input-${id}`)
+const descriptionHtmlId = computed(() =>
+  props.value.description ? `${inputId.value}-description` : undefined,
+)
+
+const density = computed(() => props.density ?? "comfortable")
+
+const vuetifyDensity = computed(() => {
+  if (density.value === "spacious") {
+    return "default"
+  }
+  return density.value
+})
+
+const rowGapClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:gap-3 tw:md:gap-4"
+  }
+  if (density.value === "spacious") {
+    return "tw:gap-6"
+  }
+  return "tw:gap-4 tw:md:gap-5"
+})
+
+const labelSpacingClasses = computed(() => {
+  if (density.value === "spacious") {
+    return "tw:pt-1"
+  }
+  return ""
+})
+
+const labelTextClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-sm"
+  }
+  if (density.value === "spacious") {
+    return "tw:text-base"
+  }
+  return "tw:text-sm"
+})
+
+const descriptionTextClasses = computed(() => {
+  if (density.value === "compact") {
+    return "tw:text-xs"
+  }
+  return "tw:text-sm"
+})
+
+const accessibilityFieldBindings = computed(() => {
+  const o: Record<string, unknown> = {
+    color: "primary",
+  }
+  const descId = descriptionHtmlId.value
+  if (descId) {
+    o["aria-describedby"] = descId
+  }
+  if (props.value.validation?.required) {
+    o["aria-required"] = true
+  }
+  if (props.errorMessage) {
+    o["aria-invalid"] = true
+  }
+  return o
+})
 
 const createTypedModel = <T extends DynamicModelType>(
   types: DynamicInputType[],
@@ -333,8 +421,10 @@ const additionalInputBindings = computed(() => {
   } = props.value
 
   const result: Record<string, unknown> = {
+    ...accessibilityFieldBindings.value,
     prefix,
     suffix,
+    density: vuetifyDensity.value,
     prependIcon: prependIcon ? `mdi-${prependIcon}` : undefined,
     prependInnerIcon: prependInnerIcon ? `mdi-${prependInnerIcon}` : undefined,
     appendIcon: appendIcon ? `mdi-${appendIcon}` : undefined,