wip

Co-authored-by: Iris Benoit <iris.benoit@pix.fr>
Co-authored-by: Laura Bergoens <laura.bergoens@pix.fr>

pix-editor/app/adapters/challenge.js

@@ -16,4 +16,12 @@ export default class ChallengeAdapter extends ApplicationAdapter {
     return this.ajax(url, 'GET', { data: { filter: { ids } } });
   }
 
+  async findAll(store, type, neverSet, snapshotRecordArray) {
+    const skillId = snapshotRecordArray?.adapterOptions?.skillId;
+    if (!skillId) {
+      return super.findAll(...arguments);
+    }
+    const url = `${this.buildURL('skills', skillId)}/challenges-production`;
+    return this.ajax(url, 'GET');
+  }
 }

pix-editor/app/adapters/skill.js

@@ -28,4 +28,17 @@ export default class SkillAdapter extends AirtableAdapter {
   pathForType() {
     return 'Acquis';
   }
+
+  async findRecord(store, type, id, snapshot) {
+    const withPixId = snapshot?.adapterOptions?.withPixId ?? false;
+    if (!withPixId) {
+      return super.findRecord(...arguments);
+    }
+    const url = this.urlForFindAll(type.modelName, snapshot);
+    const res = await this.ajax(url, 'GET', { data: {
+      filterByFormula: `AND(FIND('${id}', {id persistant}))`,
+      maxRecords: 1,
+    } });
+    return res.records[0] ?? null;
+  }
 }

pix-editor/app/components/competence-overview-skill.gjs

@@ -1,5 +1,6 @@
 import { concat } from '@ember/helper';
 import Component from '@glimmer/component';
