Internal: Vue UI changes replacing vuetify with bootstrap-vue

5 years ago · 019e7ab938
parent 6e1d2440ff
commit 019e7ab938
13 changed files with 208 additions and 163 deletions
--- a/assets/vue/components/Snackbar.vue
+++ b/assets/vue/components/Snackbar.vue
@ -3,7 +3,7 @@
    <b-alert
      v-model="show"
      :variant="color"
-      :dismiss-secs="timeout"
+      dismissible
    >
      {{ text }}
      <template v-if="subText">
--- a/assets/vue/components/Toolbar.vue
+++ b/assets/vue/components/Toolbar.vue
@ -1,82 +1,79 @@
 <template>
-  <v-toolbar
-    class="my-md-auto"
-    elevation="0"
-  >
+  <div class="">
+    <br>
+
    <slot name="left" />
-    <v-spacer />
-    <div>
-      <b-button
-        v-if="handleList"
-        :loading="isLoading"
-        variant="primary"
-        @click="listItem"
-      >
-        {{ $t('List') }}
-      </b-button>
-      <b-button
-        v-if="handleEdit"
-        :loading="isLoading"
-        variant="primary"
-        @click="editItem"
-      >
-        {{ $t('Edit') }}
-      </b-button>
-      <b-button
-        v-if="handleSubmit"
-        :loading="isLoading"
-        variant="primary"
-        @click="submitItem"
-      >
-        <v-icon left>
-          mdi-content-save
-        </v-icon>
-        {{ $t('Submit') }}
-      </b-button>
-      <!--      <v-btn-->
-      <!--        v-if="handleReset"-->
-      <!--        color="primary"-->
-      <!--        class="ml-sm-2"-->
-      <!--        @click="resetItem"-->
-      <!--      >-->
-      <!--        {{ $t('Reset') }}-->
-      <!--      </v-btn>-->
-      <b-button
-        v-if="handleDelete"
-        variant="danger"
-        class="ml-sm-2"
-        @click="confirmDelete = true"
-      >
-        {{ $t('Delete') }}
-      </b-button>

-      <b-button
-        v-if="handleAdd"
-        variant="primary"
-        rounded
-        @click="addItem"
-      >
-        <font-awesome-icon icon="folder-plus" /> New folder
-      </b-button>
+    <b-button
+      v-if="handleList"
+      :loading="isLoading"
+      variant="primary"
+      @click="listItem"
+    >
+      {{ $t('List') }}
+    </b-button>
+    <b-button
+      v-if="handleEdit"
+      :loading="isLoading"
+      variant="primary"
+      @click="editItem"
+    >
+      {{ $t('Edit') }}
+    </b-button>
+    <b-button
+      v-if="handleSubmit"
+      :loading="isLoading"
+      variant="primary"
+      @click="submitItem"
+    >
+      <v-icon left>
+        mdi-content-save
+      </v-icon>
+      {{ $t('Submit') }}
+    </b-button>
+    <!--      <v-btn-->
+    <!--        v-if="handleReset"-->
+    <!--        color="primary"-->
+    <!--        class="ml-sm-2"-->
+    <!--        @click="resetItem"-->
+    <!--      >-->
+    <!--        {{ $t('Reset') }}-->
+    <!--      </v-btn>-->
+    <b-button
+      v-if="handleDelete"
+      variant="danger"
+      class="ml-sm-2"
+      @click="confirmDelete = true"
+    >
+      {{ $t('Delete') }}
+    </b-button>
+
+    <b-button
+      v-if="handleAdd"
+      variant="primary"
+      rounded
+      @click="addItem"
+    >
+      <font-awesome-icon icon="folder-plus" /> New folder
+    </b-button>

-      <b-button
-        v-if="handleAddDocument"
-        variant="primary"
-        rounded
-        @click="addDocument"
-      >
-        <font-awesome-icon icon="file-alt" /> New document
-      </b-button>
+    <b-button
+      v-if="handleAddDocument"
+      variant="primary"
+      rounded
+      @click="addDocument"
+    >
+      <font-awesome-icon icon="file-alt" /> New document
+    </b-button>

-      <b-button
-        v-if="handleUploadDocument"
-        variant="primary"
-        rounded
-        @click="uploadDocument"
-      >
-        <font-awesome-icon icon="cloud-upload-alt" /> File upload
-      </b-button>
-    </div>
+    <b-button
+      v-if="handleUploadDocument"
+      variant="primary"
+      rounded
+      @click="uploadDocument"
+    >
+      <font-awesome-icon icon="cloud-upload-alt" /> File upload
+    </b-button>

    <ConfirmDelete
      v-if="handleDelete"
@ -84,7 +81,7 @@
      :handle-delete="handleDelete"
      @close="confirmDelete = false"
    />
-  </v-toolbar>
+  </div>
 </template>

 <script>
--- a/assets/vue/components/documents/Form.vue
+++ b/assets/vue/components/documents/Form.vue
@ -1,23 +1,21 @@
 <template>
  <v-form>
-    <b-container fluid>
-      <b-row>
-        <b-col
-          cols="12"
-          sm="6"
-          md="6"
-        >
-          <b-form-input
-            v-model="item.title"
-            :error-messages="titleErrors"
-            :placeholder="$t('Title')"
-            required
-            @input="$v.item.title.$touch()"
-            @blur="$v.item.title.$touch()"
-          />
-        </b-col>
-      </b-row>
-    </b-container>
+    <b-row>
+      <b-col
+        cols="12"
+        sm="6"
+        md="6"
+      >
+        <b-form-input
+          v-model="item.title"
+          :error-messages="titleErrors"
+          :placeholder="$t('Title')"
+          required
+          @input="$v.item.title.$touch()"
+          @blur="$v.item.title.$touch()"
+        />
+      </b-col>
+    </b-row>
  </v-form>
 </template>

--- a/assets/vue/components/documents/FormNewDocument.vue
+++ b/assets/vue/components/documents/FormNewDocument.vue
@ -1,12 +1,12 @@
 <template>
-  <v-form>
-    <b-container fluid>
-      <b-row>
-        <b-col
-          cols="12"
-          sm="6"
-          md="6"
-        >
+  <b-form>
+    <b-row>
+      <b-col
+        cols="12"
+        sm="6"
+        md="6"
+      >
+        <b-form-group>
          <b-form-input
            v-model="item.title"
            :error-messages="titleErrors"
@ -15,19 +15,21 @@
            @input="$v.item.title.$touch()"
            @blur="$v.item.title.$touch()"
          />
-          <editor
-            v-if="item.resourceNode && item.resourceNode.fileEditableText || item.newDocument"
-            v-model="item.contentFile"
-            :error-messages="contentFileErrors"
-            required
-            :init="{
-              skin_url: '/build/libs/tinymce/skins/ui/oxide',
-              content_css: '/build/libs/tinymce/skins/content/default/content.css',
-              branding:false,
-              height: 500,
-              toolbar_mode: 'sliding',
-              file_picker_callback : browser,
-              /*file_picker_callback: function(callback, value, meta) {
+        </b-form-group>
+
+        <editor
+          v-if="item.resourceNode && item.resourceNode.fileEditableText || item.newDocument"
+          v-model="item.contentFile"
+          :error-messages="contentFileErrors"
+          required
+          :init="{
+            skin_url: '/build/libs/tinymce/skins/ui/oxide',
+            content_css: '/build/libs/tinymce/skins/content/default/content.css',
+            branding:false,
+            height: 500,
+            toolbar_mode: 'sliding',
+            file_picker_callback : browser,
+            /*file_picker_callback: function(callback, value, meta) {
                    // Provide file and text for the link dialog
                    if (meta.filetype == 'file') {
                      callback('mypage.html', {text: 'My text'});
@ -43,26 +45,25 @@
                      callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
                    }
                  },*/
-              /*images_upload_handler: (blobInfo, success, failure) => {
+            /*images_upload_handler: (blobInfo, success, failure) => {
                    const img = 'data:image/jpeg;base64,' + blobInfo.base64();
                    //console.log(img);
                    success(img);
                  },*/
