@brilo/base-blocks 0.1.27 → 0.1.29

package/src/blocks/career/career-header/edit.tsx

@@ -0,0 +1,61 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import type {CareerHeaderAttributes, CareerHeaderOptions} from './types'
+
+export function createCareerHeaderEdit(_options: CareerHeaderOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CareerHeaderAttributes
+    setAttributes: (a: Partial<CareerHeaderAttributes>) => void
+  }) {
+    const {showExcerpt, showLocation, showSalary, showBenefits, showEmploymentType} = attributes
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Zobrazené údaje', 'brilo-blocks')} initialOpen>
+            <ToggleControl
+              label={__('Zobrazit perex', 'brilo-blocks')}
+              checked={showExcerpt}
+              onChange={(value) => setAttributes({showExcerpt: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit lokalitu', 'brilo-blocks')}
+              checked={showLocation}
+              onChange={(value) => setAttributes({showLocation: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit plat', 'brilo-blocks')}
+              checked={showSalary}
+              onChange={(value) => setAttributes({showSalary: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit benefity', 'brilo-blocks')}
+              checked={showBenefits}
+              onChange={(value) => setAttributes({showBenefits: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit typ úvazku', 'brilo-blocks')}
+              checked={showEmploymentType}
+              onChange={(value) => setAttributes({showEmploymentType: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="components-placeholder">
+            <div className="components-placeholder__label">{__('Hlavička kariéry', 'brilo-blocks')}</div>
+            <div className="components-placeholder__instructions">
+              {__('Zobrazí data aktuální pozice — název, perex, lokalitu, plat, benefity a typ úvazku.', 'brilo-blocks')}
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/career/career-header/factory.tsx

@@ -0,0 +1,28 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCareerHeaderEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CareerHeaderAttributes, CareerHeaderOptions} from './types'
+
+export type {CareerHeaderAttributes, CareerHeaderOptions}
+
+export function createCareerHeaderBlock(options: CareerHeaderOptions): BlockConfiguration<CareerHeaderAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Hlavička kariéry', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      showExcerpt: {type: 'boolean', default: true},
+      showLocation: {type: 'boolean', default: true},
+      showSalary: {type: 'boolean', default: true},
+      showBenefits: {type: 'boolean', default: true},
+      showEmploymentType: {type: 'boolean', default: true},
+    },
+    edit: createCareerHeaderEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<CareerHeaderAttributes>
+}

package/src/blocks/career/career-header/icon.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="3" width="16" height="4" rx="1" stroke="black" fill="none" />
+    <line x1="2" y1="10" x2="14" y2="10" stroke="black" />
+    <line x1="2" y1="13" x2="18" y2="13" stroke="black" />
+    <line x1="2" y1="16" x2="10" y2="16" stroke="black" />
+  </svg>
+)

package/src/blocks/career/career-header/index.ts

@@ -0,0 +1,8 @@
+export type {CareerHeaderAttributes, CareerHeaderOptions} from './types'
+export {createCareerHeaderBlock} from './factory'
+
+import type {CareerHeaderOptions} from './types'
+
+export const careerHeaderDefaults: CareerHeaderOptions = {
+  name: 'brilo/career-header',
+}

package/src/blocks/career/career-header/types.ts

@@ -0,0 +1,11 @@
+import type {BriloBlockType} from '~/types'
+
+export interface CareerHeaderAttributes extends Record<string, unknown> {
+  showExcerpt: boolean
+  showLocation: boolean
+  showSalary: boolean
+  showBenefits: boolean
+  showEmploymentType: boolean
+}
+
+export type CareerHeaderOptions = BriloBlockType

package/src/blocks/career/job-position-group/JobPositionsSelectModal.tsx

@@ -0,0 +1,238 @@
+import apiFetch from '@wordpress/api-fetch'
+import {Button, Card, CardBody, __experimentalHStack as HStack, Modal, __experimentalVStack as VStack} from '@wordpress/components'
+import {DataViews, type View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {arrowDown, arrowUp, close, plusCircle} from '@wordpress/icons'
+// biome-ignore lint/correctness/noUnusedImports: required in scope for classic JSX transform
+import React, {useEffect, useMemo, useState} from 'react'
+import type {SelectControlProps} from './types'
+
+type JobPositionRecord = {
+  id: number
+  title: {rendered: string}
+  date: string
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'title', direction: 'asc'},
+  fields: ['date'],
+  titleField: 'title',
+}
+
+function useJobPositions() {
+  const [positions, setPositions] = useState<JobPositionRecord[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setIsLoading(true)
+    apiFetch<JobPositionRecord[]>({
+      path: '/wp/v2/job_position?per_page=100&orderby=title&order=asc&_fields=id,title,date',
+    })
+      .then((result) => setPositions(result))
+      .catch(() => setPositions([]))
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  return {positions, isLoading}
+}
+
+function SelectedOrderList({
+  items,
+  onChange,
+  onRemove,
+}: {
+  items: JobPositionRecord[]
+  onChange: (ids: number[]) => void
+  onRemove: (id: number) => void
+}) {
+  if (0 === items.length) {
+    return <p className="i-job-position-select-modal__empty">{__('Nevybrány žádné pozice.', 'brilo-blocks')}</p>
+  }
+
+  const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction
+
+    if (target < 0 || target >= items.length) {
+      return
+    }
+
+    const next = [...items]
+    ;[next[index], next[target]] = [next[target], next[index]]
+    onChange(next.map((item) => item.id))
+  }
+
+  return (
+    <VStack spacing={2}>
+      {items.map((item, index) => (
+        <Card size="small" className="i-job-position-select-modal__item" key={item.id}>
+          <CardBody>
+            <HStack alignment="center">
+              <span
+                className="i-job-position-select-modal__item-title"
+                style={{
+                  flexGrow: 1,
+                  minWidth: 0,
+                  textAlign: 'left',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {item.title.rendered || __('(bez názvu)', 'brilo-blocks')}
+              </span>
+
+              <HStack expanded={false} spacing={1}>
+                <Button
+                  size="small"
+                  icon={arrowUp}
+                  label={__('Posunout výš', 'brilo-blocks')}
+                  onClick={() => move(index, -1)}
+                  disabled={0 === index}
+                />
+                <Button
+                  size="small"
+                  icon={arrowDown}
+                  label={__('Posunout níž', 'brilo-blocks')}
+                  onClick={() => move(index, 1)}
+                  disabled={index === items.length - 1}
+                />
+                <Button size="small" icon={close} isDestructive label={__('Odebrat', 'brilo-blocks')} onClick={() => onRemove(item.id)} />
+              </HStack>
+            </HStack>
+          </CardBody>
+        </Card>
+      ))}
+    </VStack>
+  )
+}
+
+/**
+ * Manual job_position picker built on @wordpress/dataviews, mirroring
+ * DocumentsSelectModal closely (table view, search, sort, checkbox
+ * selection, reorderable selection list) but with just title/date columns.
+ */
+export function JobPositionsSelectModal({selectedItems, onChange}: SelectControlProps) {
+  const {positions, isLoading} = useJobPositions()
+  const [isOpen, setIsOpen] = useState(false)
+  const [view, setView] = useState<View>(DEFAULT_VIEW)
+
+  const selectedPositions = useMemo(
+    () => selectedItems.map((id) => positions.find((pos) => pos.id === id)).filter((pos): pos is JobPositionRecord => undefined !== pos),
+    [selectedItems, positions],
+  )
+
+  const fields = useMemo(
+    () => [
+      {
+        id: 'title',
+        label: __('Název', 'brilo-blocks'),
+        enableHiding: false,
+        enableSorting: true,
+        render: ({item}: {item: JobPositionRecord}) => item.title.rendered || __('(bez názvu)', 'brilo-blocks'),
+      },
+      {
+        id: 'date',
+        label: __('Datum', 'brilo-blocks'),
+        enableSorting: true,
+        render: ({item}: {item: JobPositionRecord}) => (item.date ? new Date(item.date).toLocaleDateString() : '—'),
+      },
+    ],
+    [],
+  )
+
+  const {data, paginationInfo} = useMemo(() => {
+    let filtered = positions
+
+    if (view.search) {
+      const needle = view.search.toLowerCase()
+      filtered = filtered.filter((pos) => pos.title.rendered.toLowerCase().includes(needle))
+    }
+
+    if (view.sort?.field) {
+      const {field, direction} = view.sort
+      const sorted = [...filtered]
+
+      sorted.sort((a, b) => {
+        const valueA = 'title' === field ? a.title.rendered : ((a as never)[field] ?? '')
+        const valueB = 'title' === field ? b.title.rendered : ((b as never)[field] ?? '')
+        const result = String(valueA).localeCompare(String(valueB))
+
+        return 'desc' === direction ? -result : result
+      })
+
+      filtered = sorted
+    }
+
+    const perPage = view.perPage ?? 20
+    const page = view.page ?? 1
+    const start = (page - 1) * perPage
+
+    return {
+      data: filtered.slice(start, start + perPage),
+      paginationInfo: {totalItems: filtered.length, totalPages: Math.ceil(filtered.length / perPage) || 1},
+    }
+  }, [positions, view])
+
+  const toggleSelected = (id: number) => {
+    onChange(selectedItems.includes(id) ? selectedItems.filter((itemId) => itemId !== id) : [...selectedItems, id])
+  }
+
+  return (
+    <VStack spacing={3} className="i-job-position-select-modal">
+      <Button variant="secondary" icon={plusCircle} onClick={() => setIsOpen(true)}>
+        {__('Vybrat pozice', 'brilo-blocks')}
+      </Button>
+
+      <SelectedOrderList
+        items={selectedPositions}
+        onChange={onChange}
+        onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
+      />
+
+      {isOpen && (
+        <Modal title={__('Vybrat pozice', 'brilo-blocks')} onRequestClose={() => setIsOpen(false)} size="fill">
+          <VStack spacing={4} style={{height: '100%'}}>
+            <div style={{flexGrow: 1, minHeight: 0}}>
+              <DataViews<JobPositionRecord>
+                data={data}
+                fields={fields}
+                view={view}
+                onChangeView={setView}
+                paginationInfo={paginationInfo}
+                isLoading={isLoading}
+                defaultLayouts={{table: {}}}
+                getItemId={(item) => String(item.id)}
+                selection={selectedItems.map(String)}
+                onChangeSelection={(ids) => onChange(ids.map(Number))}
+                actions={[
+                  {
+                    id: 'toggle',
+                    label: (items) =>
+                      items.length && selectedItems.includes(items[0].id) ? __('Odebrat', 'brilo-blocks') : __('Přidat', 'brilo-blocks'),
+                    supportsBulk: true,
+                    callback: (items) => {
+                      items.forEach((item) => {
+                        toggleSelected(item.id)
+                      })
+                    },
+                  },
+                ]}
+              />
+            </div>
+
+            <HStack justify="flex-end">
+              <Button variant="primary" onClick={() => setIsOpen(false)}>
+                {__('Hotovo', 'brilo-blocks')}
+              </Button>
+            </HStack>
+          </VStack>
+        </Modal>
+      )}
+    </VStack>
+  )
+}

package/src/blocks/career/job-position-group/constants.ts

@@ -0,0 +1,11 @@
+export const JOB_POSITION_GROUP_MODES = ['selected', 'listing'] as const
+export const JOB_POSITION_GROUP_SORT_BYS = ['date', 'title', 'start_date', 'menu_order'] as const
+export const JOB_POSITION_GROUP_SORT_ORDERS = ['asc', 'desc'] as const
+
+export const JOB_POSITION_GROUP_MODE = JOB_POSITION_GROUP_MODES[0]
+export const JOB_POSITION_GROUP_SORT_BY = JOB_POSITION_GROUP_SORT_BYS[0]
+export const JOB_POSITION_GROUP_SORT_ORDER = JOB_POSITION_GROUP_SORT_ORDERS[1]
+
+export const JOB_POSITION_GROUP_PER_PAGE_MIN = 1
+export const JOB_POSITION_GROUP_PER_PAGE_MAX = 24
+export const JOB_POSITION_GROUP_PER_PAGE = 6

package/src/blocks/career/job-position-group/edit.tsx

@@ -0,0 +1,93 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  RangeControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {JOB_POSITION_GROUP_PER_PAGE, JOB_POSITION_GROUP_PER_PAGE_MAX, JOB_POSITION_GROUP_PER_PAGE_MIN} from './constants'
+import type {JobPositionGroupAttributes, JobPositionGroupOptions} from './types'
+
+export function createJobPositionGroupEdit(options: JobPositionGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: JobPositionGroupAttributes
+    setAttributes: (a: Partial<JobPositionGroupAttributes>) => void
+  }) {
+    const {mode, selectedPositions, perPage, sortBy, sortOrder} = attributes
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení výpisu', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Zdroj pozic', 'brilo-blocks')}
+              value={mode}
+              onChange={(value) => setAttributes({mode: value as JobPositionGroupAttributes['mode']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="selected" label={__('Vybrané', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="listing" label={__('Výpis', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            {'listing' === mode && (
+              <>
+                <RangeControl
+                  label={__('Počet pozic', 'brilo-blocks')}
+                  value={perPage}
+                  onChange={(value) => setAttributes({perPage: value ?? JOB_POSITION_GROUP_PER_PAGE})}
+                  min={JOB_POSITION_GROUP_PER_PAGE_MIN}
+                  max={JOB_POSITION_GROUP_PER_PAGE_MAX}
+                />
+
+                <ToggleGroupControl
+                  label={__('Řazení', 'brilo-blocks')}
+                  value={sortBy}
+                  onChange={(value) => setAttributes({sortBy: value as JobPositionGroupAttributes['sortBy']})}
+                  isBlock
+                >
+                  <ToggleGroupControlOption value="date" label={__('Datum publikace', 'brilo-blocks')} />
+                  <ToggleGroupControlOption value="title" label={__('Název', 'brilo-blocks')} />
+                  <ToggleGroupControlOption value="start_date" label={__('Datum nástupu', 'brilo-blocks')} />
+                  <ToggleGroupControlOption value="menu_order" label={__('Pořadí', 'brilo-blocks')} />
+                </ToggleGroupControl>
+
+                <ToggleGroupControl
+                  label={__('Směr řazení', 'brilo-blocks')}
+                  value={sortOrder}
+                  onChange={(value) => setAttributes({sortOrder: value as JobPositionGroupAttributes['sortOrder']})}
+                  isBlock
+                >
+                  <ToggleGroupControlOption value="desc" label={__('Sestupně', 'brilo-blocks')} />
+                  <ToggleGroupControlOption value="asc" label={__('Vzestupně', 'brilo-blocks')} />
+                </ToggleGroupControl>
+              </>
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {'selected' === mode &&
+            options.renderPositionsControl?.({
+              selectedItems: selectedPositions,
+              onChange: (ids: number[]) => setAttributes({selectedPositions: ids}),
+            })}
+
+          {'listing' === mode && (
+            <div className="components-placeholder">
+              <div className="components-placeholder__label">{__('Pracovní pozice', 'brilo-blocks')}</div>
+              <div className="components-placeholder__instructions">
+                {`${__('Zobrazí', 'brilo-blocks')} ${perPage} ${__('pracovních pozic.', 'brilo-blocks')}`}
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/career/job-position-group/factory.tsx

@@ -0,0 +1,56 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {
+  JOB_POSITION_GROUP_MODE,
+  JOB_POSITION_GROUP_MODES,
+  JOB_POSITION_GROUP_PER_PAGE,
+  JOB_POSITION_GROUP_SORT_BY,
+  JOB_POSITION_GROUP_SORT_BYS,
+  JOB_POSITION_GROUP_SORT_ORDER,
+  JOB_POSITION_GROUP_SORT_ORDERS,
+} from './constants'
+import {createJobPositionGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {JobPositionGroupAttributes, JobPositionGroupOptions} from './types'
+
+export type {JobPositionGroupAttributes, JobPositionGroupOptions}
+
+export function createJobPositionGroupBlock(options: JobPositionGroupOptions): BlockConfiguration<JobPositionGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Pracovní pozice', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {
+        type: 'string',
+        default: JOB_POSITION_GROUP_MODE,
+        enum: [...JOB_POSITION_GROUP_MODES],
+      },
+      selectedPositions: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      perPage: {
+        type: 'number',
+        default: JOB_POSITION_GROUP_PER_PAGE,
+      },
+      sortBy: {
+        type: 'string',
+        default: JOB_POSITION_GROUP_SORT_BY,
+        enum: [...JOB_POSITION_GROUP_SORT_BYS],
+      },
+      sortOrder: {
+        type: 'string',
+        default: JOB_POSITION_GROUP_SORT_ORDER,
+        enum: [...JOB_POSITION_GROUP_SORT_ORDERS],
+      },
+    },
+    edit: createJobPositionGroupEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<JobPositionGroupAttributes>
+}

package/src/blocks/career/job-position-group/icon.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="6" width="16" height="11" rx="1" stroke="black" fill="none" />
+    <path d="M7 6V4C7 3.44772 7.44772 3 8 3H12C12.5523 3 13 3.44772 13 4V6" stroke="black" fill="none" />
+    <line x1="2" y1="11" x2="18" y2="11" stroke="black" />
+  </svg>
+)

package/src/blocks/career/job-position-group/index.ts

@@ -0,0 +1,15 @@
+export type {
+  JobPositionGroupAttributes,
+  JobPositionGroupOptions,
+  JobPositionGroupMode,
+  JobPositionGroupSortBy,
+  JobPositionGroupSortOrder,
+} from './types'
+export {createJobPositionGroupBlock} from './factory'
+export {JobPositionsSelectModal} from './JobPositionsSelectModal'
+
+import type {JobPositionGroupOptions} from './types'
+
+export const jobPositionGroupDefaults: JobPositionGroupOptions = {
+  name: 'brilo/job-position-group',
+}

package/src/blocks/career/job-position-group/types.ts

@@ -0,0 +1,23 @@
+import type {BriloBlockType} from '~/types'
+import type {JOB_POSITION_GROUP_MODES, JOB_POSITION_GROUP_SORT_BYS, JOB_POSITION_GROUP_SORT_ORDERS} from './constants'
+
+export type JobPositionGroupMode = (typeof JOB_POSITION_GROUP_MODES)[number]
+export type JobPositionGroupSortBy = (typeof JOB_POSITION_GROUP_SORT_BYS)[number]
+export type JobPositionGroupSortOrder = (typeof JOB_POSITION_GROUP_SORT_ORDERS)[number]
+
+export interface JobPositionGroupAttributes extends Record<string, unknown> {
+  mode: JobPositionGroupMode
+  selectedPositions: number[]
+  perPage: number
+  sortBy: JobPositionGroupSortBy
+  sortOrder: JobPositionGroupSortOrder
+}
+
+export interface SelectControlProps {
+  selectedItems: number[]
+  onChange: (ids: number[]) => void
+}
+
+export interface JobPositionGroupOptions extends BriloBlockType {
+  renderPositionsControl?: (props: SelectControlProps) => JSX.Element
+}