v7.45

Thanks to C0rn3j and xet7 !

Fixes #5395

.babelrc

@@ -1,5 +1,12 @@
 { 
   "presets": [ 
     "@babel/preset-stage-3" 
-  ]
+  ],
+  "env": {
+    "COVERAGE": {
+      "plugins": [
+        "istanbul"
+      ]
+    }
+  }
 }

.devcontainer/Dockerfile

@@ -1,17 +1,17 @@
-FROM quay.io/wekan/ubuntu:groovy-20201125.2
+FROM ubuntu:21.10
 LABEL maintainer="sgr"
 
-# 2020-12-03:
-# - Above Ubuntu base image copied from Docker Hub ubuntu:groovy-20201125.2
-#   to Quay to avoid Docker Hub rate limits.
+# 2022-04-25:
+# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
+#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
 
-ENV BUILD_DEPS="gnupg gosu bsdtar wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
+ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python3 git ca-certificates iproute2"
 ENV DEBIAN_FRONTEND=noninteractive
 
 ENV \
     DEBUG=false \
-    NODE_VERSION=v12.22.0 \
-    METEOR_RELEASE=1.10.2 \
+    NODE_VERSION=v14.21.4 \
+    METEOR_RELEASE=METEOR@2.13 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
     NPM_VERSION=latest \
@@ -20,15 +20,23 @@ ENV \
     SRC_PATH=./ \
     WITH_API=true \
     RESULTS_PER_PAGE="" \
+    DEFAULT_BOARD_ID="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE=3 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
+    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
     RICHER_CARD_COMMENT_EDITOR=false \
     CARD_OPENED_WEBHOOK_ENABLED=false \
     ATTACHMENTS_STORE_PATH="" \
+    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
+    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
+    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
+    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
+    AVATARS_UPLOAD_MIME_TYPES="" \
+    AVATARS_UPLOAD_MAX_SIZE=0 \
     MAX_IMAGE_PIXEL="" \
     IMAGE_COMPRESS_RATIO="" \
     NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
@@ -46,6 +54,7 @@ ENV \
     OAUTH2_ENABLED=false \
     OAUTH2_CA_CERT="" \
     OAUTH2_ADFS_ENABLED=false \
+    OAUTH2_B2C_ENABLED=false \
     OAUTH2_LOGIN_STYLE=redirect \
     OAUTH2_CLIENT_ID="" \
     OAUTH2_SECRET="" \
@@ -134,23 +143,39 @@ ENV \
     SAML_PUBLIC_CERTFILE="" \
     SAML_IDENTIFIER_FORMAT="" \
     SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
-    SAML_ATTRIBUTES=""
+    SAML_ATTRIBUTES="" \
+    DEFAULT_WAIT_SPINNER="" \
+    S3=""
+# \
+#    NODE_OPTIONS="--max_old_space_size=4096"
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
 
 # Install OS
 RUN set -o xtrace \
   && useradd --user-group -m --system --home-dir /home/wekan wekan \
   && apt-get update \
-	&& apt-get install --assume-yes --no-install-recommends apt-utils apt-transport-https ca-certificates 2>&1 \
-	&& apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
+  && apt-get install --assume-yes --no-install-recommends apt-utils apt-transport-https ca-certificates 2>&1 \
+  && apt-get install --assume-yes --no-install-recommends ${BUILD_DEPS}
+
+# OLD:
+#  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/node-$NODE_VERSION-$ARCHITECTURE.tar.xz" \
+#  && curl -fsSLO --compressed "https://nodejs.org/dist/$NODE_VERSION/SHASUMS256.txt.asc" \
 
 # Install NodeJS
 RUN set -o xtrace \
   && cd /tmp \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" \
-  && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/SHASUMS256.txt.asc" \
-  && grep " node-v$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt.asc | sha256sum -c - \
-  && tar -xJf "node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
-  && rm "node-v$NODE_VERSION-$ARCHITECTURE.tar.xz" SHASUMS256.txt.asc \
+  && curl -fsSLO --compressed "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.xz" \
+  && curl -fsSLO --compressed "https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt" \
+  && grep " node-$NODE_VERSION-$ARCHITECTURE.tar.xz\$" SHASUMS256.txt | sha256sum -c - \
+  && tar -xJf "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" -C /usr/local --strip-components=1 --no-same-owner \
+  && rm "node-$NODE_VERSION-$ARCHITECTURE.tar.xz" SHASUMS256.txt \
   && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
   && mkdir -p /usr/local/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config \
   && npm install -g npm@${NPM_VERSION} \
@@ -172,17 +197,88 @@ RUN set -o xtrace \
 
 ENV PATH=$PATH:/home/wekan/.meteor/
 
-# Copy source dir
 USER root
 
 RUN echo "export PATH=$PATH" >> /etc/environment
 
-RUN set -o xtrace \
-  && mkdir /home/wekan/app
+USER wekan
 
-COPY ${SRC_PATH} /home/wekan/app/
+# Copy source dir
+RUN set -o xtrace \
+  && mkdir -p /home/wekan/app/.meteor \
+  && mkdir -p /home/wekan/app/packages
+
+COPY \
+    .meteor/.finished-upgraders \
+    .meteor/.id \
+    .meteor/cordova-plugins \
+    .meteor/packages \
+    .meteor/platforms \
+    .meteor/release \
+    .meteor/versions \
+    /home/wekan/app/.meteor/
+
+COPY \
+    package.json \
+    settings.json \
+    /home/wekan/app/
+
+COPY \
+    tests \
+    /home/wekan/app/tests/
+
+COPY \
+    packages \
+    /home/wekan/app/packages/
+
+USER root
 
 RUN set -o xtrace \
   && chown -R wekan:wekan /home/wekan/app /home/wekan/.meteor
 
 USER wekan
+
+RUN \
+    set -o xtrace && \
+    # Build app
+    cd /home/wekan/app && \
+    /home/wekan/.meteor/meteor add standard-minifier-js && \
+    /home/wekan/.meteor/meteor npm install && \
+    /home/wekan/.meteor/meteor build --directory /home/wekan/app_build
+
+RUN \
+    set -o xtrace && \
+    cd /home/wekan/app_build/bundle/programs/server/ && \
+    chmod u+w package.json npm-shrinkwrap.json && \
+    npm install && \
+    cd node_modules/fibers && \
+    node build.js
+
+USER root
+# Cleanup
+RUN \
+    set -o xtrace && \
+    apt-get clean -y && \
+    apt-get autoremove -y && \
+    rm -Rf /tmp/* && \
+    rm -Rf /home/wekan/app_build && \
+    rm -Rf /var/cache/apt /var/lib/apt/lists && \
+    rm -Rf /var/lib/apt/lists/*
+
+USER wekan
+
+ENV PORT=3000
+EXPOSE $PORT
+WORKDIR /home/wekan/app
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
+#TODO:
+#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
+
+CMD ["/home/wekan/.meteor/meteor", "run", "--verbose", "--settings", "settings.json"]

.devcontainer/build.sh

@@ -9,4 +9,6 @@ cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/pa
 cd .build/bundle/programs/server
 rm -rf node_modules
 /home/wekan/.meteor/meteor npm install
+cd node_modules/fibers
+node build.js
 cd /home/wekan/app

.devcontainer/docker-compose.yml

@@ -3,17 +3,18 @@ version: '3.7'
 services:
 
   wekandb-dev:
-    image: mongo:4.0.12
+    image: mongo:6
     container_name: wekan-dev-db
     restart: unless-stopped
-    command: mongod --smallfiles --oplogSize 128
+    command: mongod --oplogSize 128
     networks:
       - wekan-dev-tier
     expose:
       - 27017
     volumes:
-      - wekan-dev-db:/data/db
-      - wekan-dev-db-dump:/dump
+      - /etc/localtime:/etc/localtime:ro
+      - ./volumes/wekan-db:/data/db
+      - ./volumes/wekan-db-dump:/dump
 
   wekan-dev:
     container_name: wekan-dev-app
@@ -32,18 +33,18 @@ services:
       - WITH_API=true
       - RICHER_CARD_COMMENT_EDITOR=true
       - BROWSER_POLICY_ENABLED=true
+      - WRITABLE_PATH=/data
     depends_on:
       - wekandb-dev
     volumes:
-      - ..:/app:delegated
-    command:
-      sleep infinity
-
-volumes:
-  wekan-dev-db:
-    driver: local
-  wekan-dev-db-dump:
-    driver: local
+      - /etc/localtime:/etc/localtime:ro
+      - ./volumes/data:/data
+      - ../client:/home/wekan/app/client
+      - ../models:/home/wekan/app/models
+      - ../config:/home/wekan/app/config
+      - ../imports:/home/wekan/app/imports
+      - ../server:/home/wekan/app/server
+      - ../public:/home/wekan/app/public
 
 networks:
   wekan-dev-tier:

.dockerignore

@@ -0,0 +1,36 @@
+*~
+*.swp
+.meteor-spk
+*.sublime-workspace
+tmp/
+node_modules/
+npm-debug.log
+.gitmodules
+.vscode/
+.idea/
+.build/*
+**/parts/
+**/stage
+**/prime
+**/*.snap
+snap/.snapcraft/
+.idea
+.DS_Store
+.DS_Store?
+.build*
+*.browserify.js.cached
+*.browserify.js.map
+.build*
+versions.json
+.versions
+.npm
+.build*
+._*
+.Trashes
+Thumbs.db
+ehthumbs.db
+.eslintcache
+.meteor/local
+.devcontainer/docker-compose.extend.yml
+.devcontainer/volumes*/
+.git

.eslintrc.json

@@ -122,6 +122,7 @@
     "Activities": true,
     "Attachments": true,
     "Boards": true,
+    "CardCommentReactions": true,
     "CardComments": true,
     "DatePicker": true,
     "Cards": true,
@@ -156,6 +157,7 @@
     "Integrations": true,
     "HTTP": true,
     "AccountSettings": true,
+    "TableVisibilityModeSettings": true,
     "Announcements": true,
     "Swimlanes": true,
     "ChecklistItems": true,

.future-snap/broken-snapcraft.yaml

@@ -81,7 +81,7 @@ parts:
     wekan:
         source: .
         plugin: nodejs
-        node-engine: 12.22.0
+        node-engine: 14.21.3
         node-packages:
             - node-gyp
             - node-pre-gyp

.future-snap/old-snapcraft.yaml

@@ -0,0 +1,155 @@
+name: wekan
+version: git
+summary: The open-source kanban
+description: |
+   Wekan is an open-source and collaborative kanban board application.
+
+   Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
+   Depending on target environment, some configuration settings might need to be adjusted.
+   For full list of configuration options call:
+   $ wekan.help
+
+confinement: strict
+grade: stable
+base: core18
+
+architectures:
+  - amd64
+
+plugs:
+  mongodb-plug:
+    interface: content
+    target: $SNAP_DATA/shared
+
+hooks:
+  configure:
+    plugs:
+      - network
+      - network-bind
+
+slots:
+  mongodb-slot:
+    interface: content
+    write:
+      - $SNAP_DATA/share
+
+apps:
+    wekan:
+        command: wekan-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    mongodb:
+        command: mongodb-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    caddy:
+        command: caddy-control
+        daemon: simple
+        plugs: [network, network-bind]
+
+    help:
+        command: wekan-help
+
+    database-backup:
+        command: mongodb-backup
+        plugs: [network, network-bind]
+
+    database-list-backups:
+        command: ls -al $SNAP_COMMON/db-backups/
+
+    database-restore:
+        command: mongodb-restore
+        plugs: [network, network-bind]
+
+parts:
+    mongodb:
+        source: https://repo.mongodb.org/apt/ubuntu/dists/xenial/mongodb-org/4.2/multiverse/binary-amd64/mongodb-org-server_4.2.2_amd64.deb
+        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.14.tgz
+        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-3.2.22.tgz
+        plugin: dump
+        stage-packages: [libssl1.0.0, libcurl3]
+        filesets:
+            mongo:
+                - usr
+                - bin
+                - lib
+        stage:
+            - $mongo
+        prime:
+            - $mongo
+
+    wekan:
+        source: .
+        plugin: nodejs
+        node-engine: 14.19.0
+        node-packages:
+            - node-gyp
+            - node-pre-gyp
+            - fibers
+        build-packages:
+            - ca-certificates
+            - apt-utils
+            - build-essential
+            - python
+            - python3
+            - g++
+            - capnproto
+            - curl
+            - libcurl3
+            - execstack
+            - nodejs
+            - npm
+        stage-packages:
+            - libfontconfig1
+        override-build: |
+            echo "Cleaning environment first"
+            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
+            rm -rf .build
+            echo "Installing meteor"
+            curl https://install.meteor.com/ -o install_meteor.sh
+            chmod +x install_meteor.sh
+            sh install_meteor.sh
+            rm install_meteor.sh
+            rm -rf .build
+            meteor add standard-minifier-js --allow-superuser
+            meteor npm install --allow-superuser
+            meteor npm install --allow-superuser --save babel-runtime
+            meteor build .build --directory --allow-superuser
+            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
+            cd .build/bundle/programs/server
+            npm install
+            npm install --allow-superuser --save babel-runtime
+            # Change back to Wekan source directory
+            cd ../../../..
+            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
+            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
+            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
+
+        organize:
+            README: README.wekan
+        prime:
+            - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
+
+    helpers:
+        source: snap-src
+        plugin: dump
+
+    caddy:
+        plugin: dump
+        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
+        source-type: tar
+        organize:
+          caddy: bin/caddy
+          CHANGES.txt: CADDY_CHANGES.txt
+          EULA.txt: CADDY_EULA.txt
+          LICENSES.txt: CADDY_LICENSES.txt
+          README.txt: CADDY_README.txt
+        stage:
+          - -init

.future-snap/snapcraft.yaml

@@ -1,8 +1,9 @@
 name: wekan
-version: git
-summary: The open-source kanban
+version: '6.21'
+base: core20
+summary: Open Source kanban
 description: |
-   Wekan is an open-source and collaborative kanban board application.
+   WeKan ® is an Open Source and collaborative kanban board application.
 
    Whether you’re maintaining a personal todo list, planning your holidays with some friends, or working in a team on your next revolutionary idea, Kanban boards are an unbeatable tool to keep your things organized. They give you a visual overview of the current state of your project, and make you productive by allowing you to focus on the few items that matter the most.
    Depending on target environment, some configuration settings might need to be adjusted.
@@ -11,10 +12,19 @@ description: |
 
 confinement: strict
 grade: stable
-base: core18
 
 architectures:
-  - amd64
+  - build-on: amd64
+    run-on: amd64
+
+  - build-on: arm64
+    run-on: arm64
+
+  - build-on: ppc64el
+    run-on: ppc64el
+
+  - build-on: s390x
+    run-on: s390x
 
 plugs:
   mongodb-plug:
@@ -37,12 +47,14 @@ apps:
     wekan:
         command: wekan-control
         daemon: simple
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
+        restart-condition: on-failure
 
     mongodb:
         command: mongodb-control
         daemon: simple
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
+        restart-condition: on-failure
 
     caddy:
         command: caddy-control
@@ -54,22 +66,27 @@ apps:
 
     database-backup:
         command: mongodb-backup
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
 
     database-list-backups:
         command: ls -al $SNAP_COMMON/db-backups/
 
     database-restore:
         command: mongodb-restore
-        plugs: [network, network-bind]
+        plugs: [network, network-bind, mount-observe, system-observe, bluetooth-control]
 
 parts:
     mongodb:
-        source: https://repo.mongodb.org/apt/ubuntu/dists/xenial/mongodb-org/4.2/multiverse/binary-amd64/mongodb-org-server_4.2.2_amd64.deb
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.14.tgz
-        #https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-3.2.22.tgz
         plugin: dump
-        stage-packages: [libssl1.0.0, libcurl3]
+        source:
+          - on amd64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-amd64/mongodb-org-server_4.4.13_amd64.deb
+          - on arm64: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-arm64/mongodb-org-server_4.4.13_arm64.deb
+          - on ppc64el: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-ppc64el/mongodb-org-server_4.4.13_ppc64el.deb
+          - on s390x: https://repo.mongodb.org/apt/ubuntu/dists/focal/mongodb-org/4.4/multiverse/binary-s390x/mongodb-org-server_4.4.13_s390x.deb
+        stage-packages:
+            - libssl1.1
+            - libcurl3-dev
+            - libcurl4-openssl-dev
         filesets:
             mongo:
                 - usr
@@ -81,61 +98,46 @@ parts:
             - $mongo
 
     wekan:
-        source: .
-        plugin: nodejs
-        node-engine: 12.22.0
-        node-packages:
-            - node-gyp
-            - node-pre-gyp
-            - fibers
-        build-packages:
-            - ca-certificates
-            - apt-utils
-            - build-essential
-            - python
-            - python3
-            - g++
-            - capnproto
-            - curl
-            - libcurl3
-            - execstack
-            - nodejs
-            - npm
-        stage-packages:
-            - libfontconfig1
+        #plugin: npm
+        plugin: dump
+        source:
+        # Fixed URLs to some allowed GitHub releases URL.
+        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/wekan-6.20-s390x.zip
+#        npm-node-version: 14.19.1
+#        node-packages:
+#            - node-gyp
+#            - node-pre-gyp
+#            - fibers
+#        build-packages:
+#          - npm
+#            - build-essential
+#            - ca-certificates
+#            - apt-utils
+#            - python
+#            - python3
+#            - g++
+#            - capnproto
+#            - curl
+#            - execstack
+#            - nodejs
+#            - npm
+#          - p7zip-full
+#        stage-packages:
+#            - libfontconfig1
         override-build: |
-            echo "Cleaning environment first"
-            rm -rf ~/.meteor ~/.npm /usr/local/lib/node_modules
-            rm -rf .build
-            echo "Installing meteor"
-            curl https://install.meteor.com/ -o install_meteor.sh
-            chmod +x install_meteor.sh
-            sh install_meteor.sh
-            rm install_meteor.sh
-            rm -rf .build
-            meteor add standard-minifier-js --allow-superuser
-            meteor npm install --allow-superuser
-            meteor npm install --allow-superuser --save babel-runtime
-            meteor build .build --directory --allow-superuser
-            cp -f fix-download-unicode/cfs_access-point.txt .build/bundle/programs/server/packages/cfs_access-point.js
-            cd .build/bundle/programs/server
-            npm install
-            npm install --allow-superuser --save babel-runtime
-            # Change back to Wekan source directory
-            cd ../../../..
-            cp -r .build/bundle/* $SNAPCRAFT_PART_INSTALL/
-            cp .build/bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/npm/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/node-gyp/node_modules/tar/lib/.mkdir.js.swp
-            rm -f $SNAPCRAFT_PART_INSTALL/programs/server/node_modules/node-pre-gyp/node_modules/tar/lib/.mkdir.js.swp
-
+          cp -r bundle/* $SNAPCRAFT_PART_INSTALL/
+          cp bundle/.node_version.txt $SNAPCRAFT_PART_INSTALL/
+          rm -f $SNAPCRAFT_PART_INSTALL/lib/node_modules/wekan
+          snapcraftctl build
         organize:
             README: README.wekan
         prime:
             - -lib/node_modules/node-pre-gyp/node_modules/tar/lib/.unpack.js.swp
+            - -lib/node_modules/weka*
 
     helpers:
         source: snap-src
@@ -143,8 +145,34 @@ parts:
 
     caddy:
         plugin: dump
-        source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
-        source-type: tar
+        ## Caddy v1 is not developed anymore. TODO: Sometime migrate to Caddy v2.
+        ## https://caddy.community/t/caddyfile-v1-adapter/9129
+        ## https://github.com/caddyserver/caddy/tree/v1
+        #source: https://caddyserver.com/download/linux/amd64?license=personal&telemetry=off
+        #source-type: tar
+        # Using last working binary that was downloaded from above URL to Wekan Snap,
+        # and .txt files from https://github.com/caddyserver/caddy/tree/v1/dist
+        source: https://wekan.github.io/caddy-v1-linux-amd64.7z
+        source-type: 7z
+        organize:
+          caddy: bin/caddy
+          CHANGES.txt: CADDY_CHANGES.txt
+          EULA.txt: CADDY_EULA.txt
+          LICENSES.txt: CADDY_LICENSES.txt
+          README.txt: CADDY_README.txt
+        stage:
+          - -init
+
+    caddy2:
+        plugin: dump
+        source:
+        # Fixed URLs to some allowed GitHub releases URL.
+        # Non-GitHub build server file urls are not allowed at 2022-03-02 and later.
+          - on amd64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-amd64.zip
+          - on arm64: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-arm64.zip
+          - on ppc64el: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-ppc64el.zip
+          - on s390x: https://github.com/wekan/wekan/releases/download/v6.20/caddy-v2-s390x.zip
+        source-type: zip
         organize:
           caddy: bin/caddy
           CHANGES.txt: CADDY_CHANGES.txt

.github/ISSUE_TEMPLATE.md

@@ -1,32 +1,35 @@
 ## Issue
-
-Email settings:
-- https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
-
-Add these issues to elsewhere:
-- SECURITY ISSUES: https://github.com/wekan/wekan/blob/master/SECURITY.md
+<!--
+Please report these elsewhere:
+- SECURITY ISSUES, PGP EMAIL: https://github.com/wekan/wekan/blob/main/SECURITY.md
 - UCS: https://github.com/wekan/univention/issues
 
-Other Wekan issues can be added here.
+**[PLEASE UPGRADE](https://github.com/wekan/wekan/wiki/Backup)** to the newest WeKan ® before reporting an issue.
+Please search existing Open and Closed issues, most questions have already been answered.
 
-**Server Setup Information**:
+If you can not login for any reason: https://github.com/wekan/wekan/wiki/Forgot-Password
+Email settings, only SMTP MAIL_URL and MAIL_FROM are in use: https://github.com/wekan/wekan/wiki/Troubleshooting-Mail
+-->
 
-* Note: Please anonymize info, and do not add to this public issue any of your Wekan board URLs, passwords, API tokens etc, do you understand?:
+### Server Setup Information
+<!-- Please anonymize info, and do not any of your Wekan board URLs, passwords, API tokens etc to this public issue. -->
 * Did you test in newest Wekan?:
-* For new Wekan install, did you configure root-url correctly so Wekan cards open correctly https://github.com/wekan/wekan/wiki/Settings ?
-* Wekan version:
-* If this is about old version of Wekan, what upgrade problem you have?:
+* Did you configure root-url correctly so Wekan cards open correctly (see https://github.com/wekan/wekan/wiki/Settings)?
 * Operating System:
-* Deployment Method(snap/docker/sandstorm/mongodb bundle/source):
+* Deployment Method (Snap/Docker/Sandstorm/bundle/source):
 * Http frontend if any (Caddy, Nginx, Apache, see config examples from Wekan GitHub wiki first):
-* Node Version:
+* Node.js Version:
 * MongoDB Version:
-* Wekan only works on newest desktop Firefox/Chromium/Chrome/Edge/Chromium Edge and mobile Chrome. What webbrowser version are you using?
+* What webbrowser version are you using (Wekan should work on all modern browsers that support Javascript)?
 
-**Problem description**:
-- *REQUIRED: Add recorded animated gif about how it works currently, and screenshot mockups how it should work. Use peek to record animgif in Linux https://github.com/phw/peek*
-- *Explain steps how to reproduce*
-- *In webbrowser, what does show Right Click / Inspect / Console ? Chrome shows more detailed info than Firefox.*
-- *If using Snap, what does show command `sudo snap logs wekan.wekan` ? Please anonymize logs.* 
-- *If using Docker, what does show command `sudo docker logs wekan-app` ? Please anonymize logs.*
-- *If logs are very long, attach them in .zip file*
+### Problem description
+<!-- Add a recorded animated gif (e.g. with https://github.com/phw/peek) about how it works currently, and screenshot mockups how it should work. -->
+#### Reproduction Steps
+
+#### Logs
+<!-- Check Right Click>Inspect>Console in you browser - generally Chrome shows more detailed info than Firefox. -->
+
+<!-- Please anonymize logs.
+Snap: sudo snap logs wekan.wekan
+Docker: sudo docker logs wekan-app
+If logs are very long, attach them in .zip file -->

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+- package-ecosystem: "github-actions"
+  directory: "/"
+  schedule:
+      interval: "weekly"

.github/workflows/codeql-analysis.yml

@@ -1,62 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [master]
-  schedule:
-    - cron: '0 16 * * 3'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['javascript', 'python']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/depsreview.yaml

@@ -0,0 +1,14 @@
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v4

.github/workflows/docker-publish.yml

@@ -0,0 +1,63 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  schedule:
+    - cron: '28 23 * * *'
+  push:
+    branches: [ main ]
+    # Publish semver tags as releases.
+    tags: [ 'v*.*.*' ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/dockerimage.yml

@@ -3,7 +3,10 @@ name: Docker Image CI
 on:
   push:
     branches:
-      - master
+      - main
+
+permissions:
+  contents: read
 
 jobs:
 
@@ -12,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v4
     - name: Build the Docker image
       run: docker build . --file Dockerfile --tag wekan:$(date +%s)

.github/workflows/owasp-zap-scan.yml

@@ -1,12 +0,0 @@
-on: [push]
-
-jobs:
-  zap_scan:
-    runs-on: ubuntu-latest
-    name: Scan the webapplication
-    steps:
-      - name: OWASP ZAP Scan
-        runs-on: ubuntu-latest
-        uses: zaproxy/action-baseline@v0.4.0
-        with:
-          target: 'https://boards.wekan.team/sign-in'

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release Charts
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  release:
+    permissions:
+      contents: write  # for helm/chart-releaser-action to push chart release and create a release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config user.name "$GITHUB_ACTOR"
+          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
+
+      - name: Run chart-releaser
+        uses: helm/chart-releaser-action@v1.6.0
+        env:
+          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/test_suite.yml

@@ -0,0 +1,163 @@
+name: Test suite
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+jobs:
+# the following are optional jobs and need to be configured according
+# to this project's settings:
+#
+#  lintcode:
+#    name: Javascript lint
+#    runs-on: ubuntu-latest
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v4
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#
+#    - run: npm install
+#    - run: npm run lint:code
+#
+#  lintstyle:
+#    name: SCSS lint
+#    runs-on: ubuntu-latest
+#    needs: [lintcode]
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v4
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#    - run: npm install
+#    - run: npm run lint:style
+#
+#  lintdocs:
+#    name: documentation lint
+#    runs-on: ubuntu-latest
+#    needs: [lintcode,lintstyle]
+#    steps:
+#    - name: checkout
+#      uses: actions/checkout@v4
+#
+#    - name: setup node
+#      uses: actions/setup-node@v1
+#      with:
+#        node-version: '12.x'
+#
+#    - name: cache dependencies
+#      uses: actions/cache@v1
+#      with:
+#        path: ~/.npm
+#        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+#        restore-keys: |
+#          ${{ runner.os }}-node-
+#
+#    - run: npm install
+#    - run: npm run lint:markdown
+
+  tests:
+    name: Meteor ${{ matrix.meteor }} tests
+    runs-on: ubuntu-latest
+    steps:
+
+      # CHECKOUTS
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # CACHING
+      - name: Install Meteor
+        id: cache-meteor-install
+        uses: actions/cache@v4
+        with:
+          path: ~/.meteor
+          key: v1-meteor-${{ hashFiles('.meteor/versions') }}
+          restore-keys: |
+                v1-meteor-
+
+      - name: Cache NPM dependencies
+        id: cache-meteor-npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: v1-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+                v1-npm-
+
+      - name: Cache Meteor build
+        id: cache-meteor-build
+        uses: actions/cache@v4
+        with:
+          path: |
+            .meteor/local/resolver-result-cache.json
+            .meteor/local/plugin-cache
+            .meteor/local/isopacks
+            .meteor/local/bundler-cache/scanner
+          key: v1-meteor_build_cache-${{ github.ref }}-${{ github.sha }}
+          restore-keys: |
+            v1-meteor_build_cache-
+
+      - name: Setup meteor
+        uses: meteorengineer/setup-meteor@v2
+        with:
+          meteor-release: '2.2'
+
+      - name: Install NPM Dependencies
+        run: meteor npm ci
+
+      - name: Run Tests
+        run: sh ./test-wekan.sh -cv
+
+      - name: Upload coverage
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-folder
+          path: .coverage/
+
+  coverage:
+    name: Coverage report
+    runs-on: ubuntu-latest
+    needs: [tests]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download coverage
+        uses: actions/download-artifact@v4
+        with:
+          name: coverage-folder
+          path: .coverage/
+
+
+      - name: Coverage Report
+        uses: VeryGoodOpenSource/very_good_coverage@v3.0.0
+        with:
+          path: ".coverage/lcov.info"
+          min_coverage: 1 # TODO add tests and increase to 95!

.gitignore

@@ -1,5 +1,5 @@
 *~
-*.swp
+*.sw*
 .meteor-spk
 *.sublime-workspace
 tmp/
@@ -32,3 +32,10 @@ ehthumbs.db
 .eslintcache
 .meteor/local
 .devcontainer/docker-compose.extend.yml
+.devcontainer/volumes*/
+.coverage
+
+# Helm chart
+# Chart dependencies
+/helm/wekan/**/*.tgz
+/helm/wekan/charts

.meteor/packages

@@ -3,12 +3,11 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.4.0
+meteor-base@1.5.1
 
 # Build system
-ecmascript@0.15.0
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
+ecmascript@0.16.8
+standard-minifier-js@2.8.1
 mquandalle:jade
 coffeescript@2.4.1!
 
@@ -17,131 +16,81 @@ es5-shim@4.8.0
 
 # Collections
 aldeed:collection2
-cfs:standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
-matb33:collection-hooks
-matteodem:easy-search
-mongo@1.10.1
+easy:search
+mongo@1.16.8
 mquandalle:collection-mutations
 
 # Account system
-kenton:accounts-sandstorm
-service-configuration@1.0.11
-useraccounts:unstyled
+accounts-password@2.4.0
+useraccounts:core
 useraccounts:flow-routing
+useraccounts:unstyled
+simple:rest-accounts-password
 wekan-ldap
 wekan-accounts-cas
+wekan-accounts-sandstorm
+wekan-accounts-lockout
+wekan-oidc
 wekan-accounts-oidc
 
 # Utilities
-check@1.3.1
-jquery@1.11.10
-random@1.2.0
-reactive-dict@1.3.0
-session@1.2.0
-tracker@1.2.0
-underscore@1.0.10
-3stack:presence
+check@1.3.2
+jquery@3.0.0!
+random@1.2.1
+reactive-dict@1.3.1
+session@1.2.1
+tracker@1.3.3
+underscore@1.0.13
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
-kadira:blaze-layout
 kadira:dochead
 mquandalle:autofocus
 ongoworks:speakingurl
 raix:handlebar-helpers
-tap:i18n
-http@1.4.2
+http@2.0.0! # force new http package
+
+# Datepicker
+wekan-bootstrap-datepicker
 
 # UI components
-blaze
-reactive-var@1.0.11
-fortawesome:fontawesome
+ostrio:i18n
+reactive-var@1.0.12
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
-mquandalle:jquery-ui-drag-drop-sort
 mquandalle:mousetrap-bindglobal
-peerlibrary:blaze-components@=0.15.1
 templates:tabs
-verron:autosize
-simple:json-routes
-rajit:bootstrap3-datepicker
+meteor-autosize
 shell-server@0.5.0
-simple:rest-accounts-password
-useraccounts:core
-email@2.0.0
-horka:swipebox
-dynamic-import@0.6.0
-
-accounts-password@1.7.0
-cfs:gridfs
-rzymek:fullcalendar
-momentjs:moment@2.22.2
-browser-policy-framing@1.1.0
-mquandalle:moment
+email@2.2.5
+dynamic-import@0.7.3
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-coagmano:stylus@1.1.0!
-lucasantoniassi:accounts-lockout
 meteorhacks:subs-manager
-meteorhacks:picker
-lamhieu:unblock
 meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
 percolate:synced-cron
-cfs:filesystem
-tmeasday:check-npm-versions
-steffo:meteor-accounts-saml
-rajit:bootstrap3-datepicker-fi
-rajit:bootstrap3-datepicker-ar
-rajit:bootstrap3-datepicker-bg
-rajit:bootstrap3-datepicker-br
-rajit:bootstrap3-datepicker-ca
-rajit:bootstrap3-datepicker-cs
-rajit:bootstrap3-datepicker-da
-rajit:bootstrap3-datepicker-de
-rajit:bootstrap3-datepicker-el
-rajit:bootstrap3-datepicker-en-gb
-rajit:bootstrap3-datepicker-eo
-rajit:bootstrap3-datepicker-es
-rajit:bootstrap3-datepicker-eu
-rajit:bootstrap3-datepicker-fa
-rajit:bootstrap3-datepicker-fr
-rajit:bootstrap3-datepicker-gl
-rajit:bootstrap3-datepicker-he
-rajit:bootstrap3-datepicker-hi
-rajit:bootstrap3-datepicker-hu
-rajit:bootstrap3-datepicker-hy
-rajit:bootstrap3-datepicker-id
-rajit:bootstrap3-datepicker-it
-rajit:bootstrap3-datepicker-ja
-rajit:bootstrap3-datepicker-ka
-rajit:bootstrap3-datepicker-km
-rajit:bootstrap3-datepicker-ko
-rajit:bootstrap3-datepicker-lv
-rajit:bootstrap3-datepicker-mk
-rajit:bootstrap3-datepicker-mn
-rajit:bootstrap3-datepicker-nb
-rajit:bootstrap3-datepicker-nl
-rajit:bootstrap3-datepicker-oc
-rajit:bootstrap3-datepicker-pl
-rajit:bootstrap3-datepicker-pt-br
-rajit:bootstrap3-datepicker-pt
-rajit:bootstrap3-datepicker-ro
-rajit:bootstrap3-datepicker-ru
-rajit:bootstrap3-datepicker-sl
-rajit:bootstrap3-datepicker-sr
-rajit:bootstrap3-datepicker-sv
-rajit:bootstrap3-datepicker-sw
-rajit:bootstrap3-datepicker-ta
-rajit:bootstrap3-datepicker-th
-rajit:bootstrap3-datepicker-tr
-rajit:bootstrap3-datepicker-uk
-rajit:bootstrap3-datepicker-vi
-rajit:bootstrap3-datepicker-zh-cn
-rajit:bootstrap3-datepicker-zh-tw
-staringatlights:fast-render
+ostrio:cookies
+ostrio:files@2.3.0
+pascoual:pdfkit
+lmieulet:meteor-coverage
+meteortesting:mocha@2.0.3
+aldeed:simple-schema
+matb33:collection-hooks
+simple:json-routes
+kadira:flow-router
 spacebars
-easylogic:summernote
+service-configuration@1.3.2
+communitypackages:picker
+minifier-css@1.6.4
+blaze
+kadira:blaze-layout
+peerlibrary:blaze-components
+ejson@1.1.3
+logging@1.3.3
+wekan-fullcalendar
+momentjs:moment@2.29.3
+wekan-fontawesome

.meteor/release

@@ -1 +1 @@
-METEOR@2.1
+METEOR@2.14

.meteor/versions

@@ -1,118 +1,90 @@
-3stack:presence@1.1.2
-accounts-base@1.8.0
-accounts-oauth@1.2.0
-accounts-password@1.7.0
+accounts-base@2.2.10
+accounts-oauth@1.4.3
+accounts-password@2.4.0
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
-allow-deny@1.1.0
+allow-deny@1.1.1
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
-autoupdate@1.7.0
-babel-compiler@7.6.0
-babel-runtime@1.5.0
+autoupdate@1.8.0
+babel-compiler@7.10.5
+babel-runtime@1.5.1
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.3.4
-blaze-tools@1.0.10
-boilerplate-generator@1.7.1
-browser-policy-common@1.0.11
-browser-policy-framing@1.1.0
+blaze@2.7.1
+blaze-tools@1.1.3
+boilerplate-generator@1.7.2
 caching-compiler@1.2.2
-caching-html-compiler@1.1.3
-callback-hook@1.3.0
-cfs:access-point@0.1.49
-cfs:base-package@0.0.30
-cfs:collection@0.5.5
-cfs:collection-filters@0.2.4
-cfs:data-man@0.0.6
-cfs:file@0.1.17
-cfs:filesystem@0.1.2
-cfs:gridfs@0.0.34
-cfs:http-methods@0.0.32
-cfs:http-publish@0.0.13
-cfs:power-queue@0.9.11
-cfs:reactive-list@0.0.9
-cfs:reactive-property@0.0.4
-cfs:standard-packages@0.5.10
-cfs:storage-adapter@0.2.4
-cfs:tempstore@0.1.6
-cfs:upload-http@0.0.20
-cfs:worker@0.1.5
-check@1.3.1
-chuangbo:cookie@1.1.0
-coagmano:stylus@1.1.0
-coffeescript@2.4.1
+caching-html-compiler@1.2.1
+callback-hook@1.5.1
+check@1.3.2
+coffeescript@2.7.0
 coffeescript-compiler@2.4.1
+communitypackages:picker@1.1.1
 cottz:publish-relations@2.0.8
 dburles:collection-helpers@1.1.0
-ddp@1.4.0
-ddp-client@2.4.0
+ddp@1.4.1
+ddp-client@2.6.1
 ddp-common@1.4.0
-ddp-rate-limiter@1.0.9
-ddp-server@2.3.2
+ddp-rate-limiter@1.2.1
+ddp-server@2.7.0
 deps@1.0.12
-diff-sequence@1.1.1
-dynamic-import@0.6.0
-easylogic:summernote@0.8.8
-ecmascript@0.15.0
-ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.0
-ecmascript-runtime-server@0.10.0
-ejson@1.1.1
-email@2.0.0
+diff-sequence@1.1.2
+dynamic-import@0.7.3
+easy:search@2.2.1
+easysearch:components@2.2.2
+easysearch:core@2.2.2
+ecmascript@0.16.8
+ecmascript-runtime@0.8.1
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.3
+email@2.2.5
 es5-shim@4.8.0
-fastclick@1.0.13
-fetch@0.1.1
-fortawesome:fontawesome@4.7.0
-geojson-utils@1.0.10
-horka:swipebox@1.0.2
+fetch@0.1.4
+geojson-utils@1.0.11
 hot-code-push@1.0.4
-html-tools@1.0.11
-htmljs@1.0.11
-http@1.4.3
-id-map@1.1.0
+html-tools@1.1.3
+htmljs@1.1.1
+http@2.0.0
+id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
-jquery@1.11.11
+jquery@3.0.0
 kadira:blaze-layout@2.3.0
 kadira:dochead@1.5.0
 kadira:flow-router@2.12.1
-kenton:accounts-sandstorm@0.7.0
 konecty:mongo-counter@0.0.5_3
-lamhieu:meteorx@2.1.1
-lamhieu:unblock@1.0.0
-launch-screen@1.2.0
-livedata@1.0.18
+lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.2.0
-lucasantoniassi:accounts-lockout@1.0.0
-matb33:collection-hooks@0.9.1
-matteodem:easy-search@1.6.4
+logging@1.3.3
+matb33:collection-hooks@1.3.0
 mdg:validation-error@0.5.1
-meteor@1.9.3
-meteor-base@1.4.0
-meteor-platform@1.2.6
+meteor@1.11.5
+meteor-autosize@5.0.1
+meteor-base@1.5.1
 meteorhacks:aggregate@1.3.0
 meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
-meteorspark:util@0.2.0
-minifier-css@1.5.3
-minifier-js@2.6.0
+meteortesting:browser-tests@1.4.2
+meteortesting:mocha@2.1.0
+meteortesting:mocha-core@8.0.1
+minifier-css@1.6.4
+minifier-js@2.7.5
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.6.1
-mobile-status-bar@1.1.0
-modern-browsers@0.1.5
-modules@0.16.0
-modules-runtime@0.12.0
-momentjs:moment@2.29.1
-mongo@1.10.1
-mongo-decimal@0.1.2
+minimongo@1.9.3
+modern-browsers@0.1.10
+modules@0.20.0
+modules-runtime@0.13.1
+momentjs:moment@2.29.3
+mongo@1.16.8
+mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
-mongo-id@1.0.7
+mongo-id@1.0.8
 mongo-livedata@1.0.12
 mousetrap:mousetrap@1.4.6_1
 mquandalle:autofocus@1.0.0
@@ -120,126 +92,75 @@ mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
 mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:jquery-ui-drag-drop-sort@0.2.0
-mquandalle:moment@1.0.1
 mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
-npm-bcrypt@0.9.3
-npm-mongo@3.8.1
-oauth@1.3.2
-oauth2@1.3.0
-observe-sequence@1.0.16
+npm-mongo@4.17.2
+oauth@2.2.1
+oauth2@1.3.2
+observe-sequence@1.0.21
 ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
+ostrio:cookies@2.7.2
+ostrio:cstorage@4.0.1
+ostrio:files@2.3.3
+ostrio:i18n@3.2.1
+pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.16.0
-peerlibrary:blaze-components@0.15.1
+peerlibrary:base-component@0.17.1
+peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
+peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
-percolate:synced-cron@1.3.2
-promise@0.11.2
+percolate:synced-cron@1.5.2
+promise@0.12.2
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
-rajit:bootstrap3-datepicker@1.7.1_1
-rajit:bootstrap3-datepicker-ar@1.7.1
-rajit:bootstrap3-datepicker-bg@1.7.1
-rajit:bootstrap3-datepicker-br@1.7.1
-rajit:bootstrap3-datepicker-ca@1.7.1
-rajit:bootstrap3-datepicker-cs@1.7.1
-rajit:bootstrap3-datepicker-da@1.7.1
-rajit:bootstrap3-datepicker-de@1.7.1
-rajit:bootstrap3-datepicker-el@1.7.1
-rajit:bootstrap3-datepicker-en-gb@1.7.1
-rajit:bootstrap3-datepicker-eo@1.7.1
-rajit:bootstrap3-datepicker-es@1.7.1
-rajit:bootstrap3-datepicker-eu@1.7.1
-rajit:bootstrap3-datepicker-fa@1.7.1
-rajit:bootstrap3-datepicker-fi@1.7.1
-rajit:bootstrap3-datepicker-fr@1.7.1
-rajit:bootstrap3-datepicker-gl@1.7.1
-rajit:bootstrap3-datepicker-he@1.7.1
-rajit:bootstrap3-datepicker-hi@1.7.1
-rajit:bootstrap3-datepicker-hu@1.7.1
-rajit:bootstrap3-datepicker-hy@1.7.1
-rajit:bootstrap3-datepicker-id@1.7.1
-rajit:bootstrap3-datepicker-it@1.7.1
-rajit:bootstrap3-datepicker-ja@1.7.1
-rajit:bootstrap3-datepicker-ka@1.7.1
-rajit:bootstrap3-datepicker-km@1.7.1
-rajit:bootstrap3-datepicker-ko@1.7.1
-rajit:bootstrap3-datepicker-lv@1.7.1
-rajit:bootstrap3-datepicker-mk@1.7.1
-rajit:bootstrap3-datepicker-mn@1.7.1
-rajit:bootstrap3-datepicker-nb@1.7.1
-rajit:bootstrap3-datepicker-nl@1.7.1
-rajit:bootstrap3-datepicker-oc@1.7.1
-rajit:bootstrap3-datepicker-pl@1.7.1
-rajit:bootstrap3-datepicker-pt@1.7.1
-rajit:bootstrap3-datepicker-pt-br@1.7.1
-rajit:bootstrap3-datepicker-ro@1.7.1
-rajit:bootstrap3-datepicker-ru@1.7.1
-rajit:bootstrap3-datepicker-sl@1.7.1
-rajit:bootstrap3-datepicker-sr@1.7.1
-rajit:bootstrap3-datepicker-sv@1.7.1
-rajit:bootstrap3-datepicker-sw@1.7.1
-rajit:bootstrap3-datepicker-ta@1.7.1
-rajit:bootstrap3-datepicker-th@1.7.1
-rajit:bootstrap3-datepicker-tr@1.7.1
-rajit:bootstrap3-datepicker-uk@1.7.1
-rajit:bootstrap3-datepicker-vi@1.7.1
-rajit:bootstrap3-datepicker-zh-cn@1.7.1
-rajit:bootstrap3-datepicker-zh-tw@1.7.1
-random@1.2.0
-rate-limit@1.0.9
-react-fast-refresh@0.1.0
-reactive-dict@1.3.0
-reactive-var@1.0.11
+random@1.2.1
+rate-limit@1.1.1
+react-fast-refresh@0.2.8
+reactive-dict@1.3.1
+reactive-var@1.0.12
 reload@1.3.1
 retry@1.1.0
-routepolicy@1.1.0
-rzymek:fullcalendar@3.8.0
-server-render@0.3.1
-service-configuration@1.0.11
-session@1.2.0
+routepolicy@1.1.1
+service-configuration@1.3.3
+session@1.2.1
 sha@1.0.9
 shell-server@0.5.0
-simple:authenticate-user-by-token@1.0.1
-simple:json-routes@2.1.0
-simple:rest-accounts-password@1.1.2
-simple:rest-bearer-token-parser@1.0.1
-simple:rest-json-error-handler@1.0.1
-socket-stream-client@0.3.1
-softwarerero:accounts-t9n@1.3.11
-spacebars@1.0.15
-spacebars-compiler@1.1.3
-srp@1.1.0
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
-staringatlights:fast-render@3.3.0
-staringatlights:inject-data@2.3.0
-steffo:meteor-accounts-saml@0.0.18
-tap:i18n@1.8.2
+simple:authenticate-user-by-token@1.2.1
+simple:json-routes@2.3.1
+simple:rest-accounts-password@1.2.2
+simple:rest-bearer-token-parser@1.1.1
+simple:rest-json-error-handler@1.1.1
+socket-stream-client@0.5.2
+spacebars@1.4.1
+spacebars-compiler@1.3.1
+standard-minifier-js@2.8.1
 templates:tabs@2.3.0
-templating@1.3.2
-templating-compiler@1.3.3
-templating-runtime@1.3.2
-templating-tools@1.1.2
-tmeasday:check-npm-versions@0.3.2
-tracker@1.2.0
-twbs:bootstrap@3.3.6
+templating@1.4.1
+templating-compiler@1.4.1
+templating-runtime@1.5.0
+templating-tools@1.2.2
+tracker@1.3.3
+typescript@4.9.5
 ui@1.0.13
-underscore@1.0.10
-url@1.3.1
-useraccounts:core@1.14.2
-useraccounts:flow-routing@1.14.2
+underscore@1.0.13
+url@1.3.2
+useraccounts:core@1.16.2
+useraccounts:flow-routing@1.15.0
 useraccounts:unstyled@1.14.2
-verron:autosize@3.0.8
-webapp@1.10.0
-webapp-hashing@1.1.0
+webapp@1.13.6
+webapp-hashing@1.1.1
 wekan-accounts-cas@0.1.0
+wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
+wekan-accounts-sandstorm@0.8.0
+wekan-bootstrap-datepicker@1.10.0
+wekan-fontawesome@6.4.2
+wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12
 yasaricli:slugify@0.0.7
 zimme:active-route@2.3.2
+zodern:types@1.0.10

.travis.yml

@@ -3,7 +3,7 @@ sudo: required
 
 env:
   TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 12.22.0
+  TRAVIS_NODE_VERSION: 14.21.3
   TRAVIS_NPM_VERSION: latest
 
 before_install:

.tx/config

@@ -1,55 +1,9 @@
-# This is the configuration of the Transifex tool that we use to manage the
-# translations on Wekan. Documentation at: http://docs.transifex.com/client.
-#
-# Push
-# ====
-#
-# It is recommended that contributors use the Transifex web UI to create and
-# edit translated strings. However in case a contributor has directly jumped
-# into the code and made its translations in the corresponding i18n.json file
-# we can push it using
-#
-# > tx push -t -l ar
-#
-# Where `ar` is the language identifier. In addition, the project maintainer
-# should push the English source file to Transifex at least before each release
-# candidate using:
-#
-# > tx push -s
-#
-# Pull
-# ====
-#
-# The set of accepted language is directly managed in Transifex, the only
-# restriction we define to bundle a new language in the application, is that its
-# completion is at least at 75%.
-#
-# We use:
-#
-# > tx pull
-#
-# to download new versions of existing translations, and
-#
-# > tx pull -a --minimum-perc=75
-#
-# to download new sufficiently advanced translations.
-
 [main]
-host = https://www.transifex.com
-# tap:i18n requires us to use `-` separator in the language identifiers whereas
-# Transifex uses a `_` separator, without an option to customize it on one side
-# or the other, so we need to do a Manual mapping.
-lang_map = ar_EG:ar-EG, bg_BG:bg, en_GB:en-GB, es_AR:es-AR, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el, fa_IR:fa-IR, fi_FI:fi, hu_HU:hu, id_ID:id, mn_MN:mn, no:nb, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, sl_SI:sl, zh_CN:zh-CN, zh_TW:zh-TW, zh_HK:zh-HK
+host     = https://www.transifex.com
+lang_map = es_AR: es-AR, es_419: es-LA, es_TX: es-TX, he_IL: he-IL, zh_CN: zh-CN, ar_EG: ar-EG, cs_CZ: cs-CZ, fa_IR: fa-IR, ms_MY: ms-MY, nl_NL: nl-NL, de_CH: de-CH, en_IT: en-IT, uz_UZ: uz-UZ, fr_CH: fr-CH, hi_IN: hi-IN, et_EE: et-EE, es_PE: es-PE, es_MX: es-MX, gl_ES: gl-ES, mn_MN: mn, sl_SI: sl, zh_TW: zh-TW, ast_ES: ast-ES, es_CL: es-CL, ja_JP: ja, lv_LV: lv, ro_RO: ro-RO, az_AZ: az-AZ, cy_GB: cy-GB, gu_IN: gu-IN, pl_PL: pl-PL, vep: ve-PP, en_BR: en-BR, en@ysv: en-YS, hu_HU: hu, ko_KR: ko-KR, pt_BR: pt-BR, zh_HK: zh-HK, zu_ZA: zu-ZA, en_MY: en-MY, ja-Hira: ja-HI, fi_FI: fi, vec: ve-CC, vi_VN: vi-VN, fr_FR: fr-FR, id_ID: id, zh_Hans: zh-Hans, en_DE: en-DE, en_GB: en-GB, el_GR: el-GR, uk_UA: uk-UA, az@latin: az-LA, de_AT: de-AT, uz@Latn: uz-LA, vls: vl-SS, ar_DZ: ar-DZ, bg_BG: bg, es_PY: es-PY, fy_NL: fy-NL, uz@Arab: uz-AR, ru_UA: ru-UA, war: wa-RR, zh_CN.GB2312: zh-GB
 
-[wekan.application]
-file_filter = i18n/<lang>.i18n.json
+[o:wekan:p:wekan:r:application]
+file_filter = imports/i18n/data/<lang>.i18n.json
+source_file = imports/i18n/data/en.i18n.json
 source_lang = en
-type = KEYVALUEJSON
-
-# We might have a dedicated second resource later to translate the “Welcome
-# Board” data.
-#
-# [wekan.welcomeBoard]
-# file_filter = private/welcomeBoard/<lang>.json
-# source_lang = en
-# type = KEYVALUEJSON
+type        = KEYVALUEJSON

.vscode/launch.json

@@ -17,6 +17,23 @@
           "outputCapture": "std",
           "port": 9229,
           "timeout": 60000
+      },
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Test: Node",
+          "runtimeExecutable": "meteor",
+          "runtimeArgs": [
+            "test",
+            "--inspect-brk=9229",
+            "--port=4040",
+            "--exclude-archs=web.browser.legacy,web.cordova",
+            "--driver-package=meteortesting:mocha",
+            "--settings=settings.json"
+          ],
+          "outputCapture": "std",
+          "port": 9229,
+          "timeout": 60000
       }
   ],
   "compounds": [

CODE_OF_CONDUCT.md

@@ -0,0 +1,22 @@
+# Code of Conduct
+
+For all code at WeKan GitHub Organization https://github.com/wekan
+
+- All code in pull requests need to have permission already to add it to WeKan with MIT license, and will become MIT license.
+- All code xet7 add is MIT license.
+- For any dependencies, permissive licenses like https://copyfree.org are preferred
+- For anything currently that is non-permissive (like GPL, AGPL, SSPL), those will be replaced with permissive-licensed alternatives
+
+# Reporting about violations or something else
+
+## Private reports
+
+- Email support (at) wekan.team using [this PGP public key](support-at-wekan.team_pgp-publickey.asc) if possible
+- Security issues: [SECURITY.md](SECURITY.md)
+- License violations
+- Anything private, sensitive or negative
+
+## Public
+
+- Feature Requests and Bug Reports https://github.com/wekan/wekan/issues
+- Anything happy, positive, encouraging, helping, at friendly WeKan Global FOSS Community

CONTRIBUTING.md

@@ -1,4 +1,87 @@
-To get started, [please sign the Contributor License Agreement](https://www.clahub.com/agreements/wekan/wekan).
+## About money
 
-[Then, please read documentation at wiki](https://github.com/wekan/wekan/wiki).
+Not paid:
 
+- Money is not paid for these, everyone uses their own time at their own cost:
+  - Security reports, see [SECURITY.md](SECURITY.md)
+  - Pull requests
+  - xet7 checking pull requests
+- Public Community Support
+  - https://github.com/wekan/wekan/issues
+
+Paid by customers of WeKan Team:
+
+- Commercial Support at https://wekan.team/commercial-support/
+  - Support
+  - Private Chat
+  - Features
+  - Fixes
+  - Hosting
+
+## Contributing Security related
+
+For responsible security disclosure, please follow this process:
+https://github.com/wekan/wekan/blob/main/SECURITY.md
+
+CVE Hall of Fame is at https://wekan.github.io/hall-of-fame/
+
+## Contributing to Documentation Wiki
+
+Fork WeKan repo https://github.com/wekan/wekan ,
+edit `docs` directory content at GitHub web interface,
+and click send PR.
+
+## Contributing code
+
+[Building WeKan and sending PR](https://github.com/wekan/wekan/wiki/Emoji).
+
+WeKan code contributors Hall of Fame is at ChangeLog, where
+GitHub usernames are mentioned with changes added:
+
+https://github.com/wekan/wekan/blob/main/CHANGELOG.md
+
+Changes can be like typo fixes, bugfixes, features, or anything else
+like for example at open GitHub issues https://github.com/wekan/wekan/issues .
+Closed issues are already fixed or implemented.
+
+Also see other docs at wiki, for example:
+
+https://github.com/wekan/wekan/wiki/Developer-Documentation
+
+Do not use code formatting or linting like eslist or prettier.
+
+Only send minimal changed code lines, that are related to feature or fix.
+
+WeKan code has MIT license.
+
+About 300 persons have contributed to WeKan, stats at:
+
+https://www.openhub.net/p/wekan
+
+WeKan maintainer xet7 reviews PR for typos etc before accepting to WeKan,
+so that WeKan code will still work OK.
+
+## Contributing translations
+
+Non-English translations are contributed only at
+https://transifex.com/wekan/wekan
+
+When adding new features, in your PR to
+https://github.com/wekan/wekan/pulls
+only add new English source language strings
+to https://github.com/wekan/wekan/blob/main/imports/i18n/data/en.i18n.json
+
+Maintainer of WeKan xet7 downloads all newest
+translations from Transifex and adds
+them to WeKan repo before making
+new release.
+
+## About WeKan Organization https://github.com/wekan
+
+Only xet7 has write access to WeKan Organization.
+
+xet7 reviews all PRs before merging.
+
+There has been over 300 contributors to WeKan, newest stats at:
+
+https://www.openhub.net/p/wekan

Dockerfile

@@ -1,8 +1,20 @@
-FROM quay.io/wekan/ubuntu:groovy-20210115
-LABEL maintainer="wekan"
+FROM --platform=linux/amd64 ubuntu:24.04 as wekan
+LABEL maintainer="wekan" \
+      org.opencontainers.image.ref.name="ubuntu" \
+      org.opencontainers.image.version="24.04" \
+      org.opencontainers.image.source="https://github.com/wekan/wekan"
 
-# 2020-12-03:
-# - Above Ubuntu base image copied from Docker Hub ubuntu:groovy-20201125.2
+# 2022-09-04:
+# - above "--platform=linux/amd64 ubuntu:22.04 as wekan" is needed to build Dockerfile
+#   correctly on Mac M1 etc, to not get this error:
+#   https://stackoverflow.com/questions/71040681/qemu-x86-64-could-not-open-lib64-ld-linux-x86-64-so-2-no-such-file-or-direc
+
+# 2022-04-25:
+# - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
+#   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
+
+# 2021-09-18:
+# - Above Ubuntu base image copied from Docker Hub ubuntu:hirsute-20210825
 #   to Quay to avoid Docker Hub rate limits.
 
 # Set the environment variables (defaults where required)
@@ -12,25 +24,32 @@ ARG DEBIAN_FRONTEND=noninteractive
 
 ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-essential git ca-certificates python3" \
     DEBUG=false \
-    NODE_VERSION=v12.22.0 \
-    METEOR_RELEASE=1.10.2 \
+    NODE_VERSION=v14.21.4 \
+    METEOR_RELEASE=METEOR@2.14 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
-    NPM_VERSION=latest \
+    NPM_VERSION=6.14.17 \
     FIBERS_VERSION=4.0.1 \
     ARCHITECTURE=linux-x64 \
     SRC_PATH=./ \
     WITH_API=true \
     RESULTS_PER_PAGE="" \
+    DEFAULT_BOARD_ID="" \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURES_BEFORE=3 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_PERIOD=60 \
     ACCOUNTS_LOCKOUT_KNOWN_USERS_FAILURE_WINDOW=15 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURES_BERORE=3 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_LOCKOUT_PERIOD=60 \
     ACCOUNTS_LOCKOUT_UNKNOWN_USERS_FAILURE_WINDOW=15 \
+    ACCOUNTS_COMMON_LOGIN_EXPIRATION_IN_DAYS=90 \
+    ATTACHMENTS_UPLOAD_EXTERNAL_PROGRAM="" \
+    ATTACHMENTS_UPLOAD_MIME_TYPES="" \
+    ATTACHMENTS_UPLOAD_MAX_SIZE=0 \
+    AVATARS_UPLOAD_EXTERNAL_PROGRAM="" \
+    AVATARS_UPLOAD_MIME_TYPES="" \
+    AVATARS_UPLOAD_MAX_SIZE=72000 \
     RICHER_CARD_COMMENT_EDITOR=false \
     CARD_OPENED_WEBHOOK_ENABLED=false \
-    ATTACHMENTS_STORE_PATH="" \
     MAX_IMAGE_PIXEL="" \
     IMAGE_COMPRESS_RATIO="" \
     NOTIFICATION_TRAY_AFTER_READ_DAYS_BEFORE_REMOVE="" \
@@ -42,12 +61,15 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     MATOMO_SITE_ID="" \
     MATOMO_DO_NOT_TRACK=true \
     MATOMO_WITH_USERNAME=false \
+    METRICS_ALLOWED_IP_ADDRESSES="" \
     BROWSER_POLICY_ENABLED=true \
     TRUSTED_URL="" \
     WEBHOOKS_ATTRIBUTES="" \
     OAUTH2_ENABLED=false \
+    OIDC_REDIRECTION_ENABLED=false \
     OAUTH2_CA_CERT="" \
     OAUTH2_ADFS_ENABLED=false \
+    OAUTH2_B2C_ENABLED=false \
     OAUTH2_LOGIN_STYLE=redirect \
     OAUTH2_CLIENT_ID="" \
     OAUTH2_SECRET="" \
@@ -64,6 +86,9 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     LDAP_ENABLE=false \
     LDAP_PORT=389 \
     LDAP_HOST="" \
+    LDAP_AD_SIMPLE_AUTH="" \
+    LDAP_USER_AUTHENTICATION=false \
+    LDAP_USER_AUTHENTICATION_FIELD=uid \
     LDAP_BASEDN="" \
     LDAP_LOGIN_FALLBACK=false \
     LDAP_RECONNECT=true \
@@ -81,8 +106,6 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     LDAP_ENCRYPTION=false \
     LDAP_CA_CERT="" \
     LDAP_REJECT_UNAUTHORIZED=false \
-    LDAP_USER_AUTHENTICATION=false \
-    LDAP_USER_AUTHENTICATION_FIELD=uid \
     LDAP_USER_SEARCH_FILTER="" \
     LDAP_USER_SEARCH_SCOPE="" \
     LDAP_USER_SEARCH_FIELD="" \
@@ -137,186 +160,124 @@ ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-
     SAML_IDENTIFIER_FORMAT="" \
     SAML_LOCAL_PROFILE_MATCH_ATTRIBUTE="" \
     SAML_ATTRIBUTES="" \
-    ORACLE_OIM_ENABLED=false
+    ORACLE_OIM_ENABLED=false \
+    WAIT_SPINNER="" \
+    WRITABLE_PATH=/data \
+    S3=""
+
+#   NODE_OPTIONS="--max_old_space_size=4096" \
+
+#---------------------------------------------
+# == at docker-compose.yml: AUTOLOGIN WITH OIDC/OAUTH2 ====
+# https://github.com/wekan/wekan/wiki/autologin
+#- OIDC_REDIRECTION_ENABLED=true
+#---------------------------------------------------------------------
 
 # Copy the app to the image
 COPY ${SRC_PATH} /home/wekan/app
 
-RUN \
-    set -o xtrace && \
-    # Add non-root user wekan
-    useradd --user-group --system --home-dir /home/wekan wekan && \
-    \
-    # OS dependencies
-    apt-get update -y && apt-get install -y --no-install-recommends ${BUILD_DEPS} && \
-    #pip3 install -U pip setuptools wheel && \
-    \
-    # Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
-    # https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
-    cp $(which tar) $(which tar)~ && \
-    ln -sf $(which bsdtar) $(which tar) && \
-    \
-    # Download nodejs
-    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
-    #---------------------------------------------------------------------------------------------
-    # Node Fibers 100% CPU usage issue:
-    # https://github.com/wekan/wekan-mongodb/issues/2#issuecomment-381453161
-    # https://github.com/meteor/meteor/issues/9796#issuecomment-381676326
-    # https://github.com/sandstorm-io/sandstorm/blob/0f1fec013fe7208ed0fd97eb88b31b77e3c61f42/shell/server/00-startup.js#L99-L129
-    # Also see beginning of wekan/server/authentication.js
-    #   import Fiber from "fibers";
-    #   Fiber.poolSize = 1e9;
-    # OLD: Download node version 8.12.0 prerelease that has fix included, => Official 8.12.0 has been released
-    # Description at https://releases.wekan.team/node.txt
-    #wget https://releases.wekan.team/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    #echo "1ed54adb8497ad8967075a0b5d03dd5d0a502be43d4a4d84e5af489c613d7795  node-v8.12.0-linux-x64.tar.gz" >> SHASUMS256.txt.asc && \
-    \
-    # Verify nodejs authenticity
-    grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
-    #export GNUPGHOME="$(mktemp -d)" && \
-    #\
-    # Try other key servers if ha.pool.sks-keyservers.net is unreachable
-    # Code from https://github.com/chorrell/docker-node/commit/2b673e17547c34f17f24553db02beefbac98d23c
-    # gpg keys listed at https://github.com/nodejs/node#release-team
-    # and keys listed here from previous version of this Dockerfile
-    #for key in \
-    #9554F04D7259F04124DE6B476D5A82AC7E37093B \
-    #94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
-    #FD3A5288F042B6850C66B31F09FE44734EB7990E \
-    #71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
-    #DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
-    #C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
-    #B9AE9905FFD7803F25714661B63B535A4C206CA9 \
-    #; do \
-    #gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key" || \
-    #gpg --keyserver pgp.mit.edu --recv-keys "$key" || \
-    #gpg --keyserver keyserver.pgp.com --recv-keys "$key" ; \
-    #done && \
-    #gpg --verify SHASUMS256.txt.asc && \
-    # Ignore socket files then delete files then delete directories
-    #find "$GNUPGHOME" -type f | xargs rm -f && \
-    #find "$GNUPGHOME" -type d | xargs rm -fR && \
-    rm -f SHASUMS256.txt.asc && \
-    \
-    # Install Node
-    tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
-    mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
-    ln -s /opt/nodejs/bin/node /usr/bin/node && \
-    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
-    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config && \
-    \
-    #DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
-    #paxctl -mC `which node` && \
-    \
-    # Install Node dependencies. Python path for node-gyp.
-    npm install -g npm@${NPM_VERSION} && \
-    #npm config set python python2.7 && \
-    #npm install -g node-gyp && \
-    #npm install -g fibers@${FIBERS_VERSION} && \
-    \
-    # Change user to wekan and install meteor
-    cd /home/wekan/ && \
-    chown wekan --recursive /home/wekan && \
-    #curl "https://install.meteor.com" -o /home/wekan/install_meteor.sh && \
-    #curl "https://install.meteor.com/?release=${METEOR_RELEASE}" -o /home/wekan/install_meteor.sh && \
-    # OLD: sed -i "s|RELEASE=.*|RELEASE=${METEOR_RELEASE}\"\"|g" ./install_meteor.sh && \
-    # Install Meteor forcing its progress
-    #sed -i 's/VERBOSITY="--silent"/VERBOSITY="--progress-bar"/' ./install_meteor.sh && \
-    echo "Starting meteor ${METEOR_RELEASE} installation...   \n" && \
-    gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh && \
-    mv /root/.meteor /home/wekan/ && \
-    chown wekan --recursive /home/wekan/.meteor && \
-    \
-    # Check if opting for a release candidate instead of major release
-    #if [ "$USE_EDGE" = false ]; then \
-      #gosu wekan:wekan sh /home/wekan/install_meteor.sh; \
-    #  gosu wekan:wekan curl https://install.meteor.com/ | sh; \
-    #else \
-    #  gosu wekan:wekan git clone --recursive --depth 1 -b release/METEOR@${METEOR_EDGE} https://github.com/meteor/meteor.git /home/wekan/.meteor; \
-    #fi; \
-    #\
-    # Get additional packages
-    #mkdir -p /home/wekan/app/packages && \
-    #chown wekan:wekan --recursive /home/wekan && \
-    # REPOS BELOW ARE INCLUDED TO WEKAN REPO
-    #cd /home/wekan/app/packages && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/flow-router.git kadira-flow-router && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/meteor-useraccounts/core.git meteor-useraccounts-core && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-cas.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-ldap.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/wekan-scrollbar.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/wekan/meteor-accounts-oidc.git && \
-    #gosu wekan:wekan git clone --depth 1 -b master --recurse-submodules https://github.com/wekan/markdown.git && \
-    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_accounts-oidc wekan-accounts-oidc && \
-    #gosu wekan:wekan mv meteor-accounts-oidc/packages/switch_oidc wekan-oidc && \
-    #gosu wekan:wekan rm -rf meteor-accounts-oidc && \
-    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
-    cd /home/wekan/.meteor && \
-    gosu wekan:wekan /home/wekan/.meteor/meteor -- help; \
-    \
-    # extract the OpenAPI specification
-    #npm install -g api2html@0.3.3 && \
-    #mkdir -p /home/wekan/python && \
-    #chown wekan --recursive /home/wekan/python && \
-    #cd /home/wekan/python && \
-    #gosu wekan:wekan git clone --depth 1 -b master https://github.com/Kronuz/esprima-python && \
-    #cd /home/wekan/python/esprima-python && \
-    #python3 setup.py install --record files.txt && \
-    #cd /home/wekan/app && \
-    #mkdir -p /home/wekan/app/public/api && \
-    #chown wekan --recursive /home/wekan/app && \
-    #gosu wekan:wekan python3 ./openapi/generate_openapi.py --release $(git describe --tags --abbrev=0) > ./public/api/wekan.yml && \
-    #gosu wekan:wekan /opt/nodejs/bin/api2html -c ./public/logo-header.png -o ./public/api/wekan.html ./public/api/wekan.yml; \
-    # Build app
-    cd /home/wekan/app && \
-    mkdir -p /home/wekan/.npm && \
-    chown wekan --recursive /home/wekan/.npm /home/wekan/.config /home/wekan/.meteor && \
-    #gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js && \
-    chmod u+w *.json && \
-    gosu wekan:wekan npm install && \
-    gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build && \
-    #cp /home/wekan/app/fix-download-unicode/cfs_access-point.txt /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
-    #rm /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/rajit_bootstrap3-datepicker/lib/bootstrap-datepicker/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs && \
-    #chown wekan /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
-    #Removed binary version of bcrypt because of security vulnerability that is not fixed yet.
-    #https://github.com/wekan/wekan/commit/4b2010213907c61b0e0482ab55abb06f6a668eac
-    #https://github.com/wekan/wekan/commit/7eeabf14be3c63fae2226e561ef8a0c1390c8d3c
-    #cd /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt && \
-    #gosu wekan:wekan rm -rf node_modules/bcrypt && \
-    #gosu wekan:wekan npm install bcrypt && \
-    #
-    # Delete phantomjs
-    #cd /home/wekan/app_build/bundle && \
-    #find . -name "*phantomjs*" | xargs rm -rf && \
-    #
-    cd /home/wekan/app_build/bundle/programs/server/ && \
-    chmod u+w *.json && \
-    gosu wekan:wekan npm install && \
-    #gosu wekan:wekan npm install bcrypt && \
-    # Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
-    rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy && \
-    mv /home/wekan/app_build/bundle /build && \
-    \
-    # Put back the original tar
-    mv $(which tar)~ $(which tar) && \
-    \
-    # Cleanup
-    apt-get remove --purge -y ${BUILD_DEPS} && \
-    apt-get autoremove -y && \
-    npm uninstall -g api2html &&\
-    rm -R /var/lib/apt/lists/* && \
-    rm -R /home/wekan/.meteor && \
-    rm -R /home/wekan/app && \
-    rm -R /home/wekan/app_build
-    #cat /home/wekan/python/esprima-python/files.txt | xargs rm -R && \
-    #rm -R /home/wekan/python
-    #rm /home/wekan/install_meteor.sh
+RUN <<EOR
+set -o xtrace
+# Add non-root user wekan
+useradd --user-group --system --home-dir /home/wekan wekan
+# OS dependencies
+apt-get update -y
+apt-get install -y --no-install-recommends ${BUILD_DEPS}
+# Meteor installer doesn't work with the default tar binary, so using bsdtar while installing.
+# https://github.com/coreos/bugs/issues/1095#issuecomment-350574389
+cp $(which tar) $(which tar)~
+ln -sf $(which bsdtar) $(which tar)
+# Download nodejs
+wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz
+wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt
+#wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz
+#wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc
+#---------------------------------------------------------------------------------------------
+
+# Verify nodejs authenticity
+grep node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt | shasum -a 256 -c -
+rm -f SHASUMS256.txt
+#grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c -
+#rm -f SHASUMS256.txt.asc
+
+# Install Node
+tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz
+rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz
+mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs
+ln -s /opt/nodejs/bin/node /usr/bin/node
+ln -s /opt/nodejs/bin/npm /usr/bin/npm
+mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/${NODE_VERSION} /home/wekan/.config
+chown wekan --recursive /home/wekan/.config
+
+#DOES NOT WORK: paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
+#paxctl -mC `which node`
+
+# Install Node dependencies. Python path for node-gyp.
+npm install -g npm@${NPM_VERSION}
+
+# Change user to wekan and install meteor
+cd /home/wekan/
+chown wekan --recursive /home/wekan
+echo "Starting meteor ${METEOR_RELEASE} installation...   \n"
+gosu wekan:wekan curl https://install.meteor.com/ | /bin/sh
+mv /root/.meteor /home/wekan/
+chown wekan --recursive /home/wekan/.meteor
+
+sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js
+cd /home/wekan/.meteor
+gosu wekan:wekan /home/wekan/.meteor/meteor -- help;
+
+# Build app
+cd /home/wekan/app
+mkdir -p /home/wekan/.npm
+chown wekan --recursive /home/wekan/.npm /home/wekan/.config /home/wekan/.meteor
+chmod u+w *.json
+gosu wekan:wekan meteor npm install
+gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build
+cd /home/wekan/app_build/bundle/programs/server/
+chmod u+w *.json
+gosu wekan:wekan meteor npm install
+cd node_modules/fibers
+node build.js
+cd ../..
+# Remove legacy webbroser bundle, so that Wekan works also at Android Firefox, iOS Safari, etc.
+rm -rf /home/wekan/app_build/bundle/programs/web.browser.legacy
+mv /home/wekan/app_build/bundle /build
+
+# Put back the original tar
+mv $(which tar)~ $(which tar)
+
+# Cleanup
+apt-get remove --purge -y ${BUILD_DEPS}
+apt-get autoremove -y
+npm uninstall -g api2html
+rm -R /tmp/*
+rm -R /var/lib/apt/lists/*
+rm -R /home/wekan/.meteor
+rm -R /home/wekan/app
+rm -R /home/wekan/app_build
+mkdir /data
+chown wekan --recursive /data
+#cat /home/wekan/python/esprima-python/files.txt | xargs rm -R
+#rm -R /home/wekan/python
+#rm /home/wekan/install_meteor.sh
+EOR
 
 ENV PORT=8080
 EXPOSE $PORT
 USER wekan
 
-CMD ["node", "/build/main.js"]
+STOPSIGNAL SIGKILL
+
+#---------------------------------------------------------------------
+# https://github.com/wekan/wekan/issues/3585#issuecomment-1021522132
+# Add more Node heap:
+#   NODE_OPTIONS="--max_old_space_size=4096"
+# Add more stack:
+#   bash -c "ulimit -s 65500; exec node --stack-size=65500 main.js"
+#---------------------------------------------------------------------
+#
+# CMD ["node", "/build/main.js"]
+
+#CMD ["bash", "-c", "ulimit -s 65500; exec node --stack-size=65500 /build/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node /build/main.js"]

Dockerfile.arm64v8

@@ -1,19 +1,22 @@
-FROM amd64/alpine:3.7 AS builder
+FROM arm64v8/ubuntu:23.04 AS builder
+#FROM amd64/alpine:latest AS builder
 
 # Set the environment variables for builder
-ENV QEMU_VERSION=v4.2.0-6 \
+ENV QEMU_VERSION=v7.2.0-1 \
     QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.22.0 \
-    WEKAN_VERSION=3.96  \
+    NODE_VERSION=v14.21.4 \
+    WEKAN_VERSION=latest  \
     WEKAN_ARCHITECTURE=arm64
 
-     # Install dependencies
-RUN  apk update && apk add ca-certificates outils-sha1 && \
-     \
-     # Download qemu static for our architecture
-     wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
-     \
+    # Install dependencies
+#RUN apk update && apk add ca-certificates outils-sha1 && \
+RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
+RUN apt update && apt install ca-certificates wget unzip -y && \
+    \
+    # Download qemu static for our architecture
+    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
+    \
     # Download wekan and shasum
     wget https://releases.wekan.team/raspi3/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
     wget https://releases.wekan.team/raspi3/SHA256SUMS.txt && \
@@ -24,23 +27,27 @@ RUN  apk update && apk add ca-certificates outils-sha1 && \
     unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
     \
     # Download node and shasums
-    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
-    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
     \
     # Verify nodejs authenticity
-    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | sha256sum -c - && \
+    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
     \
     # Extract node and remove tar.gz
     tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
 
 # Build wekan dockerfile
-FROM arm64v8/ubuntu:19.10
+FROM --platform=linux/arm64 arm64v8/ubuntu:23.04
 LABEL maintainer="wekan"
 
 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v12.22.0 \
+    NODE_VERSION=v14.21.4 \
     NODE_ENV=production \
     NPM_VERSION=latest \
     WITH_API=true \
@@ -66,12 +73,20 @@ RUN \
     ln -s /opt/nodejs/bin/node /usr/bin/node && \
     ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
     mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
-    chown wekan --recursive /home/wekan/.config && \
-    \
-    # Install Node dependencies
-    npm install -g npm@${NPM_VERSION}
+    chown wekan --recursive /home/wekan/.config
+
+#    \
+#    # Install Node dependencies
+#    #npm install -g npm@${NPM_VERSION} && \
+#    \
+#    # Install Health Check dependencies
+#    #apk add curl
+#
+#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
+#  CMD curl --fail "http://localhost:$PORT" || exit 1
 
 EXPOSE $PORT
 USER wekan
 
-CMD ["node", "/home/wekan/bundle/main.js"]
+CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]
+

Dockerfile.s390x

@@ -0,0 +1,94 @@
+FROM arm64v8/ubuntu:23.04 AS builder
+#FROM --platform=linux/amd64 amd64/ubuntu:23.04 AS builder
+#FROM --platform=linux/amd64 ghcr.io/wekan/wekan:main AS builder
+#FROM arm64v8/ubuntu:23.04 AS builder
+#FROM amd64/alpine:latest AS builder
+
+# Set the environment variables for builder
+ENV QEMU_VERSION=v7.2.0-1 \
+    QEMU_ARCHITECTURE=s390x \
+    NODE_ARCHITECTURE=linux-s390x \
+    NODE_VERSION=v14.21.4 \
+    WEKAN_VERSION=latest  \
+    WEKAN_ARCHITECTURE=s390x
+
+    # Install dependencies
+#RUN apk update && apk add ca-certificates outils-sha1 && \
+RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
+RUN apt update && apt install ca-certificates wget unzip -y && \
+    \
+    # Download qemu static for our architecture
+    wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-${QEMU_ARCHITECTURE}-static.tar.gz -O - | tar -xz && \
+    \
+    # Download wekan and shasum
+    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
+    wget https://releases.wekan.team/${WEKAN_ARCHITECTURE}/SHA256SUMS.txt && \
+    # Verify wekan
+    grep wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip SHA256SUMS.txt | sha256sum -c - && \
+    \
+    # Unzip wekan
+    unzip wekan-${WEKAN_VERSION}-${WEKAN_ARCHITECTURE}.zip && \
+    \
+    # Download node and shasums
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    wget https://github.com/wekan/node-v14-esm/releases/download/${NODE_VERSION}/SHASUMS256.txt && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz && \
+    #wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    \
+    # Verify nodejs authenticity
+    grep node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz SHASUMS256.txt | sha256sum -c - && \
+    \
+    # Extract node and remove tar.gz
+    tar xvzf node-${NODE_VERSION}-${NODE_ARCHITECTURE}.tar.gz
+
+# Build wekan dockerfile
+FROM --platform=linux/s390x s390x/ubuntu:23.04
+LABEL maintainer="wekan"
+
+# Set the environment variables (defaults where required)
+ENV QEMU_ARCHITECTURE=s390x \
+    NODE_ARCHITECTURE=linux-s390x \
+    NODE_VERSION=v14.21.4 \
+    NODE_ENV=production \
+    NPM_VERSION=latest \
+    WITH_API=true \
+    PORT=8080 \
+    ROOT_URL=http://localhost \
+    MONGO_URL=mongodb://127.0.0.1:27017/wekan
+
+# Copy qemu-static to image
+COPY --from=builder qemu-${QEMU_ARCHITECTURE}-static /usr/bin
+
+# Copy the app to the image
+COPY --from=builder bundle /home/wekan/bundle
+
+# Copy
+COPY --from=builder node-${NODE_VERSION}-${NODE_ARCHITECTURE} /opt/nodejs
+
+RUN \
+    set -o xtrace && \
+    # Add non-root user wekan
+    useradd --user-group --system --home-dir /home/wekan wekan && \
+    \
+    # Install Node
+    ln -s /opt/nodejs/bin/node /usr/bin/node && \
+    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
+    mkdir -p /opt/nodejs/lib/node_modules/fibers/.node-gyp /root/.node-gyp/8.16.1 /home/wekan/.config && \
+    chown wekan --recursive /home/wekan/.config
+
+#    \
+#    # Install Node dependencies
+#    #npm install -g npm@${NPM_VERSION} && \
+#    \
+#    # Install Health Check dependencies
+#    #apk add curl
+#
+#HEALTHCHECK --start-period=30s --interval=30s --timeout=10s --retries=3 \
+#  CMD curl --fail "http://localhost:$PORT" || exit 1
+
+EXPOSE $PORT
+USER wekan
+
+CMD ["bash", "-c", "ulimit -s 65500; exec node /home/wekan/bundle/main.js"]

FUTURE.md

@@ -0,0 +1,40 @@
+# Future
+
+## Moved Import/Export/Sync issues to Big Picture Roadmap wiki page
+
+This change is limited to only Import/Export/Sync issues, while those are In Progress of being fixed.
+
+2023-11-21 xet7 closed 261 issues that are linked at https://github.com/wekan/wekan/wiki/Sync ,
+that is Roadmap of Import/Export/Sync in WeKan. It means, that those issues progress will be
+updated at that wiki page, when xet7 and other WeKan contributors fix those.
+Many of those issues are In Progress of being fixed and added.
+
+## Platform Updates
+
+Issues related to platforms are being closed, because only list of working platforms is mentioned now
+at WeKan website https://wekan.github.io Install section and at [ChangeLog](https://github.com/wekan/wekan/blob/main/CHANGELOG.md)
+where is this new text:
+
+> Newest WeKan at amd64 platforms: Linux bundle, Snap Candidate, Docker, Kubernetes. Fixing other platforms In Progress. 
+
+Platform support changes often, because:
+
+- There are many dependencies, that update or break or change often
+- Node.js segfaults at some CPU/OS
+- Some platforms have build errors
+
+Roadmap is to update all existing platforms, and add more platforms.
+
+Upcoming platform upgrades:
+
+- Fix migrations, so that newest WeKan can be released to Snap Stable. (Currently newest is at Snap Candidate).
+
+## WeKan features
+
+Most Meteor WeKan features are listed here:
+
+https://github.com/wekan/wekan/wiki/Deep-Dive-Into-WeKan
+
+Remaining features and all changes are listed here:
+
+https://github.com/wekan/wekan/blob/main/CHANGELOG.md

GOVERNANCE.md

@@ -0,0 +1,10 @@
+# Governance
+
+Anyone can send pull request to https://github.com/wekan/wekan/wiki/pulls ,
+if there is permission to add code to WeKan with MIT license.
+
+As maintainer, xet7 checks all pull requests and merges them.
+
+Only xet7 has write access to repo https://github.com/wekan/wekan
+
+

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2019 The Wekan Team
+Copyright (c) 2014-2023 The Wekan Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,34 +1,52 @@
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/wekan/wekan)
+[Gitpod Ready-to-Code](https://gitpod.io/#https://github.com/wekan/wekan)
 
-# Wekan - Open Source kanban
+# WeKan ® - Open Source kanban
 
-[![Contributors](https://img.shields.io/github/contributors/wekan/wekan.svg "Contributors")](https://github.com/wekan/wekan/graphs/contributors)
-[![Docker Repository on Quay](https://quay.io/repository/wekan/wekan/status "Docker Repository on Quay")](https://quay.io/repository/wekan/wekan)
-[![Docker Hub container status](https://img.shields.io/docker/build/wekanteam/wekan.svg "Docker Hub container status")](https://hub.docker.com/r/wekanteam/wekan)
-[![Docker Hub pulls](https://img.shields.io/docker/pulls/wekanteam/wekan.svg "Docker Hub Pulls")](https://hub.docker.com/r/wekanteam/wekan)
-[![Wekan Build Status][travis_badge]][travis_status]
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/02137ecec4e34c5aa303f57637196a93 "Codacy Badge")](https://www.codacy.com/app/xet7/wekan?utm_source=github.com&utm_medium=referral&utm_content=wekan/wekan&utm_campaign=Badge_Grade)
-[![Code Climate](https://codeclimate.com/github/wekan/wekan/badges/gpa.svg "Code Climate")](https://codeclimate.com/github/wekan/wekan)
-[![Project Dependencies](https://david-dm.org/wekan/wekan.svg "Project Dependencies")](https://david-dm.org/wekan/wekan)
-[![Code analysis at Open Hub](https://img.shields.io/badge/code%20analysis-at%20Open%20Hub-brightgreen.svg "Code analysis at Open Hub")](https://www.openhub.net/p/wekan)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_shield)
-[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619/badge)](https://bestpractices.coreinfrastructure.org/projects/4619)
+## Downloads
 
-## [Translate Wekan at Transifex](https://transifex.com/wekan/wekan)
+https://wekan.github.io / Install WeKan ® Server
 
-Translations to non-English languages are accepted only at [Transifex](https://transifex.com/wekan/wekan) using webbrowser.
-New English strings of new features can be added as PRs to edge branch file wekan/i18n/en.i18n.json .
+## Docker Containers
 
-## [Wekan feature requests and bugs](https://github.com/wekan/wekan/issues)
+- [GitHub](https://github.com/wekan/wekan/pkgs/container/wekan)
+- [Quay](https://quay.io/repository/wekan/wekan)
+- [Docker Hub](https://hub.docker.com/r/wekanteam/wekan)
 
-Please add most of your questions as GitHub issue: [Wekan Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
+docker-compose.yml at https://github.com/wekan/wekan/blob/main/docker-compose.yml
+
+## Standards
+
+- [WeKan and Standard for Public Code](https://wekan.github.io/standard-for-public-code/) assessment was made at 2023-11.
+  Currently Wekan meets 8 out of 16 criteria out of the box.
+  Some others could be met with small changes.
+
+## Code stats
+
+- [CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/4619)
+- [Code Climate](https://codeclimate.com/github/wekan/wekan)
+- [Open Hub](https://www.openhub.net/p/wekan)
+- [OSS Insight](https://ossinsight.io/analyze/wekan/wekan)
+
+## [Translate WeKan ® at Transifex](https://app.transifex.com/wekan/)
+
+Translations to non-English languages are accepted only at [Transifex](https://app.transifex.com/wekan/wekan) using webbrowser.
+New English strings of new features can be added as PRs to master branch file wekan/imports/i18n/data/en.i18n.json .
+
+## [WeKan ® feature requests and bugs](https://github.com/wekan/wekan/issues)
+
+Please add most of your questions as GitHub issue: [WeKan ® Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 It's better than at chat where details get lost when chat scrolls up.
 
 ## Chat
 
-[Discussions][discussions] - Wekan Community GitHub Discussions, that are not [Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
+[Discussions][discussions] - WeKan Community GitHub Discussions, that are not [Feature Requests and Bugs](https://github.com/wekan/wekan/issues).
 
-[Wekan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
+[WeKan IRC FAQ](https://github.com/wekan/wekan/wiki/IRC-FAQ)
+
+## Docker: Latest tag has newest release
+
+You can use latest tag to get newest release tag.
+See bottom of https://github.com/wekan/wekan/issues/3874
 
 ## FAQ
 
@@ -36,9 +54,9 @@ It's better than at chat where details get lost when chat scrolls up.
 - Please read the [FAQ](https://github.com/wekan/wekan/wiki/FAQ) first
 - Please don't feed the [trolls](https://github.com/wekan/wekan/wiki/FAQ#why-am-i-called-a-troll) and [spammers](https://github.com/wekan/wekan/wiki/FAQ#why-am-i-called-a-spammer) that are mentioned in the FAQ :)
 
-## About Wekan
+## About WeKan ®
 
-Wekan is an completely [Open Source][open_source] and [Free software][free_software]
+WeKan ® is an completely [Open Source][open_source] and [Free software][free_software]
 collaborative kanban board application with MIT license.
 
 Whether you’re maintaining a personal todo list, planning your holidays with some friends,
@@ -46,74 +64,70 @@ or working in a team on your next revolutionary idea, Kanban boards are an unbea
 to keep your things organized. They give you a visual overview of the current state of your project,
 and make you productive by allowing you to focus on the few items that matter the most.
 
-Since Wekan is a free software, you don’t have to trust us with your data and can
+Since WeKan ® is a free software, you don’t have to trust us with your data and can
 install Wekan on your own computer or server. In fact we encourage you to do
 that by providing one-click installation on various platforms.
 
-- Wekan is used in [most countries of the world](https://snapcraft.io/wekan).
-- Wekan largest user has 13k users using Wekan in their company.
-- Wekan has been [translated](https://transifex.com/wekan/wekan) to about 62 languages.
-- [Features][features]: Wekan has real-time user interface.
-- [Platforms][platforms]: Wekan supports many platforms.
-  Wekan is critical part of new platforms Wekan is currently being integrated to.
+- WeKan ® is used in [most countries of the world](https://snapcraft.io/wekan).
+- WeKan ® largest user has 30k users using WeKan ® in their company.
+- WeKan ® has been [translated](https://app.transifex.com/wekan/) to about 105 languages.
+- [Features][features]: WeKan ® has real-time user interface.
+- [Platforms][platforms]: WeKan ® supports many platforms.
+  WeKan ® is critical part of new platforms Wekan is currently being integrated to.
 
 ## Requirements
 
 - 64bit: Linux [Snap](https://github.com/wekan/wekan-snap/wiki/Install) or [Sandstorm](https://sandstorm.io) /
   [Mac](https://github.com/wekan/wekan/wiki/Mac) / [Windows](https://github.com/wekan/wekan/wiki/Install-Wekan-from-source-on-Windows).
   [More Platforms](https://github.com/wekan/wekan/wiki/Platforms), bundle for RasPi3 ARM and other CPUs where Node.js and MongoDB exists.
-- 1 GB RAM minimum free for Wekan. Production server should have minimum total 4 GB RAM.
-  For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/master/docker-compose.yml): 3 frontend servers,
+- 1 GB RAM minimum free for WeKan ®. Production server should have minimum total 4 GB RAM.
+  For thousands of users, for example with [Docker](https://github.com/wekan/wekan/blob/main/docker-compose.yml): 3 frontend servers,
   each having 2 CPU and 2 wekan-app containers. One backend wekan-db server with many CPUs.
 - Enough disk space and alerts about low disk space. If you run out disk space, MongoDB database gets corrupted.
-- SECURITY: Updating to newest Wekan version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
-  Old versions have security issues because of old versions Node.js etc. Only newest Wekan is supported.
-  Wekan on Sandstorm is not usually affected by any Standalone Wekan (Snap/Docker/Source) security issues.
+- SECURITY: Updating to newest WeKan ® version very often. Please check you do not have automatic updates of Sandstorm or Snap turned off.
+  Old versions have security issues because of old versions Node.js etc. Only newest WeKan ® is supported.
+  WeKan ® on Sandstorm is not usually affected by any Standalone WeKan ® (Snap/Docker/Source) security issues.
 - [Reporting all new bugs immediately](https://github.com/wekan/wekan/issues).
-  New features and fixes are added to Wekan [many times a day](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md).
-- [Backups](https://github.com/wekan/wekan/wiki/Backup) of Wekan database once a day miminum.
+  New features and fixes are added to WeKan ® [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
+- [Backups](https://github.com/wekan/wekan/wiki/Backup) of WeKan ® database once a day miminum.
   Bugs, updates, users deleting list or card, harddrive full, harddrive crash etc can eat your data. There is no undo yet.
-  Some bug can cause Wekan board to not load at all, requiring manual fixing of database content.
+  Some bug can cause WeKan ® board to not load at all, requiring manual fixing of database content.
 
 ## Roadmap and Demo
 
-[Roadmap][roadmap_wekan] - Public read-only board at Wekan demo.
+[Roadmap][roadmap_wekan] - Public read-only board at WeKan ® demo.
 
 [Developer Documentation][dev_docs]
 
-- There is many companies and individuals contributing code to Wekan, to add features and bugfixes
-  [many times a day](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md).
+- There is many companies and individuals contributing code to WeKan ®, to add features and bugfixes
+  [many times a day](https://github.com/wekan/wekan/blob/main/CHANGELOG.md).
 - [Please add Add new Feature Requests and Bug Reports immediately](https://github.com/wekan/wekan/issues).
 - [Commercial Support](https://wekan.team/commercial-support/).
 
 We also welcome sponsors for features and bugfixes.
-By working directly with Wekan you get the benefit of active maintenance and new features added by growing Wekan developer community.
+By working directly with WeKan ® you get the benefit of active maintenance and new features added by growing WeKan ® developer community.
 
 ## Screenshot
 
 [More screenshots at Features page](https://github.com/wekan/wekan/wiki/Features)
 
-[![Screenshot of Wekan][screenshot_wekan]][roadmap_wekan]
+[![Screenshot of WeKan ®][screenshot_wekan]][roadmap_wekan]
 
 ## License
 
-Wekan is released under the very permissive [MIT license](LICENSE), and made
+WeKan ® is released under the very permissive [MIT license](LICENSE), and made
 with [Meteor](https://www.meteor.com).
 
 [platforms]: https://github.com/wekan/wekan/wiki/Platforms
 [dev_docs]: https://github.com/wekan/wekan/wiki/Developer-Documentation
-[screenshot_wekan]: https://wekan.github.io/wekan-markdown.png
+[screenshot_wekan]: https://wekan.github.io/wekan-dark-mode.png
 [features]: https://github.com/wekan/wekan/wiki/Features
 [roadmap_wekan]: https://boards.wekan.team/b/D2SzJKZDS4Z48yeQH/wekan-open-source-kanban-board-with-mit-license
 [wekan_issues]: https://github.com/wekan/wekan/issues
 [wekan_issues]: https://github.com/wekan/wekan/issues
 [docker_image]: https://hub.docker.com/r/wekanteam/wekan/
-[travis_badge]: https://travis-ci.org/wekan/wekan.svg?branch=devel
-[travis_status]: https://travis-ci.org/wekan/wekan
 [wekan_wiki]: https://github.com/wekan/wekan/wiki
-[translate_wekan]: https://www.transifex.com/wekan/wekan/
+[translate_wekan]: https://app.transifex.com/wekan/
 [open_source]: https://en.wikipedia.org/wiki/Open-source_software
 [free_software]: https://en.wikipedia.org/wiki/Free_software
 [discussions]: https://github.com/wekan/wekan/discussions
-
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fwekan%2Fwekan.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fwekan%2Fwekan?ref=badge_large)

SECURITY.md

@@ -1,3 +1,5 @@
+About money, see [CONTRIBUTING.md](CONTRIBUTING.md)
+
 Security is very important to us. If you discover any issue regarding security, please disclose
 the information responsibly by sending an email to support (at) wekan.team using
 [this PGP public key](support-at-wekan.team_pgp-publickey.asc) and not by
@@ -29,7 +31,7 @@ added to the Wekan Hall of Fame.
 ## Which domains are in scope?
 
 No public domains, because all those are donated to Wekan Open Source project,
-and we don't have any permissions to do security scans on those donated servers
+and we don't have any permissions to do security scans on those donated servers.
 
 Please don't perform research that could impact other users. Secondly, please keep
 the reports short and succinct. If we fail to understand the logics of your bug, we will tell you.
@@ -48,31 +50,132 @@ like Snap and Docker have their own specific sandboxing etc features.
 
 Standalone Wekan by default does not load any files from Internet, like fonts, CSS, etc.
 This also means all Standalone Wekan functionality works in offline local networks.
-Wekan is used by companies that have [thousands of users](https://github.com/wekan/wekan/wiki/AWS) and at healthcare.
+WeKan is used at most countries of the world https://snapcraft.io/wekan
+and by by companies that have 30k users.
 
-Wekan uses xss package for input fields like cards, as you can see from
-[package.json](https://github.com/wekan/wekan/blob/devel/package.json). Other used versions can be seen from
-[Meteor versions file](https://github.com/wekan/wekan/blob/devel/.meteor/versions).
-Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
-It's possible to add attachments to cards, and markdown/html links to files.
+- Wekan private board attachments are not accessible without logging in.
+- There is feature to set board public, so that board is visible without logging in in readonly mode, with realtime updates.
+- Admin Panel has feature to disable all public boards, so all boards are private.
 
-Wekan attachments are not accessible without logging in. Import from Trello works by copying
-Trello export JSON to Wekan Trello import page, and in Trello JSON file there is direct links to all publicly
-accessible Trello attachment files, that Standalone Wekan downloads directly to Wekan MongoDB database in
-[CollectionFS](https://github.com/wekan/wekan/pull/875) format. When Wekan board is exported in
-Wekan JSON format, all board attachments are included in Wekan JSON file as base64 encoded text.
-That Wekan JSON format file can be imported to Sandstorm Wekan with all the attachments, when we get
-latest Wekan version working on Sandstorm, only couple of bugs are left before that. In Sandstorm it's not
-possible yet to import from Trello with attachments, because Wekan does not implement Sandstorm-compatible
-access to outside of Wekan grain.
+## SSL/TLS
 
-Standalone Wekan only has password auth currently, there is work in progress to add
-[oauth2](https://github.com/wekan/wekan/pull/1578), [Openid](https://github.com/wekan/wekan/issues/538),
-[LDAP](https://github.com/wekan/wekan/issues/119) etc. If you need more login security for Standalone Wekan now,
-it's possible add additional [Google Auth proxybouncer](https://github.com/wekan/wekan/wiki/Let's-Encrypt-and-Google-Auth) in front of password auth, and then use Google Authenticator for Google Auth. Standalone Wekan does have [brute force protection with eluck:accounts-lockout and browser-policy clickjacking protection](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release). You can also optionally use some [WAF](https://en.wikipedia.org/wiki/Web_application_firewall)
-like for example [AWS WAF](https://aws.amazon.com/waf/).
+- SSL/TLS encrypts traffic between webbrowser and webserver.
+- If you are thinking about TLS MITM, look at https://github.com/caddyserver/caddy/issues/2530
+- Let's Encrypt TLS requires publicly accessible webserver, that Let's Encrypt TLS validation servers check.
+- If firewall limits to only allowed IP addresses, you may need non-Let's Encrypt TLS cert.
+- For On Premise:
+  - https://caddyserver.com/docs/automatic-https#local-https
+  - https://github.com/wekan/wekan/wiki/Caddy-Webserver-Config
+  - https://github.com/wekan/wekan/wiki/Azure
+  - https://github.com/wekan/wekan/wiki/Traefik-and-self-signed-SSL-certs
 
-[All Wekan Platforms](https://github.com/wekan/wekan/wiki/Platforms)
+## XSS
+
+- Dompurify https://www.npmjs.com/package/dompurify
+  - WeKan uses dompurify npm package to filter for XSS at fields like cards, as you can see from
+    [package.json](https://github.com/wekan/wekan/blob/main/package.json). Other used versions can be seen from
+    [Meteor versions file](https://github.com/wekan/wekan/blob/main/.meteor/versions).
+  - Forms can include markdown links, html, image tags etc like you see at https://wekan.github.io .
+  - It's possible to add attachments to cards, and markdown/html links to files.
+  - Dompurify cleans up viewed code, so Javascript in input fields does not execute
+    - https://wekan.github.io/hall-of-fame/fieldbleed/
+- Reaction in comment is now checked, that it does not have extra added code
+  - https://wekan.github.io/hall-of-fame/reactionbleed/
+- https://github.com/wekan/wekan/blob/main/packages/markdown/src/template-integration.js#L76
+
+## QA about PubSub
+
+Q:
+
+Hello,
+I have just seen the Meteor DevTools Evolved extension and was wondering if anyone had asked themselves the question of security.
+Insofar as all data is shown in the minimongo tab in plain text.
+How can data be hidden from this extension?
+
+A:
+
+## PubSub
+
+- It is not security issue to show some text or image, that user has permission to see. It is a security issue, if browserside is some text or image that user should not see.
+- Meteor has browserside minimongo database, made with Javascript, updated with Publish/Subscribe, PubSub.
+- Publish/Subscribe means, that realtime web framework reads database changes stream, and then immediately updates webpage,
+  like like dashboards, chat, kanban. That is the point in any realtime web framework in any programming language.
+- Yes, you should check with Meteor DevTools Evolved Chromium/Firefox extension that at minimongo is only text that user has permission to see.
+- Do checking as logged in user, and logged out user.
+- Check permissions and sanitize before allowing some change, because someone could modify content of input field,
+  PubSub/websocket data (for example with Burp Suite Community Edition), etc.
+- If you have REST API, also check that only those that have login token, and have permission, can view or edit text
+- You should not include any data user is not allowed to see. Not to webpage text, not to websockets/PubSub, etc.
+- Minimongo should not have password hashes PubSub https://wekan.github.io/hall-of-fame/userbleed/
+- PubSub uses Websockets, so you need those to be enabled at webserver like Caddy/Nginx/Apache etc, examples of settings
+  at right menu of https://github.com/wekan/wekan/wiki
+- Clientside https://github.com/wekan/wekan/tree/main/client/components subscribes to 
+  PubSub https://github.com/wekan/wekan/tree/main/server/publications or calls meteor methods at https://github.com/wekan/wekan/tree/main/models
+- For Admin:
+  - You can have input field for password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+  - You can save password to database https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+  - Check that only current user or Admin can change password https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+    - Note that currentUser uses code like Meteor.user() in .js file
+  - Do not have password hashes in PubSub https://github.com/wekan/wekan/blob/main/server/publications/users.js
+  - Only show Admin Panel to Admin https://github.com/wekan/wekan/blob/main/client/components/settings/settingBody.jade#L3
+- If there is a lot of data, use pagination https://github.com/wekan/wekan/blob/main/client/components/settings/peopleBody.js
+- Only have limited amount of data published in PubSub. Limit in MongoDB query in publications how much is published. Too much could make browser too slow.
+- Use Environment variables for any email etc passwords.
+- But what if you would like to remove minimongo? And only use Meteor methods for saving? In that case, you don't have realtime updates,
+  and you need to write much more code to load and save data yourself, handle any multi user data saving conflicts yourself,
+  and many Meteor Atmospherejs.com PubSub using packages would not work anymore https://github.com/wekan/we
+
+## PubSub: Fix that user can not change to Admin
+
+- With PubSub, there is checking, that someone modifying Websockets content, like permission isAdmin, can not change to Admin.
+- https://github.com/wekan/wekan/commit/cbad4cf5943d47b916f64b4582f8ca76a9dfd743
+- https://wekan.github.io/hall-of-fame/adminbleed/
+
+## Permissions and Roles
+
+- For any user permissions, it's best to use Meteor package package https://github.com/Meteor-Community-Packages/meteor-roles .
+- Currently WeKan has custom hardcoded permissions, WeKan does not yet use that meteor-roles package.
+  - Using permissions at WeKan sidebar https://github.com/wekan/wekan/blob/main/client/components/sidebar/sidebar.js#L1854-L1875
+  - List of roles https://github.com/wekan/wekan/wiki/REST-API-Role . Change at board or Admin Panel. Also Organizations/Teams.
+  - Worker role: https://github.com/wekan/wekan/issues/2788
+  - Not implemented yet: Granular Roles https://github.com/wekan/wekan/issues/3022
+- Check is user logged in, with `if (Meteor.user()) {`
+- Check is code running at server `if (Meteor.isServer()) {` or client `if Meteor.isClient()) {` .
+- Here is some authentication code https://github.com/wekan/wekan/blob/main/server/authentication.js
+
+## Environment variables
+
+- For any passwords, use environment variables, those are serverside
+- Do not copy environment variable to public variable that is visible browserside https://github.com/wekan/wekan/blob/main/server/max-size.js
+
+```
+Meteor.startup(() => {
+  if (process.env.HEADER_LOGIN_ID) {
+    Meteor.settings.public.attachmentsUploadMaxSize   = process.env.ATTACHMENTS_UPLOAD_MAX_SIZE;
+    Meteor.settings.public.attachmentsUploadMimeTypes = process.env.ATTACHMENTS_UPLOAD_MIME_TYPES;
+    Meteor.settings.public.avatarsUploadMaxSize       = process.env.AVATARS_UPLOAD_MAX_SIZE;
+```
+
+- For serverside, you can set Meteor.settings.variablename, without text public
+- For WeKan kanban, there is feature for setting board public, it can be viewed by anyone, there is realtime updates. But 
+- Some of those permissions are checked at users.js models at https://github.com/wekan/wekan/tree/main/models
+- Environment variables are used for email server passwords, etc, at all platforms https://github.com/wekan/wekan/commit/a781c0e7dcfdbe34c1483ee83cec12455b7026f7
+
+## Escape HTML comment tags so that HTML comments are visible
+
+- Someone reported, that it is problem that content of HTML comments in edit mode, are not visible at at view mode, so this makes HTML comments visible.
+- https://github.com/wekan/wekan/commit/167863d95711249e69bb3511175d73b34acbbdb3
+- https://wekan.github.io/hall-of-fame/invisiblebleed/
+
+## Attachments: XSS in filename is sanitized
+
+- https://github.com/wekan/wekan/blob/main/client/components/cards/attachments.js#L303-L312
+- https://wekan.github.io/hall-of-fame/filebleed/
+
+## Brute force login protection
+
+- https://github.com/wekan/wekan/commit/23e5e1e3bd081699ce39ce5887db7e612616014d
+- https://github.com/wekan/wekan/tree/main/packages/wekan-accounts-lockout
 
 ### Sandstorm Wekan Security
 
@@ -105,12 +208,6 @@ a security issue, we'd like to know about it, and also how to fix it:
 
 Typical already known or "no impact" bugs such as:
 
-- Brute force password guessign. Currently there is
-  [brute force protection with eluck:accounts-lockout](https://github.com/wekan/wekan/blob/devel/CHANGELOG.md#v080-2018-04-04-wekan-release).
-- Security issues related to that Wekan uses Meteor 1.6.0.1 related packages, and upgrading to newer
-  Meteor 1.6.1 is complicated process that requires lots of changes to many dependency packages.
-  Upgrading [has been tried many times, spending a lot of time](https://github.com/meteor/meteor/issues/9609)
-  but there still is issues. Helping with package upgrades is very welcome.
 - [Wekan API old tokens not replaced correctly](https://github.com/wekan/wekan/issues/1437)
 - Missing Cookie flags on non-session cookies or 3rd party cookies
 - Logout CSRF

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v5.17.0"
+appVersion: "v7.45.0"
 files:
   userUploads:
     - README.md

api.py

@@ -5,6 +5,9 @@
 # Wekan API Python CLI, originally from here, where is more details:
 # https://github.com/wekan/wekan/wiki/New-card-with-Python3-and-REST-API
 
+# TODO:
+#   addcustomfieldtoboard: There is error: Settings must be object. So adding does not work yet.
+
 try:
     # python 3
     from urllib.parse import urlencode
@@ -18,24 +21,56 @@ import sys
 
 arguments = len(sys.argv) - 1
 
+syntax = """=== Wekan API Python CLI: Shows IDs for addcard ===
+# AUTHORID is USERID that writes card or custom field.
+If *nix:  chmod +x api.py => ./api.py users
+  Syntax:
+    User API:
+    python3 api.py user                 # Current user and list of current user boards
+    python3 api.py boards USERID        # Boards of USERID
+    python3 api.py swimlanes BOARDID    # Swimlanes of BOARDID
+    python3 api.py lists BOARDID        # Lists of BOARDID
+    python3 api.py list BOARDID LISTID  # Info of LISTID
+    python3 api.py createlist BOARDID LISTTITLE # Create list
+    python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION
+    python3 api.py editcard BOARDID LISTID CARDID NEWCARDTITLE NEWCARDDESCRIPTION
+    python3 api.py customfields BOARDID # Custom Fields of BOARDID
+    python3 api.py customfield BOARDID CUSTOMFIELDID # Info of CUSTOMFIELDID
+    python3 api.py addcustomfieldtoboard AUTHORID BOARDID NAME TYPE SETTINGS SHOWONCARD AUTOMATICALLYONCARD SHOWLABELONMINICARD SHOWSUMATTOPOFLIST # Add Custom Field to Board
+    python3 api.py editcustomfield BOARDID LISTID CARDID CUSTOMFIELDID NEWCUSTOMFIELDVALUE # Edit Custom Field
+    python3 api.py listattachments BOARDID # List attachments
+    python3 api.py cardsbyswimlane SWIMLANEID LISTID # Retrieve cards list on a swimlane
+    python3 api.py getcard BOARDID LISTID CARDID # Get card info
+    python3 api.py addlabel BOARDID LISTID CARDID LABELID # Add label to a card
+    python3 api.py addcardwithlabel AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION LABELIDS # Add a card and a label
+    python3 api.py editboardtitle BOARDID NEWBOARDTITLE # Edit board title
+    python3 api.py copyboard BOARDID NEWBOARDTITLE # Copy a board
+    python3 api.py createlabel BOARDID LABELCOLOR LABELNAME (Color available: `white`, `green`, `yellow`, `orange`, `red`, `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`, `peachpuff`, `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`, `gold`, `navy`, `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`, `indigo`) # Create a new label
+    python3 api.py editcardcolor BOARDID LISTID CARDID COLOR (Color available: `white`, `green`, `yellow`, `orange`, `red`, `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`, `peachpuff`, `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`, `gold`, `navy`, `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`, `indigo`) # Edit card color
+    python3 api.py addchecklist BOARDID CARDID TITLE ITEM1 ITEM2 ITEM3 ITEM4 (You can add multiple items or just one, or also without any item, just TITLE works as well. * If items or Title contains spaces, you should add ' between them.) # Add checklist + item on a card
+    python3 api.py deleteallcards BOARDID SWIMLANEID ( * Be careful will delete ALL CARDS INSIDE the swimlanes automatically in every list * ) # Delete all cards on a swimlane
+    python3 api.py checklistid BOARDID CARDID # Retrieve Checklist ID attached to a card
+    python3 api.py checklistinfo BOARDID CARDID CHECKLISTID # Get checklist info
+    python3 api.py get_list_cards_count BOARDID LISTID # Retrieve how many cards in a list
+    python3 api.py get_board_cards_count BOARDID # Retrieve how many cards in a board
+
+    
+  Admin API:
+    python3 api.py users                # All users
+    python3 api.py boards               # All Public Boards
+    python3 api.py newuser USERNAME EMAIL PASSWORD
+"""
+
 if arguments == 0:
-    print("=== Wekan API Python CLI: Shows IDs for addcard ===")
-    print("AUTHORID is USERID that writes card.")
-    print("If *nix:  chmod +x api.py => ./api.py users")
-    print("Syntax:")
-    print("  python3 api.py users              # All users")
-    print("  python3 api.py boards USERID      # Boards of USERID")
-    print("  python3 api.py board BOARDID      # Info of BOARDID")
-    print("  python3 api.py swimlanes BOARDID  # Swimlanes of BOARDID")
-    print("  python3 api.py lists BOARDID      # Lists of BOARDID")
-    print("  python3 api.py createlist BOARDID LISTTITLE # Create list")
-    print("  python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION")
-    print("  python3 api.py listattachments BOARDID # List attachments")
-# TODO:
-#    print("  python3 api.py attachmentdownload BOARDID ATTACHMENTID # One attachment as file")
-#    print("  python3 api.py attachmentsdownload BOARDID # All attachments as files")
+    print(syntax)
     exit
 
+# TODO:
+#   print("  python3 api.py attachmentjson BOARDID ATTACHMENTID # One attachment as JSON base64")
+#   print("  python3 api.py attachmentbinary BOARDID ATTACHMENTID # One attachment as binary file")
+#   print("  python3 api.py attachmentdownload BOARDID ATTACHMENTID # One attachment as file")
+#   print("  python3 api.py attachmentsdownload BOARDID # All attachments as files")
+
 # ------- SETTINGS START -------------
 
 # Username is your Wekan username or email address.
@@ -50,27 +85,12 @@ wekanurl = 'http://localhost:4000/'
 # ------- SETTINGS END -------------
 
 """
-EXAMPLE:
+=== ADD CUSTOM FIELD TO BOARD ===
 
-python3 api.py
+Type: text, number, date, dropdown, checkbox, currency, stringtemplate.
 
-OR:
-chmod +x api.py
-./api.py
+python3 api.py addcustomfieldtoboard cmx3gmHLKwAXLqjxz LcDW4QdooAx8hsZh8 "SomeField" "date" "" true true true true 
 
-=== Wekan API Python CLI: Shows IDs for addcard ===
-AUTHORID is USERID that writes card.
-Syntax:
-  python3 api.py users              # All users
-  python3 api.py boards USERID      # Boards of USERID
-  python3 api.py board BOARDID      # Info of BOARDID
-  python3 api.py swimlanes BOARDID  # Swimlanes of BOARDID
-  python3 api.py lists BOARDID      # Lists of BOARDID
-  python3 api.py createlist BOARDID LISTTITLE # Create list
-  python3 api.py addcard AUTHORID BOARDID SWIMLANEID LISTID CARDTITLE CARDDESCRIPTION
-  python3 api.py listattachments BOARDID # List attachments
-  python3 api.py attachmentjson BOARDID ATTACHMENTID # One attachment as JSON base64
-  python3 api.py attachmentbinary BOARDID ATTACHMENTID # One attachment as binary file
 
 === USERS ===
 
@@ -121,33 +141,109 @@ wekanloginurl = wekanurl + loginurl
 apiboards = 'api/boards/'
 apiattachments = 'api/attachments/'
 apiusers = 'api/users'
+apiuser = 'api/user'
+apiallusers = 'api/allusers'
 e = 'export'
 s = '/'
 l = 'lists'
 sw = 'swimlane'
 sws = 'swimlanes'
 cs = 'cards'
+cf = 'custom-fields'
 bs = 'boards'
+apbs = 'allpublicboards'
 atl = 'attachmentslist'
 at = 'attachment'
 ats = 'attachments'
 users = wekanurl + apiusers
+user = wekanurl + apiuser
+allusers = wekanurl + apiallusers
 
 # ------- API URL GENERATION END -----------
 
 # ------- LOGIN TOKEN START -----------
 
 data = {"username": username, "password": password}
-body = requests.post(wekanloginurl, data=data)
+body = requests.post(wekanloginurl, json=data)
 d = body.json()
 apikey = d['token']
 
 # ------- LOGIN TOKEN END -----------
 
+if arguments == 10:
+
+    if sys.argv[1] == 'addcustomfieldtoboard':
+        # ------- ADD CUSTOM FIELD TO BOARD START -----------
+        authorid = sys.argv[2]
+        boardid = sys.argv[3]
+        name = sys.argv[4]
+        type1 = sys.argv[5]
+        settings = str(json.loads(sys.argv[6]))
+        #  There is error: Settings must be object. So this does not work yet.
+        #settings = {'currencyCode': 'EUR'}
+        print(type(settings))
+        showoncard = sys.argv[7]
+        automaticallyoncard = sys.argv[8]
+        showlabelonminicard = sys.argv[9]
+        showsumattopoflist = sys.argv[10]
+        customfieldtoboard = wekanurl + apiboards + boardid + s + cf
+        # Add Custom Field to Board
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {'authorId': '{}'.format(authorid), 'name': '{}'.format(name), 'type': '{}'.format(type1), 'settings': '{}'.format(settings), 'showoncard': '{}'.format(showoncard), 'automaticallyoncard': '{}'.format(automaticallyoncard), 'showlabelonminicard': '{}'.format(showlabelonminicard), 'showsumattopoflist': '{}'.format(showsumattopoflist)}
+        body = requests.post(customfieldtoboard, data=post_data, headers=headers)
+        print(body.text)
+        # ------- ADD CUSTOM FIELD TO BOARD END -----------
+
+if arguments == 8:
+
+    if sys.argv[1] == 'addcardwithlabel':
+        # ------- ADD CARD WITH LABEL START -----------
+        authorid = sys.argv[2]
+        boardid = sys.argv[3]
+        swimlaneid = sys.argv[4]
+        listid = sys.argv[5]
+        cardtitle = sys.argv[6]
+        carddescription = sys.argv[7]
+        labelIds = sys.argv[8]  # Aggiunto labelIds
+
+        cardtolist = wekanurl + apiboards + boardid + s + l + s + listid + s + cs
+        # Add card
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {
+            'authorId': '{}'.format(authorid),
+            'title': '{}'.format(cardtitle),
+            'description': '{}'.format(carddescription),
+            'swimlaneId': '{}'.format(swimlaneid),
+            'labelIds': labelIds
+        }
+
+        body = requests.post(cardtolist, data=post_data, headers=headers)
+        print(body.text)
+
+        # If ok id card
+        if body.status_code == 200:
+            card_data = body.json()
+            new_card_id = card_data.get('_id')
+
+            # Updating card
+            if new_card_id:
+                edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + new_card_id
+                put_data = {'labelIds': labelIds}
+                body = requests.put(edcard, data=put_data, headers=headers)
+                print("=== EDIT CARD ===\n")
+                body = requests.get(edcard, headers=headers)
+                data2 = body.text.replace('}', "}\n")
+                print(data2)
+            else:
+                print("Error obraining ID.")
+        else:
+            print("Error adding card.")
+        # ------- ADD CARD WITH LABEL END -----------
+
 if arguments == 7:
 
     if sys.argv[1] == 'addcard':
-        # ------- WRITE TO CARD START -----------
+        # ------- ADD CARD START -----------
         authorid = sys.argv[2]
         boardid = sys.argv[3]
         swimlaneid = sys.argv[4]
@@ -155,15 +251,262 @@ if arguments == 7:
         cardtitle = sys.argv[6]
         carddescription = sys.argv[7]
         cardtolist = wekanurl + apiboards + boardid + s + l + s + listid + s + cs
-        # Write to card
+        # Add card
         headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
         post_data = {'authorId': '{}'.format(authorid), 'title': '{}'.format(cardtitle), 'description': '{}'.format(carddescription), 'swimlaneId': '{}'.format(swimlaneid)}
         body = requests.post(cardtolist, data=post_data, headers=headers)
         print(body.text)
-        # ------- WRITE TO CARD END -----------
+        # ------- ADD CARD END -----------
+
+if arguments == 6:
+
+    if sys.argv[1] == 'editcard':
+
+        # ------- EDIT CARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        newcardtitle = sys.argv[5]
+        newcarddescription = sys.argv[6]
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'title': '{}'.format(newcardtitle), 'description': '{}'.format(newcarddescription)}
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== EDIT CARD ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- EDIT CARD END -----------
+
+    if sys.argv[1] == 'editcustomfield':
+
+        # ------- EDIT CUSTOMFIELD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        customfieldid = sys.argv[5]
+        newcustomfieldvalue = sys.argv[6]
+        edfield = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid + s + 'customFields' + s + customfieldid
+        #print(edfield)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {'_id': '{}'.format(customfieldid), 'value': '{}'.format(newcustomfieldvalue)}
+        #print(post_data)
+        body = requests.post(edfield, data=post_data, headers=headers)
+        print("=== EDIT CUSTOMFIELD ===\n")
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- EDIT CUSTOMFIELD END -----------
+
+if arguments == 5:
+
+    if sys.argv[1] == 'addlabel':
+
+        # ------- EDIT CARD ADD LABEL START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        labelIds = sys.argv[5]
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'labelIds': labelIds}
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== ADD LABEL ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- EDIT CARD ADD LABEL END -----------
+
+    if sys.argv[1] == 'editcardcolor':
+        # ------- EDIT CARD COLOR START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        newcolor = sys.argv[5]  
+
+        valid_colors = ['white', 'green', 'yellow', 'orange', 'red', 'purple', 'blue', 'sky', 'lime', 'pink', 'black',
+                    'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen', 'slateblue', 'magenta', 'gold', 'navy',
+                    'gray', 'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo']
+
+        if newcolor not in valid_colors:
+            print("Invalid color. Choose a color from the list.")
+            sys.exit(1)
+
+        edcard = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        print(edcard)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        put_data = {'color': '{}'.format(newcolor)}  
+        body = requests.put(edcard, data=put_data, headers=headers)
+        print("=== EDIT CARD COLOR ===\n")
+        body = requests.get(edcard, headers=headers)
+        data2 = body.text.replace('}', "}\n")
+        print(data2)
+        # ------- EDIT CARD COLOR END -----------
+
+if arguments >= 4:
+
+    if sys.argv[1] == 'newuser':
+
+        # ------- CREATE NEW USER START -----------
+        username = sys.argv[2]
+        email = sys.argv[3]
+        password = sys.argv[4]
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        post_data = {'username': '{}'.format(username),'email': '{}'.format(email),'password': '{}'.format(password)}
+        body = requests.post(users, data=post_data, headers=headers)
+        print("=== CREATE NEW USER ===\n")
+        print(body.text)
+        # ------- CREATE NEW USER END -----------
+        
+    if sys.argv[1] == 'getcard':
+
+        # ------- LIST OF CARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        cardid = sys.argv[4]
+        listone = wekanurl + apiboards + boardid + s + l + s + listid + s + cs + s + cardid
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== INFO OF ONE LIST ===\n")
+        print("URL:", listone)  # Stampa l'URL per debug
+        try:
+            response = requests.get(listone, headers=headers)
+            print("=== RESPONSE ===\n")
+            print("Status Code:", response.status_code)  # Stampa il codice di stato per debug
+
+            if response.status_code == 200:
+                data2 = response.text.replace('}', "}\n")
+                print(data2)
+            else:
+                print(f"Error: {response.status_code}")
+                print(f"Response: {response.text}")
+        except Exception as e:
+            print(f"Error in the GET request: {e}")
+        # ------- LISTS OF CARD END -----------
+
+    if sys.argv[1] == 'createlabel':
+
+        # ------- CREATE LABEL START -----------
+        boardid = sys.argv[2]
+        labelcolor = sys.argv[3]
+        labelname = sys.argv[4]
+        label_url = wekanurl + apiboards + boardid + s + 'labels'
+        print(label_url)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        # Object to send
+        put_data = {'label': {'color': labelcolor, 'name': labelname}}
+        print("URL:", label_url)
+        print("Headers:", headers)
+        print("Data:", put_data)
+        try:
+          response = requests.put(label_url, json=put_data, headers=headers)
+          print("=== CREATE LABELS ===\n")
+          print("Response Status Code:", response.status_code)
+          print("Response Text:", response.text)
+        except Exception as e:
+          print("Error:", e)
+        # ------- CREATE LABEL END -----------
+
+    if sys.argv[1] == 'addchecklist':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+        checklist_title = sys.argv[4]
+
+        # Aggiungi la checklist
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists'
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        data = {'title': checklist_title}
+
+        response = requests.post(checklist_url, data=data, headers=headers)
+        response.raise_for_status()
+
+        result = json.loads(response.text)
+        checklist_id = result.get('_id')
+
+        print(f"Checklist '{checklist_title}' created. ID: {checklist_id}")
+
+        # Aggiungi gli items alla checklist
+        items_to_add = sys.argv[5:]  
+        for item_title in items_to_add:
+            checklist_item_url = wekanurl + apiboards + board_id + s + cs + s + card_id + s + 'checklists' + s + checklist_id + '/items'
+            item_data = {'title': item_title}
+
+            item_response = requests.post(checklist_item_url, data=item_data, headers=headers)
+            item_response.raise_for_status()
+
+            item_result = json.loads(item_response.text)
+            checklist_item_id = item_result.get('_id')
+
+            print(f"Item '{item_title}' added. ID: {checklist_item_id}")
+
+    if sys.argv[1] == 'checklistinfo':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+        checklist_id = sys.argv[4]
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists' + s + checklist_id
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        response = requests.get(checklist_url, headers=headers)
+
+        response.raise_for_status()
+
+        checklist_info = response.json()
+        print("Checklist Info:")
+        print(checklist_info)
 
 if arguments == 3:
 
+    if sys.argv[1] == 'editboardtitle':
+
+        # ------- EDIT BOARD TITLE START -----------
+        boardid = sys.argv[2]
+        boardtitle = sys.argv[3]
+        edboardtitle = wekanurl + apiboards + boardid + s + 'title'
+        print(edboardtitle)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        post_data = {'title': boardtitle}
+
+        body = requests.put(edboardtitle, json=post_data, headers=headers)
+        print("=== EDIT BOARD TITLE ===\n")
+        #body = requests.get(edboardtitle, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        if body.status_code == 200:
+            print("Succesfull!")
+        else:
+            print(f"Error: {body.status_code}")
+            print(body.text)
+
+        # ------- EDIT BOARD TITLE END -----------
+
+    if sys.argv[1] == 'copyboard':
+
+        # ------- COPY BOARD START -----------
+        boardid = sys.argv[2]
+        boardtitle = sys.argv[3]
+        edboardcopy = wekanurl + apiboards + boardid + s + 'copy'
+        print(edboardcopy)
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        post_data = {'title': boardtitle}
+
+        body = requests.post(edboardcopy, json=post_data, headers=headers)
+        print("=== COPY BOARD ===\n")
+        #body = requests.get(edboardcopy, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        if body.status_code == 200:
+            print("Succesfull!")
+        else:
+            print(f"Error: {body.status_code}")
+            print(body.text)
+
+        # ------- COPY BOARD END -----------
+
     if sys.argv[1] == 'createlist':
 
         # ------- CREATE LIST START -----------
@@ -177,6 +520,116 @@ if arguments == 3:
         print(body.text)
         # ------- CREATE LIST END -----------
 
+    if sys.argv[1] == 'list':
+
+        # ------- LIST OF BOARD START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+        listone = wekanurl + apiboards + boardid + s + l + s + listid
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== INFO OF ONE LIST ===\n")
+        body = requests.get(listone, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LISTS OF BOARD END -----------
+
+    if sys.argv[1] == 'customfield':
+
+        # ------- INFO OF CUSTOM FIELD START -----------
+        boardid = sys.argv[2]
+        customfieldid = sys.argv[3]
+        customfieldone = wekanurl + apiboards + boardid + s + cf + s + customfieldid
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== INFO OF ONE CUSTOM FIELD ===\n")
+        body = requests.get(customfieldone, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- INFO OF CUSTOM FIELD END -----------
+
+    if sys.argv[1] == 'cardsbyswimlane':
+    # ------- RETRIEVE CARDS BY SWIMLANE ID START -----------
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+        cardsbyswimlane = wekanurl + apiboards + boardid + s + sws + s + swimlaneid + s + cs
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== CARDS BY SWIMLANE ID ===\n")
+        print("URL:", cardsbyswimlane)  # Debug
+        try:
+            body = requests.get(cardsbyswimlane, headers=headers)
+            print("Status Code:", body.status_code)  # Debug
+            data = body.text.replace('}', "}\n")
+            print("Data:", data)
+        except Exception as e:
+            print("Error GET:", e)
+    # ------- RETRIEVE CARDS BY SWIMLANE ID END -----------
+
+    if sys.argv[1] == 'deleteallcards':
+        boardid = sys.argv[2]
+        swimlaneid = sys.argv[3]
+
+        # ------- GET SWIMLANE CARDS START -----------
+        get_swimlane_cards_url = wekanurl + apiboards + boardid + s + "swimlanes" + s + swimlaneid + s + "cards"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_swimlane_cards_url, headers=headers)
+            response.raise_for_status()
+            cards_data = response.json()
+
+            # Print the details of each card
+            for card in cards_data:
+                # ------- DELETE CARD START -----------
+                delete_card_url = wekanurl + apiboards + boardid + s + "lists" + s + card['listId'] + s + "cards" + s + card['_id']
+                try:
+                    response = requests.delete(delete_card_url, headers=headers)
+                    if response.status_code == 404:
+                        print(f"Card not found: {card['_id']}")
+                    else:
+                        response.raise_for_status()
+                        deleted_card_data = response.json()
+                        print(f"Card Deleted Successfully. Card ID: {deleted_card_data['_id']}")
+                except requests.exceptions.RequestException as e:
+                    print(f"Error deleting card: {e}")
+                # ------- DELETE CARD END -----------
+
+        except requests.exceptions.RequestException as e:
+            print(f"Error getting swimlane cards: {e}")
+            sys.exit(1)
+        # ------- GET SWIMLANE CARDS END -----------
+
+    if sys.argv[1] == 'get_list_cards_count':
+        # ------- GET LIST CARDS COUNT START -----------
+        boardid = sys.argv[2]
+        listid = sys.argv[3]
+
+        get_list_cards_count_url = wekanurl + apiboards + boardid +  s + l + s + listid + s + "cards_count"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_list_cards_count_url, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            print(f"List Cards Count: {data['list_cards_count']}")
+        except requests.exceptions.RequestException as e:
+            print(f"Error: {e}")
+        # ------- GET LIST CARDS COUNT END -----------
+
+    if sys.argv[1] == 'checklistid':
+
+        # ------- ADD CHECKLIST START -----------
+        board_id = sys.argv[2]
+        card_id = sys.argv[3]
+
+        checklist_url = wekanurl + apiboards + board_id + s + cs + s + card_id + '/checklists'
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        response = requests.get(checklist_url, headers=headers)
+
+        response.raise_for_status()
+        checklists = response.json()
+        print("Checklists:")
+        for checklist in checklists:
+          print(checklist)
+
 if arguments == 2:
 
     # ------- BOARDS LIST START -----------
@@ -190,8 +643,8 @@ if arguments == 2:
         data2 = body.text.replace('}',"}\n")
         print(data2)
     # ------- BOARDS LIST END -----------
-    if sys.argv[1] == 'board':
 
+    if sys.argv[1] == 'board':
         # ------- BOARD INFO START -----------
         boardid = sys.argv[2]
         board = wekanurl + apiboards + boardid
@@ -202,6 +655,17 @@ if arguments == 2:
         print(data2)
         # ------- BOARD INFO END -----------
 
+    if sys.argv[1] == 'customfields':
+        # ------- CUSTOM FIELDS OF BOARD START -----------
+        boardid = sys.argv[2]
+        boardcustomfields = wekanurl + apiboards + boardid + s + cf
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        body = requests.get(boardcustomfields, headers=headers)
+        print("=== CUSTOM FIELDS OF BOARD ===\n")
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- CUSTOM FIELDS OF BOARD END -----------
+
     if sys.argv[1] == 'swimlanes':
         boardid = sys.argv[2]
         swimlanes = wekanurl + apiboards + boardid + s + sws
@@ -217,7 +681,7 @@ if arguments == 2:
 
         # ------- LISTS OF BOARD START -----------
         boardid = sys.argv[2]
-        attachments = wekanurl + apiboards + boardid
+        lists = wekanurl + apiboards + boardid + s + l
         headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
         print("=== LISTS ===\n")
         body = requests.get(lists, headers=headers)
@@ -237,6 +701,22 @@ if arguments == 2:
         print(data2)
         # ------- LISTS OF ATTACHMENTS END -----------
 
+    if sys.argv[1] == 'get_board_cards_count':
+        # ------- GET BOARD CARDS COUNT START -----------
+        boardid = sys.argv[2]
+
+        get_board_cards_count_url = wekanurl + apiboards + boardid + s + "cards_count"
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+
+        try:
+            response = requests.get(get_board_cards_count_url, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            print(f"Board Cards Count: {data['board_cards_count']}")
+        except requests.exceptions.RequestException as e:
+            print(f"Error: {e}")
+        # ------- GET BOARD CARDS COUNT END -----------
+
 if arguments == 1:
 
     if sys.argv[1] == 'users':
@@ -249,3 +729,24 @@ if arguments == 1:
         data2 = body.text.replace('}',"}\n")
         print(data2)
         # ------- LIST OF USERS END -----------
+
+    if sys.argv[1] == 'user':
+        # ------- LIST OF ALL USERS START -----------
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print(user)
+        print("=== USER ===\n")
+        body = requests.get(user, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LIST OF ALL USERS END -----------
+
+    if sys.argv[1] == 'boards':
+
+        # ------- LIST OF PUBLIC BOARDS START -----------
+        headers = {'Accept': 'application/json', 'Authorization': 'Bearer {}'.format(apikey)}
+        print("=== PUBLIC BOARDS ===\n")
+        listpublicboards = wekanurl + apiboards
+        body = requests.get(listpublicboards, headers=headers)
+        data2 = body.text.replace('}',"}\n")
+        print(data2)
+        # ------- LIST OF PUBLIC BOARDS END -----------

asana/CHANGELOG.md

@@ -0,0 +1,8 @@
+# v1.0 2022-03-22 Perl Asana export to WeKan ® release
+
+This release adds the following new features:
+
+- [Added Perl scripts for Asana export to WeKan ®](https://github.com/wekan/wekan/commit/376bcbb373d16317060adc2b1154cc20496775cc).
+  Thanks to GeekRuthie.
+
+Thanks to above GitHub users for their contributions and translators for their translations.

asana/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 WeKan ® Team and GeekRuthie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

asana/export_boards.pl

@@ -0,0 +1,178 @@
+#!/usr/local/perl-cbt/bin/perl
+use Modern::Perl;
+use Carp;
+use Data::Dumper;
+use HTTP::Request;
+use JSON;
+use LWP::UserAgent;
+use MIME::Base64 qw/encode_base64/;
+
+my $BASE_URL      = 'https://app.asana.com/api/1.0';
+my $ASANA_API_KEY = 'ASANA_PERSONAL_TOKEN';
+my $ua            = LWP::UserAgent->new();
+
+open my $input_wekan, '<', 'template.json';
+my $wekan_json = readline($input_wekan);
+close $input_wekan;
+my $wekan_board = decode_json($wekan_json);
+my %users;
+my %users_by_gid;
+# get user IDs from template board
+foreach my $user ( @{ $wekan_board->{users} } ) {
+   $users{ $user->{profile}->{fullname} } = $user->{_id};
+}
+# get list IDs from template (we ended up not using these)
+my %lists;
+foreach my $list ( @{ $wekan_board->{lists} } ) {
+   $lists{ $list->{title} } = $list->{_id};
+}
+
+my @headers;
+push @headers, ( 'Accept',        'application/json' );
+push @headers, ( 'Authorization', "Bearer $ASANA_API_KEY" );
+my $projects_req = HTTP::Request->new( "GET", "$BASE_URL/projects", \@headers, );
+my $projects_res = $ua->request($projects_req);
+my $projects     = decode_json( $projects_res->content )->{data};
+foreach my $project (@$projects) {
+   say "Project: ".$project->{name};
+   my $tasks_url =
+         '/tasks?project='
+       . $project->{gid}
+       . '&opt_fields=completed,name,notes,assignee,created_by,memberships.project.name, memberships.section.name,due_on,created_at,custom_fields';
+   my $tasks_req = HTTP::Request->new( 'GET', "$BASE_URL$tasks_url", \@headers );
+   my $tasks_res = $ua->request($tasks_req);
+   my @output_tasks;
+   my $tasks = decode_json( $tasks_res->content )->{data};
+   foreach my $task (@$tasks) {
+      next if $task->{completed};
+      say '   - '.$task->{name};
+      my $git_branch;
+      my $prio;
+      foreach my $custom ( @{ $task->{custom_fields} } ) {
+         if ( $custom->{name} eq 'git branch' ) {
+            $git_branch = $custom->{text_value};
+            next;
+         }
+         # We ended up not importing these.
+         if ( $custom->{name} eq 'Priority' && defined $custom->{display_value} ) {
+            $prio =
+                  $custom->{display_value} eq 'High' ? 'fwccC9'   
+                : $custom->{display_value} eq 'Med'  ? 'yPnaFa'
+                : $custom->{display_value} eq 'Low'  ? 'W4vMvm'
+                :                                      'ML5drH';
+            next;
+         }
+      }
+      if ( !defined $users_by_gid{ $task->{created_by}->{gid} } ) {
+         my $user_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/users/" . $task->{created_by}->{gid},
+            \@headers );
+         my $user_res = $ua->request($user_req);
+         my $user     = decode_json( $user_res->content )->{data};
+         if ( defined $users{ $user->{name} } ) {
+            $users_by_gid{ $task->{created_by}->{gid} } = $users{ $user->{name} };
+         }
+      }
+      my $creator = $users_by_gid{ $task->{created_by}->{gid} } // undef;
+      if ( defined $task->{assignee} && !defined $users_by_gid{ $task->{assignee}->{gid} } ) {
+         my $user_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/users/" . $task->{assignee}->{gid},
+            \@headers );
+         my $user_res = $ua->request($user_req);
+         my $user     = decode_json( $user_res->content )->{data};
+         if ( defined $users{ $user->{name} } ) {
+            $users_by_gid{ $task->{assignee}->{gid} } = $users{ $user->{name} };
+         }
+      }
+      my $assignee = defined $task->{assignee} ? $users_by_gid{ $task->{assignee}->{gid} } : undef;
+      my $list;
+      foreach my $membership ( @{ $task->{memberships} } ) {
+         next if $membership->{project}->{name} ne $project->{name};
+         $list = $membership->{section}->{name};
+      }
+
+      # I was trying to create JSON that I could use on the import screen in Wekan,
+      # but for bigger boards, it was just *too* hefty, so I took that JSON and used 
+      # APIs to import.
+      my %output_task = (
+         swimlaneId   => 'As4SNerx4Y4mMnJ8n',   # 'Bugs'  
+         sort         => 0,
+         type         => 'cardType-card',
+         archived     => JSON::false,
+         title        => $task->{name},
+         description  => $task->{notes},
+         createdAt    => $task->{created_at},
+         dueAt        => defined $task->{due_on} ? $task->{due_on} . 'T22:00:00.000Z' : undef,
+         customFields => [
+            {
+               _id   => 'rL8BpFHp5xxSFbDdr',
+               value => $git_branch,
+            },
+         ],
+         labelIds  => [$prio],
+         listId    => $list,
+         userId    => $creator,
+         assignees => [$assignee],
+      );
+      my @final_comments;
+      my $comments_req =
+          HTTP::Request->new( 'GET', "$BASE_URL/tasks/" . $task->{gid} . '/stories',
+         \@headers );
+      my $comments_res = $ua->request($comments_req);
+      my $comments     = decode_json( $comments_res->content )->{data};
+      foreach my $comment (@$comments) {
+         next if $comment->{type} ne 'comment';
+         if ( !defined $users_by_gid{ $comment->{created_by}->{gid} } ) {
+            my $user_req =
+                HTTP::Request->new( 'GET', "$BASE_URL/users/" . $comment->{created_by}->{gid},
+               \@headers );
+            my $user_res = $ua->request($user_req);
+            my $user     = decode_json( $user_res->content )->{data};
+            if ( defined $users{ $user->{name} } ) {
+               $users_by_gid{ $comment->{created_bye}->{gid} } = $users{ $user->{name} };
+            }
+         }
+         my $commentor    = $users_by_gid{ $comment->{created_by}->{gid} };
+         my %this_comment = (
+            text      => $comment->{text},
+            createdAt => $comment->{created_at},
+            userId    => $commentor,
+         );
+         push @final_comments, \%this_comment;
+      }
+      $output_task{comments} = \@final_comments;
+
+
+      my @final_attachments;
+      my $attachments_req =
+          HTTP::Request->new( 'GET', "$BASE_URL/tasks/" . $task->{gid} . '/attachments',
+         \@headers );
+      my $attachments_res = $ua->request($attachments_req);
+      my $attachments     = decode_json( $attachments_res->content )->{data};
+      foreach my $attachment (@$attachments) {
+         my $att_req =
+             HTTP::Request->new( 'GET', "$BASE_URL/attachments/" . $attachment->{gid},
+            \@headers );
+         my $att_res = $ua->request($att_req);
+         my $att     = decode_json( $att_res->content )->{data};
+         my $file_req=HTTP::Request->new('GET',$att->{download_url});
+         my $file_res=$ua->request($file_req);
+         my $file=encode_base64($file_res->content);
+
+           my %this_attachment = (
+              file => $file,
+              name => $att->{name},
+              createdAt => $att->{created_at},
+           );
+           push @final_attachments, \%this_attachment;
+
+      }
+      $output_task{attachments} = \@final_attachments;
+      push @output_tasks, \%output_task;
+   }
+   my $file_name = $project->{name};
+   $file_name =~ s/\//_/g;
+   open my $output_file, '>',$file_name.'_exported.json';
+   print $output_file encode_json(\@output_tasks);
+   close $output_file;
+}

asana/load_tasks.pl

@@ -0,0 +1,122 @@
+#!/usr/local/perl-cbt/bin/perl
+use Modern::Perl;
+use Carp;
+use Data::Dumper;
+use HTTP::Request;
+use JSON;
+use LWP::UserAgent;
+use MIME::Base64 qw/decode_base64/;
+use Try::Tiny;
+
+my $BASE_URL = 'https://taskboard.example.com/api';
+my $TOKEN    = 'MY_TOKEN';
+my $me       = 'MY_USER_ID';
+my $ua       = LWP::UserAgent->new();
+
+my @headers;
+push @headers, ( 'Accept',        'application/json' );
+push @headers, ( 'Authorization', "Bearer $TOKEN" );
+
+my @form_headers;
+push @form_headers, ( 'Content-Type',  'application/json' );
+push @form_headers, ( 'Accept',        'application/json' );
+push @form_headers, ( 'Authorization', "Bearer $TOKEN" );
+
+# Prior to running this, I built all the boards, with labels and lists and swimlanes.
+# Grabbed the IDs for the boards for each project, and put them here to match up with
+# filenames from the Asana export script.
+
+my %board_to_use = (
+   Project_1        => 'F5ZiCXnf4d7qNBRjp',
+   Project_2        => 'Shw3tyfC2JWCutBLj',
+);
+
+opendir my $files_dir, '.'
+    or croak "Cannot open input directory: $!";
+my @files = readdir $files_dir;
+closedir $files_dir;
+
+foreach my $tasks_file (@files) {
+   next if $tasks_file !~ /_exported.json/;
+   my $project = $tasks_file;
+   $project =~ s/_exported.json//;
+   say "Project - $project";
+   my $board;
+   if ( $board_to_use{$project} ) {
+      $board = $board_to_use{$project};
+   }
+   say '   No board!' if !$board;
+   next               if !$board;
+   my $labels_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board", \@headers );
+   my $labels_res = $ua->request($labels_req);
+   my $board_data = decode_json( $labels_res->content);
+   my $labels = $board_data->{labels};
+   my $label_to_use;
+   # We're merging several Asana boards onto one Wekan board, with labels per project.
+   foreach my $label (@$labels) {
+       $label_to_use = $label->{_id} if $label->{name} eq $project;
+   }
+
+   my $lanes_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board/swimlanes", \@headers );
+   my $lanes_res = $ua->request($lanes_req);
+   my $lanes     = decode_json( $lanes_res->content );
+   my $lane_to_use;
+   foreach my $lane (@$lanes) {
+      # Our Asana didn't use swimlanes; all of our Wekan boards have a "Bugs" lane, so use that.
+      $lane_to_use = $lane->{_id} if $lane->{title} eq 'Bugs';
+   }
+
+   my $lists_req = HTTP::Request->new( 'GET', "$BASE_URL/boards/$board/lists", \@headers );
+   my $lists_res = $ua->request($lists_req);
+   my $lists     = decode_json( $lists_res->content );
+   my %list_to_use;
+   foreach my $list (@$lists) {
+      $list_to_use{ $list->{title} } = $list->{_id};
+   }
+
+   open my $task_export_file, '<', $tasks_file;
+   my $tasks_json = readline($task_export_file);
+   close $task_export_file;
+   my $tasks = decode_json($tasks_json);
+   foreach my $task (@$tasks) {
+      say '   - ' . $task->{title};
+      my %body_info = (
+         swimlaneId  => $lane_to_use,
+         authorId    => $task->{userId},
+         assignees   => $task->{assignees},
+         title       => $task->{title},
+         description => $task->{description},
+      );
+      my $body     = encode_json( \%body_info );
+      my $list     = $list_to_use{ $task->{listId} } // $list_to_use{'Backlog'};
+      my $task_req = HTTP::Request->new( 'POST', "$BASE_URL/boards/$board/lists/$list/cards",
+         \@form_headers, $body );
+      my $task_res = $ua->request($task_req);
+      my $res;
+      try {
+       $res      = decode_json( $task_res->content );
+      } catch {
+         # Did these manually afterward.
+          say "--->UNABLE TO LOAD TASK";
+          next;
+      };
+      my $card     = $res->{_id};
+
+      if ($label_to_use) {
+          my $card_edit_body = encode_json( { labelIds => [ $label_to_use ]});
+          my $card_edit_req = HTTP::Request->new( 'PUT', "$BASE_URL/boards/$board/lists/$list/cards/$card",
+         \@form_headers, $card_edit_body );
+         my $card_edit_res = $ua->request($card_edit_req);
+      }
+
+      foreach my $comment ( @{ $task->{comments} } ) {
+         my $comment_body =
+             encode_json( { authorId => $comment->{userId}, comment => $comment->{text} } );
+         my $comment_req =
+             HTTP::Request->new( 'POST', "$BASE_URL/boards/$board/cards/$card/comments",
+            \@form_headers, $comment_body );
+         my $comment_res = $ua->request($comment_req);
+      }
+   }
+}
+

client/components/activities/activities.css

@@ -0,0 +1,101 @@
+.activity-title {
+  margin: 0 0.5em 0.8em;
+  display: flex;
+  justify-content: space-between;
+}
+.reactions-popup .add-comment-reaction {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 22px;
+  text-align: center;
+  line-height: 30px;
+  width: 40px;
+}
+.reactions-popup .add-comment-reaction:hover {
+  background-color: #b0c4de;
+}
+.activities {
+  clear: both;
+}
+.activities .activity {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.activities .activity .member {
+  width: 32px;
+  height: 32px;
+}
+.activities .activity .activity-member {
+  font-weight: 700;
+}
+.activities .activity .activity-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.activities .activity .activity-desc .activity-comment {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  font-weight: 500;
+  margin-left: 2px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
+  font-size: 8px;
+  margin-top: -7px;
+  margin-left: 1px;
+}
+.activities .activity .activity-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.activities .activity .activity-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.activities .activity .activity-desc .activity-checklist {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .activity-meta {
+  font-size: 0.8em;
+  color: #999;
+}

client/components/activities/activities.jade

@@ -12,7 +12,7 @@ template(name="boardActivities")
     +activity(activity=activityData card=card mode=mode)
 
 template(name="cardActivities")
-  each activityData in currentCard.activities
+  each activityData in activities
     +activity(activity=activityData card=card mode=mode)
 
 template(name="editOrDeleteComment")
@@ -21,8 +21,28 @@ template(name="editOrDeleteComment")
   = ' - '
   a.js-delete-comment {{_ "delete"}}
 
+template(name="deleteCommentPopup")
+  p {{_ "comment-delete"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="commentReactions")
+  .reactions
+    each reaction in reactions
+      span.reaction(class="{{#if isSelected reaction.userIds}}selected{{/if}}" data-codepoint="#{reaction.reactionCodepoint}" title="{{userNames reaction.userIds}}")
+        span.reaction-codepoint !{reaction.reactionCodepoint}
+        span.reaction-count #{reaction.userIds.length}
+    if (currentUser.isBoardMember)
+      a.open-comment-reaction-popup(title="{{_ 'addReactionPopup-title'}}")
+        i.fa.fa-smile-o
+        i.fa.fa-plus
+
+template(name="addReactionPopup")
+  .reactions-popup
+    each codepoint in codepoints
+      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
+
 template(name="activity")
-  .activity
+  .activity(data-id=activity._id)
     +userAvatar(userId=activity.user._id)
     p.activity-desc
       span.activity-member
@@ -39,18 +59,17 @@ template(name="activity")
             img.attachment-image-preview(src=activity.attachment.url)
 
       //- board activity ------------------------------------------------------
-      if($eq mode 'board')
-        if($eq activity.activityType 'createBoard')
-          | {{{_ 'activity-created' boardLabelLink}}}.
+      if($eq activity.activityType 'createBoard')
+        | {{{_ 'activity-created' boardLabelLink}}}.
 
-        if($eq activity.activityType 'importBoard')
-          | {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.
+      if($eq activity.activityType 'importBoard')
+        | {{{_ 'activity-imported-board' boardLabelLink sourceLink}}}.
 
-        if($eq activity.activityType 'addBoardMember')
-          | {{{_ 'activity-added' memberLink boardLabelLink}}}.
+      if($eq activity.activityType 'addBoardMember')
+        | {{{_ 'activity-added' memberLink boardLabelLink}}}.
 
-        if($eq activity.activityType 'removeBoardMember')
-          | {{{_ 'activity-excluded' memberLink boardLabelLink}}}.
+      if($eq activity.activityType 'removeBoardMember')
+        | {{{_ 'activity-excluded' memberLink boardLabelLink}}}.
 
       //- card activity -------------------------------------------------------
       if($eq activity.activityType 'createCard')
@@ -120,10 +139,12 @@ template(name="activity")
               = activity.comment.text
             .edit-controls
               button.primary(type="submit") {{_ 'edit'}}
+              .fa.fa-times-thin.js-close-inlined-form
           else
             .activity-comment
               +viewer
                 = activity.comment.text
+            +commentReactions(reactions=activity.comment.reactions commentId=activity.comment._id)
             span(title=activity.createdAt).activity-meta {{ moment activity.createdAt }}
               if($eq currentUser._id activity.comment.userId)
                 +editOrDeleteComment
@@ -131,10 +152,10 @@ template(name="activity")
                 +editOrDeleteComment
 
         if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' currentData.commentId}}}.
+          | {{{_ 'activity-deleteComment' activity.commentId}}}.
 
         if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' currentData.commentId}}}.
+          | {{{_ 'activity-editComment' activity.commentId}}}.
       else
         //- if we are not in card mode we only display a summary of the comment
         if($eq activity.activityType 'addComment')
@@ -144,42 +165,27 @@ template(name="activity")
               = activity.comment.text
 
       //- date activity ------------------------------------------------
-      if($eq mode 'card')
-        if($eq activity.activityType 'a-receivedAt')
-          | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
+      if($eq activity.activityType 'a-receivedAt')
+        | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
 
-        if($eq activity.activityType 'a-startAt')
-          | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
-        
-        if($eq activity.activityType 'a-dueAt')
-          | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
+      if($eq activity.activityType 'a-startAt')
+        | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
 
-        if($eq activity.activityType 'a-endAt')
-          | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
-      
-      if($eq mode 'board')
-        if($eq activity.activityType 'a-receivedAt')
-          | {{{_ 'activity-receivedDate' (sanitize receivedDate) cardLink}}}.
+      if($eq activity.activityType 'a-dueAt')
+        | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
 
-        if($eq activity.activityType 'a-startAt')
-          | {{{_ 'activity-startDate' (sanitize startDate) cardLink}}}.
-        
-        if($eq activity.activityType 'a-dueAt')
-          | {{{_ 'activity-dueDate' (sanitize dueDate) cardLink}}}.
-
-        if($eq activity.activityType 'a-endAt')
-          | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
+      if($eq activity.activityType 'a-endAt')
+        | {{{_ 'activity-endDate' (sanitize endDate) cardLink}}}.
 
       //- customField activity ------------------------------------------------
-      if($eq mode 'board')
-        if($eq activity.activityType 'createCustomField')
-          | {{_ 'activity-customfield-created' customField}}.
+      if($eq activity.activityType 'createCustomField')
+        | {{_ 'activity-customfield-created' customField}}.
 
-        if($eq activity.activityType 'setCustomField')
-          | {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.
+      if($eq activity.activityType 'setCustomField')
+        | {{{_ 'activity-set-customfield' (sanitize lastCustomField) (sanitize lastCustomFieldValue) cardLink}}}.
 
-        if($eq activity.activityType 'unsetCustomField')
-          | {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.
+      if($eq activity.activityType 'unsetCustomField')
+        | {{{_ 'activity-unset-customfield' (sanitize lastCustomField) cardLink}}}.
 
       //- label activity ------------------------------------------------------
       if($eq activity.activityType 'addedLabel')
@@ -216,12 +222,11 @@ template(name="activity")
           | {{{_ 'activity-removed' memberLink cardLink}}}.
 
       //- swimlane activity --------------------------------------------------
-      if($neq mode 'card')
-        if($eq activity.activityType 'createSwimlane')
-          | {{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}.
+      if($eq activity.activityType 'createSwimlane')
+        | {{{_ 'activity-added' (sanitize activity.swimlane.title) boardLabelLink}}}.
 
-        if($eq activity.activityType 'archivedSwimlane')
-          | {{_ 'activity-archived' (sanitize activity.swimlane.title)}}.
+      if($eq activity.activityType 'archivedSwimlane')
+        | {{{_ 'activity-archived' (sanitize activity.swimlane.title)}}}.
 
 
       //- I don't understand this part ----------------------------------------

client/components/activities/activities.js

@@ -1,4 +1,6 @@
-import sanitizeXss from 'xss';
+import { ReactiveCache } from '/imports/reactiveCache';
+import DOMPurify from 'dompurify';
+import { TAPi18n } from '/imports/i18n';
 
 const activitiesPerPage = 500;
 
@@ -13,17 +15,17 @@ BlazeComponent.extendComponent({
     this.autorun(() => {
       let mode = this.data().mode;
       const capitalizedMode = Utils.capitalize(mode);
-      let thisId, searchId;
+      let searchId;
       if (mode === 'linkedcard' || mode === 'linkedboard') {
-        thisId = Session.get('currentCard');
-        searchId = Cards.findOne({ _id: thisId }).linkedId;
+        searchId = Utils.getCurrentCard().linkedId;
         mode = mode.replace('linked', '');
+      } else if (mode === 'card') {
+        searchId = Utils.getCurrentCardId();
       } else {
-        thisId = Session.get(`current${capitalizedMode}`);
-        searchId = thisId;
+        searchId = Session.get(`current${capitalizedMode}`);
       }
       const limit = this.page.get() * activitiesPerPage;
-      const user = Meteor.user();
+      const user = ReactiveCache.getCurrentUser();
       const hideSystem = user ? user.hasHiddenSystemMessages() : false;
       if (searchId === null) return;
 
@@ -54,31 +56,67 @@ BlazeComponent.extendComponent({
   },
 }).register('activities');
 
+Template.activities.helpers({
+  activities() {
+    const ret = this.card.activities();
+    return ret;
+  },
+});
+
 BlazeComponent.extendComponent({
   checkItem() {
     const checkItemId = this.currentData().activity.checklistItemId;
-    const checkItem = ChecklistItems.findOne({ _id: checkItemId });
+    const checkItem = ReactiveCache.getChecklistItem(checkItemId);
     return checkItem && checkItem.title;
   },
 
   boardLabelLink() {
     const data = this.currentData();
+    const currentBoardId = Session.get('currentBoard');
     if (data.mode !== 'board') {
-      return createBoardLink(data.activity.board(), data.activity.listName);
+      // data.mode: card, linkedcard, linkedboard
+      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createBoardLink(data.activity.board(), data.activity.listName ? data.activity.listName : null);
     }
     return TAPi18n.__('this-board');
   },
 
   cardLabelLink() {
     const data = this.currentData();
-    if (data.mode !== 'card') {
-      return createCardLink(data.activity.card());
+    const currentBoardId = Session.get('currentBoard');
+    if (data.mode == 'card') {
+      // data.mode: card
+      return TAPi18n.__('this-card');
     }
-    return TAPi18n.__('this-card');
+    else if (data.mode !== 'board') {
+      // data.mode: linkedcard, linkedboard
+      return createCardLink(data.activity.card(), null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createCardLink(data.activity.card(), data.activity.board().title);
+    }
+    return createCardLink(this.currentData().activity.card(), null);
   },
 
   cardLink() {
-    return createCardLink(this.currentData().activity.card());
+    const data = this.currentData();
+    const currentBoardId = Session.get('currentBoard');
+    if (data.mode !== 'board') {
+      // data.mode: card, linkedcard, linkedboard
+      return createCardLink(data.activity.card(), null);
+    }
+    else if (currentBoardId != data.activity.boardId) {
+      // data.mode: board
+      // current activitie is linked
+      return createCardLink(data.activity.card(), data.activity.board().title);
+    }
+    return createCardLink(this.currentData().activity.card(), null);
   },
 
   receivedDate() {
@@ -108,18 +146,20 @@ BlazeComponent.extendComponent({
   lastLabel() {
     const lastLabelId = this.currentData().activity.labelId;
     if (!lastLabelId) return null;
-    const lastLabel = Boards.findOne(
+    const lastLabel = ReactiveCache.getBoard(
       this.currentData().activity.boardId,
     ).getLabelById(lastLabelId);
     if (lastLabel && (lastLabel.name === undefined || lastLabel.name === '')) {
       return lastLabel.color;
-    } else {
+    } else if (lastLabel.name !== undefined && lastLabel.name !== '') {
       return lastLabel.name;
+    } else {
+      return null;
     }
   },
 
   lastCustomField() {
-    const lastCustomField = CustomFields.findOne(
+    const lastCustomField = ReactiveCache.getCustomField(
       this.currentData().activity.customFieldId,
     );
     if (!lastCustomField) return null;
@@ -127,7 +167,7 @@ BlazeComponent.extendComponent({
   },
 
   lastCustomFieldValue() {
-    const lastCustomField = CustomFields.findOne(
+    const lastCustomField = ReactiveCache.getCustomField(
       this.currentData().activity.customFieldId,
     );
     if (!lastCustomField) return null;
@@ -162,11 +202,15 @@ BlazeComponent.extendComponent({
             {
               href: source.url,
             },
-            sanitizeXss(source.system),
+            DOMPurify.sanitize(source.system, {
+              ALLOW_UNKNOWN_PROTOCOLS: true,
+            }),
           ),
         );
       } else {
-        return sanitizeXss(source.system);
+        return DOMPurify.sanitize(source.system, {
+          ALLOW_UNKNOWN_PROTOCOLS: true,
+        });
       }
     }
     return null;
@@ -183,17 +227,17 @@ BlazeComponent.extendComponent({
     // trying to display url before file is stored generates js errors
     return (
       (attachment &&
-        attachment.url({ download: true }) &&
+        attachment.path &&
         Blaze.toHTML(
           HTML.A(
             {
-              href: attachment.url({ download: true }),
+              href: `${attachment.link()}?download=true`,
               target: '_blank',
             },
-            sanitizeXss(attachment.name()),
+            DOMPurify.sanitize(attachment.name),
           ),
         )) ||
-      sanitizeXss(this.currentData().activity.attachmentName)
+      DOMPurify.sanitize(this.currentData().activity.attachmentName)
     );
   },
 
@@ -207,10 +251,11 @@ BlazeComponent.extendComponent({
     return [
       {
         // XXX We should use Popup.afterConfirmation here
-        'click .js-delete-comment'() {
-          const commentId = this.currentData().activity.commentId;
+        'click .js-delete-comment': Popup.afterConfirm('deleteComment', () => {
+          const commentId = this.data().activity.commentId;
           CardComments.remove(commentId);
-        },
+          Popup.back();
+        }),
         'submit .js-edit-comment'(evt) {
           evt.preventDefault();
           const commentText = this.currentComponent()
@@ -232,12 +277,69 @@ BlazeComponent.extendComponent({
 
 Template.activity.helpers({
   sanitize(value) {
-    return sanitizeXss(value);
+    return DOMPurify.sanitize(value, { ALLOW_UNKNOWN_PROTOCOLS: true });
   },
 });
 
-function createCardLink(card) {
+Template.commentReactions.events({
+  'click .reaction'(event) {
+    if (ReactiveCache.getCurrentUser().isBoardMember()) {
+      const codepoint = event.currentTarget.dataset['codepoint'];
+      const commentId = Template.instance().data.commentId;
+      const cardComment = ReactiveCache.getCardComment(commentId);
+      cardComment.toggleReaction(codepoint);
+    }
+  },
+  'click .open-comment-reaction-popup': Popup.open('addReaction'),
+})
+
+Template.addReactionPopup.events({
+  'click .add-comment-reaction'(event) {
+    if (ReactiveCache.getCurrentUser().isBoardMember()) {
+      const codepoint = event.currentTarget.dataset['codepoint'];
+      const commentId = Template.instance().data.commentId;
+      const cardComment = ReactiveCache.getCardComment(commentId);
+      cardComment.toggleReaction(codepoint);
+    }
+    Popup.back();
+  },
+})
+
+Template.addReactionPopup.helpers({
+  codepoints() {
+    // Starting set of unicode codepoints as comment reactions
+    return [
+      '👍',
+      '👎',
+      '👀',
+      '✅',
+      '❌',
+      '🙏',
+      '👏',
+      '🎉',
+      '🚀',
+      '😊',
+      '🤔',
+      '😔'];
+  }
+})
+
+Template.commentReactions.helpers({
+  isSelected(userIds) {
+    return Meteor.userId() && userIds.includes(Meteor.userId());
+  },
+  userNames(userIds) {
+    const ret = ReactiveCache.getUsers({_id: {$in: userIds}})
+      .map(user => user.profile.fullname)
+      .join(', ');
+    return ret;
+  }
+})
+
+function createCardLink(card, board) {
   if (!card) return '';
+  let text = card.title;
+  if (board) text = `${board} > ` + text;
   return (
     card &&
     Blaze.toHTML(
@@ -246,7 +348,7 @@ function createCardLink(card) {
           href: card.originRelativeUrl(),
           class: 'action-card',
         },
-        sanitizeXss(card.title),
+        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
       ),
     )
   );
@@ -263,7 +365,7 @@ function createBoardLink(board, list) {
           href: board.originRelativeUrl(),
           class: 'action-board',
         },
-        sanitizeXss(text),
+        DOMPurify.sanitize(text, { ALLOW_UNKNOWN_PROTOCOLS: true }),
       ),
     )
   );

client/components/activities/activities.styl

@@ -1,52 +0,0 @@
-@import 'nib'
-
-.activity-title
-  margin: 0 0.5em 0.8em
-  display: flex
-  justify-content:space-between
-
-.activities
-  clear: both
-
-  .activity
-    margin: 0.5px 0
-    padding: 6px 0;
-    display: flex
-
-    .member
-      width: 32px
-      height: @width
-
-    .activity-member
-      font-weight: 700      
-
-    .activity-desc
-      word-wrap: break-word
-      overflow: hidden
-      flex: 1
-      align-self: center
-      margin: 0
-      margin-left: 3px
-      overflow: hidden;
-      word-break: break-word;
-
-      .activity-comment
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-
-      .activity-checklist
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-      .activity-meta
-        font-size: 0.8em
-        color: darken(white, 40%)

client/components/activities/comments.css

@@ -0,0 +1,65 @@
+.new-comment {
+  position: relative;
+  margin: 0 0 20px 38px;
+}
+.new-comment .member {
+  opacity: 0.7;
+  position: absolute;
+  top: 1px;
+  left: -38px;
+}
+.new-comment.is-open .member {
+  opacity: 1;
+}
+.new-comment.is-open .helper {
+  display: inline-block;
+}
+.new-comment.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-comment .too-long {
+  margin-top: 8px;
+}
+.new-comment textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-comment textarea:hover,
+.new-comment textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-comment textarea:is-open {
+  cursor: auto;
+}
+.comment-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.comment-item:hover {
+  background: #e0e0e0;
+}
+.comment-item.add-comment {
+  display: flex;
+  margin: 5px;
+}
+.comment-item.add-comment a {
+  display: block;
+  margin: auto;
+}

client/components/activities/comments.jade

@@ -1,7 +1,7 @@
 template(name="commentForm")
   .new-comment.js-new-comment(
     class="{{#if commentFormIsOpen}}is-open{{/if}}")
-    +userAvatar(userId=currentUser._id)
+    +userAvatar(userId=currentUser._id noRemove=true)
     form.js-new-comment-form
       +editor(class="js-new-comment-input")
         | {{getUnsavedValue 'cardComment' currentCard._id}}

client/components/activities/comments.js

@@ -1,8 +1,11 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 const commentFormIsOpen = new ReactiveVar(false);
 
 BlazeComponent.extendComponent({
   onDestroyed() {
     commentFormIsOpen.set(false);
+    $('.note-popover').hide();
   },
 
   commentFormIsOpen() {
@@ -23,8 +26,10 @@ BlazeComponent.extendComponent({
           let boardId = card.boardId;
           let cardId = card._id;
           if (card.isLinkedCard()) {
-            boardId = Cards.findOne(card.linkedId).boardId;
+            boardId = ReactiveCache.getCard(card.linkedId).boardId;
             cardId = card.linkedId;
+          } else if (card.isLinkedBoard()) {
+            boardId = card.linkedId;
           }
           if (text) {
             CardComments.insert({
@@ -63,7 +68,7 @@ function resetCommentInput(input) {
 // Tracker.autorun to register the component dependencies, and re-run when these
 // dependencies are invalidated. A better component API would remove this hack.
 Tracker.autorun(() => {
-  Session.get('currentCard');
+  Utils.getCurrentCardId();
   Tracker.afterFlush(() => {
     autosize.update($('.js-new-comment-input'));
   });
@@ -74,7 +79,7 @@ EscapeActions.register(
   () => {
     const draftKey = {
       fieldName: 'cardComment',
-      docId: Session.get('currentCard'),
+      docId: Utils.getCurrentCardId(),
     };
     const commentInput = $('.js-new-comment-input');
     const draft = commentInput.val().trim();

client/components/activities/comments.styl

@@ -1,68 +0,0 @@
-@import 'nib'
-
-.new-comment
-  position: relative
-  margin: 0 0 20px 38px
-
-  .member
-    opacity: .7
-    position: absolute
-    top: 1px
-    left: -38px
-
-  &.is-open
-    .member
-      opacity: 1
-
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    color: #8c8c8c
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.comment-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-comment
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/boards/boardArchive.jade

@@ -14,6 +14,7 @@ template(name="archivedBoards")
             i.fa.fa-undo
             | {{_ 'restore-board'}}
           = title
+        span {{ moment archivedAt 'LLL' }}
     else
       li.no-items-message {{_ 'no-archived-boards'}}
 

client/components/boards/boardArchive.js

@@ -1,19 +1,22 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 BlazeComponent.extendComponent({
   onCreated() {
     this.subscribe('archivedBoards');
   },
 
   isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
   },
 
   archivedBoards() {
-    return Boards.find(
+    const ret = ReactiveCache.getBoards(
       { archived: true },
       {
         sort: { archivedAt: -1, modifiedAt: -1 },
       },
     );
+    return ret;
   },
 
   events() {
@@ -25,8 +28,8 @@ BlazeComponent.extendComponent({
             Meteor.settings &&
             Meteor.settings.public &&
             Meteor.settings.public.sandstorm;
-          if (isSandstorm && Session.get('currentBoard')) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          if (isSandstorm && Utils.getCurrentBoardId()) {
+            const currentBoard = Utils.getCurrentBoard();
             currentBoard.archive();
           }
           const board = this.currentData();
@@ -34,13 +37,13 @@ BlazeComponent.extendComponent({
           Utils.goBoardId(board._id);
         },
         'click .js-delete-board': Popup.afterConfirm('boardDelete', function() {
-          Popup.close();
+          Popup.back();
           const isSandstorm =
             Meteor.settings &&
             Meteor.settings.public &&
             Meteor.settings.public.sandstorm;
-          if (isSandstorm && Session.get('currentBoard')) {
-            const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          if (isSandstorm && Utils.getCurrentBoardId()) {
+            const currentBoard = Utils.getCurrentBoard();
             Boards.remove(currentBoard._id);
           }
           Boards.remove(this._id);

client/components/boards/boardBody.css

@@ -0,0 +1,224 @@
+.board-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.board-wrapper .board-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: margin 0.1s;
+  overflow-y: auto;
+}
+.board-wrapper .board-canvas.is-sibling-sidebar-open {
+  margin-right: 248px;
+}
+.board-wrapper .board-canvas .board-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: -100px;
+  right: -400px;
+  background: #000;
+  opacity: 0.33;
+  animation: fadeIn 0.2s;
+  z-index: 16;
+}
+.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
+.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
+  display: none;
+}
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .swimlane {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0px 0px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+.calendar-event-green {
+  background: #3cb500 !important;
+  border-color: #2a8000;
+  color: #fff !important;
+}
+.calendar-event-yellow {
+  background: #fad900 !important;
+  border-color: #c7ac00;
+  color: #000 !important;
+}
+.calendar-event-orange {
+  background: #ff9f19 !important;
+  border-color: #cc7c14;
+  color: #000 !important;
+}
+.calendar-event-red {
+  background: #eb4646 !important;
+  border-color: #b83737;
+  color: #fff !important;
+}
+.calendar-event-purple {
+  background: #a632db !important;
+  border-color: #7d26a6;
+  color: #fff !important;
+}
+.calendar-event-blue {
+  background: #0079bf !important;
+  border-color: #005a8a;
+  color: #fff !important;
+}
+.calendar-event-pink {
+  background: #ff78cb !important;
+  border-color: #cc62a3;
+  color: #000 !important;
+}
+.calendar-event-sky {
+  background: #00c2e0 !important;
+  border-color: #0094ab;
+  color: #fff !important;
+}
+.calendar-event-black {
+  background: #4d4d4d !important;
+  border-color: #1a1a1a;
+  color: #fff !important;
+}
+.calendar-event-lime {
+  background: #51e898 !important;
+  border-color: #3eb375;
+  color: #000 !important;
+}
+.calendar-event-silver {
+  background: #c0c0c0 !important;
+  border-color: #8c8c8c;
+  color: #000 !important;
+}
+.calendar-event-peachpuff {
+  background: #ffdab9 !important;
+  border-color: #ccaf95;
+  color: #000 !important;
+}
+.calendar-event-crimson {
+  background: #dc143c !important;
+  border-color: #a8112f;
+  color: #fff !important;
+}
+.calendar-event-plum {
+  background: #dda0dd !important;
+  border-color: #a87ba8;
+  color: #000 !important;
+}
+.calendar-event-darkgreen {
+  background: #006400 !important;
+  border-color: #003000;
+  color: #fff !important;
+}
+.calendar-event-slateblue {
+  background: #6a5acd !important;
+  border-color: #4f4399;
+  color: #fff !important;
+}
+.calendar-event-magenta {
+  background: #f0f !important;
+  border-color: #c0c;
+  color: #fff !important;
+}
+.calendar-event-gold {
+  background: #ffd700 !important;
+  border-color: #ca0;
+  color: #000 !important;
+}
+.calendar-event-navy {
+  background: #000080 !important;
+  border-color: #003;
+  color: #fff !important;
+}
+.calendar-event-gray {
+  background: #808080 !important;
+  border-color: #333;
+  color: #fff !important;
+}
+.calendar-event-saddlebrown {
+  background: #8b4513 !important;
+  border-color: #572b0c;
+  color: #fff !important;
+}
+.calendar-event-paleturquoise {
+  background: #afeeee !important;
+  border-color: #8ababa;
+  color: #000 !important;
+}
+.calendar-event-mistyrose {
+  background: #ffe4e1 !important;
+  border-color: #ccb8b6;
+  color: #000 !important;
+}
+.calendar-event-indigo {
+  background: #4b0082 !important;
+  border-color: #2b004d;
+  color: #fff !important;
+}
+/* Modal Styles */
+.modal {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+}
+.modal-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 25%; /* Adjust the height to make it smaller */
+  position: relative;
+  margin: 10% auto; /* This margin will help center the modal vertically */
+  max-width: 400px; /* Adjust the max-width to make it smaller */
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.modal-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1px;
+  border-bottom: 1px solid #ccc;
+}
+.modal-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-size: 18px;
+}
+.modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 4px;
+  border-top: 1px solid #ccc;
+}
+.close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  font-size: 25px;
+  cursor: pointer;
+}

client/components/boards/boardBody.jade

@@ -13,26 +13,29 @@ template(name="board")
     +spinner
 
 template(name="boardBody")
-  .board-wrapper(class=currentBoard.colorClass)
-    +sidebar
-    .board-canvas.js-swimlanes(
-      class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
-      class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-      class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
-      if showOverlay.get
-        .board-overlay
-      if currentBoard.isTemplatesBoard
-        each currentBoard.swimlanes
-          +swimlane(this)
-      else if isViewSwimlanes
-        each currentBoard.swimlanes
-          +swimlane(this)
-      else if isViewLists
-        +listsGroup(currentBoard)
-      else if isViewCalendar
-        +calendarView
-      else
-        +listsGroup(currentBoard)
+  if notDisplayThisBoard
+   | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
+  else
+    .board-wrapper(class=currentBoard.colorClass)
+      +sidebar
+      .board-canvas.js-swimlanes(
+        class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
+        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
+        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
+        if showOverlay.get
+          .board-overlay
+        if currentBoard.isTemplatesBoard
+          each currentBoard.swimlanes
+            +swimlane(this)
+        else if isViewSwimlanes
+          each currentBoard.swimlanes
+            +swimlane(this)
+        else if isViewLists
+          +listsGroup(currentBoard)
+        else if isViewCalendar
+          +calendarView
+        else
+          +listsGroup(currentBoard)
 
 template(name="calendarView")
   if isViewCalendar

client/components/boards/boardBody.js

@@ -1,3 +1,6 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
 const swimlaneWhileSortingHeight = 150;
@@ -23,7 +26,7 @@ BlazeComponent.extendComponent({
   },
 
   onlyShowCurrentCard() {
-    return Utils.isMiniScreen() && Session.get('currentCard');
+    return Utils.isMiniScreen() && Utils.getCurrentCardId(true);
   },
 
   goHome() {
@@ -33,6 +36,7 @@ BlazeComponent.extendComponent({
 
 BlazeComponent.extendComponent({
   onCreated() {
+    Meteor.subscribe('tableVisibilityModeSettings');
     this.showOverlay = new ReactiveVar(false);
     this.draggingActive = new ReactiveVar(false);
     this._isDragging = false;
@@ -40,9 +44,9 @@ BlazeComponent.extendComponent({
     this.mouseHasEnterCardDetails = false;
 
     // fix swimlanes sort field if there are null values
-    const currentBoardData = Boards.findOne(Session.get('currentBoard'));
+    const currentBoardData = Utils.getCurrentBoard();
     const nullSortSwimlanes = currentBoardData.nullSortSwimlanes();
-    if (nullSortSwimlanes.count() > 0) {
+    if (nullSortSwimlanes.length > 0) {
       const swimlanes = currentBoardData.swimlanes();
       let count = 0;
       swimlanes.forEach(s => {
@@ -57,7 +61,7 @@ BlazeComponent.extendComponent({
 
     // fix lists sort field if there are null values
     const nullSortLists = currentBoardData.nullSortLists();
-    if (nullSortLists.count() > 0) {
+    if (nullSortLists.length > 0) {
       const lists = currentBoardData.lists();
       let count = 0;
       lists.forEach(l => {
@@ -190,53 +194,46 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      let showDesktopDragHandles = false;
-      currentUser = Meteor.user();
-      if (currentUser) {
-        showDesktopDragHandles = (currentUser.profile || {})
-          .showDesktopDragHandles;
-      } else if (window.localStorage.getItem('showDesktopDragHandles')) {
-        showDesktopDragHandles = true;
-      } else {
-        showDesktopDragHandles = false;
-      }
-      if (Utils.isMiniScreen() || showDesktopDragHandles) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $swimlanesDom.sortable({
           handle: '.js-swimlane-header-handle',
         });
-      } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
+      } else {
         $swimlanesDom.sortable({
           handle: '.swimlane-header',
         });
       }
 
       // Disable drag-dropping if the current user is not a board member
-      //$swimlanesDom.sortable('option', 'disabled', !userIsMember());
       $swimlanesDom.sortable(
         'option',
         'disabled',
-        !Meteor.user().isBoardAdmin(),
+        !ReactiveCache.getCurrentUser()?.isBoardAdmin(),
       );
     });
 
-    function userIsMember() {
-      return (
-        Meteor.user() &&
-        Meteor.user().isBoardMember() &&
-        !Meteor.user().isCommentOnly()
-      );
-    }
-
     // If there is no data in the board (ie, no lists) we autofocus the list
     // creation form by clicking on the corresponding element.
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    if (userIsMember() && currentBoard.lists().count() === 0) {
+    const currentBoard = Utils.getCurrentBoard();
+    if (Utils.canModifyBoard() && currentBoard.lists().length === 0) {
       boardComponent.openNewListForm();
     }
+
+    Utils.setBackgroundImage();
+  },
+
+  notDisplayThisBoard() {
+    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
+    let currentBoard = Utils.getCurrentBoard();
+    if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue && currentBoard.permission == 'public') {
+      return true;
+    }
+
+    return false;
   },
 
   isViewSwimlanes() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
       return (currentUser.profile || {}).boardView === 'board-view-swimlanes';
     } else {
@@ -247,7 +244,7 @@ BlazeComponent.extendComponent({
   },
 
   isViewLists() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
       return (currentUser.profile || {}).boardView === 'board-view-lists';
     } else {
@@ -256,7 +253,7 @@ BlazeComponent.extendComponent({
   },
 
   isViewCalendar() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
       return (currentUser.profile || {}).boardView === 'board-view-cal';
     } else {
@@ -266,9 +263,10 @@ BlazeComponent.extendComponent({
 
   openNewListForm() {
     if (this.isViewSwimlanes()) {
-      this.childComponents('swimlane')[0]
-        .childComponents('addListAndSwimlaneForm')[0]
-        .open();
+      // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
+      // this.childComponents('swimlane')[0]
+      //   .childComponents('addListAndSwimlaneForm')[0]
+      //   .open();
     } else if (this.isViewLists()) {
       this.childComponents('listsGroup')[0]
         .childComponents('addListForm')[0]
@@ -315,16 +313,18 @@ BlazeComponent.extendComponent({
 
 BlazeComponent.extendComponent({
   onRendered() {
-    this.autorun(function() {
+    this.autorun(function () {
       $('#calendar-view').fullCalendar('refetchEvents');
     });
   },
   calendarOptions() {
     return {
       id: 'calendar-view',
-      defaultView: 'agendaDay',
+      defaultView: 'month',
       editable: true,
+      selectable: true,
       timezone: 'local',
+      weekNumbers: true,
       header: {
         left: 'title   today prev,next',
         center:
@@ -344,9 +344,9 @@ BlazeComponent.extendComponent({
       },
       locale: TAPi18n.getLanguage(),
       events(start, end, timezone, callback) {
-        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        const currentBoard = Utils.getCurrentBoard();
         const events = [];
-        const pushEvent = function(card, title, start, end, extraCls) {
+        const pushEvent = function (card, title, start, end, extraCls) {
           start = start || card.startAt;
           end = end || card.endAt;
           title = title || card.title;
@@ -370,12 +370,12 @@ BlazeComponent.extendComponent({
         };
         currentBoard
           .cardsInInterval(start.toDate(), end.toDate())
-          .forEach(function(card) {
+          .forEach(function (card) {
             pushEvent(card);
           });
         currentBoard
           .cardsDueInBetween(start.toDate(), end.toDate())
-          .forEach(function(card) {
+          .forEach(function (card) {
             pushEvent(
               card,
               `${card.title} ${TAPi18n.__('card-due')}`,
@@ -383,14 +383,14 @@ BlazeComponent.extendComponent({
               new Date(card.dueAt.getTime() + 36e5),
             );
           });
-        events.sort(function(first, second) {
+        events.sort(function (first, second) {
           return first.id > second.id ? 1 : -1;
         });
         callback(events);
       },
       eventResize(event, delta, revertFunc) {
         let isOk = false;
-        const card = Cards.findOne(event.id);
+        const card = ReactiveCache.getCard(event.id);
 
         if (card) {
           card.setEnd(event.end.toDate());
@@ -402,12 +402,14 @@ BlazeComponent.extendComponent({
       },
       eventDrop(event, delta, revertFunc) {
         let isOk = false;
-        const card = Cards.findOne(event.id);
+        const card = ReactiveCache.getCard(event.id);
         if (card) {
           // TODO: add a flag for allDay events
           if (!event.allDay) {
-            card.setStart(event.start.toDate());
-            card.setEnd(event.end.toDate());
+            // https://github.com/wekan/wekan/issues/2917#issuecomment-1236753962
+            //card.setStart(event.start.toDate());
+            //card.setEnd(event.end.toDate());
+            card.setDue(event.start.toDate());
             isOk = true;
           }
         }
@@ -415,10 +417,62 @@ BlazeComponent.extendComponent({
           revertFunc();
         }
       },
+      select: function (startDate) {
+        const currentBoard = Utils.getCurrentBoard();
+        const currentUser = ReactiveCache.getCurrentUser();
+        const modalElement = document.createElement('div');
+        modalElement.classList.add('modal', 'fade');
+        modalElement.setAttribute('tabindex', '-1');
+        modalElement.setAttribute('role', 'dialog');
+        modalElement.innerHTML = `
+        <div class="modal-dialog justify-content-center align-items-center" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">${TAPi18n.__('r-create-card')}</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body text-center">
+              <input type="text" class="form-control" id="card-title-input" placeholder="">
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary" id="create-card-button">${TAPi18n.__('add-card')}</button>
+            </div>
+          </div>
+        </div>
+        `;
+        const createCardButton = modalElement.querySelector('#create-card-button');
+        createCardButton.addEventListener('click', function () {
+          const myTitle = modalElement.querySelector('#card-title-input').value;
+          if (myTitle) {
+            const firstList = currentBoard.draggableLists()[0];
+            const firstSwimlane = currentBoard.swimlanes()[0];
+            Meteor.call('createCardWithDueDate', currentBoard._id, firstList._id, myTitle, startDate.toDate(), firstSwimlane._id, function(error, result) {
+              if (error) {
+                console.log(error);
+              } else {
+                console.log("Card Created", result);
+              }
+            });
+            closeModal();
+          }
+        });
+        document.body.appendChild(modalElement);
+        const openModal = function() {
+          modalElement.style.display = 'flex';
+        };
+        const closeModal = function() {
+          modalElement.style.display = 'none';
+        };
+        const closeButton = modalElement.querySelector('[data-dismiss="modal"]');
+        closeButton.addEventListener('click', closeModal);
+        openModal();
+      }
     };
   },
   isViewCalendar() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
       return (currentUser.profile || {}).boardView === 'board-view-cal';
     } else {

client/components/boards/boardBody.styl

@@ -1,133 +0,0 @@
-@import 'nib'
-
-position()
-  if arguments[0] == cover || arguments[0] == fixed-cover
-    if arguments[0] == cover
-      position: absolute
-    else
-      position: fixed
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-  else
-    position: arguments
-
-.board-wrapper
-  position: cover
-  overflow-x: hidden
-  overflow-y: hidden
-
-  .board-canvas
-    position: cover
-    transition: margin .1s
-    overflow-y: auto
-
-    &.is-sibling-sidebar-open
-      margin-right: 248px
-
-    .board-overlay
-      position: fixed-cover
-      top: -100px
-      right: -400px
-      background: black
-      opacity: 0.33
-      animation: fadeIn 0.2s
-      z-index: 16
-
-    &.is-dragging-active
-      .open-minicard-composer,
-      .minicard-wrapper.is-checked
-        display: none
-
-@media screen and (max-width: 800px)
-  .board-wrapper
-
-    .board-canvas
-
-      .swimlane
-        border-bottom: 1px solid #CCC
-        display: flex
-        flex-direction: column
-        margin: 0
-        padding: 0 0px 0px 0
-        overflow-x: hidden
-        overflow-y: auto
-
-calendar-event-color(background, borderColor, color...)
-  background: background !important
-  border-color: borderColor
-  if color
-    color: color !important //overwrite text for better visibility
-
-.calendar-event-green
-  calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
-
-.calendar-event-yellow
-  calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
-
-.calendar-event-orange
-  calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
-
-.calendar-event-red
-  calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
-
-.calendar-event-purple
-  calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
-
-.calendar-event-blue
-  calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
-
-.calendar-event-pink
-  calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
-
-.calendar-event-sky
-  calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
-
-.calendar-event-black
-  calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
-
-.calendar-event-lime
-  calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
-
-.calendar-event-silver
-  calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
-
-.calendar-event-peachpuff
-  calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
-
-.calendar-event-crimson
-  calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
-
-.calendar-event-plum
-  calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
-
-.calendar-event-darkgreen
-  calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
-
-.calendar-event-slateblue
-  calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
-
-.calendar-event-magenta
-  calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
-
-.calendar-event-gold
-  calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
-
-.calendar-event-navy
-  calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
-
-.calendar-event-gray
-  calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
-
-.calendar-event-saddlebrown
-  calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
-
-.calendar-event-paleturquoise
-  calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
-
-.calendar-event-mistyrose
-  calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
-
-.calendar-event-indigo
-  calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility

client/components/boards/boardHeader.css

@@ -0,0 +1,23 @@
+.integration-form {
+  padding: 5px;
+  border-bottom: 1px solid #ccc;
+}
+.flex,
+.option {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.option {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}

client/components/boards/boardHeader.jade

@@ -1,8 +1,11 @@
 template(name="boardHeaderBar")
   h1.header-board-menu
     with currentBoard
-      +viewer
-        = title
+      if $eq title 'Templates'
+        | {{_ 'templates'}}
+      else
+        +viewer
+          = title
 
   .board-header-btns.left
     unless isMiniScreen
@@ -36,9 +39,9 @@ template(name="boardHeaderBar")
             span {{_ watchLevel}}
           a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
             i.fa.fa-sort
-            span {{#if isSortActive }}{{_ 'Sort is on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
             if isSortActive
-              a.board-header-btn-close.js-sort-reset(title="Remove Sort")
+              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                 i.fa.fa-times-thin
 
         else
@@ -77,6 +80,12 @@ template(name="boardHeaderBar")
             if $eq watchLevel "muted"
               i.fa.fa-bell-slash
             span {{_ watchLevel}}
+          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+            i.fa.fa-sort
+            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+            if isSortActive
+              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
+                i.fa.fa-times-thin
 
         else
           a.board-header-btn.js-log-in(
@@ -131,7 +140,7 @@ template(name="boardHeaderBar")
               i.fa.fa-times-thin
 
       .separator
-      a.board-header-btn.js-toggle-sidebar
+      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
         i.fa.fa-navicon
 
 template(name="boardVisibilityList")
@@ -144,14 +153,15 @@ template(name="boardVisibilityList")
           if visibilityCheck
             i.fa.fa-check
           span.sub-name {{_ 'private-desc'}}
-    li
-      with "public"
-        a.js-select-visibility
-          i.fa.fa-globe.colorful
-          | {{_ 'public'}}
-          if visibilityCheck
-            i.fa.fa-check
-          span.sub-name {{_ 'public-desc'}}
+    if notAllowPrivateVisibilityOnly
+      li
+        with "public"
+          a.js-select-visibility
+            i.fa.fa-globe.colorful
+            | {{_ 'public'}}
+            if visibilityCheck
+              i.fa.fa-check
+            span.sub-name {{_ 'public-desc'}}
 
 template(name="boardChangeVisibilityPopup")
   +boardVisibilityList
@@ -225,6 +235,9 @@ template(name="createBoard")
           = " "
           | {{{_ 'board-private-info'}}}
         a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
     input.primary.wide(type="submit" value="{{_ 'create'}}")
     span.quiet
       | {{_ 'or'}}

client/components/boards/boardHeader.js

@@ -1,3 +1,6 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+
 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
@@ -7,24 +10,24 @@ Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
   'click .js-custom-fields'() {
     Sidebar.setView('customFields');
-    Popup.close();
+    Popup.back();
   },
   'click .js-open-archives'() {
     Sidebar.setView('archives');
-    Popup.close();
+    Popup.back();
   },
   'click .js-change-board-color': Popup.open('boardChangeColor'),
   'click .js-change-language': Popup.open('changeLanguage'),
   'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     currentBoard.archive();
     // XXX We should have some kind of notification on top of the page to
     // confirm that the board was successfully archived.
     FlowRouter.go('home');
   }),
   'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    Popup.close();
+    const currentBoard = Utils.getCurrentBoard();
+    Popup.back();
     Boards.remove(currentBoard._id);
     FlowRouter.go('home');
   }),
@@ -32,6 +35,7 @@ Template.boardMenuPopup.events({
   'click .js-import-board': Popup.open('chooseBoardSource'),
   'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
   'click .js-card-settings': Popup.open('boardCardSettings'),
+  'click .js-minicard-settings': Popup.open('boardMinicardSettings'),
 });
 
 Template.boardChangeTitlePopup.events({
@@ -47,7 +51,7 @@ Template.boardChangeTitlePopup.events({
     if (newTitle) {
       this.rename(newTitle);
       this.setDescription(newDesc);
-      Popup.close();
+      Popup.back();
     }
     event.preventDefault();
   },
@@ -55,24 +59,24 @@ Template.boardChangeTitlePopup.events({
 
 BlazeComponent.extendComponent({
   watchLevel() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
   },
 
   isStarred() {
     const boardId = Session.get('currentBoard');
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     return user && user.hasStarred(boardId);
   },
 
   // Only show the star counter if the number of star is greater than 2
   showStarCounter() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     return currentBoard && currentBoard.stars >= 2;
   },
   /*
   showSort() {
-    return Meteor.user().hasSortBy();
+    return ReactiveCache.getCurrentUser().hasSortBy();
   },
   directionClass() {
     return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
@@ -82,10 +86,10 @@ BlazeComponent.extendComponent({
     Meteor.call('setListSortBy', direction + this.currentListSortBy());
   },
   currentDirection() {
-    return Meteor.user().getListSortByDirection();
+    return ReactiveCache.getCurrentUser().getListSortByDirection();
   },
   currentListSortBy() {
-    return Meteor.user().getListSortBy();
+    return ReactiveCache.getCurrentUser().getListSortBy();
   },
   listSortShortDesc() {
     return `list-label-short-${this.currentListSortBy()}`;
@@ -96,7 +100,7 @@ BlazeComponent.extendComponent({
       {
         'click .js-edit-board-title': Popup.open('boardChangeTitle'),
         'click .js-star-board'() {
-          Meteor.user().toggleBoardStar(Session.get('currentBoard'));
+          ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
         },
         'click .js-open-board-menu': Popup.open('boardMenu'),
         'click .js-change-visibility': Popup.open('boardChangeVisibility'),
@@ -136,7 +140,7 @@ BlazeComponent.extendComponent({
           Sidebar.setView('search');
         },
         'click .js-multiselection-activate'() {
-          const currentCard = Session.get('currentCard');
+          const currentCard = Utils.getCurrentCardId();
           MultiSelection.activate();
           if (currentCard) {
             MultiSelection.add(currentCard);
@@ -155,13 +159,6 @@ BlazeComponent.extendComponent({
 }).register('boardHeaderBar');
 
 Template.boardHeaderBar.helpers({
-  canModifyBoard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
   boardView() {
     return Utils.boardView();
   },
@@ -173,15 +170,15 @@ Template.boardHeaderBar.helpers({
 Template.boardChangeViewPopup.events({
   'click .js-open-lists-view'() {
     Utils.setBoardView('board-view-lists');
-    Popup.close();
+    Popup.back();
   },
   'click .js-open-swimlanes-view'() {
     Utils.setBoardView('board-view-swimlanes');
-    Popup.close();
+    Popup.back();
   },
   'click .js-open-cal-view'() {
     Utils.setBoardView('board-view-cal');
-    Popup.close();
+    Popup.back();
   },
 });
 
@@ -194,6 +191,11 @@ const CreateBoard = BlazeComponent.extendComponent({
     this.visibilityMenuIsOpen = new ReactiveVar(false);
     this.visibility = new ReactiveVar('private');
     this.boardId = new ReactiveVar('');
+    Meteor.subscribe('tableVisibilityModeSettings');
+  },
+
+  notAllowPrivateVisibilityOnly(){
+    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
   },
 
   visibilityCheck() {
@@ -209,24 +211,79 @@ const CreateBoard = BlazeComponent.extendComponent({
     this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
   },
 
+  toggleAddTemplateContainer() {
+    $('#add-template-container').toggleClass('is-checked');
+  },
+
   onSubmit(event) {
     event.preventDefault();
     const title = this.find('.js-new-board-title').value;
-    const visibility = this.visibility.get();
 
-    this.boardId.set(
-      Boards.insert({
-        title,
-        permission: visibility,
-      }),
-    );
+    const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
+    if (addTemplateContainer) {
+      //const templateContainerId = Meteor.call('setCreateTemplateContainer');
+      //Utils.goBoardId(templateContainerId);
+      //alert('niinku template ' + Meteor.call('setCreateTemplateContainer'));
 
-    Swimlanes.insert({
-      title: 'Default',
-      boardId: this.boardId.get(),
-    });
+      this.boardId.set(
+        Boards.insert({
+            // title: TAPi18n.__('templates'),
+            title: title,
+            permission: 'private',
+            type: 'template-container',
+          }),
+       );
 
-    Utils.goBoardId(this.boardId.get());
+      // Insert the card templates swimlane
+      Swimlanes.insert({
+          // title: TAPi18n.__('card-templates-swimlane'),
+          title: 'Card Templates',
+          boardId: this.boardId.get(),
+          sort: 1,
+          type: 'template-container',
+        }),
+
+      // Insert the list templates swimlane
+      Swimlanes.insert(
+        {
+          // title: TAPi18n.__('list-templates-swimlane'),
+          title: 'List Templates',
+          boardId: this.boardId.get(),
+          sort: 2,
+          type: 'template-container',
+        },
+      );
+
+      // Insert the board templates swimlane
+      Swimlanes.insert(
+        {
+          //title: TAPi18n.__('board-templates-swimlane'),
+          title: 'Board Templates',
+          boardId: this.boardId.get(),
+          sort: 3,
+          type: 'template-container',
+        },
+      );
+
+      Utils.goBoardId(this.boardId.get());
+
+    } else {
+      const visibility = this.visibility.get();
+
+      this.boardId.set(
+        Boards.insert({
+          title,
+          permission: visibility,
+        }),
+      );
+
+      Swimlanes.insert({
+        title: 'Default',
+        boardId: this.boardId.get(),
+      });
+
+      Utils.goBoardId(this.boardId.get());
+    }
   },
 
   events() {
@@ -240,6 +297,7 @@ const CreateBoard = BlazeComponent.extendComponent({
         submit: this.onSubmit,
         'click .js-import-board': Popup.open('chooseBoardSource'),
         'click .js-board-template': Popup.open('searchElement'),
+        'click .js-toggle-add-template-container': this.toggleAddTemplateContainer,
       },
     ];
   },
@@ -249,21 +307,24 @@ const CreateBoard = BlazeComponent.extendComponent({
   onSubmit(event) {
     super.onSubmit(event);
     // Immediately star boards crated with the headerbar popup.
-    Meteor.user().toggleBoardStar(this.boardId.get());
+    ReactiveCache.getCurrentUser().toggleBoardStar(this.boardId.get());
   }
 }.register('headerBarCreateBoardPopup'));
 
 BlazeComponent.extendComponent({
+  notAllowPrivateVisibilityOnly(){
+    return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
+  },
   visibilityCheck() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     return this.currentData() === currentBoard.permission;
   },
 
   selectBoardVisibility() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     const visibility = this.currentData();
     currentBoard.setVisibility(visibility);
-    Popup.close();
+    Popup.back();
   },
 
   events() {
@@ -277,7 +338,7 @@ BlazeComponent.extendComponent({
 
 BlazeComponent.extendComponent({
   watchLevel() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const currentBoard = Utils.getCurrentBoard();
     return currentBoard.getWatchLevel(Meteor.userId());
   },
 
@@ -296,7 +357,7 @@ BlazeComponent.extendComponent({
             Session.get('currentBoard'),
             level,
             (err, ret) => {
-              if (!err && ret) Popup.close();
+              if (!err && ret) Popup.back();
             },
           );
         },
@@ -317,7 +378,7 @@ BlazeComponent.extendComponent({
   allowedSortValues() {
     const types = [];
     const pushed = {};
-    Meteor.user()
+    ReactiveCache.getCurrentUser()
       .getListSortTypes()
       .forEach(type => {
         const key = type.replace(/^-/, '');
@@ -333,16 +394,16 @@ BlazeComponent.extendComponent({
     return types;
   },
   Direction() {
-    return Meteor.user().getListSortByDirection() === -1
+    return ReactiveCache.getCurrentUser().getListSortByDirection() === -1
       ? this.downClass
       : this.upClass;
   },
   sortby() {
-    return Meteor.user().getListSortBy();
+    return ReactiveCache.getCurrentUser().getListSortBy();
   },
 
   setSortBy(type = null) {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     if (type === null) {
       type = user._getListSortBy();
     } else {
@@ -368,7 +429,7 @@ BlazeComponent.extendComponent({
           const direction = down ? -1 : 1;
           this.setSortBy([sortby, direction]);
           if (Utils.isMiniScreen) {
-            Popup.close();
+            Popup.back();
           }
         },
       },
@@ -387,7 +448,7 @@ BlazeComponent.extendComponent({
           };
           Session.set('sortBy', sortBy);
           sortCardsBy.set(TAPi18n.__('due-date'));
-          Popup.close();
+          Popup.back();
         },
         'click .js-sort-title'() {
           const sortBy = {
@@ -395,7 +456,7 @@ BlazeComponent.extendComponent({
           };
           Session.set('sortBy', sortBy);
           sortCardsBy.set(TAPi18n.__('title'));
-          Popup.close();
+          Popup.back();
         },
         'click .js-sort-created-asc'() {
           const sortBy = {
@@ -403,7 +464,7 @@ BlazeComponent.extendComponent({
           };
           Session.set('sortBy', sortBy);
           sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
-          Popup.close();
+          Popup.back();
         },
         'click .js-sort-created-desc'() {
           const sortBy = {
@@ -411,7 +472,7 @@ BlazeComponent.extendComponent({
           };
           Session.set('sortBy', sortBy);
           sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
-          Popup.close();
+          Popup.back();
         },
       },
     ];

client/components/boards/boardHeader.styl

@@ -1,22 +0,0 @@
-.integration-form
-  padding: 5px
-  border-bottom: 1px solid #ccc
-
-.flex
-  display: -webkit-box
-  display: -moz-box
-  display: -webkit-flex
-  display: -moz-flex
-  display: -ms-flexbox
-  display: flex
-
-.option
-  @extends .flex
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;

client/components/boards/boardsList.css

@@ -0,0 +1,281 @@
+@import url("../../../css/reset.css") print, screen;
+
+.board-list {
+  margin: 0 8px;
+}
+.board-list li {
+  float: left;
+  width: 20%;
+  box-sizing: border-box;
+  position: relative;
+}
+.board-list li.placeholder:after {
+  content: '';
+  display: block;
+  background: #ccc;
+  border-radius: 3px;
+  height: 106px;
+  margin: 8px;
+}
+.board-list li.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.board-list li.starred .fa-star,
+.board-list li.starred .fa-star-o {
+  opacity: 1;
+}
+.board-list .board-list-item {
+  overflow: hidden;
+  background-color: #999;
+  color: #f6f6f6;
+  min-height: 100px;
+  font-size: 16px;
+  line-height: 22px;
+  border-radius: 3px;
+  display: block;
+  font-weight: 700;
+  padding: 8px;
+  margin: 8px;
+  position: relative;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+.board-list .board-list-item.template-container {
+  border: 4px solid #fff;
+}
+.board-list .board-list-item.tile {
+  background-size: auto;
+  background-repeat: repeat;
+}
+.board-list .board-list-item-sub-name {
+  color: rgba(255,255,255,0.5);
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.board-list .board-list-item-desc {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.board-list .js-add-board {
+  text-align: center;
+}
+.board-list .js-add-board .label {
+  font-weight: normal;
+  line-height: 56px;
+}
+.board-list .js-add-board :hover {
+  background-color: #939393;
+}
+.board-list .fa-star,
+.board-list .fa-star-o {
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-circle {
+  bottom: 0;
+  font-size: 10px;
+  height: 10px;
+  line-height: 10px;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .has-overtime-card-active {
+  color: #eb4646 !important;
+}
+.board-list .no-overtime-card-active {
+  color: #3cb500 !important;
+}
+.board-list .is-star-active {
+  color: #fff;
+}
+.board-list .fa-clone {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  right: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-archive {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  left: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .fa-clone,
+.board-list li:hover a:hover .fa-archive,
+.board-list li:hover a:hover .fa-star-o {
+  color: #fff;
+}
+.board-list li:hover a .fa-star,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .fa-star-o {
+  color: #fff;
+  opacity: 0.75;
+}
+.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .fa-clone:hover,
+.board-list li:hover a .fa-archive:hover,
+.board-list li:hover a .fa-star-o:hover {
+  font-size: 18px;
+  opacity: 1;
+}
+.board-list li:hover a .fa-star.is-star-active,
+.board-list li:hover a .fa-clone.is-star-active,
+.board-list li:hover a .fa-archive.is-star-active,
+.board-list li:hover a .fa-star-o.is-star-active {
+  opacity: 1;
+}
+.board-backgrounds-list .board-background-select {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 50%;
+  padding-top: 12px;
+  position: relative;
+  z-index: 1;
+}
+.board-backgrounds-list .board-background-select:nth-child(-n + 2) {
+  padding-top: 0;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n) {
+  padding-left: 6px;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n+1) {
+  padding-right: 6px;
+}
+.board-backgrounds-list .board-background-select .background-box {
+  color: #fff;
+  border-radius: 3px;
+  background-size: cover;
+  display: block;
+  height: 74px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-backgrounds-list .board-background-select .background-box i.fa-check {
+  font-size: 25px;
+  color: #fff;
+}
+@media screen and (max-width: 800px) {
+  .board-list {
+    height: 100%;
+    overflow: scroll;
+  }
+  .board-list li {
+    width: 50%;
+  }
+  .board-list .board-list-item {
+    overflow: hidden;
+    height: 8rem;
+  }
+  .board-list .board-list-item-sub-name {
+    position: relative;
+    top: -100px;
+    left: -100px;
+  }
+  .board-list .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 360px) {
+  li {
+    width: 100%;
+  }
+  .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+.AllBoardTeamsOrgs {
+  list-style-type: none;
+  overflow: hidden;
+}
+.AllBoardTeams,
+.AllBoardOrgs,
+.AllBoardBtns {
+  float: left;
+}
+.js-AllBoardOrgs {
+  margin-left: 16px;
+}
+.AllBoardTeams {
+  margin-left: 16px;
+}
+.AllBoardButtonsContainer {
+  margin: 16px;
+}
+#filterBtn,
+#resetBtn {
+  display: inline;
+}
+.js-board {
+  display: block;
+}
+.minicard-members {
+  padding: 6px 0 6px 8px;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  display: inline-block;
+}
+.minicard-lists {
+  margin: 0 auto;
+  max-width: 95%;
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap .item {
+  margin: 2px;
+  padding-right: 6px;
+  text-align: center;
+}

client/components/boards/boardsList.jade

@@ -1,10 +1,40 @@
 template(name="boardList")
   .wrapper
+    ul.AllBoardTeamsOrgs
+      li.AllBoardTeams
+        if userHasTeams
+          select.js-AllBoardTeams#jsAllBoardTeams("multiple")
+            option(value="-1") {{_ 'teams'}} :
+            each teamsDatas
+              option(value="{{teamId}}") {{_ teamDisplayName}}
+
+      li.AllBoardOrgs
+        if userHasOrgs
+          select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
+            option(value="-1") {{_ 'organizations'}} :
+            each orgsDatas
+              option(value="{{orgId}}") {{orgDisplayName}}
+
+      //li.AllBoardTemplates
+      //  if userHasTemplates
+      //  select.js-AllBoardTemplates#jsAllBoardTemplates("multiple")
+      //    option(value="-1") {{_ 'templates'}} :
+      //    each templatesDatas
+      //      option(value="{{templateId}}") {{_ templateDisplayName}}
+
+      li.AllBoardBtns
+        div.AllBoardButtonsContainer
+          if userHasOrgsOrTeams
+            i.fa.fa-filter
+            input#filterBtn(type="button" value="{{_ 'filter'}}")
+            input#resetBtn(type="button" value="{{_ 'filter-clear'}}")
+
     ul.board-list.clearfix.js-boards
       li.js-add-board
-        a.board-list-item.label {{_ 'add-board'}}
+        a.board-list-item.label(title="{{_ 'add-board'}}")
+          | {{_ 'add-board'}}
       each boards
-        li(class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
+        li(class="{{_id}}" class="{{#if isStarred}}starred{{/if}}" class=colorClass).js-board
           if isInvited
             .board-list-item
               span.details
@@ -16,47 +46,102 @@ template(name="boardList")
                 button.js-accept-invite.primary {{_ 'accept'}}
                 button.js-decline-invite {{_ 'decline'}}
           else
-            a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
-              span.details
-                span.board-list-item-name
-                  +viewer
-                    = title
-                i.fa.js-star-board(
-                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                  title="{{_ 'star-board-title'}}")
-                p.board-list-item-desc
-                  +viewer
-                    = description
-                if hasSpentTimeCards
-                  i.fa.js-has-spenttime-cards(
-                    class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
-                    title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                if isMiniScreen
-                  i.fa.board-handle(
-                      class="fa-arrows"
-                      title="{{_ 'Drag board'}}")
-                unless isMiniScreen
-                  if isSandstorm
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
-                  else if isAdministrable
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
-                  else if currentUser.isAdmin
-                    i.fa.js-clone-board(
-                        class="fa-clone"
-                        title="{{_ 'duplicate-board'}}")
-                    i.fa.js-archive-board(
-                        class="fa-archive"
-                        title="{{_ 'archive-board'}}")
+            if $eq type "template-container"
+              a.js-open-board.template-container.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
+                span.details
+                  span.board-list-item-name(title="{{_ 'template-container'}}")
+                    +viewer
+                      = title
+                  i.fa.js-star-board(
+                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                    title="{{_ 'star-board-title'}}")
+                  p.board-list-item-desc
+                    +viewer
+                      = description
+                  if hasSpentTimeCards
+                    i.fa.js-has-spenttime-cards(
+                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
+                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                  if isTouchScreenOrShowDesktopDragHandles
+                    i.fa.board-handle(
+                        class="fa-arrows"
+                        title="{{_ 'drag-board'}}")
+                  else
+                    if isSandstorm
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if isAdministrable
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if currentUser.isAdmin
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+            else
+              a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
+                span.details
+                  span.board-list-item-name(title="{{_ 'board-drag-drop-reorder-or-click-open'}}")
+                    +viewer
+                      = title
+                  unless currentSetting.hideBoardMemberList
+                    if allowsBoardMemberList
+                      .minicard-members
+                        each member in boardMembers _id
+                          a.name
+                            +userAvatar(userId=member noRemove=true)
+                  unless currentSetting.hideCardCounterList
+                    if allowsCardCounterList
+                      .minicard-lists.flex.flex-wrap
+                        each list in boardLists _id
+                          .item
+                            | {{ list }}
+                  i.fa.js-star-board(
+                    class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                    title="{{_ 'star-board-title'}}")
+                  p.board-list-item-desc
+                    +viewer
+                      = description
+                  if hasSpentTimeCards
+                    i.fa.js-has-spenttime-cards(
+                      class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
+                      title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+                  if isTouchScreenOrShowDesktopDragHandles
+                    i.fa.board-handle(
+                        class="fa-arrows"
+                        title="{{_ 'drag-board'}}")
+                  else
+                    if isSandstorm
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if isAdministrable
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
+                    else if currentUser.isAdmin
+                      i.fa.js-clone-board(
+                          class="fa-clone"
+                          title="{{_ 'duplicate-board'}}")
+                      i.fa.js-archive-board(
+                          class="fa-archive"
+                          title="{{_ 'archive-board'}}")
 
 template(name="boardListHeaderBar")
   h1 {{_ title }}

client/components/boards/boardsList.js

@@ -1,5 +1,20 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
-const { calculateIndex, enableClickOnTouch } = Utils;
+
+Template.boardList.helpers({
+  hideCardCounterList() {
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+       return Utils.isMiniScreen() && Session.get('currentBoard'); */
+    return true;
+  },
+  hideBoardMemberList() {
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+       return Utils.isMiniScreen() && Session.get('currentBoard'); */
+    return true;
+  },
+})
 
 Template.boardListHeaderBar.events({
   'click .js-open-archived-board'() {
@@ -9,19 +24,32 @@ Template.boardListHeaderBar.events({
 
 Template.boardListHeaderBar.helpers({
   title() {
+    //if (FlowRouter.getRouteName() === 'template-container') {
+    //  return 'template-container';
+    //} else {
     return FlowRouter.getRouteName() === 'home' ? 'my-boards' : 'public';
+    //}
   },
   templatesBoardId() {
-    return Meteor.user() && Meteor.user().getTemplatesBoardId();
+    return ReactiveCache.getCurrentUser()?.getTemplatesBoardId();
   },
   templatesBoardSlug() {
-    return Meteor.user() && Meteor.user().getTemplatesBoardSlug();
+    return ReactiveCache.getCurrentUser()?.getTemplatesBoardSlug();
   },
 });
 
 BlazeComponent.extendComponent({
   onCreated() {
     Meteor.subscribe('setting');
+    Meteor.subscribe('tableVisibilityModeSettings');
+    let currUser = ReactiveCache.getCurrentUser();
+    let userLanguage;
+    if (currUser && currUser.profile) {
+      userLanguage = currUser.profile.language
+    }
+    if (userLanguage) {
+      TAPi18n.setLanguage(userLanguage);
+    }
   },
 
   onRendered() {
@@ -46,7 +74,7 @@ BlazeComponent.extendComponent({
         // of the previous and the following card -- if any.
         const prevBoardDom = ui.item.prev('.js-board').get(0);
         const nextBoardBom = ui.item.next('.js-board').get(0);
-        const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1);
+        const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardBom, 1);
 
         const boardDomElement = ui.item.get(0);
         const board = Blaze.getData(boardDomElement);
@@ -58,58 +86,149 @@ BlazeComponent.extendComponent({
         // DOM in its initial state. The card move is then handled reactively by
         // Blaze with the below query.
         $boards.sortable('cancel');
-
         board.move(sortIndex.base);
       },
     });
 
-    // ugly touch event hotfix
-    enableClickOnTouch(itemsSelector);
-
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
-      if (Utils.isMiniScreen()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $boards.sortable({
           handle: '.board-handle',
         });
       }
     });
   },
-
+  userHasTeams() {
+    if (ReactiveCache.getCurrentUser()?.teams?.length > 0)
+      return true;
+    else
+      return false;
+  },
+  teamsDatas() {
+    const teams = ReactiveCache.getCurrentUser()?.teams
+    if (teams)
+      return teams.sort((a, b) => a.teamDisplayName.localeCompare(b.teamDisplayName));
+    else
+      return [];
+  },
+  userHasOrgs() {
+    if (ReactiveCache.getCurrentUser()?.orgs?.length > 0)
+      return true;
+    else
+      return false;
+  },
+  orgsDatas() {
+    const orgs = ReactiveCache.getCurrentUser()?.orgs;
+    if (orgs)
+      return orgs.sort((a, b) => a.orgDisplayName.localeCompare(b.orgDisplayName));
+    else
+      return [];
+  },
+  userHasOrgsOrTeams() {
+    const ret = this.userHasOrgs() || this.userHasTeams();
+    return ret;
+  },
   boards() {
-    const query = {
-      archived: false,
-      type: 'board',
+    let query = {
+      // { type: 'board' },
+      // { type: { $in: ['board','template-container'] } },
+      $and: [
+        { archived: false },
+        { type: { $in: ['board', 'template-container'] } },
+        { $or: [] },
+        { title: { $not: { $regex: /^\^.*\^$/ } } }
+      ]
     };
-    if (FlowRouter.getRouteName() === 'home')
-      query['members.userId'] = Meteor.userId();
-    else query.permission = 'public';
 
-    return Boards.find(query, {
+    let allowPrivateVisibilityOnly = TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly');
+
+    if (FlowRouter.getRouteName() === 'home') {
+      query.$and[2].$or.push({ 'members.userId': Meteor.userId() });
+
+      if (allowPrivateVisibilityOnly !== undefined && allowPrivateVisibilityOnly.booleanValue) {
+        query.$and.push({ 'permission': 'private' });
+      }
+      const currUser = ReactiveCache.getCurrentUser();
+
+      let orgIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.orgIdsUserBelongs() : '';
+      if (orgIdsUserBelongs && orgIdsUserBelongs != '') {
+        let orgsIds = orgIdsUserBelongs.split(',');
+        // for(let i = 0; i < orgsIds.length; i++){
+        //   query.$and[2].$or.push({'orgs.orgId': orgsIds[i]});
+        // }
+
+        //query.$and[2].$or.push({'orgs': {$elemMatch : {orgId: orgsIds[0]}}});
+        query.$and[2].$or.push({ 'orgs.orgId': { $in: orgsIds } });
+      }
+
+      let teamIdsUserBelongs = currUser !== undefined && currUser.teams !== 'undefined' ? currUser.teamIdsUserBelongs() : '';
+      if (teamIdsUserBelongs && teamIdsUserBelongs != '') {
+        let teamsIds = teamIdsUserBelongs.split(',');
+        // for(let i = 0; i < teamsIds.length; i++){
+        //   query.$or[2].$or.push({'teams.teamId': teamsIds[i]});
+        // }
+        //query.$and[2].$or.push({'teams': { $elemMatch : {teamId: teamsIds[0]}}});
+        query.$and[2].$or.push({ 'teams.teamId': { $in: teamsIds } });
+      }
+    }
+    else if (allowPrivateVisibilityOnly !== undefined && !allowPrivateVisibilityOnly.booleanValue) {
+      query = {
+        archived: false,
+        //type: { $in: ['board','template-container'] },
+        type: 'board',
+        permission: 'public',
+      };
+    }
+
+    const ret = ReactiveCache.getBoards(query, {
       sort: { sort: 1 /* boards default sorting */ },
     });
+    return ret;
   },
+  boardLists(boardId) {
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+    const lists = ReactiveCache.getLists({ 'boardId': boardId, 'archived': false },{sort: ['sort','asc']});
+    const ret = lists.map(list => {
+      let cardCount = ReactiveCache.getCards({ 'boardId': boardId, 'listId': list._id }).length;
+      return `${list.title}: ${cardCount}`;
+    });
+    return ret;
+    */
+    return [];
+  },
+
+  boardMembers(boardId) {
+    let boardMembers = [];
+    /* Bug Board icons random dance https://github.com/wekan/wekan/issues/4214
+    const lists = ReactiveCache.getBoard(boardId)
+    let members = lists.members
+    members.forEach(member => {
+      boardMembers.push(member.userId);
+    });
+    */
+    return boardMembers;
+  },
+
   isStarred() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     return user && user.hasStarred(this.currentData()._id);
   },
   isAdministrable() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     return user && user.isBoardAdmin(this.currentData()._id);
   },
 
   hasOvertimeCards() {
-    subManager.subscribe('board', this.currentData()._id, false);
     return this.currentData().hasOvertimeCards();
   },
 
   hasSpentTimeCards() {
-    subManager.subscribe('board', this.currentData()._id, false);
     return this.currentData().hasSpentTimeCards();
   },
 
   isInvited() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     return user && user.isInvitedTo(this.currentData()._id);
   },
 
@@ -119,24 +238,29 @@ BlazeComponent.extendComponent({
         'click .js-add-board': Popup.open('createBoard'),
         'click .js-star-board'(evt) {
           const boardId = this.currentData()._id;
-          Meteor.user().toggleBoardStar(boardId);
+          ReactiveCache.getCurrentUser().toggleBoardStar(boardId);
           evt.preventDefault();
         },
         'click .js-clone-board'(evt) {
+          let title = getSlug(ReactiveCache.getBoard(this.currentData()._id).title) || 'cloned-board';
           Meteor.call(
             'copyBoard',
             this.currentData()._id,
             {
-              sort: Boards.find({ archived: false }).count(),
+              sort: ReactiveCache.getBoards({ archived: false }).length,
               type: 'board',
-              title: Boards.findOne(this.currentData()._id).title,
+              title: ReactiveCache.getBoard(this.currentData()._id).title,
             },
             (err, res) => {
               if (err) {
-                this.setError(err.error);
+                console.error(err);
               } else {
                 Session.set('fromBoard', null);
-                Utils.goBoardId(res);
+                subManager.subscribe('board', res, false);
+                FlowRouter.go('board', {
+                  id: res,
+                  slug: title,
+                });
               }
             },
           );
@@ -160,6 +284,72 @@ BlazeComponent.extendComponent({
             }
           });
         },
+        'click #resetBtn'(event) {
+          let allBoards = document.getElementsByClassName("js-board");
+          let currBoard;
+          for (let i = 0; i < allBoards.length; i++) {
+            currBoard = allBoards[i];
+            currBoard.style.display = "block";
+          }
+        },
+        'click #filterBtn'(event) {
+          event.preventDefault();
+          let selectedTeams = document.querySelectorAll('#jsAllBoardTeams option:checked');
+          let selectedTeamsValues = Array.from(selectedTeams).map(function (elt) { return elt.value });
+          let index = selectedTeamsValues.indexOf("-1");
+          if (index > -1) {
+            selectedTeamsValues.splice(index, 1);
+          }
+
+          let selectedOrgs = document.querySelectorAll('#jsAllBoardOrgs option:checked');
+          let selectedOrgsValues = Array.from(selectedOrgs).map(function (elt) { return elt.value });
+          index = selectedOrgsValues.indexOf("-1");
+          if (index > -1) {
+            selectedOrgsValues.splice(index, 1);
+          }
+
+          if (selectedTeamsValues.length > 0 || selectedOrgsValues.length > 0) {
+            const query = {
+              $and: [
+                { archived: false },
+                { type: 'board' },
+                { $or: [] }
+              ]
+            };
+            if (selectedTeamsValues.length > 0) {
+              query.$and[2].$or.push({ 'teams.teamId': { $in: selectedTeamsValues } });
+            }
+            if (selectedOrgsValues.length > 0) {
+              query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
+            }
+
+            let filteredBoards = ReactiveCache.getBoards(query, {});
+            let allBoards = document.getElementsByClassName("js-board");
+            let currBoard;
+            if (filteredBoards.length > 0) {
+              let currBoardId;
+              let found;
+              for (let i = 0; i < allBoards.length; i++) {
+                currBoard = allBoards[i];
+                currBoardId = currBoard.classList[0];
+                found = filteredBoards.find(function (board) {
+                  return board._id == currBoardId;
+                });
+
+                if (found !== undefined)
+                  currBoard.style.display = "block";
+                else
+                  currBoard.style.display = "none";
+              }
+            }
+            else {
+              for (let i = 0; i < allBoards.length; i++) {
+                currBoard = allBoards[i];
+                currBoard.style.display = "none";
+              }
+            }
+          }
+        },
       },
     ];
   },

client/components/boards/boardsList.styl

@@ -1,228 +0,0 @@
-@import 'nib'
-
-$spaceBetweenTiles = 16px
-
-.board-list
-  margin: 0 ($spaceBetweenTiles/2)
-
-  li
-    float: left
-    width: 20%
-    box-sizing: border-box
-    position: relative
-
-    &.placeholder:after
-      content: '';
-      display: block;
-      background: darken(white, 20%)
-      border-radius: 3px;
-      height: 106px;
-      margin: 8px;
-
-    &.ui-sortable-helper
-      cursor: grabbing
-      transform: rotate(4deg)
-      display: block !important
-
-    &.starred
-      .fa-star,
-      .fa-star-o
-        opacity: 1
-
-  .board-list-item
-    overflow: hidden;
-    background-color: #999
-    color: #f6f6f6
-    min-height: 100px
-    font-size: 16px
-    line-height: 22px
-    border-radius: 3px
-    display: block
-    font-weight: 700
-    padding: 8px
-    margin: ($spaceBetweenTiles/2)
-    position: relative
-    text-decoration: none
-    word-wrap: break-word
-
-    &.tile
-      background-size: auto
-      background-repeat: repeat
-
-  .board-list-item-sub-name
-    color: rgba(255, 255, 255, .5)
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 22px
-
-  .board-list-item-desc
-    color: #fff
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 18px
-
-  .js-add-board
-    text-align:center
-
-    .label
-      font-weight: normal
-      line-height: 56px
-
-    :hover
-      background-color:#939393
-
-  .fa-star,
-  .fa-star-o
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    padding: 9px 9px
-    position: absolute
-    right: 0
-    top: 0
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-circle
-    bottom: 0;
-    font-size: 10px;
-    height: 10px;
-    line-height: 10px;
-    padding: 9px 9px;
-    position: absolute;
-    right: 0;
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .has-overtime-card-active
-    color: #eb4646 !important
-
-  .no-overtime-card-active
-    color: #3cb500 !important
-
-  .is-star-active
-    color: white
-
-  .fa-clone
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    right: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-archive
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    left: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  li:hover a
-    &:hover
-      .fa-star,
-      .fa-clone,
-      .fa-archive,
-      .fa-star-o
-        color: white
-
-    .fa-star,
-    .fa-clone,
-    .fa-archive,
-    .fa-star-o
-      color: white
-      opacity: .75
-
-      &:hover
-        font-size: 18px
-        opacity: 1
-
-      &.is-star-active
-        opacity: 1
-
-.board-backgrounds-list
-
-  .board-background-select
-    box-sizing: border-box
-    display: block
-    float: left
-    width: 50%
-    padding-top: 12px
-    position: relative
-    z-index: 1
-
-    &:nth-child(-n + 2)
-      padding-top: 0
-
-    &:nth-child(2n)
-      padding-left: 6px
-
-    &:nth-child(2n+1)
-      padding-right: 6px
-
-    .background-box
-      color: white
-      border-radius: 3px
-      background-size: cover
-      display: block
-      height: 74px
-      position: relative
-      width: 100%
-      cursor: pointer
-      display: flex
-      align-items: center
-      justify-content: center
-
-      i.fa-check
-        font-size: 25px
-        color: white
-
-@media screen and (max-width: 800px)
-  .board-list
-    height: 100%
-    overflow: scroll
-
-    li
-      width: 50%
-
-    .board-list-item
-      overflow: hidden
-      height: 8rem
-
-    .board-list-item-sub-name
-      position: relative
-      top: -100px
-      left: -100px
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-@media screen and (max-width: 360px)
-    li
-      width: 100%
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px

client/components/cards/attachments.css

@@ -0,0 +1,202 @@
+.hidden {
+  display: none;
+}
+.attachment-upload {
+  text-align: center;
+  font-weight: bold;
+}
+.attachment-gallery {
+  display: flex;
+  flex-direction: column;
+}
+.attachment-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 16px;
+}
+.attachment-item:hover {
+  background: #e0e0e0;
+}
+.attachment-thumbnail-container {
+  display: block;
+  width: 150px;
+  min-width: 150px;
+  max-height: 150px;
+  padding-right: 16px;
+}
+.attachment-thumbnail {
+  max-width: 150px;
+  max-height: 150px;
+  min-height: 2em;
+  cursor: pointer;
+}
+.attachment-thumbnail-text {
+  min-height: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2em;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.attachment-details-container {
+  display: block;
+  flex-grow: 1;
+}
+.attachment-details {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 25px; /* Make sure the icons are not to far to the right */
+}
+.attachment-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.add-attachment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #555;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 16px;
+}
+.icon {
+  font-size: 1.5em;
+  cursor: pointer;
+  margin-left: 10px;
+}
+.icon:hover {
+  color: #666;
+}
+#viewer-overlay {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999 !important;
+  background: rgba(13, 13, 13, 0.95);
+}
+#viewer-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
+}
+#viewer-top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px;
+}
+#attachment-name {
+  color: white;
+  font-size: 1.5em;
+  max-width: calc(
+    100% - 50px
+  ); /* Make sure the name does not overlap the close button */
+}
+#viewer-close {
+  color: white;
+  cursor: pointer;
+  font-size: 4em;
+  top: 0;
+  right: 8px;
+  position: absolute;
+}
+.attachment-arrow {
+  font-size: 4em;
+  color: white;
+  cursor: pointer;
+  align-self: center;
+  margin: 0 20px;
+}
+#viewer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 50px);
+}
+#image-viewer {
+  background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
+    20px 20px; /* Checkerboard background for transparent images */
+  max-width: 100%;
+  max-height: 100%;
+}
+#pdf-viewer {
+  width: 40vw;
+  height: 100%;
+}
+#txt-viewer {
+  background-color: white;
+  width: 40vw;
+  height: 100%;
+}
+.pdf-preview-error {
+  margin-top: 20vh;
+  display: block;
+  font-size: 2em;
+  color: white;
+}
+
+@media screen and (max-width: 1600px) {
+  #pdf-viewer {
+    width: 60vw;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  #viewer-container {
+    display: block;
+  }
+  .attachment-arrow {
+    position: absolute;
+    bottom: 2.2em;
+    font-size: 1.6em;
+    padding: 16px;
+  }
+  #prev-attachment {
+    left: 0;
+  }
+  #next-attachment {
+    right: 0;
+  }
+  #pdf-viewer {
+    width: 100%;
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
+  }
+  #txt-viewer {
+    width: 100%;
+    height: calc(
+      100vh - 155px
+    ); /* Full height - height of top and bottom bars */
+  }
+  #audio-viewer {
+    margin-top: 20%;
+    width: 100%;
+  }
+  .attachment-thumbnail-container {
+    width: 100px;
+    min-width: 100px;
+  }
+  .attachment-thumbnail {
+    max-width: 100px;
+  }
+  .attachment-details {
+    flex-direction: column;
+    margin-right: 0px;
+  }
+  .attachment-actions {
+    flex-direction: row;
+    margin-top: 10px;
+  }
+}

client/components/cards/attachments.jade

@@ -1,60 +1,143 @@
 template(name="cardAttachmentsPopup")
-  ul.pop-over-list
-    li
-      input.js-attach-file.hide(type="file" name="file" multiple)
-      a.js-computer-upload {{_ 'computer'}}
-    li
-      a.js-upload-clipboard-image {{_ 'clipboard'}}
+  if $gt uploads.length 0
+    .attachment-upload {{_ 'uploading'}}
+      table
+        tr
+          th.upload-file-name-descr {{_ 'name'}}
+          th.upload-progress-descr {{_ 'progress'}}
+          th.upload-remaining-descr {{_ 'remaining_time'}}
+          th.upload-speed-descr {{_ 'speed'}}
+        each upload in uploads
+          tr
+            td.upload-file-name-value {{upload.file.name}}
+            td.upload-progress-value {{upload.progress.get}}%
+            td.upload-remaining-value {{getEstimateTime upload}}
+            td.upload-speed-value {{getEstimateSpeed upload}}
+  else
+    ul.pop-over-list
+      li
+        input.js-attach-file.hide(type="file" name="file" multiple)
+        a.js-computer-upload {{_ 'computer'}}
+      li
+        a.js-upload-clipboard-image {{_ 'clipboard'}}
 
 template(name="previewClipboardImagePopup")
   p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
   img.preview-clipboard-image()
   button.primary.js-upload-pasted-image {{_ 'upload'}}
 
-template(name="previewAttachedImagePopup")
-  img.preview-large-image.js-large-image-clicked(src="{{url}}")
-
 template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
-template(name="attachmentsGalery")
-  .attachments-galery
-    each attachments
-      .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
-          if isUploaded
-            if isImage
-              img.attachment-thumbnail-img(src="{{url}}")
-            else
-              span.attachment-thumbnail-ext= extension
-          else
-            +spinner
-        p.attachment-details
-          = name
-          span.attachment-details-actions
-            a.js-download(href="{{url download=true}}")
-              i.fa.fa-download
-              | {{_ 'download'}}
-            if currentUser.isBoardMember
-              unless currentUser.isCommentOnly
-                unless currentUser.isWorker
-                  if isImage
-                    a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
-                      i.fa.fa-thumb-tack
-                      if($eq ../coverId _id)
-                        | {{_ 'remove-cover'}}
-                      else
-                        | {{_ 'add-cover'}}
-                  if currentUser.isBoardAdmin
-                    a.js-confirm-delete
-                      i.fa.fa-close
-                      | {{_ 'delete'}}
+template(name="attachmentViewer")
+  #viewer-overlay.hidden
+    #viewer-top-bar
+      span#attachment-name
+      a#viewer-close.fa.fa-times-thin
 
-    if currentUser.isBoardMember
-      unless currentUser.isCommentOnly
-        unless currentUser.isWorker
-          //li.attachment-item.add-attachment
-          a.js-add-attachment
-            i.fa.fa-plus
-            | {{_ 'add-attachment' }}
+    #viewer-container
+      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      #viewer-content
+        img#image-viewer.hidden
+        video#video-viewer.hidden(controls="true")
+        audio#audio-viewer.hidden(controls="true")
+        object#pdf-viewer.hidden(type="application/pdf")
+          span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
+        object#txt-viewer.hidden(type="text/plain")
+      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+
+template(name="attachmentGallery")
+
+  .attachment-gallery
+
+    if canModifyCard
+      a.attachment-item.add-attachment.js-add-attachment
+        i.fa.fa-plus.icon
+
+    each attachments
+
+      .attachment-item
+        .attachment-thumbnail-container.open-preview(data-attachment-id="{{_id}}" data-card-id="{{ meta.cardId }}")
+          if link
+            if(isImage)
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}")
+            else if($eq extension 'svg')
+              img.attachment-thumbnail(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")
+            else if($eq extension 'mp3')
+              video.attachment-thumbnail(title="{{sanitize name}}")
+                source(src="{{link}}" type="audio/mpeg")
+            else if($eq extension 'ogg')
+              video.attachment-thumbnail(title="{{sanitize name}}")
+                source(src="{{link}}" type="video/ogg")
+            else if($eq extension 'webm')
+              video.attachment-thumbnail(title="{{sanitize name}}")
+                source(src="{{link}}" type="video/webm")
+            else if($eq extension 'mp4')
+              video.attachment-thumbnail(title="{{sanitize name}}")
+                source(src="{{link}}" type="video/mp4")
+            else
+              span.attachment-thumbnail-text= extension
+
+        .attachment-details-container
+          .attachment-details
+            div
+              b
+                = name
+              span.file-size ({{fileSize size}})
+            .attachment-actions
+              a.js-download(href="{{link}}?download=true", download="{{name}}")
+                i.fa.fa-download.icon(title="{{_ 'download'}}")
+              if currentUser.isBoardMember
+                unless currentUser.isCommentOnly
+                  unless currentUser.isWorker
+                    a.js-rename
+                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
+                    a.js-confirm-delete
+                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
+                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
+
+
+template(name="attachmentActionsPopup")
+  ul.pop-over-list
+    li
+      if isImage
+        a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
+          i.fa.fa-book
+          i.fa.fa-picture-o
+          if isCover
+            | {{_ 'remove-cover'}}
+          else
+            | {{_ 'add-cover'}}
+      if currentUser.isBoardAdmin
+        if isImage
+          a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
+            i.fa.fa-picture-o
+            if isBackgroundImage
+              | {{_ 'remove-background-image'}}
+            else
+              | {{_ 'add-background-image'}}
+        p.attachment-storage
+          | {{versions.original.storage}}
+
+        if $neq versions.original.storage "fs"
+          a.js-move-storage-fs
+            i.fa.fa-arrow-right
+            | {{_ 'attachment-move-storage-fs'}}
+
+        if $neq versions.original.storage "gridfs"
+          if versions.original.storage
+            a.js-move-storage-gridfs
+              i.fa.fa-arrow-right
+              | {{_ 'attachment-move-storage-gridfs'}}
+
+        if $neq versions.original.storage "s3"
+          if versions.original.storage
+            a.js-move-storage-s3
+              i.fa.fa-arrow-right
+              | {{_ 'attachment-move-storage-s3'}}
+
+template(name="attachmentRenamePopup")
+  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}

client/components/cards/attachments.js

@@ -1,109 +1,349 @@
-Template.attachmentsGalery.events({
+import { ReactiveCache } from '/imports/reactiveCache';
+import { ObjectID } from 'bson';
+import DOMPurify from 'dompurify';
+
+const filesize = require('filesize');
+const prettyMilliseconds = require('pretty-ms');
+
+// We store current card ID and the ID of currently opened attachment in a
+// global var. This is used so that we know what's the next attachment to open
+// when the user clicks on the prev/next button in the attachment viewer.
+let cardId = null;
+let openAttachmentId = null;
+
+// Used to store the start and end coordinates of a touch event for attachment swiping
+let touchStartCoords = null;
+let touchEndCoords = null;
+
+// Stores link to the attachment for which attachment actions popup was opened
+attachmentActionsLink = null;
+
+Template.attachmentGallery.events({
+  'click .open-preview'(event) {
+
+    openAttachmentId = $(event.currentTarget).attr("data-attachment-id");
+    cardId = $(event.currentTarget).attr("data-card-id");
+
+    openAttachmentViewer(openAttachmentId);
+  },
   'click .js-add-attachment': Popup.open('cardAttachments'),
-  'click .js-confirm-delete': Popup.afterConfirm(
-    'attachmentDelete',
-    function() {
-      Attachments.remove(this._id);
-      Popup.close();
-    },
-  ),
   // If we let this event bubble, FlowRouter will handle it and empty the page
   // content, see #101.
   'click .js-download'(event) {
     event.stopPropagation();
   },
-  'click .js-add-cover'() {
-    Cards.findOne(this.cardId).setCover(this._id);
+  'click .js-open-attachment-menu': Popup.open('attachmentActions'),
+  'mouseover .js-open-attachment-menu'(event) { // For some reason I cannot combine handlers for "click .js-open-attachment-menu" and "mouseover .js-open-attachment-menu" events so this is a quick workaround.
+    attachmentActionsLink = event.currentTarget.getAttribute("data-attachment-link");
   },
-  'click .js-remove-cover'() {
-    Cards.findOne(this.cardId).unsetCover();
-  },
-  'click .js-preview-image'(event) {
-    Popup.open('previewAttachedImage').call(this, event);
-    // when multiple thumbnails, if click one then another very fast,
-    // we might get a wrong width from previous img.
-    // when popup reused, onRendered() won't be called, so we cannot get there.
-    // here make sure to get correct size when this img fully loaded.
-    const img = $('img.preview-large-image')[0];
-    if (!img) return;
-    const rePosPopup = () => {
-      const w = img.width;
-      const h = img.height;
-      // if the image is too large, we resize & center the popup.
-      if (w > 300) {
-        $('div.pop-over').css({
-          width: w + 20,
-          position: 'absolute',
-          left: (window.innerWidth - w) / 2,
-          top: (window.innerHeight - h) / 2,
-        });
+  'click .js-rename': Popup.open('attachmentRename'),
+  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
+      Attachments.remove(this._id);
+      Popup.back(2);
+  }),
+});
+
+function getNextAttachmentId(currentAttachmentId, offset = 0) {
+    const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
+
+  let i = 0;
+  for (; i < attachments.length; i++) {
+    if (attachments[i]._id === currentAttachmentId) {
+      break;
+    }
+  }
+  return attachments[(i + offset + 1 + attachments.length) % attachments.length]._id;
+}
+
+function getPrevAttachmentId(currentAttachmentId, offset = 0) {
+  const attachments = ReactiveCache.getAttachments({'meta.cardId': cardId});
+
+  let i = 0;
+  for (; i < attachments.length; i++) {
+    if (attachments[i]._id === currentAttachmentId) {
+      break;
+    }
+  }
+  return attachments[(i + offset - 1 + attachments.length) % attachments.length]._id;
+}
+
+function attachmentCanBeOpened(attachment) {
+  return (
+    attachment.isImage ||
+    attachment.isPDF ||
+    attachment.isText ||
+    attachment.isJSON ||
+    attachment.isVideo ||
+    attachment.isAudio
+  );
+}
+
+function openAttachmentViewer(attachmentId) {
+  const attachment = ReactiveCache.getAttachment(attachmentId);
+
+  // Check if we can open the attachment (if we have a viewer for it) and exit if not
+  if (!attachmentCanBeOpened(attachment)) {
+    return;
+  }
+
+  /*
+  Instructions for adding a new viewer:
+    - add a new case to the switch statement below
+    - implement cleanup in the closeAttachmentViewer() function, if necessary
+    - mark attachment type as openable by adding a new condition to the attachmentCanBeOpened function
+  */
+  switch(true){
+    case (attachment.isImage):
+      $("#image-viewer").attr("src", attachment.link());
+      $("#image-viewer").removeClass("hidden");
+      break;
+    case (attachment.isPDF):
+      $("#pdf-viewer").attr("data", attachment.link());
+      $("#pdf-viewer").removeClass("hidden");
+      break;
+    case (attachment.isVideo):
+      // We have to create a new <source> DOM element and append it to the video
+      // element, otherwise the video won't load
+      let videoSource = document.createElement('source');
+      videoSource.setAttribute('src', attachment.link());
+      $("#video-viewer").append(videoSource);
+
+      $("#video-viewer").removeClass("hidden");
+      break;
+    case (attachment.isAudio):
+      // We have to create a new <source> DOM element and append it to the audio
+      // element, otherwise the audio won't load
+      let audioSource = document.createElement('source');
+      audioSource.setAttribute('src', attachment.link());
+      $("#audio-viewer").append(audioSource);
+
+      $("#audio-viewer").removeClass("hidden");
+      break;
+    case (attachment.isText):
+    case (attachment.isJSON):
+      $("#txt-viewer").attr("data", attachment.link());
+      $("#txt-viewer").removeClass("hidden");
+      break;
+  }
+
+  $('#attachment-name').text(attachment.name);
+  $('#viewer-overlay').removeClass('hidden');
+}
+
+function closeAttachmentViewer() {
+  $("#viewer-overlay").addClass("hidden");
+
+  // We need to reset the viewers to avoid showing previous attachments
+  $("#image-viewer").attr("src", "");
+  $("#image-viewer").addClass("hidden");
+
+  $("#pdf-viewer").attr("data", "");
+  $("#pdf-viewer").addClass("hidden");
+
+  $("#txt-viewer").attr("data", "");
+  $("#txt-viewer").addClass("hidden");
+
+  $("#video-viewer").get(0).pause(); // Stop playback
+  $("#video-viewer").get(0).currentTime = 0;
+  $("#video-viewer").empty();
+  $("#video-viewer").addClass("hidden");
+
+  $("#audio-viewer").get(0).pause(); // Stop playback
+  $("#audio-viewer").get(0).currentTime = 0;
+  $("#audio-viewer").empty();
+  $("#audio-viewer").addClass("hidden");
+}
+
+function openNextAttachment() {
+  closeAttachmentViewer();
+
+    let i = 0;
+    // Find an attachment that can be opened
+    while (true) {
+      const id = getNextAttachmentId(openAttachmentId, i);
+      const attachment = ReactiveCache.getAttachment(id);
+      if (attachmentCanBeOpened(attachment)) {
+        openAttachmentId = id;
+        openAttachmentViewer(id);
+        break;
       }
-    };
-    const url = $(event.currentTarget).attr('src');
-    if (img.src === url && img.complete) rePosPopup();
-    else img.onload = rePosPopup;
+      i++;
+    }
+}
+
+function openPrevAttachment() {
+  closeAttachmentViewer();
+
+    let i = 0;
+    // Find an attachment that can be opened
+    while (true) {
+      const id = getPrevAttachmentId(openAttachmentId, i);
+      const attachment = ReactiveCache.getAttachment(id);
+      if (attachmentCanBeOpened(attachment)) {
+        openAttachmentId = id;
+        openAttachmentViewer(id);
+        break;
+      }
+      i--;
+    }
+}
+
+function processTouch(){
+
+  xDist = touchEndCoords.x - touchStartCoords.x;
+  yDist = touchEndCoords.y - touchStartCoords.y;
+
+  console.log("xDist: " + xDist);
+
+  // Left swipe
+  if (Math.abs(xDist) > Math.abs(yDist) && xDist < 0) {
+    openNextAttachment();
+  }
+
+  // Right swipe
+  if (Math.abs(xDist) > Math.abs(yDist) && xDist > 0) {
+    openPrevAttachment();
+  }
+
+  // Up swipe
+  if (Math.abs(yDist) > Math.abs(xDist) && yDist < 0) {
+    closeAttachmentViewer();
+  }
+
+}
+
+Template.attachmentViewer.events({
+  'touchstart #viewer-container'(event) {
+    console.log("touchstart")
+    touchStartCoords = {
+      x: event.changedTouches[0].screenX,
+      y: event.changedTouches[0].screenY
+    }
+  },
+  'touchend #viewer-container'(event) {
+    console.log("touchend")
+    touchEndCoords = {
+      x: event.changedTouches[0].screenX,
+      y: event.changedTouches[0].screenY
+    }
+    processTouch();
+  },
+  'click #viewer-container'(event) {
+
+    // Make sure the click was on #viewer-container and not on any of its children
+    if(event.target !== event.currentTarget) {
+      event.stopPropagation();
+      return;
+    }
+
+    closeAttachmentViewer();
+  },
+  'click #viewer-content'(event) {
+
+    // Make sure the click was on #viewer-content and not on any of its children
+    if(event.target !== event.currentTarget) {
+      event.stopPropagation();
+      return;
+    }
+
+    closeAttachmentViewer();
+  },
+  'click #viewer-close'() {
+    closeAttachmentViewer();
+  },
+  'click #next-attachment'() {
+    openNextAttachment();
+  },
+  'click #prev-attachment'() {
+    openPrevAttachment();
   },
 });
 
-Template.attachmentsGalery.helpers({
+Template.attachmentGallery.helpers({
   isBoardAdmin() {
-    return Meteor.user().isBoardAdmin();
+    return ReactiveCache.getCurrentUser().isBoardAdmin();
+  },
+  fileSize(size) {
+    const ret = filesize(size);
+    return ret;
+  },
+  sanitize(value) {
+    return DOMPurify.sanitize(value);
   },
 });
 
-Template.previewAttachedImagePopup.events({
-  'click .js-large-image-clicked'() {
-    Popup.close();
+Template.cardAttachmentsPopup.onCreated(function() {
+  this.uploads = new ReactiveVar([]);
+});
+
+Template.cardAttachmentsPopup.helpers({
+  getEstimateTime(upload) {
+    const ret = prettyMilliseconds(upload.estimateTime.get());
+    return ret;
   },
+  getEstimateSpeed(upload) {
+    const ret = filesize(upload.estimateSpeed.get(), {round: 0}) + "/s";
+    return ret;
+  },
+  uploads() {
+    return Template.instance().uploads.get();
+  }
 });
 
 Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event) {
+  'change .js-attach-file'(event, templateInstance) {
     const card = this;
-    const processFile = f => {
-      Utils.processUploadedAttachment(card, f, attachment => {
-        if (attachment && attachment._id && attachment.isImage()) {
-          card.setCover(attachment._id);
-        }
-        Popup.close();
-      });
-    };
+    const files = event.currentTarget.files;
+    if (files) {
+      let uploads = [];
+      for (const file of files) {
+        const fileId = new ObjectID().toString();
+        let fileName = DOMPurify.sanitize(file.name);
 
-    FS.Utility.eachFile(event, f => {
-      if (
-        MAX_IMAGE_PIXEL > 0 &&
-        typeof f.type === 'string' &&
-        f.type.match(/^image/)
-      ) {
-        // is image
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          const dataurl = e && e.target && e.target.result;
-          if (dataurl !== undefined) {
-            Utils.shrinkImage({
-              dataurl,
-              maxSize: MAX_IMAGE_PIXEL,
-              ratio: COMPRESS_RATIO,
-              toBlob: true,
-              callback(blob) {
-                if (blob === false) {
-                  processFile(f);
-                } else {
-                  blob.name = f.name;
-                  processFile(blob);
-                }
-              },
-            });
-          } else {
-            // couldn't process it let other function handle it?
-            processFile(f);
+        // If sanitized filename is not same as original filename,
+        // it could be XSS that is already fixed with sanitize,
+        // or just normal mistake, so it is not a problem.
+        // That is why here is no warning.
+        if (fileName !== file.name) {
+          // If filename is empty, only in that case add some filename
+          if (fileName.length === 0) {
+            fileName = 'Empty-filename-after-sanitize.txt';
           }
+        }
+
+        const config = {
+          file: file,
+          fileId: fileId,
+          fileName: fileName,
+          meta: Utils.getCommonAttachmentMetaFrom(card),
+          chunkSize: 'dynamic',
         };
-        reader.readAsDataURL(f);
-      } else {
-        processFile(f);
+        config.meta.fileId = fileId;
+        const uploader = Attachments.insert(
+          config,
+          false,
+        );
+        uploader.on('start', function() {
+          uploads.push(this);
+          templateInstance.uploads.set(uploads);
+        });
+        uploader.on('uploaded', (error, fileRef) => {
+          if (!error) {
+            if (fileRef.isImage) {
+              card.setCover(fileRef._id);
+            }
+          }
+        });
+        uploader.on('end', (error, fileRef) => {
+          uploads = uploads.filter(_upload => _upload.config.fileId != fileRef._id);
+          templateInstance.uploads.set(uploads);
+          if (uploads.length == 0 ) {
+            Popup.back();
+          }
+        });
+        uploader.start();
       }
-    });
+    }
   },
   'click .js-computer-upload'(event, templateInstance) {
     templateInstance.find('.js-attach-file').click();
@@ -151,30 +391,119 @@ Template.previewClipboardImagePopup.onRendered(() => {
 
 Template.previewClipboardImagePopup.events({
   'click .js-upload-pasted-image'() {
-    const results = pastedResults;
-    if (results && results.file) {
+    const card = this;
+    if (pastedResults && pastedResults.file) {
+      const file = pastedResults.file;
       window.oPasted = pastedResults;
-      const card = this;
-      const file = new FS.File(results.file);
-      if (!results.name) {
-        // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
-        if (typeof results.file.type === 'string') {
-          file.name(results.file.type.replace('image/', 'clipboard.'));
+      const fileId = new ObjectID().toString();
+      const config = {
+        file,
+        fileId: fileId,
+        meta: Utils.getCommonAttachmentMetaFrom(card),
+        fileName: file.name || file.type.replace('image/', 'clipboard.'),
+        chunkSize: 'dynamic',
+      };
+      config.meta.fileId = fileId;
+      const uploader = Attachments.insert(
+        config,
+        false,
+      );
+      uploader.on('uploaded', (error, fileRef) => {
+        if (!error) {
+          if (fileRef.isImage) {
+            card.setCover(fileRef._id);
+          }
         }
-      }
-      file.updatedAt(new Date());
-      file.boardId = card.boardId;
-      file.cardId = card._id;
-      file.userId = Meteor.userId();
-      const attachment = Attachments.insert(file);
-
-      if (attachment && attachment._id && attachment.isImage()) {
-        card.setCover(attachment._id);
-      }
-
-      pastedResults = null;
-      $(document.body).pasteImageReader(() => {});
-      Popup.close();
+      });
+      uploader.on('end', (error, fileRef) => {
+        pastedResults = null;
+        $(document.body).pasteImageReader(() => {});
+        Popup.back();
+      });
+      uploader.start();
     }
   },
 });
+
+BlazeComponent.extendComponent({
+  isCover() {
+    const ret = ReactiveCache.getCard(this.data().meta.cardId).coverId == this.data()._id;
+    return ret;
+  },
+  isBackgroundImage() {
+    //const currentBoard = Utils.getCurrentBoard();
+    //return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
+    return false;
+  },
+  events() {
+    return [
+      {
+        'click .js-add-cover'() {
+          ReactiveCache.getCard(this.data().meta.cardId).setCover(this.data()._id);
+          Popup.back();
+        },
+        'click .js-remove-cover'() {
+          ReactiveCache.getCard(this.data().meta.cardId).unsetCover();
+          Popup.back();
+        },
+        'click .js-add-background-image'() {
+          const currentBoard = Utils.getCurrentBoard();
+          currentBoard.setBackgroundImageURL(attachmentActionsLink);
+          Utils.setBackgroundImage(attachmentActionsLink);
+          Popup.back();
+          event.preventDefault();
+        },
+        'click .js-remove-background-image'() {
+          const currentBoard = Utils.getCurrentBoard();
+          currentBoard.setBackgroundImageURL("");
+          Utils.setBackgroundImage("");
+          Popup.back();
+          Utils.reload();
+          event.preventDefault();
+        },
+        'click .js-move-storage-fs'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
+          Popup.back();
+        },
+        'click .js-move-storage-gridfs'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "gridfs");
+          Popup.back();
+        },
+        'click .js-move-storage-s3'() {
+          Meteor.call('moveAttachmentToStorage', this.data()._id, "s3");
+          Popup.back();
+        },
+      }
+    ]
+  }
+}).register('attachmentActionsPopup');
+
+BlazeComponent.extendComponent({
+  getNameWithoutExtension() {
+    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'keydown input.js-edit-attachment-name'(evt) {
+          // enter = save
+          if (evt.keyCode === 13) {
+            this.find('button[type=submit]').click();
+          }
+        },
+        'click button.js-submit-edit-attachment-name'(event) {
+          // save button pressed
+          event.preventDefault();
+          const name = this.$('.js-edit-attachment-name')[0]
+            .value
+            .trim() + this.data().extensionWithDot;
+          if (name === DOMPurify.sanitize(name)) {
+            Meteor.call('renameAttachment', this.data()._id, name);
+          }
+          Popup.back(2);
+        },
+      }
+    ]
+  }
+}).register('attachmentRenamePopup');

client/components/cards/attachments.styl

@@ -1,85 +0,0 @@
-@import 'nib'
-
-.attachments-galery
-  display: flex
-  flex-wrap: wrap
-
-  .attachment-item
-    width: 33.33% - 2%
-    margin: 10px 1% 0
-    text-align: center
-    border-radius: 3px
-    overflow: hidden
-    background: darken(white, 7%)
-    min-height: 120px
-
-    &:hover
-      background: darken(white, 12%)
-
-    &.add-attachment
-      display: flex
-      align-items: center
-
-      a
-        display: block
-        margin: auto
-
-    .attachment-thumbnail
-      height: 80px
-      display: flex
-      align-items: center
-      justify-content: center
-      position: relative
-
-      .attachment-thumbnail-img
-        max-height: 100%
-        max-width: 100%
-
-      .attachment-thumbnail-ext
-        text-transform: uppercase
-        font-size: 1.6em
-
-    .attachment-details
-      font-size: 0.75em
-      margin: 3px
-
-      .attachment-details-actions a
-        display: block
-
-.attachment-image-preview
-  max-width: 100px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-large-image
-  max-width: 1000px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-clipboard-image
-  width: 280px
-  max-width: 100%;
-  height: 200px
-  display: block
-  border: 1px solid black
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@media screen and (max-width: 800px)
-  .attachments-galery
-    flex-direction
-      row
-    .attachment-item
-      width: 50% - 2%
-
-      .attachment-thumbnail
-        height: 130px
-      .attachment-details
-        font-size: 1.1em
-
-@media screen and (max-width: 360px)
-  .attachments-galery
-    .attachment-item
-      width: 100%
-
-      .attachment-thumbnail
-        height: 200px

client/components/cards/cardCustomFields.jade

@@ -63,7 +63,7 @@ template(name="cardCustomField-checkbox")
 template(name="cardCustomField-currency")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-currency")
-            input(type="text" value=data.value)
+            input(type="text" value=data.value autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
                 a.fa.fa-times-thin.js-close-inlined-form
@@ -79,18 +79,22 @@ template(name="cardCustomField-currency")
 
 template(name="cardCustomField-date")
     if canModifyCard
-        a.js-edit-date(title="{{showTitle}}" class="{{classes}}")
-            if value
-                div.card-date
-                    time(datetime="{{showISODate}}")
-                        | {{showDate}}
-            else
-                | {{_ 'edit'}}
-    else
+      a.js-edit-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
         if value
-            div.card-date
-                time(datetime="{{showISODate}}")
-                    | {{showDate}}
+          div.card-date
+            time(datetime="{{showISODate}}")
+              | {{showDate}}
+              b
+                | {{showWeek}}
+        else
+          | {{_ 'edit'}}
+    else
+      if value
+        div.card-date
+          time(datetime="{{showISODate}}")
+            | {{showDate}}
+            b
+              | {{showWeek}}
 
 template(name="cardCustomField-dropdown")
     if canModifyCard
@@ -119,3 +123,24 @@ template(name="cardCustomField-dropdown")
         if value
             +viewer
                 = selectedItem
+
+template(name="cardCustomField-stringtemplate")
+    if canModifyCard
+        +inlinedForm(classNames="js-card-customfield-stringtemplate")
+            each item in stringtemplateItems.get
+                input.js-card-customfield-stringtemplate-item(type="text" value=item placeholder="")
+            input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
+            .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+        else
+            a.js-open-inlined-form
+                if value
+                    +viewer
+                        = formattedValue
+                else
+                    | {{_ 'edit'}}
+    else
+        if value
+            +viewer
+                = formattedValue

client/components/cards/cardCustomFields.js

@@ -1,6 +1,12 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
+import { DatePicker } from '/client/lib/datepicker';
+import Cards from '/models/cards';
+import { CustomFieldStringTemplate } from '/client/lib/customFields'
+
 Template.cardCustomFieldsPopup.helpers({
   hasCustomField() {
-    const card = Cards.findOne(Session.get('currentCard'));
+    const card = Utils.getCurrentCard();
     const customFieldId = this._id;
     return card.customFieldIndex(customFieldId) > -1;
   },
@@ -8,7 +14,7 @@ Template.cardCustomFieldsPopup.helpers({
 
 Template.cardCustomFieldsPopup.events({
   'click .js-select-field'(event) {
-    const card = Cards.findOne(Session.get('currentCard'));
+    const card = Utils.getCurrentCard();
     const customFieldId = this._id;
     card.toggleCustomField(customFieldId);
     event.preventDefault();
@@ -28,17 +34,9 @@ const CardCustomField = BlazeComponent.extendComponent({
 
   onCreated() {
     const self = this;
-    self.card = Cards.findOne(Session.get('currentCard'));
+    self.card = Utils.getCurrentCard();
     self.customFieldId = this.data()._id;
   },
-
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
 });
 CardCustomField.register('cardCustomField');
 
@@ -146,6 +144,10 @@ CardCustomField.register('cardCustomField');
     });
   }
 
+  showWeek() {
+    return this.date.get().week().toString();
+  }
+
   showDate() {
     // this will start working once mquandalle:moment
     // is updated to at least moment.js 2.10.5
@@ -187,7 +189,7 @@ CardCustomField.register('cardCustomField');
   onCreated() {
     super.onCreated();
     const self = this;
-    self.card = Cards.findOne(Session.get('currentCard'));
+    self.card = Utils.getCurrentCard();
     self.customFieldId = this.data()._id;
     this.data().value && this.date.set(moment(this.data().value));
   }
@@ -234,3 +236,89 @@ CardCustomField.register('cardCustomField');
     ];
   }
 }.register('cardCustomField-dropdown'));
+
+// cardCustomField-stringtemplate
+class CardCustomFieldStringTemplate extends CardCustomField {
+  onCreated() {
+    super.onCreated();
+
+    this.customField = new CustomFieldStringTemplate(this.data().definition);
+
+    this.stringtemplateItems = new ReactiveVar(this.data().value ?? []);
+  }
+
+  formattedValue() {
+    const ret = this.customField.getFormattedValue(this.data().value);
+    return ret;
+  }
+
+  getItems() {
+    return Array.from(this.findAll('input'))
+      .map(input => input.value)
+      .filter(value => !!value.trim());
+  }
+
+  events() {
+    return [
+      {
+        'submit .js-card-customfield-stringtemplate'(event) {
+          event.preventDefault();
+          const items = this.stringtemplateItems.get();
+          this.card.setCustomField(this.customFieldId, items);
+        },
+
+        'keydown .js-card-customfield-stringtemplate-item'(event) {
+          if (event.keyCode === 13) {
+            event.preventDefault();
+
+            if (event.target.value.trim() || event.metaKey || event.ctrlKey) {
+              const inputLast = this.find('input.last');
+
+              let items = this.getItems();
+
+              if (event.target === inputLast) {
+                inputLast.value = '';
+              } else if (event.target.nextSibling === inputLast) {
+                inputLast.focus();
+              } else {
+                event.target.blur();
+
+                const idx = Array.from(this.findAll('input')).indexOf(
+                  event.target,
+                );
+                items.splice(idx + 1, 0, '');
+
+                Tracker.afterFlush(() => {
+                  const element = this.findAll('input')[idx + 1];
+                  element.focus();
+                  element.value = '';
+                });
+              }
+
+              this.stringtemplateItems.set(items);
+            }
+            if (event.metaKey || event.ctrlKey) {
+              this.find('button[type=submit]').click();
+            }
+          }
+        },
+
+        'blur .js-card-customfield-stringtemplate-item'(event) {
+          if (
+            !event.target.value.trim() ||
+            event.target === this.find('input.last')
+          ) {
+            const items = this.getItems();
+            this.stringtemplateItems.set(items);
+            this.find('input.last').value = '';
+          }
+        },
+
+        'click .js-close-inlined-form'(event) {
+          this.stringtemplateItems.set(this.data().value ?? []);
+        },
+      },
+    ];
+  }
+}
+CardCustomFieldStringTemplate.register('cardCustomField-stringtemplate');

client/components/cards/cardDate.css

@@ -0,0 +1,67 @@
+.card-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  background-color: #dbdbdb;
+}
+.card-date:hover,
+.card-date.is-active {
+  background-color: #b3b3b3;
+}
+.card-date.current,
+.card-date.almost-due,
+.card-date.due,
+.card-date.long-overdue {
+  color: #fff;
+}
+.card-date.current {
+  background-color: #5ba639;
+}
+.card-date.current:hover,
+.card-date.current.is-active {
+  background-color: #46802c;
+}
+.card-date.almost-due {
+  background-color: #edc909;
+}
+.card-date.almost-due:hover,
+.card-date.almost-due.is-active {
+  background-color: #bc9f07;
+}
+.card-date.due {
+  background-color: #fa3f00;
+}
+.card-date.due:hover,
+.card-date.due.is-active {
+  background-color: #c73200;
+}
+.card-date.long-overdue {
+  background-color: #fd5d47;
+}
+.card-date.long-overdue:hover,
+.card-date.long-overdue.is-active {
+  background-color: #fd3e24;
+}
+.card-date.end-date time::before {
+  content: "\f253";
+}
+.card-date.due-date time::before {
+  content: "\f090";
+}
+.card-date.start-date time::before {
+  content: "\f251";
+}
+.card-date.received-date time::before {
+  content: "\f08b";
+}
+.card-date time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  margin-right: 0.3em;
+}
+.customfield-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+}

client/components/cards/cardDate.jade

@@ -1,14 +1,20 @@
 template(name="dateBadge")
   if canModifyCard
-    a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}")
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
+        b
+          | {{showWeek}}
   else
-    a.card-date(title="{{showTitle}}" class="{{classes}}")
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
       time(datetime="{{showISODate}}")
         | {{showDate}}
+        b
+          | {{showWeek}}
 
 template(name="dateCustomField")
-  a(title="{{showTitle}}" class="{{classes}}")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{showWeek}}" class="{{classes}}")
     time(datetime="{{showISODate}}")
       | {{showDate}}
+      b
+        | {{showWeek}}

client/components/cards/cardDate.js

@@ -1,133 +1,6 @@
-// Helper function to replace HH with H for 24 hours format, because H allows also single-digit hours
-function adjustedTimeFormat() {
-  return moment
-    .localeData()
-    .longDateFormat('LT')
-    .replace(/HH/i, 'H');
-}
-
-// Edit received, start, due & end dates
-BlazeComponent.extendComponent({
-  template() {
-    return 'editCardDate';
-  },
-
-  onCreated() {
-    this.error = new ReactiveVar('');
-    this.card = this.data();
-    this.date = new ReactiveVar(moment.invalid());
-  },
-
-  onRendered() {
-    const $picker = this.$('.js-datepicker')
-      .datepicker({
-        todayHighlight: true,
-        todayBtn: 'linked',
-        language: TAPi18n.getLanguage(),
-      })
-      .on(
-        'changeDate',
-        function(evt) {
-          this.find('#date').value = moment(evt.date).format('L');
-          this.error.set('');
-          this.find('#time').focus();
-        }.bind(this),
-      );
-
-    if (this.date.get().isValid()) {
-      $picker.datepicker('update', this.date.get().toDate());
-    }
-  },
-
-  showDate() {
-    if (this.date.get().isValid()) return this.date.get().format('L');
-    return '';
-  },
-  showTime() {
-    if (this.date.get().isValid()) return this.date.get().format('LT');
-    return '';
-  },
-  dateFormat() {
-    return moment.localeData().longDateFormat('L');
-  },
-  timeFormat() {
-    return moment.localeData().longDateFormat('LT');
-  },
-
-  events() {
-    return [
-      {
-        'keyup .js-date-field'() {
-          // parse for localized date format in strict mode
-          const dateMoment = moment(this.find('#date').value, 'L', true);
-          if (dateMoment.isValid()) {
-            this.error.set('');
-            this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
-          }
-        },
-        'keyup .js-time-field'() {
-          // parse for localized time format in strict mode
-          const dateMoment = moment(
-            this.find('#time').value,
-            adjustedTimeFormat(),
-            true,
-          );
-          if (dateMoment.isValid()) {
-            this.error.set('');
-          }
-        },
-        'submit .edit-date'(evt) {
-          evt.preventDefault();
-
-          // if no time was given, init with 12:00
-          const time =
-            evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
-          const newTime = moment(time, adjustedTimeFormat(), true);
-          const newDate = moment(evt.target.date.value, 'L', true);
-          const dateString = `${evt.target.date.value} ${time}`;
-          const newCompleteDate = moment(
-            dateString,
-            'L ' + adjustedTimeFormat(),
-            true,
-          );
-          if (!newTime.isValid()) {
-            this.error.set('invalid-time');
-            evt.target.time.focus();
-          }
-          if (!newDate.isValid()) {
-            this.error.set('invalid-date');
-            evt.target.date.focus();
-          }
-          if (newCompleteDate.isValid()) {
-            this._storeDate(newCompleteDate.toDate());
-            Popup.close();
-          } else {
-            if (!this.error) {
-              this.error.set('invalid');
-            }
-          }
-        },
-        'click .js-delete-date'(evt) {
-          evt.preventDefault();
-          this._deleteDate();
-          Popup.close();
-        },
-      },
-    ];
-  },
-});
-
-Template.dateBadge.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-});
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
+import { DatePicker } from '/client/lib/datepicker';
 
 // editCardReceivedDatePopup
 (class extends DatePicker {
@@ -142,7 +15,7 @@ Template.dateBadge.helpers({
   }
 
   _deleteDate() {
-    this.card.setReceived(null);
+    this.card.unsetReceived();
   }
 }.register('editCardReceivedDatePopup'));
 
@@ -168,7 +41,7 @@ Template.dateBadge.helpers({
   }
 
   _deleteDate() {
-    this.card.setStart(null);
+    this.card.unsetStart();
   }
 }.register('editCardStartDatePopup'));
 
@@ -191,7 +64,7 @@ Template.dateBadge.helpers({
   }
 
   _deleteDate() {
-    this.card.setDue(null);
+    this.card.unsetDue();
   }
 }.register('editCardDueDatePopup'));
 
@@ -214,7 +87,7 @@ Template.dateBadge.helpers({
   }
 
   _deleteDate() {
-    this.card.setEnd(null);
+    this.card.unsetEnd();
   }
 }.register('editCardEndDatePopup'));
 
@@ -233,6 +106,10 @@ const CardDate = BlazeComponent.extendComponent({
     }, 60000);
   },
 
+  showWeek() {
+    return this.date.get().week().toString();
+  },
+
   showDate() {
     // this will start working once mquandalle:moment
     // is updated to at least moment.js 2.10.5
@@ -305,7 +182,7 @@ class CardStartDate extends CardDate {
     // if dueAt or endAt exist & are > startAt, startAt doesn't need to be flagged
     if ((endAt && theDate.isAfter(endAt)) || (dueAt && theDate.isAfter(dueAt)))
       classes += 'long-overdue';
-    else if (theDate.isBefore(now, 'minute')) classes += 'almost-due';
+    else if (theDate.isAfter(now)) classes += '';
     else classes += 'current';
     return classes;
   }
@@ -402,12 +279,25 @@ class CardCustomFieldDate extends CardDate {
     });
   }
 
-  classes() {
-    return 'customfield-date';
+  showWeek() {
+    return this.date.get().week().toString();
+  }
+
+  showDate() {
+    // this will start working once mquandalle:moment
+    // is updated to at least moment.js 2.10.5
+    // until then, the date is displayed in the "L" format
+    return this.date.get().calendar(null, {
+      sameElse: 'llll',
+    });
   }
 
   showTitle() {
-    return '';
+    return `${this.date.get().format('LLLL')}`;
+  }
+
+  classes() {
+    return 'customfield-date';
   }
 
   events() {
@@ -418,31 +308,31 @@ CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardCustomFieldDate'));
 
@@ -459,7 +349,7 @@ class VoteEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('l LT');
+    return this.date.get().format('L LT');
   }
   showTitle() {
     return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
@@ -472,3 +362,30 @@ class VoteEndDate extends CardDate {
   }
 }
 VoteEndDate.register('voteEndDate');
+
+class PokerEndDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().getPokerEnd()));
+    });
+  }
+  classes() {
+    const classes = 'end-date' + ' ';
+    return classes;
+  }
+  showDate() {
+    return this.date.get().format('l LT');
+  }
+  showTitle() {
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editPokerEndDate'),
+    });
+  }
+}
+PokerEndDate.register('pokerEndDate');

client/components/cards/cardDate.styl

@@ -1,63 +0,0 @@
-.card-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  &.current, &.almost-due, &.due, &.long-overdue
-    color: #fff
-
-  &.current
-    background-color: #5ba639
-    &:hover, &.is-active
-      background-color: darken(#5ba639, 10)
-
-  &.almost-due
-    background-color: #edc909
-    &:hover, &.is-active
-      background-color: darken(#edc909, 10)
-
-  &.due
-    background-color: #fa3f00
-    &:hover, &.is-active
-      background-color: darken(#fa3f00, 10)
-
-  &.long-overdue
-    background-color: #fd5d47
-    &:hover, &.is-active
-      background-color: darken(#fd5d47, 7)
-
-  &.end-date
-    time
-      &::before
-        content: "\f253"  // symbol: fa-hourglass-end
-
-  &.due-date
-    time
-      &::before
-        content: "\f090"  // symbol: fa-sign-in
-
-  &.start-date
-    time
-      &::before
-        content: "\f251"  // symbol: fa-hourglass-start
-
-  &.received-date
-    time
-      &::before
-        content: "\f08b"  // symbol: fa-sign-out
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      margin-right: 0.3em
-
-.customfield-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px

client/components/cards/cardDescription.css

@@ -0,0 +1,56 @@
+.new-description {
+  position: relative;
+  margin: 0 0 20px 0;
+}
+.new-description.is-open .helper {
+  display: inline-block;
+}
+.new-description.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-description .too-long {
+  margin-top: 8px;
+}
+.new-description textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-description textarea:hover,
+.new-description textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-description textarea:is-open {
+  cursor: auto;
+}
+.description-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.description-item:hover {
+  background: #e0e0e0;
+}
+.description-item.add-description {
+  display: flex;
+  margin: 5px;
+}
+.description-item.add-description a {
+  display: block;
+  margin: auto;
+}

client/components/cards/cardDescription.js

@@ -3,6 +3,7 @@ const descriptionFormIsOpen = new ReactiveVar(false);
 BlazeComponent.extendComponent({
   onDestroyed() {
     descriptionFormIsOpen.set(false);
+    $('.note-popover').hide();
   },
 
   descriptionFormIsOpen() {
@@ -24,7 +25,10 @@ BlazeComponent.extendComponent({
         // Pressing Ctrl+Enter should submit the form
         'keydown form textarea'(evt) {
           if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-            this.find('button[type=submit]').click();
+            const submitButton = this.find('button[type=submit]');
+            if (submitButton) {
+              submitButton.click();
+            }
           }
         },
       },

client/components/cards/cardDescription.styl

@@ -1,60 +0,0 @@
-@import 'nib'
-
-.new-description
-  position: relative
-  margin: 0 0 20px 0
-
-
-  &.is-open
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    color: #8c8c8c
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.description-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-description
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/cards/cardDetails.css

@@ -0,0 +1,598 @@
+.assignee {
+  border-radius: 3px;
+  display: block;
+  position: relative;
+  float: left;
+  height: 30px;
+  width: 30px;
+  margin: 0 4px 4px 0;
+  cursor: pointer;
+  user-select: none;
+  z-index: 1;
+  text-decoration: none;
+  border-radius: 50%;
+}
+.assignee .avatar {
+  overflow: hidden;
+  border-radius: 50%;
+}
+.assignee .avatar.avatar-assignee-initials {
+  height: 70%;
+  width: 70%;
+  padding: 15%;
+  background-color: #dbdbdb;
+  color: #444;
+  position: absolute;
+}
+.assignee .avatar.avatar-image {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+.assignee .assignee-presence-status {
+  background-color: #b3b3b3;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  height: 7px;
+  width: 7px;
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid #fff;
+  z-index: 15;
+}
+.assignee .assignee-presence-status.active {
+  background: #64c464;
+  border-color: #daf1da;
+}
+.assignee .assignee-presence-status.idle {
+  background: #e4e467;
+  border-color: #f7f7d4;
+}
+.assignee .assignee-presence-status.disconnected {
+  background: #bdbdbd;
+  border-color: #ededed;
+}
+.assignee .assignee-presence-status.pending {
+  background: #e44242;
+  border-color: #f1dada;
+}
+.assignee.add-assignee {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+}
+.assignee.add-assignee:hover,
+.assignee.add-assignee.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.copied-tooltip {
+  display: none;
+  padding: 0px 10px;
+  background-color: rgba(0,0,0,0.875);
+  color: #fff;
+  border-radius: 5px;
+}
+.card-details {
+  padding: 0;
+  flex-shrink: 0;
+  flex-basis: 600px;
+  will-change: flex-basis;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: #f7f7f7;
+  border-radius: bottom 3px;
+  z-index: 30;
+  animation: flexGrowIn 0.1s;
+  box-shadow: 0 0 7px 0 #b3b3b3;
+  transition: flex-basis 0.1s;
+  box-sizing: border-box;
+}
+.card-details .mCustomScrollBox {
+  padding-left: 0;
+}
+.card-details .card-details-canvas {
+  width: auto;
+  padding: 0 20px;
+}
+.card-details .card-details-header {
+  margin: 0 -20px 5px;
+  padding: 7px 20px;
+  background: #ededed;
+  border-bottom: 1px solid #dbdbdb;
+  position: sticky;
+  top: 0px;
+  z-index: 500;
+}
+.card-details .card-details-header .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details,
+.card-details .card-details-header .card-details-menu,
+.card-details .card-details-header .card-copy-button,
+.card-details .card-details-header .card-copy-mobile-button,
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-details-menu-mobile-web,
+.card-details .card-details-header .copied-tooltip {
+  float: right;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details {
+  font-size: 24px;
+  padding: 5px 10px 5px 10px;
+  margin-right: -8px;
+}
+.card-details .card-details-header .close-card-details-mobile-web {
+  font-size: 24px;
+  padding: 5px;
+  margin-right: 40px;
+}
+.card-details .card-details-header .card-copy-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-copy-mobile-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-details-menu {
+  font-size: 17px;
+  padding: 10px;
+}
+.card-details .card-details-header .card-details-menu-mobile-web {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 30px;
+}
+.card-details .card-details-header .card-details-watch {
+  font-size: 17px;
+  padding-left: 7px;
+  color: #a6a6a6;
+}
+.card-details .card-details-header .card-details-title {
+  font-weight: bold;
+  font-size: 1.33em;
+  margin: 7px 0 0;
+  padding: 0;
+}
+.card-details .card-details-header .linked-card-location {
+  font-style: italic;
+  font-size: 1em;
+  margin-bottom: 0;
+}
+.card-details .card-details-header .linked-card-location p {
+  margin-bottom: 0;
+}
+.card-details .card-details-header form.inlined-form {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+.card-details .card-details-header form.inlined-form .copied-tooltip {
+  padding: 0px 10px;
+}
+.card-details .card-details-header .card-details-list {
+  font-size: 0.85em;
+  margin-bottom: 3px;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title {
+  font-weight: bold;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
+  display: inline-block;
+  background: #e6e6e6;
+  border-radius: 3px;
+  padding: 0px 5px;
+}
+.card-details .card-details-header .copied-tooltip {
+  margin-right: 10px;
+  padding: 10px;
+}
+.card-details .card-description i.fa.fa-pencil-square-o {
+  float: right;
+}
+.card-details .card-description textarea {
+  min-height: 100px;
+}
+.card-details .card-details-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+}
+.card-details .card-details-items .card-details-item {
+  margin-right: 0.5em;
+  flex-grow: 1;
+}
+.card-details .card-details-items .card-details-item:last-child {
+  margin-right: 0;
+}
+.card-details .card-details-items .card-details-item.card-details-item-labels {
+  display: block;
+  word-wrap: break-word;
+  max-width: 95%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-members,
+.card-details .card-details-items .card-details-item.card-details-item-assignees,
+.card-details .card-details-items .card-details-item.card-details-item-customfield,
+.card-details .card-details-items .card-details-item.card-details-item-name {
+  display: block;
+  word-wrap: break-word;
+  max-width: 36%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-creator,
+.card-details .card-details-items .card-details-item.card-details-item-received,
+.card-details .card-details-items .card-details-item.card-details-item-start,
+.card-details .card-details-items .card-details-item.card-details-item-due,
+.card-details .card-details-items .card-details-item.card-details-item-end {
+  display: block;
+  word-wrap: break-word;
+  max-width: 28%;
+}
+.card-details .card-details-items .card-details-item.custom-fields {
+  padding-left: 10px;
+}
+.card-details .card-details-item-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #4d4d4d;
+}
+.card-details .activities {
+  padding-top: 10px;
+}
+@media screen and (min-width: 801px) {
+  .card-details {
+    top: 97px;
+    left: calc(50% - (600px / 2));
+    width: 600px;
+    bottom: 0;
+    position: fixed;
+    resize: both;
+  }
+  .card-details-maximized {
+    padding: 0;
+    flex-shrink: 0;
+    flex-basis: calc(100% - 20px);
+    will-change: flex-basis;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    background: #f7f7f7;
+    border-radius: bottom 3px;
+    z-index: 100;
+    animation: flexGrowIn 0.1s;
+    box-shadow: 0 0 7px 0 #b3b3b3;
+    transition: flex-basis 0.1s;
+    box-sizing: border-box;
+    top: 97px;
+    left: 0px;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    float: left;
+  }
+  .card-details-maximized .card-details-left {
+    float: left;
+    top: 60px;
+    left: 20px;
+    width: 47%;
+    border-right: solid 2px #dbdbdb;
+    padding-right: 10px;
+  }
+  .card-details-maximized .card-details-right {
+    position: absolute;
+    float: right;
+    left: 50%;
+    margin: 15px 0;
+  }
+  .card-details-maximized .card-details-header {
+    width: 100%;
+  }
+}
+input[type="text"].attachment-add-link-input {
+  float: left;
+  margin: 0 0 8px;
+  width: 80%;
+}
+input[type="submit"].attachment-add-link-submit {
+  float: left;
+  margin: 0 0 8px 4px;
+  padding: 6px 12px;
+  width: 18%;
+}
+@media screen and (max-width: 800px) {
+  .card-details {
+    width: calc(100% - 1px);
+    padding: 0px 20px 0px 20px;
+    margin: 0px;
+    transition: none;
+    overflow-y: revert;
+    overflow-x: revert;
+  }
+  .card-details .card-details-canvas {
+    width: 100%;
+    padding-left: 0px;
+  }
+  .card-details .card-details-header .close-card-details {
+    margin-right: 0px;
+  }
+  .card-details .card-details-header .card-details-menu {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .maximize-card-details {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .minimize-card-details {
+    margin-right: 40px;
+  }
+  .card-details-popup {
+    padding: 0px 10px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 {
+    width: 100%;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
+    width: calc(100% - 10px);
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
+    margin: 15px 0px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
+    margin: 0;
+  }
+}
+.card-details-white {
+  background: #fff !important;
+  color: #000 !important;
+  border: 1px solid #eee;
+}
+.card-details-green {
+  background: #3cb500 !important;
+  color: #fff !important;
+}
+.card-details-yellow {
+  background: #fad900 !important;
+  color: #000 !important;
+}
+.card-details-orange {
+  background: #ff9f19 !important;
+  color: #000 !important;
+}
+.card-details-red {
+  background: #eb4646 !important;
+  color: #fff !important;
+}
+.card-details-purple {
+  background: #a632db !important;
+  color: #fff !important;
+}
+.card-details-blue {
+  background: #0079bf !important;
+  color: #fff !important;
+}
+.card-details-pink {
+  background: #ff78cb !important;
+  color: #000 !important;
+}
+.card-details-sky {
+  background: #00c2e0 !important;
+  color: #fff !important;
+}
+.card-details-black {
+  background: #4d4d4d !important;
+  color: #fff !important;
+}
+.card-details-lime {
+  background: #51e898 !important;
+  color: #000 !important;
+}
+.card-details-silver {
+  background: #c0c0c0 !important;
+  color: #000 !important;
+}
+.card-details-peachpuff {
+  background: #ffdab9 !important;
+  color: #000 !important;
+}
+.card-details-crimson {
+  background: #dc143c !important;
+  color: #fff !important;
+}
+.card-details-plum {
+  background: #dda0dd !important;
+  color: #000 !important;
+}
+.card-details-darkgreen {
+  background: #006400 !important;
+  color: #fff !important;
+}
+.card-details-slateblue {
+  background: #6a5acd !important;
+  color: #fff !important;
+}
+.card-details-magenta {
+  background: #f0f !important;
+  color: #fff !important;
+}
+.card-details-gold {
+  background: #ffd700 !important;
+  color: #000 !important;
+}
+.card-details-navy {
+  background: #000080 !important;
+  color: #fff !important;
+}
+.card-details-gray {
+  background: #808080 !important;
+  color: #fff !important;
+}
+.card-details-saddlebrown {
+  background: #8b4513 !important;
+  color: #fff !important;
+}
+.card-details-paleturquoise {
+  background: #afeeee !important;
+  color: #000 !important;
+}
+.card-details-mistyrose {
+  background: #ffe4e1 !important;
+  color: #000 !important;
+}
+.card-details-indigo {
+  background: #4b0082 !important;
+  color: #fff !important;
+}
+.voted {
+  opacity: 0.7;
+}
+.vote-title {
+  display: flex;
+  justify-content: space-between;
+}
+.vote-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.vote-result {
+  display: flex;
+}
+.js-show-positive-votes {
+  cursor: pointer;
+}
+.poker-voted {
+  opacity: 0.7;
+}
+.poker-title {
+  display: flex;
+  justify-content: space-between;
+}
+.poker-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.poker-result {
+  display: flex;
+  flex-flow: row wrap;
+}
+.js-show-positive-poker-votes {
+  cursor: pointer;
+}
+.poker-deck {
+  display: grid;
+  flex-direction: column;
+  text-align: center;
+}
+.poker-card-result {
+  width: 32px;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 4px 2px 4px 2px;
+  cursor: default;
+}
+.winner {
+  font-weight: bold;
+  outline: #2d2d2d solid 2px;
+}
+.loser {
+  opacity: 0.5;
+}
+.responsive-table {
+  overflow-x: auto;
+}
+.poker-table {
+  display: table;
+  width: 100%;
+  padding-top: 10px;
+}
+.poker-table-row {
+  display: table-row;
+}
+.poker-table-heading {
+  background-color: #eee;
+  display: table-header-group;
+}
+.poker-table-cell {
+  display: table-cell;
+  padding: 0 0 5px 2px;
+  border-bottom: 1px solid #d2d0d0;
+  text-align: center;
+  min-width: 45px;
+}
+.poker-table-cell-who {
+  width: 150px;
+  vertical-align: middle;
+}
+.poker-table-heading-left,
+.poker-table-heading-right {
+  display: table-header-group;
+  font-weight: bold;
+  border-top: 1px solid #808080;
+}
+@media (max-width: 400px) {
+  .poker-table-heading-right {
+    display: none;
+  }
+}
+.poker-table-body {
+  display: table-row-group;
+}
+.poker-table-side-left,
+.poker-table-side-right {
+  display: inline-block;
+}
+.poker-table-side-right {
+  padding-left: 10px;
+}
+@media (max-width: 400px) {
+  .poker-table-side-right {
+    padding-left: 0px;
+  }
+}
+.estimation-add {
+  display: block;
+  overflow: auto;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.estimation-add input {
+  display: inline-block;
+  float: right;
+  margin: auto;
+  margin-right: 10px;
+  width: 100px;
+}
+.estimation-add button {
+  display: inline-block;
+  float: right;
+  margin: auto;
+}
+.poker-card {
+  width: 48px;
+  height: 72px;
+  float: left;
+  background: #fff;
+  border-radius: 5px;
+  display: table;
+  box-sizing: border-box;
+  padding: 5px;
+  margin: 3px;
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: #2d2d2d 1px 1px 0;
+  box-shadow: 0 0 5px #aaa;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+.poker-card .inner {
+  display: table-cell;
+  vertical-align: middle;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #cecece;
+}

client/components/cards/cardDetails.styl

@@ -1,358 +0,0 @@
-@import 'nib'
-
-// Assignee, code copied from wekan/client/users/userAvatar.styl
-
-avatar-radius = 50%
-
-#cardURL_copy
-  // Have clipboard text not visible by moving it to far left
-  position: absolute
-  left: -2000px
-  top: 0px
-
-#clipboard
-  white-space: normal
-
-.assignee
-  border-radius: 3px
-  display: block
-  position: relative
-  float: left
-  height: 30px
-  width: @height
-  margin: 0 4px 4px 0
-  cursor: pointer
-  user-select: none
-  z-index: 1
-  text-decoration: none
-  border-radius: avatar-radius
-
-  .avatar
-    overflow: hidden
-    border-radius: avatar-radius
-
-    &.avatar-assignee-initials
-      height: 70%
-      width: @height
-      padding: 15%
-      background-color: #dbdbdb
-      color: #444444
-      position: absolute
-
-    &.avatar-image
-      object-fit: cover;
-      object-position: center;
-      height: 100%
-      width: @height
-
-  .assignee-presence-status
-    background-color: #b3b3b3
-    border: 1px solid #fff
-    border-radius: 50%
-    height: 7px
-    width: @height
-    position: absolute
-    right: -1px
-    bottom: -1px
-    border: 1px solid white
-    z-index: 15
-
-    &.active
-      background: #64c464
-      border-color: #daf1da
-
-    &.idle
-      background: #e4e467
-      border-color: #f7f7d4
-
-    &.disconnected
-      background: #bdbdbd
-      border-color: #ededed
-
-    &.pending
-      background: #e44242
-      border-color: #f1dada
-
-
-
-  &.add-assignee
-    display: flex
-    align-items: center
-    justify-content: center
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-// Other card details
-
-.card-details
-  padding: 0
-  flex-shrink: 0
-  flex-basis: 600px
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: hidden
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 20 !important
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
-
-  .mCustomScrollBox
-    padding-left: 0
-
-  .card-details-canvas
-    width: auto
-    padding: 0 20px
-
-  .card-details-header
-    margin: 0 -20px 5px
-    padding 7px 20px
-    background: darken(white, 7%)
-    border-bottom: 1px solid darken(white, 14%)
-
-    .close-card-details,
-    .card-details-menu,
-    .card-copy-button,
-    .card-copy-mobile-button,
-    .close-card-details-mobile-web,
-    .card-details-menu-mobile-web
-      float: right
-
-    .close-card-details
-      font-size: 24px
-      padding: 5px
-      margin-right: -8px
-
-    .close-card-details-mobile-web
-      font-size: 24px
-      padding: 5px
-      margin-right: 40px
-
-    .card-copy-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-copy-mobile-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-details-menu
-      font-size: 17px
-      padding: 10px
-
-    .card-details-menu-mobile-web
-      font-size: 17px
-      padding: 10px
-      margin-right: 30px
-
-    .card-details-watch
-      font-size: 17px
-      padding-left: 7px
-      color: #a6a6a6
-
-    .card-details-title
-      font-weight: bold
-      font-size: 1.33em
-      margin: 7px 0 0
-      padding: 0
-
-    .linked-card-location
-      font-style: italic
-      font-size: 1em
-      margin-bottom: 0
-      & p
-        margin-bottom: 0
-
-    form.inlined-form
-      margin-top: 5px
-      margin-bottom: 10px
-
-    .card-details-list
-      font-size: 0.85em
-      margin-bottom: 3px
-
-      a.card-details-list-title
-        font-weight: bold
-
-        &.is-editable
-          display: inline-block
-          background: darken(white, 10%)
-          border-radius: 3px
-          padding: 0px 5px
-
-  .card-description textarea
-    min-height: 100px
-
-  .card-details-items
-    display: flex
-    flex-wrap: wrap
-    margin: 15px 0
-
-    .card-details-item
-      margin-right: 0.5em
-      &:last-child
-        margin-right: 0
-      &.card-details-item-labels
-        display: block
-        word-wrap: break-word
-        max-width: 95%
-        flex-grow: 1
-      &.card-details-item-members,
-      &.card-details-item-assignees,
-      &.card-details-item-customfield,
-      &.card-details-item-name
-        display: block
-        word-wrap: break-word
-        max-width: 36%
-        flex-grow: 1
-      &.card-details-item-received,
-      &.card-details-item-start,
-      &.card-details-item-due,
-      &.card-details-item-end
-        display: block
-        word-wrap: break-word
-        max-width: 28%
-        flex-grow: 1
-
-  .card-details-item-title
-    font-size: 16px
-    font-weight: bold
-    color: #4d4d4d
-
-  .card-label
-    padding-top: 5px
-    padding-bottom: 5px
-
-  .activities
-    padding-top: 10px
-
-input[type="text"].attachment-add-link-input
-  float: left
-  margin: 0 0 8px
-  width: 80%
-
-input[type="submit"].attachment-add-link-submit
-  float: left
-  margin: 0 0 8px 4px
-  padding: 6px 12px
-  width: 18%
-
-@media screen and (max-width: 800px)
-  .card-details
-    width: calc(100% - 1px)
-    padding: 0px 20px 0px 20px
-    margin: 0px
-    transition: none
-
-    .card-details-canvas
-      width: 100%
-      padding-left: 0px
-
-    .card-details-header
-      .close-card-details
-        margin-right: 0px
-
-      .card-details-menu
-        margin-right: 10px
-
-card-details-color(background, color...)
-  background: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-
-.card-details-white
-  card-details-color(unset, #000) //Black text for better visibility
-  border: 1px solid #eee
-
-.card-details-green
-  card-details-color(#3cb500, #ffffff) //White text for better visibility
-
-.card-details-yellow
-  card-details-color(#fad900, #000) //Black text for better visibility
-
-.card-details-orange
-  card-details-color(#ff9f19, #000) //Black text for better visibility
-
-.card-details-red
-  card-details-color(#eb4646, #ffffff) //White text for better visibility
-
-.card-details-purple
-  card-details-color(#a632db, #ffffff) //White text for better visibility
-
-.card-details-blue
-  card-details-color(#0079bf, #ffffff) //White text for better visibility
-
-.card-details-pink
-  card-details-color(#ff78cb, #000) //Black text for better visibility
-
-.card-details-sky
-  card-details-color(#00c2e0, #ffffff) //White text for better visibility
-
-.card-details-black
-  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.card-details-lime
-  card-details-color(#51e898, #000) //Black text for better visibility
-
-.card-details-silver
-  card-details-color(#c0c0c0, #000) //Black text for better visibility
-
-.card-details-peachpuff
-  card-details-color(#ffdab9, #000) //Black text for better visibility
-
-.card-details-crimson
-  card-details-color(#dc143c, #ffffff) //White text for better visibility
-
-.card-details-plum
-  card-details-color(#dda0dd, #000) //Black text for better visibility
-
-.card-details-darkgreen
-  card-details-color(#006400, #ffffff) //White text for better visibility
-
-.card-details-slateblue
-  card-details-color(#6a5acd, #ffffff) //White text for better visibility
-
-.card-details-magenta
-  card-details-color(#ff00ff, #ffffff) //White text for better visibility
-
-.card-details-gold
-  card-details-color(#ffd700, #000) //Black text for better visibility
-
-.card-details-navy
-  card-details-color(#000080, #ffffff) //White text for better visibility
-
-.card-details-gray
-  card-details-color(#808080, #ffffff) //White text for better visibility
-
-.card-details-saddlebrown
-  card-details-color(#8b4513, #ffffff) //White text for better visibility
-
-.card-details-paleturquoise
-  card-details-color(#afeeee, #000) //Black text for better visibility
-
-.card-details-mistyrose
-  card-details-color(#ffe4e1, #000) //Black text for better visibility
-
-.card-details-indigo
-  card-details-color(#4b0082, #ffffff) //White text for better visibility
-
-.voted
-  opacity: .7
-.vote-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.vote-result
-  display: flex
-.js-show-positive-votes
-  cursor: pointer

client/components/cards/cardTime.css

@@ -0,0 +1,18 @@
+.card-time {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  color: #fff;
+  background-color: #dbdbdb;
+}
+.card-time:hover,
+.card-time.is-active {
+  background-color: #b3b3b3;
+}
+.card-time time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  content: "\f017";
+  margin-right: 0.3em;
+}

client/components/cards/cardTime.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 BlazeComponent.extendComponent({
   template() {
     return 'editCardSpentTime';
@@ -9,7 +11,6 @@ BlazeComponent.extendComponent({
   toggleOvertime() {
     this.card.setIsOvertime(!this.card.getIsOvertime());
     $('#overtime .materialCheckBox').toggleClass('is-checked');
-
     $('#overtime').toggleClass('is-checked');
   },
   storeTime(spentTime, isOvertime) {
@@ -18,6 +19,7 @@ BlazeComponent.extendComponent({
   },
   deleteTime() {
     this.card.setSpentTime(null);
+    this.card.setIsOvertime(false);
   },
   events() {
     return [
@@ -27,11 +29,14 @@ BlazeComponent.extendComponent({
           evt.preventDefault();
 
           const spentTime = parseFloat(evt.target.time.value);
-          const isOvertime = this.card.getIsOvertime();
-
+          //const isOvertime = this.card.getIsOvertime();
+          let isOvertime = false;
+          if ($('#overtime').attr('class').indexOf('is-checked') >= 0) {
+            isOvertime = true;
+          }
           if (spentTime >= 0) {
             this.storeTime(spentTime, isOvertime);
-            Popup.close();
+            Popup.back();
           } else {
             this.error.set('invalid-time');
             evt.target.time.focus();
@@ -40,7 +45,7 @@ BlazeComponent.extendComponent({
         'click .js-delete-time'(evt) {
           evt.preventDefault();
           this.deleteTime();
-          Popup.close();
+          Popup.back();
         },
         'click a.js-toggle-overtime': this.toggleOvertime,
       },
@@ -78,13 +83,3 @@ BlazeComponent.extendComponent({
     ];
   },
 }).register('cardSpentTime');
-
-Template.timeBadge.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly()
-    );
-  },
-});

client/components/cards/cardTime.styl

@@ -1,17 +0,0 @@
-.card-time
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-  color: #fff
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      content: "\f017"  // clock symbol
-      margin-right: 0.3em

client/components/cards/checklists.css

@@ -0,0 +1,204 @@
+.js-add-checklist {
+  color: #8c8c8c;
+}
+textarea.js-add-checklist-item,
+textarea.js-edit-checklist-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.card-details .text-show-at-minicard {
+  width: 350px;
+  text-align: left;
+}
+.minicard .text-show-at-minicard {
+  display: none;
+}
+.text-some-space {
+  width: 20px;
+}
+.text-hide-checked-items {
+  width: 400px;
+  text-align: left;
+}
+.delete-text,
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.js-delete-checklist-item:hover,
+.js-convert-checklist-item-to-card:hover {
+  color: inherit;
+}
+.checklists-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+.checklist-progress-bar-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.checklist-progress-bar-container .checklist-progress-text {
+  margin-right: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar {
+  width: 80%;
+  height: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
+  color: #fff !important;
+  background-color: #2196f3 !important;
+  padding: 0.01em 16px;
+  border-radius: 16px;
+  height: 100%;
+}
+.checklist-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.checklist-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.checklist-title .checklist-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.checklist-title .checklist-stat.is-finished {
+  color: #3cb500;
+}
+.checklist-title span.fa.checklist-handle {
+  padding-right: 20px;
+  padding-top: 3px;
+  float: left;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.checklist {
+  background: #f7f7f7;
+}
+.checklist.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+  opacity: 1;
+  transition: height 0ms 400ms, opacity 400ms 0ms;
+  height: auto;
+  overflow: hidden;
+}
+.checklist-item.is-checked.invisible {
+  opacity: 0;
+  height: 0;
+  transition: height 0ms 0ms, opacity 600ms 0ms;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.checklist-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item:hover {
+  background-color: #ebebeb;
+}
+.checklist-item .check-box-container {
+  padding-right: 10px;
+}
+.checklist-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.checklist-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.checklist-item .item-title {
+  flex: 1;
+}
+.checklist-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+  text-decoration: line-through;
+}
+.checklist-item .item-title .viewer p {
+  margin-bottom: 2px;
+  display: block;
+  word-wrap: break-word;
+  max-width: 420px;
+}
+.checklist-item span.fa.checklistitem-handle {
+  padding-top: 2px;
+  padding-right: 10px;
+}
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-checklist-item {
+  margin: 0.2em 0 0.5em 1.33em;
+}
+.add-checklist-item.js-open-inlined-form,
+.add-checklist.js-open-inlined-form {
+  display: block;
+  width: 50%;
+}
+.add-checklist-item.js-open-inlined-form:hover,
+.add-checklist.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.add-checklist-top {
+  /* more space to checklists title */
+  padding-left: 20px;
+  /* + is easier clickable */
+  padding-right: 20px;
+}
+.add-checklist-top.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.card-details-item-title {
+  /* max width for adding checklist at top */
+  width: 100%;
+}
+.checklist-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}
+.edit-controls label.toggle-label {
+  margin-left: 2px;
+}

client/components/cards/checklists.jade

@@ -3,31 +3,23 @@ template(name="checklists")
     h3.card-details-item-title
       i.fa.fa-check
       | {{_ 'checklists'}}
-    if currentUser.isBoardMember
-      .material-toggle-switch
-        span.toggle-switch-title {{_ 'hide-checked-items'}}
-        if hideCheckedItems
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
+      if canModifyCard
+        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
+          +addChecklistItemForm
         else
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
-        label.toggle-label(for="toggleHideCheckedItemsButton")
-
-  if toggleDeleteDialog.get
-    .board-overlay#card-details-overlay
-    +checklistDeleteDialog(checklist = checklistToDelete)
-
+          a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
+            i.fa.fa-plus
 
   .card-checklist-items
-    each checklist in currentCard.checklists
-      +checklistDetail(checklist = checklist)
+    each checklist in checklists
+      +checklistDetail(checklist=checklist)
 
   if canModifyCard
     +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
-      +addChecklistItemForm
+      +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
     else
-      a.js-open-inlined-form
+      a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
         i.fa.fa-plus
-        | {{_ 'add-checklist'}}...
 
 template(name="checklistDetail")
   .js-checklist.checklist
@@ -37,39 +29,45 @@ template(name="checklistDetail")
       .checklist-title
         span
         if canModifyCard
-          a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
 
         if canModifyCard
-          h2.title.js-open-inlined-form.is-editable
-            if isMiniScreenOrShowDesktopDragHandles
+          h4.title.js-open-inlined-form.is-editable
+            if isTouchScreenOrShowDesktopDragHandles
               span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
             +viewer
               = checklist.title
         else
-          h2.title
+          h4.title
             +viewer
                 = checklist.title
+
+    if $gt finishedPercent 0
+      .checklist-progress-bar-container
+        .checklist-progress-text {{finishedPercent}}%
+        .checklist-progress-bar
+          .checklist-progress(style="width:{{finishedPercent}}%")
     +checklistItems(checklist = checklist)
 
-template(name="checklistDeleteDialog")
-  .js-confirm-checklist-delete
-    p
-      i(class="fa fa-exclamation-triangle" aria-hidden="true")
-    p
-      | {{_ 'confirm-checklist-delete-dialog'}}
-      span {{checklist.title}}
-      | ?
-    .js-checklist-delete-buttons
-      button.confirm-checklist-delete(type="button") {{_ 'delete'}}
-      button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
+template(name="checklistDeletePopup")
+  p {{_ 'confirm-checklist-delete-popup'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="addChecklistItemForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
   textarea.js-add-checklist-item(rows='1' autofocus)
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
+    if showNewlineBecomesNewChecklistItem
+      .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
+        input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
+        label.toggle-label(for="toggleNewlineBecomesNewChecklistItem")
 
 template(name="editChecklistItemForm")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
     if $eq type 'item'
       = item.title
@@ -77,12 +75,22 @@ template(name="editChecklistItemForm")
       = checklist.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       a.js-delete-checklist-item {{_ "delete"}}...
+      a.js-convert-checklist-item-to-card
+        i.fa.fa-copy
+        | {{_ 'convertChecklistItemToCardPopup-title'}}
 
 template(name="checklistItems")
+  if checklist.items.length
+    if canModifyCard
+      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist position="top")
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
+      else
+        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
+          i.fa.fa-plus
   .checklist-items.js-checklist-items
     each item in checklist.items
       +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
@@ -91,18 +99,18 @@ template(name="checklistItems")
         +checklistItemDetail(item = item checklist = checklist)
     if canModifyCard
       +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
-        +addChecklistItemForm
+        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
       else
-        a.add-checklist-item.js-open-inlined-form
+        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
           i.fa.fa-plus
-          | {{_ 'add-checklist-item'}}...
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}")
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}"
+    role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isMiniScreenOrShowDesktopDragHandles
+      if isTouchScreenOrShowDesktopDragHandles
         span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
@@ -112,3 +120,68 @@ template(name='checklistItemDetail')
       .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer
           = item.title
+
+template(name="checklistActionsPopup")
+  if currentUser.isBoardMember
+    span.text-show-at-minicard
+      | {{_ 'show-at-minicard'}}
+    .material-toggle-switch(title="{{_ 'show-checklist-at-minicard'}}")
+      if showAtMinicard
+        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton" checked="checked")
+      else
+        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton")
+      label.toggle-label(for="toggleShowChecklistAtMinicardButton")
+    hr
+    span.text-hide-checked-items
+      | {{_ 'hide-checked-items'}}
+    .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
+      //span.toggle-switch-title
+      //.check-square-icon.i.fa.fa-check-square-o
+      if hideCheckedItems
+        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
+      else
+        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
+      label.toggle-label(for="toggleHideCheckedItemsButton")
+    hr
+  ul.pop-over-list
+    li
+      a.js-delete-checklist.delete-checklist
+        i.fa.fa-trash
+        | {{_ "delete"}} ...
+      a.js-move-checklist.move-checklist
+        i.fa.fa-arrow-right
+        | {{_ "moveChecklist"}} ...
+      a.js-copy-checklist.copy-checklist
+        i.fa.fa-copy
+        | {{_ "copyChecklist"}} ...
+
+template(name="copyChecklistPopup")
+  +copyAndMoveChecklist
+
+template(name="moveChecklistPopup")
+  +copyAndMoveChecklist
+
+template(name="copyAndMoveChecklist")
+  unless currentUser.isWorker
+    label {{_ 'boards'}}:
+    select.js-select-boards(autofocus)
+      each boards
+        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each lists
+      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}
+
+  label {{_ 'cards'}}:
+  select.js-select-cards
+    each cards
+      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{title}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

client/components/cards/checklists.js

@@ -1,3 +1,10 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+import Cards from '/models/cards';
+import Boards from '/models/boards';
+import { DialogWithBoardSwimlaneListCard } from '/client/lib/dialogWithBoardSwimlaneListCard';
+
+const subManager = new SubsManager();
 const { calculateIndexData, capitalize } = Utils;
 
 function initSorting(items) {
@@ -9,10 +16,10 @@ function initSorting(items) {
     appendTo: 'parent',
     distance: 7,
     placeholder: 'checklist-item placeholder',
-    scroll: false,
+    scroll: true,
     start(evt, ui) {
       ui.placeholder.height(ui.helper.height());
-      EscapeActions.executeUpTo('popup-close');
+      EscapeActions.clickExecute(evt.target, 'inlinedForm');
     },
     stop(evt, ui) {
       const parent = ui.item.parents('.js-checklist-items');
@@ -43,20 +50,20 @@ BlazeComponent.extendComponent({
     const self = this;
     self.itemsDom = this.$('.js-checklist-items');
     initSorting(self.itemsDom);
-    self.itemsDom.mousedown(function(evt) {
+    self.itemsDom.mousedown(function (evt) {
       evt.stopPropagation();
     });
 
     function userIsMember() {
-      return Meteor.user() && Meteor.user().isBoardMember();
+      return ReactiveCache.getCurrentUser()?.isBoardMember();
     }
 
-    // Disable sorting if the current user is not a board member or is a miniscreen
+    // Disable sorting if the current user is not a board member
     self.autorun(() => {
       const $itemsDom = $(self.itemsDom);
       if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
         $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
           $(self.itemsDom).sortable({
             handle: 'span.fa.checklistitem-handle',
           });
@@ -65,13 +72,10 @@ BlazeComponent.extendComponent({
     });
   },
 
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const ret = this.data().checklist.finishedPercent();
+    return ret;
   },
 }).register('checklistDetail');
 
@@ -81,61 +85,71 @@ BlazeComponent.extendComponent({
     const textarea = this.find('textarea.js-add-checklist-item');
     const title = textarea.value.trim();
     let cardId = this.currentData().cardId;
-    const card = Cards.findOne(cardId);
-    if (card.isLinked()) cardId = card.linkedId;
+    const card = ReactiveCache.getCard(cardId);
+    //if (card.isLinked()) cardId = card.linkedId;
+    if (card.isLinkedCard()) {
+      cardId = card.linkedId;
+    }
+
+    let sortIndex;
+    let checklistItemIndex;
+    if (this.currentData().position === 'top') {
+      sortIndex = Utils.calculateIndexData(null, card.firstChecklist()).base;
+      checklistItemIndex = 0;
+    } else {
+      sortIndex = Utils.calculateIndexData(card.lastChecklist(), null).base;
+      checklistItemIndex = -1;
+    }
 
     if (title) {
       Checklists.insert({
         cardId,
         title,
-        sort: card.checklists().count(),
+        sort: sortIndex,
       });
+      this.closeAllInlinedForms();
       setTimeout(() => {
         this.$('.add-checklist-item')
-          .last()
+          .eq(checklistItemIndex)
           .click();
       }, 100);
     }
-    textarea.value = '';
-    textarea.focus();
   },
-
   addChecklistItem(event) {
     event.preventDefault();
     const textarea = this.find('textarea.js-add-checklist-item');
+    const newlineBecomesNewChecklistItem = this.find('input#toggleNewlineBecomesNewChecklistItem');
     const title = textarea.value.trim();
     const checklist = this.currentData().checklist;
 
     if (title) {
-      ChecklistItems.insert({
-        title,
-        checklistId: checklist._id,
-        cardId: checklist.cardId,
-        sort: Utils.calculateIndexData(checklist.lastItem()).base,
-      });
+      let checklistItems = [title];
+      if (newlineBecomesNewChecklistItem.checked) {
+        checklistItems = title.split('\n').map(_value => _value.trim());
+        if (this.currentData().position === 'top') {
+          checklistItems = checklistItems.reverse();
+        }
+      }
+      for (let checklistItem of checklistItems) {
+        let sortIndex;
+        if (this.currentData().position === 'top') {
+          sortIndex = Utils.calculateIndexData(null, checklist.firstItem()).base;
+        } else {
+          sortIndex = Utils.calculateIndexData(checklist.lastItem(), null).base;
+        }
+        ChecklistItems.insert({
+          title: checklistItem,
+          checklistId: checklist._id,
+          cardId: checklist.cardId,
+          sort: sortIndex,
+        });
+      }
     }
     // We keep the form opened, empty it.
     textarea.value = '';
     textarea.focus();
   },
 
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
-
-  deleteChecklist() {
-    const checklist = this.currentData().checklist;
-    if (checklist && checklist._id) {
-      Checklists.remove(checklist._id);
-      this.toggleDeleteDialog.set(false);
-    }
-  },
-
   deleteItem() {
     const checklist = this.currentData().checklist;
     const item = this.currentData().item;
@@ -161,11 +175,6 @@ BlazeComponent.extendComponent({
     item.setTitle(title);
   },
 
-  onCreated() {
-    this.toggleDeleteDialog = new ReactiveVar(false);
-    this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
-  },
-
   pressKey(event) {
     //If user press enter key inside a form, submit it
     //Unless the user is also holding down the 'shift' key
@@ -186,88 +195,170 @@ BlazeComponent.extendComponent({
     }
   },
 
+  /** closes all inlined forms (checklist and checklist-item input fields) */
+  closeAllInlinedForms() {
+    this.$('.js-close-inlined-form').click();
+  },
+
   events() {
     const events = {
-      'click .toggle-delete-checklist-dialog'(event) {
-        if ($(event.target).hasClass('js-delete-checklist')) {
-          this.checklistToDelete = this.currentData().checklist; //Store data context
-        }
-        this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
-      },
-      'click #toggleHideCheckedItemsButton'() {
-        Meteor.call('toggleHideCheckedItems');
-      },
     };
 
     return [
       {
         ...events,
+        'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
         'submit .js-add-checklist': this.addChecklist,
         'submit .js-edit-checklist-title': this.editChecklist,
         'submit .js-add-checklist-item': this.addChecklistItem,
         'submit .js-edit-checklist-item': this.editChecklistItem,
+        'click .js-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'),
         'click .js-delete-checklist-item': this.deleteItem,
-        'click .confirm-checklist-delete': this.deleteChecklist,
         'focus .js-add-checklist-item': this.focusChecklistItem,
+        // add and delete checklist / checklist-item
+        'click .js-open-inlined-form': this.closeAllInlinedForms,
         keydown: this.pressKey,
       },
     ];
   },
 }).register('checklists');
 
+BlazeComponent.extendComponent({
+  onCreated() {
+    subManager.subscribe('board', Session.get('currentBoard'), false);
+    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
+  },
+
+  boards() {
+    const ret = ReactiveCache.getBoards(
+      {
+        archived: false,
+        'members.userId': Meteor.userId(),
+        _id: { $ne: ReactiveCache.getCurrentUser().getTemplatesBoardId() },
+      },
+      {
+        sort: { sort: 1 /* boards default sorting */ },
+      },
+    );
+    return ret;
+  },
+
+  swimlanes() {
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
+    return board.swimlanes();
+  },
+
+  aBoardLists() {
+    const board = ReactiveCache.getBoard(this.selectedBoardId.get());
+    return board.lists();
+  },
+
+  events() {
+    return [
+      {
+        'change .js-select-boards'(event) {
+          this.selectedBoardId.set($(event.currentTarget).val());
+          subManager.subscribe('board', this.selectedBoardId.get(), false);
+        },
+      },
+    ];
+  },
+}).register('boardsSwimlanesAndLists');
+
 Template.checklists.helpers({
+  checklists() {
+    const card = ReactiveCache.getCard(this.cardId);
+    const ret = card.checklists();
+    return ret;
+  },
+  showAtMinicard() {
+    const card = ReactiveCache.getCard(this.cardId);
+    const ret = card.checklists({'showAtMinicard':1});
+    return ret;
+  },
   hideCheckedItems() {
-    const currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) return currentUser.hasHideCheckedItems();
     return false;
   },
 });
 
-Template.addChecklistItemForm.onRendered(() => {
-  autosize($('textarea.js-add-checklist-item'));
-});
+BlazeComponent.extendComponent({
+  onRendered() {
+    autosize(this.$('textarea.js-add-checklist-item'));
+  },
+  events() {
+    return [
+      {
+        'click a.fa.fa-copy'(event) {
+          const $editor = this.$('textarea');
+          const promise = Utils.copyTextToClipboard($editor[0].value);
 
-Template.editChecklistItemForm.onRendered(() => {
-  autosize($('textarea.js-edit-checklist-item'));
-});
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
+        },
+      }
+    ];
+  }
+}).register('addChecklistItemForm');
 
-Template.checklistDeleteDialog.onCreated(() => {
-  const $cardDetails = this.$('.card-details');
-  this.scrollState = {
-    position: $cardDetails.scrollTop(), //save current scroll position
-    top: false, //required for smooth scroll animation
-  };
-  //Callback's purpose is to only prevent scrolling after animation is complete
-  $cardDetails.animate({ scrollTop: 0 }, 500, () => {
-    this.scrollState.top = true;
-  });
-
-  //Prevent scrolling while dialog is open
-  $cardDetails.on('scroll', () => {
-    if (this.scrollState.top) {
-      //If it's already in position, keep it there. Otherwise let animation scroll
-      $cardDetails.scrollTop(0);
+BlazeComponent.extendComponent({
+  toggleItem() {
+    const checklist = this.currentData().checklist;
+    const item = this.currentData().item;
+    if (checklist && item && item._id) {
+      item.toggleItem();
     }
-  });
-});
+  },
+  events() {
+    return [
+      {
+        'click .js-checklist-item .check-box-container': this.toggleItem,
+        'click #toggleShowChecklistAtMinicardButton'() {
+          const checklist = this.checklist;
+          if (checklist && checklist._id) {
+            Meteor.call('toggleShowChecklistAtMinicard', checklist._id);
+          }
+        },
+        'click #toggleHideCheckedItemsButton'() {
+          Meteor.call('toggleHideCheckedItems');
+        },
+        'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
+          Popup.back(2);
+          const checklist = this.checklist;
+          if (checklist && checklist._id) {
+            Checklists.remove(checklist._id);
+          }
+        }),
+        'click .js-move-checklist': Popup.open('moveChecklist'),
+        'click .js-copy-checklist': Popup.open('copyChecklist'),
+      }
+    ]
+  }
+}).register('checklistActionsPopup');
 
-Template.checklistDeleteDialog.onDestroyed(() => {
-  const $cardDetails = this.$('.card-details');
-  $cardDetails.off('scroll'); //Reactivate scrolling
-  $cardDetails.animate({ scrollTop: this.scrollState.position });
-});
+BlazeComponent.extendComponent({
+  onRendered() {
+    autosize(this.$('textarea.js-edit-checklist-item'));
+  },
+  events() {
+    return [
+      {
+        'click a.fa.fa-copy'(event) {
+          const $editor = this.$('textarea');
+          const promise = Utils.copyTextToClipboard($editor[0].value);
+
+          const $tooltip = this.$('.copied-tooltip');
+          Utils.showCopied(promise, $tooltip);
+        },
+      }
+    ];
+  }
+}).register('editChecklistItemForm');
 
 Template.checklistItemDetail.helpers({
-  canModifyCard() {
-    return (
-      Meteor.user() &&
-      Meteor.user().isBoardMember() &&
-      !Meteor.user().isCommentOnly() &&
-      !Meteor.user().isWorker()
-    );
-  },
   hideCheckedItems() {
-    const user = Meteor.user();
+    const user = ReactiveCache.getCurrentUser();
     if (user) return user.hasHideCheckedItems();
     return false;
   },
@@ -289,3 +380,27 @@ BlazeComponent.extendComponent({
     ];
   },
 }).register('checklistItemDetail');
+
+/** Move Checklist Dialog */
+(class extends DialogWithBoardSwimlaneListCard {
+  getDialogOptions() {
+    const ret = ReactiveCache.getCurrentUser().getMoveChecklistDialogOptions();
+    return ret;
+  }
+  setDone(cardId, options) {
+    ReactiveCache.getCurrentUser().setMoveChecklistDialogOption(this.currentBoardId, options);
+    this.data().checklist.move(cardId);
+  }
+}).register('moveChecklistPopup');
+
+/** Copy Checklist Dialog */
+(class extends DialogWithBoardSwimlaneListCard {
+  getDialogOptions() {
+    const ret = ReactiveCache.getCurrentUser().getCopyChecklistDialogOptions();
+    return ret;
+  }
+  setDone(cardId, options) {
+    ReactiveCache.getCurrentUser().setCopyChecklistDialogOption(this.currentBoardId, options);
+    this.data().checklist.copy(cardId);
+  }
+}).register('copyChecklistPopup');

client/components/cards/checklists.styl

@@ -1,169 +0,0 @@
-.js-add-checklist
-  color: #8c8c8c
-
-textarea.js-add-checklist-item, textarea.js-edit-checklist-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.checklists-title
-  display: flex
-  justify-content: space-between
-
-.checklist-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .checklist-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  .js-delete-checklist
-    @extends .delete-text
-
-  span.fa.checklist-handle
-    padding-right: 20px
-    padding-top: 3px
-    float: left
-
-
-.js-confirm-checklist-delete
-  background-color: darken(white, 3%)
-  position: absolute
-  float: left;
-  width: 60%
-  margin-top: 0
-  margin-left: 13%
-  padding-bottom: 2%
-  padding-left: 3%
-  padding-right: 3%
-  z-index: 17
-  border-radius: 3px
-
-  p
-    position: relative
-    margin-top: 3%
-    width: 100%
-    text-align: center
-    span
-      font-weight: bold
-
-    i
-      font-size: 2em
-
-  .js-checklist-delete-buttons
-    position: relative
-    padding: left 2% right 2%
-    .confirm-checklist-delete
-      margin-left: 12%
-      float: left
-    .toggle-delete-checklist-dialog
-      margin-right: 12%
-      float: right
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.checklist
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.checklist-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-  opacity: 1
-  transition: height 0ms 400ms, opacity 400ms 0ms
-  height: auto
-  overflow: hidden
-
-  &.is-checked.invisible
-    opacity: 0
-    height: 0
-    transition: height 0ms 0ms, opacity 600ms 0ms
-    margin-top: 0
-    margin-bottom: 0
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box-container
-    padding-right: 10px;
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-      text-decoration: line-through
-    & .viewer
-      p
-        margin-bottom: 2px
-        display: block
-        word-wrap: break-word
-        max-width: 420px
-
-  span.fa.checklistitem-handle
-    padding-top: 2px
-    padding-right: 10px;
-
-.js-delete-checklist-item
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-checklist-item
-  margin: 0.2em 0 0.5em 1.33em
-  display: inline-block

client/components/cards/labels.css

@@ -0,0 +1,230 @@
+.card-label {
+  border: 1px solid #000;
+  border-radius: 4px;
+  color: #fff;
+  display: inline-block;
+  font-weight: 700;
+  font-size: 13px;
+  margin-right: 4px;
+  margin-bottom: 5px;
+  padding: 3px 8px;
+  max-width: 210px;
+  min-width: 8px;
+  word-wrap: break-word;
+  min-height: 18px;
+  vertical-align: middle;
+  white-space: initial;
+  overflow: initial;
+}
+.card-label:hover {
+  color: #fff;
+}
+.card-label.square {
+  height: 30px;
+  width: 30px;
+  padding: 0;
+}
+.card-label.add-label {
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+  border: initial;
+}
+.card-label.add-label:hover,
+.card-label.add-label.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.card-label p {
+  margin: 0px;
+}
+.palette-colors {
+  display: flex;
+  flex-wrap: wrap;
+}
+.palette-colors .palette-color {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-label-white {
+  background-color: #fff;
+  color: #000;
+}
+.card-label-white:hover {
+  color: #aaa;
+}
+.card-label-green {
+  background-color: #3cb500;
+}
+.card-label-green:hover {
+  color: #000;
+}
+.card-label-yellow {
+  background-color: #fad900;
+  color: #000;
+}
+.card-label-orange {
+  background-color: #ff9f19;
+  color: #000;
+}
+.card-label-red {
+  background-color: #eb4646;
+}
+.card-label-purple {
+  background-color: #a632db;
+}
+.card-label-blue {
+  background-color: #0079bf;
+}
+.card-label-pink {
+  background-color: #ff78cb;
+  color: #000;
+}
+.card-label-sky {
+  background-color: #00c2e0;
+}
+.card-label-black {
+  background-color: #4d4d4d;
+}
+.card-label-lime {
+  background-color: #51e898;
+  color: #000;
+}
+.card-label-silver {
+  background-color: #c0c0c0;
+  color: #000;
+}
+.card-label-peachpuff {
+  background-color: #ffdab9;
+  color: #000;
+}
+.card-label-crimson {
+  background-color: #dc143c;
+}
+.card-label-plum {
+  background-color: #dda0dd;
+  color: #000;
+}
+.card-label-darkgreen {
+  background-color: #006400;
+}
+.card-label-slateblue {
+  background-color: #6a5acd;
+}
+.card-label-magenta {
+  background-color: #f0f;
+}
+.card-label-gold {
+  background-color: #ffd700;
+  color: #000;
+}
+.card-label-navy {
+  background-color: #000080;
+}
+.card-label-gray {
+  background-color: #808080;
+}
+.card-label-saddlebrown {
+  background-color: #8b4513;
+}
+.card-label-paleturquoise {
+  background-color: #afeeee;
+  color: #000;
+}
+.card-label-mistyrose {
+  background-color: #ffe4e1;
+  color: #000;
+}
+.card-label-indigo {
+  background-color: #4b0082;
+}
+.edit-label .card-label,
+.create-label .card-label {
+  float: left;
+  height: 25px;
+  margin: 0px 3% 7px 0px;
+  width: 10.5%;
+  max-width: 10.5%;
+  cursor: pointer;
+}
+.edit-labels input[type="text"] {
+  margin: 4px 0 6px 38px;
+  width: 243px;
+}
+.edit-labels .card-label {
+  height: 30px;
+  left: 0;
+  padding: 1px 5px;
+  position: absolute;
+  top: 0;
+  width: 24px;
+}
+.edit-labels .labels-static .card-label {
+  line-height: 30px;
+  margin-bottom: 4px;
+  position: relative;
+  top: auto;
+  left: 0;
+  width: 260px;
+}
+.edit-labels-pop-over {
+  margin-bottom: 8px;
+}
+.edit-labels-pop-over .card-label .viewer p {
+  margin: 0;
+}
+.edit-labels-pop-over .shortcut {
+  display: inline-block;
+}
+.card-label-selectable {
+  border-radius: 3px;
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 3px;
+  width: 190px;
+  min-height: 18px;
+  padding: 8px;
+  position: relative;
+  transition: margin-right 0.1s;
+}
+.card-label-selectable .card-label-selectable-icon {
+  position: absolute;
+  top: 8px;
+  right: -20px;
+}
+.card-label-selectable.active:hover,
+.card-label-selectable.active,
+.card-label-selectable.active.selected:hover,
+.card-label-selectable.active.selected {
+  padding-right: 32px;
+}
+.card-label-selectable.active:hover .card-label-selectable-icon,
+.card-label-selectable.active .card-label-selectable-icon,
+.card-label-selectable.active.selected:hover .card-label-selectable-icon,
+.card-label-selectable.active.selected .card-label-selectable-icon {
+  right: 6px;
+}
+.card-label-selectable.selected,
+.card-label-selectable:hover {
+  opacity: 0.8;
+}
+.active .card-label-selectable,
+.active .card-label-selectable:hover {
+  margin-right: 0;
+}
+.active .card-label-selectable .card-label-selectable-icon {
+  right: 8px;
+}
+.card-label-edit-button {
+  border-radius: 3px;
+  float: right;
+  padding: 8px;
+}
+.card-label-edit-button:hover {
+  background: #dbdbdb;
+}
+ul.edit-labels-pop-over span.fa.label-handle {
+  padding-right: 10px;
+}
+ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+  max-width: 180px;
+}

client/components/cards/labels.jade

@@ -27,9 +27,11 @@ template(name="deleteLabelPopup")
 template(name="cardLabelsPopup")
   ul.edit-labels-pop-over
     each board.labels
-      li
+      li.js-card-label-item
         a.card-label-edit-button.fa.fa-pencil.js-edit-label
-        span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
+        if isTouchScreenOrShowDesktopDragHandles
+          span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
+        span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
           class="{{# if isLabelSelected ../_id }}active{{/if}}")
             +viewer
               = name

client/components/cards/labels.js

@@ -1,3 +1,5 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
 let labelColors;
 Meteor.startup(() => {
   labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
@@ -32,22 +34,74 @@ Template.createLabelPopup.helpers({
   // is not already used in the board (although it's not a problem if two
   // labels have the same color).
   defaultColor() {
-    const labels = Boards.findOne(Session.get('currentBoard')).labels;
+    const labels = Utils.getCurrentBoard().labels;
     const usedColors = _.pluck(labels, 'color');
     const availableColors = _.difference(labelColors, usedColors);
     return availableColors.length > 1 ? availableColors[0] : labelColors[0];
   },
 });
 
-Template.cardLabelsPopup.events({
-  'click .js-select-label'(event) {
-    const card = Cards.findOne(Session.get('currentCard'));
-    const labelId = this._id;
-    card.toggleLabel(labelId);
-    event.preventDefault();
+BlazeComponent.extendComponent({
+  onRendered() {
+    const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
+    const $labels = this.$('.edit-labels-pop-over');
+
+    $labels.sortable({
+      connectWith: '.edit-labels-pop-over',
+      tolerance: 'pointer',
+      appendTo: '.edit-labels-pop-over',
+      helper(element, currentItem) {
+        let ret = currentItem.clone();
+        if (currentItem.closest('.popup-container-depth-0').length == 0)
+        { // only set css transform at every sub-popup, not at the main popup
+          const content = currentItem.closest('.content')[0]
+          const offsetLeft = content.offsetLeft;
+          const offsetTop = $('.pop-over > .header').height() * -1;
+          ret.css("transform", `translate(${offsetLeft}px, ${offsetTop}px)`);
+        }
+        return ret;
+      },
+      distance: 7,
+      items: itemsSelector,
+      placeholder: 'card-label-wrapper placeholder',
+      start(evt, ui) {
+        ui.helper.css('z-index', 1000);
+        ui.placeholder.height(ui.helper.height());
+        EscapeActions.clickExecute(evt.target, 'inlinedForm');
+      },
+      stop(evt, ui) {
+        const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
+        const card = Blaze.getData(this);
+        card.board().setNewLabelOrder(newLabelOrderOnlyIds);
+      },
+    });
+
+    // Disable drag-dropping if the current user is not a board member or is comment only
+    this.autorun(() => {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
+        $labels.sortable({
+          handle: '.label-handle',
+        });
+      }
+    });
   },
-  'click .js-edit-label': Popup.open('editLabel'),
-  'click .js-add-label': Popup.open('createLabel'),
+  events() {
+    return [
+      {
+        'click .js-select-label'(event) {
+          const card = this.data();
+          const labelId = this.currentData()._id;
+          card.toggleLabel(labelId);
+          event.preventDefault();
+        },
+        'click .js-edit-label': Popup.open('editLabel'),
+        'click .js-add-label': Popup.open('createLabel'),
+      }
+    ];
+  }
+}).register('cardLabelsPopup');
+
+Template.cardLabelsPopup.events({
 });
 
 Template.formLabel.events({
@@ -66,7 +120,7 @@ Template.createLabelPopup.events({
   // Create the new label
   'submit .create-label'(event, templateInstance) {
     event.preventDefault();
-    const board = Boards.findOne(Session.get('currentBoard'));
+    const board = Utils.getCurrentBoard();
     const name = templateInstance
       .$('#labelName')
       .val()
@@ -78,14 +132,14 @@ Template.createLabelPopup.events({
 });
 
 Template.editLabelPopup.events({
-  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function() {
-    const board = Boards.findOne(Session.get('currentBoard'));
+  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function () {
+    const board = Utils.getCurrentBoard();
     board.removeLabel(this._id);
     Popup.back(2);
   }),
   'submit .edit-label'(event, templateInstance) {
     event.preventDefault();
-    const board = Boards.findOne(Session.get('currentBoard'));
+    const board = Utils.getCurrentBoard();
     const name = templateInstance
       .$('#labelName')
       .val()
@@ -98,6 +152,6 @@ Template.editLabelPopup.events({
 
 Template.cardLabelsPopup.helpers({
   isLabelSelected(cardId) {
-    return _.contains(Cards.findOne(cardId).labelIds, this._id);
+    return _.contains(ReactiveCache.getCard(cardId).labelIds, this._id);
   },
 });

client/components/cards/labels.styl

@@ -1,211 +0,0 @@
-@import 'nib'
-
-// XXX Use .board-widget-labels as a flexbox container
-.card-label
-  border-radius: 4px
-  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
-  display: inline-block
-  font-weight: 700
-  font-size: 13px
-  margin-right: 4px
-  margin-bottom: 5px
-  padding: 3px 8px
-  max-width: 210px
-  min-width: 8px
-  overflow: ellipsis
-  word-wrap: break-word
-  height: 18px
-  vertical-align: bottom
-
-  &:hover
-    color: white
-
-  &.square
-    height: 30px
-    width: @height
-    padding: 0
-
-  &.add-label
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-    i.fa-plus
-      margin-top: 3px
-
-.palette-colors
-  display: flex
-  flex-wrap: wrap
-
-  .palette-color
-    flex-grow: 1
-    display: flex
-    align-items: center
-    justify-content: center
-
-.card-label-green
-  background-color: #3cb500
-
-.card-label-yellow
-  background-color: #fad900
-  color: #000000 //Black text for better visibility
-
-.card-label-orange
-  background-color: #ff9f19
-  color: #000000 //Black text for better visibility
-
-.card-label-red
-  background-color: #eb4646
-
-.card-label-purple
-  background-color: #a632db
-
-.card-label-blue
-  background-color: #0079bf
-
-.card-label-pink
-  background-color: #ff78cb
-  color: #000000 //Black text for better visibility
-
-.card-label-sky
-  background-color: #00c2e0
-
-.card-label-black
-  background-color: #4d4d4d
-
-.card-label-lime
-  background-color: #51e898
-  color: #000000 //Black text for better visibility
-
-.card-label-silver
-  background-color: #c0c0c0
-  color: #000000 //Black text for better visibility
-
-.card-label-peachpuff
-  background-color: #ffdab9
-  color: #000000 //Black text for better visibility
-
-.card-label-crimson
-  background-color: #dc143c
-
-.card-label-plum
-  background-color: #dda0dd
-  color: #000000 //Black text for better visibility
-
-.card-label-darkgreen
-  background-color: #006400
-
-.card-label-slateblue
-  background-color: #6a5acd
-
-.card-label-magenta
-  background-color: #ff00ff
-
-.card-label-gold
-  background-color: #ffd700
-  color: #000000 //Black text for better visibility
-
-.card-label-navy
-  background-color: #000080
-
-.card-label-gray
-  background-color: #808080
-
-.card-label-saddlebrown
-  background-color: #8b4513
-
-.card-label-paleturquoise
-  background-color: #afeeee
-  color: #000000 //Black text for better visibility
-
-.card-label-mistyrose
-  background-color: #ffe4e1
-  color: #000000 //Black text for better visibility
-
-.card-label-indigo
-  background-color: #4b0082
-
-.edit-label,
-.create-label
-  .card-label
-    float: left
-    height: 25px
-    margin: 0px 3% 7px 0px
-    width: 10.5%
-    cursor: pointer
-
-.edit-labels
-  input[type="text"]
-    margin: 4px 0 6px 38px
-    width: 243px
-
-  .card-label
-    height: 30px
-    left: 0
-    padding: 1px 5px
-    position: absolute
-    top: 0
-    width: 24px
-
-  .labels-static .card-label
-    line-height: 30px
-    margin-bottom: 4px
-    position: relative
-    top: auto
-    left: 0
-    width: 260px
-
-.edit-labels-pop-over
-  margin-bottom: 8px
-  .card-label .viewer p
-    margin: 0
-
-.edit-labels-pop-over .shortcut
-  display: inline-block
-
-.card-label-selectable
-  border-radius: 3px
-  cursor: pointer
-  margin: 0
-  margin-bottom: 3px
-  width: 190px
-  min-height: 18px
-  padding: 8px
-  position: relative
-  transition: margin-right .1s
-
-  .card-label-selectable-icon
-    position: absolute
-    top: 8px
-    right: -20px
-
-  &.active:hover,
-  &.active,
-  &.active.selected:hover,
-  &.active.selected
-    padding-right: 32px
-
-    .card-label-selectable-icon
-      right: 6px
-
-  &.selected,
-  &:hover
-    opacity: .8
-
-.active .card-label-selectable
-  &,
-  &:hover
-    margin-right: 0
-
-  .card-label-selectable-icon
-    right: 8px
-
-.card-label-edit-button
-  border-radius: 3px
-  float: right
-  padding: 8px
-
-  &:hover
-    background: #dbdbdb
-

client/components/cards/minicard.css

@@ -0,0 +1,599 @@
+.minicard .checklists-title,
+.minicard .add-checklist,
+.minicard .add-checklist-item,
+.minicard .checklist-details-menu {
+  display: none;
+}
+.minicard .checklist-progress-bar-container {
+  width: 190px; /* TODO: Add adjustable width https://github.com/wekan/wekan/pull/4964 */
+}
+.minicard-wrapper {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+}
+.minicard-wrapper.placeholder {
+  background: #ccc;
+  border-radius: 9px;
+}
+.minicard-wrapper.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.minicard-wrapper.ui-sortable-helper .and-n-other {
+  width: 100%;
+  height: 16px;
+  padding: 4px;
+  background-color: #f2f2f2;
+  text-align: center;
+  border-radius: 3px;
+}
+.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
+  display: none;
+}
+.minicard-wrapper .multi-selection-checkbox + .minicard {
+  margin-left: 8px;
+}
+@media only screen {
+  .minicard {
+    padding: 6px 8px 2px;
+    position: relative;
+    flex: 1;
+    flex-wrap: wrap;
+    background-color: #fff;
+    min-height: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    border-radius: 2px;
+    color: #4d4d4d;
+    overflow: hidden;
+    transition: transform 0.2s, border-radius 0.2s;
+  }
+}
+.minicard-details-menu-with-handle {
+  float: right;
+  font-size: 18px;
+  padding-right: 30px;
+  padding-left: 5px;
+}
+.minicard-details-menu {
+  float: right;
+  font-size: 18px;
+  padding-left: 5px;
+}
+@media print {
+  .minicard-details-menu,
+  .minicard-details-menu-with-handle {
+    display: none;
+  }
+}
+.minicard.linked-board .linked-icon,
+.minicard.linked-card .linked-icon {
+  display: inline-block;
+  margin-right: 11px;
+  vertical-align: baseline;
+  font-size: 0.9em;
+}
+.minicard.linked-board .linked-archived,
+.minicard.linked-card .linked-archived {
+  color: #937760;
+}
+.is-selected .minicard {
+  transform: translateX(11px);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  z-index: 25;
+  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+}
+.minicard:hover:not(.minicard-composer),
+.is-selected .minicard,
+.draggable-hover-card .minicard {
+  background: #f7f7f7;
+}
+.draggable-hover-card .minicard {
+  background: #ededed;
+}
+.minicard .minicard-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 145px;
+  user-select: none;
+  margin: 6px -8px 6px -8px;
+  border-radius: top 2px;
+}
+.minicard .minicard-labels {
+  float: none;
+}
+.minicard .minicard-labels .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.minicard .minicard-labels-no-text {
+  display: flex;
+  flex-wrap: wrap;
+}
+.minicard .minicard-custom-fields {
+  display: block;
+}
+.minicard .minicard-custom-field {
+  display: flex;
+}
+.minicard .minicard-custom-field-item {
+  flex-grow: 1;
+  display: block;
+  word-wrap: break-word;
+  max-width: 100px;
+  margin-right: 4px;
+}
+.minicard .minicard-custom-field-item-fullwidth {
+  flex-grow: 1;
+  display: block;
+  word-wrap: break-word;
+  max-width: 100%;
+  margin-right: 4px;
+}
+/*
+.minicard .checklists-title,
+.minicard .add-checklist,
+.minicard .add-checklist-item,
+.minicard .checklist-details-menu {
+  display: none;
+}
+*/
+.minicard .handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: none;
+}
+@media only screen {
+  .minicard .handle {
+    display: block;
+  }
+}
+.minicard .handle .fa-arrows {
+  font-size: 20px;
+  color: #ccc;
+}
+.minicard .minicard-title .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+@media only screen {
+  .minicard .minicard-title p:last-child {
+    margin-bottom: 0;
+  }
+  .minicard .minicard-title .viewer {
+    display: block;
+    word-wrap: break-word;
+  }
+}
+.minicard .dates {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.minicard .date {
+  margin-right: 3px;
+}
+.minicard .badges {
+  float: left;
+  margin-top: 7px;
+  color: #808080;
+}
+.minicard .badges:empty {
+  display: none;
+}
+.minicard .badges .badge {
+  float: left;
+  margin-right: 11px;
+  margin-bottom: 3px;
+  font-size: 0.9em;
+}
+.minicard .badges .badge.is-finished {
+  background: #3cb500;
+  padding: 0px 3px;
+  border-radius: 3px;
+  color: #fff;
+}
+.minicard .badges .badge:last-of-type {
+  margin-right: 0;
+}
+.minicard .badges .badge .badge-icon,
+.minicard .badges .badge .badge-text {
+  vertical-align: middle;
+}
+.minicard .badges .badge .badge-icon.badge-comment,
+.minicard .badges .badge .badge-text.badge-comment {
+  margin-bottom: 0.1rem;
+}
+.minicard .badges .badge .badge-text {
+  font-size: 0.9em;
+  padding-left: 2px;
+  line-height: 14px;
+}
+.minicard .badges .badge .check-list-text {
+  padding-left: 0px;
+  line-height: 12px;
+}
+.minicard .minicard-members,
+.minicard .minicard-assignees,
+.minicard .minicard-creator {
+  float: right;
+  margin-left: 5px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .member,
+.minicard .minicard-assignees .member,
+.minicard .minicard-creator .member {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .assignee,
+.minicard .minicard-assignees .assignee,
+.minicard .minicard-creator .assignee {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+}
+.minicard .minicard-members + .badges,
+.minicard .minicard-assignees + .badges,
+.minicard .minicard-creator + .badges {
+  margin-top: 5px;
+}
+.minicard .minicard-assignees {
+  border-bottom: 1px solid #f00;
+}
+.minicard .minicard-creator {
+  border-bottom: 1px solid #008000;
+}
+.minicard .minicard-members:empty,
+.minicard .minicard-assignees:empty {
+  display: none;
+}
+.minicard .minicard-description {
+  padding: 6px 0 0 8px;
+  color: #000;
+  background-color: #eee;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.minicard.minicard-composer {
+  margin-bottom: 10px;
+}
+.minicard.minicard-composer textarea.minicard-composer-textarea,
+.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
+  resize: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  max-height: 162px;
+  min-height: 36px;
+  margin-bottom: 20px;
+  overflow-y: auto;
+}
+.parent-prefix {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+.parent-subtext {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+@media screen and (max-width: 800px) {
+  .is-selected .minicard {
+    transform: translateX(0px);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 15;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  }
+}
+/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
+.minicard-green {
+  background-color: #3cb500 !important;
+  color: #fff !important;
+}
+.minicard-green:hover:not(.minicard-composer),
+.is-selected .minicard-green,
+.draggable-hover-card .minicard-green {
+  background: #3ab000;
+}
+.draggable-hover-card .minicard-green {
+  background: #38a800;
+}
+.minicard-yellow {
+  background-color: #fad900 !important;
+}
+.minicard-yellow:hover:not(.minicard-composer),
+.is-selected .minicard-yellow,
+.draggable-hover-card .minicard-yellow {
+  background: #f3d200;
+}
+.draggable-hover-card .minicard-yellow {
+  background: #e9ca00;
+}
+.minicard-orange {
+  background-color: #ff9f19 !important;
+}
+.minicard-orange:hover:not(.minicard-composer),
+.is-selected .minicard-orange,
+.draggable-hover-card .minicard-orange {
+  background: #ff9b11;
+}
+.draggable-hover-card .minicard-orange {
+  background: #ff9705;
+}
+.minicard-red {
+  background-color: #eb4646 !important;
+  color: #fff !important;
+}
+.minicard-red:hover:not(.minicard-composer),
+.is-selected .minicard-red,
+.draggable-hover-card .minicard-red {
+  background: #ea3e3e;
+}
+.draggable-hover-card .minicard-red {
+  background: #e93333;
+}
+.minicard-purple {
+  background-color: #a632db !important;
+  color: #fff !important;
+}
+.minicard-purple:hover:not(.minicard-composer),
+.is-selected .minicard-purple,
+.draggable-hover-card .minicard-purple {
+  background: #a32bda;
+}
+.draggable-hover-card .minicard-purple {
+  background: #9e25d5;
+}
+.minicard-blue {
+  background-color: #0079bf !important;
+  color: #fff !important;
+}
+.minicard-blue:hover:not(.minicard-composer),
+.is-selected .minicard-blue,
+.draggable-hover-card .minicard-blue {
+  background: #0075b9;
+}
+.draggable-hover-card .minicard-blue {
+  background: #0071b2;
+}
+.minicard-pink {
+  background-color: #ff78cb !important;
+}
+.minicard-pink:hover:not(.minicard-composer),
+.is-selected .minicard-pink,
+.draggable-hover-card .minicard-pink {
+  background: #ff6dc7;
+}
+.draggable-hover-card .minicard-pink {
+  background: #ff5ec1;
+}
+.minicard-sky {
+  background-color: #00c2e0 !important;
+  color: #fff !important;
+}
+.minicard-sky:hover:not(.minicard-composer),
+.is-selected .minicard-sky,
+.draggable-hover-card .minicard-sky {
+  background: #00bcd9;
+}
+.draggable-hover-card .minicard-sky {
+  background: #00b4d0;
+}
+.minicard-black {
+  background-color: #4d4d4d !important;
+  color: #fff !important;
+}
+.minicard-black:hover:not(.minicard-composer),
+.is-selected .minicard-black,
+.draggable-hover-card .minicard-black {
+  background: #4b4b4b;
+}
+.draggable-hover-card .minicard-black {
+  background: #484848;
+}
+.minicard-lime {
+  background-color: #51e898 !important;
+}
+.minicard-lime:hover:not(.minicard-composer),
+.is-selected .minicard-lime,
+.draggable-hover-card .minicard-lime {
+  background: #49e793;
+}
+.draggable-hover-card .minicard-lime {
+  background: #3ee58d;
+}
+.minicard-silver {
+  background-color: #c0c0c0 !important;
+}
+.minicard-silver:hover:not(.minicard-composer),
+.is-selected .minicard-silver,
+.draggable-hover-card .minicard-silver {
+  background: #bababa;
+}
+.draggable-hover-card .minicard-silver {
+  background: #b3b3b3;
+}
+.minicard-peachpuff {
+  background-color: #ffdab9 !important;
+}
+.minicard-peachpuff:hover:not(.minicard-composer),
+.is-selected .minicard-peachpuff,
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffd3ac;
+}
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffca9a;
+}
+.minicard-crimson {
+  background-color: #dc143c !important;
+  color: #fff !important;
+}
+.minicard-crimson:hover:not(.minicard-composer),
+.is-selected .minicard-crimson,
+.draggable-hover-card .minicard-crimson {
+  background: #d5133a;
+}
+.draggable-hover-card .minicard-crimson {
+  background: #cd1338;
+}
+.minicard-plum {
+  background-color: #dda0dd !important;
+}
+.minicard-plum:hover:not(.minicard-composer),
+.is-selected .minicard-plum,
+.draggable-hover-card .minicard-plum {
+  background: #da98da;
+}
+.draggable-hover-card .minicard-plum {
+  background: #d68cd6;
+}
+.minicard-darkgreen {
+  background-color: #006400 !important;
+  color: #fff !important;
+}
+.minicard-darkgreen:hover:not(.minicard-composer),
+.is-selected .minicard-darkgreen,
+.draggable-hover-card .minicard-darkgreen {
+  background: #006100;
+}
+.draggable-hover-card .minicard-darkgreen {
+  background: #005d00;
+}
+.minicard-slateblue {
+  background-color: #6a5acd !important;
+  color: #fff !important;
+}
+.minicard-slateblue:hover:not(.minicard-composer),
+.is-selected .minicard-slateblue,
+.draggable-hover-card .minicard-slateblue {
+  background: #6453cb;
+}
+.draggable-hover-card .minicard-slateblue {
+  background: #5c4ac8;
+}
+.minicard-magenta {
+  background-color: #f0f !important;
+  color: #fff !important;
+}
+.minicard-magenta:hover:not(.minicard-composer),
+.is-selected .minicard-magenta,
+.draggable-hover-card .minicard-magenta {
+  background: #f700f7;
+}
+.draggable-hover-card .minicard-magenta {
+  background: #ed00ed;
+}
+.minicard-gold {
+  background-color: #ffd700 !important;
+}
+.minicard-gold:hover:not(.minicard-composer),
+.is-selected .minicard-gold,
+.draggable-hover-card .minicard-gold {
+  background: #f7d100;
+}
+.draggable-hover-card .minicard-gold {
+  background: #edc800;
+}
+.minicard-navy {
+  background-color: #000080 !important;
+  color: #fff !important;
+}
+.minicard-navy:hover:not(.minicard-composer),
+.is-selected .minicard-navy,
+.draggable-hover-card .minicard-navy {
+  background: #00007c;
+}
+.draggable-hover-card .minicard-navy {
+  background: #007;
+}
+.minicard-gray {
+  background-color: #808080 !important;
+  color: #fff !important;
+}
+.minicard-gray:hover:not(.minicard-composer),
+.is-selected .minicard-gray,
+.draggable-hover-card .minicard-gray {
+  background: #7c7c7c;
+}
+.draggable-hover-card .minicard-gray {
+  background: #777;
+}
+.minicard-saddlebrown {
+  background-color: #8b4513 !important;
+  color: #fff !important;
+}
+.minicard-saddlebrown:hover:not(.minicard-composer),
+.is-selected .minicard-saddlebrown,
+.draggable-hover-card .minicard-saddlebrown {
+  background: #874312;
+}
+.draggable-hover-card .minicard-saddlebrown {
+  background: #814012;
+}
+.minicard-paleturquoise {
+  background-color: #afeeee !important;
+}
+.minicard-paleturquoise:hover:not(.minicard-composer),
+.is-selected .minicard-paleturquoise,
+.draggable-hover-card .minicard-paleturquoise {
+  background: #a5ecec;
+}
+.draggable-hover-card .minicard-paleturquoise {
+  background: #97e9e9;
+}
+.minicard-mistyrose {
+  background-color: #ffe4e1 !important;
+}
+.minicard-mistyrose:hover:not(.minicard-composer),
+.is-selected .minicard-mistyrose,
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffd7d3;
+}
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffc6bf;
+}
+.minicard-indigo {
+  background-color: #4b0082 !important;
+  color: #fff !important;
+}
+.minicard-indigo:hover:not(.minicard-composer),
+.is-selected .minicard-indigo,
+.draggable-hover-card .minicard-indigo {
+  background: #49007e;
+}
+.draggable-hover-card .minicard-indigo {
+  background: #460079;
+}
+.text-red {
+  color: #f00;
+}
+.text-green {
+  color: #008000;
+}

client/components/cards/minicard.jade

@@ -2,49 +2,14 @@ template(name="minicard")
   .minicard(
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
-    class="minicard-{{colorClass}}")
-    if isMiniScreen
-      .handle
-        .fa.fa-arrows
-    unless isMiniScreen
-      if showDesktopDragHandles
+    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
+    if canModifyCard
+      if isTouchScreenOrShowDesktopDragHandles
+        a.fa.fa-navicon.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
         .handle
           .fa.fa-arrows
-    if cover
-      .minicard-cover(style="background-image: url('{{cover.url}}');")
-    if labels
-      .minicard-labels
-        each labels
-          unless hiddenMinicardLabelText
-            span.card-label(class="card-label-{{color}}" title=name)
-              +viewer
-                = name
-          if hiddenMinicardLabelText
-            .minicard-label(class="card-label-{{color}}" title="{{name}}")
-    .minicard-title
-      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentString ' > ' }}
-      if $eq 'prefix-with-parent' currentBoard.presentParentTask
-        .parent-prefix
-          | {{ parentCardName }}
-      if isLinkedBoard
-        a.js-linked-link
-          span.linked-icon.fa.fa-folder
-      else if isLinkedCard
-        a.js-linked-link
-          span.linked-icon.fa.fa-id-card
-      if getArchived
-        span.linked-icon.linked-archived.fa.fa-archive
-      +viewer
-        = getTitle
-      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentString ' > ' }}
-      if $eq 'subtext-with-parent' currentBoard.presentParentTask
-        .parent-subtext
-          | {{ parentCardName }}
-
+      else
+        a.fa.fa-navicon.minicard-details-menu.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
     .dates
       if getReceived
         unless getStart
@@ -63,62 +28,206 @@ template(name="minicard")
       if getSpentTime
         .date
           +cardSpentTime
+    if cover
+      if currentBoard.allowsCoverAttachmentOnMinicard
+        .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")
+    .minicard-title
+      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
+        .parent-prefix
+          | {{ parentString ' > ' }}
+      if $eq 'prefix-with-parent' currentBoard.presentParentTask
+        .parent-prefix
+          | {{ parentCardName }}
+      if isLinkedBoard
+        a.js-linked-link
+          span.linked-icon.fa.fa-folder
+      else if isLinkedCard
+        a.js-linked-link
+          span.linked-icon.fa.fa-id-card
+      if getArchived
+        span.linked-icon.linked-archived.fa.fa-archive
+      +viewer
+        if currentBoard.allowsCardNumber
+          span.card-number
+            | ##{getCardNumber}
+        = getTitle
+      if $eq 'subtext-with-full-path' currentBoard.presentParentTask
+        .parent-subtext
+          | {{ parentString ' > ' }}
+      if $eq 'subtext-with-parent' currentBoard.presentParentTask
+        .parent-subtext
+          | {{ parentCardName }}
+    if labels
+      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
+        each labels
+          unless hiddenMinicardLabelText
+            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
+              +viewer
+                = name
+          if hiddenMinicardLabelText
+            .minicard-label(class="card-label-{{color}}" title="{{name}}")
 
     .minicard-custom-fields
       each customFieldsWD
         if definition.showOnCard
           if trueValue
             .minicard-custom-field
+              // If there is custom field label, show label at left,
+              // and value at right
               if definition.showLabelOnMiniCard
                 .minicard-custom-field-item
                   +viewer
                     = definition.name
-              .minicard-custom-field-item
-                if $eq definition.type "currency"
-                  +viewer
-                    = formattedCurrencyCustomFieldValue(definition)
-                else if $eq definition.type "date"
-                  .date
-                    +minicardCustomFieldDate
-                else if $eq definition.type "checkbox"
-                  .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
-                else
-                  +viewer
-                    = trueValue
+                .minicard-custom-field-item
+                  if $eq definition.type "currency"
+                    +viewer
+                      = formattedCurrencyCustomFieldValue(definition)
+                  else if $eq definition.type "date"
+                    .date
+                      +minicardCustomFieldDate
+                  else if $eq definition.type "checkbox"
+                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                  else if $eq definition.type "stringtemplate"
+                    +viewer
+                      = formattedStringtemplateCustomFieldValue(definition)
+                  else
+                    +viewer
+                      = trueValue
+              else
+                // If there is no custom field label,
+                // show value full width
+                .minicard-custom-field-item-fullwidth
+                  if $eq definition.type "currency"
+                    +viewer
+                      = formattedCurrencyCustomFieldValue(definition)
+                  else if $eq definition.type "date"
+                    .date
+                      +minicardCustomFieldDate
+                  else if $eq definition.type "checkbox"
+                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
+                  else if $eq definition.type "stringtemplate"
+                    +viewer
+                      = formattedStringtemplateCustomFieldValue(definition)
+                  else
+                    +viewer
+                      = trueValue
 
-    if getAssignees
-      .minicard-assignees.js-minicard-assignees
-        each getAssignees
-          +userAvatar(userId=this)
+    .card-checklist-attachmentGalleries
+      .card-checklist-attachmentGallery.card-checklists
+        if currentBoard.allowsChecklists
+          //hr
+          //+checklists(cardId=_id showAtMinicard=true)
 
-    if getMembers
-      .minicard-members.js-minicard-members
-        each getMembers
-          +userAvatar(userId=this)
+    if showAssignee
+      if getAssignees
+        .minicard-assignees.js-minicard-assignees
+          each getAssignees
+            +userAvatar(userId=this)
+
+    if showMembers
+      if getMembers
+        .minicard-members.js-minicard-members
+          each getMembers
+            +userAvatar(userId=this)
+
+    if showCreatorOnMinicard
+      .minicard-creator
+        +userAvatar(userId=this.userId noRemove=true)
 
     .badges
-      unless currentUser.isNoComments
-        if comments.count
-          .badge(title="{{_ 'card-comments-title' comments.count }}")
-            span.badge-icon.fa.fa-comment-o.badge-comment
+      if canModifyCard
+        if comments.length
+          .badge(title="{{_ 'card-comments-title' comments.length }}")
+            span.badge-icon.fa.fa-comment-o.badge-comment.badge-text
               = ' '
-              = comments.count
+              = comments.length
             //span.badge-comment.badge-text
             //|  {{_ 'comment'}}
       if getDescription
-        .badge.badge-state-image-only(title=getDescription)
-          span.badge-icon.fa.fa-align-left
+        unless currentBoard.allowsDescriptionTextOnMinicard
+          .badge.badge-state-image-only(title=getDescription)
+            span.badge-icon.fa.fa-align-left
       if getVoteQuestion
         .badge.badge-state-image-only(title=getVoteQuestion)
           span.badge-icon.fa.fa-thumbs-up(class="{{#if voteState}}text-green{{/if}}")
           span.badge-text {{ voteCountPositive }}
           span.badge-icon.fa.fa-thumbs-down(class="{{#if $eq voteState false}}text-red{{/if}}")
           span.badge-text {{ voteCountNegative }}
-      if attachments.count
-        .badge
-          span.badge-icon.fa.fa-paperclip
-          span.badge-text= attachments.count
-      if checklists.count
+      if getPokerQuestion
+        .badge.badge-state-image-only(title=getPokerQuestion)
+          span.badge-icon.fa.fa-check(class="{{#if pokerState}}text-green{{/if}}")
+          if expiredPoker
+            span.badge-text {{ getPokerEstimation }}
+      if attachments.length
+        if currentBoard.allowsBadgeAttachmentOnMinicard
+          .badge
+            span.badge-icon.fa.fa-paperclip
+            span.badge-text= attachments.length
+      if checklists.length
         .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
           span.badge-icon.fa.fa-check-square-o
           span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
+      if allSubtasks.count
+        .badge
+          span.badge-icon.fa.fa-sitemap
+          span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
+          //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
+      if currentBoard.allowsCardSortingByNumber
+        if currentBoard.allowsCardSortingByNumberOnMinicard
+          .badge
+            span.badge-icon.fa.fa-sort
+            span.badge-text.check-list-sort {{ sort }}
+    if currentBoard.allowsDescriptionTextOnMinicard
+      if getDescription
+        .minicard-description
+          +viewer
+            | {{ getDescription }}
+
+template(name="editCardSortOrderPopup")
+  input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}
+
+template(name="minicardDetailsActionsPopup")
+  ul.pop-over-list
+    if canModifyCard
+      li
+        a.js-move-card
+          i.fa.fa-arrow-right
+          | {{_ 'moveCardPopup-title'}}
+      li
+        a.js-copy-card
+          i.fa.fa-copy
+          | {{_ 'copyCardPopup-title'}}
+      hr
+      li
+        a.js-archive
+          i.fa.fa-arrow-right
+          i.fa.fa-archive
+          | {{_ 'archive-card'}}
+      hr
+      li
+        a.js-move-card-to-top
+          i.fa.fa-arrow-up
+          | {{_ 'moveCardToTop-title'}}
+      li
+        a.js-move-card-to-bottom
+          i.fa.fa-arrow-down
+          | {{_ 'moveCardToBottom-title'}}
+      hr
+      li
+        a.js-add-labels
+          i.fa.fa-tags
+          | {{_ 'card-edit-labels'}}
+      li
+        a.js-due-date
+          i.fa.fa-sign-in
+          | {{_ 'editCardDueDatePopup-title'}}
+      li
+        a.js-set-card-color
+          i.fa.fa-paint-brush
+          | {{_ 'setCardColorPopup-title'}}
+      li
+        a.js-link
+          i.fa.fa-link
+          | {{_ 'link-card'}}

client/components/cards/minicard.js

@@ -1,3 +1,7 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+import { CustomFieldStringTemplate } from '/client/lib/customFields'
+
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });
@@ -21,16 +25,83 @@ BlazeComponent.extendComponent({
     }).format(customFieldTrueValue);
   },
 
+  formattedStringtemplateCustomFieldValue(definition) {
+    const customField = this.data()
+      .customFieldsWD()
+      .find(f => f._id === definition._id);
+
+    const customFieldTrueValue =
+      customField && customField.trueValue ? customField.trueValue : [];
+
+    const ret = new CustomFieldStringTemplate(definition).getFormattedValue(customFieldTrueValue);
+    return ret;
+  },
+
+  showCreatorOnMinicard() {
+    // cache "board" to reduce the mini-mongodb access
+    const board = this.data().board();
+    let ret = false;
+    if (board) {
+      ret =
+        board.allowsCreatorOnMinicard === null ||
+        board.allowsCreatorOnMinicard === undefined ||
+        board.allowsCreatorOnMinicard
+      ;
+    }
+    return ret;
+  },
+
+  showMembers() {
+    // cache "board" to reduce the mini-mongodb access
+    const board = this.data().board();
+    let ret = false;
+    if (board) {
+      ret =
+        board.allowsMembers === null ||
+        board.allowsMembers === undefined ||
+        board.allowsMembers
+      ;
+    }
+    return ret;
+  },
+
+  showAssignee() {
+    // cache "board" to reduce the mini-mongodb access
+    const board = this.data().board();
+    let ret = false;
+    if (board) {
+      ret =
+        board.allowsAssignee === null ||
+        board.allowsAssignee === undefined ||
+        board.allowsAssignee
+      ;
+    }
+    return ret;
+  },
+
+  /** opens the card label popup only if clicked onto a label
+   * <li> this is necessary to have the data context of the minicard.
+   *      if .js-card-label is used at click event, then only the data context of the label itself is available at this.currentData()
+   */
+  cardLabelsPopup(event) {
+    if (this.find('.js-card-label:hover')) {
+      Popup.open("cardLabels")(event, {dataContextIfCurrentDataIsUndefined: this.currentData()});
+    }
+  },
+
   events() {
     return [
       {
+        'click .minicard-checklists'() {
+          // Prevents clicking checklist at minicard from opening card details,
+          // while still allowing checking checlist items.
+          event.preventDefault();
+        },
         'click .js-linked-link'() {
           if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
           else if (this.data().isLinkedBoard())
             Utils.goBoardId(this.data().linkedId);
         },
-      },
-      {
         'click .js-toggle-minicard-label-text'() {
           if (window.localStorage.getItem('hiddenMinicardLabelText')) {
             window.localStorage.removeItem('hiddenMinicardLabelText'); //true
@@ -38,24 +109,17 @@ BlazeComponent.extendComponent({
             window.localStorage.setItem('hiddenMinicardLabelText', 'true'); //true
           }
         },
-      },
+        'click span.badge-icon.fa.fa-sort, click span.badge-text.check-list-sort' : Popup.open("editCardSortOrder"),
+        'click .minicard-labels' : this.cardLabelsPopup,
+        'click .js-open-minicard-details-menu': Popup.open('minicardDetailsActions'),
+      }
     ];
   },
 }).register('minicard');
 
 Template.minicard.helpers({
-  showDesktopDragHandles() {
-    currentUser = Meteor.user();
-    if (currentUser) {
-      return (currentUser.profile || {}).showDesktopDragHandles;
-    } else if (window.localStorage.getItem('showDesktopDragHandles')) {
-      return true;
-    } else {
-      return false;
-    }
-  },
   hiddenMinicardLabelText() {
-    currentUser = Meteor.user();
+    const currentUser = ReactiveCache.getCurrentUser();
     if (currentUser) {
       return (currentUser.profile || {}).hiddenMinicardLabelText;
     } else if (window.localStorage.getItem('hiddenMinicardLabelText')) {
@@ -64,4 +128,63 @@ Template.minicard.helpers({
       return false;
     }
   },
+  // XXX resolve this nasty hack for https://github.com/veliovgroup/Meteor-Files/issues/763
+  sess() {
+    return Meteor.connection && Meteor.connection._lastSessionId
+      ? Meteor.connection._lastSessionId
+      : null;
+  },
+});
+
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'keydown input.js-edit-card-sort-popup'(evt) {
+          // enter = save
+          if (evt.keyCode === 13) {
+            this.find('button[type=submit]').click();
+          }
+        },
+        'click button.js-submit-edit-card-sort-popup'(event) {
+          // save button pressed
+          event.preventDefault();
+          const sort = this.$('.js-edit-card-sort-popup')[0]
+            .value
+            .trim();
+          if (!Number.isNaN(sort)) {
+            let card = this.data();
+            card.move(card.boardId, card.swimlaneId, card.listId, sort);
+            Popup.back();
+          }
+        },
+      }
+    ]
+  }
+}).register('editCardSortOrderPopup');
+
+Template.minicardDetailsActionsPopup.events({
+  'click .js-due-date': Popup.open('editCardDueDate'),
+  'click .js-move-card': Popup.open('moveCard'),
+  'click .js-copy-card': Popup.open('copyCard'),
+  'click .js-set-card-color': Popup.open('setCardColor'),
+  'click .js-add-labels': Popup.open('cardLabels'),
+  'click .js-link': Popup.open('linkCard'),
+  'click .js-move-card-to-top'(event) {
+    event.preventDefault();
+    const minOrder = this.getMinSort();
+    this.move(this.boardId, this.swimlaneId, this.listId, minOrder - 1);
+    Popup.back();
+  },
+  'click .js-move-card-to-bottom'(event) {
+    event.preventDefault();
+    const maxOrder = this.getMaxSort();
+    this.move(this.boardId, this.swimlaneId, this.listId, maxOrder + 1);
+    Popup.back();
+  },
+  'click .js-archive': Popup.afterConfirm('cardArchive', function () {
+    Popup.close();
+    this.archive();
+    Utils.goBoardId(this.boardId);
+  }),
 });

client/components/cards/minicard.styl

@@ -1,313 +0,0 @@
-@import 'nib'
-
-.minicard-wrapper
-  cursor: pointer
-  position: relative
-  display: flex
-  align-items: center
-  margin-bottom: 9px
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 9px
-
-  &.ui-sortable-helper
-    cursor: grabbing
-    transform: rotate(4deg)
-    display: block !important
-
-    .and-n-other
-      width: 100%
-      height: 16px
-      padding: 4px
-      background-color: darken(white, 5%)
-      text-align: center
-      border-radius: 3px
-
-    .multi-selection-checkbox
-      display: none
-
-  .multi-selection-checkbox + .minicard
-    margin-left: 8px
-
-.minicard
-  padding: 6px 8px 2px
-  position: relative
-  flex: 1
-  flex-wrap: wrap
-  background-color: #fff
-  min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.15)
-  border-radius: 2px
-  color: #4d4d4d
-  overflow: hidden
-  transition: transform 0.2s,
-              border-radius 0.2s
-
-  &.linked-board
-  &.linked-card
-    .linked-icon
-      display: inline-block
-      margin-right: 11px
-      vertical-align: baseline
-      font-size: 0.9em
-    .linked-archived
-      color: #937760
-
-  .is-selected &
-    transform: translateX(11px)
-    border-bottom-right-radius: 0
-    border-top-right-radius: 0
-    z-index: 25
-    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(white, 3%)
-
-  .draggable-hover-card &
-    background: darken(white, 7%)
-
-  .minicard-cover
-    background-position: center
-    background-repeat: no-repeat
-    background-size: contain
-    height: 145px
-    user-select: none
-    margin: -6px -8px 6px -8px
-    border-radius: top 2px
-
-  .minicard-labels
-    float: none
-    display: flex
-    flex-wrap: wrap
-
-    .minicard-label
-      width: 11px
-      height: @width
-      border-radius: 2px
-      margin-right: 3px
-      margin-bottom: 3px
-      
-  .minicard-custom-fields
-    display:block;
-  .minicard-custom-field
-    display:flex;
-  .minicard-custom-field-item
-    flex-grow: 1
-    display: block
-    word-wrap: break-word
-    max-width: 100px
-    margin-right: 4px
-  .handle
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    display:none;
-    @media only screen {
-      display:block;
-    }
-    .fa-arrows
-      font-size:20px;
-      color: #ccc;
-  .minicard-title
-    p:last-child
-      margin-bottom: 0
-    .viewer
-      display: block
-      word-wrap: break-word
-      max-width: 230px
-  .dates
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  .date
-    margin-right: 3px
-  .badges
-    float: left
-    margin-top: 7px
-    color: darken(white, 50%)
-
-    &:empty
-      display: none
-
-    .badge
-      float: left
-      margin-right: 11px
-      margin-bottom: 3px
-      font-size: 0.9em
-      &.is-finished
-         background: #3cb500
-         padding: 0px 3px
-         border-radius: 3px
-         color: white
-
-      &:last-of-type
-        margin-right: 0
-
-      .badge-icon,
-      .badge-text
-        vertical-align: middle
-        &.badge-comment
-          margin-bottom: 0.1rem
-
-      .badge-text
-        font-size: 0.9em
-        padding-left: 2px
-        line-height: 14px
-      .check-list-text
-        padding-left: 0px
-        line-height: 12px
-
-  .minicard-members,
-  .minicard-assignees
-    float: right
-    margin-left: 5px
-    margin-bottom: 4px
-
-    .member
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-      margin-bottom: 4px
-
-    .assignee
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-
-    + .badges
-      margin-top: 5px
-
-  .minicard-assignees
-    border-bottom: 1px solid red
-
-  .minicard-members:empty,
-  .minicard-assignees:empty
-    display: none
-
-  &.minicard-composer
-    margin-bottom: 10px
-
-    textarea.minicard-composer-textarea,
-    textarea.minicard-composer-textarea:focus
-      resize: none
-      background: none
-      border: none
-      box-shadow: none
-      height: auto
-      margin: 0
-      padding: 0
-      max-height: 162px
-      min-height: 36px
-      margin-bottom: 20px
-      overflow-y: auto
-
-.parent-prefix
-  color: darken(white, 30%)
-  font-size: 0.9em
-.parent-subtext
-  color: darken(white, 30%)
-  font-size: 0.9em
-
-@media screen and (max-width: 800px)
-  .minicard
-    .is-selected &
-      transform: translateX(0px)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      z-index: 15
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-minicard-color(background, color...)
-  background-color: background
-  if color
-    color: color //overwrite text for better visibility
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(background, 3%)
-  .draggable-hover-card &
-    background: darken(background, 7%)
-
-.minicard-green
-  minicard-color(#3cb500, #ffffff) //White text for better visibility
-
-.minicard-yellow
-  minicard-color(#fad900)
-
-.minicard-orange
-  minicard-color(#ff9f19)
-
-.minicard-red
-  minicard-color(#eb4646, #ffffff) //White text for better visibility
-
-.minicard-purple
-  minicard-color(#a632db, #ffffff) //White text for better visibility
-
-.minicard-blue
-  minicard-color(#0079bf, #ffffff) //White text for better visibility
-
-.minicard-pink
-  minicard-color(#ff78cb)
-
-.minicard-sky
-  minicard-color(#00c2e0, #ffffff) //White text for better visibility
-
-.minicard-black
-  minicard-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.minicard-lime
-  minicard-color(#51e898)
-
-.minicard-silver
-  minicard-color(#c0c0c0)
-
-.minicard-peachpuff
-  minicard-color(#ffdab9)
-
-.minicard-crimson
-  minicard-color(#dc143c, #ffffff) //White text for better visibility
-
-.minicard-plum
-  minicard-color(#dda0dd)
-
-.minicard-darkgreen
-  minicard-color(#006400, #ffffff) //White text for better visibility
-
-.minicard-slateblue
-  minicard-color(#6a5acd, #ffffff) //White text for better visibility
-
-.minicard-magenta
-  minicard-color(#ff00ff, #ffffff) //White text for better visibility
-
-.minicard-gold
-  minicard-color(#ffd700)
-
-.minicard-navy
-  minicard-color(#000080, #ffffff) //White text for better visibility
-
-.minicard-gray
-  minicard-color(#808080, #ffffff) //White text for better visibility
-
-.minicard-saddlebrown
-  minicard-color(#8b4513, #ffffff) //White text for better visibility
-
-.minicard-paleturquoise
-  minicard-color(#afeeee)
-
-.minicard-mistyrose
-  minicard-color(#ffe4e1)
-
-.minicard-indigo
-  minicard-color(#4b0082, #ffffff) //White text for better visibility
-
-.text-red
-  color:red
-.text-green
-  color:green

client/components/cards/resultCard.css

@@ -0,0 +1,25 @@
+.result-card-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.result-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.result-card-context {
+  display: inline-block;
+}
+.result-card-context-separator {
+  font-weight: bold;
+}
+.result-card-context-list {
+  margin-bottom: 0.7rem;
+}
+.result-card-block-wrapper {
+  display: inline-block;
+}

client/components/cards/resultCard.jade

@@ -1,6 +1,6 @@
 template(name="resultCard")
   .result-card-wrapper
-    a.minicard-wrapper.card-title(href=originRelativeUrl)
+    a.minicard-wrapper.js-minicard.card-title(href=originRelativeUrl)
       +minicard(this)
       //= card.title
     ul.result-card-context-list