Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@
/public/packs
/public/packs-test

# Vue i18n messages generated at boot (cf. config/initializers/vue_i18n.rb)
/public/vue/*.json

# Ignore some JS stuff
/node_modules
/yarn-error.log
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ def index
@feature_nav = 'navigation/admin/communication/files'
end

def picker
@picker = Communication::File::Picker.new(
objects: @files,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

est-ce-qu'il faudrait pas simplement que les pickers se basent sur l'université en paramètre? je trouve que ça allège

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

à la place de @files ? Je comprends pas.

language: current_language,
params: params
)
end

def show
@contexts = @l10n.contexts
breadcrumb
Expand All @@ -30,10 +38,6 @@ def direct_upload
@file = @localization.file
end

def pick
# TODO generic picker
end

def edit
@categories = categories
breadcrumb
Expand Down
21 changes: 13 additions & 8 deletions app/javascript/apps/blocks-editor/components/Editor.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<script>
import { createApp, provide, reactive } from 'vue';
import { VueDraggableNext } from 'vue-draggable-next';
import { getI18n } from '../../i18n';
import RichTextInput from './inputs/RichTextInput.vue';
import CodeInput from './inputs/CodeInput.vue';
import UploadInput from './inputs/UploadInput.vue';
import FileUploadInput from './inputs/FileUploadInput.vue';
import MultiImageInput from './inputs/MultiImageInput.vue';
import Picker from '../../picker/Picker.vue';

// Renders the block-edit form fetched from the server, mounts a fresh inner
// Vue app on it for reactive v-model bindings, and unmounts on close.
Expand Down Expand Up @@ -54,13 +56,13 @@ export default {
const root = doc.querySelector('[data-editor-form-root]');
this.html = root ? root.outerHTML : '';
await this.$nextTick();
this.mountInner();
await this.mountInner();
} finally {
this.loading = false;
}
},

mountInner() {
async mountInner() {
const container = this.$refs.container;
if (!container) return;
const root = container.querySelector('[data-editor-form-root]');
Expand All @@ -70,13 +72,14 @@ export default {
// takes the element's innerHTML as its template, compiles it, then
// replaces the element's children with the rendered output — any
// listener attached beforehand would be discarded with the old DOM.
this.mountVueApp(root);
await this.mountVueApp(root);
this.wireForm(root);
this.wireCancelButtons(root);
},

mountVueApp(root) {
async mountVueApp(root) {
const payload = JSON.parse(root.dataset.payload);
const i18n = await getI18n();
this.innerApp = createApp({
setup() {
// Reactive state + helpers exposed to the server-rendered Vue
Expand Down Expand Up @@ -143,12 +146,14 @@ export default {
},
});

this.innerApp.component('draggable', VueDraggableNext);
this.innerApp.component('RichTextInput', RichTextInput);
this.innerApp.use(i18n);
this.innerApp.component('CodeInput', CodeInput);
this.innerApp.component('UploadInput', UploadInput);
this.innerApp.component('draggable', VueDraggableNext);
this.innerApp.component('FileUploadInput', FileUploadInput);
this.innerApp.component('MultiImageInput', MultiImageInput);
this.innerApp.component('Picker', Picker);
this.innerApp.component('RichTextInput', RichTextInput);
this.innerApp.component('UploadInput', UploadInput);

this.innerApp.mount(root);
},
Expand Down Expand Up @@ -195,7 +200,7 @@ export default {
this.cleanup();
this.html = fresh.outerHTML;
await this.$nextTick();
this.mountInner();
await this.mountInner();
}
}
},
Expand Down
30 changes: 30 additions & 0 deletions app/javascript/apps/i18n.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { createI18n } from 'vue-i18n';

// Les locales sont transformées en fichier JSON dans :
// app/assets/builds/vue/<locale>.json
// La transformation se fait dans :
// config/initializers/vue_i18n.rb
// Les fichiers JSON passent ensuite par Sprockets pour gérer le cache correctement.
// Le chemin des fichiers est passé en data-attribute :
// <html data-vue-i18n-path="/assets/vue/fr-8fe2c104baca4af3181348aafbd2e7877701c6f684d62f090f41597aa7b0d78a.json">
let i18nPromise = null;

export function getI18n() {
if (!i18nPromise) {
i18nPromise = (async () => {
const locale = document.documentElement.lang || 'fr';
const path = document.documentElement.dataset.vueI18nPath;
const messages = await fetch(path)
.then((res) => res.json())
.catch(() => ({}));
return createI18n({
legacy: false,
globalInjection: true,
locale,
fallbackLocale: 'fr',
messages: { [locale]: messages },
});
})();
}
return i18nPromise;
}
19 changes: 4 additions & 15 deletions app/javascript/apps/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,13 @@
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { getI18n } from './i18n';
import SsoMappingApp from './sso-mapping/SsoMappingApp.vue';
import MediaPickerApp from './media-picker/MediaPickerApp.vue';
import TimeSlotsApp from './time-slots/TimeSlotsApp.vue';
import BlocksEditorApp from './blocks-editor/BlocksEditorApp.vue';
import PickerTestApp from './picker/PickerTestApp.vue';

// Messages are precompiled at boot into public/vue/<locale>.json (cf.
// config/initializers/vue_i18n.rb) and fetched once as a cacheable static file,
// then shared by every app through a single vue-i18n instance.
async function boot() {
const locale = document.documentElement.lang || 'fr';
const messages = await fetch(`/vue/${locale}.json`)
.then((res) => res.json())
.catch(() => ({}));
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale,
fallbackLocale: 'fr',
messages: { [locale]: messages },
});
const i18n = await getI18n();

const mount = (App, selector) => {
if (document.querySelector(selector)) {
Expand All @@ -31,6 +19,7 @@ async function boot() {
mount(MediaPickerApp, '#media-picker-app');
mount(TimeSlotsApp, '#time-slots-app');
mount(BlocksEditorApp, '#blocks-editor-app');
mount(PickerTestApp, '#picker-test-app');
}

boot();
135 changes: 135 additions & 0 deletions app/javascript/apps/picker/Picker.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<script>
import { File } from '@lucide/vue';
import Pagination from './components/Pagination.vue';
import Parameters from './components/Parameters.vue';
import Results from './components/Results.vue';

export default {
name: 'Picker',
components: {
File,
Pagination,
Parameters,
Results,
},
props: [
'modelValue',
'endpoint',
'kind',
],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
}
}
},
data () {
return {
modalOpened: false,
url: '',
data: {},
parameters: {},
pagination: {},
results: {},
}
},
methods: {
open() {
if (this.modalOpened) {
return;
}
this.modalOpened = true;
document.body.classList.add("modal-open");
this.search();
},
close() {
if (!this.modalOpened) {
return;
}
this.modalOpened = false;
document.body.classList.remove("modal-open");
},
search() {
var xhr = new XMLHttpRequest(),
data;
this.buildUrl();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
this.data = JSON.parse(xhr.responseText);
this.parameters = this.data.parameters;
this.pagination = this.data.pagination;
this.results = this.data.results;
}
Comment on lines +62 to +67

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

ça manque de la gestion d'erreurs

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

oui !

}.bind(this);
xhr.open("GET", this.url, false);
xhr.send();
},
buildUrl() {
this.url = this.endpoint + '?';
if (this.parameters) {
this.url += this.parameters.query_parameters;
}
if (this.pagination) {
this.url += this.pagination.query_parameters;
}
},
select(object) {
this.value = object.data;
this.close();
},
},
};
</script>

<template>
<section
class="vue__picker"
@keydown.esc="close">
<button class="btn btn-sm mx-n2 d-flex align-items-center"
@click.prevent="open">
<File stroke-width="1.5" class="me-1" />
{{ $t(`picker.kind.${kind}.button`) }}
</button>
<div class="modal"
tabindex="-1"
role="dialog"
:class="{'d-block': modalOpened}">
<div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="col-auto d-none d-lg-block ">
<h1 class="h4 modal-title">{{ $t(`picker.kind.${kind}.modal.title`) }}</h1>
</div>
<button
type="button"
class="btn-close"
@click="close">
</button>
</div>
<div class="modal-body overflow-x-hidden">
<div class="row">
<div class="col-md-2">
<Parameters
:parameters="parameters"
@change="search" />
</div>
<div class="offset-md-1 col-md-9">
<Results
:results="results"
@select="select" />
<Pagination
:pagination="pagination"
@change="search" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
30 changes: 30 additions & 0 deletions app/javascript/apps/picker/PickerTestApp.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script>
import Picker from './Picker.vue'
export default {
components: {
Picker,
},
data () {
return {
endpoint: '',
kind: '',
data: {},
}
},
mounted() {
let dataset = document.getElementById('picker-test-app').dataset
this.endpoint = dataset.endpoint;
this.kind = dataset.kind;
}
};
</script>

<template>
<Picker
v-model="data"
:kind="kind"
:endpoint="endpoint" />
<div class="bg-light p-3 rounded mt-4">
<pre><code>{{ data }}</code></pre>
</div>
</template>
Loading
Loading