tascana / tascana-web Goto Github PK

В мобильных браузерах можно передвигать скролл и видеть следующую задачу. Скролл и свайпы в принципе неработоспособны.

• body:
  font-family:'Helvetica Now','Helvetica Now Display','Helvetica Neue', 'Helvetica','Arial',sans-serif

• h1
  remove margin: 0.67em 0

• SubtaskBox
  match style to Zeplin board
  replace circles with SVG from Zeplin

• AddBox
  replace 'Add task' with + icon

• TaskBox component
  move position, float and width to the new class .Line
  add the following: https://gist.github.com/ifilipis/e8eef4cf69e19c7247480d3fc581cffa
  if possible, replace calc(50vw - 15px)

• TaskBox drag-and-drop
  move AddBox inside Container

• SubTasklist > li
  remove display: flex

• SubTasklist > li > .Mark
  replace style width: 14px; height: 14px; position: relative; top: 2px; display: inline-block;
  add SVG fill

• SubTasklist > li > p
  add outline: none
display: inline

• Header
  position: fixed

• #root
  add user-select: none

• .Wrapper
  add user-select: initial

Запись экрана 2020-02-15 в 1.31.58.zip

Option 1:

• remove position fixed (so that it is invisible when we scroll down)
• keep the design in Desktop the same as in Mobile (no T, no full name)
• keep the width = width of tasks container

There is a need to see/edit all monthly tasks for a given year. The expected UI is the same as we have today, but no daily tasks, and the line with monthly tasks is duplicated 12 times, and for each month you can create/edit monthly tasks.

Требования:

• При линковании месячной задачи, выбор родительской должен срабатывать на single click, а не на blur

Вопросы:

1. Правильно ли я понял задачу?

Collect events:

• Visit the landing page

• Scroll to signin buttons below

• Clicked Signin with Google

• Clicked Signin with Facebook

• Created an account

• Authorised

• Visit of the task page

• Logged out

Limit char input of TaskBox. Also, limit total string length

Запись экрана 2020-02-15 в 0.12.17.zip

1. Взять id из годовой задачи. Создать переменные total и done.
2. Получить все задачи, у которых parentid равен id.
3. Каждой из задач взять children.length.
4. Если children.length > 0, то считать сложить количество выполненных задач из children. Прибавить children.length в total, children -> done в done.
5. Если == 0, смотреть, выполнена, или нет, сама задача. Добавить 1 в total и done в done.
6. Разделить done на total

Требования:

• На мобильных разрешениях убрать из хэдэра nickname и лого

По адресу https://tascana.github.io/tascana-web/build/ лежит сборка основного экрана задач.

От вас требуется изучить код в app.js, taskbox.js и reducer.js и решить одну из текущих задач на выбор

• Предложить способ уменьшения количества вызовов и переменных в infinite scroll.
• Предложить вариант реализации выделения задач.

Сейчас код состоит из нескольких блоков: блок TaskBox (taskbox.js), который реализует добавление и выполнение задач; блок анимации (app.js), который управляет тем, что показывается в TaskBox; и Redux (reducer.js), который хранит данные о задачах и состоянии UI.
Самый объемный - это блок анимации. Он использует react-spring и react-use-gestures для реализации infinite scroll.

Первая часть - обработка жеста в функции useDrag. В DOM одновременно показывается 3 блока задач - справа, слева и в видимой области страницы. Им соответствует массив с номерами годов, месяцев или дней, которые должны быть на экране. В основном цикле блок задач перемещается с анимацией на расстояние сдвига курсора, а когда сдвиг курсора становится больше 1/3 страницы, происходит следующее:

1. В массиве, происходит сдвиг элементов так, чтобы приезжающий блок задач получил координату 0 в конце анимации, например, items[1] становится items[0], а items[2] становится items[1]. На место items[2] встает следующий по порядку день, месяц или год. Это делается автоматически через Redux
2. Дальше, обработкой анимации занимается useEffect, который отслеживает изменения в массиве UI. Сначала обновляется state items значением из prop items0, который подключен к Redux. Так мы получаем актуальный список текущих и следующих блоков.
3. Далее, может произойти так, что пользователь переключил год или месяц, в связи с чем должны измениться два остальных связанных блока. Для этого в двух связанных блоках изменяется массив items по тому же принципу, как и в пункте 1, но с той разницей, что добавляется не следующий по порядку год/месяц/день, а любая другая возможная дата.
4. Когда массив items вновь изменен и координаты задач сдвинуты, анимируется перемещение всех блоков в нулевую точку.

