minor: community implementation

src/dependencies.pug

@@ -25,7 +25,7 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
 if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.9" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.10" defer)
     //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
 if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)

src/page-admin.pug

@@ -6,17 +6,17 @@
     #admin-projects(hidden)
       include views/admin/page-admin-projects.pug
   if (endpoints.users || (endpoints.get && endpoints.get.users))
-    #admin-users(hidden)
+    #admin-communities(hidden)
-      include views/admin/page-admin-users.pug
+      include views/admin/page-admin-communities.pug
 nav.jsRightMenu(role='navigation')
   solid-router(default-route='admin-circles')
     ul
       li.jsOffsiteToggle
         a Replier le menu
       if (endpoints.users || (endpoints.get && endpoints.get.users))
-        solid-route.active-color(name='admin-users')
+        solid-route(name='admin-communities')
           li
-            a Utilisateurs
+            a Communautés
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
         solid-route(name='admin-circles')
           li

src/styles/base/main.scss

@@ -752,6 +752,29 @@ a,
       }
     }
 
+    &.button-disabled{
+      cursor: not-allowed;
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-grey-3);
+      }
+
+      &.bordered {
+        border: 1px solid var(--color-grey-3);
+      }
+
+      &:hover {
+        background-color: var(--color-white);
+
+        *,
+        & {
+          color: var(--color-grey-3);
+        }
+      }
+    }
+
     &.button-secondary {
       background-color: var(--color-white);
 
@@ -816,6 +839,29 @@ a,
         }
       }
 
+      &.button-disabled{
+        cursor: not-allowed;
+        background-color: var(--color-grey-3);
+  
+        *,
+        & {
+          color: var(--color-white);
+        }
+  
+        &.bordered {
+          border: 1px solid var(--color-white);
+        }
+  
+        &:hover {
+          background-color: var(--color-grey-3);
+  
+          *,
+          & {
+            color: var(--color-white);
+          }
+        }
+      }
+
       &.button-secondary {
         background-color: var(--color-secondary);
 

src/styles/base/table.scss

@@ -118,6 +118,14 @@
     width: 280px;
   }
 
+  .w450 {
+    width: 450px;
+  }
+
+  .w370 {
+    width: 370px;
+  }
+
   .w230 {
     width: 230px;
   }

src/styles/base/user-thumb.scss

@@ -66,8 +66,32 @@
     content: '@';
   }
 }
