CellEditor.vue 11.2 KB
Newer Older
Anton's avatar
Intial  
Anton committed
1 2
<template lang="pug">

christianrhansen's avatar
christianrhansen committed
3
  div
Anton's avatar
Intial  
Anton committed
4

christianrhansen's avatar
christianrhansen committed
5 6
    // --------------------------------------------------------------------------------------------------------- desktop
    q-list.desktop-only(v-for="(cell, index) in cellsData", :key="cell._uuid")
Anton's avatar
Intial  
Anton committed
7

Mathias Bär's avatar
Mathias Bär committed
8
      //q-item-separator(v-if="index > 0")
Anton's avatar
Intial  
Anton committed
9

Christian Hansen's avatar
Christian Hansen committed
10
      <!--q-item(v-if="cell.type in itemSpecs", v-for="spec in itemSpecs[cell.type]", :key="`${spec.type}-${spec.path}`")-->
Mathias Bär's avatar
Mathias Bär committed
11
      q-item(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
Christian Hansen's avatar
Christian Hansen committed
12
      v-if="cell.data.path === spec.path")
Anton's avatar
Intial  
Anton committed
13

Christian Hansen's avatar
Christian Hansen committed
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
        q-item-main

          // preview images
            q-item-tile
              img.full-width(v-if="cell.component === 'CellImage'", :src="cell.data.content")

          q-item-tile
            q-field(
              :icon="typeToIconName[spec.type]",
              :helper="spec.help",
              :error="spec.error",
              :error-label="spec.errorMessage",
              style="width: 100%")
              template(v-if="spec.inputType === 'select'")
                q-select(
                  :float-label="spec.label",
                  :options="spec.selectOptions",
                  @select="value => handleItemChanged(value, cell, spec.path)")
              template(v-else)
                //q-input(
                //  :float-label="spec.label",
                //  :type="spec.inputType",
                //  :min-rows="1",
                //  :max-height="500",
                //  :value="cell[spec.path]",
                //  @change="value => handleItemChanged(value, cell, spec.path)")
                q-input(
                  :float-label="spec.label",
                  :type="spec.inputType",
                  :min-rows="1",
                  :max-height="500",
                  :value="cell.data[spec.path]",
                  @change="value => handleItemChanged(value, cell, spec.path)")
47
      q-item-separator(v-if="index < cellsData.length - 1")
Christian Hansen's avatar
Christian Hansen committed
48

christianrhansen's avatar
christianrhansen committed
49 50 51 52 53 54 55 56 57 58
    // ---------------------------------------------------------------------------------------------------------- mobile
    q-list.mobile-only.q-pt-none(v-for="(cell, index) in cellsData", :key="cell._uuid")

      //----- header
      q-item.q-py-sm.q-pr-sm
        q-item-main.text-dark
          strong {{ itemSpecs[cell.component][0].type }}
        //
          q-item-side.text-right
            q-icon(:name="typeToIconName[itemSpecs[cell.component][0].type]", size="20px")
59 60 61
        q-item-side.text-dark.text-right
          q-btn.q-pa-none.q-mr-xs(@click="", size="xs", flat)
            q-icon(name="delete", size="20px")
christianrhansen's avatar
christianrhansen committed
62 63 64 65

      q-item-separator.q-ma-none

      //----- preview image
66 67 68
      q-item.q-pa-none.q-ma-none
        img(v-if="cell.component === 'CellImage'", :src="cell.data.content",
        style="max-height: 50vh; max-width: 100%; margin: 0 auto;")
christianrhansen's avatar
christianrhansen committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

      q-item-separator.q-ma-none.q-pa-none(v-if="cell.component === 'CellImage'")

      q-item.q-pa-none(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
      v-if="cell.data.path === spec.path")

        q-item-main

          //----- input
          q-item-tile.q-px-md
            q-field(
              :helper="spec.help",
              :error="spec.error",
              :error-label="spec.errorMessage",
              style="width: 100%")
              template(v-if="spec.inputType === 'select'")
                q-select(
                  :float-label="spec.label",
                  :options="spec.selectOptions",
                  @select="value => handleItemChanged(value, cell, spec.path)")
              template(v-else)
                q-input(
                  :type="spec.inputType",
                  :min-rows="1",
                  :max-height="500",
                  :value="cell.data[spec.path]",
                  @change="value => handleItemChanged(value, cell, spec.path)",
                  hide-underline)

Christian Hansen's avatar
Christian Hansen committed
98 99
      // q-item(v-else)
        q-field This cell type is not supported yet: {{ cell.component }}.{{ spec.path }}
Anton's avatar
Intial  
Anton committed
100 101 102 103 104 105 106
</template>

