Merge branch 'master' into release/rework-css

.gitlab-ci.yml

@@ -58,10 +58,11 @@ test1:
   environment:
     name: test1
     url: https://test1.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_TEST1" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test1@astral.startinblox.com:~/front/
   only:
@@ -75,10 +76,11 @@ test2:
   environment:
     name: test2
     url: https://test2.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_TEST2" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test2@astral.startinblox.com:~/front/
   only:
@@ -92,10 +94,11 @@ test3:
   environment:
     name: test3
     url: https://test3.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_TEST3" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* test3@astral.startinblox.com:~/front/
   only:
@@ -109,10 +112,11 @@ stg1:
   environment:
     name: stg1
     url: https://stg1.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_STG1" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* stg1@astral.startinblox.com:~/front/
   only:
@@ -126,10 +130,11 @@ stg2:
   environment:
     name: stg2
     url: https://stg2.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_STG2" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* stg2@astral.startinblox.com:~/front/
   only:
@@ -157,10 +162,11 @@ community:
   environment:
     name: community
     url: https://community.startinblox.com
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_COMMUNITY" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community@astral.startinblox.com:~/front/
   only:
@@ -174,10 +180,11 @@ etuc:
   environment:
     name: etuc
     url: https://app.digitalplatformobservatory.org
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_DIGITALPLATFORMOBSERVATORY" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* etuc@ssh-etuc.happy-dev.fr:~/sib/www/
   only:
@@ -191,10 +198,11 @@ nantes:
   environment:
     name: nantes
     url: https://app.nantes.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_NANTESHD" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* nantes@ssh-nantes.happy-dev.fr:~/sib/www/
   only:
@@ -208,10 +216,11 @@ paris:
   environment:
     name: paris
     url: https://app.paris.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_PARIS" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* paris@ssh-paris.happy-dev.fr:~/sib/www/
   only:
@@ -225,10 +234,11 @@ toulouse:
   environment:
     name: toulouse
     url: https://smart-toulouse.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
   script:
     - echo "$APP_CONFIG_TOULOUSE" > config.json
     - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm install
     - npm run build
     - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* smart-toulouse@ssh-smart-toulouse.happy-dev.fr:~/www/
   only:

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-search-users.js

@@ -0,0 +1,15 @@
+import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js';
+
+const HublSearchUsers = widgetFactory(
+  'hubl-search-users',
+  `<input
+    data-holder
+    autocomplete="off"
+    placeholder="\${label}"
+    type="text"
+    name="\${name}"
+    value="\${escapedValue}"
+  >`
+);
+
+export { HublSearchUsers }

src/components/hubl-status.js

@@ -0,0 +1,30 @@
+import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js';
+import { importCSS } from 'https://unpkg.com/@startinblox/core@0.9/dist/libs/helpers.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,6 @@
+script(type="module" src="/components/hubl-search-users.js" defer)
+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/menu-left.pug

@@ -8,6 +8,10 @@ sib-widget(name='hubl-menu-jabberid')
       data-jabberID="${value}"
     )
 
+sib-widget(name='hubl-menu-publicprivate')
+  template
+    div ${value == 'Public' ? '#' : ''}
+
 sib-widget(name='hubl-create')
   template
     p.create Tu ne fais partie d'aucun ${value}.
@@ -19,24 +23,28 @@ sib-widget(name='hubl-menu-fix-url-circle')
   template
     sib-display(
       data-src='${value}'
-      fields='name, jabberID, badge'
+      fields='status, name, jabberID, badge'
       value-badge='${value}'
+      widget-status='hubl-menu-publicprivate'
       widget-badge='hubl-counter'
       widget-jabberID='hubl-menu-jabberid'
       widget-name='sib-display-div'
+      order-by="name"
     )
 
 sib-widget(name='hubl-menu-fix-url-project')
   template
     sib-display(
       data-src='${value}'
-      fields='project(customer.name, name, jabberID), badge'
+      fields='status, project(customer.name, name, jabberID), badge'
       class-name='project-name'
       class-customer.name='project-customer'
       value-badge='${value}'
+      widget-status='hubl-menu-publicprivate'
       widget-jabberID='hubl-menu-jabberid'
       widget-badge='hubl-counter'
       widget-name='sib-display-div'
+      order-by="customer.name"
     )
 
 nav#main__menu.jsLeftMenu
@@ -115,12 +123,16 @@ nav#main__menu.jsLeftMenu
           sib-display.nosub(
             data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
             fields='name, chatProfile.jabberID, badge'
+            search-fields="name"
+            search-label-name="Rechercher..."
+            search-widget-name="hubl-search-users"
             widget-name='sib-display-div'
             widget-badge='hubl-counter'
             widget-chatProfile.jabberID='hubl-menu-jabberid'
             action-badge='badge'
             order-by='username'
             next='messages'
+            paginate-by='10'
           )
       div.divider
 

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/styles/base/menu-left.scss

@@ -125,6 +125,46 @@
       }
       /* End of specific styles of "Projects" tab */
 
+      sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
+        margin: auto;
+        display: block;
+        background-color: var(--color-secondary);
+        color: var(--color-grey-6);
+        border: 1px solid var(--color-grey-4);
+        border-radius: 3px;
+        padding: 4px;
+      }
+
+      sib-display.nosub>nav {
+        text-align: center;
+        display: grid;
+        grid-template-columns: auto 50% auto;
+        grid-template-areas: "left middle right";
+        >* {
+          color: var(--color-grey-6);
+        }
+        >[data-id="prev"] {
+          grid-area: left;
+        }
+        >[data-id="next"] {
+          grid-area: right;
+        }
+        >span {
+          grid-area: middle;
+        }
+      }
+
+      hubl-menu-publicprivate {
+        display: inline-block;
+        text-align: center;
+        div {
+          font-family: simple-line-icons;
+          width: 20px;
+          font-size: 0.8em;
+          padding-top: 0.1em;
+        }
+      }
+
       >sib-display.nosub>div>sib-display>div {
         padding: 1rem 1rem 1rem 3rem;
       }

src/styles/base/table.scss

@@ -28,7 +28,6 @@
 
       >* {
         border-right: 1px solid var(--color-table-border);
-        flex: 1;
         padding: 2.1rem 0;
         text-align: center;
       }

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/admin/page-admin-circles.pug

@@ -66,6 +66,8 @@
           action-leaveButton="joinButton"
           widget-leaveButton="hubl-admin-circle-leave-button"
           widget-circle.owner='hubl-circle-owner'
+
+          order-by="circle.name"
         )
 
         sib-widget(name='hubl-admin-circle-join-button')
@@ -92,6 +94,8 @@
 
           class-members='w33 cell border cell-with-buttons'
           widget-members="hubl-admin-circle-join-button"
+
+          order-by="name"
         )
 
 

src/views/circle/page-circle-edit.pug

@@ -31,7 +31,7 @@ div.content-box__info
         sib-delete(
           class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
           data-src="${value['@id']}"
-          data-label='Quitter le canal'
+          data-label='Retirer'
         )
 
       //- Only to show the table grid
@@ -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)