Introduce group basic federation, event new page and notifications

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
416 changed files with 32220 additions and 16750 deletions

View File

@ -38,7 +38,7 @@ lint:
- mix format --check-formatted --dry-run || export EXITVALUE=1 - mix format --check-formatted --dry-run || export EXITVALUE=1
- cd js - cd js
- yarn install - yarn install
- yarn run lint || export EXITVALUE=1 #- yarn run lint || export EXITVALUE=1
- yarn run build - yarn run build
- cd ../ - cd ../
- exit $EXITVALUE - exit $EXITVALUE
@ -62,8 +62,8 @@ deps:
exunit: exunit:
stage: test stage: test
services: services:
- name: mdillon/postgis:11 - name: mdillon/postgis:11
alias: postgres alias: postgres
before_script: before_script:
- cd js - cd js
- yarn install - yarn install
@ -77,31 +77,30 @@ exunit:
script: script:
- mix coveralls - mix coveralls
#cypress: cypress:
# stage: test stage: test
# services: services:
# - name: mdillon/postgis:11 - name: mdillon/postgis:11
# alias: postgres alias: postgres
# script: script:
# - mix deps.get - mix deps.get
# - cd js - cd js
# - yarn install - yarn install
# - npx cypress install # just to be sure - npx cypress install # just to be sure
# - yarn run build - yarn run build
# - cd ../ - cd ../
# - MIX_ENV=e2e mix ecto.create - MIX_ENV=e2e mix ecto.create
# - MIX_ENV=e2e mix ecto.migrate - MIX_ENV=e2e mix ecto.migrate
# - MIX_ENV=e2e mix run priv/repo/e2e.seed.exs - MIX_ENV=e2e mix run priv/repo/e2e.seed.exs
# - MIX_ENV=e2e mix phx.server & - MIX_ENV=e2e mix phx.server &
# - cd js - cd js
# - npx wait-on http://localhost:4000 - npx wait-on http://localhost:4000
# - if [ -z "$CYPRESS_KEY" ]; then npx cypress run; else npx cypress run --record --parallel --key $CYPRESS_KEY; fi - if [ -z "$CYPRESS_KEY" ]; then npx cypress run; else npx cypress run --record --parallel --key $CYPRESS_KEY; fi
# artifacts: artifacts:
# expire_in: 2 day expire_in: 2 day
# paths: paths:
# - js/tests/e2e/screenshots/**/*.png - js/tests/e2e/screenshots/**/*.png
# - js/tests/e2e/videos/**/*.mp4 - js/tests/e2e/videos/**/*.mp4
pages: pages:
stage: deploy stage: deploy

View File

@ -46,7 +46,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
], ],
secret_key_base: "1yOazsoE0Wqu4kXk3uC5gu3jDbShOimTCzyFL3OjCdBmOXMyHX87Qmf3+Tu9s0iM", secret_key_base: "1yOazsoE0Wqu4kXk3uC5gu3jDbShOimTCzyFL3OjCdBmOXMyHX87Qmf3+Tu9s0iM",
render_errors: [view: Mobilizon.Web.ErrorView, accepts: ~w(html json)], render_errors: [view: Mobilizon.Web.ErrorView, accepts: ~w(html json)],
pubsub: [name: Mobilizon.PubSub, adapter: Phoenix.PubSub.PG2], pubsub_server: Mobilizon.PubSub,
cache_static_manifest: "priv/static/manifest.json" cache_static_manifest: "priv/static/manifest.json"
# Upload configuration # Upload configuration
@ -115,6 +115,8 @@ config :guardian, Guardian.DB,
# default: 60 minutes # default: 60 minutes
sweep_interval: 60 sweep_interval: 60
config :elixir, :time_zone_database, Tzdata.TimeZoneDatabase
config :geolix, config :geolix,
databases: [ databases: [
%{ %{
@ -204,7 +206,26 @@ config :mobilizon, :anonymous,
config :mobilizon, Oban, config :mobilizon, Oban,
repo: Mobilizon.Storage.Repo, repo: Mobilizon.Storage.Repo,
prune: {:maxlen, 10_000}, prune: {:maxlen, 10_000},
queues: [default: 10, search: 20, background: 5] queues: [default: 10, search: 5, mailers: 10, background: 5]
config :mobilizon, :rich_media,
parsers: [
Mobilizon.Service.RichMedia.Parsers.OEmbed,
Mobilizon.Service.RichMedia.Parsers.OGP,
Mobilizon.Service.RichMedia.Parsers.TwitterCard,
Mobilizon.Service.RichMedia.Parsers.Fallback
]
config :mobilizon, Mobilizon.Service.ResourceProviders,
types: [],
providers: %{}
config :mobilizon, :external_resource_providers, %{
"https://drive.google.com/" => :google_drive,
"https://docs.google.com/document/" => :google_docs,
"https://docs.google.com/presentation/" => :google_presentation,
"https://docs.google.com/spreadsheets/" => :google_spreadsheets
}
# Import environment specific config. This must remain at the bottom # Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above. # of this file so it overrides the configuration defined above.

View File

@ -19,7 +19,16 @@ config :mobilizon, Mobilizon.Web.Endpoint,
code_reloader: true, code_reloader: true,
check_origin: false, check_origin: false,
watchers: [ watchers: [
yarn: ["run", "dev", cd: Path.expand("../js", __DIR__)] # yarn: ["run", "dev", cd: Path.expand("../js", __DIR__)]
node: [
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch-stdin",
"--config",
"node_modules/@vue/cli-service/webpack.config.js",
cd: Path.expand("../js", __DIR__)
]
] ]
# ## SSL Support # ## SSL Support
@ -80,7 +89,7 @@ config :mobilizon, :instance,
email_reply_to: System.get_env("MOBILIZON_INSTANCE_EMAIL"), email_reply_to: System.get_env("MOBILIZON_INSTANCE_EMAIL"),
registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") == "true" registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") == "true"
config :mobilizon, :activitypub, sign_object_fetches: false # config :mobilizon, :activitypub, sign_object_fetches: false
require Logger require Logger

View File

@ -14,11 +14,24 @@ config :mobilizon, Mobilizon.Web.Endpoint,
debug_errors: true, debug_errors: true,
code_reloader: false, code_reloader: false,
check_origin: false, check_origin: false,
# Somehow this can't be merged properly with the dev config some we got this… # Somehow this can't be merged properly with the dev config so we got this…
watchers: [ watchers: [
yarn: [cd: Path.expand("../js", __DIR__)] yarn: [cd: Path.expand("../js", __DIR__)]
] ]
config :mobilizon, sql_sandbox: true require Logger
config :mobilizon, Mobilizon.Storage.Repo, pool: Ecto.Adapters.SQL.Sandbox cond do
System.get_env("INSTANCE_CONFIG") &&
File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
import_config System.get_env("INSTANCE_CONFIG")
System.get_env("DOCKER", "false") == "false" && File.exists?("./config/e2e.secret.exs") ->
import_config "e2e.secret.exs"
System.get_env("DOCKER", "false") == "true" ->
Logger.info("Using environment configuration for Docker")
true ->
Logger.error("No configuration file found")
end

View File

@ -46,10 +46,12 @@ config :exvcr,
config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock
config :mobilizon, Oban, queues: false, prune: :disabled config :mobilizon, Oban, queues: false, prune: :disabled, crontab: false
config :mobilizon, Mobilizon.Web.Auth.Guardian, secret_key: "some secret" config :mobilizon, Mobilizon.Web.Auth.Guardian, secret_key: "some secret"
config :mobilizon, :activitypub, sign_object_fetches: false
if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do if System.get_env("DOCKER", "false") == "false" && File.exists?("./config/test.secret.exs") do
import_config "test.secret.exs" import_config "test.secret.exs"
end end

View File

@ -3,9 +3,9 @@ LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
ENV REFRESHED_AT=2019-12-17 ENV REFRESHED_AT=2019-12-17
RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 python3-pip RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 python3-pip
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash && apt-get install nodejs -yq RUN curl -sL https://deb.nodesource.com/setup_12.x | bash && apt-get install nodejs -yq
RUN npm install -g yarn wait-on RUN npm install -g yarn wait-on
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
RUN mix local.hex --force && mix local.rebar --force RUN mix local.hex --force && mix local.rebar --force
RUN pip3 install mkdocs mkdocs-material pymdown-extensions pygments mkdocs-git-revision-date-localized-plugin RUN pip3 install mkdocs mkdocs-material pymdown-extensions pygments mkdocs-git-revision-date-localized-plugin
RUN curl http://geolite.maxmind.com/download/geoip/database/GeoLite2-City.tar.gz --output GeoLite2-City.tar.gz -s && tar zxf GeoLite2-City.tar.gz && mkdir -p /usr/share/GeoIP && mv GeoLite2-City_*/GeoLite2-City.mmdb /usr/share/GeoIP/GeoLite2-City.mmdb RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/

3
js/.browserslistrc Normal file
View File

@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

7
js/.editorconfig Normal file
View File

@ -0,0 +1,7 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

59
js/.eslintrc.js Normal file
View File

@ -0,0 +1,59 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"@vue/airbnb",
"@vue/typescript/recommended",
"plugin:cypress/recommended",
"plugin:prettier/recommended",
"prettier",
"eslint:recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
],
plugins: ["prettier"],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-underscore-dangle": [
"error",
{
allow: ["__typename"],
},
],
"@typescript-eslint/no-explicit-any": "off",
"cypress/no-unnecessary-waiting": "off",
"vue/max-len": [
"error",
{
ignoreStrings: true,
template: 170,
code: 100,
},
],
"prettier/prettier": "error",
"@typescript-eslint/interface-name-prefix": "off",
"@typescript-eslint/no-use-before-define": "off",
"import/prefer-default-export": "off",
},
ignorePatterns: ["src/typings/*.d.ts", "vue.config.js"],
overrides: [{
files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
env: {
mocha: true,
},
}],
};

11
js/.gitignore vendored
View File

@ -2,12 +2,12 @@
node_modules node_modules
/dist /dist
/tests/e2e/reports/
/tests/e2e/screenshots/
/tests/e2e/videos/ /tests/e2e/videos/
selenium-debug.log /tests/e2e/screenshots/
styleguide/ # local env files
.env.local
.env.*.local
# Log files # Log files
npm-debug.log* npm-debug.log*
@ -21,5 +21,4 @@ yarn-error.log*
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw* *.sw?

View File

@ -1,5 +0,0 @@
module.exports = {
plugins: {
autoprefixer: {},
},
};

41
js/README.md Normal file
View File

@ -0,0 +1,41 @@
# mobilizon
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Run your unit tests
```
yarn test:unit
```
### Run your end-to-end tests
```
yarn test:e2e
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

12
js/apollo.config.js Normal file
View File

@ -0,0 +1,12 @@
// apollo.config.js
module.exports = {
client: {
service: {
name: "Mobilizon",
// URL to the GraphQL API
url: "http://localhost:4000/api",
},
// Files processed by the extension
includes: ["src/**/*.vue", "src/**/*.js"],
},
};

View File

@ -1,7 +1,3 @@
module.exports = { module.exports = {
presets: [ presets: ["@vue/cli-plugin-babel/preset"],
[
"@vue/app", {useBuiltIns: "entry"}
]
]
}; };

View File

@ -1,19 +0,0 @@
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Buefy from 'buefy';
import 'bulma/css/bulma.min.css';
import 'buefy/dist/buefy.min.css';
import filters from '@/filters';
Vue.use(VueI18n);
Vue.use(Buefy);
Vue.use(filters);
Vue.component('router-link', {
props: {
tag: { type: String, default: 'a' }
},
render(createElement) {
return createElement(this.tag, {}, this.$slots.default)
}
});

View File

@ -1,18 +0,0 @@
import VueI18n from 'vue-i18n'
import messages from '@/i18n/index';
const language = (window.navigator).userLanguage || window.navigator.language;
const i18n = new VueI18n({
locale: language.replace('-', '_'), // set locale
messages, // set locale messages
});
export default previewComponent => {
// https://vuejs.org/v2/guide/render-function.html
return {
i18n,
render(createElement) {
return createElement(previewComponent)
}
}
}

View File

@ -4,4 +4,4 @@
"baseUrl": "http://localhost:4000", "baseUrl": "http://localhost:4000",
"viewportWidth": 1920, "viewportWidth": 1920,
"viewportHeight": 1080 "viewportHeight": 1080
} }

View File

View File

@ -1 +0,0 @@
No directives right now.

View File

@ -1,3 +0,0 @@
# Introduction
This page presents the various Vue.js components used in the front-end for Mobilizon.

View File

@ -1,21 +1,39 @@
{"__schema": {
{"types":[ "__schema": {
{ "types": [
"possibleTypes":[ {
{"name":"Person"}, "kind": "INTERFACE",
{"name":"Group"} "name": "ActionLogObject",
], "possibleTypes": [
"name":"Actor", {
"kind":"INTERFACE" "name": "Event"
}, },
{ {
"possibleTypes":[ "name": "Comment"
{"name":"Event"}, },
{"name":"Person"}, {
{"name":"Group"} "name": "Report"
], },
"name":"SearchResult", {
"kind":"UNION"} "name": "ReportNote"
] }
]
},
{
"kind": "INTERFACE",
"name": "Actor",
"possibleTypes": [
{
"name": "Person"
},
{
"name": "Group"
},
{
"name": "Application"
}
]
}
]
} }
} }

View File

@ -1,9 +1,9 @@
const fetch = require('node-fetch'); const fetch = require("node-fetch");
const fs = require('fs'); const fs = require("fs");
fetch(`http://localhost:4001`, { fetch(`http://localhost:4000/api`, {
method: 'POST', method: "POST",
headers: { 'Content-Type': 'application/json' }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
variables: {}, variables: {},
query: ` query: `
@ -21,18 +21,16 @@ fetch(`http://localhost:4001`, {
`, `,
}), }),
}) })
.then(result => result.json()) .then((result) => result.json())
.then(result => { .then((result) => {
// here we're filtering out any type information unrelated to unions or interfaces // here we're filtering out any type information unrelated to unions or interfaces
const filteredData = result.data.__schema.types.filter( const filteredData = result.data.__schema.types.filter((type) => type.possibleTypes !== null);
type => type.possibleTypes !== null,
);
result.data.__schema.types = filteredData; result.data.__schema.types = filteredData;
fs.writeFile('./fragmentTypes.json', JSON.stringify(result.data), err => { fs.writeFile("./fragmentTypes.json", JSON.stringify(result.data), (err) => {
if (err) { if (err) {
console.error('Error writing fragmentTypes file', err); console.error("Error writing fragmentTypes file", err);
} else { } else {
console.log('Fragment types successfully extracted!'); console.log("Fragment types successfully extracted!");
} }
}); });
}); });

View File

