mirror of
https://github.com/penpot/penpot.git
synced 2025-07-30 11:48:26 +02:00
🎉 Add shared libraries screen in dashboard
This commit is contained in:
Andrés Moya
parent
9fb821d6e0
commit
1dfab78686
8 changed files with 190 additions and 68 deletions
|
|
@ -74,6 +74,7 @@
|
|||
(declare fetch-files)
|
||||
(declare fetch-projects)
|
||||
(declare fetch-recent-files)
|
||||
(declare fetch-shared-files)
|
||||
|
||||
(def initialize-drafts
|
||||
(ptk/reify ::initialize-drafts
|
||||
|
|
@ -95,7 +96,7 @@
|
|||
(defn initialize-recent
|
||||
[team-id]
|
||||
(us/verify ::us/uuid team-id)
|
||||
(ptk/reify ::initialize-team
|
||||
(ptk/reify ::initialize-recent
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local assoc
|
||||
|
|
@ -128,6 +129,25 @@
|
|||
(rx/of (fetch-projects (:team-id local) nil)
|
||||
(fetch-files (:project-id local)))))))
|
||||
|
||||
|
||||
(defn initialize-libraries
|
||||
[team-id]
|
||||
(us/verify ::us/uuid team-id)
|
||||
(ptk/reify ::initialize-libraries
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local assoc
|
||||
:project-for-edit nil
|
||||
:project-id nil
|
||||
:team-id team-id))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [local (:dashboard-local state)]
|
||||
(rx/of (fetch-projects (:team-id local) nil)
|
||||
(fetch-shared-files (:team-id local)))))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Data Fetching
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -202,6 +222,29 @@
|
|||
files (d/index-by :id files)]
|
||||
(assoc state :files files)))))
|
||||
|
||||
;; --- Fetch Shared Files
|
||||
|
||||
(declare shared-files-fetched)
|
||||
|
||||
(defn fetch-shared-files
|
||||
[]
|
||||
(ptk/reify ::fetch-shared-files
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [params {}]
|
||||
(->> (rp/query :shared-files params)
|
||||
(rx/map shared-files-fetched))))))
|
||||
|
||||
(defn shared-files-fetched
|
||||
[files]
|
||||
(us/verify (s/every ::file) files)
|
||||
(ptk/reify ::shared-files-fetched
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [state (dissoc state :files)
|
||||
files (d/index-by :id files)]
|
||||
(assoc state :files files)))))
|
||||
|
||||
;; --- Fetch recent files
|
||||
|
||||
(declare recent-files-fetched)
|
||||
|
|
|
|||
|
|
@ -64,20 +64,22 @@
|
|||
["/" :dashboard-team]
|
||||
["/search" :dashboard-search]
|
||||
["/project/:project-id" :dashboard-project]
|
||||
["/library"
|
||||
["/icons"
|
||||
["" { :name :dashboard-library-icons-index :section :icons}]
|
||||
["/:library-id" { :name :dashboard-library-icons :section :icons}]]
|
||||
["/libraries" :dashboard-libraries]
|
||||
|
||||
["/images"
|
||||
["" { :name :dashboard-library-images-index :section :images}]
|
||||
["/:library-id" { :name :dashboard-library-images :section :images}]]
|
||||
;; ["/library"
|
||||
;; ["/icons"
|
||||
;; ["" { :name :dashboard-library-icons-index :section :icons}]
|
||||
;; ["/:library-id" { :name :dashboard-library-icons :section :icons}]]
|
||||
;;
|
||||
;; ["/images"
|
||||
;; ["" { :name :dashboard-library-images-index :section :images}]
|
||||
;; ["/:library-id" { :name :dashboard-library-images :section :images}]]
|
||||
;;
|
||||
;; ["/palettes"
|
||||
;; ["" { :name :dashboard-library-palettes-index :section :palettes}]
|
||||
;; ["/:library-id" { :name :dashboard-library-palettes :section :palettes }]]]
|
||||
|
||||
["/palettes"
|
||||
["" { :name :dashboard-library-palettes-index :section :palettes}]
|
||||
["/:library-id" { :name :dashboard-library-palettes :section :palettes }]]
|
||||
|
||||
]]]
|
||||
]]
|
||||
|
||||
["/workspace/:project-id/:file-id" :workspace]])
|
||||
|
||||
|
|
@ -119,12 +121,13 @@
|
|||
(:dashboard-search
|
||||
:dashboard-team
|
||||
:dashboard-project
|
||||
:dashboard-library-icons
|
||||
:dashboard-library-icons-index
|
||||
:dashboard-library-images
|
||||
:dashboard-library-images-index
|
||||
:dashboard-library-palettes
|
||||
:dashboard-library-palettes-index)
|
||||
:dashboard-libraries)
|
||||
;; :dashboard-library-icons
|
||||
;; :dashboard-library-icons-index
|
||||
;; :dashboard-library-images
|
||||
;; :dashboard-library-images-index
|
||||
;; :dashboard-library-palettes
|
||||
;; :dashboard-library-palettes-index)
|
||||
[:& dashboard {:route route}]
|
||||
|
||||
:viewer
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
[uxbox.main.ui.dashboard.search :refer [search-page]]
|
||||
[uxbox.main.ui.dashboard.project :refer [project-page]]
|
||||
[uxbox.main.ui.dashboard.recent-files :refer [recent-files-page]]
|
||||
[uxbox.main.ui.dashboard.library :refer [library-page]]
|
||||
[uxbox.main.ui.dashboard.libraries :refer [libraries-page]]
|
||||
;; [uxbox.main.ui.dashboard.library :refer [library-page]]
|
||||
[uxbox.main.ui.dashboard.profile :refer [profile-section]]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.i18n :as i18n :refer [t]]))
|
||||
|
|
@ -36,8 +37,8 @@
|
|||
(let [search-term (get-in route [:params :query :search-term])
|
||||
route-name (get-in route [:data :name])
|
||||
team-id (get-in route [:params :path :team-id])
|
||||
project-id (get-in route [:params :path :project-id])
|
||||
library-id (get-in route [:params :path :library-id])]
|
||||
project-id (get-in route [:params :path :project-id])]
|
||||
;; library-id (get-in route [:params :path :library-id])]
|
||||
(cond->
|
||||
{:search-term search-term}
|
||||
|
||||
|
|
@ -48,13 +49,13 @@
|
|||
(assoc :project-id (uuid project-id))
|
||||
|
||||
(= "drafts" project-id)
|
||||
(assoc :project-id (:default-project-id profile))
|
||||
(assoc :project-id (:default-project-id profile)))))
|
||||
|
||||
(str/starts-with? (name route-name) "dashboard-library")
|
||||
(assoc :library-section (get-in route [:data :section]))
|
||||
|
||||
(uuid-str? library-id)
|
||||
(assoc :library-id (uuid library-id)))))
|
||||
;; (str/starts-with? (name route-name) "dashboard-library")
|
||||
;; (assoc :library-section (get-in route [:data :section]))
|
||||
;;
|
||||
;; (uuid-str? library-id)
|
||||
;; (assoc :library-id (uuid library-id)))))
|
||||
|
||||
(declare global-notifications)
|
||||
|
||||
|
|
@ -63,7 +64,8 @@
|
|||
[{:keys [route] :as props}]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
page (get-in route [:data :name])
|
||||
{:keys [search-term team-id project-id library-id library-section] :as params}
|
||||
;; {:keys [search-term team-id project-id library-id library-section] :as params}
|
||||
{:keys [search-term team-id project-id] :as params}
|
||||
(parse-params route profile)]
|
||||
[:*
|
||||
[:& global-notifications {:profile profile}]
|
||||
|
|
@ -84,16 +86,19 @@
|
|||
:dashboard-team
|
||||
[:& recent-files-page {:team-id team-id}]
|
||||
|
||||
(:dashboard-library-icons
|
||||
:dashboard-library-icons-index
|
||||
:dashboard-library-images
|
||||
:dashboard-library-images-index
|
||||
:dashboard-library-palettes
|
||||
:dashboard-library-palettes-index)
|
||||
[:& library-page {:key (str library-id)
|
||||
:team-id team-id
|
||||
:library-id library-id
|
||||
:section library-section}]
|
||||
:dashboard-libraries
|
||||
[:& libraries-page {:team-id team-id}]
|
||||
|
||||
;; (:dashboard-library-icons
|
||||
;; :dashboard-library-icons-index
|
||||
;; :dashboard-library-images
|
||||
;; :dashboard-library-images-index
|
||||
;; :dashboard-library-palettes
|
||||
;; :dashboard-library-palettes-index)
|
||||
;; [:& library-page {:key (str library-id)
|
||||
;; :team-id team-id
|
||||
;; :library-id library-id
|
||||
;; :section library-section}]
|
||||
|
||||
:dashboard-project
|
||||
[:& project-page {:team-id team-id
|
||||
|
|
|
|||
44
frontend/src/uxbox/main/ui/dashboard/libraries.cljs
Normal file
44
frontend/src/uxbox/main/ui/dashboard/libraries.cljs
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
;; 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 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.dashboard.libraries
|
||||
(:require
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.util.i18n :as i18n :refer [tr]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.main.data.dashboard :as dsh]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.confirm :refer [confirm-dialog]]
|
||||
[uxbox.main.ui.components.context-menu :refer [context-menu]]
|
||||
[uxbox.main.ui.dashboard.grid :refer [grid]]))
|
||||
|
||||
(def files-ref
|
||||
(-> (comp vals :files)
|
||||
(l/derived st/state)))
|
||||
|
||||
(mf/defc libraries-page
|
||||
[{:keys [section team-id] :as props}]
|
||||
(let [files (->> (mf/deref files-ref)
|
||||
(sort-by :modified-at)
|
||||
(reverse))]
|
||||
(mf/use-effect
|
||||
(mf/deps section team-id)
|
||||
#(st/emit! (dsh/initialize-libraries team-id)))
|
||||
|
||||
[:*
|
||||
[:header.main-bar
|
||||
[:h1.dashboard-title (tr "dashboard.header.libraries")]]
|
||||
[:section.libraries-page
|
||||
[:& grid {:files files :hide-new? true}]]]))
|
||||
|
||||
|
|
@ -104,13 +104,14 @@
|
|||
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)))
|
||||
library? (and (str/starts-with? (name selected-section) "dashboard-library")
|
||||
(= selected-team-id (:default-team-id profile)))
|
||||
(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)))
|
||||
libraries? (= selected-section :dashboard-libraries)
|
||||
;; library? (and (str/starts-with? (name selected-section) "dashboard-library")
|
||||
;; (= selected-team-id (:default-team-id profile)))
|
||||
locale (i18n/use-locale)]
|
||||
[:div.sidebar-team
|
||||
[:ul.library-elements.library-common
|
||||
|
|
@ -128,8 +129,8 @@
|
|||
[:span.element-title (t locale "dashboard.sidebar.drafts")]]
|
||||
|
||||
[:li
|
||||
{:on-click #(st/emit! (rt/nav :dashboard-library-icons-index {:team-id team-id}))
|
||||
:class-name (when library? "current")}
|
||||
{:on-click #(st/emit! (rt/nav :dashboard-libraries {:team-id team-id}))
|
||||
:class-name (when libraries? "current")}
|
||||
i/icon-set
|
||||
[:span.element-title (t locale "dashboard.sidebar.libraries")]]]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue