Fixed chip width, align its content to right

<template>

        <v-container id="vps-stats" v-if="!loading">
            <v-card>
                <v-card-row class="grey darken-3">
                    <v-card-title class="white--text">{{$t('vps.control')}}</v-card-title>
                </v-card-row>
                <v-card-text>
                    <v-row>
                        <v-col md6 xs12>
                            <v-card-row>

                                {{$t('vps.state')}}:
                                <v-chip v-if="locked && vps.abuse" label class="red white--text">{{$t('vps.locked')}}</v-chip>
                                <v-chip v-else-if="locked" label class="red white--text">{{$t('vps.unpaid')}}</v-chip>
                                <v-chip v-else-if="on" label class="green white--text">{{$t('vps.on')}}</v-chip>
                                <v-chip v-else label class="red white--text">{{$t('vps.off')}}</v-chip>
                            </v-card-row>
                            <v-card-row>

                                {{$t('vps.virtualization')}}:
                                {{ {kvm: 'KVM', openvz: 'OpenVZ'}[vps.virt] }}
                            </v-card-row>
                            <v-card-row v-if="vps.ip">

                                {{$t('vps.ips')}}:
                                 0">{{vps.ip.main}}
                                {{vps.ip.main}}

                                	, {{item}}

                            </v-card-row>
                        </v-col>
                        <v-col md6 xs12>
                            <v-card-row v-if="on">

                                {{$t('vps.uptime')}}:
                                {{upfrom | prettyDateFormat}}
                                - {{upfrom | prettyDateFrom}}
                            </v-card-row>
                            <v-card-row>

                                {{$t('vps.createdat')}}:
                                {{vps.created_at | prettyDateFormat}}
                                - {{vps.created_at | prettyDateFrom}}
                            </v-card-row>
                            <v-card-row v-if="locked">

                                {{$t('vps.lockedfrom')}}:
                                {{vps.payed_to | prettyDateFormat}}
                                - {{vps.payed_to | prettyDateFrom}}
                            </v-card-row>
                            <v-card-row v-else>

                                {{$t('vps.activeto')}}:
                                {{vps.payed_to | prettyDateFormat}}
                                - {{vps.payed_to | prettyDateFrom}}
                            </v-card-row>
                        </v-col>
                    </v-row>
                </v-card-text>
                <v-card-row v-if="!locked" actions style="justify-content: flex-start">
                    <v-modal v-if="on" v-model="disableModal">
                        <v-btn slot="activator" error
                            :loading="changingStatus" :disabled="changingStatus"
                            class="white--text">
                            {{$t('vps.disable.submit')}}
                        </v-btn>
                        <v-card>
                          <v-card-text>

{{$t('vps.disable.header', {id: id, name: wrappedName})}}

                          </v-card-text>
                          <v-card-text class="subheading">{{$t('vps.disable.description')}}</v-card-text>
                          <v-card-row actions>
                            <v-spacer></v-spacer>
                            <v-btn flat v-on:click.native="disableModal = false" class="primary--text">{{$t('vps.disable.cancel')}}</v-btn>
                            <v-btn flat v-on:click.native="disable" class="primary--text">{{$t('vps.disable.submit')}}</v-btn>
                          </v-card-row>
                        </v-card>
                    </v-modal>
                    <v-modal v-if="on" v-model="rebootModal">
                        <v-btn slot="activator" warning
                            :loading="changingStatus" :disabled="changingStatus"
                            class="white--text">
                            {{$t('vps.reboot.submit')}}
                        </v-btn>
                        <v-card>
                          <v-card-text>

{{$t('vps.reboot.header', {id: id, name: wrappedName})}}

                          </v-card-text>
                          <v-card-text class="subheading">{{$t('vps.reboot.description')}}</v-card-text>
                          <v-card-row actions>
                            <v-spacer></v-spacer>
                            <v-btn flat v-on:click.native="rebootModal = false" class="primary--text">{{$t('vps.reboot.cancel')}}</v-btn>
                            <v-btn flat v-on:click.native="reboot" class="primary--text">{{$t('vps.reboot.submit')}}</v-btn>
                          </v-card-row>
                        </v-card>
                    </v-modal>
                    <v-btn v-if="off" success v-on:click.native="enable"
                        :loading="changingStatus" :disabled="changingStatus"
                        class="white--text">
                        {{$t('vps.turn_on')}}
                    </v-btn>
                </v-card-row>
            </v-card>

            <v-card v-if="on">
                <v-card-row class="grey darken-3">
                    <v-card-title class="white--text">{{$t('vps.resources')}}</v-card-title>
                </v-card-row>
                <v-card-text>
                    <v-row>
                        <v-col md6 xs12>

{{$t('vps.cpu')}}: {{vps.cpu}}%

                            <progress-linear-color v-model="vps.cpu"></progress-linear-color>
                        </v-col>
                        <v-col md6 xs12>

{{$t('vps.ram')}}: {{ram}}% ({{vps.mem_mb}} MB/{{vps.max_mem_mb}} MB)

                            <progress-linear-color v-model="ram"></progress-linear-color>
                        </v-col>
                        <v-col md6 xs12 v-if="vps.virt == 'openvz'">

{{$t('vps.disk')}}: {{disk}}% ({{vps.disk_mb | mb_to_gb}}/{{vps.max_disk_mb | mb_to_gb}})

                            <progress-linear-color v-model="disk"></progress-linear-color>
                        </v-col>
                        <v-col md6 xs12 v-if="vps.virt == 'openvz'">

{{$t('vps.swap')}}: {{swap}}% ({{vps.swap_mb}} MB/{{vps.max_swap_mb}} MB)

                            <progress-linear-color v-model="swap"></progress-linear-color>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col md6 xs12>

{{$t('vps.network_rt')}}:

                            <v-chip label outline class="green green--text">

                                {{vps.net_in_bps | prettyBytes}}/s
                            </v-chip>
                            <v-chip label outline class="blue blue--text">

                                {{vps.net_out_bps | prettyBytes}}/s
                            </v-chip>
                        </v-col>
                        <v-col md6 xs12>

{{$t('vps.network_all')}}:

                            <v-chip label outline class="green green--text">

                                {{vps.net_in_b | prettyBytes}}
                            </v-chip>
                            <v-chip label outline class="blue blue--text">

                                {{vps.net_out_b | prettyBytes}}
                            </v-chip>
                        </v-col>
                    </v-row>
                    <v-row v-if="vps.virt == 'kvm'">
                        <v-col md6 xs12>

{{$t('vps.disk_rt')}}:

                            <v-chip label outline class="green green--text">

                                {{vps.disk_read_bps | prettyBytes}}/s
                            </v-chip>
                            <v-chip label outline class="blue blue--text">

                                {{vps.disk_write_bps | prettyBytes}}/s
                            </v-chip>
                        </v-col>
                        <v-col md6 xs12>

{{$t('vps.disk_all')}}:

                            <v-chip label outline class="green green--text">

                                {{vps.disk_read_b | prettyBytes}}
                            </v-chip>
                            <v-chip label outline class="blue blue--text">

                                {{vps.disk_write_b | prettyBytes}}
                            </v-chip>
                        </v-col>
                    </v-row>
                </v-card-text>
            </v-card>
            <v-row>
                <v-col md6 xs12>

                    <v-card v-if="!locked">
                        <v-card-row class="grey darken-3">
                            <v-card-title class="white--text">{{$t('vps.settings')}}</v-card-title>
                        </v-card-row>
                        <v-card-text>
                            <v-card-row>

                                <v-text-input
                                    v-model="newname"
                                    :label="$t('vps.name')"
                                    :placeholder="$t('vps.placeholder.name')">
                                    {{vps.name}}
                                </v-text-input>
                            </v-card-row>
                        </v-card-text>
                        <v-card-row actions style="justify-content: flex-start">
                            <v-btn :loading="changingSettings" :disabled="!settingsChanged"
                                success v-on:click.native="save" class="white--text">
                                {{$t('vps.save')}}
                            </v-btn>
                        </v-card-row>
                    </v-card>
                </v-col>
                <v-col md6 xs12>

                    <v-card v-if="!locked && vps.virt === 'kvm' && vps.ip">
                        <v-card-row class="grey darken-3">
                            <v-card-title class="white--text">{{$t('vpsip.header')}}</v-card-title>
                        </v-card-row>
                        <v-list two-line>
                            <v-list-item>
                                <v-list-tile>
                                  <v-list-tile-content>
                                    <v-list-tile-title>{{vps.ip.main}}</v-list-tile-title>
                                    <v-list-tile-sub-title>{{$t('vps.ipmain')}}</v-list-tile-sub-title>
                                  </v-list-tile-content>
                                  <v-list-tile-action>
                                    <v-btn icon ripple v-on:click.native="goToIp(vps.ip.main)">
                                      <v-icon class="black--text">settings</v-icon>
                                    </v-btn>
                                  </v-list-tile-action>
                                </v-list-tile>
                            </v-list-item>
                            <v-list-item v-for="(item, index) in vps.ip.additional">
                                <v-list-tile>
                                  <v-list-tile-content>
                                    <v-list-tile-title>{{item}}</v-list-tile-title>
                                    <v-list-tile-sub-title>{{$t('vps.padditional')}}</v-list-tile-sub-title>
                                  </v-list-tile-content>
                                  <v-list-tile-action>
                                    <v-btn icon ripple v-on:click.native="goToIp(item)">
                                      <v-icon class="black--text">settings</v-icon>
                                    </v-btn>
                                  </v-list-tile-action>
                                </v-list-tile>
                            </v-list-item>
                        </v-list>
                    </v-card>
                </v-col>
            </v-row>

        </v-container>

</template>


[fix] key value aggregation in diagnosis

<template>
  <view-base
    :queries="queries" @queries-response="onQueriesResponse" queries-wait
    ref="view"
  >
    <template #top-bar-group-right>

        <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}

    </template>

    <template #top>

        {{ $t(reports ? 'diagnosis_explanation' : 'diagnosis_first_run') }}

          <icon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}

    </template>

    <card
      v-for="report in reports" :key="report.id"
      collapsable :collapsed="report.noIssues"
      no-body button-unbreak="lg"
    >

      <template #header>

{{ report.description }}

      </template>

      <template #header-buttons>

          <icon iname="refresh" /> {{ $t('rerun_diagnosis') }}

      </template>

        {{ $t('last_ran') }} {{ report.timestamp | distanceToNow(true, true) }}

            <icon :iname="item.icon" class="mr-1" />

                <icon iname="bell" /> {{ $t('unignore') }}

                <icon iname="bell-slash" /> {{ $t('ignore') }}

              <b-button
                v-if="item.details"
                size="sm" variant="outline-dark" class="ml-lg-2 mt-2 mt-lg-0"
                v-b-toggle="`collapse-${report.id}-item-${i}`"
              >
                <icon iname="level-down" /> {{ $t('details') }}

          <b-collapse v-if="item.details" :id="`collapse-${report.id}-item-${i}`">

    </card>

    <template #skeleton>
      <card-list-skeleton />

        <template #header>

        </template>

      <card-list-skeleton />
    </template>
  </view-base>
</template>


issue #114 "edit flow not able to load updated data" resolved

<template>

      <Row>
        <Col v-show="loading" class="demo-spin-col" span="24" style="margin-top:35px;">
            <Spin fix>
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>

Loading

            </Spin>
        </Col>
      </Row>
      <Row>
        <Col v-show="!loading" span="24">
          <Split style="height: calc(100vh - 97.51px);">
            <SplitArea :size="80" :minSize="800">

            </SplitArea >
            <SplitArea :size="20" :minSize="200">
              <Tooltip content="Save" placement="left" class="upload-icon">

              </Tooltip>

            </SplitArea>
          </Split>
        </Col>
      </Row>

</template>

<template>

      <Row>
        <Col v-show="loading" class="demo-spin-col" span="24">
            <Spin fix>
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>

Loading

            </Spin>
        </Col>
      </Row>
      <Row>
        <Col v-show="!loading" span="24">
          <Split style="height: calc(100vh - 97.51px);">
            <SplitArea :size="80" :minSize="800">

            </SplitArea >
            <SplitArea :size="20" :minSize="200">
              <Tooltip content="Save" placement="left" class="upload-icon">

              </Tooltip>

            </SplitArea>
          </Split>
        </Col>
      </Row>

</template>


规范代码格式

规范代码格式

<template>

      <mt-swipe :auto="4000"  >
				<mt-swipe-item
				v-for = 'item in topStories'
				:key ='item.id'>

							{{item.title}}

				</mt-swipe-item>
      </mt-swipe>

	<news-list
	:stories = 'stories'></news-list>

</template>


Disable and show loading on buttons while changing status