+import { LinkTo } from '@ember/routing';
 
 export default class CompetenceOverviewSkill extends Component {
 
@@ -13,20 +14,22 @@ export default class CompetenceOverviewSkill extends Component {
   <template>
     <div ...attributes class={{concat "production-skill-overview production-skill-overview--" this.modifier}}>
       {{#if @skillOverview}}
-        <span class="production-skill-overview__name">{{@skillOverview.name}}</span>
-        <span class="production-skill-overview__details">
-          <span title="Nombre d'épreuves en production">
-            {{@skillOverview.validatedChallengesCount}}
-          </span>
-          {{#if @skillOverview.proposedChallengesCount}}
-            <span title="Nombre d'épreuves en cours de construction">
-              ({{@skillOverview.proposedChallengesCount}})
+        <LinkTo @route="authenticated.v2.competence-overview.challenges" @model={{@skillOverview.id}}>
+          <span class="production-skill-overview__name">{{@skillOverview.name}}</span>
+          <span class="production-skill-overview__details">
+            <span title="Nombre d'épreuves en production">
+              {{@skillOverview.validatedChallengesCount}}
             </span>
-          {{/if}}
-          {{#unless @skillOverview.isPrototypeDeclinable}}
-            <span class="">NR</span>
-          {{/unless}}
-        </span>
+            {{#if @skillOverview.proposedChallengesCount}}
+              <span title="Nombre d'épreuves en cours de construction">
+                ({{@skillOverview.proposedChallengesCount}})
+              </span>
+            {{/if}}
+            {{#unless @skillOverview.isPrototypeDeclinable}}
+              <span class="">NR</span>
+            {{/unless}}
+          </span>
+        </LinkTo>
       {{/if}}
     </div>
   </template>

pix-editor/app/components/competence-overview/challenges-production.gjs

@@ -0,0 +1,132 @@
+import Component from '@glimmer/component';
+import PixTag from '@1024pix/pix-ui/components/pix-tag';
+import PixIconButton from '@1024pix/pix-ui/components/pix-icon-button';
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixTable from '@1024pix/pix-ui/components/pix-table';
+import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
+import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+
+export default class ChallengesProduction extends Component {
+  get challenges() {
+    return this.args.challenges;
+  }
+
+<template>
+    <section class="challenges-production">
+      <header class="challenges-production__header">
+        <p>
+          {{@skill.name}}
+          <PixTag @color="success">
+            actif
+          </PixTag>
+          <span class="separator"></span>
+          V{{@skill.version}}
+        </p>
+        <div class="challenges-production-header__action-buttons">
+          <PixButton
+            class="challenges-production-header__create-decli-button"
+          >
+            Créer une déclinaison
+          </PixButton>
+          <PixIconButton
+            class="challenges-production-header__button-icon"
+            @ariaLabel="Agrandir la liste des épreuves"
+            @iconName="check"
+          />
+          <span class="separator"></span>
+          <PixIconButton
+            class="challenges-production-header__button-icon"
+            @ariaLabel="Fermer la liste des épreuves"
+            @iconName="close"
+          />
+        </div>
+      </header>
+      <div class="challenges-production--table">
+        <div class="display-actions">
+          <PixCheckbox
+            @size="small"
+          >
+            <:label>Afficher les épreuves périmées</:label>
+          </PixCheckbox>
+          <p>Mode double écran</p>
+        </div>
+        <PixTable @data={{this.challenges}}>
+          <:columns as |challenge context|>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Version
+              </:header>
+              <:cell>
+                {{#if challenge.isPrototype}}
+                  Proto
+                {{else}}
+                  {{challenge.alternativeVersion}}
+                {{/if}}
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Consigne
+              </:header>
+              <:cell>
+                {{challenge.instruction}}
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Dernière MAJ
+              </:header>
+              <:cell>
+                {{challenge.updatedAt}}
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Auteur
+              </:header>
+              <:cell>
+                {{challenge.author}}
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Statut
+              </:header>
+              <:cell>
+                <PixTag @color="success">
+                  {{challenge.status}}
+                </PixTag>
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Locale
+              </:header>
+              <:cell>
+                {{#each challenge.locales as |locale|}}
+                  {{locale}}
+                {{/each}}
+              </:cell>
+            </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:header>
+                Actions
+              </:header>
+              <:cell>
+                <PixIconButton
+                  @ariaLabel="Prévisualiser l'épreuve {{challenge.id}}"
+                  @iconName="eye"
+                />
+                <PixIconButton
+                  @ariaLabel="Copier le lien de l'épreuve {{challenge.id}}"
+                  @iconName="copy"
+                />
+              </:cell>
+            </PixTableColumn>
+          </:columns>
+        </PixTable>
+      </div>
+    </section>
+  </template>
+
+}

pix-editor/app/controllers/authenticated.js

@@ -26,6 +26,7 @@ export default class ApplicationController extends Controller {
   @service store;
   @service window;
   @service session;
+  @service versionManager;
 
   messages = A([]);
 
@@ -59,6 +60,10 @@ export default class ApplicationController extends Controller {
     return (this.router.currentRouteName === 'authenticated.index');
   }
 
+  get isV2() {
+    return this.versionManager.getV2();
+  }
+
   showMessage(content, positive) {
     const messages = this.messages;
     const id = 'message_' + Date.now();

pix-editor/app/router.js

@@ -10,7 +10,9 @@ Router.map(function() {
   this.route('login', { path: 'connexion' });
   this.route('authenticated', { path: '' }, function() {
     this.route('v2', function() {
-      this.route('competence-overview', { path: '/competences/:competence_id/:overview' });
+      this.route('competence-overview', { path: '/competences/:competence_id/:overview' }, function() {
+        this.route('challenges', { path: '/skills/:skill_id/challenges' });
+      });
     });
     this.route('competence', { path: '/competence/:competence_id' }, function() {
       this.route('prototypes', function() {

pix-editor/app/routes/authenticated/v2/competence-overview/challenges.js

@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class SkillRoute extends Route {
+
+  @service router;
+  @service store;
+
+  async model(params) {
+    const challenges = await this.store.findAll('challenge', { adapterOptions: { skillId: params.skill_id } });
+    const skill = await this.store.findRecord('skill', params.skill_id, { adapterOptions: { withPixId: true } });
+
+    return { challenges, skill };
+  }
+}

pix-editor/app/styles/app.scss

@@ -1,3 +1,6 @@
+@use 'authenticated-v2';
+@use 'components/challenges-production';
+
 @charset "utf-8";
 @import 'pix-design-tokens';
 @import 'global';

pix-editor/app/styles/authenticated-v2.scss

@@ -0,0 +1,6 @@
+.v2-main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--pix-neutral-20);
+}

pix-editor/app/styles/components/challenges-production.scss

@@ -0,0 +1,49 @@
+.challenges-production {
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-neutral-900);
+    padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
+
+    p {
+      display: flex;
+      gap: var(--pix-spacing-2x);
+    }
+
+    .separator {
+      height: 24px;
+      width: 1px;
+      border-right: solid 1px var(--pix-neutral-0);
+    }
+  }
+
+  &--table {
+    padding: var(--pix-spacing-6x) var(--pix-spacing-8x);
+  }
+
+  .display-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--pix-spacing-4x);
+  }
+
+  .challenges-production-header {
+
+    &__action-buttons {
+      display: flex;
+      align-items:center;
+      gap: var(--pix-spacing-2x);
+    }
+
+    &__button-icon {
+      color: var(--pix-neutral-0);
+
+      &:hover {
+        background-color: rgba(var(--pix-neutral-500-inline), 0.5);
+      }
+    }
+  }
+}

pix-editor/app/templates/authenticated.hbs

@@ -11,7 +11,7 @@
       </button>
       {{!-- template-lint-enable --}}
     </div>
-    <div class="main" {{on "click" this.closeMenu}}>
+    <div class="{{if this.isV2 "v2-main" "main"}}" {{on "click" this.closeMenu}}>
       {{#if this.isIndex}}
         <div class="main-left">
           <main class="elephant ui attached"></main>

pix-editor/app/templates/authenticated/v2/competence-overview.hbs

@@ -2,3 +2,4 @@
   @competenceOverview={{this.model.competenceOverview}}
   @locale={{this.model.locale}}
 />
+{{outlet}}

pix-editor/app/templates/authenticated/v2/competence-overview/challenges.hbs

@@ -0,0 +1,4 @@
+<CompetenceOverview::ChallengesProduction
+  @skill={{this.model.skill}}
+  @challenges={{this.model.challenges}}
+/>

pix-editor/tests/acceptance/v2/competence-overview/challenges-production_test.js

@@ -1,13 +1,15 @@
 import { clickByText, visit } from '@1024pix/ember-testing-library';
+import { currentURL } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { authenticateSession } from 'ember-simple-auth/test-support';
-import { module, test } from 'qunit';
+import { click, module, test } from 'qunit';
 
 import { setupApplicationTest } from '../../../setup-application-rendering';
 
 module('Acceptance | competences | challenge-production', function(hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  const skillId = 'skill1', skillName = '@tube1', prototypeId = 'prototype1';
 
   hooks.beforeEach(function() {
     window.localStorage.setItem('v2', 'true');
@@ -25,9 +27,9 @@ module('Acceptance | competences | challenge-production', function(hooks) {
           id: 'tube1',
           name: '@tube',
           skillOverviews: [{
-            id: 'skill1',
-            name: '@tube1',
-            prototypeId: 'prototype1',
+            id: skillId,
+            name: skillName,
+            prototypeId,
             isPrototypeDeclinable: true,
             proposedChallengesCount: 1,
             validatedChallengesCount: 1,
@@ -45,9 +47,9 @@ module('Acceptance | competences | challenge-production', function(hooks) {
           id: 'tube1',
           name: '@tube',
           skillOverviews: [{
-            id: 'skill1',
-            name: '@tube1',
-            prototypeId: 'prototype1',
+            id: skillId,
+            name: skillName,
+            prototypeId,
             isPrototypeDeclinable: true,
             proposedChallengesCount: 0,
             validatedChallengesCount: 1,
@@ -76,4 +78,18 @@ module('Acceptance | competences | challenge-production', function(hooks) {
     assert.dom(screen.getByTitle('Nombre d\'épreuves en production')).hasText('1');
     assert.dom(screen.queryByTitle('Nombre d\'épreuves en cours de construction')).doesNotExist();
   });
+
+  test('should display a challenge production list', async function(assert) {
+    // given
+    this.server.create('challenge', { id: prototypeId, status: 'validé', version: 1, alternativeVersion: null, genealogy: 'Prototype 1', instruction: 'instruction' });
+    this.server.create('skill', { id: skillId, challengeIds: [prototypeId] });
+
+    // when
+    const screen = await visit('/v2/competences/competence1/challenges-production');
+    await click(screen.getByRole('link', { name: '@tube1' }));
+
+    // then
+    assert.dom(screen.getByText('instruction'));
+    assert.strictEqual(currentURL(), `/v2/competences/competence1/challenges-production/skills/${skillId}/challenges`);
+  });
 });