Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Ajout d'une interface de merge pour les contenus #4151

Closed
wants to merge 97 commits into from

Conversation

Anto59290
Copy link
Contributor

Q R
Type de modification nouvelle fonctionnalité / évolution
Ticket(s) (issue(s)) concerné(s) #3251 #1898

Je vous propose cette fonctionnalité pour régler le problème d'écrasement lors de l'édition concurrente. Pour l'instant je ne l'ai ajouté que sur l'édition de contenu (content edit). Pour l'utiliser il faut donc éditer l'intro et/ou la conclusion d'un tuto (et non un containeur ou d'une section) depuis deux onglets différents.

merge

C'est encore un travail en cours, mais j'aimerais votre feedback avant d'aller plus loin. La méthode proposé est normalement assez facile à dupliquer pour les autres champs. Graphiquement on est assez proche de ce que j'imaginais, il me reste juste à virer la barre violette à droite des champs. Merci d'avance de vos retours.

QA

  • Installer les nouveaux paquets, reconstruire le front
  • Editer un tuto dans l'onglet A
  • Editer un tuto dans l'onglet B
  • Valider l'édition dans l'onglet A
  • Valider l'édition dans l'onglet B
  • Dans l'onglet B vous devez tomber sur l'interface de merge, qui normalement fonctionne. Le bouton merge n'envoi pas le formulaire, il faut donc toujours cliquer sur le bouton Envoyer en bas de la page.

Copy link
Member

@artragis artragis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

c'est une review rapide. Mais cette fonctionnalité est cool. J'essaierai, demain, de builder ça pour voir ce que ça donne.

else:
self.helper.layout.append(Layout(Field('introduction', css_class='md-editor')))

if kwargs.get('data') is not None:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

il te manque un , None pour forcer le get à te donner une valeur par défaut.

Field('conclusion', css_class='md-editor'),
Field('image'))

if kwargs.get('data') is not None:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pourquoi la condition apparaît-elle deux fois?

setValue(left.html());
},
rhs: function(setValue) {
setValue(right.text());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

peux-tu mettre un commentaire dans le code pour expliquer pourquoi on a "html" d'un côté et "text" de l'autre stp?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bien vu, j'ai uniformisé car il n'y avait pas de raison en particulier.

@pierre-24
Copy link
Member

pierre-24 commented Jan 12, 2017

Mmh. Ça a peut être rien à voir, mais je coince à la première étape :

(zdsenv)pbeaujea@chim13-cptrx04 ~/Devels/zds-site $ npm install
/
> optipng-bin@3.1.2 postinstall /home/pbeaujea/Devels/zds-site/node_modules/gulp-imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> gifsicle@3.0.4 postinstall /home/pbeaujea/Devels/zds-site/node_modules/gulp-imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully

> jpegtran-bin@3.2.0 postinstall /home/pbeaujea/Devels/zds-site/node_modules/gulp-imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully
gulp-concat@2.6.1 node_modules/gulp-concat
├── concat-with-sourcemaps@1.0.4 (source-map@0.5.6)
├── vinyl@2.0.1 (is-stream@1.1.0, replace-ext@1.0.0, clone-buffer@1.0.0, clone-stats@1.0.0, remove-trailing-separator@1.0.1, clone@1.0.2, cloneable-readable@1.0.0)
└── through2@2.0.3 (xtend@4.0.1, readable-stream@2.2.2)

gulp-sourcemaps@1.9.1 node_modules/gulp-sourcemaps
├── detect-newline@2.1.0
├── graceful-fs@4.1.11
├── convert-source-map@1.3.0
├── strip-bom@2.0.0 (is-utf8@0.2.1)
├── source-map@0.5.6
├── vinyl@1.2.0 (clone-stats@0.0.1, replace-ext@0.0.1, clone@1.0.2)
├── acorn@4.0.4
├── through2@2.0.3 (xtend@4.0.1, readable-stream@2.2.2)
├── debug-fabulous@0.0.4 (object-assign@4.1.0, lazy-debug-legacy@0.0.1, debug@2.6.0)
└── css@2.2.1 (inherits@2.0.3, urix@0.1.0, source-map-resolve@0.3.1, source-map@0.1.43)

jquery@3.1.1 node_modules/jquery

gulp-postcss@6.2.0 node_modules/gulp-postcss
├── vinyl-sourcemaps-apply@0.2.1 (source-map@0.5.6)
├── postcss@5.2.10 (js-base64@2.1.9, supports-color@3.1.2, source-map@0.5.6, chalk@1.1.3)
└── gulp-util@3.0.8 (array-differ@1.0.0, lodash._reescape@3.0.0, object-assign@3.0.0, array-uniq@1.0.3, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.1, dateformat@2.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, minimist@1.2.0, fancy-log@1.3.0, vinyl@0.5.3, gulplog@1.0.0, chalk@1.1.3, lodash.template@3.6.2, through2@2.0.3, multipipe@0.1.2)

jshint@2.9.4 node_modules/jshint
├── strip-json-comments@1.0.4
├── exit@0.1.2
├── console-browserify@1.1.0 (date-now@0.1.4)
├── minimatch@3.0.3 (brace-expansion@1.1.6)
├── shelljs@0.3.0
├── cli@1.0.1 (glob@7.1.1)
├── htmlparser2@3.8.3 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.14, domutils@1.5.1)
└── lodash@3.7.0

