Добавление отображения описания активности

application/chronography/controllers/post-activity-input.ts

@@ -5,7 +5,12 @@ import { completeActiveTiming, insertTiming } from '@application/chronography/co
 import { ActivityData } from '@application/types';
 
 export const postActivityInput = async (activityData: ActivityData): Promise<void> => {
-  const { category: categoryName, activity: activityName, startTime, endTime } = activityData
+  const {
+    category: categoryName,
+    activity: activityName,
+    description: activityDescription,
+    startTime, endTime,
+  } = activityData;
 
   const startTimeString = new Date(startTime).toISOString();
   const endTimeString = endTime ? new Date(endTime).toISOString() : null;
@@ -20,5 +25,5 @@ export const postActivityInput = async (activityData: ActivityData): Promise<voi
     await completeActiveTiming(startTimeString);
   }
 
-  await insertTiming(activity.id, startTimeString, endTimeString);
+  await insertTiming(activity.id, activityDescription, startTimeString, endTimeString);
 };

application/chronography/controllers/timings/index.ts

@@ -6,7 +6,7 @@ import { activeTimingStart, ActivityDay, CurrentActivityView, TimingTable } from
 
 const fetchTiming = async (timingId: number) => (
   await knex<TimingTable>('timings')
-    .select('activity_id')
+    .select('activity_id', 'description')
     .where({ id: timingId })
 );
 
@@ -16,9 +16,9 @@ export const completeActiveTiming = async (startTime: string) => (
     .update({ end_at: startTime })
 );
 
-export const insertTiming = async (activityId: number, startTime: string, endTime: string | null) => (
+export const insertTiming = async (activityId: number, description: string, startTime: string, endTime: string | null) => (
   await knex<TimingTable>('timings')
-    .insert({ activity_id: activityId, start_at: startTime, end_at: endTime })
+    .insert({ activity_id: activityId, description, start_at: startTime, end_at: endTime })
 );
 
 export const fetchActiveTiming = async (): Promise<CurrentActivityView | null> => {
@@ -74,7 +74,7 @@ export const repeatTiming = async (timingId: number) => {
   const [timing] = await fetchTiming(timingId);
 
   await completeActiveTiming(currentTime);
-  await insertTiming(timing.activity_id, currentTime, null);
+  await insertTiming(timing.activity_id, timing.description, currentTime, null);
 };
 
 export const deleteTiming = async (timingId: number) => (

application/chronography/create-activity.ts

@@ -6,6 +6,7 @@ export const getActivity = (friendlyString: string): ActivityData => {
     activity: friendlyString,
     category: null,
     endTime: null,
+    description: null,
     startTime: null,
   };
 

application/types/index.ts

@@ -4,6 +4,7 @@ export { ActivityView, activeTimingStart, CurrentActivityView } from './views';
 export interface ActivityData {
   activity: string;
   category: string | null;
+  description: string | null;
   startTime: Date;
   endTime: Date | null;
 }

frontend/components/activity/__description/activity__description.scss

@@ -1,3 +1,11 @@
-.#{$b}__description {
+@import '@blueprintjs/core/lib/scss/variables';
+
+.#{$b}__title {
   flex-grow: 1;
 }
+
+.#{$b}__description {
+  color: $gray1;
+  font-size: $pt-font-size-small;
+  margin: 3px 0 5px;
+}

frontend/components/activity/__description/activity__description.tsx

@@ -7,8 +7,13 @@ interface ActivityDescriptionProps {
   isCurrent: boolean;
 }
 
-export const Activity__Description = ({ category, activity, isCurrent }: ActivityDescriptionProps) => (
-  <div className={b('activity__description', {}, { current: isCurrent })}>
+export const Activity__Description = ({ category, activity, description, isCurrent }: ActivityDescriptionProps) => (
+  <div className={b('activity__title', {}, { current: isCurrent })}>
     <div>{activity} <i>{category}</i></div>
+    {description && (
+      <div className={b('activity__description')}>
+        {description}
+      </div>
+    )}
   </div>
 )

frontend/components/activity/__time/activity__time.scss

@@ -1,4 +1,6 @@
 .#{$b}__time {
-  width: 110px;
+  width: 90px;
   text-align: left;
+  white-space: nowrap;
+  margin-right: 10px;
 }

frontend/views/append-activity/append-activity.tsx

@@ -5,7 +5,7 @@ import { createRoot } from 'react-dom/client';
 import 'dayjs/locale/ru';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 
-import { FocusStyleManager, FormGroup, InputGroup, Button } from '@blueprintjs/core';
+import { FocusStyleManager, FormGroup, InputGroup, TextArea, Button } from '@blueprintjs/core';
 
 import { Section, Section__Row, Section__Text } from '@frontend/components/section';
 import { Form } from '@frontend/components/form';
@@ -28,12 +28,14 @@ FocusStyleManager.onlyShowFocusOnTabs();
 const defaultActivityData: ActivityData = {
   activity: '',
   category: '',
+  description: '',
   startTime: new Date(),
   endTime: null,
 };
 
 const AppendActivityView = () => {
   const [activityInput, setActivityInput] = useState<string>('');
+  const [activityDescription, setActivityDescription] = useState<string>('');
   const [activityData, setActivityData] = useState<ActivityData>(defaultActivityData);
   const [isLoading, setLoadingStatus] = useState(false);
 
@@ -54,11 +56,17 @@ const AppendActivityView = () => {
     setActivityInput(value);
   };
 
+  const changeActivityDescription = (event: FormEvent<HTMLTextAreaElement>) => {
+    const { value } = event.currentTarget;
+
+    setActivityDescription(value);
+  };
+
   const submitActivityInput = async () => {
     setLoadingStatus(true);
 
     try {
-      await postActivityInput(activityData)
+      await postActivityInput({ ...activityData, description: activityDescription });
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
@@ -94,6 +102,17 @@ const AppendActivityView = () => {
             </FormGroup>
           </Section__Row>
 
+          <Section__Row>
+            <FormGroup helperText="Описание активности">
+              <TextArea
+                large={true}
+                fill={true}
+                value={activityDescription}
+                onChange={changeActivityDescription}
+              />
+            </FormGroup>
+          </Section__Row>
+
           <Section__Text>
             {activityInput && activityData.startTime && (
               <ActivityInfo {...activityData}/>