@ -1,98 +1,100 @@
{ {
"name": "mobilizon", "name": "mobilizon",
"version": "1.0.0-beta.1", "version": "0.1.0",
"license": "AGPL-3.0",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "vue-cli-service build --modern", "serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit", "test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e", "test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint"
"analyze-bundle": "yarn run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
"dev": "vue-cli-service build --watch",
"styleguide": "vue-cli-service styleguidist",
"styleguide:build": "vue-cli-service styleguidist:build",
"vue-i18n-extract": "vue-i18n-extract",
"graphql:get-schema": "graphql get-schema",
"i18n-extract": "vue-i18n-extract report -v './src/**/*.?(ts|vue)' -l './src/i18n/en_US.json' -o output.json"
}, },
"dependencies": { "dependencies": {
"@absinthe/socket": "^0.2.1", "@absinthe/socket": "^0.2.1",
"@absinthe/socket-apollo-link": "^0.2.1", "@absinthe/socket-apollo-link": "^0.2.1",
"@mdi/font": "^4.5.95", "@mdi/font": "^5.0.45",
"apollo-absinthe-upload-link": "^1.5.0", "apollo-absinthe-upload-link": "^1.5.0",
"apollo-cache-inmemory": "^1.5.1", "apollo-cache": "^1.3.5",
"apollo-client": "^2.5.1", "apollo-cache-inmemory": "^1.6.6",
"apollo-link": "^1.2.11", "apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.16", "apollo-link": "^1.2.14",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-link-ws": "^1.0.19", "apollo-link-ws": "^1.0.19",
"apollo-utilities": "^1.3.2", "apollo-utilities": "^1.3.2",
"buefy": "^0.8.2", "buefy": "^0.8.2",
"bulma-divider": "^0.2.0", "bulma-divider": "^0.2.0",
"graphql": "^14.5.8", "core-js": "^3.6.4",
"graphql-tag": "^2.10.1", "eslint-plugin-cypress": "^2.10.3",
"intersection-observer": "^0.7.0", "graphql": "^15.0.0",
"graphql-tag": "^2.10.3",
"intersection-observer": "^0.10.0",
"javascript-time-ago": "^2.0.4", "javascript-time-ago": "^2.0.4",
"leaflet": "^1.4.0", "leaflet": "^1.4.0",
"leaflet.locatecontrol": "^0.70.0", "leaflet.locatecontrol": "^0.72.0",
"lodash": "^4.17.11", "lodash": "^4.17.11",
"ngeohash": "^0.6.3", "ngeohash": "^0.6.3",
"phoenix": "^1.4.11", "phoenix": "^1.4.11",
"register-service-worker": "^1.6.2", "register-service-worker": "^1.7.1",
"tippy.js": "4.3.5", "tippy.js": "4.3.5",
"tiptap": "^1.26.0", "tiptap": "^1.26.0",
"tiptap-extensions": "^1.28.0", "tiptap-extensions": "^1.28.0",
"vue": "^2.6.10", "v-tooltip": "2.0.2",
"vue-apollo": "^3.0.0-rc.6", "vue": "^2.6.11",
"vue-class-component": "^7.0.2", "vue-apollo": "^3.0.3",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.14.0", "vue-i18n": "^8.14.0",
"vue-meta": "^2.3.1", "vue-meta": "^2.3.1",
"vue-property-decorator": "^8.1.0", "vue-property-decorator": "^8.4.1",
"vue-router": "^3.0.6", "vue-router": "^3.1.6",
"vue-scrollto": "^2.17.1", "vue-scrollto": "^2.17.1",
"vue2-leaflet": "^2.0.3" "vue2-leaflet": "^2.0.3",
"vuedraggable": "^2.23.2"
}, },
"devDependencies": { "devDependencies": {
"@types/chai": "^4.2.3", "@types/chai": "^4.2.11",
"@types/javascript-time-ago": "^2.0.1",
"@types/leaflet": "^1.5.2", "@types/leaflet": "^1.5.2",
"@types/leaflet.locatecontrol": "^0.60.7", "@types/leaflet.locatecontrol": "^0.60.7",
"@types/lodash": "^4.14.141", "@types/lodash": "^4.14.141",
"@types/mocha": "^7.0.1", "@types/mocha": "^5.2.4",
"@vue/cli-plugin-babel": "^4.0.3", "@types/ngeohash": "^0.6.2",
"@vue/cli-plugin-e2e-cypress": "^4.0.3", "@types/prosemirror-inputrules": "^1.0.2",
"@vue/cli-plugin-pwa": "^4.0.3", "@types/prosemirror-model": "^1.7.2",
"@vue/cli-plugin-router": "^4.0.3", "@types/prosemirror-state": "^1.2.4",
"@vue/cli-plugin-typescript": "^4.0.3", "@types/prosemirror-view": "^1.11.4",
"@vue/cli-plugin-unit-mocha": "^4.0.3", "@types/vuedraggable": "^2.23.0",
"@vue/cli-service": "^4.0.3", "@typescript-eslint/eslint-plugin": "^2.26.0",
"@vue/eslint-config-typescript": "^5.0.0", "@typescript-eslint/parser": "^2.26.0",
"@vue/test-utils": "^1.0.0-beta.31", "@vue/cli-plugin-babel": "~4.4.1",
"apollo-link-error": "^1.1.12", "@vue/cli-plugin-e2e-cypress": "~4.4.1",
"chai": "^4.2.0", "@vue/cli-plugin-eslint": "~4.4.1",
"dotenv-webpack": "^1.7.0", "@vue/cli-plugin-pwa": "~4.4.1",
"eslint": "^6.5.1", "@vue/cli-plugin-router": "~4.4.1",
"@vue/cli-plugin-typescript": "~4.4.1",
"@vue/cli-plugin-unit-mocha": "~4.4.1",
"@vue/cli-service": "~4.4.1",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "1.0.3",
"chai": "^4.1.2",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"graphql-cli": "^3.0.12", "graphql-cli": "^3.0.12",
"node-sass": "^4.11.0", "node-sass": "^4.12.0",
"sass-loader": "^8.0.0", "prettier": "2.0.5",
"tslint": "^6.0.0", "prettier-eslint": "^10.1.1",
"tslint-config-airbnb": "^5.11.2", "sass-loader": "^8.0.2",
"typescript": "^3.6.3", "typescript": "~3.9.3",
"vue-cli-plugin-styleguidist": "^4.0.1", "vue-cli-plugin-styleguidist": "~4.24.0",
"vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
"vue-i18n-extract": "^1.0.2", "vue-i18n-extract": "^1.0.2",
"vue-svg-inline-loader": "^1.3.0", "vue-svg-inline-loader": "^1.3.0",
"vue-template-compiler": "^2.6.10", "vue-svg-loader": "^0.16.0",
"webpack": "^4.41.0" "vue-template-compiler": "^2.6.11",
}, "webpack-cli": "^3.3.11"
"resolutions": {
"prosemirror-model": "1.8.2"
},
"browserslist": [
">0.25%",
"ie 11",
"not op_mini all"
],
"engines": {
"node": ">=10.0.0"
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 668 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,149 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
fill="#000000" stroke="none">
<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
-9615 0 20 -32z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -1,20 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title>
<%= VUE_APP_INJECT_COMMENT %> <!-- <%= VUE_APP_INJECT_COMMENT %> -->
</head> <meta name="server-injected-data" />
</head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but mobilizon doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
</noscript> >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
<div id="app"></div> properly without JavaScript enabled. Please enable it to
<!-- built files will be auto injected --> continue.</strong
</body> >
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html> </html>

View File

@ -1,20 +0,0 @@
{
"name": "Mobilizon",
"short_name": "mobilizon",
"icons": [
{
"src": "/img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#FAB12D",
"theme_color": "#424056"
}

View File

@ -1,2 +1,2 @@
User-agent: * User-agent: *
Allow: / Disallow:

1
js/src/@types/v-tooltip/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "v-tooltip";

57
js/src/@types/vuedraggable/index.d.ts vendored Normal file
View File

@ -0,0 +1,57 @@
declare module "vuedraggable" {
import Vue, { ComponentOptions } from "vue";
export interface DraggedContext<T> {
index: number;
futureIndex: number;
element: T;
}
export interface DropContext<T> {
index: number;
component: Vue;
element: T;
}
export interface Rectangle {
top: number;
right: number;
bottom: number;
left: number;
width: number;
height: number;
}
export interface MoveEvent<T> {
originalEvent: DragEvent;
dragged: Element;
draggedContext: DraggedContext<T>;
draggedRect: Rectangle;
related: Element;
relatedContext: DropContext<T>;
relatedRect: Rectangle;
from: Element;
to: Element;
willInsertAfter: boolean;
isTrusted: boolean;
}
export interface ChangeEvent<T> {
added: {
newIndex: number;
element: T;
};
removed: {
oldIndex: number;
element: T;
};
moved: {
newIndex: number;
oldIndex: number;
};
}
const draggableComponent: ComponentOptions<Vue>;
export default draggableComponent;
}

View File

@ -2,12 +2,39 @@
<div id="mobilizon"> <div id="mobilizon">
<NavBar /> <NavBar />
<div class="container" v-if="config && config.demoMode"> <div class="container" v-if="config && config.demoMode">
<b-message type="is-danger" :title="$t('Warning').toLocaleUpperCase()" closable aria-close-label="Close"> <b-message
<p v-html="`${$t('This is a demonstration site to test the beta version of Mobilizon.')} ${$t('<b>Please do not use it in any real way.</b>')}`" /> type="is-danger"
:title="$t('Warning').toLocaleUpperCase()"
closable
aria-close-label="Close"
>
<p
v-html="
`${$t('This is a demonstration site to test the beta version of Mobilizon.')} ${$t(
'<b>Please do not use it in any real way.</b>'
)}`
"
/>
<p> <p>
<span v-html="$t('Mobilizon is under development, we will add new features to this site during regular updates, until the release of <b>version 1 of the software in the first half of 2020</b>.')" /> <span
<i18n path="In the meantime, please consider that the software is not (yet) finished. More information {onBlog}."> v-html="
<a slot="onBlog" :href="$i18n.locale === 'fr' ? 'https://framablog.org/?p=18268' : 'https://framablog.org/?p=18299'">{{ $t('on our blog') }}</a> $t(
'Mobilizon is under development, we will add new features to this site during regular updates, until the release of <b>version 1 of the software in the first half of 2020</b>.'
)
"
/>
<i18n
path="In the meantime, please consider that the software is not (yet) finished. More information {onBlog}."
>
<a
slot="onBlog"
:href="
$i18n.locale === 'fr'
? 'https://framablog.org/?p=18268'
: 'https://framablog.org/?p=18299'
"
>{{ $t("on our blog") }}</a
>
</i18n> </i18n>
</p> </p>
</b-message> </b-message>
@ -22,20 +49,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import NavBar from '@/components/NavBar.vue'; import { Component, Vue } from "vue-property-decorator";
import { Component, Vue } from 'vue-property-decorator'; import NavBar from "./components/NavBar.vue";
import { import { AUTH_ACCESS_TOKEN, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from "./constants";
AUTH_ACCESS_TOKEN, import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from "./graphql/user";
AUTH_USER_EMAIL, import Footer from "./components/Footer.vue";
AUTH_USER_ID, import Logo from "./components/Logo.vue";
AUTH_USER_ROLE, import { initializeCurrentActor } from "./utils/auth";
} from '@/constants'; import { CONFIG } from "./graphql/config";
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'; import { IConfig } from "./types/config.model";
import Footer from '@/components/Footer.vue';
import Logo from '@/components/Logo.vue';
import { initializeCurrentActor } from '@/utils/auth';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
@Component({ @Component({
apollo: { apollo: {
currentUser: { currentUser: {
@ -46,7 +68,7 @@ import { IConfig } from '@/types/config.model';
components: { components: {
Logo, Logo,
NavBar, NavBar,
'mobilizon-footer': Footer, "mobilizon-footer": Footer,
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
@ -65,7 +87,7 @@ export default class App extends Vue {
const role = localStorage.getItem(AUTH_USER_ROLE); const role = localStorage.getItem(AUTH_USER_ROLE);
if (userId && userEmail && accessToken && role) { if (userId && userEmail && accessToken && role) {
return await this.$apollo.mutate({ return this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT, mutation: UPDATE_CURRENT_USER_CLIENT,
variables: { variables: {
id: userId, id: userId,
@ -85,7 +107,7 @@ export default class App extends Vue {
/* Bulma imports */ /* Bulma imports */
@import "~bulma/bulma"; @import "~bulma/bulma";
@import '~bulma-divider'; @import "~bulma-divider";
/* Buefy imports */ /* Buefy imports */
@import "~buefy/src/scss/buefy"; @import "~buefy/src/scss/buefy";
@ -94,31 +116,34 @@ export default class App extends Vue {
$mdi-font-path: "~@mdi/font/fonts"; $mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons"; @import "~@mdi/font/scss/materialdesignicons";
.fade-enter-active, .fade-leave-active { .fade-enter-active,
transition: opacity .5s; .fade-leave-active {
transition: opacity 0.5s;
} }
.fade-enter, .fade-leave-to { .fade-enter,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
body { body {
// background: #f7f8fa; // background: #f7f8fa;
background: $body-background-color; background: $body-background-color;
font-family: BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
/*main {*/ /*main {*/
/* margin: 1rem auto 0;*/ /* margin: 1rem auto 0;*/
/*}*/ /*}*/
} }
#mobilizon > .container > .message { #mobilizon > .container > .message {
margin: 1rem auto auto; margin: 1rem auto auto;
.message-header { .message-header {
button.delete { button.delete {
background: #4a4a4a; background: #4a4a4a;
}
color: #111;
} }
color: #111;
} }
}
</style> </style>

View File

@ -1,19 +1,19 @@
import { ApolloCache } from 'apollo-cache'; import { ApolloCache } from "apollo-cache";
import { NormalizedCacheObject } from 'apollo-cache-inmemory'; import { NormalizedCacheObject } from "apollo-cache-inmemory";
import { ICurrentUserRole } from '@/types/current-user.model'; import { ICurrentUserRole } from "@/types/current-user.model";
export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObject>) { export default function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObject>) {
cache.writeData({ cache.writeData({
data: { data: {
currentUser: { currentUser: {
__typename: 'CurrentUser', __typename: "CurrentUser",
id: null, id: null,
email: null, email: null,
isLoggedIn: false, isLoggedIn: false,
role: ICurrentUserRole.USER, role: ICurrentUserRole.USER,
}, },
currentActor: { currentActor: {
__typename: 'CurrentActor', __typename: "CurrentActor",
id: null, id: null,
preferredUsername: null, preferredUsername: null,
name: null, name: null,
@ -24,31 +24,49 @@ export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObjec
return { return {
Mutation: { Mutation: {
updateCurrentUser: (_, { id, email, isLoggedIn, role }, { cache }) => { updateCurrentUser: (
_: any,
{
id,
email,
isLoggedIn,
role,
}: { id: string; email: string; isLoggedIn: boolean; role: string },
{ cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
) => {
const data = { const data = {
currentUser: { currentUser: {
id, id,
email, email,
isLoggedIn, isLoggedIn,
role, role,
__typename: 'CurrentUser', __typename: "CurrentUser",
}, },
}; };
cache.writeData({ data }); localCache.writeData({ data });
}, },
updateCurrentActor: (_, { id, preferredUsername, avatar, name }, { cache }) => { updateCurrentActor: (
_: any,
{
id,
preferredUsername,
avatar,
name,
}: { id: string; preferredUsername: string; avatar: string; name: string },
{ cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
) => {
const data = { const data = {
currentActor: { currentActor: {
id, id,
preferredUsername, preferredUsername,
avatar, avatar,
name, name,
__typename: 'CurrentActor', __typename: "CurrentActor",
}, },
}; };
cache.writeData({ data }); localCache.writeData({ data });
}, },
}, },
}; };

63
js/src/apollo/utils.ts Normal file
View File

@ -0,0 +1,63 @@
import { IntrospectionFragmentMatcher, NormalizedCacheObject } from "apollo-cache-inmemory";
import { IError, errors, defaultError, refreshSuggestion } from "@/utils/errors";
import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants";
import { REFRESH_TOKEN } from "@/graphql/auth";
import { saveTokenData } from "@/utils/auth";
import { ApolloClient } from "apollo-client";
export const fragmentMatcher = new IntrospectionFragmentMatcher({
introspectionQueryResultData: {
__schema: {
types: [
{
kind: "UNION",
name: "SearchResult",
possibleTypes: [{ name: "Event" }, { name: "Person" }, { name: "Group" }],
},
{
kind: "INTERFACE",
name: "Actor",
possibleTypes: [{ name: "Person" }, { name: "Group" }],
},
],
},
},
});
export const computeErrorMessage = (message: any) => {
const error: IError = errors.reduce((acc, errorLocal) => {
if (RegExp(errorLocal.match).test(message)) {
return errorLocal;
}
return acc;
}, defaultError);
if (error.value === null) return null;
return error.suggestRefresh === false ? error.value : `${error.value}<br>${refreshSuggestion}`;
};
export async function refreshAccessToken(
apolloClient: ApolloClient<NormalizedCacheObject>
): Promise<boolean> {
// Remove invalid access token, so the next request is not authenticated
localStorage.removeItem(AUTH_ACCESS_TOKEN);
const refreshToken = localStorage.getItem(AUTH_REFRESH_TOKEN);
console.log("Refreshing access token.");
try {
const res = await apolloClient.mutate({
mutation: REFRESH_TOKEN,
variables: {
refreshToken,
},
});
saveTokenData(res.data.refreshToken);
return true;
} catch (err) {
return false;
}
}

View File

@ -1 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78"><g data-name="header"><path d="M0 45.82l3.18-40.8a29.88 29.88 0 015.07-.36 27.74 27.74 0 014.95.36l4.86 17.16a92.19 92.19 0 012.34 10.08h.36a92.19 92.19 0 012.34-10.08L28 5.02a29.23 29.23 0 015-.36 29.23 29.23 0 015 .36l3.18 40.8a13.61 13.61 0 01-3.63.42 23.41 23.41 0 01-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84h-.44l-7.32 26.51a25.62 25.62 0 01-4 .3 23.36 23.36 0 01-3.84-.3L9.36 13.24H9q-.3 8.94-.48 12.84L7.26 46a22.47 22.47 0 01-3.6.24A13.75 13.75 0 010 45.82zM74 31.06q0 8-4.26 12.3a12.21 12.21 0 01-9 3.42 12.21 12.21 0 01-9-3.42q-4.26-4.26-4.26-12.3t4.24-12.31a12.21 12.21 0 019-3.42 12.21 12.21 0 019 3.42Q74 23.02 74 31.06zM60.75 20.98q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM103.2 19.75q2.7 4.11 2.7 11.28T102 42.31a13.18 13.18 0 01-10 4.11 31.41 31.41 0 01-11.34-2V2.2l.4-.45h2.76A4 4 0 0187 2.83a5.38 5.38 0 01.93 3.57v11.94a12.08 12.08 0 017.56-2.7 8.71 8.71 0 017.71 4.11zm-9.72 2a7.28 7.28 0 00-5.58 2.82v16a15 15 0 004.08.54 5.25 5.25 0 004.68-2.67q1.68-2.67 1.68-7.59 0-9.03-4.86-9.1zM121 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014 1.62A6.27 6.27 0 01121 22z"/><path d="M119.82.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff"/><path d="M139.08 40.42h2a10.23 10.23 0 01.6 3.18 9.24 9.24 0 01-.18 2.1 38.47 38.47 0 01-5.64.54q-6.48 0-6.48-7v-37l.36-.42h2.88a3.94 3.94 0 013.12 1.05 5.52 5.52 0 01.9 3.57v31.31q-.02 2.67 2.44 2.67zM155.94 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014.05 1.62 6.27 6.27 0 011.43 4.39z"/><path d="M154.8 2.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff"/><path d="M163.08 39.22l8.76-11.82q1.32-1.8 4.8-5.7l-.18-.3a63.09 63.09 0 01-7.74.42H163a9.79 9.79 0 01-.24-2.34 15.8 15.8 0 01.42-3.3h20.4a16.31 16.31 0 011 4.26 4.1 4.1 0 01-.78 2.34L175 34.66a64.65 64.65 0 01-4.56 5.7l.18.24q3.12-.3 5.22-.3h2.58a15.35 15.35 0 006.12-.9 9.4 9.4 0 01.72 3.12q0 3.42-4.32 3.42h-18a14.27 14.27 0 01-.9-3.93 5.08 5.08 0 011.04-2.79zM215.88 31.06q0 8-4.26 12.3a13.63 13.63 0 01-18.06 0q-4.26-4.26-4.26-12.3t4.26-12.31a13.63 13.63 0 0118.06 0q4.26 4.27 4.26 12.31zm-13.29-10.08q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM247 25.84v13.32a11 11 0 001.2 5.64 7 7 0 01-4.41 1.56q-2.43 0-3.33-1.14a5.69 5.69 0 01-.9-3.54V27.4a7.74 7.74 0 00-.72-3.87 2.78 2.78 0 00-2.58-1.17 8.62 8.62 0 00-6.3 3v20.58a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3v-29.7l.42-.36h2.76q3.42 0 4.08 3.6 4.38-3.84 8.73-3.84t6.42 2.82a12.17 12.17 0 012.07 7.38z"/><path d="M57.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84zM198.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84z" fill="#fff"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
<title>Mobilizon Logo</title>
<g data-name="header">
<path d="M0 45.82l3.18-40.8a29.88 29.88 0 015.07-.36 27.74 27.74 0 014.95.36l4.86 17.16a92.19 92.19 0 012.34 10.08h.36a92.19 92.19 0 012.34-10.08L28 5.02a29.23 29.23 0 015-.36 29.23 29.23 0 015 .36l3.18 40.8a13.61 13.61 0 01-3.63.42 23.41 23.41 0 01-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84h-.44l-7.32 26.51a25.62 25.62 0 01-4 .3 23.36 23.36 0 01-3.84-.3L9.36 13.24H9q-.3 8.94-.48 12.84L7.26 46a22.47 22.47 0 01-3.6.24A13.75 13.75 0 010 45.82zM74 31.06q0 8-4.26 12.3a12.21 12.21 0 01-9 3.42 12.21 12.21 0 01-9-3.42q-4.26-4.26-4.26-12.3t4.24-12.31a12.21 12.21 0 019-3.42 12.21 12.21 0 019 3.42Q74 23.02 74 31.06zM60.75 20.98q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM103.2 19.75q2.7 4.11 2.7 11.28T102 42.31a13.18 13.18 0 01-10 4.11 31.41 31.41 0 01-11.34-2V2.2l.4-.45h2.76A4 4 0 0187 2.83a5.38 5.38 0 01.93 3.57v11.94a12.08 12.08 0 017.56-2.7 8.71 8.71 0 017.71 4.11zm-9.72 2a7.28 7.28 0 00-5.58 2.82v16a15 15 0 004.08.54 5.25 5.25 0 004.68-2.67q1.68-2.67 1.68-7.59 0-9.03-4.86-9.1zM121 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014 1.62A6.27 6.27 0 01121 22z" />
<path d="M119.82.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
<path d="M139.08 40.42h2a10.23 10.23 0 01.6 3.18 9.24 9.24 0 01-.18 2.1 38.47 38.47 0 01-5.64.54q-6.48 0-6.48-7v-37l.36-.42h2.88a3.94 3.94 0 013.12 1.05 5.52 5.52 0 01.9 3.57v31.31q-.02 2.67 2.44 2.67zM155.94 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014.05 1.62 6.27 6.27 0 011.43 4.39z" />
<path d="M154.8 2.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z" fill="#fff" />
<path d="M163.08 39.22l8.76-11.82q1.32-1.8 4.8-5.7l-.18-.3a63.09 63.09 0 01-7.74.42H163a9.79 9.79 0 01-.24-2.34 15.8 15.8 0 01.42-3.3h20.4a16.31 16.31 0 011 4.26 4.1 4.1 0 01-.78 2.34L175 34.66a64.65 64.65 0 01-4.56 5.7l.18.24q3.12-.3 5.22-.3h2.58a15.35 15.35 0 006.12-.9 9.4 9.4 0 01.72 3.12q0 3.42-4.32 3.42h-18a14.27 14.27 0 01-.9-3.93 5.08 5.08 0 011.04-2.79zM215.88 31.06q0 8-4.26 12.3a13.63 13.63 0 01-18.06 0q-4.26-4.26-4.26-12.3t4.26-12.31a13.63 13.63 0 0118.06 0q4.26 4.27 4.26 12.31zm-13.29-10.08q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM247 25.84v13.32a11 11 0 001.2 5.64 7 7 0 01-4.41 1.56q-2.43 0-3.33-1.14a5.69 5.69 0 01-.9-3.54V27.4a7.74 7.74 0 00-.72-3.87 2.78 2.78 0 00-2.58-1.17 8.62 8.62 0 00-6.3 3v20.58a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3v-29.7l.42-.36h2.76q3.42 0 4.08 3.6 4.38-3.84 8.73-3.84t6.42 2.82a12.17 12.17 0 012.07 7.38z" />
<path d="M57.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84zM198.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84z" fill="#fff" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,109 @@
<template>
<b-autocomplete
:data="baseData"
:placeholder="$t('Actor')"
v-model="name"
field="preferredUsername"
:loading="$apollo.loading"
check-infinite-scroll
@typing="getAsyncData"
@select="handleSelect"
@infinite-scroll="getAsyncData"
>
<template slot-scope="props">
<div class="media">
<div class="media-left">
<img width="32" :src="props.option.avatar.url" v-if="props.option.avatar" alt="" />
<b-icon v-else icon="account-circle" />
</div>
<div class="media-content">
<span v-if="props.option.name">
{{ props.option.name }}
<br />
<small>{{ `@${props.option.preferredUsername}` }}</small>
<small v-if="props.option.domain">{{ `@${props.option.domain}` }}</small>
</span>
<span v-else>
{{ `@${props.option.preferredUsername}` }}
</span>
</div>
</div>
</template>
<template slot="footer">
<span class="has-text-grey" v-show="page > totalPages">
Thats it! No more movies found.
</span>
</template>
</b-autocomplete>
</template>
<script lang="ts">
import { Component, Model, Vue, Watch } from "vue-property-decorator";
import { debounce } from "lodash";
import { IPerson } from "@/types/actor";
import { SEARCH_PERSONS } from "@/graphql/search";
import { Paginate } from "@/types/paginate";
const SEARCH_PERSON_LIMIT = 10;
@Component
export default class ActorAutoComplete extends Vue {
@Model("change", { type: Object }) readonly defaultSelected!: IPerson | null;
baseData: IPerson[] = [];
selected: IPerson | null = this.defaultSelected;
name: string = this.defaultSelected ? this.defaultSelected.preferredUsername : "";
page = 1;
totalPages = 1;
mounted() {
this.selected = this.defaultSelected;
}
data() {
return {
getAsyncData: debounce(this.doGetAsyncData, 500),
};
}
@Watch("defaultSelected")
updateDefaultSelected(defaultSelected: IPerson) {
console.log("update defaultSelected", defaultSelected);
this.selected = defaultSelected;
this.name = defaultSelected.preferredUsername;
}
handleSelect(selected: IPerson) {
this.selected = selected;
this.$emit("change", selected);
}
async doGetAsyncData(name: string) {
this.baseData = [];
if (this.name !== name) {
this.name = name;
this.page = 1;
}
if (!name.length) {
this.page = 1;
this.totalPages = 1;
return;
}
const {
data: { searchPersons },
} = await this.$apollo.query<{ searchPersons: Paginate<IPerson> }>({
query: SEARCH_PERSONS,
variables: {
searchText: this.name,
page: this.page,
limit: SEARCH_PERSON_LIMIT,
},
});
this.totalPages = Math.ceil(searchPersons.total / SEARCH_PERSON_LIMIT);
this.baseData.push(...searchPersons.elements);
}
}
</script>

View File

@ -0,0 +1,152 @@
<template>
<div class="clickable">
<div class="media" style="align-items: top;">
<div class="media-left">
<figure class="image is-32x32" v-if="actor.avatar">
<img class="is-rounded" :src="actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="media-content">
<p>
{{ actor.name || `@${usernameWithDomain(actor)}` }}
</p>
<p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p>
<p v-if="full">{{ actor.summary }}</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { IActor, usernameWithDomain } from "../../types/actor";
@Component
export default class ActorCard extends Vue {
@Prop({ required: true, type: Object }) actor!: IActor;
@Prop({ required: false, type: Boolean, default: false }) full!: boolean;
@Prop({ required: false, type: Boolean, default: true }) popover!: boolean;
usernameWithDomain = usernameWithDomain;
}
</script>
<style lang="scss" scoped>
.clickable {
cursor: pointer;
}
</style>
<style lang="scss">
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, 0.1);
}
.popover-arrow {
border-color: $color;
}
}
&[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
&[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
}
}
</style>

View File

@ -1,76 +0,0 @@
<docs>
A simple link to an actor, local or remote link
```vue
<template>
<ActorLink :actor="localActor">
<template>
<span>{{ localActor.preferredUsername }}</span>
</template>
</ActorLink>
</template>
<script>
export default {
data() {
return {
localActor: {
domain: null,
preferredUsername: 'localActor'
},
}
}
}
</script>
```
```vue
<template>
<ActorLink :actor="remoteActor">
<template>
<span>{{ remoteActor.preferredUsername }}</span>
</template>
</ActorLink>
</template>
<script>
export default {
data() {
return {
remoteActor: {
domain: 'mobilizon.org',
url: 'https://mobilizon.org/@Framasoft',
preferredUsername: 'Framasoft'
},
}
}
}
</script>
```
</docs>
<template>
<span>
<span v-if="actor.domain === null"
:to="{name: 'Profile', params: { name: actor.preferredUsername } }"
>
<!-- @slot What to put inside the link -->
<slot></slot>
</span>
<a v-else :href="actor.url">
<!-- @slot What to put inside the link -->
<slot></slot>
</a>
</span>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IActor } from '@/types/actor';
@Component
export default class ActorLink extends Vue {
/**
* The actor you want to make a link to
*/
@Prop({ required: true }) actor!: IActor;
}
</script>

View File

@ -1,18 +1,19 @@
<template> <template>
<section> <section>
<h1 class="title"> <h1 class="title">
{{ $t('My identities') }} {{ $t("My identities") }}
</h1> </h1>
<ul class="identities"> <ul class="identities">
<li v-for="identity in identities" :key="identity.id"> <li v-for="identity in identities" :key="identity.id">
<router-link <router-link
:to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }" :to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }"
class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }" class="media identity"
v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
> >
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="identity.avatar"> <figure class="image is-48x48" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url"> <img class="is-rounded" :src="identity.avatar.url" />
</figure> </figure>
</div> </div>
@ -23,24 +24,24 @@
</li> </li>
</ul> </ul>
<router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary" > <router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary">
{{ $t('Create a new identity') }} {{ $t("Create a new identity") }}
</router-link> </router-link>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { IDENTITIES } from '@/graphql/actor'; import { IDENTITIES } from "../../graphql/actor";
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from "../../types/actor";
@Component({ @Component({
apollo: { apollo: {
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update (result) { update(result) {
return result.identities.map(i => new Person(i)); return result.identities.map((i: IPerson) => new Person(i));
}, },
}, },
}, },
@ -49,6 +50,7 @@ export default class Identities extends Vue {
@Prop({ type: String }) currentIdentityName!: string; @Prop({ type: String }) currentIdentityName!: string;
identities: Person[] = []; identities: Person[] = [];
errors: string[] = []; errors: string[] = [];
isCurrentIdentity(identity: IPerson) { isCurrentIdentity(identity: IPerson) {
@ -58,25 +60,25 @@ export default class Identities extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.identities { .identities {
border-right: 1px solid grey; border-right: 1px solid grey;
padding: 15px 0; padding: 15px 0;
}
.media.identity {
align-items: center;
font-size: 1.3rem;
padding-bottom: 0;
margin-bottom: 15px;
color: #000;
&.is-current-identity {
background-color: rgba(0, 0, 0, 0.1);
} }
}
.media.identity { .title {
align-items: center; margin-bottom: 30px;
font-size: 1.3rem; }
padding-bottom: 0; </style>
margin-bottom: 15px;
color: #000;
&.is-current-identity {
background-color: rgba(0, 0, 0, 0.1);
}
}
.title {
margin-bottom: 30px;
}
</style>

View File

@ -25,32 +25,58 @@
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
<span ref="title">{{ actorDisplayName }}</span><br> <span ref="title">{{ actorDisplayName }}</span
<small class="has-text-grey" v-if="participant.actor.domain">@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small> ><br />
<small class="has-text-grey" v-if="participant.actor.domain"
>@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small
>
<small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small> <small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small>
</div> </div>
</div> </div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<b-button v-if="[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)" @click="accept(participant)" type="is-success" class="card-footer-item">{{ $t('Approve') }}</b-button> <b-button
<b-button v-if="participant.role === ParticipantRole.NOT_APPROVED" @click="reject(participant)" type="is-danger" class="card-footer-item">{{ $t('Reject')}}</b-button> v-if="[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)"
<b-button v-if="participant.role === ParticipantRole.PARTICIPANT" @click="exclude(participant)" type="is-danger" class="card-footer-item">{{ $t('Exclude')}}</b-button> @click="accept(participant)"
<span v-if="participant.role === ParticipantRole.CREATOR" class="card-footer-item">{{ $t('Creator')}}</span> type="is-success"
</footer> class="card-footer-item"
>{{ $t("Approve") }}</b-button
>
<b-button
v-if="participant.role === ParticipantRole.NOT_APPROVED"
@click="reject(participant)"
type="is-danger"
class="card-footer-item"
>{{ $t("Reject") }}</b-button
>
<b-button
v-if="participant.role === ParticipantRole.PARTICIPANT"
@click="exclude(participant)"
type="is-danger"
class="card-footer-item"
>{{ $t("Exclude") }}</b-button
>
<span v-if="participant.role === ParticipantRole.CREATOR" class="card-footer-item">{{
$t("Creator")
}}</span>
</footer>
</article> </article>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { Person } from '@/types/actor'; import { Person } from "../../types/actor";
import { IParticipant, ParticipantRole } from '@/types/event.model'; import { IParticipant, ParticipantRole } from "../../types/event.model";
@Component @Component
export default class ParticipantCard extends Vue { export default class ParticipantCard extends Vue {
@Prop({ required: true }) participant!: IParticipant; @Prop({ required: true }) participant!: IParticipant;
@Prop({ type: Function }) accept;
@Prop({ type: Function }) reject; @Prop({ type: Function }) accept!: Function;
@Prop({ type: Function }) exclude;
@Prop({ type: Function }) reject!: Function;
@Prop({ type: Function }) exclude!: Function;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
@ -58,13 +84,12 @@ export default class ParticipantCard extends Vue {
const actor = new Person(this.participant.actor); const actor = new Person(this.participant.actor);
return actor.displayName(); return actor.displayName();
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables.scss"; @import "../../variables.scss";
.card-footer-item { .card-footer-item {
height: $control-height; height: $control-height;
} }
</style> </style>

View File

@ -0,0 +1,33 @@
<template>
<v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
<slot></slot>
<template slot="popover" class="popover">
<actor-card :full="true" :actor="actor" :popover="false" />
</template>
</v-popover>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { IActor } from "../../types/actor";
import ActorCard from "./ActorCard.vue";
@Component({
components: {
ActorCard,
},
})
export default class PopoverActorCard extends Vue {
@Prop({ required: true, type: Object }) actor!: IActor;
@Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
}
</script>
<style lang="scss" scoped>
.inline {
display: inline;
}
.clickable {
cursor: pointer;
}
</style>

View File

@ -1,104 +1,123 @@
<template> <template>
<div> <div>
<b-table <b-table
v-show="relayFollowers.elements.length > 0" v-show="relayFollowers.elements.length > 0"
:data="relayFollowers.elements" :data="relayFollowers.elements"
:loading="$apollo.queries.relayFollowers.loading" :loading="$apollo.queries.relayFollowers.loading"
ref="table" ref="table"
:checked-rows.sync="checkedRows" :checked-rows.sync="checkedRows"
detailed detailed
:show-detail-icon="false" :show-detail-icon="false"
paginated paginated
backend-pagination backend-pagination
:total="relayFollowers.total" :total="relayFollowers.total"
:per-page="perPage" :per-page="perPage"
@page-change="onPageChange" @page-change="onPageChange"
checkable checkable
checkbox-position="left"> checkbox-position="left"
<template slot-scope="props"> >
<b-table-column field="actor.id" label="ID" width="40" numeric> <template slot-scope="props">
{{ props.row.actor.id }} <b-table-column field="actor.id" label="ID" width="40" numeric>{{
</b-table-column> props.row.actor.id
}}</b-table-column>
<b-table-column field="actor.type" :label="$t('Type')" width="80"> <b-table-column field="actor.type" :label="$t('Type')" width="80">
<b-icon icon="lan" v-if="isInstance(props.row.actor)" /> <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
<b-icon icon="account-circle" v-else /> <b-icon icon="account-circle" v-else />
</b-table-column> </b-table-column>
<b-table-column field="approved" :label="$t('Status')" width="100" sortable centered> <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger' }`"> <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
{{ props.row.approved ? $t('Accepted') : $t('Pending') }} props.row.approved ? $t("Accepted") : $t("Pending")
</span> }}</span>
</b-table-column> </b-table-column>
<b-table-column field="actor.domain" :label="$t('Domain')" sortable> <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
<template> <template>
<a @click="toggle(props.row)" v-if="isInstance(props.row.actor)"> <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
{{ props.row.actor.domain }} props.row.actor.domain
</a> }}</a>
<a @click="toggle(props.row)" v-else> <a @click="toggle(props.row)" v-else>{{
{{ `${props.row.actor.preferredUsername}@${props.row.actor.domain}` }} `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
</a> }}</a>
</template> </template>
</b-table-column> </b-table-column>
<b-table-column field="actor.updatedAt" :label="$t('Date')" sortable> <b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>{{
{{ props.row.updatedAt | formatDateTimeString }} props.row.updatedAt | formatDateTimeString
</b-table-column> }}</b-table-column>
</template> </template>
<template slot="detail" slot-scope="props"> <template slot="detail" slot-scope="props">
<article> <article>
<div class="content"> <div class="content">
<strong>{{ props.row.actor.domain }}</strong> <strong>{{ props.row.actor.domain }}</strong>
<small>@{{ props.row.actor.preferredUsername }}</small> <small>@{{ props.row.actor.preferredUsername }}</small>
<small>31m</small> <small>31m</small>
<br> <br />
<p v-html="props.row.actor.summary" /> <p v-html="props.row.actor.summary" />
</div> </div>
</article> </article>
</template> </template>
<template slot="bottom-left" v-if="checkedRows.length > 0"> <template slot="bottom-left" v-if="checkedRows.length > 0">
<div class="buttons"> <div class="buttons">
<b-button @click="acceptRelays" type="is-success" v-if="checkedRowsHaveAtLeastOneToApprove"> <b-button
{{ $tc('No instance to approve|Approve instance|Approve {number} instances', checkedRows.length, { number: checkedRows.length }) }} @click="acceptRelays"
</b-button> type="is-success"
<b-button @click="rejectRelays" type="is-danger"> v-if="checkedRowsHaveAtLeastOneToApprove"
{{ $tc('No instance to reject|Reject instance|Reject {number} instances', checkedRows.length, { number: checkedRows.length }) }} >
</b-button> {{
</div> $tc(
</template> "No instance to approve|Approve instance|Approve {number} instances",
</b-table> checkedRows.length,
<b-message type="is-danger" v-if="relayFollowers.elements.length === 0"> { number: checkedRows.length }
{{ $t("No instance follows your instance yet.") }} )
</b-message> }}
</div> </b-button>
<b-button @click="rejectRelays" type="is-danger">
{{
$tc(
"No instance to reject|Reject instance|Reject {number} instances",
checkedRows.length,
{ number: checkedRows.length }
)
}}
</b-button>
</div>
</template>
</b-table>
<b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
$t("No instance follows your instance yet.")
}}</b-message>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'; import { Component, Mixins } from "vue-property-decorator";
import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from '@/graphql/admin'; import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from "../../graphql/admin";
import { Paginate } from '@/types/paginate'; import { Paginate } from "../../types/paginate";
import { IFollower } from '@/types/actor/follower.model'; import { IFollower } from "../../types/actor/follower.model";
import RelayMixin from '@/mixins/relay'; import RelayMixin from "../../mixins/relay";
@Component({ @Component({
apollo: { apollo: {
relayFollowers: { relayFollowers: {
query: RELAY_FOLLOWERS, query: RELAY_FOLLOWERS,
fetchPolicy: 'cache-and-network', fetchPolicy: "cache-and-network",
}, },
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$t('Followers') as string, title: this.$t("Followers") as string,
titleTemplate: '%s | Mobilizon', titleTemplate: "%s | Mobilizon",
}; };
}, },
}) })
export default class Followers extends Mixins(RelayMixin) { export default class Followers extends Mixins(RelayMixin) {
relayFollowers: Paginate<IFollower> = { elements: [], total: 0 }; relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
RelayMixin = RelayMixin;
async acceptRelays() { async acceptRelays() {
await this.checkedRows.forEach((row: IFollower) => { await this.checkedRows.forEach((row: IFollower) => {
this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`); this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
@ -111,7 +130,7 @@ export default class Followers extends Mixins(RelayMixin) {
}); });
} }
async acceptRelay(address: String) { async acceptRelay(address: string) {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: ACCEPT_RELAY, mutation: ACCEPT_RELAY,
variables: { variables: {
@ -122,7 +141,7 @@ export default class Followers extends Mixins(RelayMixin) {
this.checkedRows = []; this.checkedRows = [];
} }
async rejectRelay(address: String) { async rejectRelay(address: string) {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: REJECT_RELAY, mutation: REJECT_RELAY,
variables: { variables: {
@ -134,7 +153,7 @@ export default class Followers extends Mixins(RelayMixin) {
} }
get checkedRowsHaveAtLeastOneToApprove(): boolean { get checkedRowsHaveAtLeastOneToApprove(): boolean {
return this.checkedRows.some(checkedRow => !checkedRow.approved); return this.checkedRows.some((checkedRow) => !checkedRow.approved);
} }
} }
</script> </script>

View File

@ -1,125 +1,134 @@
<template> <template>
<div> <div>
<form @submit="followRelay"> <form @submit="followRelay">
<b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal> <b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal>
<b-field grouped expanded size="is-large"> <b-field grouped expanded size="is-large">
<p class="control"> <p class="control">
<b-input v-model="newRelayAddress" :placeholder="$t('Ex: test.mobilizon.org')" /> <b-input v-model="newRelayAddress" :placeholder="$t('Ex: test.mobilizon.org')" />
</p> </p>
<p class="control"> <p class="control">
<b-button type="is-primary" native-type="submit">{{ $t('Add an instance') }}</b-button> <b-button type="is-primary" native-type="submit">{{ $t("Add an instance") }}</b-button>
</p> </p>
</b-field> </b-field>
</b-field> </b-field>
</form> </form>
<b-table <b-table
v-show="relayFollowings.elements.length > 0" v-show="relayFollowings.elements.length > 0"
:data="relayFollowings.elements" :data="relayFollowings.elements"
:loading="$apollo.queries.relayFollowings.loading" :loading="$apollo.queries.relayFollowings.loading"
ref="table" ref="table"
:checked-rows.sync="checkedRows" :checked-rows.sync="checkedRows"
:is-row-checkable="(row) => row.id !== 3" :is-row-checkable="(row) => row.id !== 3"
detailed detailed
:show-detail-icon="false" :show-detail-icon="false"
paginated paginated
backend-pagination backend-pagination
:total="relayFollowings.total" :total="relayFollowings.total"
:per-page="perPage" :per-page="perPage"
@page-change="onPageChange" @page-change="onPageChange"
checkable checkable
checkbox-position="left"> checkbox-position="left"
<template slot-scope="props"> >
<b-table-column field="targetActor.id" label="ID" width="40" numeric> <template slot-scope="props">
{{ props.row.targetActor.id }} <b-table-column field="targetActor.id" label="ID" width="40" numeric>{{
</b-table-column> props.row.targetActor.id
}}</b-table-column>
<b-table-column field="targetActor.type" :label="$t('Type')" width="80"> <b-table-column field="targetActor.type" :label="$t('Type')" width="80">
<b-icon icon="lan" v-if="isInstance(props.row.targetActor)" /> <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
<b-icon icon="account-circle" v-else /> <b-icon icon="account-circle" v-else />
</b-table-column> </b-table-column>
<b-table-column field="approved" :label="$t('Status')" width="100" sortable centered> <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger' }`"> <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
{{ props.row.approved ? $t('Accepted') : $t('Pending') }} props.row.approved ? $t("Accepted") : $t("Pending")
</span> }}</span>
</b-table-column> </b-table-column>
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable> <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
<template> <template>
<a @click="toggle(props.row)" v-if="isInstance(props.row.targetActor)"> <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
{{ props.row.targetActor.domain }} props.row.targetActor.domain
</a> }}</a>
<a @click="toggle(props.row)" v-else> <a @click="toggle(props.row)" v-else>{{
{{ `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}` }} `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
</a> }}</a>
</template> </template>
</b-table-column> </b-table-column>
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable> <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>{{
{{ props.row.updatedAt | formatDateTimeString }} props.row.updatedAt | formatDateTimeString
</b-table-column> }}</b-table-column>
</template> </template>
<template slot="detail" slot-scope="props"> <template slot="detail" slot-scope="props">
<article> <article>
<div class="content"> <div class="content">
<strong>{{ props.row.targetActor.domain }}</strong> <strong>{{ props.row.targetActor.domain }}</strong>
<small>@{{ props.row.targetActor.preferredUsername }}</small> <small>@{{ props.row.targetActor.preferredUsername }}</small>
<small>31m</small> <small>31m</small>
<br> <br />
<p v-html="props.row.targetActor.summary" /> <p v-html="props.row.targetActor.summary" />
</div> </div>
</article> </article>
</template> </template>
<template slot="bottom-left" v-if="checkedRows.length > 0"> <template slot="bottom-left" v-if="checkedRows.length > 0">
<b-button @click="removeRelays" type="is-danger"> <b-button @click="removeRelays" type="is-danger">
{{ $tc('No instance to remove|Remove instance|Remove {number} instances', checkedRows.length, { number: checkedRows.length }) }} {{
</b-button> $tc(
</template> "No instance to remove|Remove instance|Remove {number} instances",
</b-table> checkedRows.length,
<b-message type="is-danger" v-if="relayFollowings.elements.length === 0"> { number: checkedRows.length }
{{ $t("You don't follow any instances yet.") }} )
</b-message> }}
</div> </b-button>
</template>
</b-table>
<b-message type="is-danger" v-if="relayFollowings.elements.length === 0">{{
$t("You don't follow any instances yet.")
}}</b-message>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'; import { Component, Mixins } from "vue-property-decorator";
import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from '@/graphql/admin'; import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
import { IFollower } from '@/types/actor/follower.model'; import { IFollower } from "../../types/actor/follower.model";
import { Paginate } from '@/types/paginate'; import { Paginate } from "../../types/paginate";
import RelayMixin from '@/mixins/relay'; import RelayMixin from "../../mixins/relay";
@Component({ @Component({
apollo: { apollo: {
relayFollowings: { relayFollowings: {
query: RELAY_FOLLOWINGS, query: RELAY_FOLLOWINGS,
fetchPolicy: 'cache-and-network', fetchPolicy: "cache-and-network",
}, },
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$t('Followings') as string, title: this.$t("Followings") as string,
titleTemplate: '%s | Mobilizon', titleTemplate: "%s | Mobilizon",
}; };
}, },
}) })
export default class Followings extends Mixins(RelayMixin) { export default class Followings extends Mixins(RelayMixin) {
relayFollowings: Paginate<IFollower> = { elements: [], total: 0 }; relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
newRelayAddress: String = '';
async followRelay(e) { newRelayAddress = "";
RelayMixin = RelayMixin;
async followRelay(e: Event) {
e.preventDefault(); e.preventDefault();
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: ADD_RELAY, mutation: ADD_RELAY,
variables: { variables: {
address: this.newRelayAddress, address: this.newRelayAddress,
}, },
// TODO: Handle cache update properly without refreshing // TODO: Handle cache update properly without refreshing
}); });
await this.$apollo.queries.relayFollowings.refetch(); await this.$apollo.queries.relayFollowings.refetch();
this.newRelayAddress = ''; this.newRelayAddress = "";
} }
async removeRelays() { async removeRelays() {
@ -128,7 +137,7 @@ export default class Followings extends Mixins(RelayMixin) {
}); });
} }
async removeRelay(address: String) { async removeRelay(address: string) {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: REMOVE_RELAY, mutation: REMOVE_RELAY,
variables: { variables: {
@ -139,4 +148,4 @@ export default class Followings extends Mixins(RelayMixin) {
this.checkedRows = []; this.checkedRows = [];
} }
} }
</script> </script>

View File

@ -1,112 +1,130 @@
<template> <template>
<li :class="{ reply: comment.inReplyToComment }"> <li :class="{ reply: comment.inReplyToComment }">
<article class="media" :class="{ selected: commentSelected, organizer: commentFromOrganizer }" :id="commentId"> <article
<figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar"> class="media"
<p class="image is-48x48"> :class="{ selected: commentSelected, organizer: commentFromOrganizer }"
<img :src="comment.actor.avatar.url" alt=""> :id="commentId"
</p> >
</figure> <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <p class="image is-48x48">
<div class="media-content"> <img :src="comment.actor.avatar.url" alt="" />
<div class="content"> </p>
<span class="first-line" v-if="!comment.deletedAt"> </figure>
<strong>{{ comment.actor.name }}</strong> <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
<small v-if="comment.actor.domain">@{{ comment.actor.preferredUsername }}@{{ comment.actor.domain }}</small> <div class="media-content">
<small v-else>@{{ comment.actor.preferredUsername }}</small> <div class="content">
<a class="comment-link has-text-grey" :href="commentURL"> <span class="first-line" v-if="!comment.deletedAt">
<small>{{ timeago(new Date(comment.updatedAt)) }}</small> <strong>{{ comment.actor.name }}</strong>
</a> <small v-if="comment.actor.domain"
</span> >@{{ comment.actor.preferredUsername }}@{{ comment.actor.domain }}</small
<a v-else class="comment-link has-text-grey" :href="commentURL"> >
<span>{{ $t('[deleted]') }}</span> <small v-else>@{{ comment.actor.preferredUsername }}</small>
</a> <a class="comment-link has-text-grey" :href="commentURL">
<span class="icons" v-if="!comment.deletedAt"> <small>{{ timeago(new Date(comment.updatedAt)) }}</small>
<span v-if="comment.actor.id === currentActor.id" </a>
@click="$emit('delete-comment', comment)"> </span>
<b-icon <a v-else class="comment-link has-text-grey" :href="commentURL">
icon="delete" <span>{{ $t("[deleted]") }}</span>
size="is-small" </a>
/> <span class="icons" v-if="!comment.deletedAt">
</span> <button
<span @click="reportModal()"> v-if="comment.actor.id === currentActor.id"
<b-icon @click="$emit('delete-comment', comment)"
icon="alert" >
size="is-small" <b-icon icon="delete" size="is-small" aria-hidden="true" />
/> <span class="visually-hidden">{{ $t("Delete") }}</span>
</span> </button>
</span> <button @click="reportModal()">
<br> <b-icon icon="alert" size="is-small" />
<div v-if="!comment.deletedAt" v-html="comment.text" /> <span class="visually-hidden">{{ $t("Report") }}</span>
<div v-else>{{ $t('[This comment has been deleted]') }}</div> </button>
<span class="load-replies" v-if="comment.totalReplies"> </span>
<span v-if="!showReplies" @click="fetchReplies"> <br />
{{ $tc('View a reply', comment.totalReplies, { totalReplies: comment.totalReplies }) }} <div v-if="!comment.deletedAt" v-html="comment.text" />
</span> <div v-else>{{ $t("[This comment has been deleted]") }}</div>
<span v-else-if="comment.totalReplies && showReplies" @click="showReplies = false"> <span class="load-replies" v-if="comment.totalReplies">
{{ $t('Hide replies') }} <span v-if="!showReplies" @click="fetchReplies">
</span> {{
</span> $tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies })
</div> }}
<nav class="reply-action level is-mobile" v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"> </span>
<div class="level-left"> <span v-else-if="comment.totalReplies && showReplies" @click="showReplies = false">
<span style="cursor: pointer" class="level-item" @click="createReplyToComment(comment)"> {{ $t("Hide replies") }}
<span class="icon is-small"> </span>
<b-icon icon="reply" /> </span>
</span> </div>
{{ $t('Reply') }} <nav
</span> class="reply-action level is-mobile"
</div> v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"
</nav> >
</div> <div class="level-left">
</article> <span
<form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo"> style="cursor: pointer;"
<article class="media reply"> class="level-item"
<figure class="media-left" v-if="currentActor.avatar"> @click="createReplyToComment(comment)"
<p class="image is-48x48"> >
<img :src="currentActor.avatar.url" alt=""> <span class="icon is-small">
</p> <b-icon icon="reply" />
</figure> </span>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> {{ $t("Reply") }}
<div class="media-content"> </span>
<div class="content"> </div>
<span class="first-line"> </nav>
<strong>{{ currentActor.name}}</strong> </div>
<small>@{{ currentActor.preferredUsername }}</small> </article>
</span> <form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo">
<br> <article class="media reply">
<span class="editor-line"> <figure class="media-left" v-if="currentActor.avatar">
<editor class="editor" ref="commenteditor" v-model="newComment.text" mode="comment" /> <p class="image is-48x48">
<b-button :disabled="newComment.text.trim().length === 0" native-type="submit" type="is-info">{{ $t('Post a reply') }}</b-button> <img :src="currentActor.avatar.url" alt="" />
</span> </p>
</div> </figure>
</div> <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
</article> <div class="media-content">
</form> <div class="content">
<transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul"> <span class="first-line">
<comment <strong>{{ currentActor.name }}</strong>
class="reply" <small>@{{ currentActor.preferredUsername }}</small>
v-for="reply in comment.replies" </span>
:key="reply.id" <br />
:comment="reply" <span class="editor-line">
:event="event" <editor class="editor" ref="commentEditor" v-model="newComment.text" mode="comment" />
@create-comment="$emit('create-comment', $event)" <b-button
@delete-comment="$emit('delete-comment', $event)" /> :disabled="newComment.text.trim().length === 0"
</transition-group> native-type="submit"
</li> type="is-info"
>{{ $t("Post a reply") }}</b-button
>
</span>
</div>
</div>
</article>
</form>
<transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
<comment
class="reply"
v-for="reply in comment.replies"
:key="reply.id"
:comment="reply"
:event="event"
@create-comment="$emit('create-comment', $event)"
@delete-comment="$emit('delete-comment', $event)"
/>
</transition-group>
</li>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { CommentModel, IComment } from '@/types/comment.model'; import EditorComponent from "@/components/Editor.vue";
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import TimeAgo from "javascript-time-ago";
import { IPerson } from '@/types/actor'; import { CommentModel, IComment } from "../../types/comment.model";
import { Refs } from '@/shims-vue'; import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import EditorComponent from '@/components/Editor.vue'; import { IPerson } from "../../types/actor";
import TimeAgo from 'javascript-time-ago'; import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from '@/graphql/comment'; import { IEvent, CommentModeration } from "../../types/event.model";
import { IEvent, CommentModeration } from '@/types/event.model'; import ReportModal from "../Report/ReportModal.vue";
import ReportModal from '@/components/Report/ReportModal.vue'; import { IReport } from "../../types/report.model";
import { IReport } from '@/types/report.model'; import { CREATE_REPORT } from "../../graphql/report";
import { CREATE_REPORT } from '@/graphql/report';
@Component({ @Component({
apollo: { apollo: {
@ -115,23 +133,29 @@ import { CREATE_REPORT } from '@/graphql/report';
}, },
}, },
components: { components: {
editor: () => import(/* webpackChunkName: "editor" */ '@/components/Editor.vue'), editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
comment: () => import(/* webpackChunkName: "comment" */ './Comment.vue'), comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
}, },
}) })
export default class Comment extends Vue { export default class Comment extends Vue {
@Prop({ required: true, type: Object }) comment!: IComment; @Prop({ required: true, type: Object }) comment!: IComment;
@Prop({ required: true, type: Object }) event!: IEvent; @Prop({ required: true, type: Object }) event!: IEvent;
$refs!: Refs<{ // Hack because Vue only exports it's own interface.
commenteditor: EditorComponent, // See https://github.com/kaorun343/vue-property-decorator/issues/257
}>; @Ref() readonly commentEditor!: EditorComponent & { replyToComment: (comment: IComment) => void };
currentActor!: IPerson; currentActor!: IPerson;
newComment: IComment = new CommentModel(); newComment: IComment = new CommentModel();
replyTo: boolean = false;
showReplies: boolean = false; replyTo = false;
timeAgoInstance = null;
showReplies = false;
timeAgoInstance: TimeAgo | null = null;
CommentModeration = CommentModeration; CommentModeration = CommentModeration;
async mounted() { async mounted() {
@ -140,7 +164,7 @@ export default class Comment extends Vue {
TimeAgo.addLocale(locale); TimeAgo.addLocale(locale);
this.timeAgoInstance = new TimeAgo(localeName); this.timeAgoInstance = new TimeAgo(localeName);
const hash = this.$route.hash; const { hash } = this.$route;
if (hash.includes(`#comment-${this.comment.uuid}`)) { if (hash.includes(`#comment-${this.comment.uuid}`)) {
this.fetchReplies(); this.fetchReplies();
} }
@ -153,18 +177,17 @@ export default class Comment extends Vue {
return; return;
} }
this.replyTo = true; this.replyTo = true;
// this.newComment.inReplyToComment = comment; // this.newComment.inReplyToComment = comment;
await this.$nextTick(); await this.$nextTick();
await this.$nextTick(); // For some reason commenteditor needs two $nextTick() to fully render await this.$nextTick(); // For some reason commenteditor needs two $nextTick() to fully render
const commentEditor = this.$refs.commenteditor; this.commentEditor.replyToComment(comment);
commentEditor.replyToComment(comment);
} }
replyToComment() { replyToComment() {
this.newComment.inReplyToComment = this.comment; this.newComment.inReplyToComment = this.comment;
this.newComment.originComment = this.comment.originComment || this.comment; this.newComment.originComment = this.comment.originComment || this.comment;
this.newComment.actor = this.currentActor; this.newComment.actor = this.currentActor;
this.$emit('create-comment', this.newComment); this.$emit("create-comment", this.newComment);
this.newComment = new CommentModel(); this.newComment = new CommentModel();
this.replyTo = false; this.replyTo = false;
} }
@ -188,7 +211,7 @@ export default class Comment extends Vue {
if (!eventData) return; if (!eventData) return;
const { event } = eventData; const { event } = eventData;
const { comments } = event; const { comments } = event;
const parentCommentIndex = comments.findIndex(oldComment => oldComment.id === parentId); const parentCommentIndex = comments.findIndex((oldComment) => oldComment.id === parentId);
const parentComment = comments[parentCommentIndex]; const parentComment = comments[parentCommentIndex];
if (!parentComment) return; if (!parentComment) return;
parentComment.replies = thread; parentComment.replies = thread;
@ -201,12 +224,11 @@ export default class Comment extends Vue {
this.showReplies = true; this.showReplies = true;
} }
timeago(dateTime): String { timeago(dateTime: Date): string {
if (this.timeAgoInstance != null) { if (this.timeAgoInstance != null) {
// @ts-ignore
return this.timeAgoInstance.format(dateTime); return this.timeAgoInstance.format(dateTime);
} }
return ''; return "";
} }
get commentSelected(): boolean { get commentSelected(): boolean {
@ -214,15 +236,20 @@ export default class Comment extends Vue {
} }
get commentFromOrganizer(): boolean { get commentFromOrganizer(): boolean {
return this.event.organizerActor !== undefined && this.comment.actor && this.comment.actor.id === this.event.organizerActor.id; return (
this.event.organizerActor !== undefined &&
this.comment.actor &&
this.comment.actor.id === this.event.organizerActor.id
);
} }
get commentId(): String { get commentId(): string {
if (this.comment.originComment) return `#comment-${this.comment.originComment.uuid}:${this.comment.uuid}`; if (this.comment.originComment)
return `#comment-${this.comment.originComment.uuid}:${this.comment.uuid}`;
return `#comment-${this.comment.uuid}`; return `#comment-${this.comment.uuid}`;
} }
get commentURL(): String { get commentURL(): string {
if (!this.comment.local && this.comment.url) return this.comment.url; if (!this.comment.local && this.comment.url) return this.comment.url;
return this.commentId; return this.commentId;
} }
@ -232,7 +259,7 @@ export default class Comment extends Vue {
parent: this, parent: this,
component: ReportModal, component: ReportModal,
props: { props: {
title: this.$t('Report this comment'), title: this.$t("Report this comment"),
comment: this.comment, comment: this.comment,
onConfirm: this.reportComment, onConfirm: this.reportComment,
outsideDomain: this.comment.actor.domain, outsideDomain: this.comment.actor.domain,
@ -240,7 +267,7 @@ export default class Comment extends Vue {
}); });
} }
async reportComment(content: String, forward: boolean) { async reportComment(content: string, forward: boolean) {
try { try {
await this.$apollo.mutate<IReport>({ await this.$apollo.mutate<IReport>({
mutation: CREATE_REPORT, mutation: CREATE_REPORT,
@ -254,9 +281,11 @@ export default class Comment extends Vue {
}, },
}); });
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t('Comment from @{username} reported', { username: this.comment.actor.preferredUsername }) as string, message: this.$t("Comment from @{username} reported", {
type: 'is-success', username: this.comment.actor.preferredUsername,
position: 'is-bottom-right', }) as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000, duration: 5000,
}); });
} catch (error) { } catch (error) {
@ -266,93 +295,105 @@ export default class Comment extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
.first-line { form.reply {
* { padding-bottom: 1rem;
padding: 0 5px 0 0; }
}
}
.editor-line { .first-line {
display: flex; * {
max-width: calc(80rem - 64px); padding: 0 5px 0 0;
}
}
.editor { .editor-line {
flex: 1; display: flex;
padding-right: 10px; max-width: calc(80rem - 64px);
margin-bottom: 0;
}
}
.comment-link small:hover { .editor {
color: hsl(0, 0%, 21%); flex: 1;
} padding-right: 10px;
margin-bottom: 0;
}
}
.root-comment .comment-replies > .reply { .comment-link small:hover {
padding-left: 3rem; color: hsl(0, 0%, 21%);
} }
.media .media-content { .root-comment .comment-replies > .reply {
padding-left: 3rem;
}
.content .editor-line { .media .media-content {
display: flex; .content .editor-line {
align-items: center; display: flex;
} align-items: center;
}
.icons { .icons {
display: none; display: none;
} }
} }
.media:hover .media-content .icons { .media:hover .media-content .icons {
display: inline; display: inline;
cursor: pointer;
}
.load-replies { button {
cursor: pointer; cursor: pointer;
} border: none;
background: none;
}
}
article { .load-replies {
border-radius: 4px; cursor: pointer;
}
&.selected { article {
background-color: lighten($secondary, 30%); border-radius: 4px;
}
&.organizer:not(.selected) {
background-color: lighten($primary, 50%);
}
}
.comment-replies-enter-active, &.selected {
.comment-replies-leave-active, background-color: lighten($secondary, 30%);
.comment-replies-move { }
transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95); &.organizer:not(.selected) {
transition-property: opacity, transform; background-color: lighten($primary, 50%);
} }
}
.comment-replies-enter { .comment-replies-enter-active,
opacity: 0; .comment-replies-leave-active,
transform: translateX(50px) scaleY(0.5); .comment-replies-move {
} transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
transition-property: opacity, transform;
}
.comment-replies-enter-to { .comment-replies-enter {
opacity: 1; opacity: 0;
transform: translateX(0) scaleY(1); transform: translateX(50px) scaleY(0.5);
} }
.comment-replies-leave-active { .comment-replies-enter-to {
position: absolute; opacity: 1;
} transform: translateX(0) scaleY(1);
}
.comment-replies-leave-to { .comment-replies-leave-active {
opacity: 0; position: absolute;
transform: scaleY(0); }
transform-origin: center top;
}
.reply-action .icon { .comment-replies-leave-to {
padding-right: 0.4rem; opacity: 0;
} transform: scaleY(0);
transform-origin: center top;
}
.reply-action .icon {
padding-right: 0.4rem;
}
.visually-hidden {
display: none;
}
</style> </style>

View File

@ -1,60 +1,66 @@
<template> <template>
<div class="columns"> <div>
<div class="column is-two-thirds-desktop"> <form
<form class="new-comment" v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED" @submit.prevent="createCommentForEvent(newComment)" @keyup.ctrl.enter="createCommentForEvent(newComment)"> class="new-comment"
<article class="media"> v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"
<figure class="media-left"> @submit.prevent="createCommentForEvent(newComment)"
<identity-picker-wrapper :inline="false" v-model="newComment.actor" /> @keyup.ctrl.enter="createCommentForEvent(newComment)"
</figure> >
<div class="media-content"> <article class="media">
<div class="field"> <figure class="media-left">
<p class="control"> <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
<editor ref="commenteditor" mode="comment" v-model="newComment.text" /> </figure>
</p> <div class="media-content">
</div> <div class="field">
<div class="send-comment"> <p class="control">
<b-button native-type="submit" type="is-info">{{ $t('Post a comment') }}</b-button> <editor ref="commenteditor" mode="comment" v-model="newComment.text" />
</div> </p>
</div> </div>
</article> <div class="send-comment">
</form> <b-button native-type="submit" type="is-info">{{ $t("Post a comment") }}</b-button>
<b-notification v-else-if="event.options.commentModeration === CommentModeration.CLOSED" :closable="false"> </div>
{{ $t('Comments have been closed.') }}
</b-notification>
<transition name="comment-empty-list" mode="out-in">
<transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul">
<comment
class="root-comment"
:comment="comment"
:event="event"
v-for="comment in orderedComments"
v-if="!comment.deletedAt || comment.totalReplies > 0"
:key="comment.id"
@create-comment="createCommentForEvent"
@delete-comment="deleteComment"
/>
</transition-group>
<div v-else class="no-comments">
<span>{{ $t('No comments yet') }}</span>
<img src="../../assets/undraw_just_saying.svg" alt="" />
</div>
</transition>
</div> </div>
</div> </article>
</form>
<b-notification
v-else-if="event.options.commentModeration === CommentModeration.CLOSED"
:closable="false"
>{{ $t("Comments have been closed.") }}</b-notification
>
<transition name="comment-empty-list" mode="out-in">
<transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul">
<comment
class="root-comment"
:comment="comment"
:event="event"
v-for="comment in filteredOrderedComments"
:key="comment.id"
@create-comment="createCommentForEvent"
@delete-comment="deleteComment"
/>
</transition-group>
<div v-else class="no-comments">
<span>{{ $t("No comments yet") }}</span>
<img src="../../assets/undraw_just_saying.svg" alt />
</div>
</transition>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Prop, Vue, Component, Watch } from 'vue-property-decorator'; import { Prop, Vue, Component, Watch } from "vue-property-decorator";
import { CommentModel, IComment } from '@/types/comment.model'; import Comment from "@/components/Comment/Comment.vue";
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
import { CommentModel, IComment } from "../../types/comment.model";
import { import {
CREATE_COMMENT_FROM_EVENT, CREATE_COMMENT_FROM_EVENT,
DELETE_COMMENT, COMMENTS_THREADS, FETCH_THREAD_REPLIES, DELETE_COMMENT,
} from '@/graphql/comment'; COMMENTS_THREADS,
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; FETCH_THREAD_REPLIES,
import { IPerson } from '@/types/actor'; } from "../../graphql/comment";
import Comment from '@/components/Comment/Comment.vue'; import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IEvent, CommentModeration } from '@/types/event.model'; import { IPerson } from "../../types/actor";
import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue'; import { IEvent, CommentModeration } from "../../types/event.model";
@Component({ @Component({
apollo: { apollo: {
@ -69,7 +75,7 @@ import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
}; };
}, },
update(data) { update(data) {
return data.event.comments.map((comment) => new CommentModel(comment)); return data.event.comments.map((comment: IComment) => new CommentModel(comment));
}, },
skip() { skip() {
return !this.event.uuid; return !this.event.uuid;
@ -79,18 +85,21 @@ import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
components: { components: {
Comment, Comment,
IdentityPickerWrapper, IdentityPickerWrapper,
editor: () => import(/* webpackChunkName: "editor" */ '@/components/Editor.vue'), editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
}, },
}) })
export default class CommentTree extends Vue { export default class CommentTree extends Vue {
@Prop({ required: false, type: Object }) event!: IEvent; @Prop({ required: false, type: Object }) event!: IEvent;
newComment: IComment = new CommentModel(); newComment: IComment = new CommentModel();
currentActor!: IPerson; currentActor!: IPerson;
comments: IComment[] = []; comments: IComment[] = [];
CommentModeration = CommentModeration; CommentModeration = CommentModeration;
@Watch('currentActor') @Watch("currentActor")
watchCurrentActor(currentActor: IPerson) { watchCurrentActor(currentActor: IPerson) {
this.newComment.actor = currentActor; this.newComment.actor = currentActor;
} }
@ -123,10 +132,13 @@ export default class CommentTree extends Vue {
const { event } = commentThreadsData; const { event } = commentThreadsData;
const { comments: oldComments } = event; const { comments: oldComments } = event;
// if it's no a root comment, we first need to find existing replies and add the new reply to it // if it's no a root comment, we first need to find
if (comment.originComment) { // existing replies and add the new reply to it
// @ts-ignore if (comment.originComment !== undefined) {
const parentCommentIndex = oldComments.findIndex(oldComment => oldComment.id === comment.originComment.id); const { originComment } = comment;
const parentCommentIndex = oldComments.findIndex(
(oldComment) => oldComment.id === originComment.id
);
const parentComment = oldComments[parentCommentIndex]; const parentComment = oldComments[parentCommentIndex];
let oldReplyList: IComment[] = []; let oldReplyList: IComment[] = [];
@ -204,15 +216,15 @@ export default class CommentTree extends Vue {
if (comment.originComment) { if (comment.originComment) {
// we have deleted a reply to a thread // we have deleted a reply to a thread
const data = store.readQuery<{ thread: IComment[] }>({ const localData = store.readQuery<{ thread: IComment[] }>({
query: FETCH_THREAD_REPLIES, query: FETCH_THREAD_REPLIES,
variables: { variables: {
threadId: comment.originComment.id, threadId: comment.originComment.id,
}, },
}); });
if (!data) return; if (!localData) return;
const { thread: oldReplyList } = data; const { thread: oldReplyList } = localData;
const replies = oldReplyList.filter(reply => reply.id !== deletedCommentId); const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId);
store.writeQuery({ store.writeQuery({
query: FETCH_THREAD_REPLIES, query: FETCH_THREAD_REPLIES,
variables: { variables: {
@ -221,8 +233,11 @@ export default class CommentTree extends Vue {
data: { thread: replies }, data: { thread: replies },
}); });
// @ts-ignore const { originComment } = comment;
const parentCommentIndex = oldComments.findIndex(oldComment => oldComment.id === comment.originComment.id);
const parentCommentIndex = oldComments.findIndex(
(oldComment) => oldComment.id === originComment.id
);
const parentComment = oldComments[parentCommentIndex]; const parentComment = oldComments[parentCommentIndex];
parentComment.replies = replies; parentComment.replies = replies;
parentComment.totalReplies -= 1; parentComment.totalReplies -= 1;
@ -230,7 +245,7 @@ export default class CommentTree extends Vue {
event.comments = oldComments; event.comments = oldComments;
} else { } else {
// we have deleted a thread itself // we have deleted a thread itself
event.comments = oldComments.filter(reply => reply.id !== deletedCommentId); event.comments = oldComments.filter((reply) => reply.id !== deletedCommentId);
} }
store.writeQuery({ store.writeQuery({
query: COMMENTS_THREADS, query: COMMENTS_THREADS,
@ -245,84 +260,92 @@ export default class CommentTree extends Vue {
} }
get orderedComments(): IComment[] { get orderedComments(): IComment[] {
return this.comments.filter((comment => comment.inReplyToComment == null)).sort((a, b) => { return this.comments
if (a.updatedAt && b.updatedAt) { .filter((comment) => comment.inReplyToComment == null)
return (new Date(b.updatedAt)).getTime() - (new Date(a.updatedAt)).getTime(); .sort((a, b) => {
} if (a.updatedAt && b.updatedAt) {
return 0; return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
}); }
return 0;
});
}
get filteredOrderedComments(): IComment[] {
return this.orderedComments.filter((comment) => !comment.deletedAt || comment.totalReplies > 0);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.new-comment { form.new-comment {
.media-content { padding-bottom: 1rem;
display: flex;
align-items: center;
align-content: center;
.field { .media-content {
flex: 1; display: flex;
padding-right: 10px; align-items: center;
margin-bottom: 0; align-content: center;
}
} .field {
flex: 1;
padding-right: 10px;
margin-bottom: 0;
} }
}
}
.no-comments { .no-comments {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span { span {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
img { img {
max-width: 250px; max-width: 250px;
align-self: center; align-self: center;
} }
} }
ul.comment-list li { ul.comment-list li {
margin-bottom: 16px; margin-bottom: 16px;
} }
.comment-list-enter-active, .comment-list-enter-active,
.comment-list-leave-active, .comment-list-leave-active,
.comment-list-move { .comment-list-move {
transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95); transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
transition-property: opacity, transform; transition-property: opacity, transform;
} }
.comment-list-enter { .comment-list-enter {
opacity: 0; opacity: 0;
transform: translateX(50px) scaleY(0.5); transform: translateX(50px) scaleY(0.5);
} }
.comment-list-enter-to { .comment-list-enter-to {
opacity: 1; opacity: 1;
transform: translateX(0) scaleY(1); transform: translateX(0) scaleY(1);
} }
.comment-list-leave-active, .comment-list-leave-active,
.comment-empty-list-active { .comment-empty-list-active {
position: absolute; position: absolute;
} }
.comment-list-leave-to, .comment-list-leave-to,
.comment-empty-list-leave-to { .comment-empty-list-leave-to {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
transform-origin: center top; transform-origin: center top;
} }
/*.comment-empty-list-enter-active {*/ /*.comment-empty-list-enter-active {*/
/* transition: opacity .5s;*/ /* transition: opacity .5s;*/
/*}*/ /*}*/
/*.comment-empty-list-enter {*/ /*.comment-empty-list-enter {*/
/* opacity: 0;*/ /* opacity: 0;*/
/*}*/ /*}*/
</style> </style>

View File

@ -0,0 +1,110 @@
<template>
<article class="comment">
<div class="avatar">
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="body">
<div class="meta">
<div class="name">
<span>@{{ comment.actor.preferredUsername }}</span>
</div>
<div class="post-infos">
<span>{{ comment.updatedAt | formatDateTimeString }}</span>
</div>
</div>
<div class="description-content" v-html="comment.text"></div>
</div>
</article>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IComment } from "../../types/comment.model";
@Component
export default class ConversationComment extends Vue {
@Prop({ required: true, type: Object }) comment!: IComment;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
article.comment {
display: flex;
border-top: 1px solid #e9e9e9;
div.body {
flex: 2;
margin-bottom: 2rem;
padding-top: 1rem;
.meta {
display: flex;
align-items: center;
padding: 0 1rem 0.3em;
.name {
margin-right: auto;
flex: 1 1 auto;
overflow: hidden;
span {
color: #3c376e;
}
}
}
div.description-content {
padding: 0 1rem 0.3rem;
/deep/ h1 {
font-size: 2rem;
}
/deep/ h2 {
font-size: 1.5rem;
}
/deep/ h3 {
font-size: 1.25rem;
}
/deep/ ul {
list-style-type: disc;
}
/deep/ li {
margin: 10px auto 10px 2rem;
}
/deep/ blockquote {
border-left: 0.2em solid #333;
display: block;
padding-left: 1em;
}
/deep/ p {
margin: 10px auto;
a {
display: inline-block;
padding: 0.3rem;
background: $secondary;
color: #111;
&:empty {
display: none;
}
}
}
}
}
div.avatar {
padding-top: 1rem;
flex: 0;
}
}
</style>

View File

@ -0,0 +1,68 @@
<template>
<router-link
class="conversation-minimalist-card-wrapper"
:to="{ name: RouteName.CONVERSATION, params: { slug: conversation.slug, id: conversation.id } }"
>
<div class="media-left">
<figure class="image is-32x32" v-if="conversation.lastComment.actor.avatar">
<img class="is-rounded" :src="conversation.lastComment.actor.avatar.url" alt />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="title-info-wrapper">
<p class="conversation-minimalist-title">{{ conversation.title }}</p>
<div class="has-text-grey">{{ htmlTextEllipsis }}</div>
</div>
</router-link>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IConversation } from "../../types/conversations";
import RouteName from "../../router/name";
@Component
export default class ConversationListItem extends Vue {
@Prop({ required: true, type: Object }) conversation!: IConversation;
RouteName = RouteName;
get htmlTextEllipsis() {
const element = document.createElement("div");
element.innerHTML = this.conversation.lastComment.text
.replace(/<br\s*\/?>/gi, " ")
.replace(/<p>/gi, " ");
return element.innerText;
}
}
</script>
<style lang="scss" scoped>
.conversation-minimalist-card-wrapper {
display: flex;
width: 100%;
color: initial;
border-bottom: 1px solid #e9e9e9;
align-items: center;
.calendar-icon {
margin-right: 1rem;
}
.title-info-wrapper {
flex: 2;
.conversation-minimalist-title {
color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
font-size: 1.25rem;
font-weight: 700;
}
div.has-text-grey {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,16 +1,21 @@
import { Node, Plugin } from 'tiptap'; import { Node } from "tiptap";
import { UPLOAD_PICTURE } from '@/graphql/upload'; import { UPLOAD_PICTURE } from "@/graphql/upload";
import { apolloProvider } from '@/vue-apollo'; import apolloProvider from "@/vue-apollo";
import ApolloClient from 'apollo-client'; import ApolloClient from "apollo-client";
import { InMemoryCache } from 'apollo-cache-inmemory'; import { NormalizedCacheObject } from "apollo-cache-inmemory";
import { NodeType, NodeSpec } from "prosemirror-model";
import { EditorState, Plugin, TextSelection } from "prosemirror-state";
import { DispatchFn } from "tiptap-commands";
import { EditorView } from "prosemirror-view";
/* eslint-disable class-methods-use-this */
export default class Image extends Node { export default class Image extends Node {
get name() { get name() {
return 'image'; return "image";
} }
get schema() { get schema(): NodeSpec {
return { return {
inline: true, inline: true,
attrs: { attrs: {
@ -22,25 +27,25 @@ export default class Image extends Node {
default: null, default: null,
}, },
}, },
group: 'inline', group: "inline",
draggable: true, draggable: true,
parseDOM: [ parseDOM: [
{ {
tag: 'img[src]', tag: "img[src]",
getAttrs: dom => ({ getAttrs: (dom: any) => ({
src: dom.getAttribute('src'), src: dom.getAttribute("src"),
title: dom.getAttribute('title'), title: dom.getAttribute("title"),
alt: dom.getAttribute('alt'), alt: dom.getAttribute("alt"),
}), }),
}, },
], ],
toDOM: node => ['img', node.attrs], toDOM: (node: any) => ["img", node.attrs],
}; };
} }
commands({ type }) { commands({ type }: { type: NodeType }): any {
return attrs => (state, dispatch) => { return (attrs: { [key: string]: string }) => (state: EditorState, dispatch: DispatchFn) => {
const { selection } = state; const { selection }: { selection: TextSelection } = state;
const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos; const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
const node = type.create(attrs); const node = type.create(attrs);
const transaction = state.tr.insert(position, node); const transaction = state.tr.insert(position, node);
@ -53,28 +58,39 @@ export default class Image extends Node {
new Plugin({ new Plugin({
props: { props: {
handleDOMEvents: { handleDOMEvents: {
async drop(view, event: DragEvent) { drop(view: EditorView<any>, event: Event) {
if (!(event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length)) { const realEvent = event as DragEvent;
return; if (
!(
realEvent.dataTransfer &&
realEvent.dataTransfer.files &&
realEvent.dataTransfer.files.length
)
) {
return false;
} }
const images = Array const images = Array.from(realEvent.dataTransfer.files).filter((file: any) =>
.from(event.dataTransfer.files) /image/i.test(file.type)
.filter((file: any) => (/image/i).test(file.type)); );
if (images.length === 0) { if (images.length === 0) {
return; return false;
} }
event.preventDefault(); realEvent.preventDefault();
const { schema } = view.state; const { schema } = view.state;
const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY }); const coordinates = view.posAtCoords({
const client = apolloProvider.defaultClient as ApolloClient<InMemoryCache>; left: realEvent.clientX,
const editorElem = document.getElementById('tiptab-editor'); top: realEvent.clientY,
});
if (!coordinates) return false;
const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
const editorElem = document.getElementById("tiptab-editor");
const actorId = editorElem && editorElem.dataset.actorId; const actorId = editorElem && editorElem.dataset.actorId;
for (const image of images) { images.forEach(async (image) => {
const { data } = await client.mutate({ const { data } = await client.mutate({
mutation: UPLOAD_PICTURE, mutation: UPLOAD_PICTURE,
variables: { variables: {
@ -86,12 +102,12 @@ export default class Image extends Node {
const node = schema.nodes.image.create({ src: data.uploadPicture.url }); const node = schema.nodes.image.create({ src: data.uploadPicture.url });
const transaction = view.state.tr.insert(coordinates.pos, node); const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction); view.dispatch(transaction);
} });
return true;
}, },
}, },
}, },
}), }),
]; ];
} }
} }

View File

@ -1,133 +1,155 @@
<template> <template>
<div class="address-autocomplete"> <div class="address-autocomplete">
<b-field expanded> <b-field expanded>
<template slot="label"> <template slot="label">
{{ $t('Find an address') }} {{ $t("Find an address") }}
<b-button v-if="!gettingLocation" size="is-small" icon-right="map-marker" @click="locateMe" /> <b-button
<span v-else>{{ $t('Getting location') }}</span> v-if="!gettingLocation"
</template> size="is-small"
<b-autocomplete icon-right="map-marker"
:data="addressData" @click="locateMe"
v-model="queryText" />
:placeholder="$t('e.g. 10 Rue Jangot')" <span v-else>{{ $t("Getting location") }}</span>
field="fullName" </template>
:loading="isFetching" <b-autocomplete
@typing="fetchAsyncData" :data="addressData"
icon="map-marker" v-model="queryText"
expanded :placeholder="$t('e.g. 10 Rue Jangot')"
@select="updateSelected"> field="fullName"
:loading="isFetching"
<template slot-scope="{option}"> @typing="fetchAsyncData"
<b-icon :icon="option.poiInfos.poiIcon.icon" /> icon="map-marker"
<b>{{ option.poiInfos.name }}</b><br /> expanded
<small>{{ option.poiInfos.alternativeName }}</small> @select="updateSelected"
</template> >
<template slot="empty"> <template slot-scope="{ option }">
<span v-if="isFetching">{{ $t('Searching') }}</span> <b-icon :icon="option.poiInfos.poiIcon.icon" />
<div v-else-if="queryText.length >= 3" class="is-enabled"> <b>{{ option.poiInfos.name }}</b
<span>{{ $t('No results for "{queryText}"') }}</span> ><br />
<span>{{ $t('You can try another search term or drag and drop the marker on the map', { queryText }) }}</span> <small>{{ option.poiInfos.alternativeName }}</small>
<!-- <p class="control" @click="openNewAddressModal">--> </template>
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>--> <template slot="empty">
<!-- </p>--> <span v-if="isFetching">{{ $t("Searching") }}</span>
</div> <div v-else-if="queryText.length >= 3" class="is-enabled">
</template> <span>{{ $t('No results for "{queryText}"') }}</span>
</b-autocomplete> <span>{{
</b-field> $t("You can try another search term or drag and drop the marker on the map", {
<div class="map" v-if="selected && selected.geom"> queryText,
<map-leaflet })
:coords="selected.geom" }}</span>
:marker="{ text: [selected.poiInfos.name, selected.poiInfos.alternativeName], icon: selected.poiInfos.poiIcon.icon}" <!-- <p class="control" @click="openNewAddressModal">-->
:updateDraggableMarkerCallback="reverseGeoCode" <!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
:options="{ zoom: mapDefaultZoom }" <!-- </p>-->
:readOnly="false" </div>
/> </template>
</div> </b-autocomplete>
<!-- <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">--> </b-field>
<!-- <div class="modal-card" style="width: auto">--> <div class="map" v-if="selected && selected.geom">
<!-- <header class="modal-card-head">--> <map-leaflet
<!-- <p class="modal-card-title">{{ $t('Add an address') }}</p>--> :coords="selected.geom"
<!-- </header>--> :marker="{
<!-- <section class="modal-card-body">--> text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
<!-- <form>--> icon: selected.poiInfos.poiIcon.icon,
<!-- <b-field :label="$t('Name')">--> }"
<!-- <b-input aria-required="true" required v-model="selected.description" />--> :updateDraggableMarkerCallback="reverseGeoCode"
<!-- </b-field>--> :options="{ zoom: mapDefaultZoom }"
:readOnly="false"
<!-- <b-field :label="$t('Street')">--> />
<!-- <b-input v-model="selected.street" />-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Postal Code')">-->
<!-- <b-input v-model="selected.postalCode" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Locality')">-->
<!-- <b-input v-model="selected.locality" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Region')">-->
<!-- <b-input v-model="selected.region" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Country')">-->
<!-- <b-input v-model="selected.country" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- </form>-->
<!-- </section>-->
<!-- <footer class="modal-card-foot">-->
<!-- <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
<!-- </footer>-->
<!-- </div>-->
<!-- </b-modal>-->
</div> </div>
<!-- <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
<!-- <div class="modal-card" style="width: auto">-->
<!-- <header class="modal-card-head">-->
<!-- <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
<!-- </header>-->
<!-- <section class="modal-card-body">-->
<!-- <form>-->
<!-- <b-field :label="$t('Name')">-->
<!-- <b-input aria-required="true" required v-model="selected.description" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Street')">-->
<!-- <b-input v-model="selected.street" />-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Postal Code')">-->
<!-- <b-input v-model="selected.postalCode" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Locality')">-->
<!-- <b-input v-model="selected.locality" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Region')">-->
<!-- <b-input v-model="selected.region" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Country')">-->
<!-- <b-input v-model="selected.country" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- </form>-->
<!-- </section>-->
<!-- <footer class="modal-card-foot">-->
<!-- <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
<!-- </footer>-->
<!-- </div>-->
<!-- </b-modal>-->
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Address, IAddress } from '@/types/address.model'; import { LatLng } from "leaflet";
import { ADDRESS, REVERSE_GEOCODE } from '@/graphql/address'; import { debounce } from "lodash";
import { Modal } from 'buefy/dist/components/dialog'; import { Address, IAddress } from "../../types/address.model";
import { LatLng } from 'leaflet'; import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
import { debounce } from 'lodash'; import { CONFIG } from "../../graphql/config";
import { CONFIG } from '@/graphql/config'; import { IConfig } from "../../types/config.model";
import { IConfig } from '@/types/config.model';
@Component({ @Component({
components: { components: {
'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'), "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
Modal,
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
}, },
}) })
export default class AddressAutoComplete extends Vue { export default class AddressAutoComplete extends Vue {
@Prop({ required: true }) value!: IAddress; @Prop({ required: true }) value!: IAddress;
addressData: IAddress[] = []; addressData: IAddress[] = [];
selected: IAddress = new Address(); selected: IAddress = new Address();
isFetching: boolean = false;
queryText: string = (this.value && (new Address(this.value)).fullName) || ''; isFetching = false;
addressModalActive: boolean = false;
private gettingLocation: boolean = false; queryText: string = (this.value && new Address(this.value).fullName) || "";
addressModalActive = false;
private gettingLocation = false;
private location!: Position; private location!: Position;
private gettingLocationError: any; private gettingLocationError: any;
private mapDefaultZoom: number = 15;
private mapDefaultZoom = 15;
config!: IConfig; config!: IConfig;
// We put this in data because of issues like https://github.com/vuejs/vue-class-component/issues/263 fetchAsyncData!: Function;
// We put this in data because of issues like
// https://github.com/vuejs/vue-class-component/issues/263
data() { data() {
return { return {
fetchAsyncData: debounce(this.asyncData, 200), fetchAsyncData: debounce(this.asyncData, 200),
}; };
} }
async asyncData(query: String) { async asyncData(query: string) {
if (!query.length) { if (!query.length) {
this.addressData = []; this.addressData = [];
this.selected = new Address(); this.selected = new Address();
@ -142,27 +164,27 @@ export default class AddressAutoComplete extends Vue {
this.isFetching = true; this.isFetching = true;
const result = await this.$apollo.query({ const result = await this.$apollo.query({
query: ADDRESS, query: ADDRESS,
fetchPolicy: 'network-only', fetchPolicy: "network-only",
variables: { variables: {
query, query,
locale: this.$i18n.locale, locale: this.$i18n.locale,
}, },
}); });
this.addressData = result.data.searchAddress.map(address => new Address(address)); this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address));
this.isFetching = false; this.isFetching = false;
} }
@Watch('config') @Watch("config")
watchConfig(config: IConfig) { watchConfig(config: IConfig) {
if (!config.geocoding.autocomplete) { if (!config.geocoding.autocomplete) {
// If autocomplete is disabled, we put a larger debounce value so that we don't request with incomplete address // If autocomplete is disabled, we put a larger debounce value
// @ts-ignore // so that we don't request with incomplete address
this.fetchAsyncData = debounce(this.asyncData, 2000); this.fetchAsyncData = debounce(this.asyncData, 2000);
} }
} }
@Watch('value') @Watch("value")
updateEditing() { updateEditing() {
if (!(this.value && this.value.id)) return; if (!(this.value && this.value.id)) return;
this.selected = this.value; this.selected = this.value;
@ -170,10 +192,10 @@ export default class AddressAutoComplete extends Vue {
this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`; this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
} }
updateSelected(option) { updateSelected(option: IAddress) {
if (option == null) return; if (option == null) return;
this.selected = option; this.selected = option;
this.$emit('input', this.selected); this.$emit("input", this.selected);
} }
resetPopup() { resetPopup() {
@ -185,8 +207,8 @@ export default class AddressAutoComplete extends Vue {
this.addressModalActive = true; this.addressModalActive = true;
} }
async reverseGeoCode(e: LatLng, zoom: Number) { async reverseGeoCode(e: LatLng, zoom: number) {
// If the position has been updated through autocomplete selection, no need to geocode it ! // If the position has been updated through autocomplete selection, no need to geocode it!
if (this.checkCurrentPosition(e)) return; if (this.checkCurrentPosition(e)) return;
const result = await this.$apollo.query({ const result = await this.$apollo.query({
query: REVERSE_GEOCODE, query: REVERSE_GEOCODE,
@ -198,74 +220,77 @@ export default class AddressAutoComplete extends Vue {
}, },
}); });
this.addressData = result.data.reverseGeocode.map(address => new Address(address)); this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
const defaultAddress = new Address(this.addressData[0]); const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress; this.selected = defaultAddress;
this.$emit('input', this.selected); this.$emit("input", this.selected);
this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`; this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
} }
checkCurrentPosition(e: LatLng) { checkCurrentPosition(e: LatLng) {
if (!this.selected || !this.selected.geom) return false; if (!this.selected || !this.selected.geom) return false;
const lat = parseFloat(this.selected.geom.split(';')[1]); const lat = parseFloat(this.selected.geom.split(";")[1]);
const lon = parseFloat(this.selected.geom.split(';')[0]); const lon = parseFloat(this.selected.geom.split(";")[0]);
return e.lat === lat && e.lng === lon; return e.lat === lat && e.lng === lon;
} }
async locateMe(): Promise<void> { async locateMe(): Promise<void> {
this.gettingLocation = true; this.gettingLocation = true;
try { try {
this.gettingLocation = false; this.gettingLocation = false;
this.location = await this.getLocation(); this.location = await AddressAutoComplete.getLocation();
this.mapDefaultZoom = 12; this.mapDefaultZoom = 12;
this.reverseGeoCode(new LatLng(this.location.coords.latitude, this.location.coords.longitude), 12); this.reverseGeoCode(
new LatLng(this.location.coords.latitude, this.location.coords.longitude),
12
);
} catch (e) { } catch (e) {
this.gettingLocation = false; this.gettingLocation = false;
this.gettingLocationError = e.message; this.gettingLocationError = e.message;
} }
} }
async getLocation(): Promise<Position> { static async getLocation(): Promise<Position> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!("geolocation" in navigator)) {
if (!('geolocation' in navigator)) { reject(new Error("Geolocation is not available."));
reject(new Error('Geolocation is not available.'));
} }
navigator.geolocation.getCurrentPosition(pos => { navigator.geolocation.getCurrentPosition(
resolve(pos); (pos) => {
}, err => { resolve(pos);
reject(err); },
}); (err) => {
reject(err);
}
);
}); });
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.address-autocomplete { .address-autocomplete {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.autocomplete { .autocomplete {
.dropdown-menu { .dropdown-menu {
z-index: 2000; z-index: 2000;
} }
.dropdown-item.is-disabled { .dropdown-item.is-disabled {
opacity: 1 !important; opacity: 1 !important;
cursor: auto; cursor: auto;
} }
} }
.read-only { .read-only {
cursor: pointer; cursor: pointer;
} }
.map { .map {
height: 400px; height: 400px;
width: 100%; width: 100%;
} }
</style> </style>

View File

@ -12,13 +12,13 @@
</docs> </docs>
<template> <template>
<time class="datetime-container" :datetime="dateObj.getUTCSeconds()"> <time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
<span class="month">{{ month }}</span> <span class="month">{{ month }}</span>
<span class="day">{{ day }}</span> <span class="day">{{ day }}</span>
</time> </time>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class DateCalendarIcon extends Vue { export default class DateCalendarIcon extends Vue {
@ -32,44 +32,44 @@ export default class DateCalendarIcon extends Vue {
} }
get month() { get month() {
return this.dateObj.toLocaleString(undefined, { month: 'short' }); return this.dateObj.toLocaleString(undefined, { month: "short" });
} }
get day() { get day() {
return this.dateObj.toLocaleString(undefined, { day: 'numeric' }); return this.dateObj.toLocaleString(undefined, { day: "numeric" });
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
time.datetime-container { time.datetime-container {
background: #f6f7f8; background: #f6f7f8;
border: 1px solid rgba(46,62,72,.12); border: 1px solid rgba(46, 62, 72, 0.12);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
/*height: 50px;*/ /*height: 50px;*/
width: 50px; width: 50px;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
span { span {
display: block; display: block;
font-weight: 600; font-weight: 600;
&.month { &.month {
color: #fa3e3e; color: #fa3e3e;
padding: 2px 0; padding: 2px 0;
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
text-transform: uppercase; text-transform: uppercase;
} }
&.day { &.day {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
}
} }
} }
}
</style> </style>

View File

@ -12,40 +12,41 @@
``` ```
</docs> </docs>
<template> <template>
<div class="field is-horizontal"> <div class="field is-horizontal">
<div class="field-label is-normal"> <div class="field-label is-normal">
<label class="label">{{ label }}</label> <label class="label">{{ label }}</label>
</div>
<div class="field-body">
<div class="field is-narrow is-grouped calendar-picker">
<b-datepicker
:day-names="localeShortWeekDayNamesProxy"
:month-names="localeMonthNamesProxy"
:first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
:min-date="minDatetime"
:max-date="maxDatetime"
v-model="dateWithTime"
:placeholder="$t('Click to select')"
:years-range="[-2,10]"
icon="calendar"
class="is-narrow"
/>
<b-timepicker
placeholder="Type or select a time..."
icon="clock"
v-model="dateWithTime"
:min-time="minDatetime"
:max-time="maxDatetime"
size="is-small"
inline>
</b-timepicker>
</div>
</div>
</div> </div>
<div class="field-body">
<div class="field is-narrow is-grouped calendar-picker">
<b-datepicker
:day-names="localeShortWeekDayNamesProxy"
:month-names="localeMonthNamesProxy"
:first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
:min-date="minDatetime"
:max-date="maxDatetime"
v-model="dateWithTime"
:placeholder="$t('Click to select')"
:years-range="[-2, 10]"
icon="calendar"
class="is-narrow"
/>
<b-timepicker
placeholder="Type or select a time..."
icon="clock"
v-model="dateWithTime"
:min-time="minDatetime"
:max-time="maxDatetime"
size="is-small"
inline
>
</b-timepicker>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { localeMonthNames, localeShortWeekDayNames } from '@/utils/datetime'; import { localeMonthNames, localeShortWeekDayNames } from "@/utils/datetime";
@Component @Component
export default class DateTimePicker extends Vue { export default class DateTimePicker extends Vue {
@ -58,34 +59,35 @@ export default class DateTimePicker extends Vue {
/** /**
* What's shown besides the picker * What's shown besides the picker
*/ */
@Prop({ required: false, type: String, default: 'Datetime' }) label!: string; @Prop({ required: false, type: String, default: "Datetime" }) label!: string;
/** /**
* The step for the time input * The step for the time input
*/ */
@Prop({ required: false, type: Number, default: 1 }) step!: number; @Prop({ required: false, type: Number, default: 1 }) step!: number;
/** /**
* Earliest date available for selection * Earliest date available for selection
*/ */
@Prop({ required: false, type: Date, default: null }) minDatetime!: Date; @Prop({ required: false, type: Date, default: null }) minDatetime!: Date;
/** /**
* Latest date available for selection * Latest date available for selection
*/ */
@Prop({ required: false, type: Date, default: null }) maxDatetime!: Date; @Prop({ required: false, type: Date, default: null }) maxDatetime!: Date;
dateWithTime: Date = this.value; dateWithTime: Date = this.value;
localeShortWeekDayNamesProxy = localeShortWeekDayNames(); localeShortWeekDayNamesProxy = localeShortWeekDayNames();
localeMonthNamesProxy = localeMonthNames(); localeMonthNamesProxy = localeMonthNames();
@Watch('value') @Watch("value")
updateValue() { updateValue() {
this.dateWithTime = this.value; this.dateWithTime = this.value;
} }
@Watch('dateWithTime') @Watch("dateWithTime")
updateDateWithTimeWatcher() { updateDateWithTimeWatcher() {
this.updateDateTime(); this.updateDateTime();
} }
@ -96,21 +98,21 @@ export default class DateTimePicker extends Vue {
* *
* @type {Date} * @type {Date}
*/ */
this.$emit('input', this.dateWithTime); this.$emit("input", this.dateWithTime);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.timepicker { .timepicker {
/deep/ .dropdown-content { /deep/ .dropdown-content {
padding: 0; padding: 0;
} }
} }
.calendar-picker { .calendar-picker {
/deep/ .dropdown-menu { /deep/ .dropdown-menu {
z-index: 200; z-index: 200;
} }
} }
</style> </style>

View File

@ -5,7 +5,7 @@ A simple card for an event
```vue ```vue
<EventCard <EventCard
:event="{ :event="{
title: 'Vue Styleguidist first meetup: learn the basics!', title: 'Vue Styleguidist first meetup: learn the basics!',
beginsOn: new Date(), beginsOn: new Date(),
tags: [ tags: [
@ -29,9 +29,16 @@ A simple card for an event
<template> <template>
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }"> <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
<div class="card-image"> <div class="card-image">
<figure class="image is-16by9" :style="`background-image: url('${event.picture ? event.picture.url : '/img/mobilizon_default_card.png'}')`"> <figure
class="image is-16by9"
:style="`background-image: url('${
event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
}')`"
>
<div class="tag-container" v-if="event.tags"> <div class="tag-container" v-if="event.tags">
<b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{ tag.title }}</b-tag> <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{
tag.title
}}</b-tag>
</div> </div>
</figure> </figure>
</div> </div>
@ -43,57 +50,57 @@ A simple card for an event
<div class="media-content"> <div class="media-content">
<p class="event-title">{{ event.title }}</p> <p class="event-title">{{ event.title }}</p>
<div class="event-subtitle" v-if="event.physicalAddress"> <div class="event-subtitle" v-if="event.physicalAddress">
<!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>--> <!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
<span> <span>
{{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }} {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="date-and-title">--> <!-- <div class="date-and-title">-->
<!-- <div class="date-component">--> <!-- <div class="date-component">-->
<!-- <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />--> <!-- <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="title-wrapper">--> <!-- <div class="title-wrapper">-->
<!-- <h4>{{ event.title }}</h4>--> <!-- <h4>{{ event.title }}</h4>-->
<!-- <div class="organizer-place-wrapper has-text-grey">--> <!-- <div class="organizer-place-wrapper has-text-grey">-->
<!-- <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>--> <!-- <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
<!-- ·--> <!-- ·-->
<!-- <span v-if="event.physicalAddress">--> <!-- <span v-if="event.physicalAddress">-->
<!-- {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}--> <!-- {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
<!-- </span>--> <!-- </span>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div v-if="!mergedOptions.hideDetails" class="details">--> <!-- <div v-if="!mergedOptions.hideDetails" class="details">-->
<!-- <div v-if="event.participants.length > 0 &&--> <!-- <div v-if="event.participants.length > 0 &&-->
<!-- mergedOptions.loggedPerson &&--> <!-- mergedOptions.loggedPerson &&-->
<!-- event.participants[0].actor.id === mergedOptions.loggedPerson.id">--> <!-- event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
<!-- <b-tag type="is-info"><translate>Organizer</translate></b-tag>--> <!-- <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
<!-- </div>--> <!-- </div>-->
<!-- <div v-else-if="event.participants.length === 1">--> <!-- <div v-else-if="event.participants.length === 1">-->
<!-- <translate--> <!-- <translate-->
<!-- :translate-params="{name: event.participants[0].actor.preferredUsername}"--> <!-- :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
<!-- >{name} organizes this event</translate>--> <!-- >{name} organizes this event</translate>-->
<!-- </div>--> <!-- </div>-->
<!-- <div v-else>--> <!-- <div v-else>-->
<!-- <span v-for="participant in event.participants" :key="participant.actor.uuid">--> <!-- <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
<!-- {{ participant.actor.preferredUsername }}--> <!-- {{ participant.actor.preferredUsername }}-->
<!-- <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,--> <!-- <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
<!-- &lt;!&ndash; <translate--> <!-- &lt;!&ndash; <translate-->
<!-- :translate-params="{name: participant.actor.preferredUsername}"--> <!-- :translate-params="{name: participant.actor.preferredUsername}"-->
<!-- >&nbsp;{name} is in,</translate>&ndash;&gt;--> <!-- >&nbsp;{name} is in,</translate>&ndash;&gt;-->
<!-- </span>--> <!-- </span>-->
<!-- </div>--> <!-- </div>-->
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model'; import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model";
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { Actor, Person } from '@/types/actor'; import { Actor, Person } from "@/types/actor";
@Component({ @Component({
components: { components: {
@ -102,6 +109,7 @@ import { Actor, Person } from '@/types/actor';
}) })
export default class EventCard extends Vue { export default class EventCard extends Vue {
@Prop({ required: true }) event!: IEvent; @Prop({ required: true }) event!: IEvent;
@Prop({ required: false }) options!: IEventCardOptions; @Prop({ required: false }) options!: IEventCardOptions;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
@ -118,102 +126,103 @@ export default class EventCard extends Vue {
} }
get actor(): Actor { get actor(): Actor {
return Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor); return Object.assign(
new Person(),
this.event.organizerActor || this.mergedOptions.organizerActor
);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../variables"; @import "../../variables";
a.card { a.card {
display: block; display: block;
background: $secondary; background: $secondary;
&:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
transform: scale(1.01, 1.01);
&:after {
opacity: 1;
}
}
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
&:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
transform: scale(1.01, 1.01);
&:after { &:after {
content: ""; opacity: 1;
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
div.tag-container {
position: absolute;
top: 10px;
right: 0;
margin-right: -3px;
z-index: 10;
max-width: 40%;
span.tag {
margin: 5px auto;
text-overflow: ellipsis;
overflow: hidden;
display: block;
font-size: 1em;
line-height: 1.75em;
}
}
div.card-image {
background: $secondary;
figure.image {
background-size: cover;
background-position: center;
}
}
.card-content {
padding: 0.5rem;
.event-title {
font-size: 1.25rem;
line-height: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4rem;
}
.event-subtitle {
font-size: 0.85rem;
display: inline-flex;
flex-wrap: wrap;
span {
width: 15rem;
display: block;
overflow: hidden;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
}
} }
} }
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
&:after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
div.tag-container {
position: absolute;
top: 10px;
right: 0;
margin-right: -3px;
z-index: 10;
max-width: 40%;
span.tag {
margin: 5px auto;
text-overflow: ellipsis;
overflow: hidden;
display: block;
font-size: 1em;
line-height: 1.75em;
}
}
div.card-image {
background: $secondary;
figure.image {
background-size: cover;
background-position: center;
}
}
.card-content {
padding: 0.5rem;
.event-title {
font-size: 1.25rem;
line-height: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4rem;
}
.event-subtitle {
font-size: 0.85rem;
display: inline-flex;
flex-wrap: wrap;
span {
width: 15rem;
display: block;
overflow: hidden;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
</style> </style>

View File

@ -18,55 +18,87 @@
</docs> </docs>
<template> <template>
<span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span> <span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span>
<span v-else-if="isSameDay() && showStartTime && showEndTime"> <span v-else-if="isSameDay() && showStartTime && showEndTime">
{{ $t('On {date} from {startTime} to {endTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}) }} {{
</span> $t("On {date} from {startTime} to {endTime}", {
<span v-else-if="isSameDay() && !showStartTime && showEndTime"> date: formatDate(beginsOn),
{{ $t('On {date} ending at {endTime}', {date: formatDate(beginsOn), endTime: formatTime(endsOn)}) }} startTime: formatTime(beginsOn),
</span> endTime: formatTime(endsOn),
<span v-else-if="isSameDay() && showStartTime && !showEndTime"> })
{{ $t('On {date} starting at {startTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn)}) }} }}
</span> </span>
<span v-else-if="isSameDay()"> <span v-else-if="isSameDay() && !showStartTime && showEndTime">
{{ $t('On {date}', {date: formatDate(beginsOn)}) }} {{
</span> $t("On {date} ending at {endTime}", {
<span v-else-if="endsOn && showStartTime && showEndTime"> date: formatDate(beginsOn),
{{ $t('From the {startDate} at {startTime} to the {endDate} at {endTime}', endTime: formatTime(endsOn),
{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}) }} })
</span> }}
<span v-else-if="endsOn && showStartTime"> </span>
{{ $t('From the {startDate} at {startTime} to the {endDate}', <span v-else-if="isSameDay() && showStartTime && !showEndTime">
{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn)}) }} {{
</span> $t("On {date} starting at {startTime}", {
<span v-else-if="endsOn"> date: formatDate(beginsOn),
{{ $t('From the {startDate} to the {endDate}', startTime: formatTime(beginsOn),
{startDate: formatDate(beginsOn), endDate: formatDate(endsOn)}) }} })
</span> }}
</span>
<span v-else-if="isSameDay()">{{ $t("On {date}", { date: formatDate(beginsOn) }) }}</span>
<span v-else-if="endsOn && showStartTime && showEndTime">
{{
$t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
startDate: formatDate(beginsOn),
startTime: formatTime(beginsOn),
endDate: formatDate(endsOn),
endTime: formatTime(endsOn),
})
}}
</span>
<span v-else-if="endsOn && showStartTime">
{{
$t("From the {startDate} at {startTime} to the {endDate}", {
startDate: formatDate(beginsOn),
startTime: formatTime(beginsOn),
endDate: formatDate(endsOn),
})
}}
</span>
<span v-else-if="endsOn">
{{
$t("From the {startDate} to the {endDate}", {
startDate: formatDate(beginsOn),
endDate: formatDate(endsOn),
})
}}
</span>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class EventFullDate extends Vue { export default class EventFullDate extends Vue {
@Prop({ required: true }) beginsOn!: string; @Prop({ required: true }) beginsOn!: string;
@Prop({ required: false }) endsOn!: string; @Prop({ required: false }) endsOn!: string;
@Prop({ required: false, default: true }) showStartTime!: boolean; @Prop({ required: false, default: true }) showStartTime!: boolean;
@Prop({ required: false, default: true }) showEndTime!: boolean; @Prop({ required: false, default: true }) showEndTime!: boolean;
formatDate(value) { formatDate(value: Date): string | undefined {
if (!this.$options.filters) return; if (!this.$options.filters) return undefined;
return this.$options.filters.formatDateString(value); return this.$options.filters.formatDateString(value);
} }
formatTime(value) { formatTime(value: Date): string | undefined {
if (!this.$options.filters) return; if (!this.$options.filters) return undefined;
return this.$options.filters.formatTimeString(value); return this.$options.filters.formatTimeString(value);
} }
isSameDay() { isSameDay(): boolean {
const sameDay = ((new Date(this.beginsOn)).toDateString()) === ((new Date(this.endsOn)).toDateString()); const sameDay = new Date(this.beginsOn).toDateString() === new Date(this.endsOn).toDateString();
return this.endsOn && sameDay; return this.endsOn !== undefined && sameDay;
} }
} }
</script> </script>

View File

@ -1,55 +1,3 @@
<docs>
A simple card for a participation (we should rename it)
```vue
<template>
<div>
<EventListCard
:participation="participation"
/>
</div>
</template>
<script>
export default {
data() {
return {
participation: {
event: {
title: 'Vue Styleguidist first meetup: learn the basics!',
id: 5,
uuid: 'some uuid',
beginsOn: new Date(),
organizerActor: {
preferredUsername: 'tcit',
name: 'Some Random Dude',
domain: null,
id: 4,
displayName() { return 'Some random dude' }
},
options: {
maximumAttendeeCapacity: 4
},
participantStats: {
approved: 1,
notApproved: 2
}
},
actor: {
preferredUsername: 'tcit',
name: 'Some Random Dude',
domain: null,
id: 4,
displayName() { return 'Some random dude' }
},
role: 'CREATOR',
}
}
}
}
</script>
```
</docs>
<template> <template>
<article class="box"> <article class="box">
<div class="columns"> <div class="columns">
@ -58,37 +6,72 @@ export default {
<div class="date-component"> <div class="date-component">
<date-calendar-icon :date="participation.event.beginsOn" /> <date-calendar-icon :date="participation.event.beginsOn" />
</div> </div>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"><h2 class="title">{{participation.event.title }}</h2></router-link> <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
<h2 class="title">{{ participation.event.title }}</h2>
</router-link>
</div> </div>
<div class="participation-actor has-text-grey"> <div class="participation-actor has-text-grey">
<span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span> <span
v-if="
participation.event.physicalAddress && participation.event.physicalAddress.locality
"
>{{ participation.event.physicalAddress.locality }} -</span
>
<span> <span>
<span>{{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span> <span>
<span v-if="participation.role === ParticipantRole.PARTICIPANT">{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span> {{
$t("Organized by {name}", {
name: participation.event.organizerActor.displayName(),
})
}}
</span>
<span v-if="participation.role === ParticipantRole.PARTICIPANT">
{{ $t("Going as {name}", { name: participation.actor.displayName() }) }}
</span>
</span> </span>
</div> </div>
<div class="columns"> <div class="columns">
<span class="column is-narrow"> <span class="column is-narrow">
<b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" /> <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
<b-icon icon="lock-open" v-if="participation.event.visibility === EventVisibility.UNLISTED" /> <b-icon
icon="lock-open"
v-if="participation.event.visibility === EventVisibility.UNLISTED"
/>
<b-icon icon="lock" v-if="participation.event.visibility === EventVisibility.PRIVATE" /> <b-icon icon="lock" v-if="participation.event.visibility === EventVisibility.PRIVATE" />
</span> </span>
<span class="column is-narrow participant-stats"> <span class="column is-narrow participant-stats">
<span v-if="participation.event.options.maximumAttendeeCapacity !== 0"> <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
{{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.participant, total: participation.event.options.maximumAttendeeCapacity }) }} {{
<!-- <b-progress--> $t("{approved} / {total} seats", {
<!-- v-if="participation.event.options.maximumAttendeeCapacity > 0"--> approved: participation.event.participantStats.participant,
<!-- size="is-medium"--> total: participation.event.options.maximumAttendeeCapacity,
<!-- :value="participation.event.participantStats.participant * 100 / participation.event.options.maximumAttendeeCapacity">--> })
<!-- </b-progress>--> }}
</span> </span>
<span v-else> <span v-else>
{{ $tc('{count} participants', participation.event.participantStats.participant, { count: participation.event.participantStats.participant })}} {{
$tc("{count} participants", participation.event.participantStats.participant, {
count: participation.event.participantStats.participant,
})
}}
</span> </span>
<span <span v-if="participation.event.participantStats.notApproved > 0">
v-if="participation.event.participantStats.notApproved > 0"> <b-button
<b-button type="is-text" @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })"> type="is-text"
{{ $tc('{count} requests waiting', participation.event.participantStats.notApproved, { count: participation.event.participantStats.notApproved })}} @click="
gotToWithCheck(participation, {
name: RouteName.PARTICIPATIONS,
params: { eventId: participation.event.uuid },
})
"
>
{{
$tc(
"{count} requests waiting",
participation.event.participantStats.notApproved,
{ count: participation.event.participantStats.notApproved }
)
}}
</b-button> </b-button>
</span> </span>
</span> </span>
@ -96,56 +79,86 @@ export default {
</div> </div>
<div class="actions column is-narrow"> <div class="actions column is-narrow">
<ul> <ul>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))"> <li
v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
participation.role
)
"
>
<b-button <b-button
type="is-text" type="is-text"
@click="gotToWithCheck(participation, { name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid } })" @click="
icon-left="pencil" gotToWithCheck(participation, {
name: RouteName.EDIT_EVENT,
params: { eventId: participation.event.uuid },
})
"
icon-left="pencil"
>{{ $t("Edit") }}</b-button
> >
{{ $t('Edit') }}
</b-button>
</li> </li>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))" @click="openDeleteEventModalWrapper"> <li
<b-button type="is-text" icon-left="delete"> v-if="
{{ $t('Delete') }} ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
</b-button> participation.role
)
"
@click="openDeleteEventModalWrapper"
>
<b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button>
</li> </li>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))"> <li
v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
participation.role
)
"
>
<b-button <b-button
type="is-text" type="is-text"
@click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })" @click="
icon-left="account-multiple-plus" gotToWithCheck(participation, {
name: RouteName.PARTICIPATIONS,
params: { eventId: participation.event.uuid },
})
"
icon-left="account-multiple-plus"
>{{ $t("Manage participations") }}</b-button
> >
{{ $t('Manage participations') }}
</b-button>
</li> </li>
<li> <li>
<b-button <b-button
tag="router-link" tag="router-link"
icon-left="view-compact" icon-left="view-compact"
type="is-text" type="is-text"
:to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"> :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
{{ $t('View event page') }} >{{ $t("View event page") }}</b-button
</b-button> >
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</article> </article>
</template> </template>
<script lang="ts"> <script lang="ts">
import { IParticipant, ParticipantRole, EventVisibility, IEventCardOptions } from '@/types/event.model'; import { Component, Prop } from "vue-property-decorator";
import { Component, Prop } from 'vue-property-decorator'; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import { mixins } from "vue-class-component";
import { IPerson } from '@/types/actor'; import { RawLocation } from "vue-router";
import { mixins } from 'vue-class-component'; import {
import ActorMixin from '@/mixins/actor'; IParticipant,
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; ParticipantRole,
import EventMixin from '@/mixins/event'; EventVisibility,
import { RouteName } from '@/router'; IEventCardOptions,
import { changeIdentity } from '@/utils/auth'; } from "../../types/event.model";
import { Route } from 'vue-router'; import { IPerson } from "../../types/actor";
import ActorMixin from "../../mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import EventMixin from "../../mixins/event";
import RouteName from "../../router/name";
import { changeIdentity } from "../../utils/auth";
const defaultOptions: IEventCardOptions = { const defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,
@ -169,15 +182,19 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
* The participation associated * The participation associated
*/ */
@Prop({ required: true }) participation!: IParticipant; @Prop({ required: true }) participation!: IParticipant;
/** /**
* Options are merged with default options * Options are merged with default options
*/ */
@Prop({ required: false, default: () => defaultOptions }) options!: IEventCardOptions; @Prop({ required: false, default: () => defaultOptions })
options!: IEventCardOptions;
currentActor!: IPerson; currentActor!: IPerson;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
EventVisibility = EventVisibility; EventVisibility = EventVisibility;
RouteName = RouteName; RouteName = RouteName;
get mergedOptions(): IEventCardOptions { get mergedOptions(): IEventCardOptions {
@ -191,114 +208,116 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
await this.openDeleteEventModal(this.participation.event, this.currentActor); await this.openDeleteEventModal(this.participation.event, this.currentActor);
} }
async gotToWithCheck(participation: IParticipant, route: Route) { async gotToWithCheck(participation: IParticipant, route: RawLocation) {
if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) { if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
const organizer = participation.event.organizerActor as IPerson; const organizer = participation.event.organizerActor as IPerson;
await changeIdentity(this.$apollo.provider.defaultClient, organizer); await changeIdentity(this.$apollo.provider.defaultClient, organizer);
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t('Current identity has been changed to {identityName} in order to manage this event.', { message: this.$t(
identityName: organizer.preferredUsername, "Current identity has been changed to {identityName} in order to manage this event.",
}) as string, {
type: 'is-info', identityName: organizer.preferredUsername,
position: 'is-bottom-right', }
) as string,
type: "is-info",
position: "is-bottom-right",
duration: 5000, duration: 5000,
}); });
} }
return await this.$router.push(route); return this.$router.push(route);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../variables"; @import "../../variables";
article.box { article.box {
div.tag-container { div.tag-container {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0; right: 0;
margin-right: -5px; margin-right: -5px;
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
span.tag { span.tag {
margin: 5px auto; margin: 5px auto;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
/*word-break: break-all;*/ /*word-break: break-all;*/
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
display: block;
/*text-align: right;*/
font-size: 1em;
/*padding: 0 1px;*/
line-height: 1.75em;
}
}
div.content {
padding: 5px;
.participation-actor span,
.participant-stats span {
padding: 0 5px;
button {
height: auto;
padding-top: 0;
}
}
div.title-wrapper {
display: flex;
align-items: center;
div.date-component {
flex: 0;
margin-right: 16px;
}
.title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
display: block; font-weight: 400;
/*text-align: right;*/ line-height: 1em;
font-size: 1em; font-size: 1.6em;
/*padding: 0 1px;*/ padding-bottom: 5px;
line-height: 1.75em; margin: auto 0;
}
}
div.content {
padding: 5px;
.participation-actor span, .participant-stats span {
padding: 0 5px;
button {
height: auto;
padding-top: 0;
}
}
div.title-wrapper {
display: flex;
align-items: center;
div.date-component {
flex: 0;
margin-right: 16px;
}
.title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400;
line-height: 1em;
font-size: 1.6em;
padding-bottom: 5px;
margin: auto 0;
}
}
/deep/ progress + .progress-value {
color: lighten($primary, 20%) !important;
} }
} }
.actions { /deep/ progress + .progress-value {
ul li { color: lighten($primary, 20%) !important;
margin: 0 auto;
.is-link {
cursor: pointer;
}
.button.is-text {
text-decoration: none;
/deep/ span:first-child i.mdi::before {
font-size: 24px !important;
}
/deep/ span:last-child {
padding-left: 4px;
}
}
* {
font-size: 0.8rem;
color: $primary;
}
}
} }
} }
.actions {
ul li {
margin: 0 auto;
.is-link {
cursor: pointer;
}
.button.is-text {
text-decoration: none;
/deep/ span:first-child i.mdi::before {
font-size: 24px !important;
}
/deep/ span:last-child {
padding-left: 4px;
}
}
* {
font-size: 0.8rem;
color: $primary;
}
}
}
}
</style> </style>

View File

@ -1,48 +1,3 @@
<docs>
A simple card for an event
```vue
<template>
<div>
<EventListViewCard
:event="event"
/>
</div>
</template>
<script>
export default {
data() {
return {
event: {
title: 'Vue Styleguidist first meetup: learn the basics!',
id: 5,
uuid: 'some uuid',
beginsOn: new Date(),
organizerActor: {
preferredUsername: 'tcit',
name: 'Some Random Dude',
domain: null,
id: 4,
displayName() {
return 'Some random dude'
}
},
options: {
maximumAttendeeCapacity: 4
},
participantStats: {
approved: 1,
notApproved: 2
}
}
}
}
}
}
</script>
```
</docs>
<template> <template>
<article class="box"> <article class="box">
<div class="columns"> <div class="columns">
@ -51,12 +6,18 @@ export default {
<div class="date-component"> <div class="date-component">
<date-calendar-icon :date="event.beginsOn" /> <date-calendar-icon :date="event.beginsOn" />
</div> </div>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"><h2 class="title">{{ event.title }}</h2></router-link> <router-link :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }">
<h2 class="title">{{ event.title }}</h2>
</router-link>
</div> </div>
<div class="participation-actor has-text-grey"> <div class="participation-actor has-text-grey">
<span v-if="event.physicalAddress && event.physicalAddress.locality">{{ event.physicalAddress.locality }}</span> <span v-if="event.physicalAddress && event.physicalAddress.locality">
{{ event.physicalAddress.locality }}
</span>
<span> <span>
<span>{{ $t('Organized by {name}', { name: event.organizerActor.displayName() } ) }}</span> <span>
{{ $t("Organized by {name}", { name: event.organizerActor.displayName() }) }}
</span>
</span> </span>
</div> </div>
<div class="columns"> <div class="columns">
@ -67,30 +28,44 @@ export default {
</span> </span>
<span class="column is-narrow participant-stats"> <span class="column is-narrow participant-stats">
<span v-if="event.options.maximumAttendeeCapacity !== 0"> <span v-if="event.options.maximumAttendeeCapacity !== 0">
{{ $t('{approved} / {total} seats', {approved: event.participantStats.participant, total: event.options.maximumAttendeeCapacity }) }} {{
$t("{approved} / {total} seats", {
approved: event.participantStats.participant,
total: event.options.maximumAttendeeCapacity,
})
}}
</span> </span>
<span v-else> <span v-else>
{{ $tc('{count} participants', event.participantStats.participant, { count: event.participantStats.participant })}} {{
$tc("{count} participants", event.participantStats.participant, {
count: event.participantStats.participant,
})
}}
</span> </span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</article> </article>
</template> </template>
<script lang="ts"> <script lang="ts">
import { IParticipant, ParticipantRole, EventVisibility, IEventCardOptions } from '@/types/event.model'; import {
import { Component, Prop } from 'vue-property-decorator'; IParticipant,
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; ParticipantRole,
import { IPerson } from '@/types/actor'; EventVisibility,
import { mixins } from 'vue-class-component'; IEventCardOptions,
import ActorMixin from '@/mixins/actor'; } from "@/types/event.model";
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import { Component, Prop } from "vue-property-decorator";
import EventMixin from '@/mixins/event'; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { RouteName } from '@/router'; import { IPerson } from "@/types/actor";
import { changeIdentity } from '@/utils/auth'; import { mixins } from "vue-class-component";
import { Route } from 'vue-router'; import ActorMixin from "@/mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import EventMixin from "@/mixins/event";
import { changeIdentity } from "@/utils/auth";
import { Route } from "vue-router";
import RouteName from "../../router/name";
const defaultOptions: IEventCardOptions = { const defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,
@ -114,58 +89,61 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
* The participation associated * The participation associated
*/ */
@Prop({ required: true }) event!: IParticipant; @Prop({ required: true }) event!: IParticipant;
/** /**
* Options are merged with default options * Options are merged with default options
*/ */
@Prop({ required: false, default: () => defaultOptions }) options!: IEventCardOptions; @Prop({ required: false, default: () => defaultOptions })
options!: IEventCardOptions;
currentActor!: IPerson; currentActor!: IPerson;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
EventVisibility = EventVisibility;
RouteName = RouteName;
EventVisibility = EventVisibility;
RouteName = RouteName;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../variables"; @import "../../variables";
article.box { article.box {
div.content { div.content {
padding: 5px; padding: 5px;
.participation-actor span, .participant-stats span { .participation-actor span,
padding: 0 5px; .participant-stats span {
padding: 0 5px;
button { button {
height: auto; height: auto;
padding-top: 0; padding-top: 0;
} }
}
div.title-wrapper {
display: flex;
align-items: center;
div.date-component {
flex: 0;
margin-right: 16px;
} }
div.title-wrapper { .title {
display: flex; display: -webkit-box;
align-items: center; -webkit-line-clamp: 1;
-webkit-box-orient: vertical;
div.date-component { overflow: hidden;
flex: 0; font-weight: 400;
margin-right: 16px; line-height: 1em;
} font-size: 1.6em;
padding-bottom: 5px;
.title { margin: auto 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400;
line-height: 1em;
font-size: 1.6em;
padding-bottom: 5px;
margin: auto 0;
}
} }
} }
} }
}
</style> </style>

View File

@ -0,0 +1,42 @@
<template>
<div>
<h2>{{ title }}</h2>
<div class="eventMetadataBlock">
<b-icon v-if="icon" :icon="icon" size="is-medium" />
<p :class="{ 'padding-left': icon }">
<slot></slot>
</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class EventMetadataBlock extends Vue {
@Prop({ required: false, type: String }) icon!: string;
@Prop({ required: true, type: String }) title!: string;
}
</script>
<style lang="scss" scoped>
h2 {
font-size: 1.8rem;
font-weight: 500;
color: #f7ba30;
}
div.eventMetadataBlock {
display: flex;
align-items: center;
margin-bottom: 1.75rem;
p {
flex: 1;
&.padding-left {
padding-left: 20px;
}
}
}
</style>

View File

@ -0,0 +1,55 @@
<template>
<router-link
class="event-minimalist-card-wrapper"
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
>
<date-calendar-icon class="calendar-icon" :date="event.beginsOn" />
<div class="title-info-wrapper">
<p class="event-minimalist-title">{{ event.title }}</p>
<p v-if="event.physicalAddress" class="has-text-grey">
{{ event.physicalAddress.description }}
</p>
<p v-else>3 demandes de participation à traiter</p>
</div>
</router-link>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IEvent } from "@/types/event.model";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import RouteName from "../../router/name";
@Component({
components: {
DateCalendarIcon,
},
})
export default class EventMinimalistCard extends Vue {
@Prop({ required: true, type: Object }) event!: IEvent;
RouteName = RouteName;
}
</script>
<style lang="scss" scoped>
.event-minimalist-card-wrapper {
display: flex;
width: 100%;
color: initial;
align-items: flex-start;
.calendar-icon {
margin-right: 1rem;
}
.title-info-wrapper {
flex: 2;
.event-minimalist-title {
color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
font-size: 1.25rem;
font-weight: 700;
}
}
}
</style>

View File

@ -24,86 +24,131 @@ A button to set your participation
</docs> </docs>
<template> <template>
<div class="participation-button"> <div class="participation-button">
<b-dropdown aria-role="list" position="is-bottom-left" v-if="participation && participation.role === ParticipantRole.PARTICIPANT"> <b-dropdown
<button class="button is-success is-large" type="button" slot="trigger"> aria-role="list"
<b-icon icon="check" /> position="is-bottom-left"
<template> v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
<span>{{ $t('I participate') }}</span> >
</template> <button class="button is-success is-large" type="button" slot="trigger">
<b-icon icon="menu-down" /> <b-icon icon="check" />
</button> <template>
<span>{{ $t("I participate") }}</span>
</template>
<b-icon icon="menu-down" />
</button>
<b-dropdown-item :value="false" aria-role="listitem" @click="confirmLeave" class="has-text-danger"> <b-dropdown-item
{{ $t('Cancel my participation…')}} :value="false"
</b-dropdown-item> aria-role="listitem"
</b-dropdown> @click="confirmLeave"
class="has-text-danger"
>{{ $t("Cancel my participation…") }}</b-dropdown-item
>
</b-dropdown>
<div v-else-if="participation && participation.role === ParticipantRole.NOT_APPROVED"> <div v-else-if="participation && participation.role === ParticipantRole.NOT_APPROVED">
<b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled"> <b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled">
<button class="button is-success is-large" type="button" slot="trigger"> <button class="button is-success is-large" type="button" slot="trigger">
<b-icon icon="timer-sand-empty" /> <b-icon icon="timer-sand-empty" />
<template> <template>
<span>{{ $t('I participate') }}</span> <span>{{ $t("I participate") }}</span>
</template> </template>
<b-icon icon="menu-down" /> <b-icon icon="menu-down" />
</button> </button>
<!-- <b-dropdown-item :value="false" aria-role="listitem">--> <!-- <b-dropdown-item :value="false" aria-role="listitem">-->
<!-- {{ $t('Change my identity…')}}--> <!-- {{ $t('Change my identity…')}}-->
<!-- </b-dropdown-item>--> <!-- </b-dropdown-item>-->
<b-dropdown-item :value="false" aria-role="listitem" @click="confirmLeave" class="has-text-danger"> <b-dropdown-item
{{ $t('Cancel my participation request…')}} :value="false"
</b-dropdown-item> aria-role="listitem"
</b-dropdown> @click="confirmLeave"
<small>{{ $t('Participation requested!')}}</small><br /> class="has-text-danger"
<small>{{ $t('Waiting for organization team approval.')}}</small> >{{ $t("Cancel my participation request…") }}</b-dropdown-item
</div> >
</b-dropdown>
<div v-else-if="participation && participation.role === ParticipantRole.REJECTED"> <small>{{ $t("Participation requested!") }}</small>
<span>{{ $t('Unfortunately, your participation request was rejected by the organizers.')}}</span> <br />
</div> <small>{{ $t("Waiting for organization team approval.") }}</small>
<b-dropdown aria-role="list" position="is-bottom-left" v-else-if="!participation && currentActor.id">
<button class="button is-primary is-large" type="button" slot="trigger">
<template>
<span>{{ $t('Participate') }}</span>
</template>
<b-icon icon="menu-down" />
</button>
<b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)">
<div class="media">
<div class="media-left">
<figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" :src="currentActor.avatar.url" alt="" />
</figure>
</div>
<div class="media-content">
<span>{{ $t('as {identity}', {identity: currentActor.name || `@${currentActor.preferredUsername}` }) }}</span>
</div>
</div>
</b-dropdown-item>
<b-dropdown-item :value="false" aria-role="listitem" @click="joinModal" v-if="identities.length > 1">
{{ $t('with another identity…')}}
</b-dropdown-item>
</b-dropdown>
<b-button tag="router-link" :to="{ name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, params: { uuid: event.uuid } }" v-else-if="!participation && hasAnonymousParticipationMethods" type="is-primary" size="is-large" native-type="button">{{ $t('Participate') }}</b-button>
<b-button tag="router-link" :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, params: { uuid: event.uuid } }" v-else-if="!currentActor.id" type="is-primary" size="is-large" native-type="button">{{ $t('Participate') }}</b-button>
</div> </div>
<div v-else-if="participation && participation.role === ParticipantRole.REJECTED">
<span>
{{ $t("Unfortunately, your participation request was rejected by the organizers.") }}
</span>
</div>
<b-dropdown
aria-role="list"
position="is-bottom-left"
v-else-if="!participation && currentActor.id"
>
<button class="button is-primary is-large" type="button" slot="trigger">
<template>
<span>{{ $t("Participate") }}</span>
</template>
<b-icon icon="menu-down" />
</button>
<b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)">
<div class="media">
<div class="media-left">
<figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" :src="currentActor.avatar.url" alt />
</figure>
</div>
<div class="media-content">
<span>
{{
$t("as {identity}", {
identity: currentActor.name || `@${currentActor.preferredUsername}`,
})
}}
</span>
</div>
</div>
</b-dropdown-item>
<b-dropdown-item
:value="false"
aria-role="listitem"
@click="joinModal"
v-if="identities.length > 1"
>{{ $t("with another identity…") }}</b-dropdown-item
>
</b-dropdown>
<b-button
tag="router-link"
:to="{ name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, params: { uuid: event.uuid } }"
v-else-if="!participation && hasAnonymousParticipationMethods"
type="is-primary"
size="is-large"
native-type="button"
>{{ $t("Participate") }}</b-button
>
<b-button
tag="router-link"
:to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, params: { uuid: event.uuid } }"
v-else-if="!currentActor.id"
type="is-primary"
size="is-large"
native-type="button"
>{{ $t("Participate") }}</b-button
>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from '@/types/event.model'; import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from "../../types/event.model";
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from "../../types/actor";
import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
import { CURRENT_USER_CLIENT } from '@/graphql/user'; import { CURRENT_USER_CLIENT } from "../../graphql/user";
import { CONFIG } from '@/graphql/config'; import { CONFIG } from "../../graphql/config";
import { IConfig } from '@/types/config.model'; import { IConfig } from "../../types/config.model";
import { RouteName } from '@/router'; import RouteName from "../../router/name";
@Component({ @Component({
apollo: { apollo: {
@ -114,7 +159,8 @@ import { RouteName } from '@/router';
config: CONFIG, config: CONFIG,
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [], update: ({ identities }) =>
identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
skip() { skip() {
return this.currentUser.isLoggedIn === false; return this.currentUser.isLoggedIn === false;
}, },
@ -123,28 +169,33 @@ import { RouteName } from '@/router';
}) })
export default class ParticipationButton extends Vue { export default class ParticipationButton extends Vue {
@Prop({ required: true }) participation!: IParticipant; @Prop({ required: true }) participation!: IParticipant;
@Prop({ required: true }) event!: IEvent; @Prop({ required: true }) event!: IEvent;
@Prop({ required: true }) currentActor!: IPerson; @Prop({ required: true }) currentActor!: IPerson;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
identities: IPerson[] = []; identities: IPerson[] = [];
config!: IConfig; config!: IConfig;
RouteName = RouteName; RouteName = RouteName;
joinEvent(actor: IPerson) { joinEvent(actor: IPerson) {
if (this.event.joinOptions === EventJoinOptions.RESTRICTED) { if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
this.$emit('joinEventWithConfirmation', actor); this.$emit("joinEventWithConfirmation", actor);
} else { } else {
this.$emit('joinEvent', actor); this.$emit("joinEvent", actor);
} }
} }
joinModal() { joinModal() {
this.$emit('joinModal'); this.$emit("joinModal");
} }
confirmLeave() { confirmLeave() {
this.$emit('confirmLeave'); this.$emit("confirmLeave");
} }
get hasAnonymousParticipationMethods(): boolean { get hasAnonymousParticipationMethods(): boolean {
@ -154,20 +205,20 @@ export default class ParticipationButton extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.participation-button { .participation-button {
.dropdown { .dropdown {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
&.dropdown-disabled button { &.dropdown-disabled button {
opacity: 0.5; opacity: 0.5;
}
}
} }
}
}
.anonymousParticipationModal { .anonymousParticipationModal {
/deep/ .animation-content { /deep/ .animation-content {
z-index: 1; z-index: 1;
} }
} }
</style> </style>

View File

@ -1,123 +1,164 @@
<template> <template>
<b-table <b-table
:data="data" :data="data"
ref="queueTable" ref="queueTable"
detailed detailed
detail-key="id" detail-key="id"
:checked-rows.sync="checkedRows" :checked-rows.sync="checkedRows"
checkable checkable
:is-row-checkable="row => row.role !== ParticipantRole.CREATOR" :is-row-checkable="(row) => row.role !== ParticipantRole.CREATOR"
checkbox-position="left" checkbox-position="left"
default-sort="insertedAt" :show-detail-icon="false"
default-sort-direction="asc" :loading="this.$apollo.loading"
:show-detail-icon="false" paginated
:loading="this.$apollo.loading" backend-pagination
paginated :aria-next-label="$t('Next page')"
backend-pagination :aria-previous-label="$t('Previous page')"
:aria-next-label="$t('Next page')" :aria-page-label="$t('Page')"
:aria-previous-label="$t('Previous page')" :aria-current-label="$t('Current page')"
:aria-page-label="$t('Page')" :total="total"
:aria-current-label="$t('Current page')" :per-page="perPage"
:total="total" backend-sorting
:per-page="perPage" :default-sort-direction="'desc'"
backend-sorting :default-sort="['insertedAt', 'desc']"
:default-sort-direction="'desc'" @page-change="(page) => $emit('page-change', page)"
:default-sort="['insertedAt', 'desc']" @sort="(field, order) => $emit('sort', field, order)"
@page-change="page => $emit('page-change', page)" >
@sort="(field, order) => $emit('sort', field, order)" <template slot-scope="props">
> <b-table-column field="insertedAt" :label="$t('Date')" sortable>
<template slot-scope="props"> <b-tag type="is-success" class="has-text-centered"
<b-table-column field="insertedAt" :label="$t('Date')" sortable> >{{ props.row.insertedAt | formatDateString }}<br />{{
<b-tag type="is-success" class="has-text-centered">{{ props.row.insertedAt | formatDateString }}<br>{{ props.row.insertedAt | formatTimeString }}</b-tag> props.row.insertedAt | formatTimeString
</b-table-column> }}</b-tag
<b-table-column field="role" :label="$t('Role')" sortable v-if="showRole"> >
<span v-if="props.row.role === ParticipantRole.CREATOR"> </b-table-column>
{{ $t('Organizer') }} <b-table-column field="role" :label="$t('Role')" sortable v-if="showRole">
</span> <span v-if="props.row.role === ParticipantRole.CREATOR">
<span v-else-if="props.row.role === ParticipantRole.PARTICIPANT"> {{ $t("Organizer") }}
{{ $t('Participant') }} </span>
</span> <span v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
</b-table-column> {{ $t("Participant") }}
<b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable> </span>
<article class="media"> </b-table-column>
<figure class="media-left" v-if="props.row.actor.avatar"> <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
<p class="image is-48x48"> <article class="media">
<img :src="props.row.actor.avatar.url" alt=""> <figure class="media-left" v-if="props.row.actor.avatar">
</p> <p class="image is-48x48">
</figure> <img :src="props.row.actor.avatar.url" alt="" />
<b-icon class="media-left" v-else-if="props.row.actor.preferredUsername === 'anonymous'" size="is-large" icon="incognito" /> </p>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> </figure>
<div class="media-content"> <b-icon
<div class="content"> class="media-left"
<span v-if="props.row.actor.preferredUsername !== 'anonymous'"> v-else-if="props.row.actor.preferredUsername === 'anonymous'"
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span><br /> size="is-large"
<span class="is-size-7 has-text-grey">@{{ props.row.actor.preferredUsername }}</span> icon="incognito"
</span> />
<span v-else> <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
{{ $t('Anonymous participant') }} <div class="media-content">
</span> <div class="content">
</div> <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
</div> <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
</article> ><br />
</b-table-column> <span class="is-size-7 has-text-grey"
<b-table-column field="metadata.message" :label="$t('Message')"> >@{{ props.row.actor.preferredUsername }}</span
<span @click="toggleQueueDetails(props.row)" :class="{ 'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH }" v-if="props.row.metadata && props.row.metadata.message"> >
{{ props.row.metadata.message | ellipsize }} </span>
</span> <span v-else>
<span v-else class="has-text-grey"> {{ $t("Anonymous participant") }}
{{ $t('No message') }} </span>
</span>
</b-table-column>
</template>
<template slot="detail" slot-scope="props">
<article v-html="nl2br(props.row.metadata.message)" />
</template>
<template slot="bottom-left" v-if="checkedRows.length > 0">
<div class="buttons">
<b-button @click="acceptParticipants(checkedRows)" type="is-success" v-if="canAcceptParticipants">
{{ $tc('No participant to approve|Approve participant|Approve {number} participants', checkedRows.length, { number: checkedRows.length }) }}
</b-button>
<b-button @click="refuseParticipants(checkedRows)" type="is-danger" v-if="canRefuseParticipants">
{{ $tc('No participant to reject|Reject participant|Reject {number} participants', checkedRows.length, { number: checkedRows.length }) }}
</b-button>
</div> </div>
</template> </div>
</b-table> </article>
</b-table-column>
<b-table-column field="metadata.message" :label="$t('Message')">
<span
@click="toggleQueueDetails(props.row)"
:class="{
'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
}"
v-if="props.row.metadata && props.row.metadata.message"
>
{{ props.row.metadata.message | ellipsize }}
</span>
<span v-else class="has-text-grey">
{{ $t("No message") }}
</span>
</b-table-column>
</template>
<template slot="detail" slot-scope="props">
<article v-html="nl2br(props.row.metadata.message)" />
</template>
<template slot="bottom-left" v-if="checkedRows.length > 0">
<div class="buttons">
<b-button
@click="acceptParticipants(checkedRows)"
type="is-success"
v-if="canAcceptParticipants"
>
{{
$tc(
"No participant to approve|Approve participant|Approve {number} participants",
checkedRows.length,
{ number: checkedRows.length }
)
}}
</b-button>
<b-button
@click="refuseParticipants(checkedRows)"
type="is-danger"
v-if="canRefuseParticipants"
>
{{
$tc(
"No participant to reject|Reject participant|Reject {number} participants",
checkedRows.length,
{ number: checkedRows.length }
)
}}
</b-button>
</div>
</template>
</b-table>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { IParticipant, ParticipantRole } from '@/types/event.model'; import { IParticipant, ParticipantRole } from "../../types/event.model";
import { Refs } from '@/shims-vue'; import { nl2br } from "../../utils/html";
import { nl2br } from '@/utils/html'; import { asyncForEach } from "../../utils/asyncForEach";
import { asyncForEach } from '@/utils/asyncForEach';
const MESSAGE_ELLIPSIS_LENGTH = 130; const MESSAGE_ELLIPSIS_LENGTH = 130;
@Component({ @Component({
filters: { filters: {
ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat('…'), ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
}, },
}) })
export default class ParticipationTable extends Vue { export default class ParticipationTable extends Vue {
@Prop({ required: true, type: Array }) data!: IParticipant[]; @Prop({ required: true, type: Array }) data!: IParticipant[];
@Prop({ required: true, type: Number }) total!: number; @Prop({ required: true, type: Number }) total!: number;
@Prop({ required: true, type: Function }) acceptParticipant;
@Prop({ required: true, type: Function }) refuseParticipant; @Prop({ required: true, type: Function }) acceptParticipant!: Function;
@Prop({ required: false, type: Boolean, default: false }) showRole;
@Prop({ required: false, type: Number, default: 20 }) perPage; @Prop({ required: true, type: Function }) refuseParticipant!: Function;
@Prop({ required: false, type: Boolean, default: false }) showRole!: boolean;
@Prop({ required: false, type: Number, default: 20 }) perPage!: number;
@Ref("queueTable") readonly queueTable!: any;
checkedRows: IParticipant[] = []; checkedRows: IParticipant[] = [];
MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH; MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH;
nl2br = nl2br;
ParticipantRole = ParticipantRole;
$refs!: Refs<{ nl2br = nl2br;
queueTable: any,
}>; ParticipantRole = ParticipantRole;
toggleQueueDetails(row: IParticipant) { toggleQueueDetails(row: IParticipant) {
if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return; if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
this.$refs.queueTable.toggleDetails(row); this.queueTable.toggleDetails(row);
} }
async acceptParticipants(participants: IParticipant[]) { async acceptParticipants(participants: IParticipant[]) {
@ -134,31 +175,33 @@ export default class ParticipationTable extends Vue {
this.checkedRows = []; this.checkedRows = [];
} }
/** /**
* We can accept participants if at least one of them is not approved * We can accept participants if at least one of them is not approved
*/ */
get canAcceptParticipants(): boolean { get canAcceptParticipants(): boolean {
return this.checkedRows.some( return this.checkedRows.some((participant: IParticipant) =>
(participant: IParticipant) => [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role), [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)
); );
} }
/** /**
* We can refuse participants if at least one of them is something different than not approved * We can refuse participants if at least one of them is something different than not approved
*/ */
get canRefuseParticipants(): boolean { get canRefuseParticipants(): boolean {
return this.checkedRows.some((participant: IParticipant) => participant.role !== ParticipantRole.REJECTED); return this.checkedRows.some(
(participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ellipsed-message { .ellipsed-message {
cursor: pointer; cursor: pointer;
} }
.table { .table {
span.tag { span.tag {
height: initial; height: initial;
} }
} }
</style> </style>

View File

@ -1,56 +1,33 @@
<docs>
### Tag input
A special input to manage event tags
```vue
<tag-input :value="[{ title: 'toto' }]" path="title" />
```
```vue
<template> <template>
<tag-input v-model="tags" :data="sourceTags" path="title" /> <b-field>
</template> <template slot="label">
<script> {{ $t("Add some tags") }}
export default { <b-tooltip
data() { type="is-dark"
return { :label="$t('You can add tags by hitting the Enter key or by adding a comma')"
sourceTags: [{ title: 'my tag'}, { title: 'my second tag' }, { title: 'another example'}], >
tags: [] <b-icon size="is-small" icon="help-circle-outline"></b-icon>
} </b-tooltip>
} </template>
} <b-taginput
</script> v-model="tagsStrings"
``` :data="filteredTags"
autocomplete
</docs> :allow-new="true"
:field="path"
<template> icon="label"
<b-field> maxlength="20"
<template slot="label"> maxtags="10"
{{ $t('Add some tags') }} :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
<b-tooltip type="is-dark" :label="$t('You can add tags by hitting the Enter key or by adding a comma')"> @typing="getFilteredTags"
<b-icon size="is-small" icon="help-circle-outline"></b-icon> >
</b-tooltip> </b-taginput>
</template> </b-field>
<b-taginput
v-model="tagsStrings"
:data="filteredTags"
autocomplete
:allow-new="true"
:field="path"
icon="label"
maxlength="20"
maxtags="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="getFilteredTags"
>
</b-taginput>
</b-field>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { get, differenceBy } from 'lodash'; import { get, differenceBy } from "lodash";
import { ITag } from '@/types/tag.model'; import { ITag } from "../../types/tag.model";
@Component({ @Component({
computed: { computed: {
@ -59,32 +36,30 @@ import { ITag } from '@/types/tag.model';
return this.$props.value.map((tag: ITag) => tag.title); return this.$props.value.map((tag: ITag) => tag.title);
}, },
set(tagStrings) { set(tagStrings) {
const tagEntities = tagStrings.map((tag) => { const tagEntities = tagStrings.map((tag: string | ITag) => {
if (TagInput.isTag(tag)) { if (!(tag instanceof String)) {
return tag; return tag;
} }
return { title: tag, slug: tag } as ITag; return { title: tag, slug: tag } as ITag;
}); });
this.$emit('input', tagEntities); this.$emit("input", tagEntities);
}, },
}, },
}, },
}) })
export default class TagInput extends Vue { export default class TagInput extends Vue {
@Prop({ required: false, default: () => [] }) data!: ITag[]; @Prop({ required: false, default: () => [] }) data!: ITag[];
@Prop({ required: true, default: 'value' }) path!: string;
@Prop({ required: true, default: "value" }) path!: string;
@Prop({ required: true }) value!: ITag[]; @Prop({ required: true }) value!: ITag[];
filteredTags: ITag[] = []; filteredTags: ITag[] = [];
getFilteredTags(text) { getFilteredTags(text: string) {
this.filteredTags = differenceBy(this.data, this.value, 'id').filter((option) => { this.filteredTags = differenceBy(this.data, this.value, "id").filter(
return get(option, this.path) (option) => get(option, this.path).toString().toLowerCase().indexOf(text.toLowerCase()) >= 0
.toString() );
.toLowerCase()
.indexOf(text.toLowerCase()) >= 0;
});
} }
static isTag(x: any): x is ITag { static isTag(x: any): x is ITag {

View File

@ -1,25 +1,40 @@
<template> <template>
<footer class="footer" ref="footer"> <footer class="footer" ref="footer">
<mobilizon-logo :invert="true" class="logo" /> <mobilizon-logo :invert="true" class="logo" />
<img src="../assets/footer.png" :alt="$t('World map')" /> <img src="../assets/footer.png" :alt="$t('World map')" />
<ul> <ul>
<li><a href="https://joinmobilizon.org">{{ $t('About') }}</a></li> <li>
<li><router-link :to="{ name: RouteName.TERMS }">{{ $t('Terms') }}</router-link></li> <a href="https://joinmobilizon.org">{{ $t("About") }}</a>
<li><a href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE">{{ $t('License') }}</a></li> </li>
</ul> <li>
<div class="content has-text-centered"> <router-link :to="{ name: RouteName.TERMS }">{{ $t("Terms") }}</router-link>
<span>{{ $t('© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks', { date: new Date().getFullYear()}) }}</span> </li>
</div> <li>
</footer> <a href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE">
{{ $t("License") }}
</a>
</li>
</ul>
<div class="content has-text-centered">
<span>
{{
$t(
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks",
{ date: new Date().getFullYear() }
)
}}
</span>
</div>
</footer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
import Logo from './Logo.vue'; import RouteName from "../router/name";
import { RouteName } from '@/router'; import Logo from "./Logo.vue";
@Component({ @Component({
components: { components: {
'mobilizon-logo': Logo, "mobilizon-logo": Logo,
}, },
}) })
export default class Footer extends Vue { export default class Footer extends Vue {
@ -27,33 +42,34 @@ export default class Footer extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../variables.scss"; @import "../variables.scss";
footer.footer { footer.footer {
color: $secondary; color: $secondary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.logo { .logo {
fill: $secondary; fill: $secondary;
flex: 1; flex: 1;
} max-width: 300px;
}
div.content { div.content {
flex: 1; flex: 1;
} }
ul li { ul li {
display: inline-flex; display: inline-flex;
margin: auto 5px; margin: auto 5px;
a { a {
color: #eee; color: #eee;
font-size: 1.5rem; font-size: 1.5rem;
text-decoration: underline; text-decoration: underline;
text-decoration-color: $secondary; text-decoration-color: $secondary;
}
}
} }
}
}
</style> </style>

View File

@ -1,32 +1,50 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-image" v-if="!group.banner">
<figure class="image is-4by3">
<img src="https://picsum.photos/g/400/200/">
</figure>
</div>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="media">
<router-link :to="{ name: RouteName.GROUP, params:{ preferredUsername: group.preferredUsername } }"> <div class="media-left">
<h2 class="title">{{ group.displayName() }}</h2> <figure class="image is-48x48">
</router-link> <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
</figure>
</div>
<div class="media-content">
<router-link
:to="{ name: RouteName.GROUP, params: { preferredUsername: groupFullUsername } }"
>
<h3>{{ member.parent.name }}</h3>
<p class="is-6 has-text-grey">
<span v-if="member.parent.domain">{{
`@${member.parent.preferredUsername}@${member.parent.domain}`
}}</span>
<span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
</p>
<b-tag type="is-info">{{ member.role }}</b-tag>
</router-link>
</div>
</div> </div>
<div> <div class="content">
<p>{{ group.summary }}</p> <p>{{ member.parent.summary }}</p>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { Group } from '@/types/actor'; import { IGroup, IMember } from "@/types/actor";
import { RouteName } from '@/router'; import RouteName from "../../router/name";
@Component @Component
export default class GroupCard extends Vue { export default class GroupCard extends Vue {
@Prop({ required: true }) group!: Group; @Prop({ required: true }) member!: IMember;
RouteName = RouteName; RouteName = RouteName;
get groupFullUsername() {
if (this.member.parent.domain) {
return `${this.member.parent.preferredUsername}@${this.member.parent.domain}`;
}
return this.member.parent.preferredUsername;
}
} }
</script> </script>

View File

@ -0,0 +1,75 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Pick a group") }}</p>
</header>
<section class="modal-card-body">
<div class="list is-hoverable">
<a
class="list-item"
v-for="groupMembership in groupMemberships.elements"
:class="{ 'is-active': groupMembership.parent.id === currentGroup.id }"
@click="changeCurrentGroup(groupMembership.parent)"
:key="groupMembership.id"
>
<div class="media">
<img
class="media-left image is-48x48"
v-if="groupMembership.parent.avatar"
:src="groupMembership.parent.avatar.url"
alt=""
/>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
<div class="media-content">
<h3>@{{ groupMembership.parent.name }}</h3>
<small>{{ `@${groupMembership.parent.preferredUsername}` }}</small>
</div>
</div>
</a>
<a class="list-item" @click="changeCurrentGroup(new Group())" v-if="currentGroup.id">
<h3>{{ $t("Unset group") }}</h3>
</a>
</div>
</section>
<slot name="footer" />
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, IMember, IPerson, Group } from "@/types/actor";
import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { Paginate } from "@/types/paginate";
@Component({
apollo: {
groupMemberships: {
query: PERSON_MEMBERSHIPS,
variables() {
return {
id: this.identity.id,
};
},
update: (data) => data.person.memberships,
skip() {
return !this.identity.id;
},
},
},
})
export default class GroupPicker extends Vue {
@Prop() value!: IGroup;
@Prop() identity!: IPerson;
groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
currentGroup: IGroup = this.value;
Group = Group;
changeCurrentGroup(group: IGroup) {
this.currentGroup = group;
this.$emit("input", group);
}
}
</script>

View File

@ -0,0 +1,110 @@
<template>
<div class="group-picker">
<div
class="no-group box"
v-if="!currentGroup.id && groupMemberships.total > 0"
@click="isComponentModalActive = true"
>
<p class="is-4">{{ $t("Add a group") }}</p>
<p class="is-6 is-size-6 has-text-grey">
{{ $t("The event will show the group as organizer.") }}
</p>
</div>
<div v-if="inline && currentGroup.id" class="inline box" @click="isComponentModalActive = true">
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="currentGroup.avatar">
<img class="image" :src="currentGroup.avatar.url" :alt="currentGroup.avatar.alt" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="currentGroup.name">
<p class="is-4">{{ currentGroup.name }}</p>
<p class="is-6 has-text-grey">{{ `@${currentGroup.preferredUsername}` }}</p>
</div>
<div class="media-content" v-else>
{{ `@${currentGroup.preferredUsername}` }}
</div>
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t("Change") }}
</b-button>
</div>
</div>
<span v-else-if="currentGroup.id" class="block" @click="isComponentModalActive = true">
<img
class="image is-48x48"
v-if="currentGroup.avatar"
:src="currentGroup.avatar.url"
:alt="currentGroup.avatar.alt"
/>
<b-icon v-else size="is-large" icon="account-circle" />
</span>
<div v-if="groupMemberships.total === 0" class="box">
<p class="is-4">{{ $t("This identity is not a member of any group.") }}</p>
<p class="is-6 is-size-6 has-text-grey">
{{ $t("You need to create the group before you create an event.") }}
</p>
</div>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<group-picker v-model="currentGroup" :identity.sync="identity" @input="relay" />
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { IGroup, IMember, IPerson } from "../../types/actor";
import GroupPicker from "./GroupPicker.vue";
import { PERSON_MEMBERSHIPS } from "../../graphql/actor";
import { Paginate } from "../../types/paginate";
@Component({
components: { GroupPicker },
apollo: {
groupMemberships: {
query: PERSON_MEMBERSHIPS,
variables() {
return {
id: this.identity.id,
};
},
update: (data) => data.person.memberships,
skip() {
return !this.identity.id;
},
},
},
})
export default class GroupPickerWrapper extends Vue {
@Prop({ type: Object, required: true }) value!: IGroup;
@Prop({ default: true, type: Boolean }) inline!: boolean;
@Prop({ type: Object, required: true }) identity!: IPerson;
isComponentModalActive = false;
currentGroup: IGroup = this.value;
groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
@Watch("value")
updateCurrentGroup(value: IGroup) {
this.currentGroup = value;
}
relay(group: IGroup) {
this.currentGroup = group;
this.$emit("input", group);
this.isComponentModalActive = false;
}
}
</script>
<style lang="scss" scoped>
.group-picker {
.block,
.no-group,
.inline {
cursor: pointer;
}
}
</style>

View File

@ -0,0 +1,78 @@
<template>
<div class="media">
<div class="media-content">
<div class="content">
<p>
{{
$t("You have been invited by {invitedBy} to the following group:", {
invitedBy: member.invitedBy.name,
})
}}
</p>
</div>
<div class="media subfield">
<div class="media-left">
<figure class="image is-48x48">
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
</figure>
</div>
<div class="media-content">
<div class="level">
<div class="level-left">
<div class="level-item">
<router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: member.parent.preferredUsername },
}"
>
<h3>{{ member.parent.name }}</h3>
<p class="is-6 has-text-grey">
<span v-if="member.parent.domain">
{{ `@${member.parent.preferredUsername}@${member.parent.domain}` }}
</span>
<span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
</p>
</router-link>
</div>
</div>
<div class="level-right">
<div class="level-item">
<b-button type="is-success" @click="$emit('accept', member.id)">
{{ $t("Accept") }}
</b-button>
</div>
<div class="level-item">
<b-button type="is-danger" @click="$emit('decline', member.id)">
{{ $t("Decline") }}
</b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, IMember } from "@/types/actor";
import RouteName from "../../router/name";
@Component
export default class InvitationCard extends Vue {
@Prop({ required: true }) member!: IMember;
RouteName = RouteName;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
.media:not(.subfield) {
background: lighten($primary, 40%);
padding: 10px;
}
</style>

View File

@ -1,23 +1,30 @@
<template> <template>
<img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="40px"> <!-- <img src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{ invert: invert }" height="40" /> -->
<MobilizonLogo />
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@Component // @ts-ignore
import MobilizonLogo from "../assets/mobilizon_logo.svg";
@Component({
components: {
MobilizonLogo,
},
})
export default class Logo extends Vue { export default class Logo extends Vue {
@Prop({ type: Boolean, required: false, default: false }) invert!: boolean; @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../variables.scss"; @import "../variables.scss";
svg { svg {
fill: $primary; fill: $primary;
&.invert { &.invert {
fill: $secondary; fill: $secondary;
} }
} }
</style> </style>

View File

@ -1,77 +1,92 @@
<template> <template>
<div class="map-container" v-if="config"> <div class="map-container" v-if="config">
<l-map <l-map
:zoom="mergedOptions.zoom" :zoom="mergedOptions.zoom"
:style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`" :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
class="leaflet-map" class="leaflet-map"
:center="[lat, lon]" :center="[lat, lon]"
@click="clickMap" @click="clickMap"
@update:zoom="updateZoom" @update:zoom="updateZoom"
> >
<l-tile-layer <l-tile-layer :url="config.maps.tiles.endpoint" :attribution="attribution"> </l-tile-layer>
:url="config.maps.tiles.endpoint" <v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" />
:attribution="attribution" <l-marker
> :lat-lng="[lat, lon]"
@add="openPopup"
</l-tile-layer> @update:latLng="updateDraggableMarkerPosition"
<v-locatecontrol :options="{icon: 'mdi mdi-map-marker'}"/> :draggable="!readOnly"
<l-marker :lat-lng="[lat, lon]" @add="openPopup" @update:latLng="updateDraggableMarkerPosition" :draggable="!readOnly"> >
<l-popup v-if="popupMultiLine"> <l-popup v-if="popupMultiLine">
<span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span> <span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
</l-popup> </l-popup>
</l-marker> </l-marker>
</l-map> </l-map>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Icon, LatLng, LeafletMouseEvent } from 'leaflet'; import { Icon, LatLng, LeafletMouseEvent, LeafletEvent } from "leaflet";
import 'leaflet/dist/leaflet.css'; import "leaflet/dist/leaflet.css";
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from 'vue2-leaflet'; import { LMap, LTileLayer, LMarker, LPopup, LIcon } from "vue2-leaflet";
import Vue2LeafletLocateControl from '@/components/Map/Vue2LeafletLocateControl.vue'; import Vue2LeafletLocateControl from "@/components/Map/Vue2LeafletLocateControl.vue";
import { CONFIG } from '@/graphql/config'; import { CONFIG } from "../graphql/config";
import { IConfig } from '@/types/config.model'; import { IConfig } from "../types/config.model";
@Component({ @Component({
components: { LTileLayer, LMap, LMarker, LPopup, LIcon, 'v-locatecontrol': Vue2LeafletLocateControl }, components: {
LTileLayer,
LMap,
LMarker,
LPopup,
LIcon,
"v-locatecontrol": Vue2LeafletLocateControl,
},
apollo: { apollo: {
config: CONFIG, config: CONFIG,
}, },
}) })
export default class Map extends Vue { export default class Map extends Vue {
@Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean; @Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean;
@Prop({ type: String, required: true }) coords!: string; @Prop({ type: String, required: true }) coords!: string;
@Prop({ type: Object, required: false }) marker!: { text: String|String[], icon: String };
@Prop({ type: Object, required: false }) marker!: { text: string | string[]; icon: string };
@Prop({ type: Object, required: false }) options!: object; @Prop({ type: Object, required: false }) options!: object;
@Prop({ type: Function, required: false, default: () => {} }) updateDraggableMarkerCallback!: Function;
@Prop({ type: Function, required: false })
updateDraggableMarkerCallback!: Function;
defaultOptions: { defaultOptions: {
zoom: Number; zoom: number;
height: String; height: string;
width: String; width: string;
} = { } = {
zoom: 15, zoom: 15,
height: '100%', height: "100%",
width: '100%', width: "100%",
}; };
zoom = this.defaultOptions.zoom; zoom = this.defaultOptions.zoom;
config!: IConfig; config!: IConfig;
/* eslint-disable */
mounted() { mounted() {
// this part resolve an issue where the markers would not appear // this part resolve an issue where the markers would not appear
// @ts-ignore // @ts-ignore
delete Icon.Default.prototype._getIconUrl; delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({ Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
iconUrl: require('leaflet/dist/images/marker-icon.png'), iconUrl: require("leaflet/dist/images/marker-icon.png"),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'), shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
}); });
} }
/* eslint-enable */
openPopup(event) { openPopup(event: LeafletEvent) {
this.$nextTick(() => { this.$nextTick(() => {
event.target.openPopup(); event.target.openPopup();
}); });
@ -81,8 +96,13 @@ export default class Map extends Vue {
return { ...this.defaultOptions, ...this.options }; return { ...this.defaultOptions, ...this.options };
} }
get lat() { return this.$props.coords.split(';')[1]; } get lat() {
get lon() { return this.$props.coords.split(';')[0]; } return this.$props.coords.split(";")[1];
}
get lon() {
return this.$props.coords.split(";")[0];
}
get popupMultiLine() { get popupMultiLine() {
if (Array.isArray(this.marker.text)) { if (Array.isArray(this.marker.text)) {
@ -99,22 +119,22 @@ export default class Map extends Vue {
this.updateDraggableMarkerCallback(e, this.zoom); this.updateDraggableMarkerCallback(e, this.zoom);
} }
updateZoom(zoom: Number) { updateZoom(zoom: number) {
this.zoom = zoom; this.zoom = zoom;
} }
get attribution() { get attribution() {
return this.config.maps.tiles.attribution || this.$t('© The OpenStreetMap Contributors'); return this.config.maps.tiles.attribution || this.$t("© The OpenStreetMap Contributors");
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
div.map-container { div.map-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
.leaflet-map { .leaflet-map {
z-index: 20; z-index: 20;
} }
} }
</style> </style>

View File

@ -1,30 +1,36 @@
<template> <template>
<div style="display: none;"> <div style="display: none;">
<slot v-if="ready"></slot> <slot v-if="ready"></slot>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
/** /**
* Fork of https://github.com/domoritz/leaflet-locatecontrol to try to trigger location manually (not done ATM) * Fork of https://github.com/domoritz/leaflet-locatecontrol
* to try to trigger location manually (not done ATM)
*/ */
import L, { DomEvent } from 'leaflet'; import L, { DomEvent } from "leaflet";
import { findRealParent, propsBinder } from 'vue2-leaflet'; import { findRealParent, propsBinder } from "vue2-leaflet";
import 'leaflet.locatecontrol'; import "leaflet.locatecontrol";
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component({ @Component({
beforeDestroy() { beforeDestroy() {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore // @ts-ignore
this.parentContainer.removeLayer(this); this.parentContainer.removeLayer(this);
}, },
}) })
export default class Vue2LeafletLocateControl extends Vue { export default class Vue2LeafletLocateControl extends Vue {
@Prop({ type: Object, default: () => { return {}; } }) options; @Prop({ type: Object, default: () => ({}) }) options!: object;
@Prop({ type: Boolean, default: true }) visible = true; @Prop({ type: Boolean, default: true }) visible = true;
ready: boolean = false;
ready = false;
mapObject!: any; mapObject!: any;
parentContainer: any; parentContainer: any;
mounted() { mounted() {
@ -43,5 +49,5 @@ export default class Vue2LeafletLocateControl extends Vue {
</script> </script>
<style> <style>
@import "~leaflet.locatecontrol/dist/L.Control.Locate.css"; @import "~leaflet.locatecontrol/dist/L.Control.Locate.css";
</style> </style>

View File

@ -1,13 +1,24 @@
<template> <template>
<b-navbar type="is-secondary" wrapper-class="container"> <b-navbar type="is-secondary" wrapper-class="container">
<template slot="brand"> <template slot="brand">
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
<logo />
</b-navbar-item>
</template> </template>
<template slot="start"> <template slot="start">
<b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{ $t('My events') }}</b-navbar-item> $t("Explore")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
$t("My events")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_GROUPS }">{{
$t("My groups")
}}</b-navbar-item>
<b-navbar-item tag="span"> <b-navbar-item tag="span">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ $t('Create') }}</b-button> <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{
$t("Create")
}}</b-button>
</b-navbar-item> </b-navbar-item>
</template> </template>
<template slot="end"> <template slot="end">
@ -18,56 +29,72 @@
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right> <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile"> <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url"> <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
</figure> </figure>
<b-icon v-else icon="account-circle" /> <b-icon v-else icon="account-circle" />
</template> </template>
<b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id"> <!-- No identities dropdown if no identities -->
<span v-if="identities.length <= 1" />
<b-navbar-item
tag="span"
v-for="identity in identities"
v-else
:active="identity.id === currentActor.id"
:key="identity.id"
>
<span @click="setIdentity(identity)"> <span @click="setIdentity(identity)">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url" alt="" /> <img class="is-rounded" :src="identity.avatar.url" alt />
</figure> </figure>
<b-icon v-else size="is-medium" icon="account-circle" /> <b-icon v-else size="is-medium" icon="account-circle" />
</div> </div>
<div class="media-content"> <div class="media-content">
<span>{{ identity.displayName() }}</span> <span>{{ identity.displayName() }}</span>
<span class="has-text-grey" v-if="identity.name"> <span class="has-text-grey" v-if="identity.name"
@{{ identity.preferredUsername }} >@{{ identity.preferredUsername }}</span
</span> >
</div> </div>
</span> </span>
<hr class="navbar-divider"> <hr class="navbar-divider" />
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
$t("My account")
}}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }"> <!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
{{ $t('My account') }} <!-- {{ $t('Create group') }}-->
</b-navbar-item> <!-- </b-navbar-item>-->
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">--> <b-navbar-item
<!-- {{ $t('Create group') }}--> v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
<!-- </b-navbar-item>--> tag="router-link"
:to="{ name: RouteName.ADMIN_DASHBOARD }"
>{{ $t("Administration") }}</b-navbar-item
>
<b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.ADMIN_DASHBOARD }"> <b-navbar-item tag="span">
{{ $t('Administration') }} <span @click="logout">{{ $t("Log out") }}</span>
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="span">
<span @click="logout">{{ $t('Log out') }}</span>
</b-navbar-item>
</b-navbar-dropdown> </b-navbar-dropdown>
<b-navbar-item v-else tag="div"> <b-navbar-item v-else tag="div">
<div class="buttons"> <div class="buttons">
<router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: RouteName.REGISTER }"> <router-link
<strong>{{ $t('Sign up') }}</strong> class="button is-primary"
v-if="config && config.registrationsOpen"
:to="{ name: RouteName.REGISTER }"
>
<strong>{{ $t("Sign up") }}</strong>
</router-link> </router-link>
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ $t('Log in') }}</router-link> <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
$t("Log in")
}}</router-link>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -75,18 +102,18 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'; import { Component, Vue, Watch } from "vue-property-decorator";
import { CURRENT_USER_CLIENT } from '@/graphql/user'; import Logo from "@/components/Logo.vue";
import { changeIdentity, logout } from '@/utils/auth'; import { GraphQLError } from "graphql";
import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor'; import { CURRENT_USER_CLIENT } from "../graphql/user";
import { IPerson, Person } from '@/types/actor'; import { changeIdentity, logout } from "../utils/auth";
import { CONFIG } from '@/graphql/config'; import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
import { IConfig } from '@/types/config.model'; import { IPerson, Person } from "../types/actor";
import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model'; import { CONFIG } from "../graphql/config";
import Logo from '@/components/Logo.vue'; import { IConfig } from "../types/config.model";
import SearchField from '@/components/SearchField.vue'; import { ICurrentUser, ICurrentUserRole } from "../types/current-user.model";
import { RouteName } from '@/router'; import SearchField from "./SearchField.vue";
import { GraphQLError } from 'graphql'; import RouteName from "../router/name";
@Component({ @Component({
apollo: { apollo: {
@ -98,11 +125,14 @@ import { GraphQLError } from 'graphql';
}, },
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [], update: ({ identities }) =>
identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
skip() { skip() {
return this.currentUser.isLoggedIn === false; return this.currentUser.isLoggedIn === false;
}, },
error({ graphQLErrors }) { this.handleErrors(graphQLErrors); }, error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
}, },
config: { config: {
query: CONFIG, query: CONFIG,
@ -115,34 +145,45 @@ import { GraphQLError } from 'graphql';
}) })
export default class NavBar extends Vue { export default class NavBar extends Vue {
currentActor!: IPerson; currentActor!: IPerson;
config!: IConfig; config!: IConfig;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
ICurrentUserRole = ICurrentUserRole; ICurrentUserRole = ICurrentUserRole;
identities: IPerson[] = []; identities: IPerson[] = [];
RouteName = RouteName; RouteName = RouteName;
@Watch('currentActor') @Watch("currentActor")
async initializeListOfIdentities() { async initializeListOfIdentities() {
if (!this.currentUser.isLoggedIn) return; if (!this.currentUser.isLoggedIn) return;
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({ const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
query: IDENTITIES, query: IDENTITIES,
}); });
if (data) { if (data) {
this.identities = data.identities.map(identity => new Person(identity)); this.identities = data.identities.map((identity) => new Person(identity));
// If we don't have any identities, the user has validated their account, // If we don't have any identities, the user has validated their account,
// is logging for the first time but didn't create an identity somehow // is logging for the first time but didn't create an identity somehow
if (this.identities.length === 0) { if (this.identities.length === 0) {
await this.$router.push({ await this.$router.push({
name: RouteName.REGISTER_PROFILE, name: RouteName.REGISTER_PROFILE,
params: { email: this.currentUser.email, userAlreadyActivated: 'true' }, params: {
email: this.currentUser.email,
userAlreadyActivated: "true",
},
}); });
} }
} }
} }
async handleErrors(errors: GraphQLError[]) { async handleErrors(errors: GraphQLError[]) {
if (errors.length > 0 && errors[0].message === 'You need to be logged-in to view your list of identities') { if (
errors.length > 0 &&
errors[0].message === "You need to be logged-in to view your list of identities"
) {
await this.logout(); await this.logout();
} }
} }
@ -150,9 +191,9 @@ export default class NavBar extends Vue {
async logout() { async logout() {
await logout(this.$apollo.provider.defaultClient); await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t('You have been disconnected') as string, message: this.$t("You have been disconnected") as string,
type: 'is-success', type: "is-success",
position: 'is-bottom-right', position: "is-bottom-right",
duration: 5000, duration: 5000,
}); });
@ -161,7 +202,13 @@ export default class NavBar extends Vue {
} }
async setIdentity(identity: IPerson) { async setIdentity(identity: IPerson) {
return await changeIdentity(this.$apollo.provider.defaultClient, identity); await this.$apollo.mutate({
mutation: UPDATE_DEFAULT_ACTOR,
variables: {
preferredUsername: identity.preferredUsername,
},
});
return changeIdentity(this.$apollo.provider.defaultClient, identity);
} }
} }
</script> </script>
@ -169,6 +216,10 @@ export default class NavBar extends Vue {
@import "../variables.scss"; @import "../variables.scss";
nav { nav {
.navbar-item svg {
height: 1.75rem;
}
.navbar-dropdown .navbar-item { .navbar-dropdown .navbar-item {
cursor: pointer; cursor: pointer;

View File

@ -1,33 +1,34 @@
<template> <template>
<section class="container"> <section class="container">
<h1 class="title" v-if="loading"> <h1 class="title" v-if="loading">{{ $t("Your participation is being validated") }}</h1>
{{ $t('Your participation is being validated') }} <div v-else>
</h1> <div v-if="failed">
<div v-else> <b-message :title="$t('Error while validating participation')" type="is-danger">
<div v-if="failed"> {{
<b-message :title="$t('Error while validating participation')" type="is-danger"> $t(
{{ $t('Either the participation has already been validated, either the validation token is incorrect.') }} "Either the participation has already been validated, either the validation token is incorrect."
</b-message> )
</div> }}
<h1 class="title" v-else> </b-message>
{{ $t('Your participation has been validated') }} </div>
</h1> <h1 class="title" v-else>{{ $t("Your participation has been validated") }}</h1>
</div> </div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { RouteName } from '@/router'; import RouteName from "../../router/name";
import { IParticipant } from '@/types/event.model'; import { IParticipant } from "../../types/event.model";
import { CONFIRM_PARTICIPATION } from '@/graphql/event'; import { CONFIRM_PARTICIPATION } from "../../graphql/event";
import { confirmLocalAnonymousParticipation } from '@/services/AnonymousParticipationStorage'; import { confirmLocalAnonymousParticipation } from "../../services/AnonymousParticipationStorage";
@Component @Component
export default class ConfirmParticipation extends Vue { export default class ConfirmParticipation extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;
loading = true; loading = true;
failed = false; failed = false;
async created() { async created() {
@ -36,7 +37,9 @@ export default class ConfirmParticipation extends Vue {
async validateAction() { async validateAction() {
try { try {
const { data } = await this.$apollo.mutate<{ confirmParticipation: IParticipant }>({ const { data } = await this.$apollo.mutate<{
confirmParticipation: IParticipant;
}>({
mutation: CONFIRM_PARTICIPATION, mutation: CONFIRM_PARTICIPATION,
variables: { variables: {
token: this.token, token: this.token,
@ -46,7 +49,10 @@ export default class ConfirmParticipation extends Vue {
if (data) { if (data) {
const { confirmParticipation: participation } = data; const { confirmParticipation: participation } = data;
await confirmLocalAnonymousParticipation(participation.event.uuid); await confirmLocalAnonymousParticipation(participation.event.uuid);
await this.$router.replace({ name: RouteName.EVENT, params: { uuid: data.confirmParticipation.event.uuid } } ); await this.$router.replace({
name: RouteName.EVENT,
params: { uuid: data.confirmParticipation.event.uuid },
});
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);

View File

@ -1,54 +1,65 @@
<template> <template>
<section class="section container hero is-fullheight"> <section class="section container hero is-fullheight">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<b-button type="is-primary" size="is-medium" tag="router-link" :to="{ name: RouteName.LOGIN }">{{ $t('Login on {instance}', { instance: host }) }}</b-button> <b-button
</div> type="is-primary"
<vertical-divider :content="$t('Or')" /> size="is-medium"
<div class="column"> tag="router-link"
<subtitle>{{ $t('I have an account on another Mobilizon instance.')}}</subtitle> :to="{ name: RouteName.LOGIN }"
<p>{{ $t('Other software may also support this.') }}</p> >{{ $t("Login on {instance}", { instance: host }) }}</b-button
<p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p> >
<form @submit.prevent="redirectToInstance"> </div>
<b-field :label="$t('Your federated identity')"> <vertical-divider :content="$t('Or')" />
<b-field> <div class="column">
<b-input <subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
expanded <p>{{ $t("Other software may also support this.") }}</p>
autocapitalize="none" autocorrect="off" <p>
v-model="remoteActorAddress" {{ $t("We will redirect you to your instance in order to interact with this event") }}
:placeholder="$t('profile@instance')"> </p>
</b-input> <form @submit.prevent="redirectToInstance">
<p class="control"> <b-field :label="$t('Your federated identity')">
<button class="button is-primary" type="submit">{{ $t('Go') }}</button> <b-field>
</p> <b-input
</b-field> expanded
</b-field> autocapitalize="none"
</form> autocorrect="off"
</div> v-model="remoteActorAddress"
</div> :placeholder="$t('profile@instance')"
<div class="has-text-centered"> ></b-input>
<b-button tag="a" type="is-text" @click="$router.go(-1)"> <p class="control">
{{ $t('Back to previous page') }} <button class="button is-primary" type="submit">{{ $t("Go") }}</button>
</b-button> </p>
</div> </b-field>
</div> </b-field>
</form>
</div>
</div> </div>
</section> <div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</div>
</div>
</section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { RouteName } from '@/router'; import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import VerticalDivider from '@/components/Utils/VerticalDivider.vue'; import Subtitle from "@/components/Utils/Subtitle.vue";
import Subtitle from '@/components/Utils/Subtitle.vue'; import RouteName from "../../router/name";
@Component({ @Component({
components: { Subtitle, VerticalDivider }, components: { Subtitle, VerticalDivider },
}) })
export default class ParticipationWithAccount extends Vue { export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
remoteActorAddress: string = '';
remoteActorAddress = "";
RouteName = RouteName; RouteName = RouteName;
get host() { get host() {
@ -56,29 +67,39 @@ export default class ParticipationWithAccount extends Vue {
} }
get uri(): string { get uri(): string {
return `${window.location.origin}${this.$router.resolve({ name: RouteName.EVENT, params: { uuid: this.uuid } }).href}`; return `${window.location.origin}${
this.$router.resolve({
name: RouteName.EVENT,
params: { uuid: this.uuid },
}).href
}`;
} }
async redirectToInstance() { async redirectToInstance() {
let res; let res;
const [_, host] = res = this.remoteActorAddress.split('@', 2); const [_, host] = (res = this.remoteActorAddress.split("@", 2));
const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress); const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
window.open(remoteInteractionURI); window.open(remoteInteractionURI);
} }
private async webFingerFetch(hostname: string, identity: string): Promise<string> { private async webFingerFetch(hostname: string, identity: string): Promise<string> {
const scheme = process.env.NODE_ENV === 'production' ? 'https' : 'http'; const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
const data = await ((await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)).json()); const data = await (
await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)
).json();
if (data && Array.isArray(data.links)) { if (data && Array.isArray(data.links)) {
const link: { template: string } = data.links.find((link: any) => { const link: { template: string } = data.links.find(
return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe'; (link: any) =>
}); link &&
typeof link.template === "string" &&
link.rel === "http://ostatus.org/schema/1.0/subscribe"
);
if (link && link.template.includes('{uri}')) { if (link && link.template.includes("{uri}")) {
return link.template.replace('{uri}', encodeURIComponent(this.uri)); return link.template.replace("{uri}", encodeURIComponent(this.uri));
} }
} }
throw new Error('No interaction path found in webfinger data'); throw new Error("No interaction path found in webfinger data");
} }
} }
</script> </script>

View File

@ -1,48 +1,72 @@
<template> <template>
<section class="container section hero is-fullheight"> <section class="container section hero is-fullheight">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<form @submit.prevent="joinEvent"> <form @submit.prevent="joinEvent">
<p>{{ $t('This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.') }}</p> <p>
<b-message type="is-info">{{ $t("Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.") }}</b-message> {{
<b-message type="is-danger" v-if="error">{{ error }}</b-message> $t(
<b-field :label="$t('Email')"> "This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation."
<b-input )
type="email" }}
v-model="anonymousParticipation.email" </p>
placeholder="Your email" <b-message type="is-info">
required> {{
</b-input> $t(
</b-field> "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
<p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">{{ $t("The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event.") }}</p> )
<p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p> }}
<b-field :label="$t('Message')"> </b-message>
<b-input <b-message type="is-danger" v-if="error">{{ error }}</b-message>
type="textarea" <b-field :label="$t('Email')">
v-model="anonymousParticipation.message" <b-input
minlength="10" type="email"
:required="event.joinOptions === EventJoinOptions.RESTRICTED"> v-model="anonymousParticipation.email"
</b-input> placeholder="Your email"
</b-field> required
<b-button type="is-primary" native-type="submit">{{ $t('Send email') }}</b-button> ></b-input>
<div class="has-text-centered"> </b-field>
<b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)"> <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
{{ $t('Back to previous page') }} {{
</b-button> $t(
</div> "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
</form> )
</div> }}
</div> </p>
</section> <p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
<b-field :label="$t('Message')">
<b-input
type="textarea"
v-model="anonymousParticipation.message"
minlength="10"
:required="event.joinOptions === EventJoinOptions.RESTRICTED"
></b-input>
</b-field>
<b-button type="is-primary" native-type="submit">{{ $t("Send email") }}</b-button>
<div class="has-text-centered">
<b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</form>
</div>
</div>
</section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { EventModel, IEvent, IParticipant, ParticipantRole, EventJoinOptions } from '@/types/event.model'; import {
import { FETCH_EVENT, JOIN_EVENT } from '@/graphql/event'; EventModel,
import { IConfig } from '@/types/config.model'; IEvent,
import { CONFIG } from '@/graphql/config'; IParticipant,
import { addLocalUnconfirmedAnonymousParticipation } from '@/services/AnonymousParticipationStorage'; ParticipantRole,
import { RouteName } from '@/router'; EventJoinOptions,
} from "@/types/event.model";
import { FETCH_EVENT, JOIN_EVENT } from "@/graphql/event";
import { IConfig } from "@/types/config.model";
import { CONFIG } from "@/graphql/config";
import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
import RouteName from "../../router/name";
@Component({ @Component({
apollo: { apollo: {
@ -53,7 +77,9 @@ import { RouteName } from '@/router';
uuid: this.uuid, uuid: this.uuid,
}; };
}, },
skip() { return !this.uuid; }, skip() {
return !this.uuid;
},
update: (data) => new EventModel(data.event), update: (data) => new EventModel(data.event),
}, },
config: CONFIG, config: CONFIG,
@ -61,10 +87,18 @@ import { RouteName } from '@/router';
}) })
export default class ParticipationWithoutAccount extends Vue { export default class ParticipationWithoutAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
anonymousParticipation: { email: String, message: String } = { email: '', message: '' };
anonymousParticipation: { email: string; message: string } = {
email: "",
message: "",
};
event!: IEvent; event!: IEvent;
config!: IConfig; config!: IConfig;
error: String|boolean = false;
error: string | boolean = false;
EventJoinOptions = EventJoinOptions; EventJoinOptions = EventJoinOptions;
async joinEvent() { async joinEvent() {
@ -88,7 +122,7 @@ export default class ParticipationWithoutAccount extends Vue {
if (cachedData == null) return; if (cachedData == null) return;
const { event } = cachedData; const { event } = cachedData;
if (event === null) { if (event === null) {
console.error('Cannot update event participant cache, because of null value.'); console.error("Cannot update event participant cache, because of null value.");
return; return;
} }
@ -99,19 +133,31 @@ export default class ParticipationWithoutAccount extends Vue {
event.participantStats.participant = event.participantStats.participant + 1; event.participantStats.participant = event.participantStats.participant + 1;
} }
store.writeQuery({ query: FETCH_EVENT, variables: { uuid: this.event.uuid }, data: { event } }); store.writeQuery({
query: FETCH_EVENT,
variables: { uuid: this.event.uuid },
data: { event },
});
}, },
}); });
if (data && data.joinEvent.metadata.cancellationToken) { if (data && data.joinEvent.metadata.cancellationToken) {
await addLocalUnconfirmedAnonymousParticipation(this.event, data.joinEvent.metadata.cancellationToken); await addLocalUnconfirmedAnonymousParticipation(
return this.$router.push({ name: RouteName.EVENT, params: { uuid: this.event.uuid } }); this.event,
data.joinEvent.metadata.cancellationToken
);
return this.$router.push({
name: RouteName.EVENT,
params: { uuid: this.event.uuid },
});
} }
} catch (e) { } catch (e) {
console.log(JSON.stringify(e)); console.log(JSON.stringify(e));
if (e.message === 'GraphQL error: You are already a participant of this event') { if (e.message === "GraphQL error: You are already a participant of this event") {
this.error = this.$t('This email is already registered as participant for this event') as string; this.error = this.$t(
"This email is already registered as participant for this event"
) as string;
} }
} }
} }
} }
</script> </script>

View File

@ -1,67 +1,94 @@
<template> <template>
<section class="section container hero"> <section class="section container hero">
<div class="hero-body" v-if="event"> <div class="hero-body" v-if="event">
<div class="container"> <div class="container">
<subtitle>{{ $t('You wish to participate to the following event')}}</subtitle> <subtitle>{{ $t("You wish to participate to the following event") }}</subtitle>
<EventListViewCard v-if="event" :event="event" /> <EventListViewCard v-if="event" :event="event" />
<div class="columns has-text-centered"> <div class="columns has-text-centered">
<div class="column"> <div class="column">
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"> <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="../../assets/undraw_profile.svg" alt="Profile illustration" /> <img src="../../assets/undraw_profile.svg" alt="Profile illustration" />
</figure> </figure>
<b-button type="is-primary">{{ $t('I have a Mobilizon account') }}</b-button> <b-button type="is-primary">{{ $t("I have a Mobilizon account") }}</b-button>
</router-link> </router-link>
<p> <p>
<small>{{ $t('Either on the {instance} instance or on another instance.', {instance: host })}}</small> <small>
<b-tooltip type="is-dark" :label="$t('Mobilizon is a federated network. You can interact with this event from a different server.')"> {{
<b-icon size="is-small" icon="help-circle-outline" /> $t("Either on the {instance} instance or on another instance.", {
</b-tooltip> instance: host,
</p> })
</div> }}
<vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" /> </small>
<div class="column" v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod"> <b-tooltip
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }" v-if="event.local"> type="is-dark"
<figure class="image is-128x128"> :label="
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" /> $t(
</figure> 'Mobilizon is a federated network. You can interact with this event from a different server.'
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button> )
</router-link> "
<a :href="`${event.url}/participate/without-account`" v-else> >
<figure class="image is-128x128"> <b-icon size="is-small" icon="help-circle-outline" />
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" /> </b-tooltip>
</figure> </p>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button> </div>
</a> <vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" />
<p> <div
<small>{{ $t('Participate using your email address')}}</small><br /> class="column"
<small v-if="!event.local">{{ $t('You will be redirected to the original instance')}}</small> v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod"
</p> >
</div> <router-link
</div> :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
<div class="has-text-centered"> v-if="event.local"
<b-button tag="a" type="is-text" @click="$router.go(-1)"> >
{{ $t('Back to previous page') }} <figure class="image is-128x128">
</b-button> <img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</div> </figure>
</div> <b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</router-link>
<a :href="`${event.url}/participate/without-account`" v-else>
<figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</a>
<p>
<small>{{ $t("Participate using your email address") }}</small>
<br />
<small v-if="!event.local">
{{ $t("You will be redirected to the original instance") }}
</small>
</p>
</div>
</div> </div>
</section> <div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</div>
</div>
</section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { RouteName } from '@/router'; import { FETCH_EVENT } from "@/graphql/event";
import { FETCH_EVENT } from '@/graphql/event'; import EventListCard from "@/components/Event/EventListCard.vue";
import EventListCard from '@/components/Event/EventListCard.vue'; import EventListViewCard from "@/components/Event/EventListViewCard.vue";
import EventListViewCard from '@/components/Event/EventListViewCard.vue'; import { EventModel, IEvent } from "@/types/event.model";
import { EventModel, IEvent } from '@/types/event.model'; import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import VerticalDivider from '@/components/Utils/VerticalDivider.vue'; import { CONFIG } from "@/graphql/config";
import { CONFIG } from '@/graphql/config'; import { IConfig } from "@/types/config.model";
import { IConfig } from '@/types/config.model'; import Subtitle from "@/components/Utils/Subtitle.vue";
import Subtitle from '@/components/Utils/Subtitle.vue'; import RouteName from "../../router/name";
@Component({ @Component({
components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle }, components: {
VerticalDivider,
EventListViewCard,
EventListCard,
Subtitle,
},
apollo: { apollo: {
event: { event: {
query: FETCH_EVENT, query: FETCH_EVENT,
@ -70,7 +97,9 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
uuid: this.uuid, uuid: this.uuid,
}; };
}, },
skip() { return !this.uuid; }, skip() {
return !this.uuid;
},
update: (data) => new EventModel(data.event), update: (data) => new EventModel(data.event),
}, },
config: CONFIG, config: CONFIG,
@ -78,8 +107,11 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
}) })
export default class UnloggedParticipation extends Vue { export default class UnloggedParticipation extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
RouteName = RouteName; RouteName = RouteName;
event!: IEvent; event!: IEvent;
config!: IConfig; config!: IConfig;
get host() { get host() {
@ -91,15 +123,17 @@ export default class UnloggedParticipation extends Vue {
} }
get hasAnonymousEmailParticipationMethod(): boolean { get hasAnonymousEmailParticipationMethod(): boolean {
return this.config.anonymous.participation.allowed && this.config.anonymous.participation.validation.email.enabled; return (
this.config.anonymous.participation.allowed &&
this.config.anonymous.participation.validation.email.enabled
);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.column > a {
.column > a { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; }
} </style>
</style>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="root"> <div class="root">
<figure class="image" v-if="imageSrc"> <figure class="image" v-if="imageSrc">
<img :src="imageSrc" /> <img :src="imageSrc" />
</figure> </figure>
<figure class="image is-128x128" v-else> <figure class="image is-128x128" v-else>
<div class="image-placeholder"> <div class="image-placeholder">
@ -12,50 +12,61 @@
<b-upload @input="onFileChanged" :accept="accept"> <b-upload @input="onFileChanged" :accept="accept">
<a class="button is-primary"> <a class="button is-primary">
<b-icon icon="upload"></b-icon> <b-icon icon="upload"></b-icon>
<span>{{ $t('Click to upload') }}</span> <span>{{ $t("Click to upload") }}</span>
</a> </a>
</b-upload> </b-upload>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.root { .root {
display: flex; display: flex;
align-items: center; align-items: center;
} }
figure.image { figure.image {
margin-right: 30px; margin-right: 30px;
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
} }
.image-placeholder { .image-placeholder {
background-color: grey; background-color: grey;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
span { span {
flex: 1; flex: 1;
color: #eee; color: #eee;
}
} }
}
</style> </style>
<script lang="ts"> <script lang="ts">
import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
@Component @Component
export default class PictureUpload extends Vue { export default class PictureUpload extends Vue {
@Model('change', { type: File }) readonly pictureFile!: File; @Model("change", { type: File }) readonly pictureFile!: File;
@Prop({ type: String, required: false, default: 'image/gif,image/png,image/jpeg,image/webp' }) accept;
// @ts-ignore @Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
@Prop({ type: String, required: false, default() { return this.$t('Avatar'); } }) textFallback!: string; accept!: string;
@Prop({
type: String,
required: false,
default() {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return this.$t("Avatar");
},
})
textFallback!: string;
imageSrc: string | null = null; imageSrc: string | null = null;
@ -63,13 +74,13 @@ export default class PictureUpload extends Vue {
this.updatePreview(this.pictureFile); this.updatePreview(this.pictureFile);
} }
@Watch('pictureFile') @Watch("pictureFile")
onPictureFileChanged(val: File) { onPictureFileChanged(val: File) {
this.updatePreview(val); this.updatePreview(val);
} }
onFileChanged(file: File) { onFileChanged(file: File) {
this.$emit('change', file); this.$emit("change", file);
this.updatePreview(file); this.updatePreview(file);
} }

View File

@ -4,39 +4,39 @@
``` ```
</docs> </docs>
<template> <template>
<div class="card" v-if="report"> <div class="card" v-if="report">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="report.reported.avatar"> <figure class="image is-48x48" v-if="report.reported.avatar">
<img alt="" :src="report.reported.avatar.url" /> <img alt="" :src="report.reported.avatar.url" />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<p class="title is-4">{{ report.reported.name }}</p>
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
</div>
</div>
<div class="content columns">
<div class="column is-one-quarter-desktop">
<span v-if="report.reporter.type === ActorType.APPLICATION">
{{ $t('Reported by someone on {domain}', { domain: report.reporter.domain}) }}
</span>
<span v-else>
{{ $t('Reported by {reporter}', { reporter: report.reporter.preferredUsername}) }}
</span>
</div>
<div class="column" v-if="report.content">{{ report.content }}</div>
</div>
</div> </div>
<div class="media-content">
<p class="title is-4">{{ report.reported.name }}</p>
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
</div>
</div>
<div class="content columns">
<div class="column is-one-quarter-desktop">
<span v-if="report.reporter.type === ActorType.APPLICATION">
{{ $t("Reported by someone on {domain}", { domain: report.reporter.domain }) }}
</span>
<span v-else>
{{ $t("Reported by {reporter}", { reporter: report.reporter.preferredUsername }) }}
</span>
</div>
<div class="column" v-if="report.content">{{ report.content }}</div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { IReport } from '@/types/report.model'; import { IReport } from "@/types/report.model";
import { ActorType } from '@/types/actor'; import { ActorType } from "@/types/actor";
@Component @Component
export default class ReportCard extends Vue { export default class ReportCard extends Vue {
@ -46,9 +46,9 @@ export default class ReportCard extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.content img.image { .content img.image {
display: inline; display: inline;
height: 1.5em; height: 1.5em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
</style> </style>

View File

@ -1,77 +1,80 @@
<template> <template>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head" v-if="title"> <header class="modal-card-head" v-if="title">
<p class="modal-card-title">{{ title }}</p> <p class="modal-card-title">{{ title }}</p>
</header> </header>
<section <section class="modal-card-body is-flex" :class="{ 'is-titleless': !title }">
class="modal-card-body is-flex" <div class="media">
:class="{ 'is-titleless': !title }"> <div class="media-left">
<div class="media"> <b-icon icon="alert" type="is-warning" size="is-large" />
<div
class="media-left">
<b-icon
icon="alert"
type="is-warning"
size="is-large"/>
</div>
<div class="media-content">
<div class="box" v-if="comment">
<article class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="Image">
</figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<div class="content">
<strong>{{ comment.actor.name }}</strong> <small>@{{ comment.actor.preferredUsername }}</small>
<br>
<p v-html="comment.text"></p>
</div>
</div>
</article>
</div>
<p>{{ $t('The report will be sent to the moderators of your instance. You can explain why you report this content below.') }}</p>
<div class="control">
<b-input
v-model="content"
type="textarea"
@keyup.enter="confirm"
:placeholder="$t('Additional comments')"
/>
</div>
<div class="control" v-if="outsideDomain">
<p>{{ $t('The content came from another server. Transfer an anonymous copy of the report?') }}</p>
<b-switch v-model="forward">{{ $t('Transfer to {outsideDomain}', { outsideDomain }) }}</b-switch>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button
class="button"
ref="cancelButton"
@click="close">
{{ translatedCancelText }}
</button>
<button
class="button is-primary"
ref="confirmButton"
@click="confirm">
{{ translatedConfirmText }}
</button>
</footer>
</div> </div>
<div class="media-content">
<div class="box" v-if="comment">
<article class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="Image" />
</figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<div class="content">
<strong>{{ comment.actor.name }}</strong>
<small>@{{ comment.actor.preferredUsername }}</small>
<br />
<p v-html="comment.text"></p>
</div>
</div>
</article>
</div>
<p>
{{
$t(
"The report will be sent to the moderators of your instance. You can explain why you report this content below."
)
}}
</p>
<div class="control">
<b-input
v-model="content"
type="textarea"
@keyup.enter="confirm"
:placeholder="$t('Additional comments')"
/>
</div>
<div class="control" v-if="outsideDomain">
<p>
{{
$t(
"The content came from another server. Transfer an anonymous copy of the report?"
)
}}
</p>
<b-switch v-model="forward">{{
$t("Transfer to {outsideDomain}", { outsideDomain })
}}</b-switch>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button" ref="cancelButton" @click="close">
{{ translatedCancelText }}
</button>
<button class="button is-primary" ref="confirmButton" @click="confirm">
{{ translatedConfirmText }}
</button>
</footer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { IComment } from '@/types/comment.model'; import { IComment } from "../../types/comment.model";
@Component({ @Component({
mounted() { mounted() {
@ -79,23 +82,30 @@ import { IComment } from '@/types/comment.model';
}, },
}) })
export default class ReportModal extends Vue { export default class ReportModal extends Vue {
@Prop({ type: Function, default: () => {} }) onConfirm; @Prop({ type: Function }) onConfirm!: Function;
@Prop({ type: String }) title;
@Prop({ type: Object }) comment!: IComment;
@Prop({ type: String, default: '' }) outsideDomain;
@Prop({ type: String }) cancelText;
@Prop({ type: String }) confirmText;
isActive: boolean = false; @Prop({ type: String }) title!: string;
content: string = '';
forward: boolean = false; @Prop({ type: Object }) comment!: IComment;
@Prop({ type: String, default: "" }) outsideDomain!: string;
@Prop({ type: String }) cancelText!: string;
@Prop({ type: String }) confirmText!: string;
isActive = false;
content = "";
forward = false;
get translatedCancelText() { get translatedCancelText() {
return this.cancelText || this.$t('Cancel'); return this.cancelText || this.$t("Cancel");
} }
get translatedConfirmText() { get translatedConfirmText() {
return this.confirmText || this.$t('Send the report'); return this.confirmText || this.$t("Send the report");
} }
confirm() { confirm() {
@ -103,32 +113,32 @@ export default class ReportModal extends Vue {
this.close(); this.close();
} }
/** /**
* Close the Dialog. * Close the Dialog.
*/ */
close() { close() {
this.isActive = false; this.isActive = false;
this.$emit('close'); this.$emit("close");
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal-card .modal-card-foot { .modal-card .modal-card-foot {
justify-content: flex-end; justify-content: flex-end;
}
.modal-card-body {
.media-content {
.box {
.media {
padding-top: 0;
border-top: none;
}
} }
.modal-card-body { & > p {
.media-content { margin-bottom: 2rem;
.box {
.media {
padding-top: 0;
border-top: none;
}
}
& > p {
margin-bottom: 2rem;
}
}
} }
}
}
</style> </style>

View File

@ -0,0 +1,171 @@
<template>
<div class="resource-wrapper">
<router-link
:to="{
name: RouteName.RESOURCE_FOLDER,
params: {
path: ResourceMixin.resourcePathArray(resource),
preferredUsername: usernameWithDomain(group),
},
}"
>
<div class="preview">
<b-icon icon="folder" size="is-large" />
</div>
<div class="body">
<h3>{{ resource.title }}</h3>
<span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
</div>
<draggable
v-if="!inline"
class="dropzone"
v-model="list"
:sort="false"
:group="groupObject"
@change="onChange"
/>
</router-link>
<resource-dropdown
class="actions"
v-if="!inline"
@delete="$emit('delete', resource.id)"
@move="$emit('move', resource.id)"
@rename="$emit('rename', resource)"
/>
</div>
</template>
<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import { Route } from "vue-router";
import Draggable, { ChangeEvent } from "vuedraggable";
import { IResource } from "../../types/resource";
import RouteName from "../../router/name";
import ResourceMixin from "../../mixins/resource";
import { IGroup, usernameWithDomain } from "../../types/actor";
import ResourceDropdown from "./ResourceDropdown.vue";
import { UPDATE_RESOURCE } from "../../graphql/resources";
@Component({
components: { Draggable, ResourceDropdown },
})
export default class FolderItem extends Mixins(ResourceMixin) {
@Prop({ required: true, type: Object }) resource!: IResource;
@Prop({ required: true, type: Object }) group!: IGroup;
@Prop({ required: false, default: false }) inline!: boolean;
list = [];
groupObject: object = {
name: `folder-${this.resource.title}`,
pull: false,
put: ["resources"],
};
RouteName = RouteName;
ResourceMixin = ResourceMixin;
usernameWithDomain = usernameWithDomain;
async onChange(evt: ChangeEvent<IResource>): Promise<Route | undefined> {
console.log("into folder item");
console.log(evt);
if (evt.added && evt.added.element) {
const movedResource = evt.added.element as IResource;
const updatedResource = await this.moveResource(movedResource);
if (updatedResource && this.resource.path) {
// eslint-disable-next-line
// @ts-ignore
return this.$router.push({
name: RouteName.RESOURCE_FOLDER,
params: {
// eslint-disable-next-line
// @ts-ignore
path: ResourceMixin.resourcePathArray(this.resource),
preferredUsername: this.group.preferredUsername,
},
});
}
}
return undefined;
}
async moveResource(resource: IResource): Promise<IResource | undefined> {
const { data } = await this.$apollo.mutate<{ updateResource: IResource }>({
mutation: UPDATE_RESOURCE,
variables: {
id: resource.id,
path: `${this.resource.path}/${resource.title}`,
parentId: this.resource.id,
},
});
if (!data) {
console.error("Error while updating resource");
return undefined;
}
return data.updateResource;
}
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
.resource-wrapper {
display: flex;
flex: 1;
align-items: center;
.actions {
flex: 0;
display: block;
margin: auto 1rem auto 2rem;
cursor: pointer;
}
}
.dropzone {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
a {
display: flex;
font-size: 14px;
color: #444b5d;
text-decoration: none;
overflow: hidden;
flex: 1;
position: relative;
.preview {
flex: 0 0 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.body {
padding: 10px 8px 8px;
flex: 1 1 auto;
overflow: hidden;
h3 {
white-space: nowrap;
display: block;
font-weight: 500;
margin-bottom: 5px;
color: $primary;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
}
}
</style>

View File

@ -0,0 +1,24 @@
<template>
<b-dropdown aria-role="list" position="is-bottom-left">
<b-icon icon="dots-horizontal" slot="trigger" />
<b-dropdown-item aria-role="listitem" @click="$emit('rename')">
<b-icon icon="pencil" />
{{ $t("Rename") }}
</b-dropdown-item>
<b-dropdown-item aria-role="listitem" @click="$emit('move')">
<b-icon icon="folder-move" />
{{ $t("Move") }}
</b-dropdown-item>
<b-dropdown-item aria-role="listitem" @click="$emit('delete')">
<b-icon icon="delete" />
{{ $t("Delete") }}
</b-dropdown-item>
</b-dropdown>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class ResourceDropdown extends Vue {}
</script>

View File

@ -0,0 +1,137 @@
<template>
<div class="resource-wrapper">
<a :href="resource.resourceUrl" target="_blank">
<div class="preview">
<div v-if="resource.type && Object.keys(mapServiceTypeToIcon).includes(resource.type)">
<b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
</div>
<div
class="preview-image"
v-else-if="resource.metadata && resource.metadata.imageRemoteUrl"
:style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
/>
<div class="preview-type" v-else>
<b-icon icon="link" size="is-large" />
</div>
</div>
<div class="body">
<img
class="favicon"
v-if="resource.metadata && resource.metadata.faviconUrl"
:src="resource.metadata.faviconUrl"
/>
<h3>{{ resource.title }}</h3>
<span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
<span class="host" v-else>{{ urlHostname }}</span>
</div>
</a>
<resource-dropdown
class="actions"
v-if="!inline"
@delete="$emit('delete', resource.id)"
@move="$emit('move', resource.id)"
@rename="$emit('rename', resource)"
/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IResource, mapServiceTypeToIcon } from "@/types/resource";
import ResourceDropdown from "@/components/Resource/ResourceDropdown.vue";
@Component({
components: { ResourceDropdown },
})
export default class ResourceItem extends Vue {
@Prop({ required: true, type: Object }) resource!: IResource;
@Prop({ required: false, default: false }) inline!: boolean;
list = [];
mapServiceTypeToIcon = mapServiceTypeToIcon;
get urlHostname(): string {
return new URL(this.resource.resourceUrl).hostname.replace(/^(www\.)/, "");
}
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
.resource-wrapper {
display: flex;
flex: 1;
align-items: center;
.actions {
flex: 0;
display: block;
margin: auto 1rem auto 2rem;
cursor: pointer;
}
}
a {
display: flex;
font-size: 14px;
color: #444b5d;
text-decoration: none;
overflow: hidden;
flex: 1;
.preview {
flex: 0 0 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.preview-image {
border-radius: 4px 0 0 4px;
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: 50%;
}
}
.body {
padding: 10px 8px 8px;
flex: 1 1 auto;
overflow: hidden;
img.favicon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
vertical-align: middle;
}
h3 {
white-space: nowrap;
display: inline-block;
font-weight: 500;
margin-bottom: 5px;
color: $primary;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: middle;
}
.host {
display: block;
margin-top: 5px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

View File

@ -1,33 +1,52 @@
<template> <template>
<b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" /> <label>
<span class="visually-hidden">{{ defaultPlaceHolder }}</span>
<b-input
custom-class="searchField"
icon="magnify"
type="search"
rounded
:placeholder="defaultPlaceHolder"
v-model="searchText"
@keyup.native.enter="enter"
/>
</label>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { RouteName } from '@/router'; import RouteName from "../router/name";
@Component @Component
export default class SearchField extends Vue { export default class SearchField extends Vue {
@Prop({ type: String, required: false }) placeholder!: string; @Prop({ type: String, required: false }) placeholder!: string;
searchText: string = '';
searchText = "";
enter() { enter() {
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchText } }); this.$router.push({
name: RouteName.SEARCH,
params: { searchTerm: this.searchText },
});
} }
get defaultPlaceHolder(): string { get defaultPlaceHolder(): string {
// We can't use "this" inside @Prop's default value. // We can't use "this" inside @Prop's default value.
return this.placeholder || this.$t('Search') as string; return this.placeholder || (this.$t("Search") as string);
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
input.searchField { label span.visually-hidden {
box-shadow: none; display: none;
border-color: #b5b5b5; }
&::placeholder { input.searchField {
color: gray; box-shadow: none;
} border-color: #b5b5b5;
}
&::placeholder {
color: gray;
}
}
</style> </style>

View File

@ -1,14 +1,14 @@
<template> <template>
<li class="setting-menu-item" :class="{ active: isActive }"> <li class="setting-menu-item" :class="{ active: isActive }">
<router-link v-if="menuItem.to" :to="menuItem.to"> <router-link v-if="menuItem.to" :to="menuItem.to">
<span>{{ menuItem.title }}</span> <span>{{ menuItem.title }}</span>
</router-link> </router-link>
<span v-else>{{ menuItem.title }}</span> <span v-else>{{ menuItem.title }}</span>
</li> </li>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { ISettingMenuSection } from '@/types/setting-menu.model'; import { ISettingMenuSection } from "@/types/setting-menu.model";
@Component @Component
export default class SettingMenuItem extends Vue { export default class SettingMenuItem extends Vue {
@ -28,27 +28,28 @@ export default class SettingMenuItem extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
li.setting-menu-item { li.setting-menu-item {
font-size: 1.05rem; font-size: 1.05rem;
background-color: #fff1de; background-color: #fff1de;
color: $primary; color: $primary;
margin: auto; margin: auto;
span { span {
padding: 5px 15px; padding: 5px 15px;
display: block; display: block;
} }
a { a {
display: block; display: block;
color: inherit; color: inherit;
} }
&:hover, &.active { &:hover,
cursor: pointer; &.active {
background-color: lighten(#fea72b, 10%); cursor: pointer;
} background-color: lighten(#fea72b, 10%);
} }
</style> }
</style>

View File

@ -1,48 +1,52 @@
<template> <template>
<li :class="{ active: sectionActive }"> <li :class="{ active: sectionActive }">
<router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link> <router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link>
<b v-else>{{ menuSection.title }}</b> <b v-else>{{ menuSection.title }}</b>
<ul> <ul>
<setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" /> <setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" />
</ul> </ul>
</li> </li>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import { ISettingMenuSection } from '@/types/setting-menu.model'; import { ISettingMenuSection } from "@/types/setting-menu.model";
import SettingMenuItem from '@/components/Settings/SettingMenuItem.vue'; import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
@Component({ @Component({
components: { SettingMenuItem }, components: { SettingMenuItem },
}) })
export default class SettingMenuSection extends Vue { export default class SettingMenuSection extends Vue {
@Prop({ required: true, type: Object }) menuSection!: ISettingMenuSection; @Prop({ required: true, type: Object }) menuSection!: ISettingMenuSection;
get sectionActive(): boolean|undefined { get sectionActive(): boolean | undefined {
return this.menuSection.items && this.menuSection.items.some((({ to }) => to && to.name === this.$route.name)); return (
this.menuSection.items &&
this.menuSection.items.some(({ to }) => to && to.name === this.$route.name)
);
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
li { li {
font-size: 1.3rem; font-size: 1.3rem;
background-color: $secondary; background-color: $secondary;
color: $primary; color: $primary;
margin: 2px auto; margin: 2px auto;
&.active { &.active {
background-color: #fea72b; background-color: #fea72b;
} }
a, b { a,
cursor: pointer; b {
margin: 5px 0; cursor: pointer;
display: block; margin: 5px 0;
padding: 5px 10px; display: block;
color: inherit; padding: 5px 10px;
font-weight: 500; color: inherit;
} font-weight: 500;
} }
</style> }
</style>

View File

@ -1,18 +1,20 @@
<template> <template>
<ul> <ul>
<SettingMenuSection v-for="section in menuValue" :key="section.title" :menu-section="section" /> <SettingMenuSection v-for="section in menuValue" :key="section.title" :menu-section="section" />
</ul> </ul>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import SettingMenuSection from '@/components/Settings/SettingMenuSection.vue'; import SettingMenuSection from "@/components/Settings/SettingMenuSection.vue";
import { ISettingMenuSection } from '@/types/setting-menu.model'; import { ISettingMenuSection } from "@/types/setting-menu.model";
@Component({ @Component({
components: { SettingMenuSection }, components: { SettingMenuSection },
}) })
export default class SettingsMenu extends Vue { export default class SettingsMenu extends Vue {
@Prop({ required: true, type: Array }) menu!: ISettingMenuSection[]; @Prop({ required: true, type: Array }) menu!: ISettingMenuSection[];
get menuValue() { return this.menu; } get menuValue() {
return this.menu;
}
} }
</script> </script>

24
js/src/components/Tag.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<span class="tag">
<span>
<slot />
</span>
</span>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Tag extends Vue {}
</script>
<style lang="scss" scoped>
span.tag {
background: #ecebf7;
color: #8e8bae;
text-transform: uppercase;
&::before {
content: "#";
}
}
</style>

View File

@ -0,0 +1,60 @@
<template>
<div class="card" v-if="todo">
<div class="card-content">
<b-checkbox v-model="status" />
<router-link :to="{ name: RouteName.TODO, params: { todoId: todo.id } }">{{
todo.title
}}</router-link>
<span class="details has-text-grey">
<span v-if="todo.dueDate" class="due_date">
<b-icon icon="calendar" />
{{ todo.dueDate | formatDateString }}
</span>
<span v-if="todo.assignedTo" class="assigned_to">
<b-icon icon="account" />
{{ `@${todo.assignedTo.preferredUsername}` }}
<span v-if="todo.assignedTo.domain">{{ `@${todo.assignedTo.domain}` }}</span>
</span>
</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ITodo } from "../../types/todos";
import RouteName from "../../router/name";
import { UPDATE_TODO } from "../../graphql/todos";
@Component
export default class Todo extends Vue {
@Prop({ required: true, type: Object }) todo!: ITodo;
RouteName = RouteName;
editMode = false;
get status(): boolean {
return this.todo.status;
}
set status(status: boolean) {
this.updateTodo({ status });
}
updateTodo(params: object) {
this.$apollo.mutate({
mutation: UPDATE_TODO,
variables: {
id: this.todo.id,
...params,
},
});
this.editMode = false;
}
}
</script>
<style lang="scss" scoped>
span.details {
margin-left: 1rem;
}
</style>

View File

@ -0,0 +1,90 @@
<template>
<div class="card" v-if="todo">
<div class="card-content">
<b-field :label="$t('Statut')">
<b-checkbox size="is-large" v-model="status" />
</b-field>
<b-field :label="$t('Title')">
<b-input v-model="title" />
</b-field>
<b-field :label="$t('Assigned to')">
<actor-auto-complete v-model="assignedTo" />
</b-field>
<b-field :label="$t('Due on')">
<b-datepicker v-model="dueDate" />
</b-field>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { debounce } from "lodash";
import { ITodo } from "../../types/todos";
import RouteName from "../../router/name";
import { UPDATE_TODO } from "../../graphql/todos";
import ActorAutoComplete from "../Account/ActorAutoComplete.vue";
import { IPerson } from "../../types/actor";
@Component({
components: { ActorAutoComplete },
})
export default class Todo extends Vue {
@Prop({ required: true, type: Object }) todo!: ITodo;
RouteName = RouteName;
editMode = false;
debounceUpdateTodo!: Function;
// We put this in data because of issues like
// https://github.com/vuejs/vue-class-component/issues/263
data() {
return {
debounceUpdateTodo: debounce(this.updateTodo, 1000),
};
}
get title(): string {
return this.todo.title;
}
set title(title: string) {
this.debounceUpdateTodo({ title });
}
get status(): boolean {
return this.todo.status;
}
set status(status: boolean) {
this.debounceUpdateTodo({ status });
}
get assignedTo(): IPerson | undefined {
return this.todo.assignedTo;
}
set assignedTo(person: IPerson | undefined) {
this.debounceUpdateTodo({ assignedToId: person ? person.id : null });
}
get dueDate(): Date | undefined {
return this.todo.dueDate;
}
set dueDate(dueDate: Date | undefined) {
this.debounceUpdateTodo({ dueDate });
}
updateTodo(params: object) {
this.$apollo.mutate({
mutation: UPDATE_TODO,
variables: {
id: this.todo.id,
...params,
},
});
this.editMode = false;
}
}
</script>

View File

@ -1,32 +1,31 @@
<template> <template>
<h3> <h2>
<span> <span>
<slot /> <slot />
</span> </span>
</h3> </h2>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
@Component @Component
export default class Subtitle extends Vue { export default class Subtitle extends Vue {}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
h3 { h2 {
display: block; display: block;
margin: 15px 0 30px; margin: 15px 0 30px;
span { span {
background: $secondary; background: $secondary;
display: inline; display: inline;
padding: 3px 8px; padding: 3px 8px;
color: #3A384C; color: #3a384c;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
} }
} }
</style> </style>

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="is-divider-vertical" :data-content="dataContent"></div> <div class="is-divider-vertical" :data-content="dataContent"></div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class VerticalDivider extends Vue { export default class VerticalDivider extends Vue {
@Prop({ default: 'Or' }) content; @Prop({ default: "Or" }) content!: string;
get dataContent() { get dataContent() {
return this.content.toLocaleUpperCase(); return this.content.toLocaleUpperCase();
@ -14,9 +14,9 @@ export default class VerticalDivider extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
.is-divider-vertical[data-content]::after { .is-divider-vertical[data-content]::after {
background-color: $body-background-color; background-color: $body-background-color;
} }
</style> </style>

View File

@ -1,6 +1,6 @@
export const AUTH_ACCESS_TOKEN = 'auth-access-token'; export const AUTH_ACCESS_TOKEN = "auth-access-token";
export const AUTH_REFRESH_TOKEN = 'auth-refresh-token'; export const AUTH_REFRESH_TOKEN = "auth-refresh-token";
export const AUTH_USER_ID = 'auth-user-id'; export const AUTH_USER_ID = "auth-user-id";
export const AUTH_USER_EMAIL = 'auth-user-email'; export const AUTH_USER_EMAIL = "auth-user-email";
export const AUTH_USER_ACTOR_ID = 'auth-user-actor-id'; export const AUTH_USER_ACTOR_ID = "auth-user-actor-id";
export const AUTH_USER_ROLE = 'auth-user-role'; export const AUTH_USER_ROLE = "auth-user-role";

View File

@ -3,22 +3,32 @@ function parseDateTime(value: string): Date {
} }
function formatDateString(value: string): string { function formatDateString(value: string): string {
return parseDateTime(value).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); return parseDateTime(value).toLocaleString(undefined, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
});
} }
function formatTimeString(value: string): string { function formatTimeString(value: string): string {
return parseDateTime(value).toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' }); return parseDateTime(value).toLocaleTimeString(undefined, { hour: "numeric", minute: "numeric" });
} }
function formatDateTimeString(value: string, showTime: boolean = true): string { function formatDateTimeString(value: string, showTime = true): string {
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }; const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
if (showTime) { if (showTime) {
options.hour = 'numeric'; options.hour = "numeric";
options.minute = 'numeric'; options.minute = "numeric";
} }
return parseDateTime(value).toLocaleTimeString(undefined, options); return parseDateTime(value).toLocaleTimeString(undefined, options);
} }
export { formatDateString, formatTimeString, formatDateTimeString }; export { formatDateString, formatTimeString, formatDateTimeString };

Some files were not shown because too many files have changed in this diff Show More