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};