From 9f32a4dc9b95067748f408417ddbe8aa583967af Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 19 May 2020 18:22:00 +0200 Subject: [PATCH] feature: private circles --- package.json | 2 ++ src/components/hubl-status.js | 29 +++++++++++++++++++ src/dependencies.pug | 2 ++ src/styles/base/form.scss | 6 +++- src/views/admin/page-admin-circles-create.pug | 6 +++- src/views/circle/page-circle-edit.pug | 6 +++- src/views/circle/page-circle-profile.pug | 20 ++++++------- 7 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 src/components/hubl-status.js diff --git a/package.json b/package.json index 76a9d72..3792914 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "build": "run-p copy:* build:*", "build:css": "node-sass src/styles/index.scss -o dist/styles/", "build:js": "babel 'src/scripts/*.js' -o dist/scripts/index.js", + "build:jscomponents": "babel 'src/components/*.js' --out-dir dist/components/", "build:html": "pug src/index.pug -o dist/ --obj config.json", "copy:font": "copyfiles -f src/fonts/* dist/fonts", "copy:image": "copyfiles -f src/images/* dist/images", @@ -17,6 +18,7 @@ "watch": "run-p copy:* watch:* serve", "watch:css": "npm run build:css && npm run build:css -- -w", "watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js", + "watch:jscomponents": "babel --watch \"src/components/*.js\" --out-dir dist/components/", "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json", "cypress:open": "cypress open", "cypress:verify": "cypress verify", diff --git a/src/components/hubl-status.js b/src/components/hubl-status.js new file mode 100644 index 0000000..1a3f02b --- /dev/null +++ b/src/components/hubl-status.js @@ -0,0 +1,29 @@ +import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js'; +import SlimSelect from 'https://dev.jspm.io/slim-select@1.23'; + +const HublStatus = widgetFactory( + 'hubl-status', + ``, + '', + formWidget => { + let select = formWidget.querySelector('select'); + if (!select) return; + const slimSelect = new SlimSelect({select: select}); + importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css'); + select.addEventListener('change', () => slimSelect.render()); + }, +); + +export { HublStatus } \ No newline at end of file diff --git a/src/dependencies.pug b/src/dependencies.pug index 60b0441..c9ae0be 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -1,3 +1,5 @@ +script(type="module" src="/components/hubl-status.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/core@0.9" defer) //- script(type="module" src="/lib/sib-core/dist/index.js" defer) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index e8b99dd..8941017 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -227,7 +227,7 @@ /* WIDGETS SIB */ - sib-form-auto-completion.member-select { + sib-form-auto-completion.member-select, hubl-status { align-self: flex-end; >label:first-of-type>div { @@ -263,6 +263,10 @@ } } + hubl-status { + align-self: auto; + } + sib-form-date { input[type="date"] { background-image: url("/images/calendar.svg"); diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index e7c7770..70f19bf 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -6,10 +6,14 @@ div.content-box__info sib-form( data-src=`${endpoints.circles || endpoints.post.circles}` - fields='name, description' + fields='status, name, description' + + label-status='Statut du canal' + widget-status='hubl-status' class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' + class-status='form-label is-light is-full-width member-select color' label-name='Nom du canal *' label-description='Sous-titre du canal *' diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index d670e33..76d64b5 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -49,9 +49,12 @@ div.content-box__info sib-form.form-edit( bind-resources - fields='block-circle__info(name, owner), description' + fields='status, block-circle__info(name, owner), description' range-owner=`${endpoints.users || endpoints.get.users}` + label-status='Statut du canal' + widget-status='hubl-status' + label-name='Nom du canal' label-owner='Administrateur ou administratrice' label-description='Sous-titre du canal *' @@ -59,6 +62,7 @@ div.content-box__info class-name='form-label is-light is-half-width' class-owner='form-label is-light is-half-width member-select color' class-description='form-label is-light is-full-width' + class-status='form-label is-light is-full-width member-select color' widget-owner='sib-form-auto-completion' diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 71bdda5..2c583fb 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -21,16 +21,6 @@ sib-router(default-route='circle-profile', hidden) sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre - h2 Membres : - - sib-display.block( - bind-resources - fields='members' - - multiple-members='' - widget-members='hubl-circle-team-template' - ) - div.box-button sib-ac-checker(permission='acl:Delete', bind-resources) sib-delete( @@ -78,6 +68,16 @@ sib-router(default-route='circle-profile', hidden) hubl-inherit-user-id="search-value-user" ) + h2 Membres : + + sib-display.block( + bind-resources + fields='members' + + multiple-members='' + widget-members='hubl-circle-team-template' + ) + #circle-edit(hidden)