Move all files under frontend directory.

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -0,0 +1,364 @@
+;; 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.main.ui.dashboard.projects
+  (:require [lentes.core :as l]
+            [cuerdas.core :as str]
+            [uxbox.main.state :as st]
+            [uxbox.main.data.projects :as udp]
+            [uxbox.main.data.lightbox :as udl]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.main.ui.dashboard.header :refer (header)]
+            [uxbox.main.ui.lightbox :as lbx]
+            [uxbox.main.ui.messages :as uum]
+            [uxbox.main.ui.keyboard :as kbd]
+            [uxbox.main.exports :as exports]
+            [uxbox.util.i18n :as t :refer (tr)]
+            [uxbox.util.router :as r]
+            [uxbox.util.rstore :as rs]
+            [uxbox.util.data :refer (read-string)]
+            [uxbox.util.dom :as dom]
+            [uxbox.util.blob :as blob]
+            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.util.datetime :as dt]))
+
+;; --- Helpers & Constants
+
+(def ^:private +project-defaults+
+  {:name ""
+   :width 1920
+   :height 1080
+   :layout "desktop"})
+
+(def +layouts+
+  {"mobile"
+   {:name "Mobile"
+    :id "mobile"
+    :width 320
+    :height 480}
+   "tablet"
+   {:name "Tablet"
+    :id "tablet"
+    :width 1024
+    :height 768}
+   "notebook"
+   {:name "Notebook"
+    :id "notebook"
+    :width 1366
+    :height 768}
+   "desktop"
+   {:name "Desktop"
+    :id "desktop"
+    :width 1920
+    :height 1080}})
+
+(def +ordering-options+
+  {:name "ds.project-ordering.by-name"
+   :created "ds.project-ordering.by-creation-date"})
+
+;; --- Refs
+
+(def projects-map-ref
+  (-> (l/key :projects)
+      (l/derive st/state)))
+
+(def dashboard-ref
+  (-> (l/in [:dashboard :projects])
+      (l/derive st/state)))
+
+(def project-ordering-ref
+  (-> (l/key :project-order)
+      (l/derive dashboard-ref)))
+
+(def project-filtering-ref
+  (-> (l/in [:project-filter])
+      (l/derive dashboard-ref)))
+
+;; --- Helpers
+
+(defn sort-projects-by
+  [ordering projs]
+  (case ordering
+    :name (sort-by :name projs)
+    :created (reverse (sort-by :created-at projs))
+    projs))
+
+(defn contains-term?
+  [phrase term]
+  (let [term (name term)]
+    (str/includes? (str/lower phrase) (str/trim (str/lower term)))))
+
+(defn filter-projects-by
+  [term projs]
+  (if (str/blank? term)
+    projs
+    (filter #(contains-term? (:name %) term) projs)))
+
+;; --- Menu (Filter & Sort)
+
+(mx/defc menu
+  {:mixins [mx/static]}
+  [state projects]
+  (let [ordering (:order state :created)
+        filtering (:filter state "")
+        count (count projects)]
+    (letfn [(on-term-change [event]
+              (let [term (-> (dom/get-target event)
+                             (dom/get-value))]
+                (rs/emit! (udp/update-opts :filter term))))
+            (on-ordering-change [event]
+              (let [value (dom/event->value event)
+                    value (read-string value)]
+                (rs/emit! (udp/update-opts :order value))))
+            (on-clear [event]
+              (rs/emit! (udp/update-opts :filter "")))]
+      [:section.dashboard-bar
+       [:div.dashboard-info
+
+        ;; Counter
+        [:span.dashboard-images (tr "ds.num-projects" (t/c count))]
+
+        ;; Sorting
+        [:div
+         [:span (tr "ds.project-ordering")]
+         [:select.input-select
+          {:on-change on-ordering-change
+           :value (pr-str ordering)}
+          (for [[key value] (seq +ordering-options+)
+                :let [ovalue (pr-str key)
+                      olabel (tr value)]]
+            [:option {:key ovalue :value ovalue} olabel])]]
+        ;; Search
+        [:form.dashboard-search
+         [:input.input-text
+          {:key :images-search-box
+           :type "text"
+           :on-change on-term-change
+           :auto-focus true
+           :placeholder (tr "ds.project-search.placeholder")
+           :value (or filtering "")}]
+         [:div.clear-search {:on-click on-clear} i/close]]]])))
+
+;; --- Grid Item Thumbnail
+
+(defn- grid-item-thumbnail-will-mount
+  [own]
+  (let [[project] (:rum/args own)
+        svg (exports/render-page* (:page-id project))
+        url (some-> svg
+                    (blob/create "image/svg+xml")
+                    (blob/create-uri))]
+    (assoc own ::url url)))
+
+(defn- grid-item-thumbnail-will-unmount
+  [own]
+  (let [url (::url own)]
+    (when url (blob/revoke-uri url))
+    own))
+
+(mx/defcs grid-item-thumbnail
+  {:mixins [mx/static]
+   :will-mount grid-item-thumbnail-will-mount
+   :will-unmount grid-item-thumbnail-will-unmount}
+  [own project]
+  (if-let [url (::url own)]
+    [:div.grid-item-th
+     {:style {:background-image (str "url('" url "')")}}]
+    [:div.grid-item-th
+     {:style {:background-image "url('/images/project-placeholder.svg')"}}]))
+
+;; --- Grid Item
+
+(mx/defcs grid-item
+  {:mixins [mx/static (mx/local)]}
+  [{:keys [rum/local] :as own} project]
+  (letfn [(on-navigate [event]
+            (rs/emit! (udp/go-to (:id project))))
+          (delete []
+            (rs/emit! (udp/delete-project project)))
+          (on-delete [event]
+            (dom/stop-propagation event)
+            (udl/open! :confirm {:on-accept delete}))
+          (on-key-down [event]
+            (when (kbd/enter? event)
+              (on-blur event)))
+          (on-blur [event]
+            (let [target (dom/event->target event)
+                  name (dom/get-value target)
+                  id (:id project)]
+              (swap! local assoc :edition false)
+              (rs/emit! (udp/rename-project id name))))
+          (on-edit [event]
+            (dom/stop-propagation event)
+            (dom/prevent-default event)
+            (swap! local assoc :edition true))]
+    [:div.grid-item.project-th {:on-click on-navigate}
+     (grid-item-thumbnail project)
+     [:div.item-info
+      (if (:edition @local)
+        [:input {:type "text"
+                 :auto-focus true
+                 :on-key-down on-key-down
+                 :on-blur on-blur
+                 :on-click on-edit
+                 :default-value (:name project)}]
+        [:h3 (:name project)])
+      [:span.date
+       (str "Updated " (dt/timeago (:modified-at project)))]]
+     [:div.project-th-actions
+      [:div.project-th-icon.pages
+       i/page
+       [:span (:total-pages project)]]
+      #_[:div.project-th-icon.comments
+         i/chat
+         [:span "0"]]
+      [:div.project-th-icon.edit
+       {:on-click on-edit}
+       i/pencil]
+      [:div.project-th-icon.delete
+       {:on-click on-delete}
+       i/trash]]]))
+
+;; --- Grid
+
+(mx/defc grid
+  {:mixins [mx/static]}
+  [state projects]
+  (let [ordering (:order state :created)
+        filtering (:filter state "")
+        projects (->> (vals projects)
+                      (filter-projects-by filtering)
+                      (sort-projects-by ordering))]
+    (letfn [(on-click [e]
+              (dom/prevent-default e)
+              (udl/open! :new-project))]
+      [:section.dashboard-grid
+       [:h2 "Your projects"]
+       [:div.dashboard-grid-content
+        [:div.dashboard-grid-row
+         [:div.grid-item.add-project
+          {:on-click on-click}
+          [:span "+ New project"]]
+         (for [item projects]
+           (-> (grid-item item)
+               (mx/with-key (:id item))))]]])))
+
+;; --- Projects Page
+
+(defn projects-page-will-mount
+  [own]
+  (rs/emit! (udp/initialize))
+  own)
+
+(defn projects-page-did-remount
+  [old-own own]
+  (rs/emit! (udp/initialize))
+  own)
+
+(mx/defc projects-page
+  {:will-mount projects-page-will-mount
+   :did-remount projects-page-did-remount
+   :mixins [mx/static mx/reactive]}
+  []
+  (let [state (mx/react dashboard-ref)
+        projects-map (mx/react projects-map-ref)]
+    [:main.dashboard-main
+     (uum/messages)
+     (header)
+     [:section.dashboard-content
+      (menu state projects-map)
+      (grid state projects-map)]]))
+
+;; --- Lightbox: Layout input
+
+(mx/defc layout-input
+  [local layout-id]
+  (let [layout (get-in +layouts+ [layout-id])
+        id (:id layout)
+        name (:name layout)
+        width (:width layout)
+        height (:height layout)]
+    [:div
+     [:input
+      {:type "radio"
+       :key id
+       :id id
+       :name "project-layout"
+       :value name
+       :checked (= layout-id (:layout @local))
+       :on-change #(swap! local merge {:layout layout-id
+                                       :width width
+                                       :height height})}]
+     [:label {:value (:name @local) :for id} name]]))
+
+;; --- Lightbox: Layout selector
+
+(mx/defc layout-selector
+  [local]
+  [:div.input-radio.radio-primary
+   (layout-input local "mobile")
+   (layout-input local "tablet")
+   (layout-input local "notebook")
+   (layout-input local "desktop")])
+
+;; -- New Project Lightbox
+
+(mx/defcs new-project-lightbox
+  {:mixins [(mx/local +project-defaults+)]}
+  [own]
+  (let [local (:rum/local own)
+        name (:name @local)
+        width (:width @local)
+        height (:height @local)]
+    [:div.lightbox-body
+     [:h3 "New project"]
+     [:form {:on-submit (constantly nil)}
+      [:input#project-name.input-text
+        {:placeholder "New project name"
+         :type "text"
+         :value name
+         :auto-focus true
+         :on-change #(swap! local assoc :name (.-value (.-target %)))}]
+      [:div.project-size
+       [:input#project-witdh.input-text
+        {:placeholder "Width"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value width
+         :on-change #(swap! local assoc :width (.-value (.-target %)))}]
+       [:a.toggle-layout
+        {:href "#"
+         :on-click #(swap! local assoc :width width :height height)}
+        i/toggle]
+       [:input#project-height.input-text
+        {:placeholder "Height"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value height
+         :on-change #(swap! local assoc :height (.-value (.-target %)))}]]
+      ;; Layout selector
+      (layout-selector local)
+      ;; Submit
+      (when-not (empty? (str/trim name))
+        [:input#project-btn.btn-primary
+         {:value "Go go go!"
+          :on-click #(do
+                       (dom/prevent-default %)
+                       (rs/emit! (udp/create-project @local))
+                       (udl/close!))
+
+          :type "submit"}])]
+     [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (udl/close!))}
+      i/close]]))
+
+(defmethod lbx/render-lightbox :new-project
+  [_]
+  (new-project-lightbox))