+solid-multiple[name="user.communities"] {
+  * {
+    display: contents;
+  }
+
+  solid-display-value {
+    &:after {
+      content: ",";
+      margin-right: 5px;
+    }
+
+    display: inline-block!important;
+  }
+
+  >solid-display>div>solid-display:last-child>div>solid-display-value:after {
+    display: none;
+  }
+
+  >solid-display {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: calc(50% - 22px - 0.5rem);
+  }
 
-.user-thumb__city:not(:empty) {
   @include mdi('atom');
   align-items: center;
   display: flex;

src/styles/components/sidebar.scss

@@ -86,7 +86,8 @@
         >solid-route {
 
           &[name*='circle'],
-          &[name*='project'] {
+          &[name*='project'],
+          &[name*='communities'] {
 
             >li::before {
               font-size: 4rem;
@@ -120,16 +121,8 @@
             @include ci('file');
           }
 
-          &[name='admin-users']>li::before {
+          &[name='admin-communities']>li {
-            background-color: var(--color-secondary);
+            @include ci('networking');
-            content: '';
-            display: inline-block;
-            height: 40px;
-            mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            mask-size: cover;
-            -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            -webkit-mask-size: cover;
-            width: 40px;
           }
 
           &[name='admin-circles']>li {

src/views/admin/page-admin-communities.pug

@@ -0,0 +1,53 @@
+.content-box.flex.full-width.with-form
+  solid-router(default-route='admin-communities-list', hidden)
+    solid-route(name='admin-communities-list')
+    solid-route(name='admin-users-create', use-id)
+
+  div.content-box__header.flex.space-between
+    h1.without-margin Administration
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
+  
+  solid-widget(name='hubl-action-community')
+    template
+      solid-ac-checker(data-src="${value}", nested-field="members", permission='acl:Append')
+        solid-link(
+          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
+          data-src="${value}"
+          next="admin-users-create"
+        ) Inviter un nouvel utilisateur
+      solid-ac-checker(data-src="${value}", nested-field="members", no-permission='acl:Append')
+        div.button.text-bold.text-uppercase.button-disabled Membre, aucune permission
+
+  #admin-communities-list.content-box__height(hidden)
+    div.content-box__info.flex
+      div.admin-header.flex
+        h3 Communautés
+
+      .table-wrapper
+        .table
+          div.table-header.grey-color
+            div.w450 Nom
+            div.w370 Action
+        
+          solid-display(
+            class='table-body'
+            bind-user
+            nested-field='communities'
+            fields='community.name, community'
+            loader-id='loader-admin-community'
+
+            class-community.name='w450 border cell-with-name'
+            class-community='w370 border cell-with-buttons is-spaced'
+            widget-community='hubl-action-community'
+
+            order-asc='community.name'
+          )
+
+      div#loader-admin-community.loader.loader-top
+        div
+        div
+        div
+        div
+
+  #admin-users-create.content-box__height(hidden)
+    include page-admin-users-create.pug

src/views/admin/page-admin-users-create.pug

@@ -1,7 +1,18 @@
 div.content-box__info.flex
-  solid-link(class='backlink right', next='admin-users-list') Retour
+  solid-link(class='backlink right', next='admin-communities-list') Retour
 
-  h1.centered Ajouter un utilisateur à la plateforme
+  solid-display.h1-like.centered(
+    bind-resources
+    fields='text, name'
+    value-text="Inviter un utilisateur à "
+    loader-id='loader-users-title'
+  )
+
+  div#loader-users-title.loader.loader
+    div
+    div
+    div
+    div
 
   div#loader-users-create.loader.loader-top
     div
@@ -19,33 +30,34 @@ div.content-box__info.flex
       label E-mail *
       input(type="email" label="E-mail *" name="email" required value="\${value}" data-holder)
 
-  solid-form.form.button-register(
+  solid-form.form.button-register#selected-community(
-    data-src=`${endpoints.users || endpoints.post.users}`
+    bind-resources
+    nested-field='members'
 
-    fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
+    fields='line-1(user.first_name, user.last_name), line-2(user.username, user.email), user.password'
-    required-first_name
+    required-user.first_name
-    required-last_name
+    required-user.last_name
-    required-username
+    required-user.username
-    required-email
+    required-user.email
     loader-id='loader-users-create'
 
-    class-first_name='form-label is-light is-half-width input-text-like'
+    class-user.first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width input-text-like'
+    class-user.last_name='form-label is-light is-half-width input-text-like'
-    class-username='form-label is-light is-half-width input-text-like'
+    class-user.username='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-half-width input-text-like'
+    class-user.email='form-label is-light is-half-width input-text-like'
 
-    label-first_name='Prénom *'
+    label-user.first_name='Prénom *'
-    label-last_name='Nom *'
+    label-user.last_name='Nom *'
-    label-username='Nom d\'utilisateur *'
+    label-user.username='Nom d\'utilisateur *'
-    label-email='E-mail *'
+    label-user.email='E-mail *'
 
-    value-password=''
+    value-user.password=''
-    widget-password='solid-form-hidden'
+    widget-user.password='solid-form-hidden'
 
-    widget-username='hubl-username-field'
+    widget-user.username='hubl-username-field'
-    widget-email='hubl-email-field'
+    widget-user.email='hubl-email-field'
 
-    next='admin-users-list'
+    next='admin-communities-list'
 
-    submit-button='Enregistrer'
+    submit-button='Inviter'
   )

src/views/admin/page-admin-users-edit.pug

@@ -1,40 +0,0 @@
-div.content-box__info.flex
-  solid-link(class='backlink right', next='admin-users-list') Retour
-
-  h1.centered 
-    span Modifier un utilisateur
-
-    div#loader-users-edit.loader.loader-top
-      div
-      div
-      div
-      div
-
-    solid-display(
-      bind-resources=''
-      fields='name'
-      loader-id='loader-users-edit'
-    )  
-
-  solid-form.form.button-register(
-    bind-resources=''
-
-    fields='line-1(first_name, last_name), line-2(email)'
-    required-first_name
-    required-last_name
-    required-email
-    loader-id='loader-users-edit'
-
-    class-first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-full-width input-text-like'
-
-    label-first_name='Prénom *'
-    label-last_name='Nom *'
-    label-email='E-mail *'
-    widget-email='hubl-email-field'
-
-    next='admin-user-list'
-
-    submit-button='Enregistrer'
-  )

src/views/admin/page-admin-users.pug

@@ -1,67 +0,0 @@
-.content-box.flex.full-width.with-form
-  solid-router(default-route='admin-users-list', hidden)
-    solid-route(name='admin-users-list')
-    solid-route(name='admin-users-create')
-    solid-route(name='admin-users-edit')
-
-  div.content-box__header.flex.space-between
-    h1.without-margin Administration
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
-  
-  solid-widget(name='hubl-solid-action-custom')
-    template
-      solid-ac-checker(data-src="${src}", permission='acl:Write')
-        solid-link(
-          class='button rounded reversed button-primary bordered icon-pencil'
-          data-src="${src}"
-          next="${value}"
-        )
-
-
-  #admin-users-list.content-box__height(hidden)
-    div.content-box__info.flex
-      div.admin-header.flex
-        h3 Utilisateurs
-        solid-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
-          solid-link(
-            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-            next='admin-users-create'
-          ) Ajouter un utilisateur
-
-      .table-wrapper
-        .table
-          div.table-header.grey-color
-            div.w280 Nom
-            div.w70
-        
-          solid-display(
-            class='table-body'
-            data-src=`${endpoints.users || endpoints.get.users}`
-            fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
-            loader-id='loader-admin-users'
-
-            class-account.picture='avatar user-thumb__picture'
-            class-name='user-thumb__name'
-            class-username='user-thumb__username'
-            class-profile.city='user-thumb__city'
-            widget-account.picture='hubl-user-avatar'
-
-            label-actions='Edit'
-            action-actions='admin-users-edit'
-            class-actions='w70 border cell-with-buttons'
-            widget-actions='hubl-solid-action-custom'
-
-            order-by='username'
-          )
-
-      div#loader-admin-users.loader.loader-top
-        div
-        div
-        div
-        div
-
-  #admin-users-create.content-box__height(hidden)
-    include page-admin-users-create.pug
-
-  #admin-users-edit.content-box__height(hidden)
-    include page-admin-users-edit.pug

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

@@ -77,14 +77,15 @@ div.content-box__info
         class='table-body'
         bind-resources
         nested-field='members'
-        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.profile.city))), self'
+        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
         loader-id='loader-circle-edit'
 
         class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
         class-user.account.picture='user-thumb__picture avatar'
         class-user.name='user-thumb__name'
         class-user.groups='user-thumb__groups'
-        class-user.profile.city='user-thumb__city'
+        multiple-user.communities
+        multiple-user.communities-fields="community.name"
 
         widget-user.account.picture='hubl-user-avatar'
 

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

@@ -91,7 +91,7 @@ solid-router(default-route='circle-profile', hidden)
       bind-resources
       nested-field='members'
       loader-id='loader-circle-profile'
-      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.profile.city))'
+      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities))'
 
       widget-user='hubl-circle-team-contact'
 