autoprefixer@6.5.3 node_modules/autoprefixer
├── normalize-range@0.1.2
├── num2fraction@1.2.2
├── postcss-value-parser@3.3.0
├── browserslist@1.4.0
├── postcss@5.2.10 (js-base64@2.1.9, supports-color@3.1.2, source-map@0.5.6, chalk@1.1.3)
└── caniuse-db@1.0.30000607

cssnano@3.8.1 node_modules/cssnano
├── decamelize@1.2.0
├── object-assign@4.1.0
├── postcss-discard-empty@2.1.0
├── postcss-merge-idents@2.1.7
├── postcss-normalize-charset@1.1.1
├── postcss-discard-duplicates@2.0.2
├── postcss-reduce-transforms@1.0.4
├── postcss-minify-gradients@1.0.5
├── postcss-discard-comments@2.0.4
├── defined@1.0.0
├── postcss-reduce-initial@1.0.1
├── postcss-convert-values@2.6.0
├── postcss-value-parser@3.3.0
├── postcss-minify-font-values@1.0.5
├── postcss-discard-overridden@0.1.1
├── postcss-reduce-idents@2.4.0
├── postcss-ordered-values@2.2.3
├── postcss-unique-selectors@2.0.2 (uniqs@2.0.0, alphanum-sort@1.0.2)
├── postcss-discard-unused@2.2.3 (uniqs@2.0.0)
├── postcss-minify-params@1.2.2 (uniqs@2.0.0, alphanum-sort@1.0.2)
├── postcss-zindex@2.2.0 (uniqs@2.0.0)
├── postcss-merge-longhand@2.0.1
├── has@1.0.1 (function-bind@1.1.0)
├── postcss-filter-plugins@2.0.2 (uniqid@4.1.1)
├── postcss-normalize-url@3.0.8 (is-absolute-url@2.1.0, normalize-url@1.9.0)
├── postcss-calc@5.3.1 (postcss-message-helpers@2.0.0, reduce-css-calc@1.3.0)
├── postcss-minify-selectors@2.1.1 (alphanum-sort@1.0.2, postcss-selector-parser@2.2.2)
├── postcss@5.2.10 (js-base64@2.1.9, supports-color@3.1.2, source-map@0.5.6, chalk@1.1.3)
├── postcss-colormin@2.2.1 (colormin@1.1.2)
├── postcss-svgo@2.1.6 (is-svg@2.1.0, svgo@0.7.1)
└── postcss-merge-rules@2.1.1 (vendors@1.0.1, postcss-selector-parser@2.2.2, browserslist@1.5.2, caniuse-api@1.5.2)