Как видите, этот алгоритм далек от идеала и нам хотелось бы уменьшить количество шагов и действий для получения того же эффекта.

Вторая часть - это реализация функции выделения. Поскольку существуют годовые цели, к которым привязываются месячные, а также месячные, к которым привязываются дневные, было решено сделать иерархию для добавления задач. Первый шаг - реализовать функцию выделения, которая бы по нажатию, например, на годовую задачу, выделяла все дерево месячных и дневных задач.

В файле taskbox.js есть код от старой версии выделения, который локально - в пределах собственного блока - использует state, но никак не взаимодействует с соседними. Мы хотели бы это исправить. Требуется предложить реализуемый алгоритм (вероятно, с использованием redux), который бы позволял создать подобную логику.

Please, help to implement. Requires integer id>=0
https://gist.github.com/ifilipis/aa6c5f5a951ad1ffdb5e20066d80264c

Требования:

• Добавить mobile стили для тасков

Вопросы:

1. О каких стилях идет речь?

FB / Google auth
FB sign in failed endpoint - redirect back to landing page

Google - unknown status

Реализовать возможность менять задачи местами (годовые/месячные/дневные). Хранение положения задач.

Понятия:

Лайн - горизонтальный блок, который мы свайпаем. Всего на странице их 3: годовой, месячный и дневной.

Проблема:

Текущий код очень тяжелый для восприятия: сложная логика обновления дат в Redux mapStateToProps, таймауты внутри таймаутов, несколько useEffect и т.д. и т.п.

Требования:

• По свайпу мы должны пролистывать год, месяц, день (в зависимости от свайпнутого лайна)
• Даты должны свайпаться корректно (свайпнули с декабря на январь, должен свайпнуться год на +1)
• В лайнах должны отображаться актуальные таски для той даты, которая сейчас видима на странице
• Нужно написать комменты в коде к функционалу свайпов (это нужно для меня, как я все пойму, можно будет их выпилить)
• По клику на края экрана должен срабатывать свайп
• Нужно учесть, что по клику на таск у нас сработает выбор этого таска, то есть нужно сделать так, чтобы при свайпе выбор не сработал
• После обсуждений было принято решение, что нам не нужны свайпы влево/вправо до бесконечности. Работаем в пределе 11 лет (если сейчас 2020, то мы должны иметь диапазон от 2019-2030, то есть прошлый год сохраняем, для людей, которые захотят зафиксировать прошлогодние задачи)

Сейчас:

Сейчас это реализовано следующим образом (описан будет только годовой лайн, для месячного и дневного функционал аналогичный):

1. На странице в одном лайне хранится 3 даты, они выбираются по следующему принципу: если выбранный год 2020, то в лайне будет 2019, 2020, 2021
2. После свайпа на 2021 лайн обновится следующим образом 2020, 2021, 2022
3. Анимации и свайпы работают с использованием либ: react-spring + react-use-gesture
4. Данные лайна хранятся в Redux Store, в объекте UI

И так до бесконечности. Можно пролистать хоть до 10000+ года.

Код компонента: https://github.com/Tascana/tascana-web/blob/develop/src/components/Lines/index.js

Screen Recording 2020-01-16 at 22.52.00.zip

1. Scroll year left and right.
2. Select monthly task
   Screen record attached.
   Запись экрана 2020-01-15 в 16.53.06.mov.zip

Make year task numbers incremental in randomGrad(i)

Originally posted by @ifilipis in #20 (comment)

Ожидание:

• При удалении годовой задачи не возникнет ошибки

Реальность:

Сейчас ошибка есть.

Вопросы:

1. После удаления родительской задачи дочерние должны удалиться или стать unassigned?

Сейчас структура БД в firebase имеет следующий вид:

• id: string - id, который генерируется функцией nanoid. Пример: 1rY3Vjrn6CBn1fygi22fA