<script>
  export default {
    props: ['cells'],
    data () {
      return {
Christian Hansen's avatar
Christian Hansen committed
107
        cellsData: [],
Anton's avatar
Intial  
Anton committed
108 109 110 111
        typeToIconName: {
          'Image': 'photo',
          'IFrame': 'picture in picture',
          'Internal-Link': 'link',
Anton's avatar
Anton committed
112
          'Media': 'local movies',
Anton's avatar
Intial  
Anton committed
113
          'Text': 'subject',
Christian Hansen's avatar
Christian Hansen committed
114 115
          'Title': 'title',
          'Annotation-List': 'comment'
Anton's avatar
Intial  
Anton committed
116 117
        },
        itemSpecs: {
Christian Hansen's avatar
Christian Hansen committed
118
          'CellTitle': [{ // in usage
christianrhansen's avatar
christianrhansen committed
119
            inputType: 'textarea',
Anton's avatar
Intial  
Anton committed
120 121 122 123 124
            type: 'Title',
            label: 'Title Cell',
            help: '',
            error: false,
            errorMessage: '',
Anton's avatar
Anton committed
125 126
            value: '',
            path: 'content'
Anton's avatar
Anton committed
127 128 129 130 131 132 133 134 135 136
          },
          {
            inputType: 'url',
            type: 'Title',
            label: 'Link URL',
            help: 'Insert any valid URL',
            error: false,
            errorMessage: 'Needs to be a valid URL',
            value: '',
            path: 'link'
Anton's avatar
Anton committed
137
          }],
Christian Hansen's avatar
Christian Hansen committed
138
          'CellText': [{ // in usage
Anton's avatar
Intial  
Anton committed
139 140 141 142 143 144
            inputType: 'textarea',
            type: 'Text',
            label: 'Text Cell',
            help: '',
            error: false,
            errorMessage: '',
Anton's avatar
Anton committed
145 146 147
            value: '',
            path: 'content'
          }],
Christian Hansen's avatar
Christian Hansen committed
148
          'CellVideo': [{ // in usage
Anton's avatar
Intial  
Anton committed
149
            inputType: 'url',
christianrhansen's avatar
christianrhansen committed
150 151
            type: 'Media',
            label: 'Media Cell',
Anton's avatar
Intial  
Anton committed
152 153 154
            help: 'Insert a URL to: a video file or a Vimeo / YouTube video page',
            error: false,
            errorMessage: 'Needs to be a valid URL',
Anton's avatar
Anton committed
155 156
            value: '',
            path: 'content'
157
          },
Anton's avatar
Anton committed
158 159 160 161 162 163 164 165 166
          {
            inputType: 'number',
            type: 'Video',
            label: 'Start',
            help: 'Set start point (seconds)',
            error: false,
            errorMessage: 'Needs to be a valid number',
            value: 0,
            path: 'start'
Anton's avatar
Intial  
Anton committed
167
          },
Anton's avatar
Anton committed
168 169 170 171 172 173 174 175 176
          {
            inputType: 'number',
            type: 'Video',
            label: 'Duration',
            help: 'Set duration (seconds)',
            error: false,
            errorMessage: 'Needs to be a valid number',
            value: 0,
            path: 'duration'
177
          }],
Christian Hansen's avatar
Christian Hansen committed
178
          'CellImage': [{
Anton's avatar
Intial  
Anton committed
179 180 181 182 183 184
            inputType: 'url',
            type: 'Image',
            label: 'Image Cell',
            help: 'Insert a URL to an image file',
            error: false,
            errorMessage: 'Needs to be a valid URL',
Anton's avatar
Anton committed
185 186
            value: '',
            path: 'content'
Anton's avatar
Anton committed
187 188 189 190 191 192 193 194 195 196
          },
          {
            inputType: 'url',
            type: 'Image',
            label: 'Link URL',
            help: 'Insert any valid URL',
            error: false,
            errorMessage: 'Needs to be a valid URL',
            value: '',
            path: 'link'
Anton's avatar
Anton committed
197
          }],
Christian Hansen's avatar
Christian Hansen committed
198
          'CellInternalLink': [{ // in usage
Anton's avatar
Intial  
Anton committed
199 200 201 202 203 204
            inputType: 'url',
            type: 'Internal-Link',
            label: 'Link Cell',
            help: 'Insert a URL to a page in this system',
            error: false,
            errorMessage: 'Needs to be a valid URL',
Anton's avatar
Anton committed
205 206 207
            value: '',
            path: 'content'
          }],
Christian Hansen's avatar
Christian Hansen committed
208
          'CellIFrame': [{ // in usage
Anton's avatar
Intial  
Anton committed
209 210 211 212 213 214
            inputType: 'url',
            type: 'IFrame',
            label: 'IFrame Cell',
            help: 'Insert some URL',
            error: false,
            errorMessage: 'Needs to be a valid URL',
Anton's avatar
Anton committed
215 216 217
            value: '',
            path: 'content'
          }],
Christian Hansen's avatar
Christian Hansen committed
218
          'CellAnnotationList': [{ // in usage
Anton's avatar
Intial  
Anton committed
219 220 221 222 223 224
            inputType: 'text',
            type: 'Annotation-List',
            label: 'Annotation List Cell',
            help: 'Insert a Video UUID',
            error: false,
            errorMessage: '',
Anton's avatar
Anton committed
225 226
            value: '',
            path: 'content'
227
          },
Anton's avatar
Anton committed
228 229
          {
            inputType: 'number',
230
            type: 'Annotation-List',
Anton's avatar
Anton committed
231 232 233 234 235 236 237 238 239 240
            label: 'Add annotations',
            help: 'Allow user to add more annotations (0 or 1)',
            error: false,
            errorMessage: '',
            value: 0,
            path: 'allow_annotations'
          },
          {
            inputType: 'number',
            type: 'Annotation-List',
Anton's avatar
Anton committed
241 242 243 244 245 246 247 248 249
            label: 'Start',
            help: 'Filter from video start point (seconds)',
            error: false,
            errorMessage: 'Needs to be a valid number',
            value: 0,
            path: 'start'
          },
          {
            inputType: 'number',
250
            type: 'Annotation-List',
Anton's avatar
Anton committed
251 252 253 254 255 256
            label: 'Duration',
            help: 'Filter duration (seconds)',
            error: false,
            errorMessage: 'Needs to be a valid number',
            value: 0,
            path: 'duration'
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
          },
          {
            inputType: 'text',
            type: 'Annotation-List',
            label: 'Textfilter',
            help: 'Filter annotations by search string',
            error: false,
            errorMessage: '',
            value: undefined,
            path: 'textfilter'
          },
          {
            inputType: 'text',
            type: 'Annotation-List',
            label: 'RegExp',
Mathias Bär's avatar
Mathias Bär committed
272

273 274 275 276 277
            help: 'Filter annotations by regular expression',
            error: false,
            errorMessage: '',
            value: undefined,
            path: 'regexp'
Anton's avatar
Anton committed
278
          },
279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298
          // {
          //   inputType: 'select',
          //   type: 'Annotation-List',
          //   label: 'Display type',
          //   help: '',
          //   error: false,
          //   errorMessage: '',
          //   value: 'scroll-list',
          //   path: 'displayType',
          //   selectOptions: [
          //     {
          //       label: 'Scroll List',
          //       value: 'scroll-list'
          //     },
          //     {
          //       label: 'Tab List',
          //       value: 'tabs'
          //     }
          //   ]
          // }
Anton's avatar
Anton committed
299
          {
300
            inputType: 'text',
Anton's avatar
Anton committed
301
            type: 'Annotation-List',
302
            label: 'Display type',
303
            help: 'Either "scroll-list" or "tabs"',
Anton's avatar
Anton committed
304 305
            error: false,
            errorMessage: '',
306 307
            value: undefined,
            path: 'displayType'
308
          }]
Anton's avatar
Intial  
Anton committed
309 310 311
        }
      }
    },
Christian Hansen's avatar
Christian Hansen committed
312 313 314 315 316 317 318 319
    watch: {
      async cells (val) {
        this.getCellsData(val)
      }
    },
    mounted () {
      this.getCellsData(this.cells)
    },
Anton's avatar
Intial  
Anton committed
320
    methods: {
Christian Hansen's avatar
Christian Hansen committed
321 322 323 324 325 326 327 328
      async getCellsData (cells) {
        this.cellsData = []
        for (let i = 0; i < cells.length; i++) {
          let c = await this.$store.dispatch('cells/get', cells[i].body.source.id)
          c.data.path = 'content'
          this.cellsData.push(c)
        }
      },
329
      async handleItemChanged (value, cell, path) {
Anton's avatar
Intial  
Anton committed
330
        if (cell.inputType !== 'url') {
331
          await this.updateCellContent(value, cell, path)
Anton's avatar
Intial  
Anton committed
332 333 334 335
        }
        else {
          cell.error = !(/^http[s]?:\/\/.+/.test(value))
          if (!cell.error) {
336
            await this.updateCellContent(value, cell, path)
Anton's avatar
Intial  
Anton committed
337 338 339
          }
        }
      },
340
      async updateCellContent (value, cell, path) {
341 342 343 344 345 346 347 348 349
        if (cell.id) {
          cell.data[path] = value
          await this.$store.dispatch('cells/patch', [cell.id, { data: { [path]: value } }])
        }
      },
      async updateCellConfig (value, cell, path) {
        if (cell.id) {
          cell.config[path] = value
          await this.$store.dispatch('cells/patch', [cell.id, { config: { [path]: value } }])
Anton's avatar
Intial  
Anton committed
350 351 352 353 354 355 356
        }
      }
    }
  }
</script>

<style scoped lang="stylus"></style>