"working-hours" module: add metadata field, update overwork math

src/client/utils/portal.tsx

@@ -2,7 +2,9 @@ import * as React from 'react'
 import MC from '#client/components/__import-components'
 import { ComponentRef } from '#shared/types'
 
-export const getComponentInstance = (cr: ComponentRef): React.FC<any> | null => {
+export const getComponentInstance = (
+ cr: ComponentRef
+): React.FC<any> | null => {
  const moduleId = cr[0] as keyof typeof MC
  const moduleComponents = MC[moduleId]
  if (!moduleComponents) return null
@@ -26,4 +28,3 @@ export const renderComponent =
  }
  return <Component key={`${cr[0]}_${cr[1]}`} {...props} />
  }
-

src/modules/_template/manifest.json

@@ -4,6 +4,7 @@
  "dependencies": ["<DEPENDENCY_MODULE_ID>"],
  "requiredIntegrations": [],
  "recommendedIntegrations": [],
+ "availableCronJobs": [],
  "models": [],
  "clientRouter": {
  "public": {},

src/modules/working-hours/client/components/AdminWorkingHours.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react'
 import dayjs, { Dayjs } from 'dayjs'
-import config from '#client/config'
 import {
  Button,
  H1,
- Icons,
  Placeholder,
  RoundButton,
  Select,
@@ -222,7 +220,7 @@ export const AdminWorkingHours: React.FC = () => {
  !!x.overworkLevel &&
  !!x.overworkTime && (
  <Tag size="small" color={x.overworkLevel}>
- Overwork {getDurationString(x.overworkTime)}
+ Additional {getDurationString(x.overworkTime)}
  </Tag>
  )}
  </div>

src/modules/working-hours/client/components/DefaultEntriesModal.tsx

@@ -81,7 +81,7 @@ export const DefaultEntriesModal: React.FC<DefaultEntriesModalProps> = ({
  }, [newEntryTime])
 
  return (
- <Modal title="Your default working hours" onClose={onClose}>
+ <Modal title="Your default working schedule" onClose={onClose}>
  <div className="flex flex-col gap-y-6">
  <div>
  <P>Specify your usual working schedule and use it for prefilling.</P>
@@ -136,11 +136,7 @@ export const DefaultEntriesModal: React.FC<DefaultEntriesModalProps> = ({
  </div>
  )}
  {!showNewEntryInput ? (
- <FButton
- kind="secondary"
- onClick={onAddEntry}
- className="w-full mb-2"
- >
+ <FButton kind="primary" onClick={onAddEntry} className="w-full mb-2">
  {sortedEntries.length ? 'Add one more entry' : 'Add entry'}
  </FButton>
  ) : (

src/modules/working-hours/client/components/EntryRow.tsx

@@ -2,28 +2,15 @@ import * as React from 'react'
 import {
  FButton,
  Icons,
- Modal,
- P,
  RoundButton,
  TimeRangePicker,
- showNotification,
 } from '#client/components/ui'
-import * as fp from '#shared/utils/fp'
-import { cn } from '#client/utils'
 import {
  DefaultWorkingHoursEntry,
  DefaultWorkingHoursEntryUpdateRequest,
- WorkingHoursConfig,
  WorkingHoursEntry,
  WorkingHoursEntryUpdateRequest,
 } from '#shared/types'
-import {
- useDefaultEntries,
- useCreateDefaultEntry,
- useDeleteDefaultEntry,
- useUpdateDefaultEntry,
-} from '../queries'
-import { formatTimeString } from '../helpers'
 
 type EntryRowProps = {
  entry: WorkingHoursEntry | DefaultWorkingHoursEntry
@@ -97,133 +84,3 @@ export const EntryRow: React.FC<EntryRowProps> = ({
  </div>
  )
 }
-
-type DefaultEntriesModalProps = {
- onClose: () => void
- moduleConfig: WorkingHoursConfig
- refetchModuleConfig: () => void
-}
-const DefaultEntriesModal: React.FC<DefaultEntriesModalProps> = ({
- onClose,
- moduleConfig,
- refetchModuleConfig,
-}) => {
- const newEntryRef = React.useRef<HTMLDivElement>(null)
- const [showNewEntryInput, setShowNewEntryInput] = React.useState(false)
- const [newEntryTime, setNewEntryTime] = React.useState<[string, string]>([
- '',
- '',
- ])
-
- const { data: entries = [], refetch: refetchDefaultEntries } =
- useDefaultEntries()
- const refetch = () => {
- refetchDefaultEntries()
- refetchModuleConfig()
- showNotification('Your default working hours have changed', 'success')
- }
- const { mutate: createDefaultEntry } = useCreateDefaultEntry(refetch)
- const { mutate: updateDefaultEntry } = useUpdateDefaultEntry(refetch)
- const { mutate: deleteDefaultEntry } = useDeleteDefaultEntry(refetch)
-
- const sortedEntries = React.useMemo(() => {
- return entries.sort(
- fp.sortWith((x) => {
- const [h, m] = x.startTime.split(':').map(Number)
- return h * 60 + m
- })
- )
- }, [entries])
-
- const onAddEntry = React.useCallback(() => {
- setShowNewEntryInput(!showNewEntryInput)
- if (!showNewEntryInput) {
- setTimeout(() => {
- const firstTimeInput: HTMLInputElement =
- newEntryRef.current?.querySelector('input[type="time"]')!
- if (firstTimeInput) firstTimeInput.focus()
- }, 100)
- }
- }, [showNewEntryInput])
- const onChangeNewEntryTime = React.useCallback((from: string, to: string) => {
- setNewEntryTime([from, to])
- }, [])
- const onSaveNewEntry = React.useCallback(() => {
- createDefaultEntry({
- startTime: newEntryTime[0],
- endTime: newEntryTime[1],
- })
- setShowNewEntryInput(false)
- setNewEntryTime(['', ''])
- }, [newEntryTime])
-
- return (
- <Modal title="Your default working hours" onClose={onClose}>
- <div className="flex flex-col gap-y-6">
- <div>
- <P>Specify your usual working schedule and use it for prefilling.</P>
- {!entries.length && (
- <P className="text-text-tertiary">
- If your default working hours are not set, the following will be
- used:{' '}
- {moduleConfig.defaultEntries
- .map(
- (x) => `${formatTimeString(x[0])} - ${formatTimeString(x[1])}`
- )
- .join(', ')}
- .
- </P>
- )}
- </div>
- {(!!sortedEntries.length || showNewEntryInput) && (
- <div className="flex flex-col gap-y-1">
- {sortedEntries.map((x) => (
- <EntryRow
- key={x.id}
- entry={x}
- updateEntry={updateDefaultEntry}
- deleteEntry={deleteDefaultEntry}
- editable={true}
- />
- ))}
- {showNewEntryInput && (
- <div
- ref={newEntryRef}
- className={cn('flex gap-x-1 items-center')}
- >
- <Icons.EntryArrow
- fillClassName="fill-fill-18"
- className="-mt-1 mr-1 hidden sm:block"
- />
- <TimeRangePicker
- from={newEntryTime[0]}
- to={newEntryTime[1]}
- inputClassName="px-0 py-[8px] w-28 text-center no-input-buttons"
- onChange={onChangeNewEntryTime}
- />
- <FButton kind="primary" size="small" onClick={onSaveNewEntry}>
- Save
- </FButton>
- <RoundButton
- onClick={() => setShowNewEntryInput(false)}
- icon="Cross"
- />
- </div>
- )}
- </div>
- )}
- {!showNewEntryInput ? (
- <FButton
- kind="secondary"
- onClick={onAddEntry}
- className="w-full mb-2"
- >
- {sortedEntries.length ? 'Add one more entry' : 'Add entry'}
- </FButton>
- ) : (
- <div />
- )}
- </div>
- </Modal>
- )
-}

src/modules/working-hours/client/components/WorkingHoursEditor.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react'
+import dayjs from 'dayjs'
 import {
  ComponentWrapper,
  FButton,
+ HR,
  HeaderWrapper,
  Icons,
  LoaderSpinner,
 } from '#client/components/ui'
+import { renderMarkdown } from '#client/utils/markdown'
 import { WorkingHoursEditorWeek } from './WorkingHoursEditorWeek'
 import { WorkingHoursEditorMonth } from './WorkingHoursEditorMonth'
 import { DefaultEntriesModal } from './DefaultEntriesModal'
@@ -16,7 +19,16 @@ import { useConfig } from '../queries'
 import { formatTimeString } from '../helpers'
 
 export const WorkingHoursEditor: React.FC = () => {
- const [viewMode, setViewMode] = React.useState<'week' | 'month'>('week')
+ const [viewMode, setViewMode] = React.useState<'week' | 'month'>(
+ (() => {
+ const url = new URL(window.location.href)
+ const view = url.searchParams.get('view')
+ if (view === 'month') {
+ return 'month'
+ }
+ return 'week'
+ })()
+ )
  const [showDefaultEntriesModal, setShowDefaultEntriesModal] =
  React.useState(false)
 
@@ -34,20 +46,43 @@ export const WorkingHoursEditor: React.FC = () => {
 
  React.useEffect(() => {
  const url = new URL(window.location.href)
- if (url.searchParams.get('view') === 'month') {
- setViewMode('month')
+ const view = url.searchParams.get('view')
+ if (view !== viewMode) {
+ url.searchParams.set('view', viewMode)
+ window.history.replaceState({}, '', url.toString())
  }
- }, [])
+ }, [viewMode])
 
  return !!moduleConfig ? (
  <div className="flex flex-col gap-y-2">
  {/* header */}
  <ComponentWrapper>
  <HeaderWrapper title="Working Hours">
+ {moduleConfig.policyText && (
+ <>
+ <div
+ className="phq_markdown-content "
+ dangerouslySetInnerHTML={{
+ __html: renderMarkdown(moduleConfig.policyText),
+ }}
+ />
+ <HR className="my-6" />
+ </>
+ )}
+
+ <div className="my-4 text-text-tertiary">
+ Your agreed working week: {moduleConfig.weeklyWorkingHours}h (
+ {moduleConfig.workingDays
+ .map((x) => dayjs().day(x).format('dddd'))
+ .join(', ')}
+ )
+ </div>
+
+ {/* {moduleConfig.policyText && <></>} */}
  <div>
  {moduleConfig.personalDefaultEntries.length ? (
  <div className="-my-2">
- Your default working hours:{' '}
+ Your schedule:{' '}
  {moduleConfig.personalDefaultEntries
  .sort(
  fp.sortWith((x) => {
@@ -76,7 +111,7 @@ export const WorkingHoursEditor: React.FC = () => {
  onClick={() => setShowDefaultEntriesModal(true)}
  className="w-full"
  >
- Configure your default working hours
+ Configure your default working schedule
  </FButton>
  </div>
  )}

src/modules/working-hours/client/components/WorkingHoursEditorMonth.tsx

@@ -308,7 +308,7 @@ export const WorkingHoursEditorMonth: React.FC<{
  {getDurationString(x.workingHours)}
  {!!x.overworkLevel && !!x.overworkTime && (
  <Tag size="small" color={x.overworkLevel}>
- Overwork {getDurationString(x.overworkTime)}
+ Additional {getDurationString(x.overworkTime)}
  </Tag>
  )}
  </div>
@@ -402,14 +402,14 @@ export const WorkingHoursEditorMonth: React.FC<{
  </div>
  </div>
  <div className="rounded-tiny bg-bg-primary flex flex-col gap-y-4 mb-4">
- <div>Agreed working week: {moduleConfig.weeklyWorkingHours}h</div>
+ {/* <div>Agreed working week: {moduleConfig.weeklyWorkingHours}h</div> */}
  <div>
  <Input
  name="show_entries"
  type="checkbox"
  checked={showEntries}
  onChange={(v) => setShowEntries(Boolean(v))}
- inlineLabel="Show More Details"
+ inlineLabel="Show more details"
  />
  </div>
  <div className="-mx-6 sm:-mx-8">
@@ -434,7 +434,7 @@ export const WorkingHoursEditorMonth: React.FC<{
  : '–',
  },
  {
- Header: 'Overwork',
+ Header: 'Additional hours',
  accessor: () =>
  totalPerMonth.overworkTime
  ? getDurationString(totalPerMonth.overworkTime)

src/modules/working-hours/client/components/WorkingHoursUserModal.tsx

@@ -273,7 +273,7 @@ export const WorkingHoursUserModal: React.FC<{
  {getDurationString(x.workingHours)}
  {!!x.overworkLevel && !!x.overworkTime && (
  <Tag size="small" color={x.overworkLevel}>
- Overwork {getDurationString(x.overworkTime)}
+ Additional {getDurationString(x.overworkTime)}
  </Tag>
  )}
  </div>
@@ -347,7 +347,7 @@ export const WorkingHoursUserModal: React.FC<{
  type="checkbox"
  checked={showEntries}
  onChange={(v) => setShowEntries(Boolean(v))}
- inlineLabel="Show More Details"
+ inlineLabel="Show more details"
  />
  </div>
  <div>

src/modules/working-hours/metadata-schema.ts

@@ -22,6 +22,7 @@ export const roleConfigSchema = z
  nextWeeks: z.number().min(0).max(18),
  }),
  publicHolidayCalendarId: z.string().optional(),
+ policyText: z.string().optional(),
  })
  .strict()