penpot/frontend/src/app/main/ui/dashboard/projects.cljs

;; 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/.
;;
;; Copyright (c) UXBOX Labs SL

(ns app.main.ui.dashboard.projects
  (:require
   [app.main.data.dashboard :as dd]
   [app.main.data.events :as ev]
   [app.main.refs :as refs]
   [app.main.store :as st]
   [app.main.ui.dashboard.grid :refer [line-grid]]
   [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
   [app.main.ui.dashboard.project-menu :refer [project-menu]]
   [app.main.ui.icons :as i]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.router :as rt]
   [app.util.time :as dt]
   [cuerdas.core :as str]
   [okulary.core :as l]
   [rumext.alpha :as mf]))

(mf/defc header
  {::mf/wrap [mf/memo]}
  []
  (let [create #(st/emit! (dd/create-project))]
    [:header.dashboard-header
     [:div.dashboard-title
      [:h1 (tr "dashboard.projects-title")]]

     [:a.btn-secondary.btn-small {:on-click create :data-test "new-project-button"}
      (tr "dashboard.new-project")]]))

(mf/defc project-item
  [{:keys [project first? team files] :as props}]
  (let [locale     (mf/deref i18n/locale)
        file-count (or (:count project) 0)

        dstate     (mf/deref refs/dashboard-local)
        edit-id    (:project-for-edit dstate)

        local
        (mf/use-state {:menu-open false
                       :menu-pos nil
                       :edition? (= (:id project) edit-id)})

        on-nav
        (mf/use-callback
         (mf/deps project)
         #(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
                                              :project-id (:id project)})))

        toggle-pin
        (mf/use-callback
         (mf/deps project)
         #(st/emit! (dd/toggle-project-pin project)))

        on-menu-click
        (mf/use-callback (fn [event]
                           (let [position (dom/get-client-position event)]
                             (dom/prevent-default event)
                             (swap! local assoc :menu-open true
                                                :menu-pos position))))

        on-menu-close
        (mf/use-callback #(swap! local assoc :menu-open false))

        on-edit-open
        (mf/use-callback #(swap! local assoc :edition? true))

        on-edit
        (mf/use-callback
         (mf/deps project)
         (fn [name]
           (let [name (str/trim name)]
             (when-not (str/empty? name)
               (st/emit! (-> (dd/rename-project (assoc project :name name))
                             (with-meta {::ev/origin "dashboard"}))))
             (swap! local assoc :edition? false))))

        on-file-created
        (mf/use-callback
         (mf/deps project)
         (fn [data]
           (let [pparams {:project-id (:project-id data)
                          :file-id (:id data)}
                 qparams {:page-id (get-in data [:data :pages 0])}]
             (st/emit! (rt/nav :workspace pparams qparams)))))


        create-file
        (mf/use-callback
         (mf/deps project)
         (fn [origin]
           (let [mdata  {:on-success on-file-created}
                 params {:project-id (:id project)}]
             (st/emit! (with-meta (dd/create-file (with-meta params mdata))
                         {::ev/origin origin})))))

        on-import
        (mf/use-callback
         (mf/deps (:id project) (:id team))
         (fn []
           (st/emit! (dd/fetch-files {:project-id (:id project)})
                     (dd/fetch-recent-files (:id team))
                     (dd/clear-selected-files))))]

    [:div.dashboard-project-row {:class (when first? "first")}
     [:div.project
      (if (:edition? @local)
        [:& inline-edition {:content (:name project)
                            :on-end on-edit}]
        [:h2 {:on-click on-nav
              :on-context-menu on-menu-click}
         (if (:is-default project)
           (tr "labels.drafts")
           (:name project))])

      [:& project-menu {:project project
                        :show? (:menu-open @local)
                        :left (:x (:menu-pos @local))
                        :top (:y (:menu-pos @local))
                        :on-edit on-edit-open
                        :on-menu-close on-menu-close
                        :on-import on-import}]

      [:span.info (str file-count " files")]
      (when (> file-count 0)
        (let [time (-> (:modified-at project)
                       (dt/timeago {:locale locale}))]
          [:span.recent-files-row-title-info (str ", " time)]))

      (when-not (:is-default project)
        [:span.pin-icon.tooltip.tooltip-bottom
         {:class (when (:is-pinned project) "active")
          :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
         (if (:is-pinned project)
           i/pin-fill
           i/pin)])

      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
       {:on-click (partial create-file "dashboard:folder") :alt (tr "dashboard.new-file") :data-test "project-new-file"}
       i/close]

      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
       {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
       i/actions]]

     [:& line-grid
      {:project project
       :team team
       :on-load-more on-nav
       :files files
       :on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")}]]))

(def recent-files-ref
  (l/derived :dashboard-recent-files st/state))

(mf/defc projects-section
  [{:keys [team projects] :as props}]
  (let [projects   (->> (vals projects)
                        (sort-by :modified-at)
                        (reverse))
        recent-map (mf/deref recent-files-ref)]

    (mf/use-effect
     (mf/deps team)
     (fn []
       (let [tname (if (:is-default team)
                     (tr "dashboard.your-penpot")
                     (:name team))]
         (dom/set-html-title (tr "title.dashboard.projects" tname)))))

    (mf/use-effect
     (mf/deps (:id team))
     (fn []
       (st/emit! (dd/fetch-recent-files (:id team))
                 (dd/clear-selected-files))))

    (when (seq projects)
      [:*
       [:& header]
       [:section.dashboard-container
        (for [{:keys [id] :as project} projects]
          (let [files (when recent-map
                        (->> (vals recent-map)
                             (filterv #(= id (:project-id %)))
                             (sort-by :modified-at #(compare %2 %1))))]
            [:& project-item {:project project
                              :team team
                              :files files
                              :first? (= project (first projects))
                              :key (:id project)}]))]])))