Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

leaner task renderer #2323

Merged
merged 7 commits into from
Aug 29, 2022
Merged

leaner task renderer #2323

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a8a643b
saving progress
shanberg Aug 26, 2022
47b57cc
feat: polish taskbox component
shanberg Aug 28, 2022
95d1dba
fix: remove extra space after task
shanberg Aug 28, 2022
44ac62e
Merge branch 'main' into lean-task
shanberg Aug 28, 2022
ba9e7fc
Merge branch 'main' into lean-task
shanberg Aug 29, 2022
5160e0c
fix: clearer indicator for task details form
shanberg Aug 29, 2022
a73b9bd
chore: style, link & carve fixes
neotyk Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 122 additions & 137 deletions src/cljs/athens/types/tasks/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,58 @@
(ns athens.types.tasks.view
"Views for Athens Tasks"
(:require
["/components/Block/BlockFormInput" :refer [BlockFormInput]]
["/components/Icons/Icons" :refer [ChevronDownIcon
CheckmarkIcon]]
["/components/ModalInput/ModalInput" :refer [ModalInput]]
["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]]
["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]]
["@chakra-ui/react" :refer [FormControl
FormLabel
Text
Flex
AvatarGroup
Avatar
Checkbox
ButtonGroup
Portal
Box
Divider
Menu
Spacer
MenuOptionGroup
MenuItemOption
MenuButton
MenuList
Button
Badge
FormErrorMessage
Select
HStack
VStack]]
[athens.common-db :as common-db]
[athens.common-events :as common-events]
[athens.common-events.bfs :as bfs]
[athens.common-events.graph.composite :as composite]
[athens.common-events.graph.ops :as graph-ops]
[athens.common.logging :as log]
[athens.common.utils :as common.utils]
[athens.dates :as dates]
[athens.db :as db]
[athens.reactive :as reactive]
[athens.self-hosted.presence.views :as presence]
[athens.types.core :as types]
[athens.types.dispatcher :as dispatcher]
[athens.views.blocks.editor :as editor]
[clojure.string :as str]
[goog.functions :as gfns]
[re-frame.core :as rf]
[reagent.core :as r]
[tick.core :as t]))
["/components/App/ContextMenuContext" :refer [ContextMenuContext]]
["/components/Block/BlockFormInput" :refer [BlockFormInput]]
["/components/Block/Taskbox" :refer [Taskbox]]
["/components/Icons/Icons" :refer [ChevronDownIcon
CheckmarkIcon]]
["/components/ModalInput/ModalInput" :refer [ModalInput]]
["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]]
["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]]
["react" :as react]
["@chakra-ui/react" :refer [FormControl
FormLabel
Text
Flex
MenuGroup
AvatarGroup
Avatar
Checkbox
ButtonGroup
Portal
Box
Divider
Menu
Spacer
MenuOptionGroup
MenuItemOption
MenuButton
MenuList
Button
Badge
FormErrorMessage
Select
HStack
VStack]]
[athens.common-db :as common-db]
[athens.common-events :as common-events]
[athens.common-events.bfs :as bfs]
[athens.common-events.graph.composite :as composite]
[athens.common-events.graph.ops :as graph-ops]
[athens.common.logging :as log]
[athens.common.utils :as common.utils]
[athens.dates :as dates]
[athens.db :as db]
[athens.reactive :as reactive]
[athens.self-hosted.presence.views :as presence]
[athens.types.core :as types]
[athens.types.dispatcher :as dispatcher]
[athens.views.blocks.editor :as editor]
[clojure.string :as str]
[goog.functions :as gfns]
[re-frame.core :as rf]
[reagent.core :as r]
[tick.core :as t]))


;; Create default task statuses configuration
Expand Down Expand Up @@ -446,7 +450,7 @@
string]))]]]))


(defn task-status-menulist
(defn task-status-menugroup
[parent-block-uid status-block-uid]
(let [;; status-id (str (random-uuid))
status-block (reactive/get-reactive-block-document [:block/uid status-block-uid])
Expand All @@ -458,9 +462,7 @@
status-ref (str "((" new-status "))")]
(rf/dispatch [:graph/update-in [:block/uid parent-block-uid] [":task/status"]
(fn [db uid] [(graph-ops/build-block-save-op db uid status-ref)])])))]
(prn status-string)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find this println for the life of me.
Thank you for removing it.