gulp-jshint@2.0.4 node_modules/gulp-jshint
├── minimatch@3.0.3 (brace-expansion@1.1.6)
├── through2@2.0.3 (xtend@4.0.1, readable-stream@2.2.2)
├── rcloader@0.2.2 (lodash.assign@4.2.0, lodash.isobject@3.0.2, lodash.merge@4.6.0, rcfinder@0.1.9)
├── gulp-util@3.0.8 (array-differ@1.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, object-assign@3.0.0, array-uniq@1.0.3, beeper@1.1.1, dateformat@2.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, minimist@1.2.0, fancy-log@1.3.0, vinyl@0.5.3, gulplog@1.0.0, chalk@1.1.3, lodash.template@3.6.2, multipipe@0.1.2)
└── lodash@4.17.4

gulp-imagemin@3.1.1 node_modules/gulp-imagemin
├── pretty-bytes@4.0.2
├── plur@2.1.2 (irregular-plurals@1.2.0)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, has-ansi@2.0.0, strip-ansi@3.0.1)
├── through2-concurrent@1.1.1 (through2@2.0.3)
├── imagemin@5.2.2 (pify@2.3.0, file-type@3.9.0, promise.pipe@3.0.0, replace-ext@0.0.1, mkdirp@0.5.1, globby@5.0.0)
├── gulp-util@3.0.8 (array-differ@1.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, array-uniq@1.0.3, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.1, dateformat@2.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, fancy-log@1.3.0, minimist@1.2.0, vinyl@0.5.3, lodash.template@3.6.2, gulplog@1.0.0, through2@2.0.3, multipipe@0.1.2)
├── imagemin-svgo@5.2.0 (is-svg@2.1.0, svgo@0.7.1)
├── imagemin-optipng@5.2.1 (is-png@1.0.0, exec-buffer@3.1.0, optipng-bin@3.1.2)
├── imagemin-gifsicle@5.1.0 (is-gif@1.0.0, exec-buffer@3.1.0, gifsicle@3.0.4)
└── imagemin-jpegtran@5.0.2 (is-jpg@1.0.0, exec-buffer@3.1.0, jpegtran-bin@3.2.0)
(zdsenv)pbeaujea@chim13-cptrx04 ~/Devels/zds-site $ make build-front 
npm run build

> zds-site@0.2.0 build /home/pbeaujea/Devels/zds-site
> gulp build

[20:42:05] Using gulpfile ~/Devels/zds-site/Gulpfile.js
[20:42:05] Starting 'css:sprite'...
[20:42:06] Starting 'css:vendors'...
[20:42:06] Starting 'js'...
[20:42:06] 'js' errored after 2.34 ms
[20:42:06] Error: Cannot find module 'codemirror'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.require.resolve (internal/module.js:16:19)
    at Gulp.<anonymous> (/home/pbeaujea/Devels/zds-site/Gulpfile.js:48:17)
    at module.exports (/home/pbeaujea/Devels/zds-site/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/pbeaujea/Devels/zds-site/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/pbeaujea/Devels/zds-site/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/pbeaujea/Devels/zds-site/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /home/pbeaujea/Devels/zds-site/node_modules/gulp/bin/gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:436:9)
    at process._tickCallback (node.js:365:13)
[20:42:06] Finished 'css:vendors' after 36 ms
[20:42:07] Finished 'css:sprite' after 1.01 s

