update

2020-07-19 15:27:26 +02:00 · 2020-07-19 15:27:26 +02:00 · 90cd5ec582
commit 90cd5ec582
parent f2b6257a43
7 changed files with 89 additions and 26 deletions
--- a/src/components/AvatarEditor.vue
+++ b/src/components/AvatarEditor.vue
@ -15,6 +15,7 @@
            canvas-color="white"
            :width="width"
            :height="height"
+            accept="image/jpeg,image/png"
            prevent-white-space
            :placeholder-font-size="22"
            @file-size-exceed="handleFileSizeExceed"
@ -60,6 +61,7 @@
          text
          :loading="loading"
          color="primary"
+          :disabled="$store.state.delegate.validationState === 'pending'"
          @click="submit">
          Sauvegarder
        </v-btn>
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@ -26,11 +26,27 @@
          <slot />
        </v-toolbar-items>
      </v-toolbar>
-      <v-card-text class="frame-container">
-        <iframe
-          class="frame"
-          :src="frameUrl">
-        </iframe>
+      <v-card-text class="preview-content">
+        <!-- <v-tabs
+          v-model="tab"
+          centered
+          show-arrows
+          slider-color="accent"
+          ref="tabs"
+        >
+          <v-tab @click="tab = 0">
+            Accueil
+          </v-tab>
+          <v-tab @click="tab = 1">
+            Page
+          </v-tab>
+        </v-tabs> -->
+        <div class="frame-container">
+          <iframe
+            class="frame"
+            :src="frameUrl">
+          </iframe>
+        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
@ -39,6 +55,10 @@
 <script>
 export default {
  props: {
+    id: {
+      type: String,
+      required: true
+    },
    slug: {
      type: String,
      required: true
@ -56,15 +76,27 @@ export default {
      default: 'proposed'
    }
  },
+  data: () => ({
+    tab: 0
+  }),
  computed: {
    frameUrl () {
-      return process.env.VUE_APP_BASE_URL + '/association/' + this.slug + '?version=' + this.version
+      if (this.tab === 1) {
+        return process.env.VUE_APP_BASE_URL + '/association/' + this.slug + '?version=' + this.version
+      } else {
+        return process.env.VUE_APP_BASE_URL + '?only=' + this.id
+      }
    }
  }
 }
 </script>

 <style scoped>
+.preview-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .frame-container {
  height: 100%;
  display: flex;
--- a/src/layouts/Delegate.vue
+++ b/src/layouts/Delegate.vue
@ -293,16 +293,10 @@ export default {
        const organization = res.data.data.organization
        const proposedVersion = res.data.data.organization.proposedVersion
        const tags = res.data.data.tags
-        if (
-          proposedVersion.tag !== undefined &&
-          proposedVersion.tag !== null
-        ) {
-          proposedVersion.tag = proposedVersion.tag._id
-        }
        this.$store.commit('SET_DELEGATE', {
          adminName: organization.adminName,
          email: organization.email,
-          publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slug,
+          publicUrl: process.env.VUE_APP_BASE_URL + '/association/' + organization.slugs[organization.slugs.length - 1],
          validationState: organization.validationState,
          rejectionDescription: organization.rejectionDescription
        })
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -14,6 +14,7 @@ export default new Vuex.Store({
    tags: [],
    data: {
      name: '',
+      tags: [],
      descriptionShort: '',
      descriptionLong: '',
      thumbnail: {
@ -41,7 +42,7 @@ export default new Vuex.Store({
    },
    debug: false,
    validateMain: false,
-    validateMainCallback: () => false
+    validateMainCallback: (d: boolean) => false
  },
  mutations: {
    SET_DEBUG (state, payload) {
@ -74,9 +75,9 @@ export default new Vuex.Store({
    },
    VALIDATE_MAIN (state, callback) {
      state.validateMain = true
-      state.validateMainCallback = () => {
+      state.validateMainCallback = (d: boolean) => {
        state.validateMain = false
-        return callback()
+        return callback(d)
      }
    }
  },
--- a/src/views/Admin/OrganizationList.vue
+++ b/src/views/Admin/OrganizationList.vue
@ -209,6 +209,11 @@
                <v-list-item-title>{{ toSeeItem.token }}</v-list-item-title>
                <v-list-item-subtitle>Token/clé</v-list-item-subtitle>
              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn color="info" outlined @click="openPanel(toSeeItem)" small icon>
+                  <v-icon small>launch</v-icon>
+                </v-btn>
+              </v-list-item-action>
            </v-list-item>

            <v-divider />
@ -233,7 +238,6 @@
            </div>

            <div v-if="toSeeItem.publishedAt !== undefined">
-              <v-divider  />
              <v-list-item>
                <v-list-item-action />
                <v-list-item-content>
@ -281,7 +285,8 @@
    </v-dialog>
    <Preview
      :enabled="approveModal"
-      :slug="toApproveItem.slug"
+      :id="toApproveItem._id"
+      :slug="toApproveItem.slugs[0]"
      :dialogTitle="approveModalTitle"
      @close="approveModal = false"
    >
@ -325,11 +330,12 @@ export default {

  data: () => {
    const item = {
+      _id: '',
      adminName: '',
      email: '',
      validationState: 'unaware',
      rejectionDescription: '',
-      slug: ''
+      slugs: ['']
    }
    return {
      dialog: false,
@ -518,7 +524,12 @@ export default {
    },

    openExternal (item) {
-      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slug + '?version=proposed', '_blank').focus()
+      window.open(process.env.VUE_APP_BASE_URL + '/association/' + item.slugs[item.slug.length - 1] + '?version=proposed', '_blank').focus()
+    },
+
+    openPanel (item) {
+      const routeData = this.$router.resolve({ name: 'DelegateMain', query: { delegateToken: item.token } })
+      window.open(routeData.href, '_blank').focus()
    },

    openApproveModal (item) {
--- a/src/views/Delegate/Gallery.vue
+++ b/src/views/Delegate/Gallery.vue
@ -43,7 +43,11 @@
    />
    <!-- COVER END -->
    <div class="d-flex justify-end mb-3">
-      <v-btn color="primary" outlined @click="addMediaModal = true">
+      <v-btn
+        color="primary"
+        outlined
+        :disabled="$store.state.delegate.validationState === 'pending'"
+        @click="addMediaModal = true">
        <v-icon left>add</v-icon>
        Ajouter un média
      </v-btn>
--- a/src/views/Delegate/Main.vue
+++ b/src/views/Delegate/Main.vue
@ -19,13 +19,24 @@
            <img :src="$store.state.data.thumbnail.location" />
          </v-avatar>
        </v-col>
-        <v-col cols="12" sm="6" style="align-items: center; justify-content: center; display: flex;">
-          <v-btn @click="$refs.avatarEditor.toggle()" color="primary" outlined>
+        <v-col cols="12" sm="6" style="align-items: center; justify-content: center; display: flex; flex-direction: column">
+          <v-btn
+            color="primary"
+            outlined
+            :disabled="$store.state.delegate.validationState === 'pending'"
+            @click="$refs.avatarEditor.toggle()"
+          >
            <v-icon left>
              edit
            </v-icon>
-            Changer le logo
+            <span v-if="$store.state.data.thumbnail.location === ''">Définir un logo</span>
+            <span v-else>Changer le logo</span>
          </v-btn>
+          <div
+            v-if="$store.state.data.thumbnail.location === '' && validateLogo"
+            class="red--text mt-2">
+            Vous devez définir un logo !
+          </div>
        </v-col>
      </v-row>

@ -39,10 +50,12 @@
      <v-select
        label="Catégorie(s) de l'association"
        outlined
+        multiple
        prepend-icon="category"
        item-text="name"
        item-value="_id"
-        v-model="$store.state.data.tag"
+        v-model="$store.state.data.tags"
+        :rules="rules.tags"
        :items="$store.state.tags">
      </v-select>

@ -91,6 +104,7 @@ export default {
  data: () => ({
    formValid: true,
    logoLoading: false,
+    validateLogo: false,
    rules: {
      name: [
        v => v.length >= 3 || 'Au minimum 3 caractères',
@ -100,6 +114,7 @@ export default {
        v => v.length >= 20 || 'Au minimum 20 caractères',
        v => v.length <= 200 || 'Au maximum 200 caractères'
      ],
+      tags: [v => (Array.isArray(v) && v.length > 0) || 'Vous devez choisir au minimum une catégorie'],
      email: [v => /.+@.+\..+/.test(v) || "L'email est requis et dois être valide"],
      person: [v => v.length >= 4 || 'Au minimum 4 caractères']
    }
@ -115,7 +130,11 @@ export default {
  watch: {
    '$store.state.validateMain' (val) {
      if (val) {
-        this.$store.state.validateMainCallback(this.$refs.form.validate())
+        this.validateLogo = true
+        this.$store.state.validateMainCallback(
+          this.$refs.form.validate() &&
+          this.$store.state.data.thumbnail.location.length > 1
+        )
      }
    }
  },