[:> Portal
[:> MenuList
[:> MenuGroup
[:> MenuOptionGroup {:defaultValue status-uid
:type "radio"
:onChange on-choose-item}
Expand All @@ -470,7 +472,7 @@
[:> MenuItemOption {:value uid
:py 0
:icon (r/as-element [:> CheckmarkIcon])}
string]))]]]))
string]))]]))


(defn find-status-uid
Expand Down Expand Up @@ -510,6 +512,10 @@
due-date-uid (-> props (get ":task/due-date") :block/uid)
;; projects-uid (:block/uid (find-property-block-by-key-name reactive-block ":task/projects"))
status-uid (-> props (get ":task/status") :block/uid)
;; map the :string key of the return from (find-allowed-statuses) into a vector
status-options (->> (find-allowed-statuses)
(map (fn [{:block/keys [string]}]
string)))
creator (-> (:block/create block) :event/auth :presence/id)
time (-> (:block/create block) :event/time :time/ts)
created-date (-> time
Expand All @@ -520,8 +526,12 @@
status (-> (common-db/get-block @db/dsdb [:block/uid (-> props
(get ":task/status")
:block/string
(common-db/strip-markup "((" "))"))])
:block/string)
#_ (common-db/strip-markup "((" "))"))])
)
_ (prn "test" props) #_ (common-db/get-block @db/dsdb [:block/uid (-> props
(get ":task/status")
:block/string
#_ (common-db/strip-markup "((" "))"))])
_title (-> props (get ":task/title") :block/string)
assignee (-> props (get ":task/assignee") :block/string (common-db/strip-markup "[[" "]]"))
priority (-> (common-db/get-block @db/dsdb [:block/uid (-> props
Expand All @@ -545,102 +555,77 @@
show-created-date? true
_show-status? true
show-due-date? true

isChecked (is-checked-fn status)]
[:> VStack {:spacing 0
[:> HStack {:spacing 0
:gridArea "content"
:borderRadius "md"
:borderStyle "solid"
:borderWidth "1px"
:transitionProperty "colors"
:borderColor "separator.border"
:transitionDuration "fast"
:transitionTimingFunction "ease-in-out"
:overflow "hidden"
:mb 1
:align "stretch"}
[:> HStack {:alignSelf "stretch"
:as ButtonGroup
:variant "ghost"
:pr 2
:onClick #(.. % stopPropagation)
:onMouseDown #(.. % stopPropagation)
:alignItems "start"
:isAttached true
:size "sm"
:spacing 0}
[:> Button {:as Checkbox
:p 2
:spacing 0
:minWidth "unset"
:pr 0
:mr -2
:onClick #(.. % stopPropagation)
:onMouseDown #(.. % stopPropagation)
:borderRadius 0
:onChange #(on-update-checkbox block-uid isChecked) :isChecked isChecked}]
[:> Menu {:size "sm" :offset [0 0] :isLazy true}
[:> MenuButton {:as Button
:onClick #(.. % stopPropagation)
:px 2
:mr 2
:borderRadius 0
:minWidth 4
:variant "ghost"}
[:> ChevronDownIcon {:color "foreground.secondary"}]]
[task-status-menulist block-uid status-uid]]
[:> Box {:flex "1 1" :py 1 :cursor "text" :lineHeight 1.4}
[inline-task-title-2 block-uid title-uid ":task/title" "Title" true false]]]
[:> ModalInput {:placement "bottom" :isLazy true}
[:> ModalInputTrigger
[:> Button {:whiteSpace "normal"
:fontSize "unset"
:size "sm"
:onClick #(.. % stopPropagation)
:lineHeight "unset"
:flexWrap "wrap"
:borderRadius 0
:px 2
:textAlign "start"
:justifyContent "space-between"
:height "auto"
:fontWeight "normal"}
:onMouseDown #(.. % stopPropagation)}
[:> Taskbox {:status status
:options status-options
:onChange (fn [status]
(let [new-status status
status-ref (str "((" new-status "))")]
(rf/dispatch [:graph/update-in [:block/uid block-uid] [":task/status"]
(fn [db uid] [(graph-ops/build-block-save-op db uid status-ref)])])))}]]
[:> Box {:flex "1 1 100%"
:py 1
:cursor "text"
:lineHeight 1.4}
[inline-task-title-2 block-uid title-uid ":task/title" "Title" true false]]
[:> ModalInput {:placement "right-start"
:isLazy true}
[:> ModalInputTrigger
[:> Button {:size "sm"
:flex "1 0 auto"
:variant "ghost"
:onClick #(.. % stopPropagation)
:lineHeight "unset"
:px 2
:borderRadius "inherit"}
;; description
(when (and show-description? description)
[:> Text {:fontSize "sm" :flexGrow 1 :flexBasis "100%" :m 0 :py 1 :lineHeight 1.4 :color "foreground.secondary"}
description])
#_(when (and show-description? description)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm really missing this part of UI

[:> Text {:fontSize "sm" :flexGrow 1 :flexBasis "100%" :m 0 :py 1 :lineHeight 1.4 :color "foreground.secondary"}
description])
;; tasking/assignment
(when (and show-priority? priority)
[:> Badge {:size "sm" :variant "primary"}
priority])
[:> Flex {:gap 1}
[:> Text {:fontSize "xs"} "Due"]
(when (and show-assignee? assignee)
[:> AvatarGroup {:size "xs"}
[:> Avatar {:name assignee}]])
(when (and show-due-date? due-date)
[:> Text {:fontSize "xs"} due-date])]
[:> Spacer]
(when (and show-priority? priority)
[:> Badge {:size "sm" :variant "primary"}
priority])
(when (or due-date assignee)
[:> Flex {:gap 1 :align "center"}
[:> Text {:fontSize "xs"} "Due"]
(when (and show-assignee? assignee)
[:> AvatarGroup {:size "xs"}
[:> Avatar {:name assignee}]])
(when (and show-due-date? due-date)
[:> Text {:fontSize "xs"} due-date])])
;; provenance
[:> Flex {:gap 1}
[:> Text {:fontSize "xs"} "Created"]
(when (and show-creator? creator)
[:> AvatarGroup {:size "xs"}
[:> Avatar {:name creator}]])
(when (and show-created-date? created-date)
[:> Text {:fontSize "xs"} created-date])]]]
[:> ModalInputPopover {:popoverContentProps {:display "grid"
:onClick #(.. % stopPropagation)
:gridTemplateColumns "max-content 1fr"
:gap 2
:p 4
:maxWidth "20em"}}
[generic-textarea-view-for-task-props block-uid description-uid ":task/description" "Description" false true]
[:> Divider {:gridColumn "1 / -1"}]
[task-priority-view block-uid priority-uid]
[generic-textarea-view-for-task-props block-uid assignee-uid ":task/assignee" "Assignee" false false]
[:> Flex {:gap 1 :align "center"}
(when (and show-creator? creator)
[:> AvatarGroup {:size "xs"}
[:> Avatar {:name creator}]])
(when (and show-created-date? created-date)
[:> Text {:fontSize "xs"} created-date])]]]
[:> ModalInputPopover {:popoverContentProps {:display "grid"
:onClick #(.. % stopPropagation)
:gridTemplateColumns "max-content 1fr"
:gap 2
:p 4
:maxWidth "20em"}}
[generic-textarea-view-for-task-props block-uid description-uid ":task/description" "Description" false true]
[:> Divider {:gridColumn "1 / -1"}]
[task-priority-view block-uid priority-uid]
[generic-textarea-view-for-task-props block-uid assignee-uid ":task/assignee" "Assignee" false false]
;; Making assumption that for now we can add due date manually without date-picker.
[generic-textarea-view-for-task-props block-uid due-date-uid ":task/due-date" "Due Date" false false]
[:> Text creator-uid]]]]))))
[generic-textarea-view-for-task-props block-uid due-date-uid ":task/due-date" "Due Date" false false]
[:> Text creator-uid]]]]))))


(defrecord TaskView
Expand Down
9 changes: 9 additions & 0 deletions src/js/components/App/ContextMenuContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,15 @@ const useContextMenuState = () => {
const { event, ref, component, onClose, anchorEl, isExclusive } = props;
event.preventDefault();

if (!component) {
console.warn("No component provided to addToContextMenu");
return;
}
if (!event) {
console.warn("No event provided to addToContextMenu");
return;
}

// When exclusive, don't add to or update the menu
if (menuState.isExclusive && menuState.isOpen) {
return;
Expand Down
Loading