- Migration de la vue document de la fiche activité de POI vers VUE-CLI (387946ab) · Commits · open-source / oscar

.gitignore

+3 −0

Original line number	Diff line number	Diff line
		@@ -29,6 +29,9 @@ public/js/oscar/dist/index.html
		public/js/oscar/dist/client.css
		public/js/oscar/dist/client.css.map

		# VUE CLI
		public/js/oscar/dist/demo.html

		doc/*.html

		# Connecteurs

front/gulpfile.js

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		const { watch, src, dest } = require('gulp');
		const exec = require('child_process').exec;

		const pathModuleSrc = './src/';
		const pathModuleDest = './../public/js/oscar/dist/'

		function defaultTask(cb) {
		console.log("No default task");
		cb();
		}

		function compile(module){
		let moduleSrc = pathModuleSrc + module + ".vue";
		let moduleDest = pathModuleDest;
		console.log("Compile ", module, " from ", moduleSrc, " to ", moduleDest);
		exec("node node_modules/.bin/vue-cli-service build --name "+module+" --dest " + moduleDest + " --no-clean --formats umd,umd-min --target lib " + moduleSrc);
		}

		function activityDocument(cb) {
		compile("ActivityDocument");
		cb();
		}

		exports.activityDocument = activityDocument;
		exports.activityDocumentWatch = function(cb){
		watch(pathModuleSrc + "ActivityDocument.vue", activityDocument);
		}

		exports.default = defaultTask;
		No newline at end of file

front/package-lock.json

0 → 100644

+19839 −0

File added.

Preview size limit exceeded, changes collapsed.

front/package.json

0 → 100644

+28 −0

Original line number	Diff line number	Diff line
		{
		"name": "oscar-ui",
		"version": "1.0.0",
		"description": "Logiciel de gestion de l'activité de recherche",
		"main": "index.js",
		"directories": {
		"doc": "doc",
		"test": "tests"
		},
		"scripts": {
		"build-activitydocument": "node node_modules/.bin/vue-cli-service build --name ActivityDocument --dest ../public/js/oscar/dist --no-clean --formats umd,umd-min --target lib src/ActivityDocument.vue",
		"watch-activitydocument": "node node_modules/.bin/vue-cli-service serve --name ActivityDocument --dest ../public/js/oscar/dist --no-clean --formats umd,umd-min --target lib src/ActivityDocument.vue"
		},
		"repository": {
		"type": "git",
		"url": "https://git.unicaen.fr/open-source/oscar.git"
		},
		"author": "",
		"license": "ISC",
		"devDependencies": {
		"@vue/cli": "^4.5.9",
		"@vue/cli-service-global": "^4.5.9",
		"@vue/composition-api": "^1.0.0-beta.21",
		"gulp": "^4.0.2",
		"vue-loader": "^15.9.5",
		"vue-template-compiler": "^2.6.12"
		}
		}

front/src/ActivityDocument.vue

0 → 100644

+227 −0

Original line number	Diff line number	Diff line
		<template>
		<section>
		<div class="overlay" v-if="deleteData">
		<div class="overlay-content">
		<h2>
		Suppression du fichier ?
		<span class="overlay-closer" @click="deleteData = null">X</span>
		</h2>
		<p class="alert-danger alert">
		<i class="icon-attention-1"></i>
		Souhaitez-vous supprimer le fichier <strong>{{ deleteData.fileName }}</strong> ?
		</p>
		<button class="btn btn-danger" @click="deleteData = null">
		<i class="icon-cancel-alt"></i> Annuler
		</button>
		<a class="btn btn-success" :href="deleteData.urlDelete">
		<i class="icon-valid"></i> Confirmer
		</a>
		</div>
		</div>
		<div>
		<div class="oscar-sorter">
		<i class=" icon-sort"></i>
		Tier les résultats par :
		<a @click.prevent="order('dateUpload')" href="#" :class="cssSort('dateUpload')" class="oscar-sorter-item">
		Date d'upload
		<i class="icon-angle-down" v-show="sortDirection == 1"></i>
		<i class="icon-angle-up" v-show="sortDirection == -1"></i>
		</a>
		<a @click.prevent="order('fileName')" href="#" :class="cssSort('fileName')" class="oscar-sorter-item">
		Nom du fichier
		<i class="icon-angle-down" v-show="sortDirection == 1"></i>
		<i class="icon-angle-up" v-show="sortDirection == -1"></i>
		</a>
		<a @click.prevent="order('categoryText')" href="#" :class="cssSort('categoryText')" class="oscar-sorter-item">
		Type de document
		<i class="icon-angle-down" v-show="sortDirection == 1"></i>
		<i class="icon-angle-up" v-show="sortDirection == -1"></i>
		</a>
		</div>
		</div>

		<article class="card xs" v-for="document in documentsPacked">
		<div class="card-title">
		<i class="picto icon-doc" :class="'doc' + document.extension"></i>

		<template v-if="document.editmode">
		<select @change="changeTypeDocument(document, $event)" @blur="document.editmode = false">
		<option :value="key" v-for="(documentType, key) in documentTypes" :selected="document.categoryText == documentType">{{ documentType }}</option>
		</select>
		</template>
		<template v-else>
		<small class="text-light" @dblclick="document.editmode = true">{{ document.categoryText }} ~ </small>
		</template>


		<strong>{{document.fileName}}</strong>
		<small class="text-light" :title="document.fileSize + ' octet(s)'"> ({{document.fileSize \| filesize}})</small>
		</div>
		<p>
		{{ document.information }}
		</p>
		<div class="card-content">
		<p class="text-highlight">
		Fichier <strong>{{ document.extension}}</strong>
		version {{ document.version }},
		téléversé le <time>{{ document.dateUpload \| dateFull }}</time>
		<span v-if="document.uploader">
		par <strong>{{ document.uploader.displayname }}</strong>
		</span>
		</p>
		<div class="exploder" v-if="document.previous.length" @click="document.explode = !document.explode">
		Versions précédentes <i class="icon-angle-down" v-show="!document.explode"></i>
		<i class="icon-angle-up" v-show="document.explode"></i>
		</div>
		<div v-if="document.previous.length" v-show="document.explode">
		<article v-for="sub in document.previous" class="subdoc text-highlight">
		<i class="picto icon-doc" :class="'doc' + sub.extension"></i>

		<strong>{{ sub.fileName }}</strong>
		version <em>{{ sub.version }} </em>,
		téléchargé le <time>{{ sub.dateUpload \| dateFullSort }}</time>
		<span v-if="sub.uploader">
		par <strong>{{ sub.uploader.displayname }}</strong>
		</span>

		<a :href="sub.urlDownload">
		<i class="icon-download-outline"></i>
		Télécharger cette version
		</a>
		</article>
		</div>
		<nav class="text-right show-over">
		<a class="btn btn-default btn-xs" :href="document.urlDownload" v-if="document.urlDownload">
		<i class="icon-download-outline"></i>
		Télécharger le fichier
		</a>

		<a class="btn btn-default btn-xs" :href="document.urlReupload" v-if="document.urlReupload">
		<i class="icon-download-outline"></i>
		Nouvelle version
		</a>

		<a class="btn btn-default btn-xs" @click.prevent="deleteDocument(document)">
		<i class="icon-trash"></i>
		supprimer le fichier
		</a>
		</nav>
		</div>
		</article>
		</section>
		</template>
		<script>

		export default {

		setup(){
		console.log("Setup")
		},

		props: {
		url: { required: true },
		documentTypes: { required: true },
		urlDocumentType: { required: true }
		},

		data(){
		return {
		formData: null,
		error: null,
		deleteData: null,
		documents: [],
		loading: true,
		sortField: 'dateUpload',
		sortDirection: -1,
		editable: true
		}
		},

		computed:{
		/**
		* Retourne les documents triés.
		* @returns {Array}
		*/
		documentsPacked(){
		var out = this.documents.sort( function(a,b) {
		if( a[this.sortField] < b[this.sortField] )
		return -1 * this.sortDirection;
		if( a[this.sortField] > b[this.sortField] )
		return 1 * this.sortDirection;
		return 0;
		}.bind(this));
		return out;
		}
		},

		methods:{
		deleteDocument(document) {
		this.deleteData = document;
		},

		order: function (field) {
		if( this.sortField == field ){
		this.sortDirection *= -1;
		} else {
		this.sortField = field;
		}
		},

		cssSort: function(compare){
		return compare == this.sortField ? "active" : "";
		},

		changeTypeDocument: function( document, event ){
		var newType = $(event.target.selectedOptions[0]).text();

		$.post(this.urlDocumentType, {
		documentId: document.id,
		type: newType
		}).then(ok => {
		flashMessage('success', 'Le document a bien été modifié');
		document.categoryText = newType;
		document.editMode = false;
		this.$forceUpdate();
		//this.$forceUpdate();
		}, error => {
		flashMessage('error', 'Erreur' + error.responseText);
		document.editMode = false;
		});
		},

		fetch(){
		this.$http.get(this.url).then(
		ok => {
		let data = ok.data.datas;
		let documentsOrdered = [];
		let documents = {};

		data.forEach(function(doc){
		doc.categoryText = doc.category ? doc.category.label : "";
		doc.editmode = false;
		doc.explode = false;
		var filename = doc.fileName;
		if( ! documents[filename] ){
		documents[filename] = doc;
		documents[filename].previous = [];
		documentsOrdered.push(doc);
		} else {
		documents[filename].previous.push(doc);
		}
		});
		this.documents = documentsOrdered;
		},
		ko => {
		console.log("ERROR", ko);
		}
		)

		}
		},

		mounted(){
		this.fetch();
		}

		}
		</script>
		No newline at end of file