mirror of
https://github.com/penpot/penpot.git
synced 2025-02-03 12:59:12 -05:00
🚧 Initial work on dashboard integration.
Restructuration.
This commit is contained in:
Andrey Antukh
parent
47de756080
commit
13215d7f5d
8 changed files with 373 additions and 175 deletions
|
|
@ -33,7 +33,7 @@
|
|||
ptk/WatchEvent
|
||||
(watch [this state stream]
|
||||
(rx/of (du/profile-fetched data)
|
||||
(rt/navigate :dashboard-projects)))))
|
||||
(rt/navigate :dashboard-team {:team-id "self"})))))
|
||||
|
||||
;; --- Login
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(declare fetch-files)
|
||||
(declare fetch-projects)
|
||||
|
||||
(def initialize-drafts
|
||||
(ptk/reify ::initialize
|
||||
|
|
@ -69,8 +70,41 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [local (:dashboard-local state)]
|
||||
(rx/of (fetch-files (:project-id local)))))))
|
||||
(rx/of (fetch-files (:project-id local))
|
||||
(fetch-projects (:team-id local)))))))
|
||||
|
||||
(defn initialize-team
|
||||
[team-id]
|
||||
(us/verify ::us/uuid team-id)
|
||||
(ptk/reify ::initialize
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local assoc
|
||||
:project-id nil
|
||||
:team-id team-id))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [local (:dashboard-local state)]
|
||||
;; TODO
|
||||
))))
|
||||
|
||||
(defn initialize-project
|
||||
[team-id project-id]
|
||||
(us/verify ::us/uuid team-id)
|
||||
(us/verify ::us/uuid project-id)
|
||||
(ptk/reify ::initialize
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local assoc
|
||||
:team-id team-id
|
||||
:project-id project-id))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [local (:dashboard-local state)]
|
||||
(rx/of (fetch-files (:project-id local))
|
||||
(fetch-projects (:team-id local)))))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Data Fetching
|
||||
|
|
@ -80,11 +114,13 @@
|
|||
|
||||
(declare projects-fetched)
|
||||
|
||||
(def fetch-projects
|
||||
(defn fetch-projects
|
||||
[team-id]
|
||||
(us/assert ::us/uuid team-id)
|
||||
(ptk/reify ::fetch-projects
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(->> (rp/query :projects)
|
||||
(->> (rp/query :projects-by-team {:team-id team-id})
|
||||
(rx/map projects-fetched)))))
|
||||
|
||||
(defn projects-fetched
|
||||
|
|
@ -123,6 +159,18 @@
|
|||
;; Data Modification
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
;; --- Create Project
|
||||
|
||||
(def create-project
|
||||
(ptk/reify ::create-project
|
||||
ptk/WatchEvent
|
||||
(watch [this state stream]
|
||||
(let [name (str "New Project " (gensym "p"))
|
||||
team-id (get-in state [:dashboard-local :team-id])]
|
||||
(->> (rp/mutation! :create-project {:name name :team-id team-id})
|
||||
(rx/map (fn [data]
|
||||
(projects-fetched [data]))))))))
|
||||
|
||||
;; --- Rename Project
|
||||
|
||||
(defn rename-project
|
||||
|
|
@ -215,12 +263,12 @@
|
|||
|
||||
;; --- Update Opts (Filtering & Ordering)
|
||||
|
||||
(defn update-opts
|
||||
[& {:keys [order filter] :as opts}]
|
||||
(ptk/reify ::update-opts
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local merge
|
||||
(when order {:order order})
|
||||
(when filter {:filter filter})))))
|
||||
;; (defn update-opts
|
||||
;; [& {:keys [order filter] :as opts}]
|
||||
;; (ptk/reify ::update-opts
|
||||
;; ptk/UpdateEvent
|
||||
;; (update [_ state]
|
||||
;; (update state :dashboard-local merge
|
||||
;; (when order {:order order})
|
||||
;; (when filter {:filter filter})))))
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@
|
|||
[uxbox.util.timers :as ts]
|
||||
[uxbox.util.uuid :as uuid]))
|
||||
|
||||
;; WARN: this file is deprecated.
|
||||
|
||||
;; --- Specs
|
||||
|
||||
(s/def ::id ::us/uuid)
|
||||
|
|
@ -148,21 +150,6 @@
|
|||
(->> (rp/query :file {:id id})
|
||||
(rx/map #(files-fetched [%]))))))
|
||||
|
||||
;; --- Files Fetched
|
||||
|
||||
;; --- Create Project
|
||||
|
||||
(declare project-created)
|
||||
|
||||
(def create-project
|
||||
(ptk/reify ::create-project
|
||||
ptk/WatchEvent
|
||||
(watch [this state stream]
|
||||
(let [name (str "New Project " (gensym "p"))]
|
||||
(->> (rp/mutation! :create-project {:name name})
|
||||
(rx/map (fn [data]
|
||||
(projects-fetched [data]))))))))
|
||||
|
||||
;; --- Create File
|
||||
|
||||
(defn create-file
|
||||
|
|
|
|||
|
|
@ -17,14 +17,16 @@
|
|||
[rumext.alpha :as mf]
|
||||
[uxbox.common.exceptions :as ex]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.common.exceptions :as ex]
|
||||
[uxbox.main.data.auth :refer [logout]]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.login :refer [login-page]]
|
||||
[uxbox.main.ui.profile.register :refer [profile-register-page]]
|
||||
[uxbox.main.ui.profile.recovery-request :refer [profile-recovery-request-page]]
|
||||
[uxbox.main.ui.profile.recovery :refer [profile-recovery-page]]
|
||||
[uxbox.main.ui.dashboard :as dashboard]
|
||||
[uxbox.main.ui.dashboard :refer [dashboard]]
|
||||
[uxbox.main.ui.settings :as settings]
|
||||
[uxbox.main.ui.shapes]
|
||||
[uxbox.main.ui.workspace :as workspace]
|
||||
|
|
@ -43,6 +45,13 @@
|
|||
|
||||
;; --- Routes
|
||||
|
||||
;; (comment
|
||||
;; "/dashboard/self"
|
||||
;; "/dashboard/self/drafts"
|
||||
;; "/dashboard/self/<project-id>"
|
||||
;; "/dashboard/<team-id>"
|
||||
;; "/dashboard/<team-id>/<project-id>"
|
||||
|
||||
(def routes
|
||||
[["/login" :login]
|
||||
["/register" :profile-register]
|
||||
|
|
@ -54,13 +63,29 @@
|
|||
["/password" :settings-password]]
|
||||
|
||||
["/dashboard"
|
||||
["/projects" :dashboard-projects]
|
||||
["/icons" :dashboard-icons]
|
||||
["/images" :dashboard-images]
|
||||
["/colors" :dashboard-colors]]
|
||||
["/:team-id" :dashboard-team]
|
||||
["/:team-id/:project-id" :dashboard-project]]
|
||||
|
||||
["/workspace/:file-id" :workspace]])
|
||||
|
||||
(defn- parse-team-id
|
||||
[route profile]
|
||||
(let [team-id (get-in route [:params :path :team-id])]
|
||||
(cond
|
||||
(uuid-str? team-id) (uuid team-id)
|
||||
(= "self" team-id) (:default-team-id profile)
|
||||
:else (ex/raise :type :validation
|
||||
:code :invalid-team-id))))
|
||||
|
||||
(defn- parse-project-id
|
||||
[route profile]
|
||||
(let [project-id (get-in route [:params :path :project-id])]
|
||||
(cond
|
||||
(uuid-str? project-id) (uuid project-id)
|
||||
(= "drafts" project-id) (:default-project-id profile)
|
||||
:else (ex/raise :type :validation
|
||||
:code :invalid-project-id))))
|
||||
|
||||
(mf/defc app-error
|
||||
[{:keys [error] :as props}]
|
||||
(let [data (ex-data error)]
|
||||
|
|
@ -73,18 +98,25 @@
|
|||
[props]
|
||||
(let [route (mf/deref route-iref)]
|
||||
(case (get-in route [:data :name])
|
||||
:login (mf/element login-page)
|
||||
:login
|
||||
(mf/element login-page)
|
||||
|
||||
:profile-register (mf/element profile-register-page)
|
||||
:profile-recovery-request (mf/element profile-recovery-request-page)
|
||||
:profile-recovery (mf/element profile-recovery-page)
|
||||
:profile-register
|
||||
(mf/element profile-register-page)
|
||||
|
||||
:profile-recovery-request
|
||||
(mf/element profile-recovery-request-page)
|
||||
|
||||
:profile-recovery
|
||||
(mf/element profile-recovery-page)
|
||||
|
||||
(:settings-profile
|
||||
:settings-password)
|
||||
(mf/element settings/settings #js {:route route})
|
||||
|
||||
:dashboard-projects
|
||||
(mf/element dashboard/dashboard-projects #js {:route route})
|
||||
(:dashboard-team
|
||||
:dashboard-project)
|
||||
(mf/element dashboard #js {:route route})
|
||||
|
||||
(:dashboard-icons
|
||||
:dashboard-images
|
||||
|
|
|
|||
|
|
@ -1,43 +1,61 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.dashboard
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.util.data :refer [parse-int uuid-str?]]
|
||||
[uxbox.common.exceptions :as ex]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.util.data :refer [uuid-str?]]
|
||||
[uxbox.main.ui.dashboard.header :refer [header]]
|
||||
[uxbox.main.ui.dashboard.projects :as projects]
|
||||
[uxbox.main.ui.dashboard.icons :as icons]
|
||||
[uxbox.main.ui.dashboard.images :as images]
|
||||
[uxbox.main.ui.dashboard.colors :as colors]
|
||||
[uxbox.main.ui.dashboard.sidebar :refer [sidebar]]
|
||||
[uxbox.main.ui.dashboard.project :refer [project-page]]
|
||||
[uxbox.main.ui.dashboard.team :refer [team-page]]
|
||||
[uxbox.main.ui.messages :refer [messages-widget]]))
|
||||
|
||||
(mf/defc dashboard-projects
|
||||
(defn- parse-params
|
||||
[route profile]
|
||||
(let [team-id (get-in route [:params :path :team-id])
|
||||
project-id (get-in route [:params :path :project-id])]
|
||||
(cond-> {}
|
||||
(uuid-str? team-id)
|
||||
(assoc :team-id (uuid team-id))
|
||||
|
||||
(= "self" team-id)
|
||||
(assoc :team-id (:default-team-id profile))
|
||||
|
||||
(uuid-str? project-id)
|
||||
(assoc :project-id (uuid project-id))
|
||||
|
||||
(and (= "drafts" project-id)
|
||||
(= "self" team-id))
|
||||
(assoc :project-id (:default-project-id profile)))))
|
||||
|
||||
|
||||
(mf/defc dashboard
|
||||
[{:keys [route] :as props}]
|
||||
(let [id (get-in route [:params :query :project-id])
|
||||
id (when (uuid-str? id) (uuid id))]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
section (get-in route [:data :name])
|
||||
{:keys [team-id project-id]} (parse-params route profile)]
|
||||
[:main.dashboard-main
|
||||
[:& messages-widget]
|
||||
[:& header {:section :dashboard-projects}]
|
||||
[:& projects/projects-page {:id id}]]))
|
||||
[:& header {}]
|
||||
[:section.dashboard-content
|
||||
[:& sidebar {:team-id team-id
|
||||
:project-id project-id
|
||||
:section section}]
|
||||
(case section
|
||||
:dashboard-team
|
||||
(mf/element team-page #js {:team-id team-id})
|
||||
|
||||
(mf/defc dashboard-assets
|
||||
[{:keys [route] :as props}]
|
||||
(let [section (get-in route [:data :name])
|
||||
{:keys [id type]} (get-in route [:params :query])
|
||||
id (cond
|
||||
;; (str/digits? id) (parse-int id)
|
||||
(uuid-str? id) (uuid id)
|
||||
(str/empty-or-nil? id) nil
|
||||
:else id)
|
||||
type (if (str/alpha? type) (keyword type) :own)]
|
||||
[:main.dashboard-main
|
||||
[:& messages-widget]
|
||||
[:& header {:section section}]
|
||||
(case section
|
||||
:dashboard-icons
|
||||
[:& icons/icons-page {:type type :id id}]
|
||||
|
||||
:dashboard-images
|
||||
[:& images/images-page {:type type :id id}]
|
||||
|
||||
:dashboard-colors
|
||||
[:& colors/colors-page {:type type :id id}])]))
|
||||
:dashboard-project
|
||||
(mf/element project-page #js {:team-id team-id
|
||||
:project-id project-id}))]]))
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.dashboard.projects
|
||||
(ns uxbox.main.ui.dashboard.project
|
||||
(:refer-clojure :exclude [sort-by])
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -20,32 +20,19 @@
|
|||
[uxbox.main.data.dashboard :as dsh]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.exports :as exports]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.dashboard.common :as common]
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.main.ui.dashboard.header :refer [header]]
|
||||
[uxbox.main.ui.dashboard.sidebar :refer [sidebar]]
|
||||
[uxbox.main.ui.messages :refer [messages-widget]]
|
||||
[uxbox.util.data :refer [uuid-str?]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as i18n :refer [t tr]]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
;; --- Helpers & Constants
|
||||
|
||||
(def +ordering-options+
|
||||
{:name "ds.ordering.by-name"
|
||||
:modified "ds.ordering.by-last-update"
|
||||
:created "ds.ordering.by-creation-date"})
|
||||
|
||||
;; --- Refs
|
||||
|
||||
(def opts-iref
|
||||
(-> (l/key :dashboard-projects)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def projects-iref
|
||||
(-> (l/key :projects)
|
||||
(l/derive st/state)))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
|
@ -150,100 +137,29 @@
|
|||
(for [item files]
|
||||
[:& grid-item {:file item :key (:id item)}])]]]))
|
||||
|
||||
;; --- Component: Nav
|
||||
|
||||
(mf/defc nav-item
|
||||
[{:keys [id name selected?] :as props}]
|
||||
(let [local (mf/use-state {:name name})
|
||||
editable? (not (nil? id))
|
||||
on-click #(st/emit! (udp/go-to-project id))
|
||||
on-dbl-click #(when editable? (swap! local assoc :edit true))
|
||||
on-input #(as-> % $
|
||||
(dom/get-target $)
|
||||
(dom/get-value $)
|
||||
(swap! local assoc :name $))
|
||||
on-cancel #(swap! local assoc :edit false :name name)
|
||||
on-keyup #(cond
|
||||
(kbd/esc? %)
|
||||
(on-cancel)
|
||||
|
||||
(kbd/enter? %)
|
||||
(let [name (-> % dom/get-target dom/get-value)]
|
||||
(st/emit! (udp/rename-project id name))
|
||||
(swap! local assoc :edit false)))]
|
||||
|
||||
[:li {:on-click on-click
|
||||
:on-double-click on-dbl-click
|
||||
:class-name (when selected? "current")}
|
||||
(if (:edit @local)
|
||||
[:div
|
||||
[:input.element-title {:value (:name @local)
|
||||
:on-change on-input
|
||||
:on-key-down on-keyup}]
|
||||
[:span.close {:on-click on-cancel} i/close]]
|
||||
[:span.element-title name])]))
|
||||
|
||||
(mf/defc nav
|
||||
[{:keys [id] :as props}]
|
||||
(let [projects (->> (mf/deref projects-iref)
|
||||
(vals)
|
||||
(sort-by :created-at))]
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:form.dashboard-search
|
||||
[:input.input-text
|
||||
{:key :images-search-box
|
||||
:type "text"
|
||||
:auto-focus true
|
||||
:placeholder (tr "ds.search.placeholder")}]
|
||||
[:div.clear-search i/close]]
|
||||
[:ul.library-elements
|
||||
[:li.recent-projects #_{:on-click #(st/emit! (udp/go-to-project nil))
|
||||
:class-name (when (nil? id) "current")}
|
||||
i/user
|
||||
[:span.element-title "Personal"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (udp/go-to-project nil))
|
||||
:class-name (when (nil? id) "current")}
|
||||
i/file-html
|
||||
[:span.element-title "Drafts"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (udp/go-to-project nil))
|
||||
:class-name (when (nil? id) "current")}
|
||||
i/icon-set
|
||||
[:span.element-title "Libraries"]]
|
||||
|
||||
[:div.projects-row
|
||||
[:span "PROJECTS"]
|
||||
[:a.add-project {:on-click #(st/emit! udp/create-project)}
|
||||
i/close]]
|
||||
|
||||
#_(for [item projects]
|
||||
[:& nav-item {:id (:id item)
|
||||
:key (:id item)
|
||||
:name (:name item)
|
||||
:selected? (= (:id item) id)}])]]]))
|
||||
|
||||
;; --- Component: Content
|
||||
;; --- Component: Project
|
||||
|
||||
(def files-ref
|
||||
(-> (comp (l/key :files)
|
||||
(l/lens vals))
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc content
|
||||
[{:keys [id] :as props}]
|
||||
(def opts-iref
|
||||
(-> (l/key :dashboard-projects)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc project-page
|
||||
[{:keys [section team-id project-id] :as props}]
|
||||
(let [opts (mf/deref opts-iref)
|
||||
files (mf/deref files-ref)]
|
||||
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! (dsh/initialize-project team-id project-id))
|
||||
:deps (mf/deps team-id project-id)})
|
||||
|
||||
[:section.dashboard-grid.library
|
||||
[:& grid {:id id :opts opts :files files}]]))
|
||||
[:& grid {:id project-id :opts opts :files files}]]))
|
||||
|
||||
;; --- Projects Page
|
||||
|
||||
(mf/defc projects-page
|
||||
[{:keys [id] :as props}]
|
||||
(mf/use-effect {:fn #(st/emit! dsh/initialize-drafts)
|
||||
:deps #js [id]})
|
||||
[:section.dashboard-content
|
||||
[:& nav {:id id}]
|
||||
[:& content {:id id}]])
|
||||
144
frontend/src/uxbox/main/ui/dashboard/sidebar.cljs
Normal file
144
frontend/src/uxbox/main/ui/dashboard/sidebar.cljs
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.dashboard.sidebar
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.projects :as udp]
|
||||
[uxbox.main.data.dashboard :as dsh]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.exports :as exports]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.dashboard.common :as common]
|
||||
[uxbox.main.ui.dashboard.header :refer [header]]
|
||||
[uxbox.main.ui.messages :refer [messages-widget]]
|
||||
[uxbox.util.data :refer [read-string parse-int uuid-str?]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as i18n :refer [t tr]]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
;; --- Component: Sidebar
|
||||
|
||||
(mf/defc sidebar-project
|
||||
[{:keys [id name selected? team-id] :as props}]
|
||||
(let [local (mf/use-state {:name name})
|
||||
editable? (not (nil? id))
|
||||
on-click #(st/emit! (rt/nav :dashboard-project {:team-id team-id :project-id id}))
|
||||
on-dbl-click #(when editable? (swap! local assoc :edit true))
|
||||
on-input #(as-> % $
|
||||
(dom/get-target $)
|
||||
(dom/get-value $)
|
||||
(swap! local assoc :name $))
|
||||
on-cancel #(swap! local assoc :edit false :name name)
|
||||
on-keyup #(cond
|
||||
(kbd/esc? %)
|
||||
(on-cancel)
|
||||
|
||||
(kbd/enter? %)
|
||||
(let [name (-> % dom/get-target dom/get-value)]
|
||||
(st/emit! (udp/rename-project id name))
|
||||
(swap! local assoc :edit false)))]
|
||||
|
||||
[:li {:on-click on-click
|
||||
:on-double-click on-dbl-click
|
||||
:class-name (when selected? "current")}
|
||||
(if (:edit @local)
|
||||
[:div
|
||||
[:input.element-title {:value (:name @local)
|
||||
:on-change on-input
|
||||
:on-key-down on-keyup}]
|
||||
[:span.close {:on-click on-cancel} i/close]]
|
||||
[:span.element-title name])]))
|
||||
|
||||
(def projects-iref
|
||||
(-> (l/key :projects)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc sidebar-projects
|
||||
[{:keys [team-id selected-project-id] :as props}]
|
||||
(let [projects (->> (mf/deref projects-iref)
|
||||
(vals)
|
||||
(remove #(:is-default %))
|
||||
(sort-by :created-at))]
|
||||
(for [item projects]
|
||||
[:& sidebar-project
|
||||
{:id (:id item)
|
||||
:key (:id item)
|
||||
:name (:name item)
|
||||
:selected? (= (:id item) selected-project-id)
|
||||
:team-id team-id
|
||||
}])))
|
||||
|
||||
(mf/defc sidear-team
|
||||
[{:keys [profile
|
||||
team-id
|
||||
selected-section
|
||||
selected-project-id
|
||||
selected-team-id] :as props}]
|
||||
(let [home? (and (= selected-section :dashboard-team)
|
||||
(= selected-team-id (:default-team-id profile)))
|
||||
drafts? (and (= selected-section :dashboard-project)
|
||||
(= selected-team-id (:default-team-id profile))
|
||||
(= selected-project-id (:default-project-id profile)))]
|
||||
[:ul.library-elements
|
||||
[:li.recent-projects
|
||||
{:on-click #(st/emit! (rt/nav :dashboard-team {:team-id team-id}))
|
||||
:class-name (when home? "current")}
|
||||
i/user
|
||||
[:span.element-title "Personal"]]
|
||||
|
||||
[:li
|
||||
{:on-click #(st/emit! (rt/nav :dashboard-project {:team-id team-id
|
||||
:project-id "drafts"}))
|
||||
:class-name (when drafts? "current")}
|
||||
i/file-html
|
||||
[:span.element-title "Drafts"]]
|
||||
|
||||
|
||||
[:li
|
||||
i/icon-set
|
||||
[:span.element-title "Libraries"]]
|
||||
|
||||
[:div.projects-row
|
||||
[:span "PROJECTS"]
|
||||
[:a.add-project {:on-click #(st/emit! dsh/create-project)}
|
||||
i/close]]
|
||||
|
||||
[:& sidebar-projects
|
||||
{:selected-team-id selected-team-id
|
||||
:selected-project-id selected-project-id
|
||||
:team-id team-id}]]))
|
||||
|
||||
(mf/defc sidebar
|
||||
[{:keys [section team-id project-id] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
profile (mf/deref refs/profile)]
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:form.dashboard-search
|
||||
[:input.input-text
|
||||
{:key :images-search-box
|
||||
:type "text"
|
||||
:auto-focus true
|
||||
:placeholder (t locale "ds.search.placeholder")}]
|
||||
[:div.clear-search i/close]]
|
||||
[:& sidear-team {:selected-team-id team-id
|
||||
:selected-project-id project-id
|
||||
:selected-section section
|
||||
:profile profile
|
||||
:team-id "self"}]]]))
|
||||
53
frontend/src/uxbox/main/ui/dashboard/team.cljs
Normal file
53
frontend/src/uxbox/main/ui/dashboard/team.cljs
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.dashboard.team
|
||||
(:refer-clojure :exclude [sort-by])
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.common.exceptions :as ex]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.projects :as udp]
|
||||
[uxbox.main.data.dashboard :as dsh]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.exports :as exports]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as i18n :refer [t tr]]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
;; --- Component: Content
|
||||
|
||||
;; (def files-ref
|
||||
;; (-> (comp (l/key :files)
|
||||
;; (l/lens vals))
|
||||
;; (l/derive st/state)))
|
||||
|
||||
;; (def opts-iref
|
||||
;; (-> (l/key :dashboard-projects)
|
||||
;; (l/derive st/state)))
|
||||
|
||||
;; --- Component: Drafts Page
|
||||
|
||||
(mf/defc team-page
|
||||
[{:keys [section team-id] :as props}]
|
||||
(mf/use-effect
|
||||
{:fn #(st/emit! (dsh/initialize-team team-id))
|
||||
:deps (mf/deps team-id)})
|
||||
|
||||
[:section.dashboard-grid.library
|
||||
[:p "TODO"]])
|
||||
Loading…
Add table
Reference in a new issue