• background: string - градиент, который является фоном годового таска, рамкой месячного и меткой дневного. Пример: linear-gradient(to bottom, #e2e2e2, #bbb)

• year: number

• month?: number

• day?: number

• position: number - так как у нас есть d'n'd сортировка, то мы вынуждены хранить позицию каждого элемента, после получения тасков мы их сортируем по этой позиции

• progress: number - число от 0 до 100, которое показывает на сколько процентов таск завершен. Высчитывается по формуле (кол-во_выполненных_дочерних_тасков / общее_кол-во дочерних тасков) * 100

• type: enum "DAY" | "MONTH" | "YEAR"

• subtype?: enum "MORNING" | "AFTERNOON" | "EVENING" - только для дневных тасков

• text: string - текст таска

• userId: string - id юзера, который создал таск

• createdAt: number - timestamp создания

• updatedAt?: number - timestamp обновления

• children: string[] - массив содержащий id всех дочерних задач. Если у годовой задачи есть дочерняя месячная, у которой есть дочерняя дневная, то годовая будет иметь children: [id_месячной_задачи, id_дневной_задачи]

• parents: string[] - массив аналогичный массиву children, который хранит дерево родителей

• firstParentId?: string - id ближайшего родителя (для месячной - годовая, для дневной - месячная)

Данная структура также соответствует Redux store. Внимание следует обратить только на то, что firebase не хранит пустые данные, поэтому если у задачи нет детей/родителей, то при инициализации задач в стор в поля children и parents будут вбиты пустые массивы.

@macfire10, есть ли у тебя какие-то замечания, которые в будущем мы могли бы реализовать?

Требования:

• Если мы, редактируя задачу удаляем из нее все символы, то мы должны увидеть диалоговое окно с вопросом типа "Хотите ли вы удалить задачу? Да/Нет". Актуально только для месячных и годовых задач.

• Если мы, редактируя ДНЕВНУЮ задачу удаляем из нее все символы и кликаем вне ее (событие blur), то задача должна удалиться без диалогового окна.

Вопросы:

1. Правильно ли я понял задачу?
2. Что должно произойти если мы не хотим удалять задачу (кнопка "Нет" в диалоговом окне)? Вернуть тот текст, который в ней был изначально?
3. Какой дизайн будет у диалогово окна?
4. Диалоговое окно должно появиться на событие blur или как только мы удалим все символы?

Редьюсер UI имеет следующую структуру:

{year: Number, month: Number, day: Number, prevyear: Number, prevmonth: Number, prevday: Number, isSelected: Boolean, selectedId: null | Number, swipeableLine: String, selectedTree: Array sort:false}

На мой взгляд, хранить столько полей для дат бесполезно, все что нам нужно - ISO Datestring строчка, а все остальные манипуляции можно выполнять с помощью чистых функций, и тогда можно будет не хранить это все в редьюсере. При свайпе у нас будет изменяться изначальная строчка, а строчки для боковых элементов будут пересчитываться.

Some colors are annoying. It would be great to have a way to change it (get the next random color).

Требования:

• Сменить title страницы на Tascana
• Добавить фавиконку

Вопросы:

1. Нужен *.png файл с фавиконкой
2. Заголовок Tascana будет у всех страниц? Или на лэндинге он мб какой-нибудь другой будет?

Не очень понимаю в какой момент, но произошло такое:

Требования:

• Сделать аналог контекстного меню для мобильной версии

Вопросы:

1. Какой дизайн будет у попапа с кнопками Edit/Done/Delete.
2. Как будет выглядеть иконка Burger menu в таскбоксе

Имеется выполненный месячный таск. Сейчас у нас нет быстрого способа вернуть его в невыполненное состояние.

Требования:

• Нужно сделать, чтобы на hover появлялась иконка чекбокса, по нажатию на которую таск становился невыполненным.
• Нужно заменить текст в context menu с Done на Undone, если задача выполнена

Вопросы:

1. Нужен макет таска с состоянием Done hover вот здесь: https://zpl.io/VxXBqq3

Phillip has a .mov file in Telegram channel

Выделяется одна задача -> строится дерево задач, которые вместе с ней должны быть выделены -> перерисовывается UI (добавляется класс unselected)

Ожидание:

При добавлении дневной непривязанной задачи она корректно создается.

Реальность:

При добавлении дневной непривязанной задачи падает ошибка.

Child tasks are not selected

Требования:

Сейчас для обновления дерева дочерних/родительских тасков для каждого таска строится рекурсивно дерево. Такой алгоритм вызывает stack overflow даже при относительно небольшом количестве тасков (~20+).

Необходимо сделать так, чтобы обновлялись только те таски в дереве, которым действительно это нужно.

Оставить today, tomorrow, yesterday, this month, next month и previous month

• Progress bar - вернуть старый SVG модуль. Новый не соответствует дизайну
• Сколл стрелками происходит без анимации
• Скролл при нажатии на край экрана происходит без анимации в дневном блоке
• Скролл стрелками происходит при редактировании задач Screen Recording 2020-02-18 at 19.52.24.mp4.zip
• Анимация при смене дат работает неправильно. Меняется день вперед - прилетает день справа. Меняется месяц назад - прилетают месяц и день слева.
• Плашка на hover у свернутой задачи должна быть смещена влево
• Datepicker в header должен следовать этой логике https://gist.github.com/ifilipis/e8eef4cf69e19c7247480d3fc581cffa
• При свернутом блоке задач, два соседних остаются развернутыми, анимация работает неправильноЗапись экрана 2020-02-16 в 12.20.19.mov.zip
• Скролл на мобильной версии работает очень плохо (iOS 12, 13, Safari) IMG_8248.mp4.zip
• Кружок в дневном блоке съезжает вниз при редактировании/добавлении Запись экрана 2020-02-22 в 16.02.28.zip
• Drag'n'drop bugs - ломаются стили Screen Recording 2020-02-17 at 21.25.26.mp4.zip
• У заголовков блоков задач появился класс. Стиль должен соответствовать стилю h1. Стили заголовков месячных, дневных, годовых задач разные.
• Когда завожу месячные задачи они дробятся на 2 строки, когда сохраняю - показываются в одну строку
• Задержка при выделении задач. Сейчас click обрабатывается через N мс после нажатия. Надо: обрабатывать click сразу, обрабатывать double-click, если click случился за N мс до события.
• Scroll bug неизвестного происхождения Запись экрана 2020-02-22 в 15.53.21.zip
• При редактировании месяца стиль задачи меняется на done

Требования:

• При изменении/добавлении задачи скроллить к полю ввода и показывать клавиатуру

Завел утреннюю задачу, она создавалась, и получил такую ошибку

Требования:

• В годовой таск добавить кнопку для смены цвета
• По нажатию на эту кнопку меняется цвет у всех дочерних задач

Вопросы:

• Нужен дизайн этой кнопки вот здесь https://zpl.io/VxXBqq3
• По какому принципу должен работать рандом? Сейчас градиент считается по функции randomGrad(lastTaskIndex + 1), то есть он завязан на индексе таска внутри массива.
• Можем ли мы у одного таска бесконечно менять цвета?

Шаги:

1. Добавить дневной таск
2. Войти в режим редактирование кликнув на созданный таск дважды (либо через контекст меню)

Ожидание:

Внешне не должно быть никаких скачков, поведение должно быть похоже на то, как если бы элемент был в режиме contentEditable.

Реальность:

https://github.com/Tascana/tascana-web/files/4239380/2020-02-22.16.02.28.zip

The goal of Tascana is to help people achieve long-term goals with less stress. Looking at 10 monthly tasks it might be confusing which one is more important, which you should invest more time on. We already have task re-ordering, which helps in setting priorities. Alternatively we could allow users to assign monthly tasks to one of 4 groups:

• very important / urgent
• low important / urgent
• very important / not urgent
• low important / not urgent

This clarity could help users to invest more time and resources to the first group, potentially assigning monthly tasks which are not urgent but important for later months, and get rid of low importance and not urgent ones.

1. При создании дочерней задачи пропадает выделение с родительской. Нужно сделать так, чтобы оно оставалось на месте
2. Чтобы сохранить задачу, нужно сделать blur с плитки Add task или нажать на нее еще раз. Добавить сочетание клавиш Ctrl+Enter / Cmd+Enter / Tab, которое сохраняло бы текущую задачу и делало focus на новой плитке Add task, не меняя родительской задачи
3. Swipe стрелками

Требования:

• В drag'n'drop режиме размер таск-блока должен увеличиться на 1.05
• В drag'n'drop режиме для таск-блока должно добавляться свойство cursor: grab

When a monthly task was deleted the associated yearly task became grey.

Expectation: the deletion of a monthly task should not affect the yearly parent goal in any way.