-              //menubar: true,
-              autosave_ask_before_unload: true,
-              plugins: [
-                'fullpage advlist autolink lists link image charmap print preview anchor',
-                'searchreplace visualblocks code fullscreen',
-                'insertdatetime media table paste wordcount'
-              ],
-              toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor code codesample | ltr rtl',
-            }
-            "
-          />
-        </b-col>
-      </b-row>
-    </b-container>
-  </v-form>
+            //menubar: true,
+            autosave_ask_before_unload: true,
+            plugins: [
+              'fullpage advlist autolink lists link image charmap print preview anchor',
+              'searchreplace visualblocks code fullscreen',
+              'insertdatetime media table paste wordcount'
+            ],
+            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor code codesample | ltr rtl',
+          }
+          "
+        />
+      </b-col>
+    </b-row>
+  </b-form>
 </template>

 <script>
--- a/assets/vue/components/layout/Header.vue
+++ b/assets/vue/components/layout/Header.vue
@ -2,7 +2,7 @@
  <b-navbar
    toggleable="lg"
    type="dark"
-    variant="info"
+    variant="primary"
    sticky
  >
    <b-navbar-brand href="/">
@ -74,10 +74,11 @@
        <b-nav-item-dropdown
          v-if="isAuthenticated"
          right
+          no-caret
        >
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
-            User
+            <b-avatar variant="light" />
          </template>
          <b-dropdown-item href="/main/messages/inbox.php">
            Inbox
--- a/assets/vue/components/layout/Sidebar.vue
+++ b/assets/vue/components/layout/Sidebar.vue
@ -18,6 +18,32 @@
      Sessions
    </b-list-group-item>

+    <b-list-group-item
+      v-if="isAuthenticated"
+    />
+
+    <b-list-group-item
+      v-if="isAuthenticated"
+      :to="'/main/admin/user_list.php'"
+    >
+      Users
+    </b-list-group-item>
+
+    <b-list-group-item
+      v-if="isAuthenticated"
+      :to="'/main/admin/course_list.php'"
+    >
+      Courses
+    </b-list-group-item>
+
+    <b-list-group-item
+      v-if="isAuthenticated"
+      :to="'/main/session/session_list.php'"
+    >
+      Sessions
+    </b-list-group-item>
+
+
    <b-list-group-item
      v-if="isAuthenticated"
      :to="'/main/admin/index.php'"
--- a/assets/vue/views/documents/Create.vue
+++ b/assets/vue/views/documents/Create.vue
@ -1,7 +1,15 @@
 <template>
  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar>
-    <DocumentsForm ref="createForm" :values="item" :errors="violations" />
+    <DocumentsForm
+      ref="createForm"
+      :values="item"
+      :errors="violations"
+    />
+
+    <Toolbar
+      :handle-submit="onSendForm"
+      :handle-reset="resetForm"
+    />
    <Loading :visible="isLoading" />
  </div>
 </template>
