rename checkedBlur to blurImage, testing checkbox

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -244,10 +244,13 @@ describe('ContributionForm.vue', () => {
 
         describe('questionable images should be blurred', () => {
           it('questionable images unset be blurred', async () => {
-         
+            expectedParams.variables.imageUpload = imageUpload
+            wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
+            expect(wrapper.find('.images-set-blur').exists()).toBe(false)
             await wrapper.find('input[type="checkbox"]').trigger('click')
             expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
-            expect(wrapper.find('img.img-blur-in').exists()).toBe(true)
+            expect(wrapper.find('.images-set-blur').exists()).toBe(true)
+           
           })
         })
 

webapp/components/ContributionForm/ContributionForm.vue

@@ -40,12 +40,12 @@
         <ds-text align="right">
           <label for="blur_img">{{ $t('contribution.shockingPicture') }}</label>
           <input
-            name="blurImage"
+            name="checkbox"
             class="blurImageCheckbox"
             type="checkbox"
             id="blur_img"
-            :checked="checkedBlur"
-            @change="(checkedBlur = !checkedBlur), (form.checkbox = !checkedBlur)"
+            v-model="checkedBlur"
+            @change="form.checkbox = checkedBlur"
           />
 
           <label for="blur_img"><span class=""></span></label>
@@ -227,8 +227,7 @@ export default {
   created() {},
   mounted() {
     if (this.contribution && this.contribution.blurImage === true) {
-      this.checkedChange()
-      this.$el.querySelector('.hc-attachments-upload-area-post img').classList.add('img-blur-in')
+      this.checkedBlur = true
     }
   },
   computed: {
@@ -242,28 +241,7 @@ export default {
   methods: {
     unBlur() {
       if (this.checkedBlur) {
-        this.checkedChange()
-      }
-    },
-    checkedChange() {
-      if (this.$el) {
-        console.log(this.$el.querySelector('.crop-overlay'))
-        console.log(document.querySelector('.crop-overlay'))
-        this.elem = this.$el.querySelector('img')
-      } else {
-      }
-      if (this.checkedBlur) {
-        this.elem.classList.remove('img-blur-in')
-        document.querySelector('.crop-overlay').classList.remove('images-set-blur')
         this.checkedBlur = false
-        this.form.checkbox = false
-      } else {
-        if (this.elem != null) {
-          
-          this.elem.classList.add('img-blur-in')
-        }
-        this.checkedBlur = true
-        this.form.checkbox = true
       }
     },
     submit() {
@@ -362,7 +340,7 @@ export default {
   -o-transition: all ease 0.2s;
   transition: all ease 0.2s;
 }
-.images-set-blur img{
+.images-set-blur img {
   -webkit-filter: blur(32px);
   -moz-filter: blur(32px);
   -ms-filter: blur(32px);
@@ -417,18 +395,4 @@ export default {
     cursor: default;
   }
 }
-input[type='checkbox'] {
-  display: none;
-}
-input[type='checkbox'] + label span {
-  display: inline-block;
-  width: 29px;
-  height: 27px;
-  vertical-align: middle;
-  background: url(../../static/img/checkbox/checkbox-set-blank-checked-line.png) left top no-repeat;
-  cursor: pointer;
-}
-input[type='checkbox']:checked + label span {
-  background: url(../../static/img/checkbox/checkbox-set-blank-checked-line.png) -30px top no-repeat;
-}
 </style>

webapp/pages/moderation/images.vue

@@ -1,173 +0,0 @@
-<template>
-  <ds-card space="small">
-    <ds-heading tag="h3">User Images</ds-heading>
-      <template>
-
-  <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }">
-       <div>
-    <ds-button :secondary="blurTrueImages" @click="changeShowImages" >All Blur Images </ds-button>
-    <ds-button :secondary="!blurTrueImages"  @click="changeShowImages" >All Images</ds-button>
-  </div>
-    </ds-space>
-</template>
-   <template v-if="hasResults">
-  <div>
-    <ds-grid gap="x-small"   >
-      <ds-grid-item v-for="post in posts" :key="post.id" :row-span="10">
-           <img            
-           :src="postImage(post.image)" 
-           @click="showImages(post)" style="width:100%"/>
-          <div>{{post.createdAt}}</div>
-          <a :href="'/post/'+ post.id" target="_blank">{{post.title}}</a>
-          </ds-grid-item>
- 
-    </ds-grid>
-  </div>
-</template>
-
-
-    <div>
-    <ds-modal 
-      v-if="isOpen"
-      v-model="isOpen"
-       :title="title" 
-      force
-      extended
-      confirm-label="Ok"
-      cancel-label="cancel"
-    >
-      <p>
-           <img           
-           :src="imagePath"           
-           style="width:100%"/>
-        <small>Dieses Bild ist vom User Blured</small>
-          <div>
-    <ds-button danger @click="deleteImage()"  >Bild löschen! </ds-button>
-    <ds-button v-if="!blurTrueImages" secondary @click="moderatorBlurImage()"  > Bild unkenntlich machen! </ds-button>
-     <a :href="contributionlink" target="_blank"><ds-button primary >Beitrag aufrufen </ds-button></a>
-    
-    
-  </div>
-      </p>
-   
-    </ds-modal>
-  </div>
-  </ds-card>
-
-
-</template>
-
-
-
-
-<script>
- import gql from 'graphql-tag'
-
- 
-export default {
-
-  data() {
-      return {
-      posts: [],
-      blurTrueImages: true,
-      isOpen: false,
-      imagePath: null,
-      imageID: null,
-      title: '',
-      contributionlink: '',
-    }
-  },
-   computed: {
-    hasResults() {
-      return this.$apollo.loading || (this.posts && this.posts.length > 0)
-    },
-  
-},
- methods: {
-    
-     postImage(image) {
-         // console.log("image1", image)
-         // console.log("image.match('uploads/') ", image.match('uploads/') )
-         if (image && image.match('uploads/') != null ) {
-           // console.log("image ist API", image)
-            return '/api' + image 
-              
-         } else {
-             //  console.log("image ist LINK", image)
-            return '' + image 
-         }
-     },
-    changeShowImages(){
-      console.log("this.blurTrueImages is", this.blurTrueImages) 
-        if ( this.blurTrueImages ) {
-            this.blurTrueImages = false
-            this.loadBlurFalseImages()
-        } else {
-            this.blurTrueImages = true
-            this.loadBlurTrueImages()
-            
-        }
-        console.log("this.blurTrueImages new", this.blurTrueImages)    
-    },
-    showImages(post){
-        console.log("showImages(post)", post)  
-           console.log(" this.blurTrueImages",  this.blurTrueImages)  
-           
-         this.isOpen = true
-        this.imagePath = this.postImage(post.image)       
-        this.title = post.title
-        this.contributionlink = '/post/'+ post.id
-    },
-    moderatorBlurImage(post){
-       console.log("moderatorBlurImage(post)", post)  
-    },
-    deleteImage(id){
-        if (this.imageID !== id) return
-        console.log("DELETE IMAGE, austauschen mit einem hinweisbild durch die moderation", id)
-    },
-      loadBlurFalseImages() {
-         
-      this.$apollo
-        .query({
-          query: gql`
-           query {
-          Post(blurImage: false){id, title, blurImage, image, imageUpload, createdAt }
-        } 
-          `,
-        })
-        .then(({ data: { Post } }) => {
-         this.posts = Post
-        })
-    },
-     loadBlurTrueImages() {
-         
-      this.$apollo
-        .query({
-          query: gql`
-           query {
-          Post(blurImage: true){id, title, blurImage, image, imageUpload, createdAt }
-        } 
-          `,
-        })
-        .then(({ data: { Post } }) => {
-         this.posts = Post
-        })
-    },
- },
- apollo: {
-    Post: {
-      query() {
-        return gql`
-       query {
-          Post(blurImage: true){id, title, blurImage, image, imageUpload, createdAt }
-        }        `
-      },   
-      result({ data: { Post } }) {
-        this.posts = Post
-      },
-    },
-     },
-}
-
-
-</script>

webapp/pages/post/_id/_slug/index.vue

@@ -12,21 +12,21 @@
     >
       <ds-text align="right" class="blurBox">
         <ds-button
-          v-show="post.blurImage"
+          v-if="post.blurImage"
           class="bluricon-post"
           icon="eye"
           primary
           @click.prevent="unBlur"
         ></ds-button>
         <ds-button
-          v-show="blur"
+          v-if="blur"
           class="bluricon-post"
           icon="eye-slash"
           primary
           @click.prevent="Blur"
         ></ds-button>
         <img
-          v-show="post.blurImage"
+          v-if="post.blurImage"
           :src="post.image | proxyApiUrl"
           class="blurImgPreview"
           @click.prevent="unBlur"