<template>

        <v-container>
            <v-card>
                <v-card-row class="green darken-1">
                    <v-card-title class="white--text">{{$t('vpsip.header')}}</v-card-title>
                </v-card-row>
                <v-card-text v-if="loadedStatus">
                    <v-card-row>
                        {{$t('vpsip.status.label')}}:
                        <v-chip v-if="status.enable_pending" label class="yellow">
                            {{$t('vpsip.status.enabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.disable_pending" label class="yellow">
                            {{$t('vpsip.status.disabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.enabled" label class="green white--text">
                            {{$t('vpsip.status.enabled')}}
                        </v-chip>
                        <v-chip v-else label class="red white--text">
                            {{$t('vpsip.status.disabled')}}
                        </v-chip>
                    </v-card-row>
                </v-card-text>
                <v-table-overflow v-if="loadedRules">

                            {{$t('table.id')}}
                            {{$t('table.protocol')}}
                            {{$t('table.ports')}}
                            {{$t('table.status')}}

                                    <v-checkbox v-bind:id="'checkbox' + index" filled class="text-xs-center"></v-checkbox>

                                #{{item.id}}
                                {{item.protocol}}
                                {{item.port_range.from}}
                                {{item.port_range.from}} - {{item.port_range.to}}

                                        {{$t('vpsip.rule.creating')}}

                                        {{$t('vpsip.rule.deleting')}}

                                        {{$t('vpsip.rule.created')}}

                                    {{ $t('table.empty.rules') }}

                </v-table-overflow>
                <v-card-row actions style="justify-content: flex-start" v-if="loadedStatus">
                    <v-btn success v-if="(!status.enabled || status.enable_pending) && !status.disable_pending" v-on:click.native="enable"
                        :loading="changingStatus" :disabled="changingStatus">
                        {{$t('vpsip.enable')}}
                    </v-btn>
                    <v-btn error v-if="(status.enabled || status.disable_pending) && !status.enable_pending" v-on:click.native="disable"
                        :loading="changingStatus" :disabled="changingStatus">
                        {{$t('vpsip.disable')}}
                    </v-btn>
                </v-card-row>
            </v-card>
        </v-container>

</template>

<template>

        <v-container>
            <v-card>
                <v-card-row class="green darken-1">
                    <v-card-title class="white--text">{{$t('vpsip.header')}}</v-card-title>
                </v-card-row>
                <v-card-text v-if="loadedStatus">
                    <v-card-row>
                        {{$t('vpsip.status.label')}}:
                        <v-chip v-if="status.enable_pending" label class="yellow">
                            {{$t('vpsip.status.enabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.disable_pending" label class="yellow">
                            {{$t('vpsip.status.disabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.enabled" label class="green white--text">
                            {{$t('vpsip.status.enabled')}}
                        </v-chip>
                        <v-chip v-else label class="red white--text">
                            {{$t('vpsip.status.disabled')}}
                        </v-chip>
                    </v-card-row>
                </v-card-text>
                <v-table-overflow v-if="loadedRules">

                            {{$t('table.id')}}
                            {{$t('table.protocol')}}
                            {{$t('table.ports')}}
                            {{$t('table.status')}}

                                    <v-checkbox v-bind:id="'checkbox' + index" filled class="text-xs-center"></v-checkbox>

                                #{{item.id}}
                                {{item.protocol}}
                                {{item.port_range.from}}
                                {{item.port_range.from}} - {{item.port_range.to}}

                                        {{$t('vpsip.rule.creating')}}

                                        {{$t('vpsip.rule.deleting')}}

                                        {{$t('vpsip.rule.created')}}

                                    {{ $t('table.empty.rules') }}

                </v-table-overflow>
                <v-card-row actions style="justify-content: flex-start" v-if="loadedStatus">
                    <v-btn success v-if="!status.enabled" v-on:click.native="enable">
                        {{$t('vpsip.enable')}}
                    </v-btn>
                    <v-btn error v-if="!status.disabled" v-on:click.native="disable">
                        {{$t('vpsip.disable')}}
                    </v-btn>
                </v-card-row>
            </v-card>
        </v-container>

</template>


update navbar links

update navbar links

<template>

					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						Toggle navigation

					</button>
					Amazon eBook

Book (current)

Reviews

Author

Purchase

        </template>

<template>

					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						Toggle navigation

					</button>
					Amazon eBook

Book (current)

Reviews

Author

Contact

        </template>


remove debug background color

remove debug background color

<template>
  <novo-section>

{{ title }}:

      <slot />

  </novo-section>
</template>


added no notification message

added no notification message

<template>

                    Notifications

                             No notifications

        <left-panel style="order: 0;"></left-panel>
        <right-panel style="order: 2;"></right-panel>

</template>

<template>

                    Notifications

        <left-panel style="order: 0;"></left-panel>
        <right-panel style="order: 2;"></right-panel>

</template>


Fix navigation appearing over preview

Fix navigation appearing over preview


Delete Uploads.vue

Delete Uploads.vue


Correção do Bug no Switch

Correção do Bug no Switch

<template>

                <input type="checkbox" id="exibicao" v-model="estadoCheck"/>
                Exibir Disponiveis

                    Disciplina
                    Unidade
                    Data
                    Horário
                    Sala
                    Vagas
                    Editar
                    Ativo

                    {{ horario.disciplina }}
                    {{ horario.unidade }}
                    {{ horario.data | dataFormatada }}
                    {{ horario.data | horarioFormatado }}
                    {{ horario.sala }}
                    {{ horario.vagas }}

                        edit

                            <input type = "checkbox" :checked="horario.status" @change="alterarStatus(horario, $event)">

chevron_left

1

2

3

4

5

chevron_right

</template>

<template>

                <input type="checkbox" id="exibicao" v-model="estadoCheck"/>
                Exibir Disponiveis

                    Disciplina
                    Unidade
                    Data
                    Horário
                    Sala
                    Vagas
                    Editar
                    Ativo

                    {{ horario.disciplina }}
                    {{ horario.unidade }}
                    {{ horario.data | dataFormatada }}
                    {{ horario.data | horarioFormatado }}
                    {{ horario.sala }}
                    {{ horario.vagas }}

                        edit

                            <input type = "checkbox" :checked="horario.status" @change="alterarStatus(horario)">

chevron_left

1

2

3

4

5

chevron_right

</template>


Refactoring

Refactoring

<template>
    <span>{{ tweeningValue }}</span>
</template>

<script>
    let Tween = require('@tweenjs/tween.js');

    export default {
        name: "animated-integer",
        props: {
            value: {
                type: Number,
                required: true
            }
        },
        data: function () {
            return {
                tweeningValue: 0
            }
        },
        watch: {
            value: function (newValue, oldValue) {
                this.tween(oldValue, newValue)
            }
        },
        mounted: function () {
            this.tween(0, this.value)
        },
        methods: {
            tween: function (startValue, endValue) {
                let vm = this
                function animate () {
                    if (Tween.update()) {
                        requestAnimationFrame(animate)
                    }
                }

                new Tween.Tween({ tweeningValue: startValue })
                    .to({ tweeningValue: endValue }, 500)
                    .onUpdate(function (object) {
                        vm.tweeningValue = object.tweeningValue.toFixed(0)
                    })
                    .start()

                animate()
            }
        }
    }
</script>

<template>
    <span>{{ tweeningValue }}</span>
</template>

<script>
    let TWEEN = require('@tweenjs/tween.js');

    export default {
        name: "animated-integer",
        props: {
            value: {
                type: Number,
                required: true
            }
        },
        data: function () {
            return {
                tweeningValue: 0
            }
        },
        watch: {
            value: function (newValue, oldValue) {
                this.tween(oldValue, newValue)
            }
        },
        mounted: function () {
            this.tween(0, this.value)
        },
        methods: {
            tween: function (startValue, endValue) {
                let vm = this
                function animate () {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate)
                    }
                }

                new TWEEN.Tween({ tweeningValue: startValue })
                    .to({ tweeningValue: endValue }, 500)
                    .onUpdate(function (object) {
                        vm.tweeningValue = object.tweeningValue.toFixed(0)
                    })
                    .start()

                animate()
            }
        }
    }
</script>


Include .jpg and .jpeg filter

Include .jpg and .jpeg filter

<template>

        {{ $t("productions.edit_title") }} {{ productionToEdit.name }}

        {{ $t("productions.new_production") }}

      <form v-on:submit.prevent>
        <text-field
          ref="nameField"
          :label="$t('productions.fields.name')"
          v-model="form.name"
          @enter="runConfirmation"
          v-focus
        />
        <combobox v-if="productionToEdit && productionToEdit.id"
          :label="$t('productions.fields.status')"
          :options="productionStatusOptions"
          localeKeyPrefix="productions.status."
          @enter="runConfirmation"
          v-model="form.project_status_id"
        />
        <combobox
          :label="$t('productions.fields.type')"
          :options="productionTypeOptions"
          localeKeyPrefix="productions.type."
          @enter="runConfirmation"
          v-model="form.production_type"
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="fpsField"
          :label="$t('productions.fields.fps')"
          v-model="form.fps"
          @enter="runConfirmation"
          v-focus
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="ratioField"
          :label="$t('productions.fields.ratio')"
          v-model="form.ratio"
          @enter="runConfirmation"
          v-focus
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="resolutionField"
          :label="$t('productions.fields.resolution')"
          v-model="form.resolution"
          @enter="runConfirmation"
          v-focus
        />

          {{ $t("productions.picture") }}
          <file-upload
            ref="fileField"
            accept=".png,.jpg,.jpeg"
            @fileselected="onFileSelected"
          />

      </form>

          {{ $t("main.confirmation") }}

        <router-link
          :to="cancelRoute"
          class="button is-link"
          v-if="cancelRoute"
        >
          {{ $t("main.cancel") }}
        </router-link>
        <button
          @click="$emit('cancel')"
          class="button is-link"
          v-else
        >
          {{ $t("main.cancel") }}
        </button>

        {{ $t("assets.edit_fail") }}

</template>

<template>

        {{ $t("productions.edit_title") }} {{ productionToEdit.name }}

        {{ $t("productions.new_production") }}

      <form v-on:submit.prevent>
        <text-field
          ref="nameField"
          :label="$t('productions.fields.name')"
          v-model="form.name"
          @enter="runConfirmation"
          v-focus
        />
        <combobox v-if="productionToEdit && productionToEdit.id"
          :label="$t('productions.fields.status')"
          :options="productionStatusOptions"
          localeKeyPrefix="productions.status."
          @enter="runConfirmation"
          v-model="form.project_status_id"
        />
        <combobox
          :label="$t('productions.fields.type')"
          :options="productionTypeOptions"
          localeKeyPrefix="productions.type."
          @enter="runConfirmation"
          v-model="form.production_type"
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="fpsField"
          :label="$t('productions.fields.fps')"
          v-model="form.fps"
          @enter="runConfirmation"
          v-focus
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="ratioField"
          :label="$t('productions.fields.ratio')"
          v-model="form.ratio"
          @enter="runConfirmation"
          v-focus
        />
        <text-field v-if="productionToEdit && productionToEdit.id"
          ref="resolutionField"
          :label="$t('productions.fields.resolution')"
          v-model="form.resolution"
          @enter="runConfirmation"
          v-focus
        />

          {{ $t("productions.picture") }}
          <file-upload
            ref="fileField"
            accept=".png"
            @fileselected="onFileSelected"
          />

      </form>

          {{ $t("main.confirmation") }}

        <router-link
          :to="cancelRoute"
          class="button is-link"
          v-if="cancelRoute"
        >
          {{ $t("main.cancel") }}
        </router-link>
        <button
          @click="$emit('cancel')"
          class="button is-link"
          v-else
        >
          {{ $t("main.cancel") }}
        </button>

        {{ $t("assets.edit_fail") }}

</template>


find index of new paragraph ops

find index of new paragraph ops

<docs>
  # wysiwyg

  A multi-line text input which allows a rich editing experience. Uses [Quill](http://quilljs.com/).

  ## Arguments

  * **buttons** _(optional)_  array of button names (strings) or groups (arrays) for text styling, passed directly into Quill (defaults to "remove formatting")
  * **styled** _(optional)_   style the content editable element like our `text` and `textarea` inputs.
  * **type** _(optional)_ `single-line`, `multi-line`, or `multi-component`. (defaults to `single-line`)
  * **pseudoBullet** _(optional)_ boolean to enable tab to create pseudo bullet points
  * **paste** _(optional)_ array of paste rules for parsing pasted content and creating new components

  The buttons allowed in our wysiwyg behavior are [defined in Quill's documentation](http://quilljs.com/docs/modules/toolbar/)

  By default, wysiwyg fields will use the styles of the containing component. To use our kiln input styling, set `styled` to `true`.

  The default `type` -- `single-line` -- allows entering one line of rich text, but prevents users from creating new paragraphs or applying paste rules.

  `multi-line` is used for components like blockquotes or lists, and allows paste rules to create new block-level elements in the same component's field (but not create different components).

  `multi-component` enables more affordances, including:

  * keyboard navigation across components (up and down arrows)
  * enter creating new components (and splitting text in front of the cursor into them)
  * delete removing components (and merging text in front of the cursor into the previous component)
  * full paste rule affordances, including creating different components

  **Paste** is an optional array of pasting rules that's used for parsing and creating different components. This is useful for transforming pasted links into embeds, catching pasted blockquotes, etc. Rules have these properties:

  * `match` - regex to match the pasted content. all rules will be wrapped in `^` and `$` (so they don't match urls _inside_ links in the content)
  * `matchLink` - boolean to determine whether _links_ containing the regex should also match. Should be true for embeds, false for components that could potentially contain links inside them.
  * `component` - the name of the component that should be created
  * `field` - the name of the field that the captured data should be populated to on the new component. the (last) new component will focus this field after it's added (note: this is limited to a single regex capture group)
  * `group` - (optional) the group that should be focused when the (last) new component is added (instead of the specific field). this is useful for components with forms that contain both the specified field and other things, and preserves the same editing experience as editing that component normally

  ## Example

  ```
  text:
    _placeholder:
      height: 50px
      text: New Paragraph
      required: true
    _display: inline
    _has:
      -
        fn: wysiwyg
        type: 'multi-component'
        pseudoBullet: true
        styled: false
        buttons:
          - bold
          - italic
          - strikethrough
          - link
        paste:
          -
            match: (https?://twitter\.com/\w+?/status/\d+)
            matchLink: true
            component: clay-tweet
            field: url
          -
            match: (https?://www\.facebook\.com/.+?/posts/\d+)
            matchLink: true
            component: clay-facebook-post
            field: url
            group: inlineForm
          -
            match: <blockquote>(.*?)(?:</blockquote>)?
            component: blockquote
            field: text
          -
            match: (.*)
            component: clay-paragraph
            field: text
  ```
</docs>

<template>

</template>


Fix default settings of visitedAt in filter #231

<template>

                            Tags

                                {{ tag.name }}

                            <mdicon name="CloseCircleOutline" size="18" />

                            Beobachtung

                            <mdicon name="CloseCircleOutline" size="18"/>

                            Einzelgespräch

                            <mdicon name="CloseCircleOutline" size="18"/>

                            Ort

                            <mdicon name="CloseCircleOutline" size="18"/>

                            Team

                    <datalist id="team-name-for-wayPoint-list">
                        <option v-for="teamName in teamNames">{{ teamName }}</option>
                    </datalist>

                            <mdicon name="CloseCircleOutline" size="18" />

                            Ankunft

                    <date-range-picker
                        ref="picker"
                        class="form-control"
                        v-model="filter.visitedAt"
                        :ranges="ranges"
                        :locale-data="locale"
                        auto-apply
                        show-dropdowns
                        opens="right"
                        :readonly="isLoading"
                        :disabled="isLoading"
                        @update="handleFilterChange"
                    >
                    </date-range-picker>

                            <mdicon
                                v-if="isLoading"
                                name="loading"
                                size="18"
                                spin
                            />
                            <mdicon
                                v-else
                                size="18"
                                name="calendar"
                            />

                            <mdicon name="CloseCircleOutline" size="18" />

                    {{ this.totalRows > 5000 ? 5000 : this.totalRows }} Wegpunkt{{ this.totalRows !== 1 ? 'e' : '' }} als .csv-Datei exportieren
                    <mdicon
                        :name="isExportLoading ? 'Loading' : 'Download'"
                        :spin="isExportLoading"
                    />

            <template v-slot:cell(note)="row">
                <div
                    :id="`tooltip-target-note-${ row.item.id }`"
                    class="mw-25"
                >
                    <nl2br
                        tag="div"
                        :text="row.item.note.trim()"
                        class-name="text-truncate"
                    />

                <b-tooltip :target="`tooltip-target-note-${ row.item.id }`" triggers="hover click">
                    <nl2br
                        tag="div"
                        :text="row.item.note.trim()"
                    />

            </template>
            <template v-slot:cell(oneOnOneInterview)="row">
                <div
                    :id="`tooltip-target-oneOnOneInterview-${ row.item.id }`"
                    class="mw-25"
                >
                    <nl2br
                        tag="div"
                        :text="row.item.oneOnOneInterview.trim()"
                        class-name="text-truncate"
                    />

                <b-tooltip :target="`tooltip-target-oneOnOneInterview-${ row.item.id }`" triggers="hover click">
                    <nl2br
                        tag="div"
                        :text="row.item.oneOnOneInterview.trim()"
                    />

            </template>
            <template v-slot:cell(actions)="row">

                    <router-link
                        :to="{name: 'WayPointDetail', params: { wayPointId: row.item.id, walkId: getWalkByIri(row.item.walk).id }}"
                        :data-test="`button-wegpunkt-ansehen-${ row.item.lcoationName }`"
                    >

                            Wegpunkt ansehen

                    </router-link>

            </template>

</template>


Forget a , after closing

Forget a , after closing

<template>

{{ config.title }}

        <partial :name="config.template"></partial>

</template>


Refactor

Refactor

<template>

	<ui-card>
		<template #title><fa :icon="faBroadcastTower"/> {{ $t('announcements') }}</template>

			<ui-input v-model="announcement.title" @change="save">
				{{ $t('title') }}
			</ui-input>
			<ui-textarea v-model="announcement.text">
				{{ $t('text') }}
			</ui-textarea>
			<ui-input v-model="announcement.image">
				{{ $t('image-url') }}
			</ui-input>
			<ui-horizon-group class="fit-bottom">
				<ui-button @click="save()"><fa :icon="['far', 'save']"/> {{ $t('save') }}</ui-button>
				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> {{ $t('remove') }}</ui-button>
			</ui-horizon-group>

			<ui-button @click="add"><fa :icon="faPlus"/> {{ $t('add') }}</ui-button>

	</ui-card>

</template>

<template>

	<ui-card>
		<template #title><fa icon="broadcast-tower"/> {{ $t('announcements') }}</template>

			<ui-input v-model="announcement.title" @change="save">
				{{ $t('title') }}
			</ui-input>
			<ui-textarea v-model="announcement.text">
				{{ $t('text') }}
			</ui-textarea>
			<ui-input v-model="announcement.image">
				{{ $t('image-url') }}
			</ui-input>
			<ui-horizon-group class="fit-bottom">
				<ui-button @click="save()"><fa :icon="['far', 'save']"/> {{ $t('save') }}</ui-button>
				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> {{ $t('remove') }}</ui-button>
			</ui-horizon-group>

			<ui-button @click="add"><fa icon="plus"/> {{ $t('add') }}</ui-button>

	</ui-card>

</template>


update: enable submit message

update: enable submit message

<template>

          {{message.name}}

{{message.text}}

        <button class="toolbar__actionbutton" type="button">action</button>

        <input class="inputarea__text" type="text" ref="text" />
        <button
          class="inputarea__submit"
          type="submit"
          v-on:click="submitMessage($refs.text.value)"
          v-on:click:enter="submitMessage($refs.text.value)"
        >send</button>

</template>

<template>

      {{messageDatas}}

          {{message.name}}

{{message.text}}

          <button class="toolbar__actionbutton" type="button">action</button>

          <input class="inputarea__text" type="text" />
          <button class="inputarea__submit" type="submit">send</button>

</template>


Improve asset type modal experience

Improve asset type modal experience

<template>

        {{ $t("asset_types.edit_title") }} {{ assetTypeToEdit.name }}

        {{ $t("asset_types.new_asset_type") }}

      <form v-on:submit.prevent>
        <text-field
          ref="nameField"
          :label="$t('asset_types.fields.name')"
          v-model="form.name"
          @enter="runConfirmation"
          v-focus
        >
        </text-field>
      </form>

          {{ $t("main.confirmation") }}

        <router-link
          :to="cancelRoute"
          class="button is-link">
          {{ $t("main.cancel") }}
        </router-link>

</template>

<template>

        {{ $t("asset_types.edit_title") }} {{ assetTypeToEdit.name }}

        {{ $t("asset_types.new_asset_type") }}

      <form v-on:submit.prevent>
        <text-field
          ref="nameField"
          :label="$t('asset_types.fields.name')"
          v-model="form.name"
          v-focus
        >
        </text-field>
      </form>

          {{ $t("main.confirmation") }}

        <router-link
          :to="cancelRoute"
          class="button is-link">
          {{ $t("main.cancel") }}
        </router-link>

</template>


quick label fix

quick label fix

<template>

Not Found

The page you are looking for was not found.

        <fieldset id="summary_fieldset" class="detail-section mb-3">
          <legend>
            Well Summary

              <router-link v-if="show.edit" :to="{ name: 'SubmissionsEdit', params: { id: $route.params.id } }" class="mr-3">
                <button class="btn btn-primary mb-1">Edit</button>
              </router-link>

          </legend>

            Well Tag Number: {{ well.well_tag_number }}
            Well Status: {{ well.well_status }}
            Observation Well Number:
              <a
                v-if="well.observation_well_number"
                id="obs_well_number"
                :href="`https://governmentofbc.maps.arcgis.com/apps/webappviewer/index.html?id=b53cb0bf3f6848e79d66ffd09b74f00d&find=OBS%20WELL%20${well.observation_well_number}`"
              >
                {{ well.observation_well_number }}

            Well Identification Plate Number: {{ well.identification_plate_number }}
            Well Class: {{ well.well_class }}
            Observation Well Status: {{ well.observation_well_status }}

            Owner Name: {{ well.owner_full_name }}
            Well Subclass: {{ well.subclass }}
            Environmental Monitoring System (EMS) ID: {{ well.ems || well.ems_id }}

            Intended Water Use: {{ well.intended_water_use }}
            Aquifer Number:
              <router-link :to="{ name: 'aquifers-view', params: { id: well.aquifer } }">
                {{ well.aquifer }}
              </router-link>

            Alternative specs submitted: {{ well.alternative_specs_submitted }}

        </fieldset>

        <fieldset id="jump_links_fieldset" class="d-print-none detail-section my-3">
            <legend>Sections</legend>

Location Information

Well Activity

Well Work Dates

Well Completion Data and Artesian Flow

Lithology

Casing Details

Surface Seal and Backfill Details

Liner Details

Screen Details

Well Development

Well Yield

Well Decommissioning

Comments

Documentation

Disclaimer

        </fieldset>

        <fieldset id="well_licensing_fieldset" class="my-3 detail-section">
          <legend>Licensing Information</legend>

            Licensed Status: {{ licence ? licence.status : '' }}
            Licence Number: {{ licence ? licence.number : '' }}

        </fieldset>

        <fieldset id="location_information_fieldset" class="my-3 detail-section">
          <legend>Location Information</legend>

                Street Address: {{ well.street_address }}

                Town/City: {{ well.city }}

Legal Description:

                          Lot
                          {{ well.legal_lot }}

                          Plan
                          {{ well.legal_plan }}

                          District Lot
                          {{ well.legal_district_lot }}

                          Block
                          {{ well.legal_block }}

                          Section
                          {{ well.legal_section }}

                          Township
                          {{ well.legal_township }}

                          Range
                          {{ well.legal_range }}

                          Land District
                          {{ well.land_district }}

                          Property Identification Description (PID)
                          {{ well.legal_pid }}

                      Description of Well Location: {{ well.well_location_description }}

                <single-well-map :latitude="Number(well.latitude)" :longitude="Number(well.longitude)" :draggable="false"></single-well-map>

Geographic Coordinates - North American Datum of 1983 (NAD 83)

                Latitude: {{well.latitude}}
                Longitude: {{well.longitude}}

                UTM Easting: {{ UTM.easting ? Math.round(UTM.easting) : ''}}
                UTM Northing: {{ UTM.northing ? Math.round(UTM.northing) : ''}}

                Zone: {{UTM.zone}}
                Location Accuracy Code: {{well.location_accuracy_code}}

        </fieldset>

        <fieldset id="well_activity_fieldset" class="my-3 detail-section">
          <legend>Well Activity</legend>

            <template slot="create_date" slot-scope="data">

                {{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}

            </template>

           submissionsPerPage" size="md" :total-rows="well.submission_work_dates.length" v-model="submissionsPage" :per-page="submissionsPerPage" />
        </fieldset>

        <fieldset id="well_work_dates_fieldset" class="my-3 detail-section">
          <legend>Well Work Dates</legend>

        </fieldset>

        <fieldset id="well_completion_data_fieldset" class="my-3 detail-section">
          <legend>Well Completion Data</legend>

            Total Depth Drilled: {{ well.total_depth_drilled }} {{ well.total_depth_drilled ? 'feet':''}}
            Static Water Level (BTOC): {{ well.static_water_level }} {{ well.static_water_level ? 'feet': ''}}
            Well Cap: {{ well.well_cap_type }}

            Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
            Estimated Well Yield: {{ well.well_yield }} {{ well.well_yield ? 'USGPM': ''}}
            Well Disinfected Status: {{ well.well_disinfected_status }}

            Final Casing Stick Up: {{ well.final_casing_stick_up }} {{ well.final_casing_stick_up ? 'inches':''}}
            Artesian Flow: {{ well.artesian_flow }} {{ well.artesian_flow ? 'USGPM': ''}}

              Drilling Method 1">s:
              <span v-for="(method, index) in well.drilling_methods" :key="`drillingMethod${index}`"> 0">, {{ method.description }}

            Depth to Bedrock: {{ well.bedrock_depth }} {{ well.bedrock_depth ? 'feet':''}}
            Artesian Pressure: {{ well.artesian_pressure }} {{ well.artesian_pressure ? 'feet': ''}}
            Orientation of Well: {{ well.well_orientation }}

            Ground elevation: {{ well.ground_elevation }}
            Method of determining elevation: {{ well.ground_elevation_method }}

        </fieldset>

        <fieldset id="lithology_fieldset" class="my-3 detail-section">
          <legend>Lithology</legend>

        </fieldset>

        <fieldset id="casing_fieldset" class="my-3 detail-section">
          <legend>Casing Details</legend>

              <template slot="from" slot-scope="data">{{data.item.start}}</template>
              <template slot="HEAD_from" slot-scope="data">{{ data.label }} (ft)</template>
              <template slot="to" slot-scope="data">{{data.item.end}}</template>
              <template slot="HEAD_to" slot-scope="data">{{ data.label }} (ft)</template>
              <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
              <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>

        </fieldset>

        <fieldset id="surface_seal_fieldset" class="my-3 detail-section">
          <legend>Surface Seal and Backfill Details</legend>

            Surface Seal Material: {{ codeToDescription('surface_seal_materials', well.surface_seal_material) }}
            Backfill Material Above Surface Seal: {{ codeToDescription('surface_seal_materials', well.backfill_above_surface_seal) }}

            Surface Seal Installation Method: {{ codeToDescription('surface_seal_methods', well.surface_seal_method) }}
            Backfill Depth: {{ well.backfill_depth }}

            Surface Seal Thickness: {{ well.surface_seal_thickness }}

            Surface Seal Depth: {{ well.surface_seal_depth }}

        </fieldset>

        <fieldset id="liner_details_fieldset" class="my-3 detail-section">
          <legend>Liner Details</legend>

                Liner Material: {{ codeToDescription('liner_materials', well.liner_material) }}

                Liner Diameter: {{ well.liner_diameter }}
                Liner Thickness: {{ well.liner_thickness }}

                Liner from: {{ well.liner_from }}
                Liner to: {{ well.liner_to }}

Liner perforations

                <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
                <template slot="to" slot-scope="data">{{data.item.end}} ft</template>

        </fieldset>

        <fieldset id="screen_details_fieldset" class="my-3 detail-section">
          <legend>Screen Details</legend>

                Intake Method: {{ codeToDescription('screen_intake_methods', well.screen_intake_method) }}

                Type: {{ codeToDescription('screen_types', well.screen_type) }}

                Material: {{ codeToDescription('screen_materials', well.screen_material) }}

                Opening: {{ codeToDescription('screen_openings', well.screen_opening) }}

                Bottom: {{ codeToDescription('screen_bottoms', well.screen_bottom) }}

Installed Screens

                <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
                <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
                <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>

        </fieldset>

        <fieldset id="well_development_fieldset" class="my-3 detail-section">
          <legend>Well Development</legend>

            Developed by: {{ codeToDescription('development_methods', well.development_method) }}
            Development Total Duration: {{ well.development_hours }} {{ well.development_hours ? 'hours':'' }}

        </fieldset>

        <fieldset id="well_yield_fieldset" class="my-3 detail-section">
          <legend>Well Yield</legend>

No well yield data available.

          <div v-for="(productionTest, index) in well.production_data_set" :key="`ProductionDataSet${index}`">

              Estimation Method: {{codeToDescription('yield_estimation_methods', productionTest.yield_estimation_method)}}
              Estimation Rate: {{productionTest.yield_estimation_rate}}
              Estimation Duration: {{productionTest.yield_estimation_duration}}

              Static Water Level Before Test: {{productionTest.static_level}}
              Drawdown: {{productionTest.drawdown}}

              Hydrofracturing Performed: {{productionTest.hydro_fracturing_performed}}
              Increase in Yield Due to Hydrofracturing: {{productionTest.hydro_fracturing_yield_increase}}

        </fieldset>

        <fieldset id="well_decommissioning_fieldset" class="my-3 detail-section">
          <legend>Well Decommission Information</legend>

            Reason for Decommission: {{ well.decommission_reason }}
            Method of Decommission: {{ well.decommission_method }}

            Sealant Material: {{ well.sealant_material }}
            Backfill Material: {{ well.backfill_material }}

            Decommission Details: {{ well.decommission_details }}

        </fieldset>

        <fieldset id="well_comments_fieldset" class="my-3 detail-section">
          <legend>Comments</legend>

            {{ well.comments ? well.comments : 'No comments submitted' }}

            Alternative Specs Submitted: {{ well.alternative_specs_submitted === true ? "Yes" : "No" }}

        </fieldset>

        <fieldset id="documents_fieldset" class="detail-section my-3">
          <legend>Documents</legend>
          <documents :well="$route.params.id"></documents>
        </fieldset>

        <fieldset id="disclaimer_fieldset" class="detail-section my-3">
          <legend>Disclaimer</legend>

            The information provided should not be used as a basis for making financial or any other commitments. The Government of British Columbia accepts no liability for the accuracy, availability, suitability, reliability, usability, completeness or timeliness of the data or graphical depictions rendered from the data.

        </fieldset>

</template>

<template>

Not Found

The page you are looking for was not found.

        <fieldset id="summary_fieldset" class="detail-section mb-3">
          <legend>
            Well Summary

              <router-link v-if="show.edit" :to="{ name: 'SubmissionsEdit', params: { id: $route.params.id } }" class="mr-3">
                <button class="btn btn-primary mb-1">Edit</button>
              </router-link>

          </legend>

            Well Tag Number: {{ well.well_tag_number }}
            Well Status: {{ well.well_status }}
            Observation Well Number:
              <a
                v-if="well.observation_well_number"
                id="obs_well_number"
                :href="`https://governmentofbc.maps.arcgis.com/apps/webappviewer/index.html?id=b53cb0bf3f6848e79d66ffd09b74f00d&find=OBS%20WELL%20${well.observation_well_number}`"
              >
                {{ well.observation_well_number }}

            Well Identification Plate Number: {{ well.identification_plate_number }}
            Well Class: {{ well.well_class }}
            Observation Well Status: {{ well.observation_well_status }}

            Owner Name: {{ well.owner_full_name }}
            Well Subclass: {{ well.subclass }}
            Environmental Monitoring System (EMS) ID: {{ well.ems || well.ems_id }}

            Intended Water Use: {{ well.intended_water_use }}
            Aquifer Number:
              <router-link :to="{ name: 'aquifers-view', params: { id: well.aquifer } }">
                {{ well.aquifer }}
              </router-link>

            Alternative specs submitted: {{ well.alternative_specs_submitted }}

        </fieldset>

        <fieldset id="jump_links_fieldset" class="d-print-none detail-section my-3">
            <legend>Sections</legend>

Location Information

Well Activity

Well Work Dates

Well Completion Data and Artesian Flow

Lithology

Casing Details

Surface Seal and Backfill Details

Liner Details

Screen Details

Well Development

Well Yield

Well Decommissioning

Comments

Documentation

Disclaimer

        </fieldset>

        <fieldset id="well_licensing_fieldset" class="my-3 detail-section">
          <legend>Licensing Information</legend>

            Licensed Status: {{ licence ? licence.status : '' }}
            Licence Number: {{ licence ? licence.number : '' }}

        </fieldset>

        <fieldset id="location_information_fieldset" class="my-3 detail-section">
          <legend>Location Information</legend>

                Street Address: {{ well.street_address }}

                Town/City: {{ well.city }}

Legal Description:

                          Lot
                          {{ well.legal_lot }}

                          Plan
                          {{ well.legal_plan }}

                          District Lot
                          {{ well.legal_district_lot }}

                          Block
                          {{ well.legal_block }}

                          Section
                          {{ well.legal_section }}

                          Township
                          {{ well.legal_township }}

                          Range
                          {{ well.legal_range }}

                          Land District
                          {{ well.land_district }}

                          Property Identification Description (PID)
                          {{ well.legal_pid }}

                      Description of Well Location: {{ well.well_location_description }}

                <single-well-map :latitude="Number(well.latitude)" :longitude="Number(well.longitude)" :draggable="false"></single-well-map>

Geographic Coordinates - North American Datum of 1983 (NAD 83)

                Latitude: {{well.latitude}}
                Longitude: {{well.longitude}}

                UTM Easting: {{ UTM.easting ? Math.round(UTM.easting) : ''}}
                UTM Northing: {{ UTM.northing ? Math.round(UTM.northing) : ''}}

                Zone: {{UTM.zone}}
                Location Accuracy Code: {{well.location_accuracy_code}}

        </fieldset>

        <fieldset id="well_activity_fieldset" class="my-3 detail-section">
          <legend>Well Activity</legend>

            <template slot="create_date" slot-scope="data">

                {{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}

            </template>

           submissionsPerPage" size="md" :total-rows="well.submission_work_dates.length" v-model="submissionsPage" :per-page="submissionsPerPage" />
        </fieldset>

        <fieldset id="well_work_dates_fieldset" class="my-3 detail-section">
          <legend>Well Work Dates</legend>

        </fieldset>

        <fieldset id="well_completion_data_fieldset" class="my-3 detail-section">
          <legend>Well Completion Data</legend>

            Total Depth Drilled: {{ well.total_depth_drilled }} {{ well.total_depth_drilled ? 'feet':''}}
            Static Water Level (BTOC): {{ well.static_water_level }} {{ well.static_water_level ? 'feet': ''}}
            Well Cap: {{ well.well_cap_type }}

            Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
            Estimated Well Yield: {{ well.well_yield }} {{ well.well_yield ? 'USGPM': ''}}
            Well Disinfected: {{ well.well_disinfected_status }}

            Final Casing Stick Up: {{ well.final_casing_stick_up }} {{ well.final_casing_stick_up ? 'inches':''}}
            Artesian Flow: {{ well.artesian_flow }} {{ well.artesian_flow ? 'USGPM': ''}}

              Drilling Method 1">s:
              <span v-for="(method, index) in well.drilling_methods" :key="`drillingMethod${index}`"> 0">, {{ method.description }}

            Depth to Bedrock: {{ well.bedrock_depth }} {{ well.bedrock_depth ? 'feet':''}}
            Artesian Pressure: {{ well.artesian_pressure }} {{ well.artesian_pressure ? 'feet': ''}}
            Orientation of Well: {{ well.well_orientation }}

            Ground elevation: {{ well.ground_elevation }}
            Method of determining elevation: {{ well.ground_elevation_method }}

        </fieldset>

        <fieldset id="lithology_fieldset" class="my-3 detail-section">
          <legend>Lithology</legend>

        </fieldset>

        <fieldset id="casing_fieldset" class="my-3 detail-section">
          <legend>Casing Details</legend>

              <template slot="from" slot-scope="data">{{data.item.start}}</template>
              <template slot="HEAD_from" slot-scope="data">{{ data.label }} (ft)</template>
              <template slot="to" slot-scope="data">{{data.item.end}}</template>
              <template slot="HEAD_to" slot-scope="data">{{ data.label }} (ft)</template>
              <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
              <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>

        </fieldset>

        <fieldset id="surface_seal_fieldset" class="my-3 detail-section">
          <legend>Surface Seal and Backfill Details</legend>

            Surface Seal Material: {{ codeToDescription('surface_seal_materials', well.surface_seal_material) }}
            Backfill Material Above Surface Seal: {{ codeToDescription('surface_seal_materials', well.backfill_above_surface_seal) }}

            Surface Seal Installation Method: {{ codeToDescription('surface_seal_methods', well.surface_seal_method) }}
            Backfill Depth: {{ well.backfill_depth }}

            Surface Seal Thickness: {{ well.surface_seal_thickness }}

            Surface Seal Depth: {{ well.surface_seal_depth }}

        </fieldset>

        <fieldset id="liner_details_fieldset" class="my-3 detail-section">
          <legend>Liner Details</legend>

                Liner Material: {{ codeToDescription('liner_materials', well.liner_material) }}

                Liner Diameter: {{ well.liner_diameter }}
                Liner Thickness: {{ well.liner_thickness }}

                Liner from: {{ well.liner_from }}
                Liner to: {{ well.liner_to }}

Liner perforations

                <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
                <template slot="to" slot-scope="data">{{data.item.end}} ft</template>

        </fieldset>

        <fieldset id="screen_details_fieldset" class="my-3 detail-section">
          <legend>Screen Details</legend>

                Intake Method: {{ codeToDescription('screen_intake_methods', well.screen_intake_method) }}

                Type: {{ codeToDescription('screen_types', well.screen_type) }}

                Material: {{ codeToDescription('screen_materials', well.screen_material) }}

                Opening: {{ codeToDescription('screen_openings', well.screen_opening) }}

                Bottom: {{ codeToDescription('screen_bottoms', well.screen_bottom) }}

Installed Screens

                <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
                <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
                <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>

        </fieldset>

        <fieldset id="well_development_fieldset" class="my-3 detail-section">
          <legend>Well Development</legend>

            Developed by: {{ codeToDescription('development_methods', well.development_method) }}
            Development Total Duration: {{ well.development_hours }} {{ well.development_hours ? 'hours':'' }}

        </fieldset>

        <fieldset id="well_yield_fieldset" class="my-3 detail-section">
          <legend>Well Yield</legend>

No well yield data available.

          <div v-for="(productionTest, index) in well.production_data_set" :key="`ProductionDataSet${index}`">

              Estimation Method: {{codeToDescription('yield_estimation_methods', productionTest.yield_estimation_method)}}
              Estimation Rate: {{productionTest.yield_estimation_rate}}
              Estimation Duration: {{productionTest.yield_estimation_duration}}

              Static Water Level Before Test: {{productionTest.static_level}}
              Drawdown: {{productionTest.drawdown}}

              Hydrofracturing Performed: {{productionTest.hydro_fracturing_performed}}
              Increase in Yield Due to Hydrofracturing: {{productionTest.hydro_fracturing_yield_increase}}

        </fieldset>

        <fieldset id="well_decommissioning_fieldset" class="my-3 detail-section">
          <legend>Well Decommission Information</legend>

            Reason for Decommission: {{ well.decommission_reason }}
            Method of Decommission: {{ well.decommission_method }}

            Sealant Material: {{ well.sealant_material }}
            Backfill Material: {{ well.backfill_material }}

            Decommission Details: {{ well.decommission_details }}

        </fieldset>

        <fieldset id="well_comments_fieldset" class="my-3 detail-section">
          <legend>Comments</legend>

            {{ well.comments ? well.comments : 'No comments submitted' }}

            Alternative Specs Submitted: {{ well.alternative_specs_submitted === true ? "Yes" : "No" }}

        </fieldset>

        <fieldset id="documents_fieldset" class="detail-section my-3">
          <legend>Documents</legend>
          <documents :well="$route.params.id"></documents>
        </fieldset>

        <fieldset id="disclaimer_fieldset" class="detail-section my-3">
          <legend>Disclaimer</legend>

            The information provided should not be used as a basis for making financial or any other commitments. The Government of British Columbia accepts no liability for the accuracy, availability, suitability, reliability, usability, completeness or timeliness of the data or graphical depictions rendered from the data.

        </fieldset>

</template>


Unused component removed from event inspection

<template>
  <scroll-pane>
    <div v-if="activeEvent" slot="scroll">
      <state-inspector :state="{ 'event info': sortedEventData }" />
    </div>
    <div v-else slot="scroll" class="no-event-data">
      No event selected
    </div>
  </scroll-pane>
</template>

<script>
import ScrollPane from 'components/ScrollPane.vue'
import StateInspector from 'components/StateInspector.vue'

import { mapGetters } from 'vuex'

export default {
  components: {
    ScrollPane,
    StateInspector
  },
  computed: {
    ...mapGetters('events', [
      'activeEvent'
    ]),
    sortedEventData () {
      if (!this.activeEvent) {
        return {}
      }
      return {
        name: this.activeEvent.eventName,
        type: this.activeEvent.type,
        source: '<' + this.activeEvent.instanceName + '>',
        payload: this.activeEvent.payload
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../common"

section:not(:last-child)
  border-bottom 1px solid $border-color
  .app.dark &
    border-bottom 1px solid $dark-border-color

.component-name
  margin 0 10px

.string
  color: #c41a16

.literal
  color: #03c

.no-event-data
  color: #ccc;
  text-align: center;
  margin-top: 50px;
  line-height: 30px;
</style>

<template>
  <scroll-pane>
    <div v-if="activeEvent" slot="scroll">
      <state-inspector :state="{ 'event info': sortedEventData }" />
    </div>
    <div v-else slot="scroll" class="no-event-data">
      No event selected
    </div>
  </scroll-pane>
</template>

<script>
import ScrollPane from 'components/ScrollPane.vue'
import ActionHeader from 'components/ActionHeader.vue'
import StateInspector from 'components/StateInspector.vue'

import { mapGetters } from 'vuex'

export default {
  components: {
    ScrollPane,
    ActionHeader,
    StateInspector
  },
  computed: {
    ...mapGetters('events', [
      'activeEvent'
    ]),
    sortedEventData () {
      if (!this.activeEvent) {
        return {}
      }
      return {
        name: this.activeEvent.eventName,
        type: this.activeEvent.type,
        source: '<' + this.activeEvent.instanceName + '>',
        payload: this.activeEvent.payload
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../common"

section:not(:last-child)
  border-bottom 1px solid $border-color
  .app.dark &
    border-bottom 1px solid $dark-border-color

.component-name
  margin 0 10px

.string
  color: #c41a16

.literal
  color: #03c

.no-event-data
  color: #ccc;
  text-align: center;
  margin-top: 50px;
  line-height: 30px;
</style>


fix(route tree): item style

fix(route tree): item style

<template>

          {{ route.path }}

        {{ route.name }}

        alias: {{ route.alias }}

        redirect: {{ route.redirect }}

        active

      <routes-tree-item
        v-for="(child, key) in route.children"
        :key="child.path"
        :route="child"
        :route-id="routeId + '_' + key"
        :depth="depth + 1"
      />

</template>


Fix style

Fix style

<template>

	<input type="radio"
		:disabled="disabled"
	>

	<slot></slot>

</template>


Delete App.vue

Delete App.vue

<template>
	<div id="app">
		<transition name="fade"
		            mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'app',

}

</script>

<style lang="scss">
@import './styles/common';
body,html{height:100%;}
body {
	margin: 0px;
	padding: 0px;
	/*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
	// background: #1F2D3D;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

#app {
	height:100%;
}

.el-submenu [class^=fa] {
	vertical-align: baseline;
	margin-right: 10px;
}

.el-menu-item [class^=fa] {
	vertical-align: baseline;
	margin-right: 10px;
}
.toolbar {
	background: #f2f2f2;
	padding: 10px;
	//border:1px solid #dfe6ec;
	margin: 10px 0px;
	.el-form-item {
		margin-bottom: 10px;
	}
}

 .bounce-enter-active {
        animation: bounce-in .5s;
        -webkit-animation:bounce-in .5s;
    }

    .bounce-leave-active {
        animation: bounce-out .2s;
        -webkit-animation: bounce-out .2s;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
/*        50% {
            transform: scale(0.5);
        }*/
        100% {
            transform: scale(1);
        }
    }

    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }
/*        50% {
            transform: scale(0.5);
        }*/
        100% {
            transform: scale(0);
        }
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all .1s ease;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
    @media screen and(max-width:479px){
        .el-message-box{
            width:auto !important;
        }
    }
</style>


Add a new loading animation what called circles

<template>

      <slot name="no-results">No results :(</slot>

      <slot name="no-more">No more data :)</slot>

</template>


test: 🚨 Fixed a test

test: 🚨 Fixed a test

<template>
  <div class="logged-out-window">
    <square-image :url="'./src/assets/logo.png'" :size="140"/>
    <b-headline level="1" class="app-name">Spotify Magician</b-headline>
    <b-link :href="loginURI" class="login-link">
      Please login
    </b-link>
  </div>
</template>

<script>
import SquareImage from './SquareImage.vue';
import config from '../config';

const { spotify: { scopes } } = config;
const getScopes = () => scopes.map(scope => encodeURIComponent(scope)).join(' ');

export default {
  name: 'LoggedOutWindow',
  components: {
    SquareImage,
  },
  computed: {
    loginURI() {
      return `${'https://accounts.spotify.com/authorize?'
        + 'client_id='}${config.spotify.client_id}&`
        + 'response_type=token&'
        + `scope=${getScopes()}&`
        + `redirect_uri=${encodeURIComponent(`${window.location.protocol}//${window.location.host}${window.location.pathname}`)}`;
    },
  },
};
</script>

<style lang="scss" scoped>
  .logged-out-window {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    text-align: center;

    .app-name {
      margin-bottom: 20px;
    }

    .login-link {
      font-size: 18px;
      text-decoration: none;
      transition: .1s background-color ease;
      padding: 10px;
      border-radius: 5px;

      &:hover {
        background-color: var(--color-background-grey);
      }
    }
  }
</style>

<template>
  <div class="logged-out-window">
    <square-image :url="'./src/assets/logo.png'" :size="140"/>
    <b-headline level="1" class="app-name">Spotify Magician</b-headline>
    <b-link :href="loginURI" class="login-link">
      Please login
    </b-link>
  </div>
</template>

<script>
import SquareImage from './SquareImage.vue';
import config from '../config';

const scopes = config.spotify.scopes;
const getScopes = () => scopes.map(scope => encodeURIComponent(scope)).join(' ');

export default {
  name: 'LoggedOutWindow',
  components: {
    SquareImage,
  },
  computed: {
    loginURI() {
      return `${'https://accounts.spotify.com/authorize?'
        + 'client_id='}${config.spotify.client_id}&`
        + 'response_type=token&'
        + `scope=${getScopes()}&`
        + `redirect_uri=${encodeURIComponent(`${window.location.protocol}//${window.location.host}${window.location.pathname}`)}`;
    },
  },
};
</script>

<style lang="scss" scoped>
  .logged-out-window {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    text-align: center;

    .app-name {
      margin-bottom: 20px;
    }

    .login-link {
      font-size: 18px;
      text-decoration: none;
      transition: .1s background-color ease;
      padding: 10px;
      border-radius: 5px;

      &:hover {
        background-color: var(--color-background-grey);
      }
    }
  }
</style>


share modal buttons

share modal buttons

<template>

                Share {{ conceptOrFramework }}

                    Sharing settings for {{ frameworkName }} {{ conceptOrFramework }}

            <button
                class="delete"
                @click="$store.commit('app/closeModal')"
                aria-label="close" />

                Processing request...

                Confirm make private

                Making this {{ conceptOrFramework }} private means only those users/groups in
                your access list will have the ability to read, write, or edit this {{ conceptOrFramework }}.

                Confirm make public

                Making this {{ conceptOrFramework }} public means anyone with a link can access and read this {{ conceptOrFramework }}.
                Only those with admin access will be able to edit or delete the {{ conceptOrFramework }}.

                        Shareable link

                        {{ shareableFrameworkInEditor }}

                    To add users or groups or to make your {{ conceptOrFramework }} private, first add yourself as an owner.
                    <button @click="makeCurrentUserAnOwner">
                        Make me an owner
                    </button>

                            Add users or groups

                                <button
                                    @click="handlePublicClick"
                                    :class="{'is-outlined': privateFramework}"
                                    class="button is-small is-link">
                                    Public
                                </button>
                                <button
                                    @click="handlePrivateClick"
                                    :class="{'is-outlined': !privateFramework}"
                                    class="button is-small is-link">
                                    Private
                                </button>

                            <input
                                @blur="closeAutoComplete"
                                type="search"
                                placeholder="search"
                                class="input share is-fullwidth"
                                v-model="search"
                                @input="filterResults">

                                        {{ result.name + " (" + result.email + ")" }}

                                <select v-model="selectViewOrAdmin">
                                    <option
                                        v-for="(option, index) in viewOptions"
                                        :key="index"
                                        :value="option.value"
                                        :disabled="option.disabled"
                                        :title="option.title">
                                        {{ option.label }}
                                    </option>
                                </select>

                                Add Selection

0">

                                    Group Name
                                    View
                                    Delete

                                     {{ group.header }}

                                            <select
                                                v-model="group.view"
                                                @change="group.changed=true">
                                                <option
                                                    :value="option.value"
                                                    v-for="option in viewOptions"
                                                    :key="option">
                                                    {{ option.label }}
                                                </option>
                                            </select>

0">

                                    User Name
                                    User Email
                                    View
                                    Delete

                                     {{ user.header }}
                                     {{ user.email }}

                                            <select
                                                v-model="user.view"
                                                @change="user.changed=true;saveSettings()">
                                                <option
                                                    :value="option.value"
                                                    v-for="option in viewOptions"
                                                    :key="option">
                                                    {{ option.label }}
                                                </option>
                                            </select>

                <button
                    :disabled="isProcessing"
                    class="button is-primary is-outlined"
                    @click="$store.commit('app/closeModal')">
                    Done
                </button>

                    cancel

                    confirm make private

                    cancel

                    confirm make public

</template>


Code cleaning

Code cleaning

<template>
  <v-container id="home">
    <v-layout
      id="hero"
      row
    >
      <v-flex
        xs12
        text-xs-center>
        <v-layout
          row
          wrap
          align-center
          justify-center>
          <v-flex
            id="title-container"
            xs12
          >

 AIDA

          </v-flex>

          <v-flex
            id="subtitle-container"
            xs12
          >

 Annotate Image Data by Assignment

          </v-flex>

          <v-flex
            id="button-container"
            xs8
            sm4
            md3
            lg2
            text-xs-center
          >
            <v-btn
              dark
              block
              to="/example">
              <v-icon>web</v-icon>

                Get Started

            </v-btn>
          </v-flex>

          <v-flex
            id="button-container"
            xs8
            sm4
            md3
            lg2
            text-xs-center
          >
            <v-btn
              light
              block
              href="https://github.com/alanaberdeen/AIDA">

                Github

            </v-btn>
          </v-flex>

          <v-flex
            id="button-container"
            xs8
            sm4
            md3
            lg2
            text-xs-center
          >
            <v-btn
              light
              block
              href="https://aida.gitbook.io/docs/">
              <v-icon>fa-book</v-icon>

                Docs

            </v-btn>
          </v-flex>
        </v-layout>

      </v-flex>
    </v-layout>

    <v-layout
      row
      align-center
      justify-center>
      <v-flex
        xs12
        lg8 >
        <v-card class="info-card">

              The Basic Idea

              AIDA brings an open source and web-based workflow to image annotation.

              Currently, image annotation is largely confined to single computer
              shrink-wrapped software with limited interactive capabilities and
              few, usually closed, data formats. AIDA is a web interface that enables distributed teams
              of researchers to direclty annotate images with easy
              to use on screen drawing tools. AIDA supports the
              creation of well defined annotation trials which include
              a series of high resolution images or video and a
              specific set of annotation tasks.

              The trial and annotation data can be accessed
              programatically via a
                documented API.

        </v-card>

        <v-card class="info-card">

              How has it been implemented?

              The user interface is a VueJS Single Page Application
              built to web standards, encapsulating and interacting
              with two other significant JavaScript libraries:

              OpenSeaDragon to manipulate the high-res images
              and PaperJS to
              provide the drawing functionality.  VuetifyJS  is used as a UI component library which implements the material design language. This interface generates a JSON file that is written to a database via a web API. Login enables specific
              configuration of the tool for different trials
              and tasks.

        </v-card>

        <v-card class="info-card">

              What's planned?

              The software is published as Open Source under the permissive

              MIT license  and can be modified by anyone.
              The  API
              will also be public.

              The next stage of development will be to integrate
              intelligent tools that leverage machine learning techniques.
              We hope to enhance the ability of the user to quickly and
              accuratley mark up images.

        </v-card>

        <v-card class="info-card">

              About

              This is a project of Alan Aberdeen, Jens Rittscher,
              and Nasullah Khalid at the University of Oxford,
              specifically the

                Quantitative Biological Imaging Group
              .

        </v-card>

      </v-flex>
    </v-layout>

  </v-container>

</template>


添加属性右键

添加属性右键

/*
* @Author: ycl
* @Date:
* @description
*/
<template>

        下载

        上传

        删除

        新建文件夹

        重命名

        属性

</template>

/*
* @Author: ycl
* @Date:
* @description
*/
<template>

        下载

        上传

        删除

        新建文件夹

        重命名

</template>


[qa] fix navigation between assets/shots in breakdown

<template>

Episode Casting

          <combobox-styled
            class="mr1"
            :label="$t('main.for')"
            :options="castingTypeOptions"
            v-model="castingType"
            v-if="!isEpisodeCasting"
          />
          <combobox-styled
            :label="$t('shots.fields.sequence')"
            :options="castingSequencesOptions"
            v-model="sequenceId"
            v-if="isShotCasting"
          />
          <combobox-styled
            :label="$t('tasks.fields.asset_type')"
            :options="castingAssetTypesOptions"
            v-model="assetTypeId"
            v-if="isAssetCasting"
          />

          <button-simple
            class="flexrow-item"
            :title="isTextMode ? $t('breakdown.picture_mode') : $t('breakdown.text_mode')"
            icon="type"
            :is-on="isTextMode"
            :is-responsive="true"
            @click="toggleTextMode"
          />
          <button-simple
            class="flexrow-item"
            :title="$t('main.csv.import_file')"
            icon="upload"
            :is-responsive="true"
            @click="showImportModal"
            v-if="isCurrentUserManager"
          />
          <button-href-link
            class="flexrow-item"
            :title="$t('main.csv.export_file')"
            icon="download"
            :is-responsive="true"
            :path="exportUrlPath"
            v-if="isCurrentUserManager"
          />

        <spinner class="mt1" v-if="isLoading" />

          <shot-line
            :key="entity.id"
            :entity-id="entity.id"
            :preview-file-id="entity.preview_file_id"
            :selected="selection[entity.id]"
            :name="entity.name"
            :assets="castingByType[entity.id] || []"
            :read-only="!isCurrentUserManager"
            :text-mode="isTextMode"
            @edit-label="onEditLabelClicked"
            @remove-one="removeOneAsset"
            @remove-ten="removeTenAssets"
            @click="selectEntity"
            v-for="entity in castingEntities"
          />

            {{ $t('breakdown.all_assets') }}

          <button-simple
            class="flexrow-item"
            :title="$t('assets.new_asset')"
            icon="plus"
            @click="modals.isNewDisplayed = true"
          />
          <button-simple
            class="flexrow-item"
            :text="$t('assets.only_current_episode')"
            :is-on="isOnlyCurrentEpisode"
            @click="isOnlyCurrentEpisode = !isOnlyCurrentEpisode"
            v-if="isTVShow"
          />

          <search-field
            ref="search-field"
            class="flexrow-item"
            @change="onSearchChange"
          />
          <button-simple
            class="flexrow-item"
            :title="$t('entities.build_filter.title')"
            icon="funnel"
            @click="modals.isBuildFilterDisplayed = true"
          />

        <spinner v-if="isAssetsLoading" />

 0 ? typeAssets[0].asset_type_name : ''"
          v-for="typeAssets in availableAssetsByType"
          v-else
        >

            {{ typeAssets.length > 0 ? typeAssets[0].asset_type_name : '' }}

            <available-asset-block
              :key="asset.id"
              :asset="asset"
              :active="Object.keys(selection).length > 0"
              :text-mode="isTextMode"
              @add-one="addOneAsset"
              @add-ten="addTenAssets"
              v-for="asset in typeAssets"
            />

    <import-render-modal
      :active="modals.isImportRenderDisplayed"
      :is-loading="loading.importing"
      :is-error="errors.importing"
      :import-error="errors.importingError"
      :parsed-csv="parsedCSV"
      :form-data="importCsvFormData"
      :columns="renderColumns"
      :dataMatchers="dataMatchers"
      :database="filteredCasting"
      :disable-update=true
      @reupload="resetImport"
      @cancel="hideImportRenderModal"
      @confirm="uploadImportFile"
    />

    <import-modal
      ref="import-modal"
      :active="modals.importing"
      :is-loading="loading.importing"
      :is-error="errors.importing"
      :form-data="importCsvFormData"
      :columns="csvColumns"
      :optional-columns="optionalCsvColumns"
      @cancel="hideImportModal"
      @confirm="renderImport"
    />

    <edit-label-modal
      ref="edit-label-modal"
      :active="modals.isEditLabelDisplayed"
      :is-loading="loading.editLabel"
      :is-error="loading.editError"
      :asset="editedAsset"
      :label="editedAssetLinkLabel"
      @cancel="modals.isEditLabelDisplayed = false"
      @confirm="confirmEditLabel"
    />

    <build-filter-modal
      ref="build-filter-modal"
      :active="modals.isBuildFilterDisplayed"
      @confirm="confirmBuildFilter"
      @cancel="modals.isBuildFilterDisplayed = false"
    />

    <edit-asset-modal
      ref="edit-asset-modal"
      :active="modals.isNewDisplayed"
      :asset-to-edit="{}"
      :is-error="errors.edit"
      :is-loading="loading.edit"
      :is-loading-stay="loading.stay"
      :is-success="success.edit"
      @confirm="confirmNewAsset"
      @confirmAndStay="confirmNewAssetStay"
      @cancel="modals.isNewDisplayed = false"
    />

    <delete-modal
      :active="modals.isRemoveConfirmationDisplayed"
      :delete-button-text="$t('breakdown.remove.confirm')"
      :error-text="$t('breakdown.remove.error')"
      :is-loading="loading.remove"
      :is-error="loading.error"
      :text="$t('breakdown.remove.text')"
      @confirm="confirmAssetRemoval"
      @cancel="modals.isRemoveConfirmationDisplayed = false"
    />

</template>


Fix #1129

Fix #1129

<template>

		<router-link to="/">%fa:check%完了</router-link>

ウィジェットを追加:

				<select v-model="widgetAdderSelected">
					<option value="profile">プロフィール</option>
					<option value="calendar">カレンダー</option>
					<option value="timemachine">カレンダー(タイムマシン)</option>
					<option value="activity">アクティビティ</option>
					<option value="rss">RSSリーダー</option>
					<option value="trends">トレンド</option>
					<option value="photo-stream">フォトストリーム</option>
					<option value="slideshow">スライドショー</option>
					<option value="version">バージョン</option>
					<option value="broadcast">ブロードキャスト</option>
					<option value="notifications">通知</option>
					<option value="users">おすすめユーザー</option>
					<option value="polls">投票</option>
					<option value="post-form">投稿フォーム</option>
					<option value="messaging">メッセージ</option>
					<option value="channel">チャンネル</option>
					<option value="access-log">アクセスログ</option>
					<option value="server">サーバー情報</option>
					<option value="donation">寄付のお願い</option>
					<option value="nav">ナビゲーション</option>
					<option value="tips">ヒント</option>
				</select>
				<button @click="addWidget">追加</button>

				<x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>

ゴミ箱

		<template v-if="customize">
			<x-draggable v-for="place in ['left', 'right']"
				:list="widgets[place]"
				:class="place"
				:data-place="place"
				:options="{ group: 'x', animation: 150 }"
				@sort="onWidgetSort"
				:key="place"
			>

					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id"/>

			</x-draggable>

				カスタマイズのヒント

					<mk-post-form v-if="os.i.client_settings.showPostFormOnTopOfTl"/>
					<mk-timeline ref="tl" @loaded="onTlLoaded"/>

		</template>
		<template v-else>

				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>

				<mk-post-form v-if="os.i.client_settings.showPostFormOnTopOfTl"/>
				<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
				<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>

		</template>

</template>