feature: private circles

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",

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',
+  `<label>
+    <div>\${label}</div>
+    <select
+      data-holder
+      name="\${name}">
+      <option
+        value="Public"
+        \${value=="Public" ? 'selected' : ''}>Public</option>
+      <option
+        value="Private"
+        \${value=="Private" ? 'selected' : ''}>Privé</option>
+    </select>
+  </label>`,
+  '',
+  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 }

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)
 

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");

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 *'

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'
 

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)