npm ERR! Linux 3.13.0-37-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v4.7.2
npm ERR! npm  v2.15.11
npm ERR! code ELIFECYCLE
npm ERR! zds-site@0.2.0 build: `gulp build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the zds-site@0.2.0 build script 'gulp build'.
npm ERR! This is most likely a problem with the zds-site package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs zds-site
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls zds-site
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/pbeaujea/Devels/zds-site/npm-debug.log
make: *** [build-front] Error 1

(en plus, ça mentionne pas ton nouveau package, donc c'est décidément moi qui me plante quelque part)

@Anto59290
Copy link
Contributor Author

Si codemirror est un nouveau package, c'est une dépendance de mergely. J'ai peut être oublié quelques chose de mon côté. Si tu veut tester en contournant le problème tu peut faire un nom install mergely ce qui installera tout, le temps que je trouve une solution.

@artragis
Copy link
Member

artragis commented Jan 12, 2017 via email

@Anto59290
Copy link
Contributor Author

Exact.

/**
* Sets up the merge interface (using mergely).
*/
function mergelySetUp(div, left, right)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

peux-tu mettre un $ devant chaque variable (car c'est du jQuery).
De même, peux-tu changer le nom pour que ça soit plus proche du sens "fonctionnel" c'est à dire $local et $remote au lieu de left et right. du moins je pense (@vhf tu en dis quoi?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pourquoi pas changer le nom. Après local et remote c'est une convention pour nous (car le code actuel écrase), par sur que ça soit clair nom plus... Je vais détailler les commentaires avant pour expliquer les paramètres.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Effectivement les variables jQuery doivent être préfixées par $. Je te fais vite un exemple :

var $lala = $('.foo').find('.bar').get(1);
var baz = $lala.val();

Je sais pas comment nommer idéalement left et right. Si c'est côté JS qu'on charge les contenus à afficher à gauche et à droite, c'est côté JS qu'on sait quelle version risque d'écraser quelle version, et c'est sur ça qu'on devrait se baser pour nommer explicitement ces paramètres. Genre au lieu de left on pourrait avoir currentVersion et au lieu de right on aurait submittedVersion. Un truc dans ce genre. Ça a du sens pour vous ?

e.preventDefault();

var button = $(this);
var classList = button.attr("class").split(/\s+/);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hum pas sûr que ça soit la méthode la plus facile d'autant qu'il existe déjà l'attribut classList (this.classList).
Ensuite plutôt qu'un simple for, je suis d'avis d'utiliser un this.classList.forEach(function(){...}/

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

De mémoire .classList à un support limité (voir inexistant) avec < IE9, d'où le choix de .attr.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on ne supporte que IE 11 et supérieur, chrome last, firefox last, safari last.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ca marche alors ;)

@zestedesavoir zestedesavoir deleted a comment from coveralls Nov 5, 2017
@zestedesavoir zestedesavoir deleted a comment from coveralls Nov 5, 2017
zds/tutorialv2/forms.py Outdated Show resolved Hide resolved
@Anto59290
Copy link
Contributor Author

Je sais pas pourquoi le linting en Js ne passe pas, c'est assez étrange:

'CodeMirror' is not defined.

@zestedesavoir zestedesavoir deleted a comment from coveralls Nov 5, 2017
@zestedesavoir zestedesavoir deleted a comment from coveralls Nov 5, 2017
@zestedesavoir zestedesavoir deleted a comment from coveralls Nov 5, 2017
@motet-a
Copy link
Contributor

motet-a commented Nov 5, 2017

@Anto59290 C’est normal que jshint râle là-dessus. Utilise window.CodeMirror à la place de CodeMirror et ça marchera.

@coveralls
Copy link

coveralls commented Jan 1, 2018

Coverage Status

Coverage increased (+0.009%) to 89.54% when pulling 21255b0 on Anto59290:3251_git_diff_2 into f5e3376 on zestedesavoir:dev.

@zestedesavoir zestedesavoir deleted a comment from coveralls Jan 6, 2018
@zestedesavoir zestedesavoir deleted a comment from coveralls Jan 6, 2018
@zestedesavoir zestedesavoir deleted a comment from coveralls Jan 6, 2018
@zestedesavoir zestedesavoir deleted a comment from coveralls Jan 6, 2018
@Situphen
Copy link
Member

Je ferme mais n'hésite pas à réouvrir quand tu auras du temps pour la finir ! :)

@Situphen Situphen closed this Sep 11, 2018
@artragis
Copy link
Member

argl, a-t-on une idée de si ça reviendra un jour?

@Anto59290
Copy link
Contributor Author

👋 Au moment ou tu avais approve il restait juste de la QA et un peu de bugfix a faire il me semble. Mais dans l'ensemble tout était OK si mes souvenirs sont bons.

@artragis
Copy link
Member

ok, donc tu peux rouvrir et rebase stp?

@Vanadiae
Copy link
Contributor

Vanadiae commented Jul 2, 2019

On en est où ici @Anto59290 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C-Front Concerne l'interface du site
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet