CASS-866 remove duplicate modal close button

<template>

                                    My User Groups

                                            create new group

                                <cass-panel>
                                    <cass-panel-item
                                        :depth="0"
                                        label="Member List"
                                        :nodes="[]"
                                        id="all-members"
                                        @showDetails="showMemberListView"
                                        key="all-members" />
                                    <cass-panel-item
                                        :depth="0"
                                        :label="group.name"
                                        :nodes="group.subGroups"
                                        :id="group.id"
                                        v-for="group in userGroupDisplayList"
                                        @showDetails="showGroupDetailsById"
                                        :key="group" />
                                </cass-panel>

                        <cass-dropdown
                            @closeDropdown="groupsDropdownActive=false"
                            :label="currentUserGroupName"
                            :active="groupsDropdownActive"
                            @click="groupsDropdownActive = true"
                            @showDropdown="groupsDropdownActive = true">
                            <cass-dropdown-item
                                :depth="0"
                                label="Member List"
                                :nodes="[]"
                                id="all-members"
                                @showDetails="showMemberListView"
                                key="all-members" />
                            <cass-dropdown-item
                                :depth="0"
                                :label="group.name"
                                :nodes="group.subGroups"
                                :id="group.id"
                                v-for="group in userGroupDisplayList"
                                @showDetails="showGroupDetailsById"
                                :key="group" />
                        </cass-dropdown>

                                    All Group Members

                                    A view of all members within your groups and sub-groups.  Click a group name to view the group details.

                                         No user groups available

 0"
                                    class="">

                                                        name

                                                        email

                                                        membership

                                                        {{ member.name }}

                                                        {{ member.email }}

 0">
                                                            Manager of

                                                                 0">,

                                                                    {{ memMgrOf.name }}

 0">
                                                            Member of

                                                                 0">,

                                                                    {{ memMemOf.name }}

                                 1">

                                                {{ lineageObj.name }}

                                            Group Details

                                                Group name

                                                    {{ currentUserGroupName }}

 60">
                                                    Group name length max is 60 characters.  Please choose a shorter name

                                                Group Name

                                                    <input
                                                        @keypress="setCurrentUserGroupAsChanged"
                                                        type="text"
                                                        class="input"
                                                        v-model="currentUserGroupName">

 60">
                                                    Group name length max is 60 characters.  Please choose a shorter name

                                             60"
                                                @click="isEditingCurrentGroupName = false"
                                                class="button is-primary is-rounded is-small is-outlined">
                                                done editing

                                                Group name is required

                                                            Group Description

 300 ? 'cass__user-groups--description' : 'cass__user-groups--description-overflow'"
                                                            v-if="currentUserGroupDescription && currentUserGroupDescription.trim().length > 0">

                                                                {{ currentUserGroupDescription }}

                                                                {{ currentUserGroupDescription.trim(0, 300) }}

                                                             300"
                                                                title="Show more"
                                                                @click="showMore = false"
                                                                class="button is-small is-text has-text-primary">
                                                                hide

                                                             300"
                                                                title="Show more"
                                                                @click="showMore = true"
                                                                class="button is-small is-text has-text-primary">
                                                                ...

                                                            No description

                                                Group Description

                                                        <textarea
                                                            @keyup="setCurrentUserGroupAsChanged"
                                                            type="text"
                                                            :rows="3"
                                                            class="textarea"
                                                            v-model="currentUserGroupDescription" />

                                                        done editing

                                                    Group description is required

                                                    Group actions

                                                        member

                                                <div
                                                    v-if="currentUserGroupIsManager && currentUserGroupChanged"
                                                    :disabled="!currentUserGroupChanged"
                                                    :class=" currentUserGroupIsManager && currentUserGroupChanged ? '' : 'is-disabled'"
                                                    class="button is-rounded my-1 is-fullwidth is-primary is-small"
                                                    @click="saveCurrentUserGroup"
                                                    title="Save group">

                                                        save

                                                <div
                                                    v-if="currentUserGroupIsManager && currentUserGroupChanged"
                                                    :disabled="!currentUserGroupChanged"
                                                    class="button is-fullwidth my-1 is-outlined is-rounded is-small"
                                                    :class="currentUserGroupIsManager && currentUserGroupChanged ? '' : 'is-disbaled'"
                                                    @click="cancelCurrentUserGroupChanges"
                                                    title="Cancel group changes">

                                                        Discard

                                                        sub-group

                                                        Delete

                                                {{ currentUserGroupName }} Members

                                                        name

                                                        email

                                                        role

                                                        {{ manager.name }}

                                                        {{ manager.email }}

                                                        manager

                                                                    change role

                                                            <button
                                                                v-else
                                                                class="button is-small is-outlined is-disabled"
                                                                disabled
                                                                title="Cannot remove: member of sub-group you do not manage.">

                                                            </button>

                                                        {{ member.name }}

                                                        {{ member.email }}

                                                        member

                                                                    change role

                                                            <button
                                                                v-else
                                                                class="button is-small is-outlined is-disabled"
                                                                disabled
                                                                title="Cannot remove: member of sub-group you do not manage.">

                                                            </button>

        <modal-template
            size="small"
            @close="cancelLoseChanges"
            :active="showConfirmLoseChangesModal">
            <template slot="modal-header">
                Discard Unsaved Changes?
            </template>
            <template slot="modal-body">
                You have unsaved changes.  Cancel to return to group and save changes, or confirm to discard changes.
            </template>
            <template slot="modal-foot">
                <button
                    class="button is-primary is-outlined"
                    v-if="toRoute !== ''"
                    @click="confirmLoseChangesAndNav">
                    Confirm
                </button>
                <button
                    class="button is-primary is-outlined"
                    v-else
                    @click="confirmLoseChanges">
                    Confirm
                </button>
                <button
                    class="button is-info"
                    @click="cancelLoseChanges">
                    cancel
                </button>
            </template>
        </modal-template>

        <modal-template
            :header="false"
            :active="userGroupBusy">
            <template slot="modal-header">
                Processing Request
            </template>
            <template slot="modal-body">

            </template>
        </modal-template>

        <modal-template
            @close="closeAddGroupMemberModal"
            :active="showAddMemberModal">
            <template slot="modal-header">

                    Add members to '{{ currentUserGroupName }}'

            </template>
            <template slot="modal-body">

                    <input
                        type="text"
                        class="input"
                        v-model="addMemberPersonFilter"
                        placeholder="search for person...">

                     No group members available. Users must be managers or members of any parent groups in order to be available for sub-groups.

 0">

                        Available members

                                    name
                                    email

                                            <input
                                                :id="prs.shortId()"
                                                :value="prs.shortId()"
                                                name="prs.shortId()"
                                                type="checkbox"
                                                title="Add as member"
                                                @change="removeFromSelectedNewManagers(prs.shortId())"
                                                v-model="selectedNewMembers">

                                            <input
                                                :id="prs.shortId()"
                                                :value="prs.shortId()"
                                                name="prs.shortId()"
                                                type="checkbox"
                                                title="Add as manager"
                                                @change="removeFromSelectedNewMembers(prs.shortId())"
                                                v-model="selectedNewManagers">

                                     {{ prs.getName() }}
                                     {{ prs.email }}

            </template>
            <template slot="modal-foot">

 0 || selectedNewManagers.length > 0"
                    class="button is-outlined is-primary is-small"
                    @click="applySelectedNewMembersToCurrentUserGroup"
                    title="Apply new members">

                        apply

                        cancel

            </template>
        </modal-template>

        <modal-template
            :active="showConfirmDeleteUserGroupModal"
            @close="closeDeleteGroupConfirmModal">
            <template slot="modal-header">
                Delete User Group?
            </template>
            <template slot="modal-body">
                Are you sure you wish to delete the user group '{{ currentUserGroupName }}'?

 0">

                         Warning! Deleting this group will also delete all of
                        its sub-groups ({{ deleteConfirmNumberOfSubGroups }}).  This is non-reversible.

            </template>
            <template slot="modal-foot">

                        cancel

                        delete

            </template>
        </modal-template>

</template>

<template>

                                    My User Groups

                                            create new group

                                <cass-panel>
                                    <cass-panel-item
                                        :depth="0"
                                        label="Member List"
                                        :nodes="[]"
                                        id="all-members"
                                        @showDetails="showMemberListView"
                                        key="all-members" />
                                    <cass-panel-item
                                        :depth="0"
                                        :label="group.name"
                                        :nodes="group.subGroups"
                                        :id="group.id"
                                        v-for="group in userGroupDisplayList"
                                        @showDetails="showGroupDetailsById"
                                        :key="group" />
                                </cass-panel>

                        <cass-dropdown
                            @closeDropdown="groupsDropdownActive=false"
                            :label="currentUserGroupName"
                            :active="groupsDropdownActive"
                            @click="groupsDropdownActive = true"
                            @showDropdown="groupsDropdownActive = true">
                            <cass-dropdown-item
                                :depth="0"
                                label="Member List"
                                :nodes="[]"
                                id="all-members"
                                @showDetails="showMemberListView"
                                key="all-members" />
                            <cass-dropdown-item
                                :depth="0"
                                :label="group.name"
                                :nodes="group.subGroups"
                                :id="group.id"
                                v-for="group in userGroupDisplayList"
                                @showDetails="showGroupDetailsById"
                                :key="group" />
                        </cass-dropdown>

                                    All Group Members

                                    A view of all members within your groups and sub-groups.  Click a group name to view the group details.

                                         No user groups available

 0"
                                    class="">

                                                        name

                                                        email

                                                        membership

                                                        {{ member.name }}

                                                        {{ member.email }}

 0">
                                                            Manager of

                                                                 0">,

                                                                    {{ memMgrOf.name }}

 0">
                                                            Member of

                                                                 0">,

                                                                    {{ memMemOf.name }}

                                 1">

                                                {{ lineageObj.name }}

                                            Group Details

                                                Group name

                                                    {{ currentUserGroupName }}

 60">
                                                    Group name length max is 60 characters.  Please choose a shorter name

                                                Group Name

                                                    <input
                                                        @keypress="setCurrentUserGroupAsChanged"
                                                        type="text"
                                                        class="input"
                                                        v-model="currentUserGroupName">

 60">
                                                    Group name length max is 60 characters.  Please choose a shorter name

                                             60"
                                                @click="isEditingCurrentGroupName = false"
                                                class="button is-primary is-rounded is-small is-outlined">
                                                done editing

                                                Group name is required

                                                            Group Description

 300 ? 'cass__user-groups--description' : 'cass__user-groups--description-overflow'"
                                                            v-if="currentUserGroupDescription && currentUserGroupDescription.trim().length > 0">

                                                                {{ currentUserGroupDescription }}

                                                                {{ currentUserGroupDescription.trim(0, 300) }}

                                                             300"
                                                                title="Show more"
                                                                @click="showMore = false"
                                                                class="button is-small is-text has-text-primary">
                                                                hide

                                                             300"
                                                                title="Show more"
                                                                @click="showMore = true"
                                                                class="button is-small is-text has-text-primary">
                                                                ...

                                                            No description

                                                Group Description

                                                        <textarea
                                                            @keyup="setCurrentUserGroupAsChanged"
                                                            type="text"
                                                            :rows="3"
                                                            class="textarea"
                                                            v-model="currentUserGroupDescription" />

                                                        done editing

                                                    Group description is required

                                                    Group actions

                                                        member

                                                <div
                                                    v-if="currentUserGroupIsManager && currentUserGroupChanged"
                                                    :disabled="!currentUserGroupChanged"
                                                    :class=" currentUserGroupIsManager && currentUserGroupChanged ? '' : 'is-disabled'"
                                                    class="button is-rounded my-1 is-fullwidth is-primary is-small"
                                                    @click="saveCurrentUserGroup"
                                                    title="Save group">

                                                        save

                                                <div
                                                    v-if="currentUserGroupIsManager && currentUserGroupChanged"
                                                    :disabled="!currentUserGroupChanged"
                                                    class="button is-fullwidth my-1 is-outlined is-rounded is-small"
                                                    :class="currentUserGroupIsManager && currentUserGroupChanged ? '' : 'is-disbaled'"
                                                    @click="cancelCurrentUserGroupChanges"
                                                    title="Cancel group changes">

                                                        Discard

                                                        sub-group

                                                        Delete

                                                {{ currentUserGroupName }} Members

                                                        name

                                                        email

                                                        role

                                                        {{ manager.name }}

                                                        {{ manager.email }}

                                                        manager

                                                                    change role

                                                            <button
                                                                v-else
                                                                class="button is-small is-outlined is-disabled"
                                                                disabled
                                                                title="Cannot remove: member of sub-group you do not manage.">

                                                            </button>

                                                        {{ member.name }}

                                                        {{ member.email }}

                                                        member

                                                                    change role

                                                            <button
                                                                v-else
                                                                class="button is-small is-outlined is-disabled"
                                                                disabled
                                                                title="Cannot remove: member of sub-group you do not manage.">

                                                            </button>

        <modal-template
            size="small"
            :active="showConfirmLoseChangesModal">
            <template slot="modal-header">
                Discard Unsaved Changes?
            </template>
            <template slot="modal-body">
                You have unsaved changes.  Cancel to return to group and save changes, or confirm to discard changes.
            </template>
            <template slot="modal-foot">
                <button
                    class="button is-primary is-outlined"
                    v-if="toRoute !== ''"
                    @click="confirmLoseChangesAndNav">
                    Confirm
                </button>
                <button
                    class="button is-primary is-outlined"
                    v-else
                    @click="confirmLoseChanges">
                    Confirm
                </button>
                <button
                    class="button is-info"
                    @click="cancelLoseChanges">
                    cancel
                </button>
            </template>
        </modal-template>

        <modal-template
            :header="false"
            :active="userGroupBusy">
            <template slot="modal-header">
                Processing Request
            </template>
            <template slot="modal-body">

            </template>
        </modal-template>

        <modal-template :active="showAddMemberModal">
            <template slot="modal-header">

                    Add members to '{{ currentUserGroupName }}'
                    <button
                        class="delete is-pulled-right"
                        aria-label="close"
                        @click="closeAddGroupMemberModal" />

            </template>
            <template slot="modal-body">

                    <input
                        type="text"
                        class="input"
                        v-model="addMemberPersonFilter"
                        placeholder="search for person...">

                     No group members available. Users must be managers or members of any parent groups in order to be available for sub-groups.

 0">

                        Available members

                                    name
                                    email

                                            <input
                                                :id="prs.shortId()"
                                                :value="prs.shortId()"
                                                name="prs.shortId()"
                                                type="checkbox"
                                                title="Add as member"
                                                @change="removeFromSelectedNewManagers(prs.shortId())"
                                                v-model="selectedNewMembers">

                                            <input
                                                :id="prs.shortId()"
                                                :value="prs.shortId()"
                                                name="prs.shortId()"
                                                type="checkbox"
                                                title="Add as manager"
                                                @change="removeFromSelectedNewMembers(prs.shortId())"
                                                v-model="selectedNewManagers">

                                     {{ prs.getName() }}
                                     {{ prs.email }}

            </template>
            <template slot="modal-foot">

 0 || selectedNewManagers.length > 0"
                    class="button is-outlined is-primary is-small"
                    @click="applySelectedNewMembersToCurrentUserGroup"
                    title="Apply new members">

                        apply

                        cancel

            </template>
        </modal-template>

        <modal-template
            :active="showConfirmDeleteUserGroupModal"
            @close="closeDeleteGroupConfirmModal">
            <template slot="modal-header">
                Delete User Group?
            </template>
            <template slot="modal-body">
                Are you sure you wish to delete the user group '{{ currentUserGroupName }}'?

 0">

                         Warning! Deleting this group will also delete all of
                        its sub-groups ({{ deleteConfirmNumberOfSubGroups }}).  This is non-reversible.

            </template>
            <template slot="modal-foot">

                        cancel

                        delete

            </template>
        </modal-template>

</template>


1 more update

1 more update

<template>

Calendar Attributes

      Show highlights, dots, bars and custom popovers

Highlights

        <v-calendar :attributes="highlights" ref="cal" />

Dots

        <v-calendar :attributes="dots" />

Bars

        <v-calendar :attributes="bars" />

Popovers

        <v-calendar :attributes="popovers">
          <template
            v-slot:day-popover="{
              day,
              format,
              masks,
              attributes,
              updateLayout,
            }"
          >

              {{
                format(day.date, masks.dayPopover)
              }}

              <popover-row
                v-for="{
                  key,
                  customData,
                  highlight,
                  dot,
                  bar,
                } in attributes.filter(a => a.customData)"
                :key="key"
                :attribute="{ highlight, dot, bar }"
              >

                    <input
                      v-if="customData.id === editId"
                      class="appearance-none bg-white border px-1 text-black"
                      :style="{ minWidth: '180px' }"
                      v-model="customData.description"
                      @keyup.enter="editId = 0"
                      v-focus-select
                    />

                      <input type="checkbox" v-model="customData.isComplete" />

                      {{ customData.description }}

                    <svg
                      v-if="editId !== customData.id"
                      class="fill-current text-blue-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
                      ></path>
                    </svg>

                    <svg
                      v-else
                      class="fill-current text-green-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                    </svg>

                    <svg
                      class="fill-current text-red-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
                      ></path>
                    </svg>

              </popover-row>

              + Add Todo

          </template>
        </v-calendar>

Week Numbers

          Default Left Inside

          <v-calendar :from-page="{ month: 1, year: 2021 }" show-weeknumbers />

          ISO, Right and Outside Options

          <v-calendar
            :from-page="{ month: 1, year: 2021 }"
            show-iso-weeknumbers="right-outside"
          />

</template>

<template>

Calendar Attributes

      Show highlights, dots, bars and custom popovers

Highlights

        <v-calendar :attributes="highlights" ref="cal" />

Dots

        <v-calendar :attributes="dots" />

Bars

        <v-calendar :attributes="bars" />

Popovers

        <v-calendar :attributes="popovers">
          <template
            v-slot:day-popover="{
              day,
              format,
              masks,
              attributes,
              updateLayout,
            }"
          >

              {{
                format(day.date, masks.dayPopover)
              }}

              <popover-row
                v-for="{
                  key,
                  customData,
                  highlight,
                  dot,
                  bar,
                } in attributes.filter(a => a.customData)"
                :key="key"
                :attribute="{ highlight, dot, bar }"
              >

                    <input
                      v-if="customData.id === editId"
                      class="appearance-none bg-white border px-1 text-black"
                      :style="{ minWidth: '180px' }"
                      v-model="customData.description"
                      @keyup.enter="editId = 0"
                      v-focus-select
                    />

                      <input type="checkbox" v-model="customData.isComplete" />

                      {{ customData.description }}

                    <svg
                      v-if="editId !== customData.id"
                      class="fill-current text-blue-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
                      ></path>
                    </svg>

                    <svg
                      v-else
                      class="fill-current text-green-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                    </svg>

                    <svg
                      class="fill-current text-red-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
                      ></path>
                    </svg>

              </popover-row>

              + Add Todo

          </template>
        </v-calendar>

Week Numbers

          Default Left Inside

          <v-calendar show-weeknumbers />

          ISO, Right and Outside Options

          <v-calendar show-iso-weeknumbers="right-outside" />

</template>


Fix photo url

Fix photo url

<template>
  <f7-page>
    <f7-navbar back-link="Back" title="Photo Browser" sliding></f7-navbar>

    <f7-photo-browser
      ref="pb"
      :photos="photos"
      theme="dark"
      @open="onOpen"
      @close="onClose"
      ></f7-photo-browser>

    <f7-link v-for="(photo, index) in photos" @click="openPhotoBrowser(index)">
      <img :src="photo.url || photo"  style="width: 20%; height: 20vw">
    </f7-link>
  </f7-page>
</template>
<script>
  export default {
    data: function () {
      return {
        photos: [
          {
            url: 'http://lorempixel.com/400/400/nature/1/',
            caption: 'Amazing beach in Goa, India'
          },
          'http://lorempixel.com/400/400/nature/2/',
          {
              url: 'http://lorempixel.com/400/400/nature/3/',
              caption: 'I met this monkey in Chinese mountains'
          },
          {
              url: 'http://lorempixel.com/400/400/nature/4/',
              caption: 'Beautiful mountains in Zhangjiajie, China'
          },
          'http://lorempixel.com/400/400/nature/5/'
        ]
      }
    },
    methods: {
      openPhotoBrowser: function (index) {
        this.$refs.pb.open(index)
      },
      onOpen: function (pb) {
        console.log('Photo Browser Opened');
      },
      onClose: function (pb) {
        console.log('Photo Browser Closed');
      },
    }
  }
</script>

<template>
  <f7-page>
    <f7-navbar back-link="Back" title="Photo Browser" sliding></f7-navbar>

    <f7-photo-browser
      ref="pb"
      :photos="photos"
      theme="dark"
      @open="onOpen"
      @close="onClose"
      ></f7-photo-browser>

    <f7-link v-for="(photo, index) in photos" @click="openPhotoBrowser(index)">
      <img :src="photo.url || photo"  style="width: 20%; height: 20vw">
    </f7-link>
  </f7-page>
</template>
<script>
  export default {
    data: function () {
      return {
        photos: [
          {
            url: 'http://lorempixel.com/400/400/nature/1/',
            caption: 'Amazing beach in Goa, India'
          },
          'http://placekitten.com/600/600',
          'http://lorempixel.com/400/400/nature/2/',
          {
              url: 'http://lorempixel.com/400/400/nature/3/',
              caption: 'I met this monkey in Chinese mountains'
          },
          {
              url: 'http://lorempixel.com/400/400/nature/4/',
              caption: 'Beautiful mountains in Zhangjiajie, China'
          }
        ]
      }
    },
    methods: {
      openPhotoBrowser: function (index) {
        this.$refs.pb.open(index)
      },
      onOpen: function (pb) {
        console.log('Photo Browser Opened');
      },
      onClose: function (pb) {
        console.log('Photo Browser Closed');
      },
    }
  }
</script>


Update Profile.vue

Update Profile.vue

<template>
<v-container fluid>
   <v-layout row wrap justify-center>
     <v-flex xs12 sm4>
       <v-card>
         <v-toolbar dark class="blue lighten-1">
           <v-toolbar-title>
            <v-icon dark>person</v-icon>
             Profile
            </v-toolbar-title>
         </v-toolbar>
         <v-card-text>
           <v-container fluid>
             <v-layout row wrap>
               <v-flex xs12>
                <div class="round">
                  <croppa
                  v-model="photo"
                  :initial-image="getPhoto(image)"></croppa>
                </div>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="First Name"
                   v-model="fname"
                   max="15"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="Last Name"
                   v-model="laname"
                   max="15"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="City"
                   v-model="city"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="Mobile"
                   v-model="mobile"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="E-mail"
                   v-model="email"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-btn primary dark light :loading="loading" block @click.native="onSubmit">Update</v-btn>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-flex>
     <app-snackbar :data="data"></app-snackbar>
   </v-layout>
 </v-container>
</template>
<script>
  const URL = 'http://codedegg.com/api/'
  const token = localStorage.getItem('token')
  import Snackbar from '../Snackbar'
  export default {
    components: {
      'app-snackbar': Snackbar
    },
    data () {
      return {
        fname: '',
        laname: '',
        email: '',
        pass: '',
        city: '',
        mobile: '',
        data: {
          message: '',
          model: false,
          context: 'error'
        },
        errors: [],
        loading: false,
        photo: this.myCroppa,
        p: false
      }
    },
    created () {
      this.getProfile()
    },
    methods: {
      getProfile () {
        let data = this.$auth.getUser()
        if (data) {
          this.email = data.email
          this.fname = data.first_name
          this.laname = data.last_name
          this.image = data.photo
        }
        let pageUrl = URL + 'profile?token=' + token
        this.$http.get(pageUrl)
        .then(response => {
          console.log(response)
          this.city = response.body.user.city
          this.mobile = response.body.user.mobile
        })
        .catch((error) => {
          if (error.statusText === 'Unauthorized') {
            this.$auth.destroyToken()
          }
        })
      },
      getPhoto (photo) {
        if (photo) {
          return 'http://codedegg.com/gallery/user/thumbs/' + photo
        }
      },
      onSubmit () {
        this.loading = true
        this.$http.post('http://codedegg.com/api/signup',
            { fname: this.fname, laname: this.laname, email: this.email, photo: this.photo.generateDataUrl() },
            )
            .then(
              (response) => {
                if (response.status === 201) {
                  this.message = response.body.message
                  this.data = {
                    model: true,
                    context: 'error',
                    message: 'Oh you have to remove the errors first'
                  }
                }
                this.loading = false
                console.log(response)
              }
            )
            .catch(
                (error) => {
                  this.loading = false
                  this.data = {
                    model: true,
                    context: 'error',
                    message: 'Oh you have to remove the errors first'
                  }
                  console.log(error)
                }
            )
      }
    }
  }
</script>
<style>
.round, .croppa-container{
 border-radius: 80%;
 overflow:hidden;
 width:200px;
 margin: auto;
 margin-bottom: 10px;
 height:200px;
}
</style>

<template>
<v-container fluid>
   <v-layout row wrap justify-center>
     <v-flex xs12 sm4>
       <v-card>
         <v-toolbar dark class="blue lighten-1">
           <v-toolbar-title>
            <v-icon dark>person</v-icon>
             Profile
            </v-toolbar-title>
         </v-toolbar>
         <v-card-text>
           <v-container fluid>
             <v-layout row wrap>
               <v-flex xs12>
                <div class="round">
                  <croppa
                  v-model="photo"
                  :initial-image="getPhoto(image)"></croppa>
                </div>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="First Name"
                   v-model="fname"
                   max="15"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="Last Name"
                   v-model="laname"
                   max="15"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="City"
                   v-model="city"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="Mobile"
                   v-model="mobile"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-text-field
                   label="E-mail"
                   v-model="email"
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
                 <v-btn primary dark light :loading="loading" block @click.native="onSubmit">Update</v-btn>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-flex>
     <app-snackbar :data="data"></app-snackbar>
   </v-layout>
 </v-container>
</template>
<script>
  const URL = 'http://127.0.0.1:8000/api/'
  const token = localStorage.getItem('token')
  import Snackbar from '../Snackbar'
  export default {
    components: {
      'app-snackbar': Snackbar
    },
    data () {
      return {
        fname: '',
        laname: '',
        email: '',
        pass: '',
        city: '',
        mobile: '',
        data: {
          message: '',
          model: false,
          context: 'error'
        },
        errors: [],
        loading: false,
        photo: this.myCroppa,
        p: false
      }
    },
    created () {
      this.getProfile()
    },
    methods: {
      getProfile () {
        let data = this.$auth.getUser()
        if (data) {
          this.email = data.email
          this.fname = data.first_name
          this.laname = data.last_name
          this.image = data.photo
        }
        let pageUrl = URL + 'profile?token=' + token
        this.$http.get(pageUrl)
        .then(response => {
          console.log(response)
          this.city = response.body.user.city
          this.mobile = response.body.user.mobile
        })
        .catch((error) => {
          if (error.statusText === 'Unauthorized') {
            this.$auth.destroyToken()
          }
        })
      },
      getPhoto (photo) {
        if (photo) {
          return 'http://127.0.0.1:8000/gallery/user/thumbs/' + photo
        }
      },
      onSubmit () {
        this.loading = true
        this.$http.post('http://127.0.0.1:8000/api/signup',
            { fname: this.fname, laname: this.laname, email: this.email, photo: this.photo.generateDataUrl() },
            )
            .then(
              (response) => {
                if (response.status === 201) {
                  this.message = response.body.message
                  this.data = {
                    model: true,
                    context: 'error',
                    message: 'Oh you have to remove the errors first'
                  }
                }
                this.loading = false
                console.log(response)
              }
            )
            .catch(
                (error) => {
                  this.loading = false
                  this.data = {
                    model: true,
                    context: 'error',
                    message: 'Oh you have to remove the errors first'
                  }
                  console.log(error)
                }
            )
      }
    }
  }
</script>
<style>
.round, .croppa-container{
 border-radius: 80%;
 overflow:hidden;
 width:200px;
 margin: auto;
 margin-bottom: 10px;
 height:200px;
}
</style>


Capitalize and trim new player names

Capitalize and trim new player names

<template>

Backend

          Q
          {{ lap }}

        <Player
          v-for="player in sortedPlayers"
          @deletePlayer="deletePlayer"
          @editPlayer="editPlayer"
          @playerFinishedLap="playerFinishedLap"
          @playerUnfinishedLap="playerUnfinishedLap"
          :hasButtons="true"
          :lapCount="lapCount"
          :key="player['.key']"
          :player="player" />

    <form @submit.prevent="addOrSavePlayer">
      <input id="name" placeholder="Name" type="text" required v-model="newPlayer.name" />
      Car
      <select id="carColor" required v-model="newPlayer.carColor">
        <option v-for="carColor in carColors" :value="carColor">{{ carColor | capitalize }}</option>
      </select>
      Sticker
      <select for="stickerColor" required v-model="newPlayer.stickerColor">
        <option v-for="stickerColor in stickerColors" :value="stickerColor">{{ stickerColor | capitalize }}</option>
      </select>
      <button type="submit">{{ newPlayer.hasOwnProperty('.key') ? 'Save' : 'Add' }}</button>
      <button type="reset" @click="resetNewPlayer">Cancel</button>
    </form>

    Laps
    <input id="lapCount" type="number" min="1" v-model="mutableLapCount" />
    <button type="button" @click="resetLaps">Reset Laps</button>

</template>


Update c-modal.vue

Update c-modal.vue

use promisify callback

<template>

        <button type="button" @click="_click('close')">×</button>

{{title}}

{{body}}

        <button v-for="button in buttons"
          class="button"
          :role="$key"
          :type="button.type || 'button'"
           @click="_click($key)">{{button.label}}</button>

</template>


Update 32-scroll-container.vue

Update 32-scroll-container.vue

<template>

      <button class="btn btn-default btn-xs btn-title">scroll-container</button>
      <button class="btn btn-default btn-xs btn-title">内容滚动/可拖动</button>
      < >

    <swiper :options="swiperOption">
      <swiper-slide>

绝顶聪明

一天下午，我同学在建设银行十分无聊的上班，一个穿得很糟糕的女士(神经病患者)来到他窗口，给了他一张纸条要提款。

        纸条上赫然写着

        '兹派XX同志于贵银行处提取人民币'.

        然后是l后面N多个零元。

        落款是***C.P中央办公厅***。

        我同学本来想报警,可看该神经病患者女子很认真的样子,想想还是打发给保安算鸟.(~估计保安也是很闲).

        果然,保安对该女子说:'你这张条子想要提款,必须先到对面派出所,找所长盖一个章，他盖完章,你再来取钱就没问题啦。'

        该女子想都没想，直接就向派出所走去了。(这保安还真不一般,平时有点小看他了).

        大概十多分钟，排队的顾客慢慢多起来的时候，那个女子兴高采烈的回来了，举着那个条子，说：'人家说啦，办公程序简化了，不用所长批条直接就可以取钱啦。'

        我这个同学一听到这就不住的感叹:pol.ice队伍里真有高人，一句'高调'就给打发回来了。

        我这个同学和保安当时就有点傻了，营业大厅有很多人都在，怕她精神病发作起来影响正常的秩序，只好把值班主管找来了。

        主管和女患者在一边聊了几句，问你取钱做什么用呀,女患者说:'取钱买面包,蛋糕,吃的,买穿的'主管指了指不远处的地方，该女子就又高高兴兴地走了。

        保安去请教'高招',主管当时是这样对女患者说的: '我们这里是建行,只有建房子才能到这里取钱。你取钱买吃的,那肯定是粮食了,要去农行,买穿的等东西,取钱要到工商银行才行！'

        我同学打心眼里佩服呀,到底是当主管的啊!!!!

        …………

        …………

        过了一会儿,该女士又回来了.而且带来了工行的回答:'农行的人说了,这里是农行,只有农民能取钱,我是城市人口,工行的人说了,我们这里是公行,只能公的来取,母的不行!!!!,说我是贱人,要到建行取钱'

      </swiper-slide>

    </swiper>

</template>


Reduce range of global css

Reduce range of global css

<template>

        <vue-headful :title="i18n('perfTest.list.title')"></vue-headful>
        <div class="img-unit" :style="`background-image: url('${contextPath}/img/bg_perftest_banner.png')`">

        <search-bar ref="searchBar" @filter-running="runQueryFilter" @filter-schduled="runQueryFilter"
                    @create="$router.push('/perftest/new')"
                    @search="updateTableWithUrl" @change-tag="updateTableWithUrl"
                    @delete-selected-tests="deleteTests($refs.vuetable.selectedTo.join(','))">
        </search-bar>
        <vuetable
            v-show="showTable"
            ref="vuetable"
            data-path="tests"
            pagination-path=""
            detail-row-component="small-chart"
            :api-url="`${contextPath}/perftest/api/list`"
            :append-params="table.appendParams"
            :query-params="{ sort: 'sort', page: 'page.page', perPage: 'page.size' }"
            :per-page="table.pagination.perPage"
            :css="table.css.table"
            :multi-sort="true"
            :fields="tableFields"
            :load-on-start="false"
            @vuetable:pagination-data="beforePagination"
            @vuetable:loading="beforeTableLoading"
            @vuetable:loaded="tableLoaded">

            <template slot="status" slot-scope="props">
                <div class="ball"
                   data-toggle="popover"
                   data-html="true"
                   data-trigger="hover"
                   :class="{'pointer-cursor': !isRunningStatus(props.rowData.status), 'wait-cursor': isRunningStatus(props.rowData.status)}"
                   :id="`ball_${props.rowData.id}`"
                   :title="props.rowData.status.name"
                   :data-content="getStatusDataContent(props.rowData.progressMessage, props.rowData.lastProgressMessage)">
                    <img :src="`${contextPath}/img/ball/${props.rowData.status.iconName}`">

            </template>

            <template slot="testName" slot-scope="props">

                    <router-link :to="`/perftest/${props.rowData.id}`" target="_self" v-text="props.rowData.testName"></router-link>

            </template>

            <template slot="scriptName" slot-scope="props">
                <div class="ellipsis scriptName"
                     data-toggle="popover"
                     data-trigger="hover"
                     data-placement="top"
                     :title="i18n('perfTest.list.scriptName')"
                     :data-content="`${props.rowData.scriptName}\n - ${i18n('script.list.revision')} : ${(props.rowData.scriptRevision)}`">
                    <template v-if="props.rowData.scm === 'svn'">
                        <a v-if="isAdmin"
                           :href="`/script/detail/${props.rowData.scriptName}?r=${(props.rowData.scriptRevision)}&ownerId=${(props.rowData.createdBy.userId)}`"
                           v-text="props.rowData.scriptName"
                           target="_blank">

                        <a v-else :href="`/script/detail/${props.rowData.scriptName}?r=${(props.rowData.scriptRevision)}`"
                           v-text="props.rowData.scriptName"
                           target="_blank">

                    </template>
                    <template v-else>

                    </template>

            </template>

            <template v-if="ngrinder.config.clustered" slot="region" slot-scope="props">

            </template>

            <template slot="createUser" slot-scope="props">

            </template>

            <template slot="threshold" slot-scope="props">

{{ props.rowData.duration | durationFormat('HH:mm:ss') }}

            </template>

            <template slot="startTime" slot-scope="props">

{{ props.rowData.startTime | dateFormat('YYYY-MM-DD HH:mm') }}

            </template>

            <template slot="tps" slot-scope="props">

{{ props.rowData.tps | numFormat('0,0.0') }}

            </template>

            <template slot="meanTestTime" slot-scope="props">

{{ props.rowData.meanTestTime | numFormat('0,0.0') }}

            </template>

            <template slot="errorRate" slot-scope="props">

            </template>

            <template slot="vuser" slot-scope="props">

                     {{ props.rowData.vuserPerAgent * props.rowData.agentCount | numFormat }}

            </template>

            <template slot="actions" slot-scope="props">

            </template>

        </vuetable>
        <vuetable-pagination
            ref="pagination"
            :css="table.css.pagination"
            :on-each-side=5
            @vuetable-pagination:change-page="changePage">
        </vuetable-pagination>

</template>


adjust text displayed when logged in

adjust text displayed when logged in


Add Indonezian lang to demo

Add Indonezian lang to demo

<template>
  <q-app>
    <q-transition enter="fadeIn" leave="fadeOut" mode="out-in" :duration="300" @leave="resetScroll">
      <router-view></router-view>
    </q-transition>
    <q-ajax-bar ref="bar" />
    <div
      style="padding: 0px 10px; right: 0; bottom: 100px"
      class="bg-white shadow-4 fixed z-max"
    >
      <q-select
        :options="[
          { label: 'English (US)', value: 'en-us' }
          ,{ label: 'English (UK)', value: 'en-uk' }
          ,{ label: 'Romanian', value: 'ro' }
          ,{ label: 'Italian', value: 'it' }
          //,{ label: 'Spanish', value: 'es' },
          //,{ label: 'French', value: 'fr' },
          //,{ label: 'German', value: 'de' }
          ,{ label: 'Indonezian', value: 'id' }
        ]"
        v-model="lang"
      />
    </div>
  </q-app>
</template>

<script>
export default {
  data () {
    return {
      lang: 'en-us'
    }
  },
  watch: {
    lang (lang) {
      import(`../i18n/${lang}`).then(lang => {
        this.$q.i18n.set(lang.default)
      })
    }
  },
  mounted () {
    window.bar = this.$refs.bar
    if (this.$q.platform.is.cordova) {
      console.log('on CORDOVA')
    }
  },
  methods: {
    resetScroll (el, done) {
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      done()
    }
  }
}
</script>

<style lang="stylus" src="quasar-css"></style>

<style lang="stylus">
p.caption
  margin 35px 0
  padding 12px 0 12px 12px
  border-left 4px solid #027be3
  font-weight bold
</style>

<template>
  <q-app>
    <q-transition enter="fadeIn" leave="fadeOut" mode="out-in" :duration="300" @leave="resetScroll">
      <router-view></router-view>
    </q-transition>
    <q-ajax-bar ref="bar" />
    <div
      style="padding: 0px 10px; right: 0; bottom: 100px"
      class="bg-white shadow-4 fixed z-max"
    >
      <q-select
        :options="[
          { label: 'English (US)', value: 'en-us' }
          ,{ label: 'English (UK)', value: 'en-uk' }
          ,{ label: 'Romanian', value: 'ro' }
          ,{ label: 'Italian', value: 'it' }
          //,{ label: 'Spanish', value: 'es' },
          //,{ label: 'French', value: 'fr' },
          //,{ label: 'German', value: 'de' }
        ]"
        v-model="lang"
      />
    </div>
  </q-app>
</template>

<script>
export default {
  data () {
    return {
      lang: 'en-us'
    }
  },
  watch: {
    lang (lang) {
      import(`../i18n/${lang}`).then(lang => {
        this.$q.i18n.set(lang.default)
      })
    }
  },
  mounted () {
    window.bar = this.$refs.bar
    if (this.$q.platform.is.cordova) {
      console.log('on CORDOVA')
    }
  },
  methods: {
    resetScroll (el, done) {
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      done()
    }
  }
}
</script>

<style lang="stylus" src="quasar-css"></style>

<style lang="stylus">
p.caption
  margin 35px 0
  padding 12px 0 12px 12px
  border-left 4px solid #027be3
  font-weight bold
</style>