text: import{html as t,PolymerElement as e}from"../../../../@polymer/polymer/polymer-element.js";import{dom as i}from"../../../../@polymer/polymer/lib/legacy/polymer.dom.js";import"../../../../@polymer/polymer/lib/elements/dom-if.js";import"../../../simple-tooltip/simple-tooltip.js";import"../../../../@polymer/polymer/lib/elements/dom-repeat.js";import"../../../../@polymer/app-route/app-location.js";import"../../../../@polymer/app-route/app-route.js";import"../elmsln-base-deps.js";import"../../../../@polymer/app-layout/app-header/app-header.js";import"../../../../@polymer/app-layout/app-toolbar/app-toolbar.js";import"../../../../@polymer/iron-ajax/iron-ajax.js";import"../../../../@polymer/paper-toggle-button/paper-toggle-button.js";import"../../../../@polymer/paper-item/paper-item.js";import"../../../../@polymer/paper-badge/paper-badge.js";import"../../../../@polymer/polymer/lib/elements/dom-if.js";import"../../../../@polymer/paper-button/paper-button.js";import"../../../../@polymer/paper-input/paper-input.js";import"../../../../@polymer/paper-icon-button/paper-icon-button.js";import"../../../../@vaadin/vaadin-grid/vaadin-grid.js";import"../../../../@vaadin/vaadin-grid/vaadin-grid-filter.js";import"../../../../@vaadin/vaadin-grid/vaadin-grid-sorter.js";import"../../../../@vaadin/vaadin-grid/vaadin-grid-column-group.js";import"../../../../@vaadin/vaadin-grid/vaadin-grid-selection-column.js";import"../../../../@polymer/polymer/lib/elements/dom-repeat.js";import"../../../elmsln-loading/elmsln-loading.js";import"../../../lrndesign-chart/lib/lrndesign-bar.js";import"../../../lrndesign-chart/lib/lrndesign-line.js";import"../../../lrndesign-chart/lib/lrndesign-pie.js";import"../../../simple-picker/simple-picker.js";import"../../../lrnsys-button/lrnsys-button.js";import"../../../lrndesign-avatar/lrndesign-avatar.js";import"../../../../@polymer/paper-dialog/paper-dialog.js";import"../../../materializecss-styles/materializecss-styles.js";import"../lrnapp-studio-submission/lrnapp-studio-submission.js";class LrnappStudioInstructor extends e{static get template(){return t`
      <style include="materializecss-styles">
        [hidden] {
          display: none !important;
        }
        :host {
          display: block;
          align-content: center;
          padding: .8em;
        }
        paper-dialog {
          width: 70vw;
          min-height:50vh;
        }
        vaadin-grid-table-body > vaadin-grid-cell-content {
          height: unset !important;
        }
        app-toolbar {
          background-color: #4285f4;
          color: #fff;
          margin: 20px 0;
        }
        #loading {
          width: 100%;
          z-index: 1000;
          opacity: .8;
          text-align: center;
          align-content: center;
          justify-content: center;
          height: 100vh;
          position: absolute;
          background-color: white;
        }
        .center-data {
          text-align: center;
        }
        vaadin-grid#material {
          height: 75vh;
          font-family: Roboto, sans-serif;
          --divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));
  
          --vaadin-grid-cell: {
            padding: 0;
          };
  
          --vaadin-grid-header-cell: {
            height: 3.5em;
            color: rgba(0, 0, 0, var(--dark-secondary-opacity));
            font-size: 1em;
          };
  
          --vaadin-grid-body-cell: {
            height: 3em;
            color: rgba(0, 0, 0, var(--dark-primary-opacity));
            font-size: .8em;
          };
  
          --vaadin-grid-body-row-hover-cell: {
            background-color: var(--paper-grey-200);
          };
  
          --vaadin-grid-body-row-selected-cell: {
            background-color: var(--paper-grey-100);
          };
  
          --vaadin-grid-focused-cell: {
            box-shadow: none;
            font-weight: bold;
          };
        }
  
        vaadin-grid#material .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 56px;
        }
  
        vaadin-grid#material .cell.last {
          padding-right: 24px;
        }
  
        vaadin-grid#material .cell.numeric {
          text-align: right;
        }
  
        vaadin-grid#material paper-checkbox {
          --primary-color: var(--paper-indigo-500);
          margin: 0 24px;
        }
  
        vaadin-grid#material vaadin-grid-sorter .cell {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
  
        vaadin-grid#material vaadin-grid-sorter iron-icon {
          transform: scale(0.8);
        }
  
        vaadin-grid#material vaadin-grid-sorter:not([direction]) iron-icon {
          color: rgba(0, 0, 0, var(--dark-disabled-opacity));
        }
  
        vaadin-grid#material vaadin-grid-sorter[direction] {
          color: rgba(0, 0, 0, var(--dark-primary-opacity));
        }
  
        vaadin-grid#material vaadin-grid-sorter[direction=desc] iron-icon {
          transform: scale(0.8) rotate(180deg);
        }
        vaadin-grid-sorter {
          text-align: center;
        }
  
        lrndesign-avatar {
          display: inline-block;
        }
        .avatar-label {
          display: inline-block;
          margin-left: .2em;
        }
        .assignment-button {
          height: 1em;
        }
        .project-button {
          height: 1em;
        }
        paper-badge {
          top: 0 !important;
          left: unset !important;
          right: 0;
          z-index: 1;
        }
        .avatar-link {
          color: black;
        }
        .avatar-link paper-button {
          text-transform: unset;
        }
        #selectedproject {
          display: inline-block;
        }
        #datatype {
          display: inline-block;
          vertical-align: middle;
          --paper-toggle-button-checked-bar-color:  var(--paper-green-500);
          --paper-toggle-button-checked-button-color:  var(--paper-green-500);
          --paper-toggle-button-checked-ink-color: var(--paper-green-500);
          --paper-toggle-button-unchecked-bar-color:  var(--paper-amber-900);
          --paper-toggle-button-unchecked-button-color:  var(--paper-amber-900);
          --paper-toggle-button-unchecked-ink-color: var(--paper-amber-900);
        }
        .comment-list {
          list-style-image: none;
          display: inline-block;
          padding: 0;
          margin: 0;
        }
        .stats-text {
          font-size: .8em;
          font-style: italic;
          line-height: 1em;
          padding: 0 0 0 2em;
          display: inline-block;
          text-align: right;
        }
        #selectedchart {
          padding-left: 8px;
        }
      </style>
      <app-location route="{{route}}"></app-location>
      <app-route
          route="{{route}}"
          pattern="[[endPoint]]/submissions/:submission"
          data="{{data}}"
          tail="{{tail}}">
      </app-route>
      <iron-ajax auto
        id="projectrequest"
        url="[[sourceProjectPath]]"
        handle-as="json"
        last-response="{{_projectData}}"
        on-response="_handleProjectResponse"></iron-ajax>
      <iron-ajax
        id="studentrequest"
        url="[[sourceStudentPath]]"
        params="[[studentParams]]"
        handle-as="json"
        last-response="{{_studentData}}"
        on-response="_handleStudentResponse"></iron-ajax>
      <div id="loading">
        <h3>Loading..</h3>
        <elmsln-loading color="grey-text" size="large"></elmsln-loading>
      </div>
      <div hidden$="[[activeProject]]">Select a project to begin reviewing work</div>
      <dropdown-select id="selectedproject" label="Project">
        <template is="dom-repeat" items="[[_toArray(projects)]]" as="project">
          <paper-item value$="[[project.id]]">[[project.attributes.title]]</paper-item>
        </template>
      </dropdown-select>
      <paper-toggle-button id="datatype" checked="{{dataType}}" disabled>
        [[dataTypeText]]
      </paper-toggle-button>
      <paper-button id="statsdialogbutton" disabled><iron-icon icon="editor:show-chart"></iron-icon> Statistics (beta)</span></paper-button>
      <paper-dialog id="statsdialog">
        <app-header>
          <app-toolbar>
            <div main-title>[[stats.header]]</div>
            <label for="selectedchart">Graph style</label>
            <simple-picker id="selectedchart" options="[[simplePickerOptions]]"></simple-picker>
            <paper-button dialog-dismiss><iron-icon icon="close"></iron-icon> Close</paper-button>
          </app-toolbar>
        </app-header>
        <paper-dialog-scrollable>
            <div class="stats-text">[[stats.overview]]</div>
          <lrndesign-bar chart-title="[[activeChart.title]]" chart-desc="[[activeChart.description]]" data="[[activeChart.data]]"></lrndesign-bar>
        </paper-dialog-scrollable>
        </div>
      </paper-dialog>
      <vaadin-grid hidden$="[[!students]]" id="material" aria-label="Student project list" items="[[_toArray(students)]]">
        <vaadin-grid-column resizable>
          <template class="header">
            <vaadin-grid-sorter id="sorter" path="sis.sortable_name">Student</vaadin-grid-sorter>
          </template>
          <template>
            <a href$="[[basePath]]lrnapp-open-studio/projects?author=[[item.id]]&project=[[activeProject]]" tabindex="-1" target="_blank" class="avatar-link ferpa-protect">
              <paper-button class="avatar-button">
                <lrndesign-avatar label="[[item.name]]" src="[[item.avatar]]"></lrndesign-avatar>
                <span class="avatar-label">[[item.sis.sortable_name]]</span>
              </paper-button>
            </a>
          </template>
          <template class="footer">
            <vaadin-grid-filter aria-label="Student" path="sis.sortable_name" value="[[_filterName]]">
              <paper-input slot="filter" label="Student" value="{{_filterName::input}}" focus-target></paper-input>
            </vaadin-grid-filter>
          </template>
        </vaadin-grid-column>
        <template is="dom-repeat" items="[[_toArray(assignments)]]" as="assignment">
          <vaadin-grid-column resizable>
            <template class="header">
              <span>[[assignment.title]]</span>
            </template>
            <template>
              <template is="dom-if" if="[[_submissionStatus(item, assignment, dataType)]]">
                <template is="dom-if" if="[[!dataType]]">
                  <lrnsys-button icon="[[_submissionPiece(item, assignment, 'icon')]]" id$="student-[[item.id]]-assignment-[[assignment.id]]-submission-[[_submissionID(item, assignment)]]" label="[[_submissionPiece(item, assignment, 'title')]]" on-click="_setActiveSubmission">
                  </lrnsys-button>
                </template>
                <template is="dom-if" if="[[dataType]]">
                  <ul class="comment-list">
                  <template is="dom-repeat" items="[[_submissionPiece(item, assignment, 'comments')]]" as="commented">
                    <li>
                      <lrnsys-button icon="communication:comment" id$="student-[[item.id]]-assignment-[[assignment.id]]-submission-[[commented]]" label="#[[_commentIndex(index)]]" on-click="_setActiveComment">
                      </lrnsys-button>
                    </li>
                  </template>
                  </ul>
                </template>
              </template>
              <template is="dom-if" if="[[!_submissionStatus(item, assignment, dataType)]]">
                <paper-button disabled class="project-button" id$="student-[[item.id]]-assignment-[[assignment.id]]-submission-null">X</paper-button>
              </template>
              <template is="dom-if" if="[[_commentCount(item, assignment, dataType)]]">
                <paper-badge id$="student-[[item.id]]-assignment-[[assignment.id]]-tip" for="student-[[item.id]]-assignment-[[assignment.id]]" label="[[_commentCount(item, assignment, dataType)]]"></paper-badge>
                <simple-tooltip for="student-[[item.id]]-assignment-[[assignment.id]]-tip">Comments left on classmates [[assignment.title]]</simple-badge>
              </template>
            </template>
          </vaadin-grid-column>
        </template>
      </vaadin-grid>
      <paper-dialog id="dialog" style="overflow: visible;">
        <app-header>
          <app-toolbar>
            <span style="width:15em;">
              <paper-icon-button on-click="_changeActiveItem" id="prevstudent" icon="arrow-upward" title="previous student"></paper-icon-button>
              <paper-icon-button on-click="_changeActiveItem" id="nextstudent" icon="arrow-downward" title="next student"></paper-icon-button>
              <lrndesign-avatar class="ferpa-protect" label="[[activeData.student.name]]" src="[[activeData.student.avatar]]" style="display:inline-block;vertical-align:middle;"></lrndesign-avatar>
              <span class="avatar-label ferpa-protect" style="margin-left:1em;">[[activeData.student.sis.sortable_name]]</span>
            </span>
            <paper-icon-button on-click="_changeActiveItem" id="prevassignment" icon="arrow-back" title="previous assignment" style="margin-left:1em;"></paper-icon-button>
            <paper-icon-button on-click="_changeActiveItem" id="nextassignment" icon="arrow-forward" title="next assignment"></paper-icon-button>
            <span style="font-weight:bold;" main-title>Assignment: [[activeData.assignment.title]]</span>
            <paper-button dialog-dismiss><iron-icon icon="close"></iron-icon> Close</paper-button>
          </app-toolbar>
        </app-header>
        <paper-dialog-scrollable>
          <div hidden$="[[!activeData.submission]]">
            <lrnapp-studio-submission-page base-path="[[basePath]]" route="{{tail}}" id="[[data.submission]]" end-point="[[basePath]]lrnapp-studio-submission" csrf-token="[[csrfToken]]" hide-menu-bar></lrnapp-studio-submission-page>
          </div>
          <div hidden$="[[activeData.submission]]">
            <div>
              <h2>No submission for this assignment</h2>
              <p>This student has not submitted anything for this assignment at this time.</p>
            </div>
          </div>
        </paper-dialog-scrollable>
      </paper-dialog>`}static get tag(){return"lrnapp-studio-instructor"}static get observers(){return["_routeChanged(route, endPoint)","_activeDataChanged(activeData.student, activeData.assignment)"]}static get properties(){return{elmslnCourse:{type:String},elmslnSection:{type:String},basePath:{type:String},csrfToken:{type:String},endPoint:{type:String},sourceProjectPath:{type:String},sourceStudentPath:{type:String},simplePickerOptions:{type:Array,value:[[{alt:"Submissions by Assignment",value:"byassignment-submissions"}],[{alt:"Comments by Assignment",value:"byassignment-comments"}],[{alt:"Commenters by Assignment",value:"byassignment-commenters"}]]},dataType:{type:Boolean,value:!1,observer:"_dataTypeChanged"},dataTypeText:{type:String,value:"Submissions"},projects:{type:Object,notify:!0},assignments:{type:Object,notify:!0},students:{type:Object,notify:!0,value:!1},_projectData:{type:Object,value:{}},studentParams:{type:Object,value:{projectId:null,type:"submission"}},_studentData:{type:Object},_numWidth:{type:String,value:"2.25em"},sourcePath:{type:String,notify:!0},basePath:{type:String,notify:!0},route:{type:String},csrfToken:{type:String},elmslnCourse:{type:String},elmslnSection:{type:String},data:{type:Object},activeProject:{type:Number,value:!1},activeData:{type:Object,value:{student:!1,assignment:!1,submission:!1}},stats:{type:Object,value:{}},activeChart:{type:Object,value:{}}}}_chartChanged(t){t.detail.value&&(this.set("activeChart.title",t.detail.value),this.notifyPath("activeChart.title"),this.set("activeChart.description","Chart of values relative to "+t.detail.value),this.notifyPath("activeChart.description"),this.set("activeChart.data",this._formatChartData(t.detail.value)),this.notifyPath("activeChart.data"))}_formatChartData(t){var e=[],i=[[]];const s=this.stats.stats,a=this._toArray(this.assignments);let n=t.split("-");if(void 0!==s[n[0]]&&void 0!==s[n[0]][n[1]])for(var o in a){let t=a[o].title;void 0!==s[n[0]][n[1]][a[o].id]?(i[0].push(s[n[0]][n[1]][a[o].id]),t+=` (${s[n[0]][n[1]][a[o].id]})`):(i[0].push(0),t+=" (0)"),e.push(t)}return{labels:e,series:i}}_dataTypeChanged(t,e){void 0!==e&&(this.dataTypeText=t?"Comments (beta)":"Submissions")}_commentIndex(t){return t+1}_routeChanged(t,e){if("string"==typeof t.path){if("string"==typeof e&&t.path.startsWith(e))return;window.location.reload()}}_activeDataChanged(t,e){void 0!==t.id&&(-1==this._getObjectByPosition(this.students,t.id,-1)?this.$.prevstudent.disabled=!0:this.$.prevstudent.disabled=!1,-1==this._getObjectByPosition(this.students,t.id,1)?this.$.nextstudent.disabled=!0:this.$.nextstudent.disabled=!1,-1==this._getObjectByPosition(this.assignments,e.id,-1)?this.$.prevassignment.disabled=!0:this.$.prevassignment.disabled=!1,-1==this._getObjectByPosition(this.assignments,e.id,1)?this.$.nextassignment.disabled=!0:this.$.nextassignment.disabled=!1)}_projectChanged(t){this.$.loading.hidden=!1,this.__rememberClick=this.$.statsdialogbutton,this.$.statsdialogbutton.disabled=!1,this.$.datatype.disabled=!1,this.activeProject=t.detail.value,this.studentParams.projectId=this.activeProject,this.$.studentrequest.generateRequest()}_openStatsDialog(t){this.$.statsdialog.toggle()}connectedCallback(){super.connectedCallback(),this.$.statsdialogbutton.addEventListener("click",this._openStatsDialog.bind(this)),this.$.statsdialog.addEventListener("opened-changed",this._accessibleFocus.bind(this)),this.$.dialog.addEventListener("opened-changed",this._accessibleFocus.bind(this)),this.$.selectedproject.addEventListener("dropdown-select-changed",this._projectChanged.bind(this)),this.$.selectedchart.addEventListener("value-changed",this._chartChanged.bind(this))}disconnectedCallback(){this.$.statsdialogbutton.removeEventListener("click",this._openStatsDialog.bind(this)),this.$.statsdialog.removeEventListener("opened-changed",this._accessibleFocus.bind(this)),this.$.dialog.removeEventListener("opened-changed",this._accessibleFocus.bind(this)),this.$.selectedproject.removeEventListener("dropdown-select-changed",this._projectChanged.bind(this)),this.$.selectedchart.removeEventListener("value-changed",this._chartChanged.bind(this)),super.disconnectedCallback()}_accessibleFocus(t){t.detail||(document.body.classList.remove("scroll-disabled"),this.__rememberClick.focus())}_handleProjectResponse(t){this.$.loading.hidden=!0,this.set("projects",this._projectData.data.projects)}_handleStudentResponse(t){this.$.loading.hidden=!0,this.set("students",[]),this.set("students",this._studentData.data.students),this.set("assignments",[]),this.set("assignments",this._studentData.data.assignments),this.stats=this._studentData.data.stats,this.set("stats.header","Statistics for "+this.projects["project-"+this.activeProject].attributes.title),setTimeout(()=>{this.shadowRoot.querySelector("#sorter").direction="asc"},200)}_changeActiveItem(t){var e,s;switch(document.body.classList.add("scroll-disabled"),i(t).localTarget.id){case"prevstudent":-1!=(e=this._getObjectByPosition(this.students,this.activeData.student.id,-1))&&void 0!==e.assignments[this.activeData.assignment.id]&&(this.set("activeData.student",{}),this.set("activeData.student",e),this.set("activeData.submission",{}),this.set("activeData.submission",e.assignments[this.activeData.assignment.id]),this.set("route.path",this.endPoint+"/submissions/"+this.activeData.submission.id));break;case"nextstudent":-1!=(e=this._getObjectByPosition(this.students,this.activeData.student.id,1))&&void 0!==e.assignments[this.activeData.assignment.id]&&(this.set("activeData.student",{}),this.set("activeData.student",e),this.set("activeData.submission",{}),this.set("activeData.submission",e.assignments[this.activeData.assignment.id]),this.set("route.path",this.endPoint+"/submissions/"+this.activeData.submission.id));break;case"prevassignment":-1!=(s=this._getObjectByPosition(this.assignments,this.activeData.assignment.id,-1))&&(this.set("activeData.assignment",{}),this.set("activeData.assignment",s),void 0!==this.activeData.student.assignments[s.id].id?(this.set("activeData.submission",this.activeData.student.assignments[s.id]),this.set("activeData.submission",{}),this.set("route.path",this.endPoint+"/submissions/"+this.activeData.student.assignments[s.id].id)):this.set("activeData.submission",!1));break;case"nextassignment":-1!=(s=this._getObjectByPosition(this.assignments,this.activeData.assignment.id,1))&&(this.set("activeData.assignment",{}),this.set("activeData.assignment",s),void 0!==this.activeData.student.assignments[s.id].id?(this.set("activeData.submission",{}),this.set("activeData.submission",this.activeData.student.assignments[s.id]),this.set("route.path",this.endPoint+"/submissions/"+this.activeData.student.assignments[s.id].id)):this.set("activeData.submission",!1))}}_getObjectByPosition(t,e,i){var s=Object.keys(t).sort((function(e,i){return void 0!==t[e].sis?t[e].sis.sortable_name>t[i].sis.sortable_name?1:t[e].sis.sortable_name<t[i].sis.sortable_name?-1:0:e-i}));void 0!==e&&(e=e.toString());var a=s.indexOf(e);return-1==a&&(a=s.indexOf(parseInt(e))),-1==i&&a>0||1==i&&a<s.length-1?t[s[a+i]]:-1}_submissionStatus(t,e,i){if(null!=t){if(!i&&void 0!==t.assignments[e.id]&&void 0!==t.assignments[e.id].id)return!0;if(i&&void 0!==t.assignmentComments[e.id]&&this._toArray(t.assignmentComments[e.id]).length>0)return!0}return!1}_submissionID(t,e){return null!=t&&void 0!==t.assignments[e.id]&&void 0!==t.assignments[e.id].id&&t.assignments[e.id].id}_submissionPiece(t,e,i){if(null!=t&&void 0!==t.assignments[e.id]&&void 0!==t.assignments[e.id].id){var s=t.assignments[e.id];switch(i){case"url":return this.basePath+"lrnapp-studio-submission/submissions/"+s.id;case"title":return s.attributes.title;case"icon":return s.meta.state_icon;case"color":return s.meta.state_color;case"comments":return this._toArray(t.assignmentComments[e.id])}}return""}_commentCount(t,e,i){return!i&&null!=t&&void 0!==t.assignmentComments[e.id]&&this._toArray(t.assignmentComments[e.id]).length}_setActiveSubmission(t){var e=i(t).localTarget;this.__rememberClick=e;var s=e.id.split("-");this.set("activeData.student",this.students[s[1]]),this.set("activeData.assignment",this.assignments[s[3]]),this.set("activeData.submission",this.students[s[1]].assignments[s[3]]),this.set("route.path",this.endPoint+"/submissions/"+s[s.length-1]),document.body.classList.add("scroll-disabled"),this.$.dialog.toggle()}_setActiveComment(t){this.$.nextassignment.disabled=!0,this.$.prevassignment.disabled=!0,this.$.nextstudent.disabled=!0,this.$.prevstudent.disabled=!0;var e=i(t).localTarget;this.__rememberClick=e;var s=e.id.split("-");this.set("activeData.student",this.students[s[1]]),this.set("activeData.assignment",this.assignments[s[3]]),this.set("activeData.submission",this.students[s[1]].assignments[s[3]]),this.set("route.path",this.endPoint+"/submissions/"+s[s.length-1]),document.body.classList.add("scroll-disabled"),this.$.dialog.toggle()}_toArray(t){return null==t?[]:Object.keys(t).map((function(e){return t[e]}))}}window.customElements.define(LrnappStudioInstructor.tag,LrnappStudioInstructor);export{LrnappStudioInstructor};