@ -24,12 +32,12 @@ const { mapFields } = createHelpers({
 export default {
  name: 'DocumentsCreate',
  servicePrefix,
-  mixins: [CreateMixin],
  components: {
    Loading,
    Toolbar,
    DocumentsForm
  },
+  mixins: [CreateMixin],
  data() {
    return {
      item: {},
--- a/assets/vue/views/documents/CreateFile.vue
+++ b/assets/vue/views/documents/CreateFile.vue
@ -1,7 +1,15 @@
 <template>
  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar>
-    <DocumentsForm ref="createForm" :values="item" :errors="violations" />
+    <DocumentsForm
+      ref="createForm"
+      :values="item"
+      :errors="violations"
+    />
+
+    <Toolbar
+      :handle-submit="onSendForm"
+      :handle-reset="resetForm"
+    />
    <Loading :visible="isLoading" />
  </div>
 </template>
@ -24,12 +32,12 @@ const { mapFields } = createHelpers({
 export default {
  name: 'DocumentsCreate',
  servicePrefix,
-  mixins: [CreateMixin],
  components: {
    Loading,
    Toolbar,
    DocumentsForm
  },
+  mixins: [CreateMixin],
  data() {
    return {
      item: {
--- a/assets/vue/views/documents/Update.vue
+++ b/assets/vue/views/documents/Update.vue
@ -1,20 +1,20 @@
 <template>
  <div>
+    <DocumentsForm
+      v-if="item"
+      ref="updateForm"
+      :values="item"
+      :errors="violations"
+    />
    <Toolbar
      :handle-submit="onSendForm"
      :handle-reset="resetForm"
      :handle-delete="del"
    />
-    <DocumentsForm
-      ref="updateForm"
+    <ResourceLinkForm
      v-if="item"
+      ref="resourceLinkForm"
      :values="item"
-      :errors="violations"
-    />
-    <ResourceLinkForm
-            ref="resourceLinkForm"
-            v-if="item"
-            :values="item"
    />

    <Loading :visible="isLoading || deleteLoading" />
@ -35,13 +35,13 @@ const servicePrefix = 'Documents';
 export default {
  name: 'DocumentsUpdate',
  servicePrefix,
-  mixins: [UpdateMixin],
  components: {
    Loading,
    Toolbar,
    DocumentsForm,
    ResourceLinkForm
  },
+  mixins: [UpdateMixin],

  computed: {
    ...mapFields('documents', {
--- a/assets/vue/views/documents/UpdateFile.vue
+++ b/assets/vue/views/documents/UpdateFile.vue
@ -1,22 +1,20 @@
 <template>
  <div>
+    <DocumentsForm
+      v-if="item"
+      ref="updateForm"
+      :values="item"
+      :errors="violations"
+    />
    <Toolbar
      :handle-submit="onSendForm"
      :handle-reset="resetForm"
      :handle-delete="del"
    />
-
-    <DocumentsForm
-      ref="updateForm"
+    <ResourceLinkForm
      v-if="item"
+      ref="resourceLinkForm"
      :values="item"
-      :errors="violations"
-    />
-
-    <ResourceLinkForm
-            ref="resourceLinkForm"
-            v-if="item"
-            :values="item"
    />

    <Loading :visible="isLoading || deleteLoading" />
@ -37,13 +35,13 @@ const servicePrefix = 'Documents';
 export default {
  name: 'DocumentsUpdate',
  servicePrefix,
-  mixins: [UpdateMixin],
  components: {
    Loading,
    Toolbar,
    DocumentsForm,
    ResourceLinkForm
  },
+  mixins: [UpdateMixin],
  data() {
    return {
    };
--- a/assets/vue/views/documents/Upload.vue
+++ b/assets/vue/views/documents/Upload.vue
@ -1,7 +1,14 @@
 <template>
  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar>
-    <DocumentsForm ref="createForm" :values="item" :errors="violations" />
+    <DocumentsForm
+      ref="createForm"
+      :values="item"
+      :errors="violations"
+    />
+    <Toolbar
+      :handle-submit="onSendForm"
+      :handle-reset="resetForm"
+    />
    <Loading :visible="isLoading" />
  </div>
 </template>
@ -24,12 +31,12 @@ const { mapFields } = createHelpers({
 export default {
  name: 'DocumentsCreate',
  servicePrefix,
-  mixins: [CreateMixin],
  components: {
    Loading,
    Toolbar,
    DocumentsForm
  },
+  mixins: [CreateMixin],
  data() {
    return {
      item: {
--- a/public/main/inc/lib/formvalidator/FormValidator.class.php
+++ b/public/main/inc/lib/formvalidator/FormValidator.class.php
@ -1,4 +1,5 @@
 <?php
+
 /* For licensing terms, see /license.txt */

 /**
--- a/public/main/template/default/admin/index.html.twig
+++ b/public/main/template/default/admin/index.html.twig
@ -14,7 +14,7 @@
        <div id="settings" >
            <div class="row">
            {% for block_item in blocks_admin %}
-                <div id="tabs-{{ loop.index }}" class="col">
+                <div id="tabs-{{ loop.index }}" class="col-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title">{{ block_item.icon }} {{ block_item.label }}</h5>