Jakob has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/381000 )
Change subject: [WIP] Make lexeme language and lexical category editable.
......................................................................
[WIP] Make lexeme language and lexical category editable.
* created LexemeHeaderWidget with subcomponents:
* LemmaWidget
* LanguageAndLexicalCategoryWidget
TODO:
- tests
- some file names don't make much sense anymore
- saving is broken
- lexeme ID missing
- UI doesn't look the way it should
Bug: T168298
Change-Id: I7e756d868e6502d4fe8a3f6d5e322caf2dc4d5ed
---
M extension.json
M package.json
A resources/widgets/LanguageAndLexicalCategoryWidget.js
M resources/widgets/LemmaWidget.js
M resources/widgets/LemmaWidget.newLemmaWidget.js
M resources/widgets/LemmaWidget.newLemmaWidgetStore.js
A resources/widgets/LexemeHeader.newLexemeHeader.js
M src/View/LexemeView.php
8 files changed, 212 insertions(+), 51 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/WikibaseLexeme
refs/changes/00/381000/1
diff --git a/extension.json b/extension.json
index ad5163b..fecb853 100644
--- a/extension.json
+++ b/extension.json
@@ -53,7 +53,7 @@
"jquery.wikibase.lexemeformlistview",
"jquery.wikibase.senselistview",
"wikibase.lexeme.view.ControllerViewFactory",
- "lemma-widget"
+ "lexeme-header"
]
},
"wikibase.lexeme": {
@@ -132,11 +132,13 @@
"promise-polyfill": {
"scripts":"vendor/es6-promise.auto.js"
},
- "lemma-widget":{
+ "lexeme-header":{
"scripts": "widgets/LemmaWidget.js",
"dependencies": [
"vue",
"vuex",
+
"wikibase.lexeme.widgets.LanguageAndLexicalCategoryWidget",
+
"wikibase.lexeme.widgets.LexemeHeader.newLexemeHeader",
"wikibase.lexeme.widgets.LemmaWidget.newLemmaWidgetStore",
"wikibase.lexeme.widgets.LemmaWidget.newLemmaWidget",
"wikibase.api.RepoApi",
@@ -191,6 +193,12 @@
"wikibase.lexeme.datamodel.Lemma"
]
},
+ "wikibase.lexeme.widgets.LexemeHeader.newLexemeHeader": {
+ "scripts": "widgets/LexemeHeader.newLexemeHeader.js"
+ },
+ "wikibase.lexeme.widgets.LanguageAndLexicalCategoryWidget": {
+ "scripts": "widgets/LanguageAndLexicalCategoryWidget.js"
+ },
"wikibase.templates.lexeme": {
"class": "\\Wikibase\\Lexeme\\View\\TemplateModule",
"dependencies": [
diff --git a/package.json b/package.json
index ea60458..059a091 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
"wikibase.lexeme.widgets.LemmaWidget":
"./resources/widgets/LemmaWidget.js",
"wikibase.lexeme.widgets.LemmaWidget.newLemmaWidget":
"./resources/widgets/LemmaWidget.newLemmaWidget.js",
"wikibase.lexeme.widgets.LemmaWidget.newLemmaWidgetStore":
"./resources/widgets/LemmaWidget.newLemmaWidgetStore.js",
+ "wikibase.lexeme.widgets.LanguageAndLexicalCategoryWidget":
"./resources/widgets/LanguageAndLexicalCategoryWidget.js",
+ "wikibase.lexeme.widgets.LexemeHeader.newLexemeHeader":
"./resources/widgets/LexemeHeader.newLexemeHeader.js",
"wikibase.lexeme.datamodel.Lemma": "./resources/datamodel/Lemma.js"
}
}
diff --git a/resources/widgets/LanguageAndLexicalCategoryWidget.js
b/resources/widgets/LanguageAndLexicalCategoryWidget.js
new file mode 100644
index 0000000..00abe50
--- /dev/null
+++ b/resources/widgets/LanguageAndLexicalCategoryWidget.js
@@ -0,0 +1,21 @@
+module.exports = ( function () {
+ 'use strict';
+
+ /**
+ * @callback wikibase.lexeme.widgets.LanguageAndLexicalCategoryWidget
+ *
+ * @param {string} template - template string or selector
+ */
+ return function ( template, messages ) {
+ return {
+ props: [ 'language', 'lexicalCategory', 'inEditMode',
'isSaving' ],
+ template: template,
+
+ filters: {
+ message: function ( key ) {
+ return messages.get( key );
+ }
+ }
+ };
+ };
+} )();
diff --git a/resources/widgets/LemmaWidget.js b/resources/widgets/LemmaWidget.js
index 9858a7b..b3ab1fb 100644
--- a/resources/widgets/LemmaWidget.js
+++ b/resources/widgets/LemmaWidget.js
@@ -4,6 +4,8 @@
/** @type {wikibase.lexeme.widgets.LemmaWidget.newLemmaWidgetStore} */
var newLemmaWidgetStore = require(
'wikibase.lexeme.widgets.LemmaWidget.newLemmaWidgetStore' );
var newLemmaWidget = require(
'wikibase.lexeme.widgets.LemmaWidget.newLemmaWidget' );
+ var newLanguageAndLexicalCategoryWidget = require(
'wikibase.lexeme.widgets.LanguageAndLexicalCategoryWidget' );
+ var newLexemeHeader = require(
'wikibase.lexeme.widgets.LexemeHeader.newLexemeHeader' );
var Lemma = require( 'wikibase.lexeme.datamodel.Lemma' );
var wbEntity = JSON.parse( mw.config.get( 'wbEntity' ) );
@@ -13,12 +15,30 @@
lemmas.push( new Lemma( lemma.value, lemma.language ) );
} );
+ var lexeme = {
+ lemmas: lemmas,
+ lexicalCategory: wbEntity.lexicalCategory,
+ language: wbEntity.language,
+ id: mw.config.get( 'wbEntityId' )
+ };
+
var repoApi = new wb.api.RepoApi( new mw.Api() );
- var entityId = mw.config.get( 'wbEntityId' );
var baseRevId = mw.config.get( 'wgCurRevisionId' );
- var store = new Vuex.Store( newLemmaWidgetStore( repoApi, lemmas,
entityId, baseRevId ) );
+ var store = new Vuex.Store( newLemmaWidgetStore( repoApi, lexeme,
baseRevId ) );
- var app = new Vue( newLemmaWidget( store, '#lemmas-widget',
'#lemma-widget-vue-template', mw.messages ) );
+ var lemmaWidget = newLemmaWidget( '#lemma-widget-vue-template',
mw.messages );
+ var languageAndLexicalCategoryWidget =
newLanguageAndLexicalCategoryWidget(
+ '#language-and-lexical-category-widget-vue-template',
+ mw.messages
+ );
+ var app = new Vue( newLexemeHeader(
+ store,
+ '#wb-lexeme-header',
+ '#lexeme-header-widget-vue-template',
+ lemmaWidget,
+ languageAndLexicalCategoryWidget,
+ mw.messages
+ ) );
} )( jQuery, mediaWiki, require, wikibase, Vue, Vuex );
diff --git a/resources/widgets/LemmaWidget.newLemmaWidget.js
b/resources/widgets/LemmaWidget.newLemmaWidget.js
index 556bbc4..8b7f954 100644
--- a/resources/widgets/LemmaWidget.newLemmaWidget.js
+++ b/resources/widgets/LemmaWidget.newLemmaWidget.js
@@ -3,15 +3,6 @@
var Lemma = require( 'wikibase.lexeme.datamodel.Lemma' );
- function copyLemmaList( list ) {
- var result = [];
- list.forEach( function ( lemma ) {
- result.push( lemma.copy() );
- } );
-
- return result;
- }
-
/**
* @callback wikibase.lexeme.widgets.LemmaWidget.newComponent
*
@@ -19,41 +10,21 @@
* @param {string} element
* @param {string} template - template string or selector
*/
- return function ( store, element, template, messages ) {
+ return function ( template, messages ) {
return {
- el: element,
+ props: [ 'lemmas', 'inEditMode', 'isSaving' ],
template: template,
- data: {
- isInitialized: true,
- inEditMode: false,
- lemmas: copyLemmaList( store.state.lemmas )
- },
- computed: {
- isSaving: function () {
- return store.state.isSaving;
- }
- },
+
methods: {
- edit: function () {
- this.inEditMode = true;
- },
add: function () {
this.lemmas.push( new Lemma( '', '' ) );
},
remove: function ( lemma ) {
var index = this.lemmas.indexOf( lemma
);
this.lemmas.splice( index, 1 );
- },
- save: function () {
- return store.dispatch( 'save',
this.lemmas ).then( function () {
- this.inEditMode = false;
- }.bind( this ) );
- },
- cancel: function () {
- this.inEditMode = false;
- this.lemmas = copyLemmaList(
store.state.lemmas );
}
},
+
filters: {
message: function ( key ) {
return messages.get( key );
diff --git a/resources/widgets/LemmaWidget.newLemmaWidgetStore.js
b/resources/widgets/LemmaWidget.newLemmaWidgetStore.js
index 73f10af..9ce3f8f 100644
--- a/resources/widgets/LemmaWidget.newLemmaWidgetStore.js
+++ b/resources/widgets/LemmaWidget.newLemmaWidgetStore.js
@@ -31,13 +31,15 @@
* @param {string} entityId
* @param {int} baseRevId
*/
- return function ( repoApi, lemmas, entityId, baseRevId ) {
+ return function ( repoApi, lexeme, baseRevId ) {
return {
strict: true, //FIXME make it configurable
state: {
isSaving: false,
baseRevId: baseRevId,
- lemmas: lemmas
+ lemmas: lexeme.lemmas,
+ language: lexeme.language,
+ lexicalCategory: lexeme.lexicalCategory
},
mutations: {
updateLemmas: function ( state, newLemmas ) {
@@ -62,11 +64,15 @@
var requestLemmas = getRequestLemmas(
context.state.lemmas, lemmas );
- var data = { lemmas: requestLemmas };
+ var data = {
+ lemmas: requestLemmas,
+ language:
context.state.language,
+ lexicalCategory:
context.state.lexicalCategory
+ };
var clear = false;
return repoApi.editEntity(
- entityId,
+ lexeme.id,
context.state.baseRevId,
data,
clear
diff --git a/resources/widgets/LexemeHeader.newLexemeHeader.js
b/resources/widgets/LexemeHeader.newLexemeHeader.js
new file mode 100644
index 0000000..89ed883
--- /dev/null
+++ b/resources/widgets/LexemeHeader.newLexemeHeader.js
@@ -0,0 +1,69 @@
+module.exports = ( function () {
+ 'use strict';
+
+ function copyLemmaList( list ) {
+ var result = [];
+ list.forEach( function ( lemma ) {
+ result.push( lemma.copy() );
+ } );
+
+ return result;
+ }
+
+ /**
+ * @callback wikibase.lexeme.widgets.LemmaWidget.newComponent
+ *
+ * @param {Vuex.Store} store
+ * @param {string} element
+ * @param {string} template - template string or selector
+ * @param {Object} messages - mw.messages localization service
+ */
+ return function ( store, element, template, lemmaWidget,
languageAndCategoryWidget, messages ) {
+ return {
+ el: element,
+ template: template,
+
+ data: {
+ isInitialized: true,
+ inEditMode: false,
+ lemmas: copyLemmaList( store.state.lemmas ),
+ language: store.state.language,
+ lexicalCategory: store.state.lexicalCategory
+ },
+
+ methods: {
+ save: function () {
+ return store.dispatch( 'save',
this.lemmas ).then( function () {
+ this.inEditMode = false;
+ }.bind( this ) );
+ },
+
+ edit: function () {
+ this.inEditMode = true;
+ },
+
+ cancel: function () {
+ this.inEditMode = false;
+ this.lemmas = copyLemmaList(
store.state.lemmas );
+ }
+ },
+
+ computed: {
+ isSaving: function () {
+ return store.state.isSaving;
+ }
+ },
+
+ components: {
+ 'lemma-widget': lemmaWidget,
+ 'language-and-category-widget':
languageAndCategoryWidget
+ },
+
+ filters: {
+ message: function ( key ) {
+ return messages.get( key );
+ }
+ }
+ };
+ };
+} )();
diff --git a/src/View/LexemeView.php b/src/View/LexemeView.php
index 6c9155a..e1c04d6 100644
--- a/src/View/LexemeView.php
+++ b/src/View/LexemeView.php
@@ -118,7 +118,8 @@
HTML;
return $lexemeHeader
- . $this->getHtmlForLexicalCategoryAndLanguage( $entity )
+ . $this->getLexemeHeaderVueTemplate()
+ . $this->getLanguageAndLexicalCategoryVueTemplate()
. $this->templateFactory->render( 'wikibase-toc' )
. $this->statementSectionsView->getHtml(
$entity->getStatements() )
. $this->formsView->getHtml( $entity->getForms() )
@@ -244,6 +245,77 @@
HTML;
}
+ private function getLexemeHeaderVueTemplate() {
+ return <<<HTML
+<script id="lexeme-header-widget-vue-template" type="x-template">
+ {$this->getRawLexemeHeaderVueTemplate()}
+</script>
+HTML;
+ }
+
+ private function getLanguageAndLexicalCategoryVueTemplate() {
+ return <<<HTML
+<script id="language-and-lexical-category-widget-vue-template"
type="x-template">
+ {$this->getRawLanguageAndLexicalCategoryWidgetVueTemplate()}
+</script>
+HTML;
+ }
+
+ private function getRawLexemeHeaderVueTemplate() {
+ return <<<'HTML'
+<div>
+ <h1 id="wb-lexeme-header" class="wb-lexeme-header">
+ <div class="wb-lexeme-header_id">ID GOES HERE</div>
+ <div class="wb-lexeme-header_lemma-widget">
+ <lemma-widget :lemmas="lemmas" :inEditMode="inEditMode"
:isSaving="isSaving"></lemma-widget>
+ </div>
+ <div class="lemma-widget_controls" v-if="isInitialized" >
+ <button type="button" class="lemma-widget_edit"
v-if="!inEditMode"
+ :disabled="isSaving"
v-on:click="edit">{{'wikibase-edit'|message}}</button>
+ <button type="button" class="lemma-widget_save"
v-if="inEditMode"
+ :disabled="isSaving"
v-on:click="save">{{'wikibase-save'|message}}</button>
+ <button type="button" class="lemma-widget_cancel"
v-if="inEditMode"
+ :disabled="isSaving"
v-on:click="cancel">{{'wikibase-cancel'|message}}</button>
+ </div>
+ </h1>
+ <language-and-category-widget
+ :language="language"
+ :lexicalCategory="lexicalCategory"
+ :inEditMode="inEditMode"
+ :isSaving="isSaving">
+ </language-and-category-widget>
+</div>
+HTML;
+ }
+
+ private function getRawLanguageAndLexicalCategoryWidgetVueTemplate() {
+ return <<<'HTML'
+<div class="language-lexical-category-widget">
+ <div v-if="!inEditMode">
+ <div>
+ <span>{{'wikibase-language'|message}}</span>
+ <span>{{language}}</span>
+ </div>
+ <div>
+ <span>{{'wikibase-lexical-category'|message}}</span>
+ <span>lex cat goes here</span>
+ </div>
+ </div>
+ <div v-else>
+ <div>
+ <label
for="lemma-language">{{'wikibase-language'|message}}</label>
+ <input type="text" id="lemma-language"
v-model="language">
+ </div>
+ <div>
+ <label
for="lemma-lexical-category">{{'wikibase-lexical-category'|message}}</label>
+ <input type="text" id="lemma-lexical-category">
+ </div>
+ </div>
+</div>
+HTML;
+
+ }
+
private function getRawLemmaVueTemplate() {
return <<<'HTML'
<div class="lemma-widget">
@@ -276,14 +348,6 @@
:disabled="isSaving"
:title="'wikibase-add'|message">+</button>
</li>
</ul>
- </div>
- <div class="lemma-widget_controls" v-if="isInitialized" >
- <button type="button" class="lemma-widget_edit"
v-if="!inEditMode"
- :disabled="isSaving"
v-on:click="edit">{{'wikibase-edit'|message}}</button>
- <button type="button" class="lemma-widget_save"
v-if="inEditMode"
- :disabled="isSaving"
v-on:click="save">{{'wikibase-save'|message}}</button>
- <button type="button" class="lemma-widget_cancel"
v-if="inEditMode"
- :disabled="isSaving"
v-on:click="cancel">{{'wikibase-cancel'|message}}</button>
</div>
</div>
HTML;
--
To view, visit https://gerrit.wikimedia.org/r/381000
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7e756d868e6502d4fe8a3f6d5e322caf2dc4d5ed
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/WikibaseLexeme
Gerrit-Branch: master
Gerrit-Owner: Jakob <jakob.warkot...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
