Skip to content

Commit

Permalink
fix(condo): DOMA-8515 new meter section design review fixes (#4845)
Browse files Browse the repository at this point in the history 
* fix(condo): DOMA-8515 removed default date filter in readings

* fix(condo): DOMA-8515 added complete createMeter modal translations

* fix(condo): DOMA-8515 design review fixes

* fix(condo): DOMA-8515 design review fixes

* fix(condo): DOMA-8515 design review fixes
  • Loading branch information
@abshnko
abshnko authored Jun 20, 2024
1 parent aede340 commit bd7bb2a
Show file tree
Hide file tree
Showing 10 changed files with 187 additions and 135 deletions.
40 changes: 40 additions & 0 deletions apps/condo/domains/common/components/StatusSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import styled from '@emotion/styled'

import { colors } from '@open-condo/ui/dist/colors'

import Select from '@condo/domains/common/components/antd/Select'
import { transitions } from '@condo/domains/common/constants/style'

interface IStatusSelect {
color: string
backgroundColor: string
minWidth?: number
}

export const StatusSelect = styled(Select)<IStatusSelect>`
min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : '175px'};
font-weight: 700;
border-radius: 8px;
color: ${({ color }) => color};
background-color: ${({ backgroundColor }) => backgroundColor};
transition: ${transitions.easeInOut};
&.ant-select-disabled .ant-select-selector .ant-select-selection-item {
color: ${({ color }) => color};
}
&.ant-select-open .ant-select-selector .ant-select-selection-item {
color: ${({ color }) => color};
}
.ant-select-selector .ant-select-selection-item {
font-weight: 600;
color: ${colors.white};
transition: ${transitions.easeInOut};
}
.ant-select-arrow svg {
fill: ${({ color }) => color};
transition: ${transitions.easeInOut};
}
`
2 changes: 1 addition & 1 deletion apps/condo/domains/marketplace/components/Invoice/InvoiceStatusSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import React, { useCallback, useMemo, useState } from 'react'

import { useIntl } from '@open-condo/next/intl'

import { StatusSelect } from '@condo/domains/common/components/StatusSelect'
import { INVOICE_STATUS_CANCELED, INVOICE_STATUS_COLORS, INVOICE_STATUS_TRANSITIONS, INVOICE_PAYMENT_TYPE_ONLINE, INVOICE_STATUS_PAID } from '@condo/domains/marketplace/constants'
import { useCancelStatusModal } from '@condo/domains/marketplace/hooks/useCancelStatusModal'
import { Invoice } from '@condo/domains/marketplace/utils/clientSchema'
import { StatusSelect } from '@condo/domains/ticket/components/TicketStatusSelect'


type InvoiceStatusOptionType = {
Expand Down
61 changes: 39 additions & 22 deletions apps/condo/domains/meter/components/Meters/MeterPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import React, { useCallback, useMemo, useState } from 'react'

import { useIntl } from '@open-condo/next/intl'
import { useOrganization } from '@open-condo/next/organization'
import { Typography, Alert, Select } from '@open-condo/ui'
import { Typography, Alert } from '@open-condo/ui'
import { colors } from '@open-condo/ui/dist/colors'

import Select from '@condo/domains/common/components/antd/Select'
import { PageHeader } from '@condo/domains/common/components/containers/BaseLayout'
import { ShowMoreFieldsButton } from '@condo/domains/common/components/ShowMoreFieldsButton'
import { StatusSelect } from '@condo/domains/common/components/StatusSelect'
import B2bAppLogo from '@condo/domains/meter/components/Meters/B2bAppLogo'
import ChangeMeterStatusModal from '@condo/domains/meter/components/Meters/ChangeMeterStatusModal'
import { MeterAccountField, MeterCommonDateField, MeterNumberField, MeterPlaceField, MeterResourceField } from '@condo/domains/meter/components/Meters/MeterInfoFields'
Expand Down Expand Up @@ -43,7 +46,7 @@ const MeterHeader = ({ meter, meterReportingPeriod, refetchMeter, meterType }) =
const isAutomatic = get(meter, 'isAutomatic')
const b2bAppId = get(meter, 'b2bApp.id')

const [meterStatus, setMeterStatus] = useState(archiveDate ? METER_STATUSES.archived : METER_STATUSES.active)
const meterStatus = useMemo(() => archiveDate ? METER_STATUSES.archived : METER_STATUSES.active, [archiveDate])
const [selectedArchiveDate, setSelectedArchiveDate] = useState(archiveDate || null)
const [isShowStatusChangeModal, setIsShowStatusChangeModal] = useState(false)

Expand Down Expand Up @@ -82,29 +85,42 @@ const MeterHeader = ({ meter, meterReportingPeriod, refetchMeter, meterType }) =
const handleCloseStatusChangeModal = useCallback(() => {
setIsShowStatusChangeModal(false)
}, [])

const options = useMemo(() => ([
<Select.Option
key={METER_STATUSES.active}
value={METER_STATUSES.active}
title={MeterIsActiveMessage}
data-cy='meter__status-select-option'
>
{MeterIsActiveMessage}
</Select.Option>,
<Select.Option
key={METER_STATUSES.archived}
value={METER_STATUSES.archived}
title={MeterIsOutOfOrderMessage}
data-cy='meter__status-select-option'
>
{MeterIsOutOfOrderMessage}
</Select.Option>,
]), [MeterIsActiveMessage, MeterIsOutOfOrderMessage])


const meterStatusTag = useMemo(() => (
<Select
<StatusSelect
color={colors.white}
backgroundColor={meterStatus === METER_STATUSES.archived ? colors.brown[5] : colors.green[5]}
disabled={meterStatus === METER_STATUSES.archived}
onChange={handleChangeStatusButtonClick}
options={[
{
label: MeterIsActiveMessage,
value: METER_STATUSES.active,
},
{
label: MeterIsOutOfOrderMessage,
value: METER_STATUSES.archived,
},
]}

key='statusTag'
type={meterStatus === METER_STATUSES.active ? 'success' : 'warning'}
value={meterStatus}
disabled={meterStatus === METER_STATUSES.archived}
/>
bordered={false}
labelInValue
eventName='MeterStatusSelect'
>
{options}
</StatusSelect>

), [MeterIsActiveMessage, MeterIsOutOfOrderMessage, handleChangeStatusButtonClick, meterStatus])
), [handleChangeStatusButtonClick, meterStatus, options])


return (
Expand All @@ -127,7 +143,7 @@ const MeterHeader = ({ meter, meterReportingPeriod, refetchMeter, meterType }) =
</Typography.Text>
</Col>
)}
{dayjs(nextVerificationDate).diff(dayjs(), 'month') <= 3 && (
{!archiveDate && dayjs(nextVerificationDate).diff(dayjs(), 'month') <= 3 && (
<Col span={24}>
<Typography.Text type='secondary' size='small'>
{VerificationDateTipMessage} &mdash;&nbsp;
Expand Down Expand Up @@ -170,6 +186,7 @@ const MeterContent = ({ meter, resource, meterType }) => {
const MeterCommissioningDateMessage = intl.formatMessage({ id: 'pages.condo.meter.CommissioningDate' })
const MeterSealingDateMessage = intl.formatMessage({ id: 'pages.condo.meter.SealingDate' })
const MeterControlReadingsDateMessage = intl.formatMessage({ id: 'pages.condo.meter.ControlReadingsDate' })
const MeterArchiveDateMessage = intl.formatMessage({ id: 'pages.condo.meter.ArchiveDate' })

const [isAdditionalFieldsCollapsed, setIsAdditionalFieldsCollapsed] = useState(true)

Expand All @@ -179,6 +196,7 @@ const MeterContent = ({ meter, resource, meterType }) => {
const meterCommissioningDate = get(meter, 'commissioningDate')
const meterSealingDate = get(meter, 'sealingDate')
const meterControlReadingsDate = get(meter, 'controlReadingsDate')
const meterArchiveDate = get(meter, 'archiveDate')

return (
<Col span={24}>
Expand All @@ -197,6 +215,7 @@ const MeterContent = ({ meter, resource, meterType }) => {
<MeterCommonDateField title={MeterCommissioningDateMessage} date={meterCommissioningDate}/>
<MeterCommonDateField title={MeterSealingDateMessage} date={meterSealingDate}/>
<MeterCommonDateField title={MeterControlReadingsDateMessage} date={meterControlReadingsDate}/>
<MeterCommonDateField title={MeterArchiveDateMessage} date={meterArchiveDate}/>
</>
)}

Expand All @@ -221,7 +240,6 @@ export const MeterPageContent = ({ meter, possibleReportingPeriods, resource, re
const intl = useIntl()
const BlockedEditingTitleMessage = intl.formatMessage({ id: 'pages.condo.ticket.alert.BlockedEditing.title' })
const BlockedEditingDescriptionMessage = intl.formatMessage({ id: 'pages.condo.ticket.alert.BlockedEditing.description' })
const MeterReadingsMessage = intl.formatMessage({ id: 'import.meterReading.plural' })

const { organization, link: { role }, isLoading } = useOrganization()
const canManageMeterReadings = useMemo(() => get(role, 'canManageMeterReadings', false), [role])
Expand Down Expand Up @@ -269,7 +287,6 @@ export const MeterPageContent = ({ meter, possibleReportingPeriods, resource, re
meterType={meterType}
/>
<Col span={24}>
<Typography.Title level={3} >{MeterReadingsMessage}</Typography.Title>
{meterType === METER_TAB_TYPES.propertyMeter ? (
<PropertyMeterReadingsPageContent
filtersMeta={filtersMeta}
Expand Down
40 changes: 21 additions & 19 deletions apps/condo/domains/meter/components/TabContent/MeterReading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Meter as MeterType, MeterResource as MeterResourceType } from '@app/con
import { Col, Row, RowProps } from 'antd'
import { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox'
import { TableRowSelection } from 'antd/lib/table/interface'
import dayjs, { Dayjs } from 'dayjs'
import chunk from 'lodash/chunk'
import get from 'lodash/get'
import uniqBy from 'lodash/uniqBy'
Expand All @@ -15,7 +14,7 @@ import React, { CSSProperties, useCallback, useMemo, useState } from 'react'

import { PlusCircle, Search } from '@open-condo/icons'
import { useIntl } from '@open-condo/next/intl'
import { ActionBar, Button, Checkbox } from '@open-condo/ui'
import { ActionBar, Button, Checkbox, Typography } from '@open-condo/ui'
import { colors } from '@open-condo/ui/dist/colors'

import Input from '@condo/domains/common/components/antd/Input'
Expand Down Expand Up @@ -57,7 +56,6 @@ const RESET_FILTERS_BUTTON_STYLE: CSSProperties = { paddingLeft: 0 }
const QUICK_FILTERS_COL_STYLE: CSSProperties = { alignSelf: 'center' }

const SORTABLE_PROPERTIES = ['date', 'clientName', 'source']
const DEFAULT_DATE_RANGE: [Dayjs, Dayjs] = [dayjs().subtract(1, 'week'), dayjs()]

type MetersTableContentProps = {
filtersMeta: FiltersMeta<MeterReadingWhereInput>[]
Expand Down Expand Up @@ -91,6 +89,7 @@ const MeterReadingsTableContent: React.FC<MetersTableContentProps> = ({
const CountSelectedReadingsMessage = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.CountSelectedReadings' })
const DeleteMeterReadingsMessage = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.DeleteMeterReadings' })
const DeleteMeterReadingsMessageWarn = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.DeleteMeterReadings.Warn' })
const MeterReadingsMessage = intl.formatMessage({ id: 'import.meterReading.plural' })
const DeleteMessage = intl.formatMessage({ id: 'Delete' })
const DontDeleteMessage = intl.formatMessage({ id: 'DontDelete' })

Expand All @@ -104,19 +103,14 @@ const MeterReadingsTableContent: React.FC<MetersTableContentProps> = ({
const { getTrackingWrappedCallback } = useTracking()

const [dateRange, setDateRange] = useDateRangeSearch('date')
const [filtersAreReset, setFiltersAreReset] = useState(false)
const dateFallback = filtersAreReset ? null : DEFAULT_DATE_RANGE
const dateFilterValue = dateRange || dateFallback
const dateFilterValue = dateRange || null
const dateFilter = dateFilterValue ? dateFilterValue.map(el => el.toISOString()) : null
const nextVerificationDate = get(meter, 'nextVerificationDate')

const [isShowUpdateReadingModal, setIsShowUpdateReadingModal] = useState(false)
const [chosenMeterReadingId, setChosenMeterReadingId] = useState<string>(null)

const handleDateChange = useCallback((value) => {
if (!value) {
setFiltersAreReset(true)
}
setDateRange(value)
}, [setDateRange])

Expand Down Expand Up @@ -262,7 +256,7 @@ const MeterReadingsTableContent: React.FC<MetersTableContentProps> = ({
<Row justify='start' gutter={FILTERS_CONTAINER_GUTTER} style={{ flexWrap: 'nowrap' }}>
<Col style={QUICK_FILTERS_COL_STYLE}>
<DateRangePicker
value={dateRange || dateFallback}
value={dateRange}
onChange={handleDateChange}
placeholder={[StartDateMessage, EndDateMessage]}
/>
Expand All @@ -288,15 +282,23 @@ const MeterReadingsTableContent: React.FC<MetersTableContentProps> = ({
)}
</Col>
<Col span={24}>
<Table
totalRows={total}
loading={metersLoading || loading}
dataSource={meter ? meterReadings : processedMeterReadings}
columns={meter ? tableColumnsForSingleMeter : tableColumnsForMeterReadings}
rowSelection={rowSelection}
sticky
onRow={meter && handleUpdateMeterReading}
/>
<Row gutter={[0, 40]}>
{meter && meterReadings.length > 0 && (
<Col span={24}>
<Typography.Title level={3} >{MeterReadingsMessage}</Typography.Title>
</Col>
)}
<Table
totalRows={total}
loading={metersLoading || loading}
dataSource={meter ? meterReadings : processedMeterReadings}
columns={meter ? tableColumnsForSingleMeter : tableColumnsForMeterReadings}
rowSelection={rowSelection}
sticky
onRow={meter && handleUpdateMeterReading}
/>

</Row>
</Col>
{
!loading && total > 0 && (
Expand Down
26 changes: 17 additions & 9 deletions apps/condo/domains/meter/components/TabContent/PropertyMeterReading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import React, { CSSProperties, useCallback, useMemo, useState } from 'react'

import { PlusCircle, Search } from '@open-condo/icons'
import { useIntl } from '@open-condo/next/intl'
import { ActionBar, Button, Checkbox } from '@open-condo/ui'
import { ActionBar, Button, Checkbox, Typography } from '@open-condo/ui'
import { colors } from '@open-condo/ui/dist/colors'

import Input from '@condo/domains/common/components/antd/Input'
Expand Down Expand Up @@ -83,6 +83,7 @@ const PropertyMeterReadingsTableContent: React.FC<PropertyMetersTableContentProp
const CountSelectedReadingsMessage = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.CountSelectedReadings' })
const DeleteMeterReadingsMessage = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.DeleteMeterReadings' })
const DeleteMeterReadingsMessageWarn = intl.formatMessage({ id: 'pages.condo.meter.MeterReading.DeleteMeterReadings.Warn' })
const MeterReadingsMessage = intl.formatMessage({ id: 'import.meterReading.plural' })
const DeleteMessage = intl.formatMessage({ id: 'Delete' })
const DontDeleteMessage = intl.formatMessage({ id: 'DontDelete' })

Expand Down Expand Up @@ -251,14 +252,21 @@ const PropertyMeterReadingsTableContent: React.FC<PropertyMetersTableContentProp
)}
</Col>
<Col span={24}>
<Table
totalRows={total}
loading={metersLoading || loading}
dataSource={meter ? propertyMeterReadings : processedMeterReadings}
rowSelection={rowSelection}
columns={meter ? tableColumnsForSingleMeter : tableColumnsForMeterReadings}
onRow={meter && handleUpdateMeterReading}
/>
<Row gutter={[0, 40]}>
{meter && propertyMeterReadings.length > 0 && (
<Col span={24}>
<Typography.Title level={3} >{MeterReadingsMessage}</Typography.Title>
</Col>
)}
<Table
totalRows={total}
loading={metersLoading || loading}
dataSource={meter ? propertyMeterReadings : processedMeterReadings}
rowSelection={rowSelection}
columns={meter ? tableColumnsForSingleMeter : tableColumnsForMeterReadings}
onRow={meter && handleUpdateMeterReading}
/>
</Row>
</Col>
{
!loading && total > 0 && (
Expand Down
Loading

0 comments on commit bd7bb2a

Please sign in to comment.