@@ -100,7 +100,8 @@ solid-router(default-route='circle-profile', hidden)
       class-user.name='user-thumb__name'
       class-user='user-thumb__send'
       class-is_admin='user-thumb__admin'
-      class-user.profile.city='user-thumb__city'
+      multiple-user.communities
+      multiple-user.communities-fields="community.name"
 
       widget-classGroup='solid-set-div'
       widget-user.account.picture='hubl-user-avatar'

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

@@ -69,14 +69,15 @@ div.content-box__info
         class='table-body'
         bind-resources
         nested-field='members'
-        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.profile.city))), self'
+        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
         loader-id='loader-project-edit'
 
         class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
         class-user.account.picture='user-thumb__picture avatar'
         class-user.name='user-thumb__name'
         class-user.groups='user-thumb__groups'
-        class-user.profile.city='user-thumb__city'
+        multiple-user.communities
+        multiple-user.communities-fields="community.name"
 
         widget-user.account.picture='hubl-user-avatar'
 

src/views/project/page-project-profile.pug

@@ -89,7 +89,7 @@ solid-router(default-route='project-profile', hidden)
     solid-display.block(
       bind-resources
       nested-field='members'
-      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.profile.city, name))'
+      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities, name))'
 
       widget-user='hubl-project-team-contact'
 
@@ -98,7 +98,8 @@ solid-router(default-route='project-profile', hidden)
       class-user.name='user-thumb__name'
       class-user='user-thumb__send'
       class-is_admin='user-thumb__admin'
-      class-user.profile.city='user-thumb__city'
+      multiple-user.communities
+      multiple-user.communities-fields="community.name"
       class-name='user-thumb__lead'
 
       widget-classGroup='solid-set-div'